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

package/dist/collection/pages/Loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../../../src/pages/Loading.ts"],"names":[],"mappings":"AAAA,MAAM,WAAY,SAAQ,WAAW;EACpC,iBAAiB;IAChB,UAAU,CAAC;MACV,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,WAAW,EAAE;QAC5D,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;MACnE,CAAC,CAAC,CAAA;IACH,CAAC,EAAE,GAAG,CAAC,CAAA;IACP,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE;EACrD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;CAClD","sourcesContent":["class LoadingPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tsetTimeout(function() {\n\t\t\tdocument.getElementById('btn').addEventListener('gov-click', function() {\n\t\t\t\tdocument.getElementById('loading').setAttribute('loading', 'true')\n\t\t\t})\n\t\t}, 500)\n\t\tthis.innerHTML = `\n\t\t\t<h2>Loading</h2>\n\t\t\t<gov-button variant=\"primary\" id=\"btn\" wcag-label=\"Zobrazit načítání\">Zobrazit načítání</gov-button>\n\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\t\t\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\n\t\t\t<gov-loading id=\"loading\">Načítání</gov-loading>\n\t\t`\n\t}\n}\n\nif (customElements.get(\"loading-page\") === undefined) {\n\tcustomElements.define(\"loading-page\", LoadingPage)\n}\n"]}
+{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../../../src/pages/Loading.ts"],"names":[],"mappings":"AAAA,MAAM,WAAY,SAAQ,WAAW;EACpC,iBAAiB;IAChB,UAAU,CAAC;MACV,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,WAAW,EAAE;QAC5D,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;MACnE,CAAC,CAAC,CAAA;IACH,CAAC,EAAE,GAAG,CAAC,CAAA;IACP,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE;EACrD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;CAClD","sourcesContent":["class LoadingPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tsetTimeout(function () {\n\t\t\tdocument.getElementById('btn').addEventListener('gov-click', function () {\n\t\t\t\tdocument.getElementById('loading').setAttribute('loading', 'true')\n\t\t\t})\n\t\t}, 500)\n\t\tthis.innerHTML = `\n\t\t\t<h2>Loading</h2>\n\t\t\t<gov-button variant=\"primary\" id=\"btn\" wcag-label=\"Zobrazit načítání\">Zobrazit načítání</gov-button>\n\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\n\t\t\t<gov-loading id=\"loading\">Načítání</gov-loading>\n\t\t`\n\t}\n}\n\nif (customElements.get('loading-page') === undefined) {\n\tcustomElements.define('loading-page', LoadingPage)\n}\n"]}

package/dist/collection/pages/Pagination.js

@@ -3,8 +3,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);
@@ -18,6 +19,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>
 
 		`;
   }

package/dist/collection/pages/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../../src/pages/Pagination.ts"],"names":[],"mappings":"AAAA,MAAM,cAAe,SAAQ,WAAW;EACvC,iBAAiB;IAChB,UAAU,CAAC,GAAG,EAAE;MACf,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;MAC5C,IAAI,IAAI,EAAE;QACT,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE;UACrC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;QACf,CAAC,CAAC,CAAA;OACF;IACF,CAAC,EAAE,GAAG,CAAC,CAAA;IACP,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;GAWhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE;EACxD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAA;CACxD","sourcesContent":["class PaginationPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tsetTimeout(() => {\n\t\t\tconst bagr = document.getElementById('bagr')\n\t\t\tif (bagr) {\n\t\t\t\tbagr.addEventListener('gov-page', e => {\n\t\t\t\t\tconsole.log(e)\n\t\t\t\t})\n\t\t\t}\n\t\t}, 500)\n\t\tthis.innerHTML = `\n\t\t<h2>Pagination</h2>\n\n\t\t<gov-pagination id=\"bagr\" total=\"212\" wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination size=\"s\" total=\"212\" wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination type=\"select\" total=\"212\"  wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination type=\"select\" size=\"s\" total=\"212\"  wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\n\t\t`\n\t}\n}\n\nif (customElements.get('pagination-page') === undefined) {\n\tcustomElements.define('pagination-page', PaginationPage)\n}\n"]}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../../src/pages/Pagination.ts"],"names":[],"mappings":"AAAA,MAAM,cAAe,SAAQ,WAAW;EACvC,iBAAiB;IAChB,UAAU,CAAC,GAAG,EAAE;MACf,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;MAC5C,IAAI,IAAI,EAAE;QACT,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE;UACtC,iBAAiB;UACjB,0CAA0C;QAC3C,CAAC,CAAC,CAAA;OACF;IACF,CAAC,EAAE,GAAG,CAAC,CAAA;IACP,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;GAoBhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE;EACxD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAA;CACxD","sourcesContent":["class PaginationPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tsetTimeout(() => {\n\t\t\tconst bagr = document.getElementById('bagr')\n\t\t\tif (bagr) {\n\t\t\t\tbagr.addEventListener('gov-page', () => {\n\t\t\t\t\t// console.log(e)\n\t\t\t\t\t// bagr.setAttribute('current', String(e))\n\t\t\t\t})\n\t\t\t}\n\t\t}, 500)\n\t\tthis.innerHTML = `\n\t\t<h2>Pagination</h2>\n\n\t\t<gov-pagination id=\"bagr\" total=\"212\" wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination size=\"s\" total=\"212\" wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination type=\"select\" total=\"212\"  wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination type=\"select\" size=\"s\" total=\"212\"  wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\t\t<br>\n\t\t<br>\n\t\t<gov-pagination variant=\"secondary\" total=\"212\" current=\"2\" wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination size=\"s\" variant=\"secondary\" wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination type=\"select\" variant=\"secondary\" total=\"212\"  wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination type=\"select\" variant=\"secondary\" size=\"s\" total=\"212\"  wcag-label=\"Stránkování pro sekci dokumenty\"></gov-pagination>\n\n\t\t`\n\t}\n}\n\nif (customElements.get('pagination-page') === undefined) {\n\tcustomElements.define('pagination-page', PaginationPage)\n}\n"]}

package/dist/collection/pages/Stepper.js

@@ -7,13 +7,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>
@@ -34,10 +34,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>
@@ -58,10 +58,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>

package/dist/collection/pages/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../../../../src/pages/Stepper.ts"],"names":[],"mappings":"AAAA,MAAM,WAAY,SAAQ,WAAW;EACpC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE;EACrD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;CAClD","sourcesContent":["class StepperPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<h2>Stepper</h2>\n\n\t\t\t<h3>Velikost M</h3>\n\n\t\t\t<gov-stepper>\n\t\t\t\t<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.\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"check\"></gov-icon>\n\t\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t\t<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>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Chybový krok\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"cross\"></gov-icon>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<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\">\n\t\t\t\t\t<span slot=\"prefix\">2</span>\n\t\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"secondary\">\n\t\t\t\t\t<span slot=\"prefix\">3</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"warning\">\n\t\t\t\t\t<span slot=\"prefix\">4</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t</gov-stepper>\n\n\t\t\t<br><br>\n\t\t\t<h3>Velikost S</h3>\n\n\t\t\t<gov-stepper size=\"s\">\n\t\t\t\t<gov-stepper-item trigger-tag=\"h1\" label=\"Hotový krok\" variant=\"success\" annotation=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"check\"></gov-icon>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Chybový krok\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"cross\"></gov-icon>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Krok s textem, obrázkem, tlačítkem\" variant=\"primary\">\n\t\t\t\t\t<span slot=\"prefix\">2</span>\n\t\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t\t<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>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"secondary\">\n\t\t\t\t\t<span slot=\"prefix\">3</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"warning\">\n\t\t\t\t\t<span slot=\"prefix\">4</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t</gov-stepper>\n\n\t\t\t<br><br>\n\t\t\t<h3>Velikost XS</h3>\n\n\t\t\t<gov-stepper size=\"xs\">\n\t\t\t\t<gov-stepper-item trigger-tag=\"h1\" label=\"Hotový krok\" variant=\"success\" annotation=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"check\"></gov-icon>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Chybový krok\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"cross\"></gov-icon>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Krok s textem, obrázkem, tlačítkem\" variant=\"primary\">\n\t\t\t\t\t<span slot=\"prefix\">2</span>\n\t\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t\t<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>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"secondary\">\n\t\t\t\t\t<span slot=\"prefix\">3</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"warning\">\n\t\t\t\t\t<span slot=\"prefix\">4</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t</gov-stepper>\n\t\t`\n\t}\n}\n\nif (customElements.get('stepper-page') === undefined) {\n\tcustomElements.define('stepper-page', StepperPage)\n}\n"]}
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../../../../src/pages/Stepper.ts"],"names":[],"mappings":"AAAA,MAAM,WAAY,SAAQ,WAAW;EACpC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE;EACrD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;CAClD","sourcesContent":["class StepperPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<h2>Stepper</h2>\n\n\t\t\t<h3>Velikost M</h3>\n\n\t\t\t<gov-stepper>\n\t\t\t\t<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.\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"check-lg\"></gov-icon>\n\t\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t\t<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>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Chybový krok\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"x-lg\"></gov-icon>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<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\">\n\t\t\t\t\t<span slot=\"prefix\">2</span>\n\t\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"secondary\">\n\t\t\t\t\t<span slot=\"prefix\">3</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"warning\">\n\t\t\t\t\t<span slot=\"prefix\">4</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t</gov-stepper>\n\n\t\t\t<br><br>\n\t\t\t<h3>Velikost S</h3>\n\n\t\t\t<gov-stepper size=\"s\">\n\t\t\t\t<gov-stepper-item trigger-tag=\"h1\" label=\"Hotový krok\" variant=\"success\" annotation=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"check-lg\"></gov-icon>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Chybový krok\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"x-lg\"></gov-icon>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Krok s textem, obrázkem, tlačítkem\" variant=\"primary\">\n\t\t\t\t\t<span slot=\"prefix\">2</span>\n\t\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t\t<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>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"secondary\">\n\t\t\t\t\t<span slot=\"prefix\">3</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"warning\">\n\t\t\t\t\t<span slot=\"prefix\">4</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t</gov-stepper>\n\n\t\t\t<br><br>\n\t\t\t<h3>Velikost XS</h3>\n\n\t\t\t<gov-stepper size=\"xs\">\n\t\t\t\t<gov-stepper-item trigger-tag=\"h1\" label=\"Hotový krok\" variant=\"success\" annotation=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"check-lg\"></gov-icon>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Chybový krok\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"x-lg\"></gov-icon>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Krok s textem, obrázkem, tlačítkem\" variant=\"primary\">\n\t\t\t\t\t<span slot=\"prefix\">2</span>\n\t\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t\t<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>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"secondary\">\n\t\t\t\t\t<span slot=\"prefix\">3</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item label=\"Budoucí krok\" variant=\"warning\">\n\t\t\t\t\t<span slot=\"prefix\">4</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t</gov-stepper>\n\t\t`\n\t}\n}\n\nif (customElements.get('stepper-page') === undefined) {\n\tcustomElements.define('stepper-page', StepperPage)\n}\n"]}

package/dist/collection/pages/Tabs.js

@@ -224,6 +224,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>
 		`;
   }
 }

package/dist/collection/pages/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../../src/pages/Tabs.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;EACjC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgOhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;EAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;CAC5C","sourcesContent":["class TabsPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<h2>Tabs</h2>\n\t\t\t<gov-tabs id=\"po\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"secondary\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"success\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"warning\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"error\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\n\t\t\t<gov-tabs id=\"po\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\n\t\t\t<gov-tabs id=\"po\" variant=\"secondary\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"success\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"warning\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"error\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t`\n\t}\n}\n\nif (customElements.get('tabs-page') === undefined) {\n\tcustomElements.define('tabs-page', TabsPage)\n}\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../../src/pages/Tabs.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;EACjC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0ThB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;EAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;CAC5C","sourcesContent":["class TabsPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<h2>Tabs</h2>\n\t\t\t<gov-tabs id=\"po\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"secondary\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"success\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"warning\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"error\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\n\t\t\t<gov-tabs id=\"po\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\n\t\t\t<gov-tabs id=\"po\" variant=\"secondary\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"success\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"warning\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" variant=\"error\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\n\t\t\t<h2>Vertical tabs</h2>\n\t\t\t<gov-tabs id=\"po\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\" orientation=\"vertical\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi super tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi super tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\" orientation=\"vertical\">\n\t\t\t\t<gov-tabs-item label=\"Muj super tab\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"Dalsi super tab s dlouhým popisem\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"Další super tab s naprosto nesmyslně dlouhým popisem, který se doufám nevyužije\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\" orientation=\"vertical\">\n\t\t\t\t<gov-tabs-item label=\"TAB #1\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #2\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"TAB #3\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id=\"po\" type=\"badge\" wcag-label=\"Důležitý tabs\" wcag-select-label=\"Výběr možnosti\" orientation=\"vertical\">\n\t\t\t\t<gov-tabs-item label=\"Muj super tab\">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"Dalsi super tab s dlouhým popisem\" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label=\"Další super tab s naprosto nesmyslně dlouhým popisem, který se doufám nevyužije\">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t`\n\t}\n}\n\nif (customElements.get('tabs-page') === undefined) {\n\tcustomElements.define('tabs-page', TabsPage)\n}\n"]}

package/dist/collection/pages/Tiles.js

@@ -69,6 +69,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>
 		`;

package/dist/collection/pages/Tiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tiles.js","sourceRoot":"","sources":["../../../../../src/pages/Tiles.ts"],"names":[],"mappings":"AAAA,MAAM,SAAU,SAAQ,WAAW;EAClC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE;EACnD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;CAC9C","sourcesContent":["class TilesPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Tiles</h2>\n\n\t\t<div class=\"gov-bg--secondary-300\" style=\"padding: 48px;\">\n\t\t\t<div style=\"max-width: 600px;\">\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<br>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<ul class=\"gov-list--plain\">\n\t\t\t\t\t\t<li><a href=\"#\">Občanský život</a></li>\n\t\t\t\t\t\t<li><a href=\"#\">Podnikání v ČR</a></li>\n\t\t\t\t\t\t<li><a href=\"#\">Czech POINT</a></li>\n\t\t\t\t\t</ul>\n\t\t\t\t</gov-tile>\n\t\t\t</div>\n\t\t\t<div style=\"max-width: 800px;\">\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\" promotion>\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t</div>\n\t\t\t<br>\n\n\t\t\t<gov-tiles columns=\"4\">\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t</gov-tiles>\n\n\t\t</div>\n\t\t`\n\t}\n}\n\nif (customElements.get('tiles-page') === undefined) {\n\tcustomElements.define('tiles-page', TilesPage)\n}\n"]}
+{"version":3,"file":"Tiles.js","sourceRoot":"","sources":["../../../../../src/pages/Tiles.ts"],"names":[],"mappings":"AAAA,MAAM,SAAU,SAAQ,WAAW;EAClC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8GhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE;EACnD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;CAC9C","sourcesContent":["class TilesPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Tiles</h2>\n\n\t\t<div class=\"gov-bg--secondary-300\" style=\"padding: 48px;\">\n\t\t\t<div style=\"max-width: 600px;\">\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<br>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<ul class=\"gov-list--plain\">\n\t\t\t\t\t\t<li><a href=\"#\">Občanský život</a></li>\n\t\t\t\t\t\t<li><a href=\"#\">Podnikání v ČR</a></li>\n\t\t\t\t\t\t<li><a href=\"#\">Czech POINT</a></li>\n\t\t\t\t\t</ul>\n\t\t\t\t</gov-tile>\n\t\t\t</div>\n\t\t\t<div style=\"max-width: 800px;\">\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\" promotion>\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t</div>\n\t\t\t<br>\n\n\t\t\t<gov-tiles columns=\"4\">\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t</gov-tiles>\n\t\t\t<br>\n\t\t\t<gov-tiles columns=\"3\" no-border>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t\t<gov-tile name=\"Zdroje energie, těžba, nerosty, drahé kovy\" href=\"#\">\n\t\t\t\t\t<gov-icon name=\"id-card\" type=\"complex\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - 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>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-tile>\n\t\t\t</gov-tiles>\n\n\t\t</div>\n\t\t`\n\t}\n}\n\nif (customElements.get('tiles-page') === undefined) {\n\tcustomElements.define('tiles-page', TilesPage)\n}\n"]}

package/dist/collection/pages/ToastMessage.js

@@ -5,7 +5,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>

package/dist/collection/pages/ToastMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastMessage.js","sourceRoot":"","sources":["../../../../../src/pages/ToastMessage.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAiB,SAAQ,WAAW;EACzC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsCf,CAAA;EACH,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,KAAK,SAAS,EAAE;EAC3D,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAA;CAC7D","sourcesContent":["class ToastMessagePage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>\n\t\t\tToast Message\n\t\t</h2>\n\t\t<gov-toast variant=\"success\">\n\t\t\t<gov-icon name=\"check\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše dokumenty byly úspěšně staženy.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"error\" gravity=\"bottom\" position=\"left\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tNení možné požadavek zpracovat z důvodu chyby serveru.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"warning\" position=\"left\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tŽádost se nepodařilo odeslat, zkontrolujte nastavení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"primary\" position=\"center\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSoubory jsou připraveny ke stažení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"secondary\"  gravity=\"bottom\" position=\"right\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše aplikace byla aktualizovaná na novou verzi!\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t\t`\n\t}\n}\n\nif (customElements.get('toast-message-page') === undefined) {\n\tcustomElements.define('toast-message-page', ToastMessagePage)\n}\n"]}
+{"version":3,"file":"ToastMessage.js","sourceRoot":"","sources":["../../../../../src/pages/ToastMessage.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAiB,SAAQ,WAAW;EACzC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsCf,CAAA;EACH,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,KAAK,SAAS,EAAE;EAC3D,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAA;CAC7D","sourcesContent":["class ToastMessagePage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>\n\t\t\tToast Message\n\t\t</h2>\n\t\t<gov-toast variant=\"success\">\n\t\t\t<gov-icon name=\"check-lg\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše dokumenty byly úspěšně staženy.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"error\" gravity=\"bottom\" position=\"left\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tNení možné požadavek zpracovat z důvodu chyby serveru.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"warning\" position=\"left\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tŽádost se nepodařilo odeslat, zkontrolujte nastavení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"primary\" position=\"center\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSoubory jsou připraveny ke stažení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"secondary\"  gravity=\"bottom\" position=\"right\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše aplikace byla aktualizovaná na novou verzi!\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t\t`\n\t}\n}\n\nif (customElements.get('toast-message-page') === undefined) {\n\tcustomElements.define('toast-message-page', ToastMessagePage)\n}\n"]}

package/dist/collection/pages/ToastMessageCountdown.js

@@ -5,7 +5,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>

package/dist/collection/pages/ToastMessageCountdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastMessageCountdown.js","sourceRoot":"","sources":["../../../../../src/pages/ToastMessageCountdown.ts"],"names":[],"mappings":"AAAA,MAAM,yBAA0B,SAAQ,WAAW;EAClD,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsCf,CAAA;EACH,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,8BAA8B,CAAC,KAAK,SAAS,EAAE;EACrE,cAAc,CAAC,MAAM,CAAC,8BAA8B,EAAE,yBAAyB,CAAC,CAAA;CAChF","sourcesContent":["class ToastMessageCountdownPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>\n\t\t\tToast Message Countdown\n\t\t</h2>\n\t\t<gov-toast variant=\"success\" type=\"solid\">\n\t\t\t<gov-icon name=\"check\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše dokumenty byly úspěšně staženy.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"error\" type=\"solid\" gravity=\"bottom\" position=\"left\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tNení možné požadavek zpracovat z důvodu chyby serveru.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"warning\" type=\"solid\" position=\"left\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tŽádost se nepodařilo odeslat, zkontrolujte nastavení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"primary\" type=\"solid\" position=\"center\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSoubory jsou připraveny ke stažení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"secondary\" type=\"solid\" gravity=\"bottom\" position=\"right\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše aplikace byla aktualizovaná na novou verzi!\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t\t`\n\t}\n}\n\nif (customElements.get('toast-message-countdown-page') === undefined) {\n\tcustomElements.define('toast-message-countdown-page', ToastMessageCountdownPage)\n}\n"]}
+{"version":3,"file":"ToastMessageCountdown.js","sourceRoot":"","sources":["../../../../../src/pages/ToastMessageCountdown.ts"],"names":[],"mappings":"AAAA,MAAM,yBAA0B,SAAQ,WAAW;EAClD,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsCf,CAAA;EACH,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,8BAA8B,CAAC,KAAK,SAAS,EAAE;EACrE,cAAc,CAAC,MAAM,CAAC,8BAA8B,EAAE,yBAAyB,CAAC,CAAA;CAChF","sourcesContent":["class ToastMessageCountdownPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>\n\t\t\tToast Message Countdown\n\t\t</h2>\n\t\t<gov-toast variant=\"success\" type=\"solid\">\n\t\t\t<gov-icon name=\"check-lg\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše dokumenty byly úspěšně staženy.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"error\" type=\"solid\" gravity=\"bottom\" position=\"left\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tNení možné požadavek zpracovat z důvodu chyby serveru.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"warning\" type=\"solid\" position=\"left\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tŽádost se nepodařilo odeslat, zkontrolujte nastavení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"primary\" type=\"solid\" position=\"center\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSoubory jsou připraveny ke stažení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast variant=\"secondary\" type=\"solid\" gravity=\"bottom\" position=\"right\">\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše aplikace byla aktualizovaná na novou verzi!\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t\t`\n\t}\n}\n\nif (customElements.get('toast-message-countdown-page') === undefined) {\n\tcustomElements.define('toast-message-countdown-page', ToastMessageCountdownPage)\n}\n"]}

package/dist/collection/pages/Wizzard.js

@@ -5,7 +5,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>
@@ -22,7 +22,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>
@@ -31,12 +31,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>
@@ -56,12 +56,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>