@gov-design-system-ce/components 0.0.1

package/dist/collection/pages/Spacer.js

@@ -0,0 +1,19 @@
+class SpacerPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+			<gov-spacer size="2xs"></gov-spacer>
+			<gov-spacer size="xs"></gov-spacer>
+			<gov-spacer size="s"></gov-spacer>
+			<gov-spacer size="m"></gov-spacer>
+			<gov-spacer size="l" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="xl"></gov-spacer>
+			<gov-spacer size="2xl"></gov-spacer>
+			<gov-spacer size="3xl"></gov-spacer>
+			<gov-spacer size="4xl"></gov-spacer>
+		`;
+  }
+}
+if (customElements.get('spacer-page') === undefined) {
+  customElements.define('spacer-page', SpacerPage);
+}
+//# sourceMappingURL=Spacer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../../../src/pages/Spacer.ts"],"names":[],"mappings":"AAAA,MAAM,UAAW,SAAQ,WAAW;EACnC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;GAUhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE;EACpD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;CAChD","sourcesContent":["class SpacerPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<gov-spacer size=\"2xs\"></gov-spacer>\n\t\t\t<gov-spacer size=\"xs\"></gov-spacer>\n\t\t\t<gov-spacer size=\"s\"></gov-spacer>\n\t\t\t<gov-spacer size=\"m\"></gov-spacer>\n\t\t\t<gov-spacer size=\"l\" breakpoint=\"sm\"></gov-spacer>\n\t\t\t<gov-spacer size=\"xl\"></gov-spacer>\n\t\t\t<gov-spacer size=\"2xl\"></gov-spacer>\n\t\t\t<gov-spacer size=\"3xl\"></gov-spacer>\n\t\t\t<gov-spacer size=\"4xl\"></gov-spacer>\n\t\t`\n\t}\n}\n\nif (customElements.get('spacer-page') === undefined) {\n\tcustomElements.define('spacer-page', SpacerPage)\n}\n"]}

package/dist/collection/pages/Statsbar.js

@@ -0,0 +1,202 @@
+class StatsbarPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+			<gov-statsbar>
+				<gov-statsbar-item>
+					<slot>215 mil</slot>
+					<p slot="text">datových zpráv</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<slot>1 mil</slot>
+					<p slot="text">datových schránek</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<slot>967 tis</slot>
+					<p slot="text">hodin ušetřených ve frontách</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<slot>12 mil</slot>
+					<p slot="text">ušetřených korun</p>
+				</gov-statsbar-item>
+			</gov-statsbar>
+			<hr />
+			<gov-statsbar>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="id-card" slot="icon"></gov-icon>
+					<slot>215 mil</slot>
+					<p slot="text">Font Awesome</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="job-loss" slot="icon"></gov-icon>
+					<slot>1 mil</slot>
+					<p slot="text">datových schránek</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="globe" slot="icon"></gov-icon>
+					<slot>967 tis</slot>
+					<p slot="text">hodin ušetřených ve frontách</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="new-comments" slot="icon"></gov-icon>
+					<slot>12 mil</slot>
+					<p slot="text">ušetřených korun</p>
+				</gov-statsbar-item>
+			</gov-statsbar>
+			<hr />
+			<gov-statsbar icon-position="left">
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="id-card" slot="icon"></gov-icon>
+					<slot>215 mil</slot>
+					<p slot="text">datových zpráv</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="job-loss" slot="icon"></gov-icon>
+					<slot>1 mil</slot>
+					<p slot="text">datových schránek</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="globe" slot="icon"></gov-icon>
+					<slot>967 tis</slot>
+					<p slot="text">hodin ušetřených ve frontách</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="new-comments" slot="icon"></gov-icon>
+					<slot>12 mil</slot>
+					<p slot="text">ušetřených korun</p>
+				</gov-statsbar-item>
+			</gov-statsbar>
+			<hr />
+			<gov-statsbar inverse variant="secondary">
+				<gov-statsbar-item>
+					<slot>215 mil</slot>
+					<p slot="text">datových zpráv</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<slot>1 mil</slot>
+					<p slot="text">datových schránek</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<slot>967 tis</slot>
+					<p slot="text">hodin ušetřených ve frontách</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<slot>12 mil</slot>
+					<p slot="text">ušetřených korun</p>
+				</gov-statsbar-item>
+			</gov-statsbar>
+			<hr />
+			<gov-statsbar inverse>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="id-card" slot="icon"></gov-icon>
+					<slot>215 mil</slot>
+					<p slot="text">datových zpráv</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="job-loss" slot="icon"></gov-icon>
+					<slot>1 mil</slot>
+					<p slot="text">datových schránek</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="globe" slot="icon"></gov-icon>
+					<slot>967 tis</slot>
+					<p slot="text">hodin ušetřených ve frontách</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="new-comments" slot="icon"></gov-icon>
+					<slot>12 mil</slot>
+					<p slot="text">ušetřených korun</p>
+				</gov-statsbar-item>
+			</gov-statsbar>
+			<hr />
+			<gov-statsbar inverse variant="secondary" icon-position="left">
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="id-card" slot="icon"></gov-icon>
+					<slot>215 mil</slot>
+					<p slot="text">datových zpráv</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="job-loss" slot="icon"></gov-icon>
+					<slot>1 mil</slot>
+					<p slot="text">datových schránek</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="globe" slot="icon"></gov-icon>
+					<slot>967 tis</slot>
+					<p slot="text">hodin ušetřených ve frontách</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="new-comments" slot="icon"></gov-icon>
+					<slot>12 mil</slot>
+					<p slot="text">ušetřených korun</p>
+				</gov-statsbar-item>
+			</gov-statsbar>
+			<hr />
+			<gov-statsbar variant="secondary">
+					<gov-statsbar-item>
+						<slot>215 mil</slot>
+						<p slot="text">datových zpráv</p>
+					</gov-statsbar-item>
+					<gov-statsbar-item>
+						<slot>1 mil</slot>
+						<p slot="text">datových schránek</p>
+					</gov-statsbar-item>
+					<gov-statsbar-item>
+						<slot>967 tis</slot>
+						<p slot="text">hodin ušetřených ve frontách</p>
+					</gov-statsbar-item>
+					<gov-statsbar-item>
+						<slot>12 mil</slot>
+						<p slot="text">ušetřených korun</p>
+					</gov-statsbar-item>
+			</gov-statsbar>
+			<gov-statsbar variant="secondary">
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="id-card" slot="icon"></gov-icon>
+					<slot>215 mil</slot>
+					<p slot="text">datových zpráv</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="job-loss" slot="icon"></gov-icon>
+					<slot>1 mil</slot>
+					<p slot="text">datových schránek</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="globe" slot="icon"></gov-icon>
+					<slot>967 tis</slot>
+					<p slot="text">hodin ušetřených ve frontách</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="new-comments" slot="icon"></gov-icon>
+					<slot>12 mil</slot>
+					<p slot="text">ušetřených korun</p>
+				</gov-statsbar-item>
+			</gov-statsbar>
+			<gov-statsbar variant="secondary" icon-position="left">
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="id-card" slot="icon"></gov-icon>
+					<slot>215 mil</slot>
+					<p slot="text">datových zpráv</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="job-loss" slot="icon"></gov-icon>
+					<slot>1 mil</slot>
+					<p slot="text">datových schránek</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="globe" slot="icon"></gov-icon>
+					<slot>967 tis</slot>
+					<p slot="text">hodin ušetřených ve frontách</p>
+				</gov-statsbar-item>
+				<gov-statsbar-item>
+					<gov-icon type="complex" name="new-comments" slot="icon"></gov-icon>
+					<slot>12 mil</slot>
+					<p slot="text">ušetřených korun</p>
+				</gov-statsbar-item>
+			</gov-statsbar>
+		`;
+  }
+}
+if (customElements.get('statsbar-page') === undefined) {
+  customElements.define('statsbar-page', StatsbarPage);
+}
+//# sourceMappingURL=Statsbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Statsbar.js","sourceRoot":"","sources":["../../../../../src/pages/Statsbar.ts"],"names":[],"mappings":"AAAA,MAAM,YAAa,SAAQ,WAAW;EACrC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiMhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,SAAS,EAAE;EACtD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAA;CACpD","sourcesContent":["class StatsbarPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<gov-statsbar>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<slot>215 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových zpráv</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<slot>1 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových schránek</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<slot>967 tis</slot>\n\t\t\t\t\t<p slot=\"text\">hodin ušetřených ve frontách</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<slot>12 mil</slot>\n\t\t\t\t\t<p slot=\"text\">ušetřených korun</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t</gov-statsbar>\n\t\t\t<hr />\n\t\t\t<gov-statsbar>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"id-card\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>215 mil</slot>\n\t\t\t\t\t<p slot=\"text\">Font Awesome</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"job-loss\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>1 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových schránek</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"globe\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>967 tis</slot>\n\t\t\t\t\t<p slot=\"text\">hodin ušetřených ve frontách</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"new-comments\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>12 mil</slot>\n\t\t\t\t\t<p slot=\"text\">ušetřených korun</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t</gov-statsbar>\n\t\t\t<hr />\n\t\t\t<gov-statsbar icon-position=\"left\">\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"id-card\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>215 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových zpráv</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"job-loss\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>1 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových schránek</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"globe\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>967 tis</slot>\n\t\t\t\t\t<p slot=\"text\">hodin ušetřených ve frontách</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"new-comments\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>12 mil</slot>\n\t\t\t\t\t<p slot=\"text\">ušetřených korun</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t</gov-statsbar>\n\t\t\t<hr />\n\t\t\t<gov-statsbar inverse variant=\"secondary\">\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<slot>215 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových zpráv</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<slot>1 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových schránek</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<slot>967 tis</slot>\n\t\t\t\t\t<p slot=\"text\">hodin ušetřených ve frontách</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<slot>12 mil</slot>\n\t\t\t\t\t<p slot=\"text\">ušetřených korun</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t</gov-statsbar>\n\t\t\t<hr />\n\t\t\t<gov-statsbar inverse>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"id-card\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>215 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových zpráv</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"job-loss\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>1 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových schránek</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"globe\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>967 tis</slot>\n\t\t\t\t\t<p slot=\"text\">hodin ušetřených ve frontách</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"new-comments\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>12 mil</slot>\n\t\t\t\t\t<p slot=\"text\">ušetřených korun</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t</gov-statsbar>\n\t\t\t<hr />\n\t\t\t<gov-statsbar inverse variant=\"secondary\" icon-position=\"left\">\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"id-card\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>215 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových zpráv</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"job-loss\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>1 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových schránek</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"globe\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>967 tis</slot>\n\t\t\t\t\t<p slot=\"text\">hodin ušetřených ve frontách</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"new-comments\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>12 mil</slot>\n\t\t\t\t\t<p slot=\"text\">ušetřených korun</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t</gov-statsbar>\n\t\t\t<hr />\n\t\t\t<gov-statsbar variant=\"secondary\">\n\t\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t\t<slot>215 mil</slot>\n\t\t\t\t\t\t<p slot=\"text\">datových zpráv</p>\n\t\t\t\t\t</gov-statsbar-item>\n\t\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t\t<slot>1 mil</slot>\n\t\t\t\t\t\t<p slot=\"text\">datových schránek</p>\n\t\t\t\t\t</gov-statsbar-item>\n\t\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t\t<slot>967 tis</slot>\n\t\t\t\t\t\t<p slot=\"text\">hodin ušetřených ve frontách</p>\n\t\t\t\t\t</gov-statsbar-item>\n\t\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t\t<slot>12 mil</slot>\n\t\t\t\t\t\t<p slot=\"text\">ušetřených korun</p>\n\t\t\t\t\t</gov-statsbar-item>\n\t\t\t</gov-statsbar>\n\t\t\t<gov-statsbar variant=\"secondary\">\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"id-card\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>215 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových zpráv</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"job-loss\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>1 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových schránek</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"globe\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>967 tis</slot>\n\t\t\t\t\t<p slot=\"text\">hodin ušetřených ve frontách</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"new-comments\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>12 mil</slot>\n\t\t\t\t\t<p slot=\"text\">ušetřených korun</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t</gov-statsbar>\n\t\t\t<gov-statsbar variant=\"secondary\" icon-position=\"left\">\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"id-card\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>215 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových zpráv</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"job-loss\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>1 mil</slot>\n\t\t\t\t\t<p slot=\"text\">datových schránek</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"globe\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>967 tis</slot>\n\t\t\t\t\t<p slot=\"text\">hodin ušetřených ve frontách</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t\t<gov-statsbar-item>\n\t\t\t\t\t<gov-icon type=\"complex\" name=\"new-comments\" slot=\"icon\"></gov-icon>\n\t\t\t\t\t<slot>12 mil</slot>\n\t\t\t\t\t<p slot=\"text\">ušetřených korun</p>\n\t\t\t\t</gov-statsbar-item>\n\t\t\t</gov-statsbar>\n\t\t`\n\t}\n}\n\nif (customElements.get('statsbar-page') === undefined) {\n\tcustomElements.define('statsbar-page', StatsbarPage)\n}\n"]}

package/dist/collection/pages/Stepper.js

@@ -0,0 +1,55 @@
+class StepperPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+			<h2>Stepper</h2>
+
+			<gov-stepper>
+				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success">
+					<gov-icon slot="prefix" name="check"></gov-icon>
+				</gov-stepper-item>
+				<gov-stepper-item label="Chybový krok" variant="error">
+					<gov-icon slot="prefix" name="cross"></gov-icon>
+				</gov-stepper-item>
+				<gov-stepper-item collapsible="true" label="Krok s textem, obrázkem, tlačítkem" variant="primary">
+					<span slot="prefix">2</span>
+					<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.</p>
+					</div>
+				</gov-stepper-item>
+				<gov-stepper-item label="Budoucí krok" variant="secondary">
+					<span slot="prefix">3</span>
+				</gov-stepper-item>
+				<gov-stepper-item label="Budoucí krok" variant="warning">
+					<span slot="prefix">4</span>
+				</gov-stepper-item>
+			</gov-stepper>
+
+			<br><br>
+
+			<gov-stepper size="s">
+				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success">
+					<gov-icon slot="prefix" name="check"></gov-icon>
+				</gov-stepper-item>
+				<gov-stepper-item label="Chybový krok" variant="error">
+					<gov-icon slot="prefix" name="cross"></gov-icon>
+				</gov-stepper-item>
+				<gov-stepper-item label="Krok s textem, obrázkem, tlačítkem" variant="primary">
+					<span slot="prefix">2</span>
+					<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.</p>
+					</div>
+				</gov-stepper-item>
+				<gov-stepper-item label="Budoucí krok" variant="secondary">
+					<span slot="prefix">3</span>
+				</gov-stepper-item>
+				<gov-stepper-item label="Budoucí krok" variant="warning">
+					<span slot="prefix">4</span>
+				</gov-stepper-item>
+			</gov-stepper>
+		`;
+  }
+}
+if (customElements.get("stepper-page") === undefined) {
+  customElements.define("stepper-page", StepperPage);
+}
+//# sourceMappingURL=Stepper.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8ChB,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<gov-stepper>\n\t\t\t\t<gov-stepper-item trigger-tag=\"h1\" label=\"Hotový krok\" variant=\"success\">\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 collapsible=\"true\" 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\n\t\t\t<gov-stepper size=\"s\">\n\t\t\t\t<gov-stepper-item trigger-tag=\"h1\" label=\"Hotový krok\" variant=\"success\">\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"]}

package/dist/collection/pages/Tabs.js

@@ -0,0 +1,233 @@
+class TabsPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+			<h2>Tabs</h2>
+			<gov-tabs id="po" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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" variant="secondary" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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" variant="success" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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" variant="warning" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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" variant="error" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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">
+				<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" variant="secondary" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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" variant="success" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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" variant="warning" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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" variant="error" type="badge" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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>
+		`;
+  }
+}
+if (customElements.get("tabs-page") === undefined) {
+  customElements.define("tabs-page", TabsPage);
+}
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +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"]}