@gov-design-system-ce/components 0.0.61 → 0.0.63

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

@@ -2916,9 +2916,9 @@ class AccordionPage extends HTMLElement {
 					<h3 slot="label">Působnost v agendách</h3>
 					<gov-icon slot="icon" name="info"></gov-icon>
 					<p slot="annotation">Anotace Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-					<gov-badge variant="primary" size="xs" slot="suffix">
-						Badge
-					</gov-badge>
+					<gov-chip variant="primary" size="xs" slot="suffix">
+						Chip
+					</gov-chip>
 					<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>
@@ -2990,9 +2990,9 @@ class AccordionPage extends HTMLElement {
 				<gov-accordion-item label="Působnost v agendách">
 					<h3 slot="label">Působnost v agendách</h3>
 					<gov-icon slot="icon" name="info"></gov-icon>
-					<gov-badge variant="primary" size="xs" slot="suffix">
-						Badge
-					</gov-badge>
+					<gov-chip variant="primary" size="xs" slot="suffix">
+						Chip
+					</gov-chip>
 					<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">
@@ -3035,9 +3035,9 @@ class AccordionPage extends HTMLElement {
 				<gov-accordion-item is-expanded label="Kontaktní osoby">
 					<h3 slot="label">Kontaktní osoby</h3>
 					<gov-icon slot="icon" name="info"></gov-icon>
-					<gov-badge variant="primary" size="xs" slot="suffix">
-						Badge
-					</gov-badge>
+					<gov-chip variant="primary" size="xs" slot="suffix">
+						Chip
+					</gov-chip>
 								<gov-accordion size="xs" no-border>
 									<gov-accordion-item>
 										<h3 slot="label">Font Awesome Icon</h3>
@@ -3065,9 +3065,9 @@ class AccordionPage extends HTMLElement {
 				<gov-accordion-item label="Působnost v agendách">
 					<h3 slot="label">Působnost v agendách</h3>
 					<gov-icon slot="icon" name="info"></gov-icon>
-					<gov-badge variant="primary" size="xs" slot="suffix">
-						Badge
-					</gov-badge>
+					<gov-chip variant="primary" size="xs" slot="suffix">
+						Chip
+					</gov-chip>
 					<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">
@@ -3115,9 +3115,9 @@ class AccordionPage extends HTMLElement {
 				<gov-accordion-item label="Působnost v agendách">
 					<h3 slot="label">Působnost v agendách</h3>
 					<gov-icon slot="icon" name="info"></gov-icon>
-					<gov-badge variant="primary" size="m" slot="suffix">
-						Badge
-					</gov-badge>
+					<gov-chip variant="primary" size="m" slot="suffix">
+						Chip
+					</gov-chip>
 					<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">
@@ -3134,492 +3134,6 @@ if (customElements.get('accordion-page') === undefined) {
   customElements.define('accordion-page', AccordionPage);
 }
 
-class InfobarPage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-		<h2>Infobar</h2>
-		
-		<div class="gov-bg--secondary-800">
-			<gov-container>
-				<gov-infobar variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
-					<gov-icon name="info" slot="icon"></gov-icon>
-					<p>
-						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
-					</p>
-				</gov-infobar>
-			</gov-container>
-		</div>
-		
-		<br/>
-
-		<gov-infobar variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
-			</p>
-		</gov-infobar>
-	
-		
-		<br>
-		<gov-infobar variant="secondary" closable>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
-			</p>
-		</gov-infobar>
-		<br>
-		<gov-infobar variant="warning" closable>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Warning - 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-infobar>
-		<br>
-		<gov-infobar variant="error" closable>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
-			</p>
-		</gov-infobar>
-		<br>
-		<gov-infobar variant="success" closable>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
-			</p>
-		</gov-infobar>
-		<br>
-		<gov-infobar variant="primary" closable>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
-			</p>
-		</gov-infobar>
-
-		<h3>Inverse</h3>
-		<br>
-		<gov-infobar inverse="TRUE" variant="secondary" closable>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
-			</p>
-		</gov-infobar>
-		<br>
-		<gov-infobar inverse="True" variant="warning" closable>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Warning - 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-infobar>
-		<br>
-		<gov-infobar inverse="1" variant="error" closable>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
-			</p>
-		</gov-infobar>
-		<br>
-		<gov-infobar inverse="true" variant="success" closable>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
-			</p>
-		</gov-infobar>
-		<br>
-		<gov-infobar inverse="true" variant="primary" closable>
-			<gov-icon name="info" slot="icon"></gov-icon>
-			<p>
-				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
-			</p>
-		</gov-infobar>
-		`;
-  }
-}
-if (customElements.get('infobar-page') === undefined) {
-  customElements.define('infobar-page', InfobarPage);
-}
-
-class BadgePage extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-			<h1>Badges</h1>
-			<h4>Badges close</h4>
-			<div class="container-view">
-				<gov-badge variant="primary" size="s" inverse="">
-				Not clickable S
-				<gov-button slot="right" variant="primary" type="base" 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="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 close (inversed)</h4>
-			<div class="container-view gov-bg--primary-600">
-			<gov-badge variant="primary" size="s" inverse>
-				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" inverse>
-				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" inverse>
-				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" inverse>
-				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">
-					Badge
-				</gov-badge>
-				<gov-badge variant="primary" size="s">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Not clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="primary" href="http://www.example.com/">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Normal href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="primary" disabled href="http://www.example.com/" target="_blank">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Disabled with href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="primary" size="l" href="http://www.example.com/">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="primary" size="xl" disabled>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						X-Large Primary
-				</gov-badge>
-			</div>
-			<h4>Badges - primary (inversed)</h4>
-			<div class="container-view">
-				<gov-badge variant="primary" size="xs" inverse>
-					Badge
-				</gov-badge>
-				<gov-badge variant="primary" size="s" inverse>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Not clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="primary" href="http://www.example.com/" inverse>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Normal href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="primary" disabled href="http://www.example.com/" target="_blank" inverse>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Disabled with href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="primary" size="l" href="http://www.example.com/" inverse>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="primary" size="xl" disabled inverse>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						X-Large Primary
-				</gov-badge>
-			</div>
-			<h4>Badges - primary (outlined)</h4>
-			<div class="container-view">
-				<gov-badge variant="primary" type="outlined" size="xs">
-					Badge
-				</gov-badge>
-				<gov-badge variant="primary" tag="a" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Small Primary
-				</gov-badge>
-				<gov-badge variant="primary" tag="button" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Normal Primary
-				</gov-badge>
-				<gov-badge variant="primary" tag="a" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Large Primary
-				</gov-badge>
-				<gov-badge variant="primary" tag="button" type="outlined" disabled size="xl">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					X-Large Primary
-				</gov-badge>
-			</div>
-			<hr />
-
-			<h4>Badges - secondary (default)</h4>
-			<div class="container-view">
-				<gov-badge variant="secondary" size="xs">
-					Badge
-				</gov-badge>
-				<gov-badge variant="secondary" size="xs" inverse>
-					Badge
-				</gov-badge>
-				<gov-badge variant="secondary" size="s">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Not clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge tag="button" variant="secondary">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Normal href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="secondary" disabled href="http://www.example.com/">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Disabled with href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="secondary" size="l" tag="a">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="secondary" size="xl" disabled>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						X-Large secondary
-				</gov-badge>
-			</div>
-			<h4>Badges - secondary (outlined)</h4>
-			<div class="container-view">
-				<gov-badge variant="secondary" tag="a" type="outlined" size="xs">
-					Badge
-				</gov-badge>
-				<gov-badge variant="secondary" tag="a" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Small secondary
-				</gov-badge>
-				<gov-badge variant="secondary" tag="button" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Normal secondary
-				</gov-badge>
-				<gov-badge variant="secondary" tag="a" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Large secondary
-				</gov-badge>
-				<gov-badge variant="secondary" tag="button" type="outlined" disabled size="xl">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					X-Large secondary
-				</gov-badge>
-			</div>
-			<hr />
-
-			<h4>Badges - success (default)</h4>
-			<div class="container-view">
-				<gov-badge variant="success" size="xs">
-					Badge
-				</gov-badge>
-				<gov-badge variant="success" size="xs" inverse>
-					Badge
-				</gov-badge>
-				<gov-badge variant="success" size="s">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Not clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge tag="button" variant="success">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Normal href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="success" disabled href="http://www.example.com/">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Disabled with href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="success" size="l" tag="a">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="success" size="xl" disabled>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						X-Large success
-				</gov-badge>
-			</div>
-			<h4>Badges - success (outlined)</h4>
-			<div class="container-view">
-				<gov-badge variant="success" tag="a" type="outlined" size="xs">
-					Badge
-				</gov-badge>
-				<gov-badge variant="success" tag="a" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Small success
-				</gov-badge>
-				<gov-badge variant="success" tag="button" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Normal success
-				</gov-badge>
-				<gov-badge variant="success" tag="a" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Large success
-				</gov-badge>
-				<gov-badge variant="success" tag="button" type="outlined" disabled size="xl">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					X-Large success
-				</gov-badge>
-			</div>
-			<hr />
-
-			<h4>Badges - warning (default)</h4>
-			<div class="container-view">
-				<gov-badge variant="warning" size="xs">
-					Badge
-				</gov-badge>
-				<gov-badge variant="warning" size="xs" inverse>
-					Badge
-				</gov-badge>
-				<gov-badge variant="warning" size="s">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Not clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge tag="button" variant="warning">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Normal href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="warning" disabled href="http://www.example.com/">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Disabled with href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="warning" size="l" tag="a">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="warning" size="xl" disabled>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						X-Large warning
-				</gov-badge>
-			</div>
-			<h4>Badges - warning (outlined)</h4>
-			<div class="container-view">
-				<gov-badge variant="warning" tag="a" type="outlined" size="xs">
-					Badge
-				</gov-badge>
-				<gov-badge variant="warning" tag="a" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Small warning
-				</gov-badge>
-				<gov-badge variant="warning" tag="button" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Normal warning
-				</gov-badge>
-				<gov-badge variant="warning" tag="a" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Large warning
-				</gov-badge>
-				<gov-badge variant="warning" tag="button" type="outlined" disabled size="xl">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					X-Large warning
-				</gov-badge>
-			</div>
-			<hr />
-
-			<h4>Badges - error (default)</h4>
-			<div class="container-view">
-				<gov-badge variant="error" size="xs">
-					Badge
-				</gov-badge>
-				<gov-badge variant="error" size="xs" inverse>
-					Badge
-				</gov-badge>
-				<gov-badge variant="error" size="s">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Not clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge tag="button" variant="error">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Normal href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="error" disabled href="http://www.example.com/">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Disabled with href
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="error" size="l" href="http://www.example.com/">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						Clickable
-					<gov-icon slot="right-icon" name="info"></gov-icon>
-				</gov-badge>
-				<gov-badge variant="error" size="xl" disabled>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-						X-Large error
-				</gov-badge>
-			</div>
-			<h4>Badges - error (outlined)</h4>
-			<div class="container-view">
-				<gov-badge variant="error" tag="a" type="outlined" size="xs">
-					Badge
-				</gov-badge>
-				<gov-badge variant="error" tag="a" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Small error
-				</gov-badge>
-				<gov-badge variant="error" tag="button" type="outlined" disabled>
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Normal error
-				</gov-badge>
-				<gov-badge variant="error" tag="a" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					Large error
-				</gov-badge>
-				<gov-badge variant="error" tag="button" type="outlined" disabled size="xl">
-					<gov-icon slot="left-icon" name="info"></gov-icon>
-					X-Large error
-				</gov-badge>
-			</div>
-		`;
-  }
-}
-if (customElements.get('badge-page') === undefined) {
-  customElements.define('badge-page', BadgePage);
-}
-
 class BreadcrumbsPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -5098,8 +4612,389 @@ class CardPage extends HTMLElement {
 		`;
   }
 }
-if (customElements.get('card-page') === undefined) {
-  customElements.define('card-page', CardPage);
+if (customElements.get('card-page') === undefined) {
+  customElements.define('card-page', CardPage);
+}
+
+class ChipPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+			<h1>Chips</h1>
+			<h4>Chips close</h4>
+			<div class="container-view">
+				<gov-chip variant="primary" size="s" inverse="">
+				Not clickable S
+				<gov-button slot="right" variant="primary" type="base" wcag-label="Zavřít vše" size="s">
+					<gov-icon slot="right-icon" name="x-lg"></gov-icon>
+				</gov-button>
+			</gov-chip>
+			<gov-chip 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-chip>
+			<gov-chip 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-chip>
+			<gov-chip 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-chip>
+			<gov-chip 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-chip>
+			</div>
+			<h4>Chips close (inversed)</h4>
+			<div class="container-view gov-bg--primary-600">
+			<gov-chip variant="primary" size="s" inverse>
+				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-chip>
+			<gov-chip variant="primary" size="m" inverse>
+				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-chip>
+			<gov-chip variant="primary" size="l" inverse>
+				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-chip>
+			<gov-chip variant="primary" size="xl" inverse>
+				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-chip>
+			</div>
+			<h4>Chips - primary (default)</h4>
+			<div class="container-view">
+				<gov-chip variant="primary" size="xs">
+					Chip
+				</gov-chip>
+				<gov-chip variant="primary" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Not clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="primary" href="http://www.example.com/">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Normal href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="primary" disabled href="http://www.example.com/" target="_blank">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Disabled with href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="primary" size="l" href="http://www.example.com/">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="primary" size="xl" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						X-Large Primary
+				</gov-chip>
+			</div>
+			<h4>Chips - primary (inversed)</h4>
+			<div class="container-view">
+				<gov-chip variant="primary" size="xs" inverse>
+					Chip
+				</gov-chip>
+				<gov-chip variant="primary" size="s" inverse>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Not clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="primary" href="http://www.example.com/" inverse>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Normal href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="primary" disabled href="http://www.example.com/" target="_blank" inverse>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Disabled with href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="primary" size="l" href="http://www.example.com/" inverse>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="primary" size="xl" disabled inverse>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						X-Large Primary
+				</gov-chip>
+			</div>
+			<h4>Chips - primary (outlined)</h4>
+			<div class="container-view">
+				<gov-chip variant="primary" type="outlined" size="xs">
+					Chip
+				</gov-chip>
+				<gov-chip variant="primary" tag="a" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small Primary
+				</gov-chip>
+				<gov-chip variant="primary" tag="button" type="outlined" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal Primary
+				</gov-chip>
+				<gov-chip variant="primary" tag="a" type="outlined" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large Primary
+				</gov-chip>
+				<gov-chip variant="primary" tag="button" type="outlined" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large Primary
+				</gov-chip>
+			</div>
+			<hr />
+
+			<h4>Chips - secondary (default)</h4>
+			<div class="container-view">
+				<gov-chip variant="secondary" size="xs">
+					Chip
+				</gov-chip>
+				<gov-chip variant="secondary" size="xs" inverse>
+					Chip
+				</gov-chip>
+				<gov-chip variant="secondary" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Not clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip tag="button" variant="secondary">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Normal href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="secondary" disabled href="http://www.example.com/">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Disabled with href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="secondary" size="l" tag="a">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="secondary" size="xl" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						X-Large secondary
+				</gov-chip>
+			</div>
+			<h4>Chips - secondary (outlined)</h4>
+			<div class="container-view">
+				<gov-chip variant="secondary" tag="a" type="outlined" size="xs">
+					Chip
+				</gov-chip>
+				<gov-chip variant="secondary" tag="a" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small secondary
+				</gov-chip>
+				<gov-chip variant="secondary" tag="button" type="outlined" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal secondary
+				</gov-chip>
+				<gov-chip variant="secondary" tag="a" type="outlined" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large secondary
+				</gov-chip>
+				<gov-chip variant="secondary" tag="button" type="outlined" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large secondary
+				</gov-chip>
+			</div>
+			<hr />
+
+			<h4>Chips - success (default)</h4>
+			<div class="container-view">
+				<gov-chip variant="success" size="xs">
+					Chip
+				</gov-chip>
+				<gov-chip variant="success" size="xs" inverse>
+					Chip
+				</gov-chip>
+				<gov-chip variant="success" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Not clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip tag="button" variant="success">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Normal href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="success" disabled href="http://www.example.com/">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Disabled with href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="success" size="l" tag="a">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="success" size="xl" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						X-Large success
+				</gov-chip>
+			</div>
+			<h4>Chips - success (outlined)</h4>
+			<div class="container-view">
+				<gov-chip variant="success" tag="a" type="outlined" size="xs">
+					Chip
+				</gov-chip>
+				<gov-chip variant="success" tag="a" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small success
+				</gov-chip>
+				<gov-chip variant="success" tag="button" type="outlined" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal success
+				</gov-chip>
+				<gov-chip variant="success" tag="a" type="outlined" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large success
+				</gov-chip>
+				<gov-chip variant="success" tag="button" type="outlined" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large success
+				</gov-chip>
+			</div>
+			<hr />
+
+			<h4>Chips - warning (default)</h4>
+			<div class="container-view">
+				<gov-chip variant="warning" size="xs">
+					Chip
+				</gov-chip>
+				<gov-chip variant="warning" size="xs" inverse>
+					Chip
+				</gov-chip>
+				<gov-chip variant="warning" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Not clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip tag="button" variant="warning">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Normal href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="warning" disabled href="http://www.example.com/">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Disabled with href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="warning" size="l" tag="a">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="warning" size="xl" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						X-Large warning
+				</gov-chip>
+			</div>
+			<h4>Chips - warning (outlined)</h4>
+			<div class="container-view">
+				<gov-chip variant="warning" tag="a" type="outlined" size="xs">
+					Chip
+				</gov-chip>
+				<gov-chip variant="warning" tag="a" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small warning
+				</gov-chip>
+				<gov-chip variant="warning" tag="button" type="outlined" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal warning
+				</gov-chip>
+				<gov-chip variant="warning" tag="a" type="outlined" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large warning
+				</gov-chip>
+				<gov-chip variant="warning" tag="button" type="outlined" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large warning
+				</gov-chip>
+			</div>
+			<hr />
+
+			<h4>Chips - error (default)</h4>
+			<div class="container-view">
+				<gov-chip variant="error" size="xs">
+					Chip
+				</gov-chip>
+				<gov-chip variant="error" size="xs" inverse>
+					Chip
+				</gov-chip>
+				<gov-chip variant="error" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Not clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip tag="button" variant="error">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Normal href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="error" disabled href="http://www.example.com/">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Disabled with href
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="error" size="l" href="http://www.example.com/">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						Clickable
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+				</gov-chip>
+				<gov-chip variant="error" size="xl" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+						X-Large error
+				</gov-chip>
+			</div>
+			<h4>Chips - error (outlined)</h4>
+			<div class="container-view">
+				<gov-chip variant="error" tag="a" type="outlined" size="xs">
+					Chip
+				</gov-chip>
+				<gov-chip variant="error" tag="a" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Small error
+				</gov-chip>
+				<gov-chip variant="error" tag="button" type="outlined" disabled>
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Normal error
+				</gov-chip>
+				<gov-chip variant="error" tag="a" type="outlined" size="l">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					Large error
+				</gov-chip>
+				<gov-chip variant="error" tag="button" type="outlined" disabled size="xl">
+					<gov-icon slot="left-icon" name="info"></gov-icon>
+					X-Large error
+				</gov-chip>
+			</div>
+		`;
+  }
+}
+if (customElements.get('chip-page') === undefined) {
+  customElements.define('chip-page', ChipPage);
 }
 
 class ContainerPage extends HTMLElement {
@@ -5537,6 +5432,7 @@ class FormsPage extends HTMLElement {
   connectedCallback() {
     (() => {
       setTimeout(() => {
+        const moja = document.getElementById('moja');
         const da = document.getElementById('test-me-ujo');
         const po = document.getElementById('bagr');
         const ba = document.getElementById('ba');
@@ -5573,9 +5469,31 @@ class FormsPage extends HTMLElement {
             });
           });
         }
+        if (moja) {
+          moja.setOptions([{ value: 'd', label: 'Value D' }, { value: 'e', label: 'Value E' }, {
+              value: 'f',
+              label: 'Value F',
+              disabled: true
+            }]);
+          setTimeout(() => {
+            moja.value = 'h';
+            moja.setOptions([{ value: 'g', label: 'Value G' }, { value: 'h', label: 'Value H' }, {
+                value: 'i',
+                label: 'Value I',
+              }]);
+          }, 2000);
+        }
       }, 1000);
     })();
     this.innerHTML = `
+
+			<gov-form-control>
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select  value="e" name="test-me" size="xl" id="moja">
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
 			<h2>
 				Samostatné použití
 			</h2>
@@ -7179,6 +7097,111 @@ if (customElements.get('home-page') === undefined) {
   customElements.define('home-page', HomePage);
 }
 
+class InfobarPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>Infobar</h2>
+
+		<div class="gov-bg--secondary-800">
+			<gov-container>
+				<gov-infobar variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
+					<gov-icon name="info" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-infobar>
+			</gov-container>
+		</div>
+
+		<br/>
+
+		<gov-infobar variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+			</p>
+		</gov-infobar>
+
+
+		<br>
+		<gov-infobar variant="secondary">
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+			</p>
+		</gov-infobar>
+		<br>
+		<gov-infobar variant="warning" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Warning - 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-infobar>
+		<br>
+		<gov-infobar variant="error" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+			</p>
+		</gov-infobar>
+		<br>
+		<gov-infobar variant="success" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+			</p>
+		</gov-infobar>
+		<br>
+		<gov-infobar variant="primary" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+			</p>
+		</gov-infobar>
+
+		<h3>Inverse</h3>
+		<br>
+		<gov-infobar inverse="TRUE" variant="secondary" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+			</p>
+		</gov-infobar>
+		<br>
+		<gov-infobar inverse="True" variant="warning" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Warning - 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-infobar>
+		<br>
+		<gov-infobar inverse="1" variant="error" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+			</p>
+		</gov-infobar>
+		<br>
+		<gov-infobar inverse="true" variant="success" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+			</p>
+		</gov-infobar>
+		<br>
+		<gov-infobar inverse="true" variant="primary" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+			</p>
+		</gov-infobar>
+		`;
+  }
+}
+if (customElements.get('infobar-page') === undefined) {
+  customElements.define('infobar-page', InfobarPage);
+}
+
 class LayoutPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -8185,7 +8208,7 @@ class TabsPage extends HTMLElement {
 				</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">
+			<gov-tabs id="po" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
 				<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
@@ -8208,7 +8231,7 @@ class TabsPage extends HTMLElement {
 				</gov-tabs-item>
 			</gov-tabs>
 
-			<gov-tabs id="po" variant="secondary" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+			<gov-tabs id="po" variant="secondary" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
 				<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
@@ -8230,7 +8253,7 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
-			<gov-tabs id="po" variant="success" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+			<gov-tabs id="po" variant="success" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
 				<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
@@ -8252,7 +8275,7 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
-			<gov-tabs id="po" variant="warning" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+			<gov-tabs id="po" variant="warning" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
 				<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
@@ -8274,7 +8297,7 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
-			<gov-tabs id="po" variant="error" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+			<gov-tabs id="po" variant="error" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
 				<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
@@ -8342,7 +8365,7 @@ class TabsPage extends HTMLElement {
 						(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 id="po" type="chip" 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
@@ -8364,7 +8387,7 @@ class TabsPage extends HTMLElement {
 						(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 id="po" type="chip" 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
@@ -8393,6 +8416,259 @@ if (customElements.get('tabs-page') === undefined) {
   customElements.define('tabs-page', TabsPage);
 }
 
+class TagPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+			<h1>Tags</h1>
+			<h4>Tags - primary (default)</h4>
+			<div class="container-view">
+				<gov-tag variant="primary" size="xs" type="solid">
+					Tag
+				</gov-tag>
+				<gov-tag variant="primary" size="xs" type="solid">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Tag
+				</gov-tag>
+				<gov-tag variant="primary" size="xs" type="solid">
+					Tag
+					<gov-icon slot="right-icon" name="star-fill"></gov-icon>
+				</gov-tag>
+				<gov-tag variant="primary" size="xs" type="solid">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Tag
+					<gov-icon slot="right-icon" name="star-fill"></gov-icon>
+				</gov-tag>
+				<gov-tag variant="primary" size="s" type="solid">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small Primary
+				</gov-tag>
+				<gov-tag variant="primary" size="m" type="solid">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal Primary
+					<gov-icon slot="right-icon" name="star-fill"></gov-icon>
+				</gov-tag>
+				<gov-tag variant="primary" size="l" type="solid">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Large Primary
+					<gov-icon slot="right-icon" name="star-fill"></gov-icon>
+				</gov-tag>
+				<gov-tag variant="primary" size="xl" type="solid">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					X-Large Primary
+					<gov-icon slot="right-icon" name="star-fill"></gov-icon>
+				</gov-tag>
+			</div>
+			<h4>Tags - primary (inversed)</h4>
+			<div class="container-view">
+				<gov-tag variant="primary" size="xs" inverse="true">
+					Tag
+				</gov-tag>
+				<gov-tag variant="primary" size="s" inverse="true">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small Primary
+				</gov-tag>
+				<gov-tag variant="primary" size="m" inverse="true">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal Primary
+				</gov-tag>
+			</div>
+			<h4>Tags - primary (outlined)</h4>
+			<div class="container-view">
+				<gov-tag variant="primary" type="outlined" size="xs">
+					Tag
+				</gov-tag>
+				<gov-tag variant="primary" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small Primary
+				</gov-tag>
+				<gov-tag variant="primary" type="outlined" size="m">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal Primary
+				</gov-tag>
+			</div>
+			<hr />
+
+			<h4>Tags - secondary (default)</h4>
+			<div class="container-view">
+				<gov-tag variant="secondary" size="xs">
+					Tag
+				</gov-tag>
+				<gov-tag variant="secondary" size="s">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small secondary
+				</gov-tag>
+				<gov-tag variant="secondary" size="m">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal secondary
+				</gov-tag>
+			</div>
+			<h4>Tags - secondary (inversed)</h4>
+			<div class="container-view">
+				<gov-tag variant="secondary" size="xs" inverse="true">
+					Tag
+				</gov-tag>
+				<gov-tag variant="secondary" size="s" inverse="true">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small Primary
+				</gov-tag>
+				<gov-tag variant="secondary" size="m" inverse="true">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal Primary
+				</gov-tag>
+			</div>
+			<h4>Tags - secondary (outlined)</h4>
+			<div class="container-view">
+				<gov-tag variant="secondary" type="outlined" size="xs">
+					Tag
+				</gov-tag>
+				<gov-tag variant="secondary" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small secondary
+				</gov-tag>
+				<gov-tag variant="secondary" type="outlined" size="m">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal secondary
+				</gov-tag>
+			</div>
+			<hr />
+
+			<h4>Tags - success (default)</h4>
+			<div class="container-view">
+				<gov-tag variant="success" size="xs">
+					Tag
+				</gov-tag>
+				<gov-tag variant="success" size="s">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small success
+				</gov-tag>
+				<gov-tag variant="success" size="m">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal success
+				</gov-tag>
+			</div>
+			<h4>Tags - success (inversed)</h4>
+			<div class="container-view">
+				<gov-tag variant="success" size="xs" inverse="true">
+					Tag
+				</gov-tag>
+				<gov-tag variant="success" size="s" inverse="true">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small Primary
+				</gov-tag>
+				<gov-tag variant="success" size="m" inverse="true">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal Primary
+				</gov-tag>
+			</div>
+			<h4>Tags - success (outlined)</h4>
+			<div class="container-view">
+				<gov-tag variant="success" type="outlined" size="xs">
+					Tag
+				</gov-tag>
+				<gov-tag variant="success" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small success
+				</gov-tag>
+				<gov-tag variant="success" type="outlined" size="m">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal success
+				</gov-tag>
+			</div>
+			<hr />
+
+			<h4>Tags - warning (default)</h4>
+			<div class="container-view">
+				<gov-tag variant="warning" size="xs">
+					Tag
+				</gov-tag>
+				<gov-tag variant="warning" size="s">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small warning
+				</gov-tag>
+				<gov-tag variant="warning" size="m">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal warning
+				</gov-tag>
+			</div>
+			<h4>Tags - warning (inversed)</h4>
+			<div class="container-view">
+				<gov-tag variant="warning" size="xs" inverse="true">
+					Tag
+				</gov-tag>
+				<gov-tag variant="warning" size="s" inverse="true">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small Primary
+				</gov-tag>
+				<gov-tag variant="warning" size="m" inverse="true">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal Primary
+				</gov-tag>
+			</div>
+			<h4>Tags - warning (outlined)</h4>
+			<div class="container-view">
+				<gov-tag variant="warning" type="outlined" size="xs">
+					Tag
+				</gov-tag>
+				<gov-tag variant="warning" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small warning
+				</gov-tag>
+				<gov-tag variant="warning" type="outlined" size="m">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal warning
+				</gov-tag>
+			</div>
+			<hr />
+
+			<h4>Tags - error (default)</h4>
+			<div class="container-view">
+				<gov-tag variant="error" size="xs">
+					Tag
+				</gov-tag>
+				<gov-tag variant="error" size="s">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small error
+				</gov-tag>
+				<gov-tag variant="error" size="m">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal error
+				</gov-tag>
+			</div>
+			<h4>Tags - error (inversed)</h4>
+			<div class="container-view">
+				<gov-tag variant="error" size="xs" inverse="true">
+					Tag
+				</gov-tag>
+				<gov-tag variant="error" size="s" inverse="true">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small Primary
+				</gov-tag>
+				<gov-tag variant="error" size="m" inverse="true">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal Primary
+				</gov-tag>
+			</div>
+			<h4>Tags - error (outlined)</h4>
+			<div class="container-view">
+				<gov-tag variant="error" type="outlined" size="xs">
+					Tag
+				</gov-tag>
+				<gov-tag variant="error" type="outlined" size="s">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Small error
+				</gov-tag>
+				<gov-tag variant="error" type="outlined" size="m">
+					<gov-icon slot="left-icon" name="star-fill"></gov-icon>
+					Normal error
+				</gov-tag>
+			</div>
+		`;
+  }
+}
+if (customElements.get('tag-page') === undefined) {
+  customElements.define('tag-page', TagPage);
+}
+
 class TilesPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -8655,7 +8931,7 @@ class TooltipPage extends HTMLElement {
 			<p>
 				V rámci
 				<gov-tooltip variant="secondary" position="top" size="s" message="Znění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.">
-					případě vycestování (top)
+					případě vycestování (top)případě vycestování (top)případě vycestování
 				</gov-tooltip>
 				států EU platí princip jednoho pojištění. V za prací do států EU byste měli být vždy
 				pojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy
@@ -8674,8 +8950,8 @@ class TooltipPage extends HTMLElement {
 			</p>
 			<p>
 				V rámci států EU platí princip jednoho pojištění. V za prací do států EU byste měli být vždy
-				<gov-tooltip variant="secondary" position="left" size="s">
-					případě vycestování (left)
+				<gov-tooltip variant="secondary" position="top" size="m">
+					případě vycestování (top)
 					<gov-tooltip-content>
 						Znění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.
 					</gov-tooltip-content>
@@ -8950,7 +9226,7 @@ const GovApp = class {
       { path: '/', component: 'home-page' },
       { path: '/infobar', component: 'infobar-page' },
       { path: '/accordion', component: 'accordion-page' },
-      { path: '/badge', component: 'badge-page' },
+      { path: '/chip', component: 'chip-page' },
       { path: '/button', component: 'button-page' },
       { path: '/breadcrumbs', component: 'breadcrumbs-page' },
       { path: '/card', component: 'card-page' },
@@ -8972,6 +9248,7 @@ const GovApp = class {
       { path: '/statsbar', component: 'statsbar-page' },
       { path: '/stepper', component: 'stepper-page' },
       { path: '/tabs', component: 'tabs-page' },
+      { path: '/tag', component: 'tag-page' },
       { path: '/tooltip', component: 'tooltip-page' },
       { path: '/tiles', component: 'tiles-page' },
       { path: '/typography', component: 'typography-page' },