@gov-design-system-ce/components 0.0.53 → 0.0.55

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

@@ -2910,6 +2910,11 @@ class AccordionPage extends HTMLElement {
 				</gov-accordion-item>
 				<gov-accordion-item>
 					<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>
 					<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>
@@ -2918,7 +2923,7 @@ class AccordionPage extends HTMLElement {
 				</gov-accordion-item>
 			</gov-accordion>
 			<br>
-			<gov-accordion size="xs">
+			<gov-accordion size="xs" no-border>
 				<gov-accordion-item>
 					<h3 slot="label">Font Awesome Icon</h3>
 					<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>
@@ -2943,7 +2948,7 @@ class AccordionPage extends HTMLElement {
 				</gov-accordion-item>
 			</gov-accordion>
 			<br />
-			<gov-accordion size="s">
+			<gov-accordion size="s" variant="secondary">
 				<gov-accordion-item>
 					<h3 slot="label">Font Awesome Icon</h3>
 					<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>
@@ -2981,6 +2986,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>
 					<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">
@@ -3020,14 +3028,42 @@ 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>
 					<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-accordion-item is-expanded label="Kontaktní osoby">
 					<h3 slot="label">Kontaktní osoby</h3>
 					<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="xs" slot="suffix">
+						Badge
+					</gov-badge>
+								<gov-accordion size="xs" no-border>
+									<gov-accordion-item>
+										<h3 slot="label">Font Awesome Icon</h3>
+										<gov-icon slot="icon" name="info"></gov-icon>
+										<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</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>
+										<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-icon slot="toggle-icon" name="info"></gov-icon>
+									</gov-accordion-item>
+									<gov-accordion-item disabled is-expanded>
+										<h3 slot="label">Kontaktní osoby</h3>
+										<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>
+										<h3 slot="label">Působnost v agendách</h3>
+										<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>
+										<h3 slot="label">Zřizované organizace</h3>
+										<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>
 				</gov-accordion-item>
 				<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>
 					<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">
@@ -3075,6 +3111,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>
 					<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">
@@ -3187,6 +3226,12 @@ class BadgePage extends HTMLElement {
 			<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">
@@ -8149,7 +8194,8 @@ class TilesPage extends HTMLElement {
 
 		<div class="gov-bg--secondary-300" style="padding: 48px;">
 			<div style="max-width: 600px;">
-				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+				<gov-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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>.
@@ -8157,6 +8203,7 @@ class TilesPage extends HTMLElement {
 				</gov-tile>
 				<br>
 				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>
 					<ul class="gov-list--plain">
 						<li><a href="#">Občanský život</a></li>
@@ -8166,47 +8213,54 @@ class TilesPage extends HTMLElement {
 				</gov-tile>
 			</div>
 			<div style="max-width: 800px;">
-				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#" promotion>
+				<gov-tile href="#" promotion>
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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>.
+						PROM 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>
 			</div>
 			<br>
 
 			<gov-tiles columns="4">
-				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+				<gov-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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>.
@@ -8215,37 +8269,43 @@ class TilesPage extends HTMLElement {
 			</gov-tiles>
 			<br>
 			<gov-tiles columns="3" no-border>
-				<gov-tile name="Zdroje energie, těžba, nerosty, drahé kovy" href="#">
+				<gov-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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-tile href="#">
+					<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>
 					<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>.
@@ -8591,92 +8651,92 @@ if (customElements.get('typography-page') === undefined) {
   customElements.define('typography-page', TypographyPage);
 }
 
-class WizzardPage extends HTMLElement {
+class WizardPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-            <h2>Wizzard</h2>
+            <h2>Wizard</h2>
 			<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-wizard>
+					<gov-wizard-item label-tag="h1" label="Font Awesome Icon" variant="success" collapsible>
 						<span slot="prefix"><gov-icon name="check-lg"></gov-icon></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>
 							<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" is-expanded>
+					</gov-wizard-item>
+					<gov-wizard-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>
 							<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
-					</gov-wizzard-item>
-					<gov-wizzard-item label="Působnost v agendách" variant="secondary" collapsible="false">
+					</gov-wizard-item>
+					<gov-wizard-item label="Působnost v agendách" variant="secondary" collapsible="false">
 						<span slot="prefix">3</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
-					</gov-wizzard-item>
-					<gov-wizzard-item label="Zřizované organizace" variant="error" collapsible annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.">
+					</gov-wizard-item>
+					<gov-wizard-item label="Zřizované organizace" variant="error" collapsible annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.">
 						<span slot="prefix">4</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
-					</gov-wizzard-item>
-					<gov-wizzard-item label="Zřizované organizace" variant="warning" is-expanded>
+					</gov-wizard-item>
+					<gov-wizard-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>
-				</gov-wizzard>
+					</gov-wizard-item>
+				</gov-wizard>
 
 				<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." collapsible>
+				<gov-wizard size="s">
+					<gov-wizard-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" is-expanded>
+					</gov-wizard-item>
+					<gov-wizard-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>
-					<gov-wizzard-item label="Působnost v agendách" variant="secondary">
+					</gov-wizard-item>
+					<gov-wizard-item label="Působnost v agendách" variant="secondary">
 						<span slot="prefix">3</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
-					</gov-wizzard-item>
-					<gov-wizzard-item label="Zřizované organizace" variant="error">
+					</gov-wizard-item>
+					<gov-wizard-item label="Zřizované organizace" variant="error">
 						<span slot="prefix">4</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
-					</gov-wizzard-item>
-					<gov-wizzard-item label="Zřizované organizace" variant="warning">
+					</gov-wizard-item>
+					<gov-wizard-item label="Zřizované organizace" variant="warning">
 						<span slot="prefix">5</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
-					</gov-wizzard-item>
-				</gov-wizzard>
+					</gov-wizard-item>
+				</gov-wizard>
 				<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." collapsible>
+				<gov-wizard size="xs">
+					<gov-wizard-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" is-expanded>
+					</gov-wizard-item>
+					<gov-wizard-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>
-					<gov-wizzard-item label="Působnost v agendách" variant="secondary">
+					</gov-wizard-item>
+					<gov-wizard-item label="Působnost v agendách" variant="secondary">
 						<span slot="prefix">3</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
-					</gov-wizzard-item>
-					<gov-wizzard-item label="Zřizované organizace" variant="error">
+					</gov-wizard-item>
+					<gov-wizard-item label="Zřizované organizace" variant="error">
 						<span slot="prefix">4</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
-					</gov-wizzard-item>
-					<gov-wizzard-item label="Zřizované organizace" variant="warning">
+					</gov-wizard-item>
+					<gov-wizard-item label="Zřizované organizace" variant="warning">
 						<span slot="prefix">5</span>
 						<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>
-					</gov-wizzard-item>
-				</gov-wizzard>
+					</gov-wizard-item>
+				</gov-wizard>
 			</div>
 		`;
   }
 }
-if (customElements.get('wizzard-page') === undefined) {
-  customElements.define('wizzard-page', WizzardPage);
+if (customElements.get('wizard-page') === undefined) {
+  customElements.define('wizard-page', WizardPage);
 }
 
 const govAppCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}html,body{margin:0;padding:0}.container-view{padding:12px}hr{height:0;border:0 none;border-top:1px solid gainsboro;font-size:0}hr.inversed{border-top-color:#254e80}";
@@ -8722,7 +8782,7 @@ const GovApp = class {
       { path: '/toast-message-countdown', component: 'toast-message-countdown-page' },
       { path: '/pagination', component: 'pagination-page' },
       { path: '/prompt', component: 'prompt-page' },
-      { path: '/wizzard', component: 'wizzard-page' },
+      { path: '/wizard', component: 'wizard-page' },
       { path: '/side-nav', component: 'side-nav-page' },
       { path: '/grid', component: 'grid-page' },
       { path: '/layout', component: 'layout-page' },