@gov-design-system-ce/components 0.0.5 → 0.0.7

package/dist/cjs/gov-app.cjs.entry.js

@@ -2908,6 +2908,43 @@ class AccordionPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 
+		<h4>Accordion - extra small</h4>
+		<div class="container-view">
+			<gov-accordion size="xs">
+				<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Kontaktní osoby" disabled is-expanded>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Působnost v agendách">
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Zřizované organizace">
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+			</gov-accordion>
+			<br>
+			<gov-accordion size="xs">
+				<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
+					<gov-icon slot="icon" name="info"></gov-icon>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Kontaktní osoby">
+					<gov-icon slot="icon" name="info"></gov-icon>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Působnost v agendách">
+					<gov-icon slot="icon" name="info"></gov-icon>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+				<gov-accordion-item label="Zřizované organizace">
+					<gov-icon slot="icon" name="info"></gov-icon>
+					<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+				</gov-accordion-item>
+			</gov-accordion>
 			<h4>Accordion - small</h4>
 			<div class="container-view">
 				<gov-accordion size="s">
@@ -2945,6 +2982,27 @@ class AccordionPage extends HTMLElement {
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-accordion-item>
 				</gov-accordion>
+				<br>
+				<h4>Without border</h4>
+				<gov-accordion size="s" no-border>
+					<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Kontaktní osoby">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Působnost v agendách">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Zřizované organizace">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+				</gov-accordion>
 			</div>
 
 			<h4>Accordion - medium (default)</h4>
@@ -3030,7 +3088,44 @@ class AccordionPage extends HTMLElement {
 
 
 
-
+			<h4>Accordion Secondary - extra small</h4>
+			<div class="container-view">
+				<gov-accordion size="xs" variant="secondary">
+					<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon" disabled>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Kontaktní osoby">
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Působnost v agendách">
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Zřizované organizace">
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+				</gov-accordion>
+				<br>
+				<gov-accordion size="xs" variant="secondary">
+					<gov-accordion-item trigger-tag="h1" label="Font Awesome Icon">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Kontaktní osoby">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Působnost v agendách">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+					<gov-accordion-item label="Zřizované organizace">
+						<gov-icon slot="icon" name="info"></gov-icon>
+						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
+					</gov-accordion-item>
+				</gov-accordion>
+			</div>
 			<h4>Accordion Secondary - small</h4>
 			<div class="container-view">
 				<gov-accordion size="s" variant="secondary">
@@ -3091,7 +3186,7 @@ class AccordionPage extends HTMLElement {
 				<br>
 				<gov-accordion variant="secondary">
 					<gov-accordion-item trigger-tag="h1" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet dictum consectetur. Sed posuere tellus in lobortis aliquam. Pellentesque a porttitor purus." is-expanded>
-						<gov-icon slot="icon" icon="info"></gov-icon>
+						<gov-icon slot="icon" name="info"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 						<gov-badge variant="primary" size="s" slot="suffix">super badge</gov-badge>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
@@ -3245,6 +3340,33 @@ class BadgePage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 			<h1>Badges</h1>
+			<h4>Badges close</h4>
+			<div class="container-view">
+			<gov-badge variant="primary" size="s">
+				Not clickable S
+				<gov-button slot="right" variant="primary" type="solid" wcag-label="Zavřít vše" size="s">
+					<gov-icon slot="right-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-badge>
+			<gov-badge variant="primary" size="m">
+				Not clickable M
+				<gov-button slot="right" variant="primary" type="solid" wcag-label="Zavřít vše" size="m">
+					<gov-icon slot="right-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-badge>
+			<gov-badge variant="primary" size="l">
+				Not clickable L
+				<gov-button slot="right" variant="primary" type="solid" wcag-label="Zavřít vše" size="l">
+					<gov-icon slot="right-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-badge>
+			<gov-badge variant="primary" size="xl">
+				Not clickable XL
+				<gov-button slot="right" variant="primary" type="solid" wcag-label="Zavřít vše" size="xl">
+					<gov-icon slot="right-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-badge>
+			</div>
 			<h4>Badges - primary (default)</h4>
 			<div class="container-view">
 				<gov-badge variant="primary" size="xs">
@@ -3592,22 +3714,22 @@ class ButtonPage extends HTMLElement {
 				</gov-button>
 				<br>
 				<gov-button variant="primary" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="primary" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="primary" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="primary" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="primary" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="primary" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<h4>Buttons - primary (expanded)</h4>
@@ -3621,22 +3743,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - primary (inversed)</h4>
 			<div class="container-view gov-bg--primary-600">
 				<gov-button inverse variant="primary" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -3676,22 +3798,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - primary (outlined inversed)</h4>
 			<div class="container-view gov-bg--primary-600">
 				<gov-button inverse variant="primary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="outlined" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="outlined" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="outlined" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 
@@ -3730,22 +3852,86 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - primary (base inversed)</h4>
 			<div class="container-view gov-bg--primary-600">
 				<gov-button inverse variant="primary" type="base" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="base" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="base" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="base" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="base" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="primary" type="base" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - primary (link)</h4>
+			<div class="container-view">
+				<gov-button variant="primary" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="primary" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="primary" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="primary" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button variant="primary" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button variant="primary" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - primary (link inversed)</h4>
+			<div class="container-view gov-bg--primary-600">
+				<gov-button inverse variant="primary" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="primary" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="primary" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large Primary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="primary" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large Primary
+					<gov-icon inverse slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button inverse variant="primary" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button inverse variant="primary" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
 				</gov-button>
 			</div>
 			<hr />
@@ -3781,22 +3967,22 @@ class ButtonPage extends HTMLElement {
 				</gov-button>
 				<br>
 				<gov-button variant="secondary" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="secondary" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -3804,22 +3990,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - secondary (inversed)</h4>
 			<div class="container-view gov-bg--secondary-800">
 				<gov-button inverse variant="secondary" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -3859,22 +4045,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - secondary (outlined inversed)</h4>
 			<div class="container-view gov-bg--secondary-800">
 				<gov-button inverse variant="secondary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="outlined" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="outlined" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="outlined" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -3914,22 +4100,86 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - secondary (base inversed)</h4>
 			<div class="container-view gov-bg--secondary-800">
 				<gov-button inverse variant="secondary" type="base" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="base" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="base" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="base" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="base" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="secondary" type="base" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - secondary (link)</h4>
+			<div class="container-view">
+				<gov-button variant="secondary" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="secondary" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="secondary" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="secondary" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button variant="secondary" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button variant="secondary" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - secondary (link inversed)</h4>
+			<div class="container-view gov-bg--secondary-800">
+				<gov-button inverse variant="secondary" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="secondary" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="secondary" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large Secondary
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="secondary" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large Secondary
+					<gov-icon inverse slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button inverse variant="secondary" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button inverse variant="secondary" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
 				</gov-button>
 			</div>
 			<hr />
@@ -3965,22 +4215,22 @@ class ButtonPage extends HTMLElement {
 				</gov-button>
 				<br>
 				<gov-button variant="warning" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="warning" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -3988,22 +4238,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - warning (inversed)</h4>
 			<div class="container-view gov-bg--warning-500">
 				<gov-button inverse variant="warning" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4043,22 +4293,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - warning (outlined inversed)</h4>
 			<div class="container-view gov-bg--warning-500">
 				<gov-button inverse variant="warning" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="outlined" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="outlined" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="outlined" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4098,22 +4348,86 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - warning (base inversed)</h4>
 			<div class="container-view gov-bg--warning-500">
 				<gov-button inverse variant="warning" type="base" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="base" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="base" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="base" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="base" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="warning" type="base" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - warning (link)</h4>
+			<div class="container-view">
+				<gov-button variant="warning" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="warning" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="warning" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="warning" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button variant="warning" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button variant="warning" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - warning (link inversed)</h4>
+			<div class="container-view gov-bg--warning-500">
+				<gov-button inverse variant="warning" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="warning" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="warning" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large warning
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="warning" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large warning
+					<gov-icon inverse slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button inverse variant="warning" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button inverse variant="warning" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
 				</gov-button>
 			</div>
 			<hr />
@@ -4149,22 +4463,22 @@ class ButtonPage extends HTMLElement {
 				</gov-button>
 				<br>
 				<gov-button variant="success" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="success" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4172,22 +4486,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - success (inversed)</h4>
 			<div class="container-view gov-bg--success-500">
 				<gov-button inverse variant="success" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4227,22 +4541,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - success (outlined inversed)</h4>
 			<div class="container-view gov-bg--success-500">
 				<gov-button inverse variant="success" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="outlined" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="outlined" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="outlined" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4282,22 +4596,86 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - success (base inversed)</h4>
 			<div class="container-view gov-bg--success-500">
 				<gov-button inverse variant="success" type="base" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="base" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="base" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="base" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="base" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="success" type="base" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - success (link)</h4>
+			<div class="container-view">
+				<gov-button variant="success" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="success" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="success" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="success" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button variant="success" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button variant="success" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - success (link inversed)</h4>
+			<div class="container-view gov-bg--success-500">
+				<gov-button inverse variant="success" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="success" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="success" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large success
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="success" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large success
+					<gov-icon inverse slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button inverse variant="success" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button inverse variant="success" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
 				</gov-button>
 			</div>
 			<hr />
@@ -4333,22 +4711,22 @@ class ButtonPage extends HTMLElement {
 				</gov-button>
 				<br>
 				<gov-button variant="error" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button variant="error" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4356,22 +4734,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - error (inversed)</h4>
 			<div class="container-view gov-bg--error-400">
 				<gov-button inverse variant="error" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4411,22 +4789,22 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - error (outlined inversed)</h4>
 			<div class="container-view gov-bg--error-400">
 				<gov-button inverse variant="error" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="outlined" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="outlined" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="outlined" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 			</div>
 			<hr />
@@ -4466,22 +4844,86 @@ class ButtonPage extends HTMLElement {
 			<h4>Buttons - error (base inversed)</h4>
 			<div class="container-view gov-bg--error-400">
 				<gov-button inverse variant="error" type="base" size="s">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="base" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="base" size="l">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="base" size="xl" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="base" loading="false">
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 				</gov-button>
 				<gov-button inverse variant="error" type="base" loading="true" disabled>
-					<gov-icon slot="left-icon" name="cross"></gov-icon>
+					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - error (link)</h4>
+			<div class="container-view">
+				<gov-button variant="error" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="error" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="error" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button variant="error" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button variant="error" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button variant="error" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
+				</gov-button>
+			</div>
+			<hr />
+
+			<h4>Buttons - error (link inversed)</h4>
+			<div class="container-view gov-bg--error-400">
+				<gov-button inverse variant="error" type="link" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="error" type="link" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="error" type="link" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large error
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<gov-button inverse variant="error" type="link" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large error
+					<gov-icon inverse slot="right-icon" name="info"></gov-icon>
+				</gov-button>
+				<br>
+				<gov-button inverse variant="error" type="link" href="http://localhost:3333/button" loading="false">
+					Odeslat
+				</gov-button>
+				<gov-button inverse variant="error" type="link" href="http://localhost:3333/button" loading="true" disabled>
+					Odeslat
 				</gov-button>
 			</div>
 			<hr />
@@ -4702,7 +5144,7 @@ class ErrorPage extends HTMLElement {
     this.innerHTML = `
 		<h2>Error</h2>
 		<gov-error-code>
-			<gov-icon slot="icon" name="400" type="complex"></gov-icon>
+			<gov-icon slot="icon" name="card-400" type="complex"></gov-icon>
 			<h2 class="gov-text--6xl">Page Not Found</h2>
 			<p class="gov-text--l">Sorry, the page you are looking for does not exist.</p>
 		</gov-error-code>
@@ -4904,7 +5346,7 @@ class FormsPage extends HTMLElement {
 						</gov-form-file>
 					</gov-form-group>
 					<gov-form-message slot="bottom" variant="error">
-						<gov-icon slot="icon" name="warning"></gov-icon>
+						<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 						Required
 					</gov-form-message>
 				</gov-form-control>
@@ -4969,7 +5411,7 @@ class FormsPage extends HTMLElement {
 						</gov-form-file>
 					</gov-form-group>
 					<gov-form-message slot="bottom" variant="error">
-						<gov-icon slot="icon" name="warning"></gov-icon>
+						<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 						Required
 					</gov-form-message>
 				</gov-form-control>
@@ -4993,7 +5435,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-multi-select>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5005,7 +5447,7 @@ class FormsPage extends HTMLElement {
 					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr"></gov-form-autocomplete>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5029,7 +5471,7 @@ class FormsPage extends HTMLElement {
 					<gov-form-input multiline rows="3" name="test-me" value="Value of textarea"></gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5140,7 +5582,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-checkbox>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5151,7 +5593,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-checkbox>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5162,7 +5604,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-checkbox>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5173,7 +5615,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-checkbox>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5270,7 +5712,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-radio>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5285,7 +5727,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-radio>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5300,7 +5742,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-radio>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5315,7 +5757,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-radio>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5462,7 +5904,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5477,7 +5919,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5492,7 +5934,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5619,6 +6061,7 @@ class FormsPage extends HTMLElement {
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
 					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
@@ -5672,7 +6115,7 @@ class FormsPage extends HTMLElement {
 					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5684,7 +6127,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5696,7 +6139,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5728,6 +6171,14 @@ class FormsPage extends HTMLElement {
 				</gov-form-group>
 			</gov-form-control>
 
+			<h3>
+				Password power
+			</h3>
+			<gov-form-password-power power="0"></gov-form-password-power>
+			<gov-form-password-power power="1">slabé</gov-form-password-power>
+			<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
@@ -5753,7 +6204,6 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			
 			<gov-form-control size="l">
 				<gov-form-group>
 					<gov-form-switch name="test-me" value="me" checked>
@@ -5772,7 +6222,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5783,7 +6233,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5794,7 +6244,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -5805,7 +6255,7 @@ class FormsPage extends HTMLElement {
 					</gov-form-switch>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
-					<gov-icon slot="icon" name="warning"></gov-icon>
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
@@ -6119,55 +6569,85 @@ class LayoutPage extends HTMLElement {
 		<h2>Layout</h2>
 
 		<gov-container>
-			<gov-layout>
-				<gov-layout-content>
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
-				<gov-layout-aside position="right">
-					<p><b>Aside</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada ut urna sit amet egestas. Ut hendrerit tellus non purus porta, sit amet convallis lacus pellentesque. Sed ultricies metus in tempor viverra. Sed vehicula libero ipsum, non fringilla nulla dapibus ac. Etiam a feugiat mauris. Aenean ultrices at nisi nec dapibus. In hac habitasse platea dictumst. Pellentesque sit amet aliquet nibh.</p>
-				</gov-layout-aside>
+			<gov-layout type="stretch">
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
 			<gov-layout>
-				<gov-layout-aside position="left">
-					<p><b>Aside</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada ut urna sit amet egestas. Ut hendrerit tellus non purus porta, sit amet convallis lacus pellentesque. Sed ultricies metus in tempor viverra. Sed vehicula libero ipsum, non fringilla nulla dapibus ac. Etiam a feugiat mauris. Aenean ultrices at nisi nec dapibus. In hac habitasse platea dictumst. Pellentesque sit amet aliquet nibh.</p>
-				</gov-layout-aside>
-				<gov-layout-content>
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
 			<gov-layout>
-				<gov-layout-aside position="right">
-					<p><b>Aside</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada ut urna sit amet egestas. Ut hendrerit tellus non purus porta, sit amet convallis lacus pellentesque. Sed ultricies metus in tempor viverra. Sed vehicula libero ipsum, non fringilla nulla dapibus ac. Etiam a feugiat mauris. Aenean ultrices at nisi nec dapibus. In hac habitasse platea dictumst. Pellentesque sit amet aliquet nibh.</p>
-				</gov-layout-aside>
-				<gov-layout-content>
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
-			<gov-layout>
-				<gov-layout-content>
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+			<gov-layout type="aside" variant="right">
+				<gov-layout-column>
+					<p><b>Aside right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
-			<gov-layout>
-				<gov-layout-content align="left">
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+			<gov-layout type="aside" variant="left">
+				<gov-layout-column>
+					<p><b>Aside left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
-			<gov-layout>
-				<gov-layout-content align="center">
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+			<gov-layout type="aside" variant="right" inverse>
+				<gov-layout-column>
+					<p><b>Aside right inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside right inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
-			<gov-layout>
-				<gov-layout-content align="right">
-					<p><b>Content</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
-				</gov-layout-content>
+			<gov-layout type="aside" variant="left" inverse>
+				<gov-layout-column>
+					<p><b>Aside left inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside left inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="text" variant="left">
+				<gov-layout-column>
+					<p><b>Text left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="text">
+				<gov-layout-column>
+					<p><b>Text</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="text" variant="right">
+				<gov-layout-column>
+					<p><b>Text right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
 			</gov-layout>
 			<br>
 		</gov-container>
@@ -6347,7 +6827,7 @@ 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>
 			<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>
@@ -6370,8 +6850,8 @@ class LoadingPage extends HTMLElement {
 		`;
   }
 }
-if (customElements.get("loading-page") === undefined) {
-  customElements.define("loading-page", LoadingPage);
+if (customElements.get('loading-page') === undefined) {
+  customElements.define('loading-page', LoadingPage);
 }
 
 class NavPage extends HTMLElement {
@@ -6409,8 +6889,9 @@ class PaginationPage extends HTMLElement {
     setTimeout(() => {
       const bagr = document.getElementById('bagr');
       if (bagr) {
-        bagr.addEventListener('gov-page', e => {
-          console.log(e);
+        bagr.addEventListener('gov-page', () => {
+          // console.log(e)
+          // bagr.setAttribute('current', String(e))
         });
       }
     }, 500);
@@ -6424,6 +6905,15 @@ class PaginationPage extends HTMLElement {
 		<gov-pagination type="select" total="212"  wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
 		<br>
 		<gov-pagination type="select" size="s" total="212"  wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+		<br>
+		<br>
+		<gov-pagination variant="secondary" total="212" current="2" wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+		<br>
+		<gov-pagination size="s" variant="secondary" wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+		<br>
+		<gov-pagination type="select" variant="secondary" total="212"  wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
+		<br>
+		<gov-pagination type="select" variant="secondary" size="s" total="212"  wcag-label="Stránkování pro sekci dokumenty"></gov-pagination>
 
 		`;
   }
@@ -6827,13 +7317,13 @@ class StepperPage extends HTMLElement {
 
 			<gov-stepper>
 				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-					<gov-icon slot="prefix" name="check"></gov-icon>
+					<gov-icon slot="prefix" name="check-lg"></gov-icon>
 					<div slot="content">
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</div>
 				</gov-stepper-item>
 				<gov-stepper-item label="Chybový krok" variant="error">
-					<gov-icon slot="prefix" name="cross"></gov-icon>
+					<gov-icon slot="prefix" name="x-lg"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item collapsible="true" label="Krok s textem, obrázkem, tlačítkem" variant="primary" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
 					<span slot="prefix">2</span>
@@ -6854,10 +7344,10 @@ class StepperPage extends HTMLElement {
 
 			<gov-stepper size="s">
 				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
-					<gov-icon slot="prefix" name="check"></gov-icon>
+					<gov-icon slot="prefix" name="check-lg"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item label="Chybový krok" variant="error">
-					<gov-icon slot="prefix" name="cross"></gov-icon>
+					<gov-icon slot="prefix" name="x-lg"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item label="Krok s textem, obrázkem, tlačítkem" variant="primary">
 					<span slot="prefix">2</span>
@@ -6878,10 +7368,10 @@ class StepperPage extends HTMLElement {
 
 			<gov-stepper size="xs">
 				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
-					<gov-icon slot="prefix" name="check"></gov-icon>
+					<gov-icon slot="prefix" name="check-lg"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item label="Chybový krok" variant="error">
-					<gov-icon slot="prefix" name="cross"></gov-icon>
+					<gov-icon slot="prefix" name="x-lg"></gov-icon>
 				</gov-stepper-item>
 				<gov-stepper-item label="Krok s textem, obrázkem, tlačítkem" variant="primary">
 					<span slot="prefix">2</span>
@@ -7129,6 +7619,96 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
+
+			<h2>Vertical tabs</h2>
+			<gov-tabs id="po" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum
+						tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového
+						návrhu vložen smysluplný obsah.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="TAB #2" default>
+					<p>Dalsi super tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou
+						strukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný
+						text, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně
+						atd.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="TAB #3">
+					<p>Dalsi super tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“).</p>
+				</gov-tabs-item>
+			</gov-tabs>
+			<gov-tabs id="po" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">
+				<gov-tabs-item label="Muj super tab">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum
+						tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového
+						návrhu vložen smysluplný obsah.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="Dalsi super tab s dlouhým popisem" default>
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou
+						strukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný
+						text, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně
+						atd.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="Další super tab s naprosto nesmyslně dlouhým popisem, který se doufám nevyužije">
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“).</p>
+				</gov-tabs-item>
+			</gov-tabs>
+			<gov-tabs id="po" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum
+						tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového
+						návrhu vložen smysluplný obsah.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="TAB #2" default>
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou
+						strukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný
+						text, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně
+						atd.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="TAB #3">
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“).</p>
+				</gov-tabs-item>
+			</gov-tabs>
+			<gov-tabs id="po" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">
+				<gov-tabs-item label="Muj super tab">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum
+						tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového
+						návrhu vložen smysluplný obsah.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="Dalsi super tab s dlouhým popisem" default>
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou
+						strukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný
+						text, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně
+						atd.</p>
+				</gov-tabs-item>
+				<gov-tabs-item label="Další super tab s naprosto nesmyslně dlouhým popisem, který se doufám nevyužije">
+					<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
+						pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
+						(např. opakování „asdf asdf asdf…“).</p>
+				</gov-tabs-item>
+			</gov-tabs>
 		`;
   }
 }
@@ -7207,6 +7787,45 @@ class TilesPage extends HTMLElement {
 					</p>
 				</gov-tile>
 			</gov-tiles>
+			<br>
+			<gov-tiles columns="3" no-border>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-tile>
+			</gov-tiles>
 
 		</div>
 		`;
@@ -7435,7 +8054,7 @@ class ToastMessagePage extends HTMLElement {
 			Toast Message
 		</h2>
 		<gov-toast variant="success">
-			<gov-icon name="check" slot="icon"></gov-icon>
+			<gov-icon name="check-lg" slot="icon"></gov-icon>
 			<p>
 				Vaše dokumenty byly úspěšně staženy.
 			</p>
@@ -7482,7 +8101,7 @@ class ToastMessageCountdownPage extends HTMLElement {
 			Toast Message Countdown
 		</h2>
 		<gov-toast variant="success" type="solid">
-			<gov-icon name="check" slot="icon"></gov-icon>
+			<gov-icon name="check-lg" slot="icon"></gov-icon>
 			<p>
 				Vaše dokumenty byly úspěšně staženy.
 			</p>
@@ -7529,7 +8148,7 @@ class WizzardPage extends HTMLElement {
 			<div class="gov-bg--secondary-300" style="padding: 48px">
 				<gov-wizzard>
 					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" collapsible>
-						<gov-icon slot="prefix" name="check"></gov-icon>
+						<gov-icon slot="prefix" name="check-lg"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 							<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
@@ -7546,7 +8165,7 @@ class WizzardPage extends HTMLElement {
 						<span slot="prefix">4</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
-					<gov-wizzard-item label="Zřizované organizace" variant="warning" collapsible="false">
+					<gov-wizzard-item label="Zřizované organizace" variant="warning" is-expanded>
 						<span slot="prefix">5</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
@@ -7555,12 +8174,12 @@ class WizzardPage extends HTMLElement {
 				<br><br>
 
 				<gov-wizzard size="s">
-					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.">
-						<gov-icon slot="prefix" name="check"></gov-icon>
+					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus." collapsible>
+						<gov-icon slot="prefix" name="check-lg"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 							<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
-					<gov-wizzard-item label="Kontaktní osoby" variant="primary">
+					<gov-wizzard-item label="Kontaktní osoby" variant="primary" is-expanded>
 						<span slot="prefix">2</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
@@ -7580,12 +8199,12 @@ class WizzardPage extends HTMLElement {
 				<br><br>
 	
 				<gov-wizzard size="xs">
-					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.">
-						<gov-icon slot="prefix" name="check"></gov-icon>
+					<gov-wizzard-item label-tag="h1" label="Font Awesome Icon" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus." collapsible>
+						<gov-icon slot="prefix" name="check-lg"></gov-icon>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 							<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
-					<gov-wizzard-item label="Kontaktní osoby" variant="primary">
+					<gov-wizzard-item label="Kontaktní osoby" variant="primary" is-expanded>
 						<span slot="prefix">2</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
 					</gov-wizzard-item>
@@ -7638,7 +8257,7 @@ const GovApp = class {
       { path: '/form-message', component: 'form-message-page' },
       { path: '/form-label', component: 'form-label-page' },
       { path: '/grid', component: 'grid-page' },
-      { path: "/loading", component: "loading-page" },
+      { path: '/loading', component: 'loading-page' },
       { path: '/modal', component: 'modal-page' },
       { path: '/nav', component: 'nav-page' },
       { path: '/spacer', component: 'spacer-page' },