@gov-design-system-ce/components 4.2.5 → 4.2.7

package/dist/collection/pages/Grid.js

@@ -43,12 +43,12 @@ class GridPage extends HTMLElement {
 
 		<h2>Responsive grid</h2>
 		<gov-grid gap="m">
-			<gov-grid-item col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 1</gov-grid-item>
-			<gov-grid-item col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 2</gov-grid-item>
-			<gov-grid-item col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 3</gov-grid-item>
-			<gov-grid-item col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 4</gov-grid-item>
-			<gov-grid-item col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 5</gov-grid-item>
-			<gov-grid-item col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 6</gov-grid-item>
+			<gov-grid-item col-span="12" col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 1</gov-grid-item>
+			<gov-grid-item col-span="12" col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 2</gov-grid-item>
+			<gov-grid-item col-span="12" col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 3</gov-grid-item>
+			<gov-grid-item col-span="12" col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 4</gov-grid-item>
+			<gov-grid-item col-span="12" col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 5</gov-grid-item>
+			<gov-grid-item col-span="12" col-span-sm="6" col-span-md="4" col-span-lg="3" col-span-xl="2">Cell 6</gov-grid-item>
 		</gov-grid>
 
 		<h2>Vertical (Y) align</h2>
@@ -96,13 +96,13 @@ class GridPage extends HTMLElement {
 		<br>
 		<h3>Responsive</h3>
 		<gov-grid gap="xl">
-			<gov-grid-item col-span-sm="12" col-span-md="6" col-span-xl="3" row-span-md="2" row-span-xl="2">1. Velká přes 2 na výšku<br><br>1. Velká přes 2 na výšku<br><br></gov-grid-item>
-			<gov-grid-item col-span-sm="12" col-span-md="6" col-span-xl="3">1. Malá<br><br></gov-grid-item>
-			<gov-grid-item col-span-sm="12" col-span-md="6" col-span-xl="3" row-span-md="2" row-span-xl="3">Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br></gov-grid-item>
-			<gov-grid-item col-span-sm="12" col-span-md="6" col-span-xl="3">2. Malá<br><br></gov-grid-item>
-			<gov-grid-item col-span-sm="12" col-span-md="6" col-span-xl="3">3. Malá<br><br></gov-grid-item>
-			<gov-grid-item col-span-sm="12" col-span-md="6" col-span-xl="3" row-span-md="2" row-span-xl="2">2. Velká přes 2 na výšku<br><br>2. Velká přes 2 na výšku<br><br></gov-grid-item>
-			<gov-grid-item col-span-sm="12" col-span-md="12" col-span-xl="6">Velká přes 2 na šířku<br><br>Velká přes 2 na šířku Velká přes 2 na šířku Velká přes 2 na šířku Velká přes 2 na šířku</gov-grid-item>
+			<gov-grid-item col-span="12" col-span-md="6" col-span-xl="3" row-span-md="2" row-span-xl="2">1. Velká přes 2 na výšku<br><br>1. Velká přes 2 na výšku<br><br></gov-grid-item>
+			<gov-grid-item col-span="12" col-span-md="6" col-span-xl="3">1. Malá<br><br></gov-grid-item>
+			<gov-grid-item col-span="12" col-span-md="6" col-span-xl="3" row-span-md="2" row-span-xl="3">Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br></gov-grid-item>
+			<gov-grid-item col-span="12" col-span-md="6" col-span-xl="3">2. Malá<br><br></gov-grid-item>
+			<gov-grid-item col-span="12" col-span-md="6" col-span-xl="3">3. Malá<br><br></gov-grid-item>
+			<gov-grid-item col-span="12" col-span-md="6" col-span-xl="3" row-span-md="2" row-span-xl="2">2. Velká přes 2 na výšku<br><br>2. Velká přes 2 na výšku<br><br></gov-grid-item>
+			<gov-grid-item col-span="12" col-span-md="12" col-span-xl="6">Velká přes 2 na šířku<br><br>Velká přes 2 na šířku Velká přes 2 na šířku Velká přes 2 na šířku Velká přes 2 na šířku</gov-grid-item>
 		</gov-grid>
 			`;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../../../src/pages/Grid.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwGf,CAAA;IACH,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAC7C,CAAC","sourcesContent":["class GridPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>\n\t\t\tGrid\n\t\t</h2>\n\t\t<style>\n\t\t\tgov-grid-item {\n\t\t\t\tdisplay: block;\n\t\t\t\tbackground: var(--background-neutral-subtle);\n\t\t\t\tpadding: 10px;\n\t\t\t}\n\t\t</style>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"1\">1/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"11\">11/12</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"2\">2/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"10\">10/12</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"3\">3/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"9\">9/12</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"4\">4/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"8\">8/12</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"5\">5/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"7\">7/12</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"6\">6/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"6\">6/12</gov-grid-item>\n\t\t</gov-grid>\n\n\t\t<h2>Responsive grid</h2>\n\t\t<gov-grid gap=\"m\">\n\t\t\t<gov-grid-item col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 1</gov-grid-item>\n\t\t\t<gov-grid-item col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 2</gov-grid-item>\n\t\t\t<gov-grid-item col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 3</gov-grid-item>\n\t\t\t<gov-grid-item col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 4</gov-grid-item>\n\t\t\t<gov-grid-item col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 5</gov-grid-item>\n\t\t\t<gov-grid-item col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 6</gov-grid-item>\n\t\t</gov-grid>\n\n\t\t<h2>Vertical (Y) align</h2>\n\t\t<gov-grid align-items=\"start\">\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-items=\"center\">\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-items=\"end\">\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\n\t\t<h2>Horizontal (X) align</h2>\n\t\t<gov-grid justify-items=\"start\">\n\t\t\t<gov-grid-item col-span=\"12\">start</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet.</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid justify-items=\"center\">\n\t\t\t<gov-grid-item col-span=\"12\">center</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet.</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid justify-items=\"end\">\n\t\t\t<gov-grid-item col-span=\"12\">end</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet.</gov-grid-item>\n\t\t</gov-grid>\n\n\t\t<h2>Merged elements</h2>\n\t\t<gov-grid gap=\"xl\">\n\t\t\t<gov-grid-item col-span=\"6\" row-span=\"2\">Velká přes 4<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"6\">Menší 2 horní<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"6\">Menší 2 dolní<br><br></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<h3>Responsive</h3>\n\t\t<gov-grid gap=\"xl\">\n\t\t\t<gov-grid-item col-span-sm=\"12\" col-span-md=\"6\" col-span-xl=\"3\" row-span-md=\"2\" row-span-xl=\"2\">1. Velká přes 2 na výšku<br><br>1. Velká přes 2 na výšku<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span-sm=\"12\" col-span-md=\"6\" col-span-xl=\"3\">1. Malá<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span-sm=\"12\" col-span-md=\"6\" col-span-xl=\"3\" row-span-md=\"2\" row-span-xl=\"3\">Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span-sm=\"12\" col-span-md=\"6\" col-span-xl=\"3\">2. Malá<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span-sm=\"12\" col-span-md=\"6\" col-span-xl=\"3\">3. Malá<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span-sm=\"12\" col-span-md=\"6\" col-span-xl=\"3\" row-span-md=\"2\" row-span-xl=\"2\">2. Velká přes 2 na výšku<br><br>2. Velká přes 2 na výšku<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span-sm=\"12\" col-span-md=\"12\" col-span-xl=\"6\">Velká přes 2 na šířku<br><br>Velká přes 2 na šířku Velká přes 2 na šířku Velká přes 2 na šířku Velká přes 2 na šířku</gov-grid-item>\n\t\t</gov-grid>\n\t\t\t`\n\t}\n}\n\nif (customElements.get('grid-page') === undefined) {\n\tcustomElements.define('grid-page', GridPage)\n}\n"]}
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../../../src/pages/Grid.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwGf,CAAA;IACH,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAC7C,CAAC","sourcesContent":["class GridPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>\n\t\t\tGrid\n\t\t</h2>\n\t\t<style>\n\t\t\tgov-grid-item {\n\t\t\t\tdisplay: block;\n\t\t\t\tbackground: var(--background-neutral-subtle);\n\t\t\t\tpadding: 10px;\n\t\t\t}\n\t\t</style>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"1\">1/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"11\">11/12</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"2\">2/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"10\">10/12</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"3\">3/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"9\">9/12</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"4\">4/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"8\">8/12</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"5\">5/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"7\">7/12</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item col-span=\"6\">6/12</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"6\">6/12</gov-grid-item>\n\t\t</gov-grid>\n\n\t\t<h2>Responsive grid</h2>\n\t\t<gov-grid gap=\"m\">\n\t\t\t<gov-grid-item col-span=\"12\" col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 1</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\" col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 2</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\" col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 3</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\" col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 4</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\" col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 5</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\" col-span-sm=\"6\" col-span-md=\"4\" col-span-lg=\"3\" col-span-xl=\"2\">Cell 6</gov-grid-item>\n\t\t</gov-grid>\n\n\t\t<h2>Vertical (Y) align</h2>\n\t\t<gov-grid align-items=\"start\">\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-items=\"center\">\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-items=\"end\">\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"4\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\n\t\t<h2>Horizontal (X) align</h2>\n\t\t<gov-grid justify-items=\"start\">\n\t\t\t<gov-grid-item col-span=\"12\">start</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet.</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid justify-items=\"center\">\n\t\t\t<gov-grid-item col-span=\"12\">center</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet.</gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid justify-items=\"end\">\n\t\t\t<gov-grid-item col-span=\"12\">end</gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\">Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet.</gov-grid-item>\n\t\t</gov-grid>\n\n\t\t<h2>Merged elements</h2>\n\t\t<gov-grid gap=\"xl\">\n\t\t\t<gov-grid-item col-span=\"6\" row-span=\"2\">Velká přes 4<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"6\">Menší 2 horní<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"6\">Menší 2 dolní<br><br></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<h3>Responsive</h3>\n\t\t<gov-grid gap=\"xl\">\n\t\t\t<gov-grid-item col-span=\"12\" col-span-md=\"6\" col-span-xl=\"3\" row-span-md=\"2\" row-span-xl=\"2\">1. Velká přes 2 na výšku<br><br>1. Velká přes 2 na výšku<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\" col-span-md=\"6\" col-span-xl=\"3\">1. Malá<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\" col-span-md=\"6\" col-span-xl=\"3\" row-span-md=\"2\" row-span-xl=\"3\">Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br>Velká přes 3 na výšku<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\" col-span-md=\"6\" col-span-xl=\"3\">2. Malá<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\" col-span-md=\"6\" col-span-xl=\"3\">3. Malá<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\" col-span-md=\"6\" col-span-xl=\"3\" row-span-md=\"2\" row-span-xl=\"2\">2. Velká přes 2 na výšku<br><br>2. Velká přes 2 na výšku<br><br></gov-grid-item>\n\t\t\t<gov-grid-item col-span=\"12\" col-span-md=\"12\" col-span-xl=\"6\">Velká přes 2 na šířku<br><br>Velká přes 2 na šířku Velká přes 2 na šířku Velká přes 2 na šířku Velká přes 2 na šířku</gov-grid-item>\n\t\t</gov-grid>\n\t\t\t`\n\t}\n}\n\nif (customElements.get('grid-page') === undefined) {\n\tcustomElements.define('grid-page', GridPage)\n}\n"]}

package/dist/collection/pages/HorizontalStepper.js

@@ -0,0 +1,85 @@
+class HorizontalStepperPage extends HTMLElement {
+    connectedCallback() {
+        this.innerHTML = `
+			<h2>Horizontal Stepper</h2>
+
+			<ol class="gov-horizontal-stepper">
+                <li data-color="primary">
+                    <div class="gov-horizontal-stepper__prefix">1</div>
+                    <p class="gov-horizontal-stepper__content">Název</p>
+                </li>
+                <li>
+                    <div class="gov-horizontal-stepper__prefix">2</div>
+                    <p class="gov-horizontal-stepper__content">Maximální název</p>
+                </li>
+                <li>
+                    <div class="gov-horizontal-stepper__prefix">3</div>
+                    <p class="gov-horizontal-stepper__content">Maximální název</p>
+                </li>
+                <li>
+                    <div class="gov-horizontal-stepper__prefix">4</div>
+                    <p class="gov-horizontal-stepper__content">Maximální název</p>
+                </li>
+                <li>
+                    <div class="gov-horizontal-stepper__prefix">5</div>
+                    <p class="gov-horizontal-stepper__content">Název</p>
+                </li>
+            </ol>
+			<br /><br />
+            <ul class="gov-horizontal-stepper">
+                <li data-color="primary">
+                	<a>
+						<div class="gov-horizontal-stepper__prefix">1</div>
+						<p class="gov-horizontal-stepper__content">Maximální název</p>
+                    </a>
+                </li>
+                <li data-color="primary">
+                	<a>
+						<div class="gov-horizontal-stepper__prefix">2</div>
+						<p class="gov-horizontal-stepper__content">Maximální název</p>
+                    </a>
+                </li>
+                <li data-color="primary">
+                    <div class="gov-horizontal-stepper__prefix">3</div>
+                    <p class="gov-horizontal-stepper__content">Maximální název</p>
+                </li>
+                <li>
+                    <div class="gov-horizontal-stepper__prefix">4</div>
+                    <p class="gov-horizontal-stepper__content">Název</p>
+                </li>
+            </ul>
+            <br /><br />
+            <ul class="gov-horizontal-stepper">
+                <li data-color="primary">
+                	<div class="gov-horizontal-stepper__prefix">
+                    	<gov-icon name="check-lg" type="components"></gov-icon>
+					</div>
+                    <p class="gov-horizontal-stepper__content">Název</p>
+                </li>
+                <li data-color="primary">
+                    <div class="gov-horizontal-stepper__prefix">2</div>
+                    <p class="gov-horizontal-stepper__content">Maximální název</p>
+                </li>
+                <li>
+                    <div class="gov-horizontal-stepper__prefix">3</div>
+                    <p class="gov-horizontal-stepper__content">Maximální název</p>
+                </li>
+            </ul>
+            <br /><br />
+            <ul class="gov-horizontal-stepper">
+                <li data-color="primary">
+                    <div class="gov-horizontal-stepper__prefix">1</div>
+                    <p class="gov-horizontal-stepper__content">Maximální název</p>
+                </li>
+                <li>
+                    <div class="gov-horizontal-stepper__prefix">2</div>
+                    <p class="gov-horizontal-stepper__content">Maximální název</p>
+                </li>
+            </ul>
+		`;
+    }
+}
+if (customElements.get('horizontal-stepper-page') === undefined) {
+    customElements.define('horizontal-stepper-page', HorizontalStepperPage);
+}
+//# sourceMappingURL=HorizontalStepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalStepper.js","sourceRoot":"","sources":["../../../../../src/pages/HorizontalStepper.ts"],"names":[],"mappings":"AAAA,MAAM,qBAAsB,SAAQ,WAAW;IAC9C,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,yBAAyB,CAAC,KAAK,SAAS,EAAE,CAAC;IACjE,cAAc,CAAC,MAAM,CAAC,yBAAyB,EAAE,qBAAqB,CAAC,CAAA;AACxE,CAAC","sourcesContent":["class HorizontalStepperPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<h2>Horizontal Stepper</h2>\n\n\t\t\t<ol class=\"gov-horizontal-stepper\">\n                <li data-color=\"primary\">\n                    <div class=\"gov-horizontal-stepper__prefix\">1</div>\n                    <p class=\"gov-horizontal-stepper__content\">Název</p>\n                </li>\n                <li>\n                    <div class=\"gov-horizontal-stepper__prefix\">2</div>\n                    <p class=\"gov-horizontal-stepper__content\">Maximální název</p>\n                </li>\n                <li>\n                    <div class=\"gov-horizontal-stepper__prefix\">3</div>\n                    <p class=\"gov-horizontal-stepper__content\">Maximální název</p>\n                </li>\n                <li>\n                    <div class=\"gov-horizontal-stepper__prefix\">4</div>\n                    <p class=\"gov-horizontal-stepper__content\">Maximální název</p>\n                </li>\n                <li>\n                    <div class=\"gov-horizontal-stepper__prefix\">5</div>\n                    <p class=\"gov-horizontal-stepper__content\">Název</p>\n                </li>\n            </ol>\n\t\t\t<br /><br />\n            <ul class=\"gov-horizontal-stepper\">\n                <li data-color=\"primary\">\n                \t<a>\n\t\t\t\t\t\t<div class=\"gov-horizontal-stepper__prefix\">1</div>\n\t\t\t\t\t\t<p class=\"gov-horizontal-stepper__content\">Maximální název</p>\n                    </a>\n                </li>\n                <li data-color=\"primary\">\n                \t<a>\n\t\t\t\t\t\t<div class=\"gov-horizontal-stepper__prefix\">2</div>\n\t\t\t\t\t\t<p class=\"gov-horizontal-stepper__content\">Maximální název</p>\n                    </a>\n                </li>\n                <li data-color=\"primary\">\n                    <div class=\"gov-horizontal-stepper__prefix\">3</div>\n                    <p class=\"gov-horizontal-stepper__content\">Maximální název</p>\n                </li>\n                <li>\n                    <div class=\"gov-horizontal-stepper__prefix\">4</div>\n                    <p class=\"gov-horizontal-stepper__content\">Název</p>\n                </li>\n            </ul>\n            <br /><br />\n            <ul class=\"gov-horizontal-stepper\">\n                <li data-color=\"primary\">\n                \t<div class=\"gov-horizontal-stepper__prefix\">\n                    \t<gov-icon name=\"check-lg\" type=\"components\"></gov-icon>\n\t\t\t\t\t</div>\n                    <p class=\"gov-horizontal-stepper__content\">Název</p>\n                </li>\n                <li data-color=\"primary\">\n                    <div class=\"gov-horizontal-stepper__prefix\">2</div>\n                    <p class=\"gov-horizontal-stepper__content\">Maximální název</p>\n                </li>\n                <li>\n                    <div class=\"gov-horizontal-stepper__prefix\">3</div>\n                    <p class=\"gov-horizontal-stepper__content\">Maximální název</p>\n                </li>\n            </ul>\n            <br /><br />\n            <ul class=\"gov-horizontal-stepper\">\n                <li data-color=\"primary\">\n                    <div class=\"gov-horizontal-stepper__prefix\">1</div>\n                    <p class=\"gov-horizontal-stepper__content\">Maximální název</p>\n                </li>\n                <li>\n                    <div class=\"gov-horizontal-stepper__prefix\">2</div>\n                    <p class=\"gov-horizontal-stepper__content\">Maximální název</p>\n                </li>\n            </ul>\n\t\t`\n\t}\n}\n\nif (customElements.get('horizontal-stepper-page') === undefined) {\n\tcustomElements.define('horizontal-stepper-page', HorizontalStepperPage)\n}\n"]}

package/dist/collection/pages/Spacer.js

@@ -8,14 +8,15 @@ class SpacerPage extends HTMLElement {
 			 }
 			</style>
 			<gov-spacer size="2xs" breakpoint="sm"></gov-spacer>
-			<gov-spacer size="xs" breakpoint="sm"></gov-spacer>
-			<gov-spacer size="s" breakpoint="sm"></gov-spacer>
-			<gov-spacer size="m" breakpoint="sm"></gov-spacer>
-			<gov-spacer size="l" breakpoint="sm"></gov-spacer>
-			<gov-spacer size="xl" breakpoint="sm"></gov-spacer>
-			<gov-spacer size="2xl" breakpoint="sm"></gov-spacer>
-			<gov-spacer size="3xl" breakpoint="sm"></gov-spacer>
-			<gov-spacer size="4xl" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="xs" breakpoint="md"></gov-spacer>
+			<gov-spacer size="s" breakpoint="lg"></gov-spacer>
+			<gov-spacer size="m" breakpoint=""></gov-spacer>
+			<gov-spacer size="l"></gov-spacer>
+			<gov-spacer size="xl" breakpoint="md"></gov-spacer>
+			<gov-spacer size="2xl" breakpoint="lg"></gov-spacer>
+			<gov-spacer size="3xl" breakpoint="xl"></gov-spacer>
+			<gov-spacer size="4xl" breakpoint="none"></gov-spacer>
+			<gov-spacer size="4xl"></gov-spacer>
 		`;
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../../../src/pages/Spacer.ts"],"names":[],"mappings":"AAAA,MAAM,UAAW,SAAQ,WAAW;IACnC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;GAgBhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AACjD,CAAC","sourcesContent":["class SpacerPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<style>\n\t\t\t gov-spacer {\n\t\t\t\tbackground: var(--background-neutral-subtle);\n\t\t\t\tmargin-bottom: 10px;\n\t\t\t }\n\t\t\t</style>\n\t\t\t<gov-spacer size=\"2xs\" breakpoint=\"sm\"></gov-spacer>\n\t\t\t<gov-spacer size=\"xs\" breakpoint=\"sm\"></gov-spacer>\n\t\t\t<gov-spacer size=\"s\" breakpoint=\"sm\"></gov-spacer>\n\t\t\t<gov-spacer size=\"m\" breakpoint=\"sm\"></gov-spacer>\n\t\t\t<gov-spacer size=\"l\" breakpoint=\"sm\"></gov-spacer>\n\t\t\t<gov-spacer size=\"xl\" breakpoint=\"sm\"></gov-spacer>\n\t\t\t<gov-spacer size=\"2xl\" breakpoint=\"sm\"></gov-spacer>\n\t\t\t<gov-spacer size=\"3xl\" breakpoint=\"sm\"></gov-spacer>\n\t\t\t<gov-spacer size=\"4xl\" breakpoint=\"sm\"></gov-spacer>\n\t\t`\n\t}\n}\n\nif (customElements.get('spacer-page') === undefined) {\n\tcustomElements.define('spacer-page', SpacerPage)\n}\n"]}
+{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../../../src/pages/Spacer.ts"],"names":[],"mappings":"AAAA,MAAM,UAAW,SAAQ,WAAW;IACnC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;GAiBhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AACjD,CAAC","sourcesContent":["class SpacerPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<style>\n\t\t\t gov-spacer {\n\t\t\t\tbackground: var(--background-neutral-subtle);\n\t\t\t\tmargin-bottom: 10px;\n\t\t\t }\n\t\t\t</style>\n\t\t\t<gov-spacer size=\"2xs\" breakpoint=\"sm\"></gov-spacer>\n\t\t\t<gov-spacer size=\"xs\" breakpoint=\"md\"></gov-spacer>\n\t\t\t<gov-spacer size=\"s\" breakpoint=\"lg\"></gov-spacer>\n\t\t\t<gov-spacer size=\"m\" breakpoint=\"\"></gov-spacer>\n\t\t\t<gov-spacer size=\"l\"></gov-spacer>\n\t\t\t<gov-spacer size=\"xl\" breakpoint=\"md\"></gov-spacer>\n\t\t\t<gov-spacer size=\"2xl\" breakpoint=\"lg\"></gov-spacer>\n\t\t\t<gov-spacer size=\"3xl\" breakpoint=\"xl\"></gov-spacer>\n\t\t\t<gov-spacer size=\"4xl\" breakpoint=\"none\"></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/Tabs.js

@@ -135,6 +135,26 @@ class TabsPage extends HTMLElement {
 						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="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="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="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>
 			<br>
 			<h3>Neutral</h3>

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

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