@gov-design-system-ce/components 4.0.8-rc23 → 4.1.0-rc03

package/dist/collection/pages/Stepper.js

@@ -2,81 +2,96 @@ class StepperPage extends HTMLElement {
     connectedCallback() {
         this.innerHTML = `
 			<h2>Stepper</h2>
+			<h3>Velikost S</h3>
 
-			<h3>Velikost M</h3>
-			<gov-spacer size="l"></gov-spacer>
-
-			<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-stepper size="s">
+				<gov-stepper-item color="success" size="s">
 					<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>
+					<h1 slot="headline">Hotový krok</h1>
+					<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>
 				</gov-stepper-item>
-				<gov-stepper-item label="Chybový krok" variant="error">
+				<gov-stepper-item color="error" size="s">
 					<gov-icon slot="prefix" name="x-lg"></gov-icon>
+					<h2 slot="headline">Chybový krok</h2>
 				</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">
+				<gov-stepper-item color="primary" size="s">
 					<span slot="prefix">2</span>
+					<h2 slot="headline">Krok s textem, obrázkem</h2>
 					<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. 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>
 					</div>
 				</gov-stepper-item>
-				<gov-stepper-item label="Budoucí krok" variant="secondary">
+				<gov-stepper-item color="neutral" size="s">
 					<span slot="prefix">3</span>
+					<h2 slot="headline">Budoucí krok</h2>
 				</gov-stepper-item>
-				<gov-stepper-item label="Budoucí krok" variant="warning">
+				<gov-stepper-item color="warning" size="s">
 					<span slot="prefix">4</span>
+					<h2 slot="headline">Budoucí krok</h2>
 				</gov-stepper-item>
 			</gov-stepper>
 
 			<br><br>
-			<h3>Velikost S</h3>
-			<gov-spacer size="l"></gov-spacer>
+			<h3>Velikost M</h3>
 
-			<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-stepper size="m">
+				<gov-stepper-item color="success" size="m">
 					<gov-icon slot="prefix" name="check-lg"></gov-icon>
+					<h3 slot="headline">Hotový krok</h3>
+					<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+					<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-stepper-item color="error" size="m">
 					<gov-icon slot="prefix" name="x-lg"></gov-icon>
+					<h3 slot="headline">Chybový krok</h3>
 				</gov-stepper-item>
-				<gov-stepper-item label="Krok s textem, obrázkem, tlačítkem" variant="primary">
+				<gov-stepper-item color="primary" size="m">
 					<span slot="prefix">2</span>
+					<h2 slot="headline">Krok s textem</h2>
+					<span slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</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>
+						<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>
 					</div>
 				</gov-stepper-item>
-				<gov-stepper-item label="Budoucí krok" variant="secondary">
+				<gov-stepper-item color="neutral" size="m">
 					<span slot="prefix">3</span>
+					<h3 slot="headline">Budoucí krok</h3>
 				</gov-stepper-item>
-				<gov-stepper-item label="Budoucí krok" variant="warning">
+				<gov-stepper-item color="warning" size="m">
 					<span slot="prefix">4</span>
+					<h3 slot="headline">Budoucí krok</h3>
 				</gov-stepper-item>
 			</gov-stepper>
 
 			<br><br>
-			<h3>Velikost XS</h3>
-			<gov-spacer size="l"></gov-spacer>
+			<h3>Velikost L</h3>
 
-			<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-stepper size="l">
+				<gov-stepper-item color="success" size="l">
 					<gov-icon slot="prefix" name="check-lg"></gov-icon>
+					<h2 slot="headline">Hotový krok</h2>
+					<span class="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</span>
 				</gov-stepper-item>
-				<gov-stepper-item label="Chybový krok" variant="error">
+				<gov-stepper-item color="error" size="l">
 					<gov-icon slot="prefix" name="x-lg"></gov-icon>
+					<h3 slot="headline">Chybový krok</h3>
 				</gov-stepper-item>
-				<gov-stepper-item label="Krok s textem, obrázkem, tlačítkem" variant="primary">
+				<gov-stepper-item color="primary" size="l">
 					<span slot="prefix">2</span>
+					<h3 slot="headline">Krok s textem, obrázkem</h3>
 					<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">
+				<gov-stepper-item color="neutral" size="l">
 					<span slot="prefix">3</span>
+					<h3 slot="headline">Budoucí krok</h3>
 				</gov-stepper-item>
-				<gov-stepper-item label="Budoucí krok" variant="warning">
+				<gov-stepper-item color="warning" size="l">
 					<span slot="prefix">4</span>
+					<h3 slot="headline">Budoucí krok</h3>
 				</gov-stepper-item>
 			</gov-stepper>
 		`;

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;IACpC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;AACnD,CAAC","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\t\t\t<gov-spacer size=\"l\"></gov-spacer>\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\t\t\t<gov-spacer size=\"l\"></gov-spacer>\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\t\t\t<gov-spacer size=\"l\"></gov-spacer>\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"]}
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../../../../src/pages/Stepper.ts"],"names":[],"mappings":"AAAA,MAAM,WAAY,SAAQ,WAAW;IACpC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;AACnD,CAAC","sourcesContent":["class StepperPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<h2>Stepper</h2>\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 color=\"success\" size=\"s\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"check-lg\"></gov-icon>\n\t\t\t\t\t<h1 slot=\"headline\">Hotový krok</h1>\n\t\t\t\t\t<p slot=\"annotation\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color=\"error\" size=\"s\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"x-lg\"></gov-icon>\n\t\t\t\t\t<h2 slot=\"headline\">Chybový krok</h2>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color=\"primary\" size=\"s\">\n\t\t\t\t\t<span slot=\"prefix\">2</span>\n\t\t\t\t\t<h2 slot=\"headline\">Krok s textem, obrázkem</h2>\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 color=\"neutral\" size=\"s\">\n\t\t\t\t\t<span slot=\"prefix\">3</span>\n\t\t\t\t\t<h2 slot=\"headline\">Budoucí krok</h2>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color=\"warning\" size=\"s\">\n\t\t\t\t\t<span slot=\"prefix\">4</span>\n\t\t\t\t\t<h2 slot=\"headline\">Budoucí krok</h2>\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 M</h3>\n\n\t\t\t<gov-stepper size=\"m\">\n\t\t\t\t<gov-stepper-item color=\"success\" size=\"m\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"check-lg\"></gov-icon>\n\t\t\t\t\t<h3 slot=\"headline\">Hotový krok</h3>\n\t\t\t\t\t<p slot=\"annotation\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\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 color=\"error\" size=\"m\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"x-lg\"></gov-icon>\n\t\t\t\t\t<h3 slot=\"headline\">Chybový krok</h3>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color=\"primary\" size=\"m\">\n\t\t\t\t\t<span slot=\"prefix\">2</span>\n\t\t\t\t\t<h2 slot=\"headline\">Krok s textem</h2>\n\t\t\t\t\t<span slot=\"annotation\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</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 color=\"neutral\" size=\"m\">\n\t\t\t\t\t<span slot=\"prefix\">3</span>\n\t\t\t\t\t<h3 slot=\"headline\">Budoucí krok</h3>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color=\"warning\" size=\"m\">\n\t\t\t\t\t<span slot=\"prefix\">4</span>\n\t\t\t\t\t<h3 slot=\"headline\">Budoucí krok</h3>\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 L</h3>\n\n\t\t\t<gov-stepper size=\"l\">\n\t\t\t\t<gov-stepper-item color=\"success\" size=\"l\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"check-lg\"></gov-icon>\n\t\t\t\t\t<h2 slot=\"headline\">Hotový krok</h2>\n\t\t\t\t\t<span class=\"annotation\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color=\"error\" size=\"l\">\n\t\t\t\t\t<gov-icon slot=\"prefix\" name=\"x-lg\"></gov-icon>\n\t\t\t\t\t<h3 slot=\"headline\">Chybový krok</h3>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color=\"primary\" size=\"l\">\n\t\t\t\t\t<span slot=\"prefix\">2</span>\n\t\t\t\t\t<h3 slot=\"headline\">Krok s textem, obrázkem</h3>\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 color=\"neutral\" size=\"l\">\n\t\t\t\t\t<span slot=\"prefix\">3</span>\n\t\t\t\t\t<h3 slot=\"headline\">Budoucí krok</h3>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color=\"warning\" size=\"l\">\n\t\t\t\t\t<span slot=\"prefix\">4</span>\n\t\t\t\t\t<h3 slot=\"headline\">Budoucí krok</h3>\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

@@ -2,7 +2,79 @@ 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-container>
+			<h3>Primary</h3>
+			<br>
+			<gov-tabs color="primary" size="xs" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1" icon-start="basic/star">
+					<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" icon-end="basic/star" 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>
+			<br>
+			<gov-tabs color="primary" size="s" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" direction="column">
+				<gov-tabs-item label="TAB #1" icon-start="basic/star">
+					<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" icon-start="basic/star"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" icon-start="basic/star">
+					<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>
+			<br>
+			<gov-tabs color="primary" size="m" 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>
+			<br>
+			<gov-tabs color="primary" size="l" 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
@@ -18,22 +90,39 @@ class TabsPage extends HTMLElement {
 						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" disabled="true">
+				<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-item label="TAB #4" disabled="true">
-					<p>Dalsi suepr tab - disabled 4.</p>
+			</gov-tabs>
+			<br>
+			<gov-tabs color="primary" size="xl" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="Praesent vehicula sollicitudin">
+					<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 #5" disabled="false">
-					<p>Dalsi suepr tab - enable 5.</p>
+				<gov-tabs-item label="Duis in blandit lacus" 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 #6">
-					<p>Dalsi suepr tab - 6 last</p>
+				<gov-tabs-item label="Lorem ipsum dolor sit amet">
+					<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">
+			<br>
+			<h3>Neutral</h3>
+			<br>
+			<gov-tabs color="neutral" size="xs" 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
@@ -55,7 +144,8 @@ class TabsPage extends HTMLElement {
 						(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">
+			<br>
+			<gov-tabs color="neutral" size="s" 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
@@ -77,7 +167,8 @@ class TabsPage extends HTMLElement {
 						(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">
+			<br>
+			<gov-tabs color="neutral" size="m" 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
@@ -99,7 +190,8 @@ class TabsPage extends HTMLElement {
 						(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">
+			<br>
+			<gov-tabs color="neutral" size="l" 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
@@ -121,9 +213,9 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
-
-			<gov-tabs id="po" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
-				<gov-tabs-item label="TAB #1" disabled="true">
+			<br>
+			<gov-tabs color="neutral" size="xl" 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
@@ -144,8 +236,152 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
+			<br>
+			<br><br>
 
-			<gov-tabs id="po" variant="secondary" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+			<h3>Chip primary</h3>
+			<br>
+			<gov-tabs color="primary" size="xs" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1" icon-start="basic/star">
+					<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" icon-end="basic/star" 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>
+			<br>
+			<gov-tabs color="primary" size="s" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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>
+			<br>
+			<gov-tabs color="primary" size="m" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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>
+			<br>
+			<gov-tabs color="primary" size="l" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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>
+			<br>
+			<gov-tabs color="primary" size="xl" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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>
+			<br>
+			<h3>Chip neutral</h3>
+			<br>
+			<gov-tabs color="neutral" size="xs" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+				<gov-tabs-item label="TAB #1">
+					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
+						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
+						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>
+			<br>
+			<gov-tabs color="neutral" size="s" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
 				<gov-tabs-item label="TAB #1">
 					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
 						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
@@ -167,7 +403,8 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
-			<gov-tabs id="po" variant="success" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+			<br>
+			<gov-tabs color="neutral" size="m" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
 				<gov-tabs-item label="TAB #1">
 					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
 						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
@@ -189,7 +426,8 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
-			<gov-tabs id="po" variant="warning" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+			<br>
+			<gov-tabs color="neutral" size="l" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
 				<gov-tabs-item label="TAB #1">
 					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
 						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
@@ -211,7 +449,8 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
-			<gov-tabs id="po" variant="error" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
+			<br>
+			<gov-tabs color="neutral" size="xl" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
 				<gov-tabs-item label="TAB #1">
 					<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
 						designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
@@ -233,6 +472,8 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
+			<br>
+			<br><br>
 
 			<h2>Vertical tabs</h2>
 			<gov-tabs id="po" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">
@@ -323,6 +564,7 @@ class TabsPage extends HTMLElement {
 						(např. opakování „asdf asdf asdf…“).</p>
 				</gov-tabs-item>
 			</gov-tabs>
+			</gov-container>
 		`;
     }
 }