@gov-design-system-ce/components 4.2.2 → 4.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/gov-button.cjs.entry.js +4 -3
- package/dist/cjs/gov-button.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-empty.cjs.entry.js +7 -1
- package/dist/cjs/gov-empty.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-flex_3.cjs.entry.js +3 -3
- package/dist/cjs/gov-flex_3.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-label.cjs.entry.js +1 -1
- package/dist/cjs/gov-form-label.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-infobar.cjs.entry.js +6 -2
- package/dist/cjs/gov-infobar.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-tabs.cjs.entry.js +2 -2
- package/dist/cjs/gov-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gov-button/button/gov-button.js +22 -3
- package/dist/collection/components/gov-button/button/gov-button.js.map +1 -1
- package/dist/collection/components/gov-empty/constants.js +5 -0
- package/dist/collection/components/gov-empty/constants.js.map +1 -1
- package/dist/collection/components/gov-empty/gov-empty.js +26 -1
- package/dist/collection/components/gov-empty/gov-empty.js.map +1 -1
- package/dist/collection/components/gov-form/label/gov-form-label.js +1 -1
- package/dist/collection/components/gov-form/label/gov-form-label.js.map +1 -1
- package/dist/collection/components/gov-infobar/gov-infobar.js +6 -2
- package/dist/collection/components/gov-infobar/gov-infobar.js.map +1 -1
- package/dist/collection/components/gov-tabs/gov-tabs.js +2 -2
- package/dist/collection/components/gov-tabs/gov-tabs.js.map +1 -1
- package/dist/collection/components/gov-theme-switch/gov-theme-switch.js +5 -5
- package/dist/collection/components/gov-theme-switch/gov-theme-switch.js.map +1 -1
- package/dist/collection/pages/Banner.js +10 -0
- package/dist/collection/pages/Banner.js.map +1 -1
- package/dist/collection/pages/Button.js +18 -0
- package/dist/collection/pages/Button.js.map +1 -1
- package/dist/collection/pages/Empty.js +26 -0
- package/dist/collection/pages/Empty.js.map +1 -1
- package/dist/collection/pages/Forms.js +31 -31
- package/dist/collection/pages/Forms.js.map +1 -1
- package/dist/collection/pages/Home.js +8 -2
- package/dist/collection/pages/Home.js.map +1 -1
- package/dist/collection/pages/Tabs.js +22 -5
- package/dist/collection/pages/Tabs.js.map +1 -1
- package/dist/components/gov-accordion-item.js +1 -1
- package/dist/components/gov-attachments-item.js +1 -1
- package/dist/components/gov-blockquote.js +1 -1
- package/dist/components/gov-breadcrumbs.js +1 -1
- package/dist/components/gov-button.js +1 -1
- package/dist/components/gov-card.js +1 -1
- package/dist/components/gov-chip.js +1 -1
- package/dist/components/gov-dialog.js +1 -1
- package/dist/components/gov-empty.js +1 -1
- package/dist/components/gov-empty.js.map +1 -1
- package/dist/components/gov-form-autocomplete.js +1 -1
- package/dist/components/gov-form-checkbox.js +1 -1
- package/dist/components/gov-form-file.js +1 -1
- package/dist/components/gov-form-input.js +1 -1
- package/dist/components/gov-form-label.js +1 -1
- package/dist/components/gov-form-label.js.map +1 -1
- package/dist/components/gov-form-multi-select.js +1 -1
- package/dist/components/gov-form-range.js +1 -1
- package/dist/components/gov-form-select.js +1 -1
- package/dist/components/gov-form-switch.js +1 -1
- package/dist/components/gov-icon.js +1 -1
- package/dist/components/gov-infobar.js +1 -1
- package/dist/components/gov-infobar.js.map +1 -1
- package/dist/components/gov-link.js +1 -1
- package/dist/components/gov-loading.js +1 -1
- package/dist/components/gov-pagination.js +1 -1
- package/dist/components/gov-tabs.js +1 -1
- package/dist/components/gov-tabs.js.map +1 -1
- package/dist/components/gov-tag.js +1 -1
- package/dist/components/gov-theme-switch.js +1 -1
- package/dist/components/gov-theme-switch.js.map +1 -1
- package/dist/components/gov-tile.js +1 -1
- package/dist/components/gov-toast.js +1 -1
- package/dist/components/gov-tooltip-content.js +1 -1
- package/dist/components/gov-wizard-item.js +1 -1
- package/dist/components/{p-5b0934a8.js → p-043a676e.js} +2 -2
- package/dist/components/{p-5d60b866.js → p-2b33d27c.js} +2 -2
- package/dist/components/{p-7fb16042.js → p-90657523.js} +2 -2
- package/dist/components/p-abea96cf.js +2 -0
- package/dist/components/p-abea96cf.js.map +1 -0
- package/dist/components/{p-6ce6e14f.js → p-b56d6b99.js} +2 -2
- package/dist/components/{p-5a861cd2.js → p-bd393ff0.js} +2 -2
- package/dist/components/{p-f9b1a12b.js → p-cbe3bc71.js} +2 -2
- package/dist/core/core.css +115 -42
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-39d6e51d.entry.js +2 -0
- package/dist/core/p-39d6e51d.entry.js.map +1 -0
- package/dist/core/p-7385f6e8.entry.js +2 -0
- package/dist/core/p-7385f6e8.entry.js.map +1 -0
- package/dist/core/{p-3583dcf7.entry.js → p-9e5eb19a.entry.js} +2 -2
- package/dist/core/{p-3583dcf7.entry.js.map → p-9e5eb19a.entry.js.map} +1 -1
- package/dist/core/p-ac800db4.entry.js +2 -0
- package/dist/core/p-ac800db4.entry.js.map +1 -0
- package/dist/core/p-d45bcd43.entry.js +2 -0
- package/dist/core/p-d45bcd43.entry.js.map +1 -0
- package/dist/core/p-e7e00fe3.entry.js +2 -0
- package/dist/core/{p-774ea182.entry.js.map → p-e7e00fe3.entry.js.map} +1 -1
- package/dist/esm/core.js +1 -1
- package/dist/esm/gov-button.entry.js +4 -3
- package/dist/esm/gov-button.entry.js.map +1 -1
- package/dist/esm/gov-empty.entry.js +7 -1
- package/dist/esm/gov-empty.entry.js.map +1 -1
- package/dist/esm/gov-flex_3.entry.js +3 -3
- package/dist/esm/gov-flex_3.entry.js.map +1 -1
- package/dist/esm/gov-form-label.entry.js +1 -1
- package/dist/esm/gov-form-label.entry.js.map +1 -1
- package/dist/esm/gov-infobar.entry.js +6 -2
- package/dist/esm/gov-infobar.entry.js.map +1 -1
- package/dist/esm/gov-tabs.entry.js +2 -2
- package/dist/esm/gov-tabs.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/hydrate/index.js +27 -14
- package/dist/hydrate/index.mjs +27 -14
- package/dist/types/components/gov-button/button/gov-button.d.ts +4 -0
- package/dist/types/components/gov-empty/constants.d.ts +5 -0
- package/dist/types/components/gov-empty/gov-empty.d.ts +5 -1
- package/dist/types/components/gov-infobar/gov-infobar.d.ts +2 -0
- package/dist/types/components/gov-theme-switch/gov-theme-switch.d.ts +1 -1
- package/dist/types/components.d.ts +20 -4
- package/package.json +1 -1
- package/dist/components/p-d3435179.js +0 -2
- package/dist/components/p-d3435179.js.map +0 -1
- package/dist/core/p-0abc38e8.entry.js +0 -2
- package/dist/core/p-0abc38e8.entry.js.map +0 -1
- package/dist/core/p-774ea182.entry.js +0 -2
- package/dist/core/p-a1c825f3.entry.js +0 -2
- package/dist/core/p-a1c825f3.entry.js.map +0 -1
- package/dist/core/p-c1584cfe.entry.js +0 -2
- package/dist/core/p-c1584cfe.entry.js.map +0 -1
- package/dist/core/p-c5a49469.entry.js +0 -2
- package/dist/core/p-c5a49469.entry.js.map +0 -1
- /package/dist/components/{p-5b0934a8.js.map → p-043a676e.js.map} +0 -0
- /package/dist/components/{p-5d60b866.js.map → p-2b33d27c.js.map} +0 -0
- /package/dist/components/{p-7fb16042.js.map → p-90657523.js.map} +0 -0
- /package/dist/components/{p-6ce6e14f.js.map → p-b56d6b99.js.map} +0 -0
- /package/dist/components/{p-5a861cd2.js.map → p-bd393ff0.js.map} +0 -0
- /package/dist/components/{p-f9b1a12b.js.map → p-cbe3bc71.js.map} +0 -0
|
@@ -2,6 +2,12 @@ class HomePage extends HTMLElement {
|
|
|
2
2
|
connectedCallback() {
|
|
3
3
|
this.innerHTML = `
|
|
4
4
|
<form style="padding: 20px;">
|
|
5
|
+
|
|
6
|
+
<div>
|
|
7
|
+
<gov-form-label size="s" slot="top" required>Fieldset</gov-form-label>
|
|
8
|
+
<gov-form-input type="number" name="test-me" placeholder="Placeholder" color="primary" size="s" required></gov-form-input>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
5
11
|
<gov-accordion size="m">
|
|
6
12
|
<gov-accordion-item open>
|
|
7
13
|
<h3 slot="label">Font Awesome Icon</h3>
|
|
@@ -85,9 +91,9 @@ class HomePage extends HTMLElement {
|
|
|
85
91
|
</gov-form-control>
|
|
86
92
|
<br><br>
|
|
87
93
|
<fieldset>
|
|
88
|
-
<gov-form-label size="s" slot="top">Fieldset</gov-form-label>
|
|
94
|
+
<gov-form-label size="s" slot="top" required>Fieldset</gov-form-label>
|
|
89
95
|
<gov-form-group>
|
|
90
|
-
<gov-form-input type="number" name="test-me" placeholder="Placeholder" color="primary" size="s"></gov-form-input>
|
|
96
|
+
<gov-form-input type="number" name="test-me" placeholder="Placeholder" color="primary" size="s" required></gov-form-input>
|
|
91
97
|
</gov-form-group>
|
|
92
98
|
</fieldset>
|
|
93
99
|
<br><br>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Home.js","sourceRoot":"","sources":["../../../../../src/pages/Home.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG
|
|
1
|
+
{"version":3,"file":"Home.js","sourceRoot":"","sources":["../../../../../src/pages/Home.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyGhB,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 HomePage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<form style=\"padding: 20px;\">\n\n\t\t\t<div>\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\" required>Fieldset</gov-form-label>\n\t\t\t\t<gov-form-input type=\"number\" name=\"test-me\" placeholder=\"Placeholder\" color=\"primary\" size=\"s\" required></gov-form-input>\n\t\t\t</div>\n\n\t\t\t<gov-accordion size=\"m\">\n\t\t\t\t<gov-accordion-item open>\n\t\t\t\t\t<h3 slot=\"label\">Font Awesome Icon</h3>\n\t\t\t\t\t<p slot=\"annotation\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<gov-form-control>\n\t\t\t\t\t\t<gov-form-checkbox-group value='[\"me\"]'>\n\t\t\t\t\t\t\t<gov-form-checkbox name=\"test-me-g\" value=\"me\" size=\"xs\">\n\t\t\t\t\t\t\t\t<gov-form-label slot=\"label\" size=\"xs\">Souhlasím</gov-form-label>\n\t\t\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t\t\t</gov-form-checkbox-group>\n\t\t\t\t\t</gov-form-control>\n\t\t\t\t\t<gov-form-control>\n\t\t\t\t\t\t<gov-form-checkbox-group>\n\t\t\t\t\t\t\t<gov-form-checkbox name=\"test-me-h\" value=\"me\" size=\"s\">\n\t\t\t\t\t\t\t\t<gov-form-label slot=\"label\" size=\"s\">Souhlasím</gov-form-label>\n\t\t\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t\t\t</gov-form-checkbox-group>\n\t\t\t\t\t</gov-form-control>\n\t\t\t\t\t<gov-form-control>\n\t\t\t\t\t\t<gov-form-checkbox-group>\n\t\t\t\t\t\t\t<gov-form-checkbox name=\"test-me-i\" value=\"me\" size=\"m\">\n\t\t\t\t\t\t\t\t<gov-form-label slot=\"label\" size=\"m\">Souhlasím</gov-form-label>\n\t\t\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t\t\t</gov-form-checkbox-group>\n\t\t\t\t\t</gov-form-control>\n\t\t\t\t\t<gov-form-control>\n\t\t\t\t\t\t<gov-form-checkbox-group>\n\t\t\t\t\t\t\t<gov-form-checkbox name=\"test-me-j\" value=\"me\" size=\"l\">\n\t\t\t\t\t\t\t\t<gov-form-label slot=\"label\" size=\"l\">Souhlasím</gov-form-label>\n\t\t\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t\t\t</gov-form-checkbox-group>\n\t\t\t\t\t</gov-form-control>\n\t\t\t\t\t<gov-form-control>\n\t\t\t\t\t\t<gov-form-checkbox-group value='[\"me\"]'>\n\t\t\t\t\t\t\t<gov-form-checkbox name=\"test-me-k\" value=\"me\" size=\"xl\">\n\t\t\t\t\t\t\t\t<gov-form-label slot=\"label\" size=\"xl\">Souhlasím</gov-form-label>\n\t\t\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t\t\t</gov-form-checkbox-group>\n\t\t\t\t\t</gov-form-control>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<gov-icon slot=\"toggle-icon\" name=\"info-circle\"></gov-icon>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item disabled>\n\t\t\t\t\t<h3 slot=\"label\">Kontaktní osoby</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot=\"label\">Působnost v agendách</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot=\"label\">Zřizované organizace</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t</gov-accordion>\n\t\t\t<br><br>\n\t\t\t<gov-form-label legend>\n\t\t\t\tForm Label legend\n\t\t\t</gov-form-label>\n\t\t\t<gov-form-control type=\"input\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of input</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type=\"number\" name=\"test-me\" placeholder=\"Placeholder\" color=\"primary\" size=\"s\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br><br>\n\t\t\t<legend>Legend</legend>\n\t\t\t<gov-form-control type=\"input\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of input</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type=\"number\" name=\"test-me\" placeholder=\"Placeholder\" color=\"primary\" size=\"s\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br><br>\n\t\t\t<gov-form-control type=\"input\" fieldset>\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Form control fieldset</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type=\"number\" name=\"test-me\" placeholder=\"Placeholder\" color=\"primary\" size=\"s\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br><br>\n\t\t\t<fieldset>\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\" required>Fieldset</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type=\"number\" name=\"test-me\" placeholder=\"Placeholder\" color=\"primary\" size=\"s\" required></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</fieldset>\n\t\t\t<br><br>\n\t\t\t<fieldset>\n\t\t\t\t<legend>Fieldset & Legend</legend>\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of input</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type=\"number\" name=\"test-me\" placeholder=\"Placeholder\" color=\"primary\" size=\"s\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</fieldset>\n\t\t</form>\n\t\t`\n\t}\n}\n\nif (customElements.get('home-page') === undefined) {\n\tcustomElements.define('home-page', HomePage)\n}\n"]}
|
|
@@ -7,11 +7,28 @@ class TabsPage extends HTMLElement {
|
|
|
7
7
|
<br>
|
|
8
8
|
<gov-tabs color="primary" size="xs" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">
|
|
9
9
|
<gov-tabs-item label="TAB #1" icon-start="basic/star">
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
<gov-tabs color="primary" size="xs" wcag-label="Důležitý vnitřní tabs" wcag-select-label="Výběr možnosti">
|
|
11
|
+
<gov-tabs-item label="INNER TAB #1" icon-start="basic/star">
|
|
12
|
+
<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém
|
|
13
|
+
designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických
|
|
14
|
+
návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum
|
|
15
|
+
tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového
|
|
16
|
+
návrhu vložen smysluplný obsah.</p>
|
|
17
|
+
</gov-tabs-item>
|
|
18
|
+
<gov-tabs-item label="INNER TAB #2" icon-end="basic/star" default>
|
|
19
|
+
<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
|
|
20
|
+
pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
|
|
21
|
+
(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou
|
|
22
|
+
strukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný
|
|
23
|
+
text, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně
|
|
24
|
+
atd.</p>
|
|
25
|
+
</gov-tabs-item>
|
|
26
|
+
<gov-tabs-item label="INNER TAB #3">
|
|
27
|
+
<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
|
|
28
|
+
pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text
|
|
29
|
+
(např. opakování „asdf asdf asdf…“).</p>
|
|
30
|
+
</gov-tabs-item>
|
|
31
|
+
</gov-tabs>
|
|
15
32
|
</gov-tabs-item>
|
|
16
33
|
<gov-tabs-item label="TAB #2" icon-end="basic/star" default>
|
|
17
34
|
<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se
|
|
@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqjBhB,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<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\" 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"]}
|
|
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"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as t,h as a,d as i}from"./p-42200001.js";import{v as c}from"./p-0b3574c2.js";import{A as o,b as n,a as d}from"./p-d4509899.js";import{g as f,t as b,b as r}from"./p-ea7fdd2e.js";import{i as h}from"./p-33d5d1ed.js";import{t as m}from"./p-26618322.js";import{d as l}from"./p-
|
|
1
|
+
import{p as e,H as s,c as t,h as a,d as i}from"./p-42200001.js";import{v as c}from"./p-0b3574c2.js";import{A as o,b as n,a as d}from"./p-d4509899.js";import{g as f,t as b,b as r}from"./p-ea7fdd2e.js";import{i as h}from"./p-33d5d1ed.js";import{t as m}from"./p-26618322.js";import{d as l}from"./p-2b33d27c.js";const p=e(class e extends s{constructor(){super();this.__registerHost();this.govChange=t(this,"gov-change",7);this.inheritedAttributes={};this.openState=undefined;this.identifier=undefined;this.size=undefined;this.disabled=false;this.open=false;this.h=f(this.host)}validateSize(e){c(d,e,n.root)}componentWillLoad(){this.validateSize(this.size);this.inheritedAttributes=h(this.host)}componentDidRender(){m((()=>this.getPropsFromParents()))}getPropsFromParents(){const e=this.h.getParent(o.root);if(e){this.size=e.getAttribute("size")}}render(){return a(i,{key:"1beb62527ea9274e6280ce0b64c9d52c12e4a993",class:this.h.classes([n.root,this.disabled&&n.disabled]),size:this.size,role:"listitem"},a("details",{key:"53ca7688e8f26e85cd76feb073a26d04c5505d2b",class:n.details,id:this.identifier,"aria-disabled":b(this.disabled),open:this.open},a("summary",Object.assign({key:"19fec49b0066b7a6162a6010e0ee20431c2a578b",onClick:e=>{e.stopPropagation();e.preventDefault();!this.disabled&&this.toggle().finally()},class:n.summary,tabIndex:this.disabled?-1:0,"aria-expanded":r(this.open)},this.inheritedAttributes),this.h.hasSlot("icon")&&a("span",{key:"19254947c22fa2b1a2fa4e26eacb22c0c89b40c9",class:n.icon},a("slot",{key:"262be1640f250fabf9918f4162c071bb68dc4fb3",name:"icon"})),a("span",{key:"ebb5ef762ef51921b68a8063fd09c979d7d0d32d",class:n.title},a("slot",{key:"75783345d2276f06e53c401761cb4e57d241e5e0",name:"label"}),a("slot",{key:"f2d9cdff693edbcae6293921fde7996d1b1251b6",name:"annotation"})),a("span",{key:"f7e28ea54455756c7d146c7b88be7001e80b07a8",class:n.right},a("slot",{key:"e76b31bf1c349a8a86d4b91ec1cfa650a75edf60",name:"suffix"}),a("span",{key:"87ea99c9862deb3ff9820fa383cec52956b4655a",class:n.arrow},a("slot",{key:"c8b64a90455a731f359e12550664ba5aa905abbc",name:"toggle-icon"},a("gov-icon",{key:"867406c5634d6446683529f5f647492b9b289a31",name:"chevron-down",type:"components"}))))),a("div",{key:"2adf7441dd470ae1b32a08fb374cd1d9e2d1f789",class:n.content},a("slot",{key:"8eb27d0b33689933b6e71850324c35c89d71c4c0"}))))}async toggle(){this.open=!this.open;this.govChange.emit({open:this.open,component:n.root,ref:this.host})}async currentState(){return this.open}get host(){return this}static get watchers(){return{size:["validateSize"]}}},[4,"gov-accordion-item",{identifier:[1],size:[1025],disabled:[4],open:[1028],openState:[32],toggle:[64],currentState:[64]},undefined,{size:["validateSize"]}]);function u(){if(typeof customElements==="undefined"){return}const e=["gov-accordion-item","gov-icon"];e.forEach((e=>{switch(e){case"gov-accordion-item":if(!customElements.get(e)){customElements.define(e,p)}break;case"gov-icon":if(!customElements.get(e)){l()}break}}))}u();const y=p;const g=u;export{y as GovAccordionItem,g as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=gov-accordion-item.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{G as o,d as s}from"./p-
|
|
1
|
+
import{G as o,d as s}from"./p-b56d6b99.js";const t=o;const p=s;export{t as GovAttachmentsItem,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=gov-attachments-item.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,h as o,d as s}from"./p-42200001.js";import{g as c}from"./p-ea7fdd2e.js";import{d as a}from"./p-
|
|
1
|
+
import{p as e,H as t,h as o,d as s}from"./p-42200001.js";import{g as c}from"./p-ea7fdd2e.js";import{d as a}from"./p-2b33d27c.js";var n;(function(e){e["PRIMARY"]="primary";e["SUBTLE"]="subtle";e["NEUTRAL"]="neutral"})(n||(n={}));const f={root:"gov-blockquote"};const i=e(class e extends t{constructor(){super();this.__registerHost();this.type=n.SUBTLE;this.cite=undefined;this.h=c(this.host)}render(){return o(s,{key:"0d4b930791ee54ea55552b1a8ab9a2f248b5109e",class:this.h.classes(f.root),type:this.type},o("gov-icon",{key:"f27a6a5059203b000bede13c47aa7e5eb150e4cd",type:"components",name:"quote",size:"3xl"}),o("blockquote",{key:"3206cd993309f5636920e5b552e3cd97be98b334",cite:this.cite},o("slot",{key:"16ac7ec3098d37e1c5b444fe18e47986a5afa915"})),o("slot",{key:"ae4f20fbf0820346cc9919014ab6a3fc9f9ef96e",name:"image"}),o("slot",{key:"f43c96fef744f2d6147f8579fad0c808c064c81a",name:"author"}))}get host(){return this}},[4,"gov-blockquote",{type:[513],cite:[1]}]);function r(){if(typeof customElements==="undefined"){return}const e=["gov-blockquote","gov-icon"];e.forEach((e=>{switch(e){case"gov-blockquote":if(!customElements.get(e)){customElements.define(e,i)}break;case"gov-icon":if(!customElements.get(e)){a()}break}}))}r();const b=i;const u=r;export{b as GovBlockquote,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=gov-blockquote.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,c as t,h as i,d as a}from"./p-42200001.js";import{a as c}from"./p-10cad7f1.js";import{c as o}from"./p-e8ec030e.js";import{g as n}from"./p-ea7fdd2e.js";import{t as l}from"./p-26618322.js";import{d as r}from"./p-
|
|
1
|
+
import{p as s,H as e,c as t,h as i,d as a}from"./p-42200001.js";import{a as c}from"./p-10cad7f1.js";import{c as o}from"./p-e8ec030e.js";import{g as n}from"./p-ea7fdd2e.js";import{t as l}from"./p-26618322.js";import{d as r}from"./p-abea96cf.js";import{d}from"./p-2b33d27c.js";const b={root:"gov-breadcrumbs"};const h=s(class s extends e{constructor(){super();this.__registerHost();this.govChange=t(this,"gov-change",7);this.inited=false;this.collapsible=false;this.isExpanded=false;this.accessibleLabel=undefined;this.accessibleLabelledBy=undefined;this.accessibleToggleLabel="Zobrazit či skrýt navigaci";this.expanded=false;this.toggleOption=false;this.h=n(this.host)}async componentDidRender(){this.scheduleContentVerification();if(o()){l((()=>this.validateAccessibility()))}}scheduleContentVerification(){if(this.inited)return;this.inited=true;l((()=>{this.calculateWidthOfItems();this.inited=false}))}calculateWidthOfItems(){const s=this.host.getBoundingClientRect().width;let e=0;this.host.querySelectorAll("li").forEach((s=>{e+=s.getBoundingClientRect().width}));this.toggleOption=e>s}render(){return i(a,{key:"dadd8de710050476be68e3f6fa0b317d6ccedfc1",class:this.h.classes(b.root),expanded:this.expanded},i("nav",{key:"468a3b605408c943421243024733b0381809f931","aria-label":this.accessibleLabel,"aria-labelledby":this.accessibleLabelledBy},i("slot",{key:"2c9f85b826c8c54340ab5abba51c1861282c9cb7"})),this.toggleOption?i("gov-button",{size:"xs",color:"primary",type:"base","aria-label":this.accessibleToggleLabel,"aria-pressed":this.expanded,"aria-expanded":this.expanded,"on-gov-click":()=>this.expanded=!this.expanded},i("gov-icon",{name:this.expanded?"chevron-up":"chevron-down",type:"components"})):null)}async validateAccessibility(){c(this.accessibleLabel,this.accessibleLabelledBy,b.root,this.host);c(this.accessibleToggleLabel,undefined,b.root,this.host)}get host(){return this}},[4,"gov-breadcrumbs",{collapsible:[4],isExpanded:[4,"is-expanded"],accessibleLabel:[1,"accessible-label"],accessibleLabelledBy:[1,"accessible-labelledby"],accessibleToggleLabel:[1,"accessible-toggle-label"],expanded:[32],toggleOption:[32],validateAccessibility:[64]}]);function f(){if(typeof customElements==="undefined"){return}const s=["gov-breadcrumbs","gov-button","gov-icon"];s.forEach((s=>{switch(s){case"gov-breadcrumbs":if(!customElements.get(s)){customElements.define(s,h)}break;case"gov-button":if(!customElements.get(s)){r()}break;case"gov-icon":if(!customElements.get(s)){d()}break}}))}f();const m=h;const p=f;export{m as GovBreadcrumbs,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=gov-breadcrumbs.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{G as o,d as s}from"./p-
|
|
1
|
+
import{G as o,d as s}from"./p-abea96cf.js";const a=o;const t=s;export{a as GovButton,t as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=gov-button.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as i,c as s,h as t,d as a}from"./p-42200001.js";import{g as c,b as d}from"./p-ea7fdd2e.js";import{c as o}from"./p-cd6c2938.js";import{a as n}from"./p-10cad7f1.js";import{c as r}from"./p-e8ec030e.js";import{d as l}from"./p-e0e2e9c1.js";import{d as h}from"./p-
|
|
1
|
+
import{p as e,H as i,c as s,h as t,d as a}from"./p-42200001.js";import{g as c,b as d}from"./p-ea7fdd2e.js";import{c as o}from"./p-cd6c2938.js";import{a as n}from"./p-10cad7f1.js";import{c as r}from"./p-e8ec030e.js";import{d as l}from"./p-e0e2e9c1.js";import{d as h}from"./p-2b33d27c.js";var f;(function(e){e["HORIZONTAL"]="horizontal";e["VERTICAL"]="vertical"})(f||(f={}));const b={root:"gov-card",header:"gov-card__header",arrow:"gov-card__arrow",inner:"gov-card__inner",img:"gov-card__img",icon:"gov-card__icon",content:"gov-card__content",footer:"gov-card__footer"};var m;(function(e){e["A"]="a";e["DIV"]="div"})(m||(m={}));const v=e(class e extends i{constructor(){super();this.__registerHost();this.govToggle=s(this,"gov-toggle",7);this.hydrated=false;this.direction="vertical";this.collapsible=false;this.open=true;this.href=undefined;this.target=undefined;this.accessibleTriggerLabel=undefined;this.accessibleTriggerLabelledBy=undefined;this.h=c(this.host);this.headlineId=o("GovCardHeadline");this.contentId=o("GovCardContent")}async componentDidRender(){if(r()){await l(500);await this.validateAccessibility()}}connectedCallback(){this.hydrated=true}render(){const e=this.href?m.A:m.DIV;return t(a,{key:"3a11dfeface1fa81d0c27f4ee3644c1c3b3a0191",class:this.h.classes(b.root),open:this.open,collapsible:d(this.collapsible),clickable:this.href?true:null,direction:this.direction,hydrated:this.hydrated},this.collapsible?t("button",{id:this.headlineId,class:b.header,"aria-label":this.accessibleTriggerLabel,"aria-labelledby":this.accessibleTriggerLabelledBy,"aria-expanded":d(this.open),"aria-controls":this.contentId,onClick:this.onClickHandler.bind(this)},t("slot",{name:"headline"}),t("gov-icon",{class:b.arrow,name:"chevron-down",type:"components"})):this.h.hasSlot("headline")?t("div",{class:b.header},t("slot",{name:"headline"})):null,t(e,{key:"bdf47c610db6c937ebe9f6fa45124b5df8e2847f",href:this.href,target:this.target,id:this.contentId,"aria-hidden":this.collapsible?d(!this.open):undefined,hidden:this.collapsible?!this.open:undefined,"aria-labelledby":this.collapsible?this.headlineId:undefined,class:b.inner},this.h.hasSlot("img")&&t("div",{key:"11ed1b55fe67d05382d538c903726ffd84fb7d48",class:b.img},t("slot",{key:"b1c362609163af2748256ecd1370bd074b8cd396",name:"img"})),this.h.hasSlot("icon")&&t("div",{key:"70b848927a86419442be3a84ee060c27a87fa12b",class:b.icon},t("slot",{key:"357b5dffa7c0970495ed167ca9a5db0b8d67c721",name:"icon"})),t("div",{key:"0bec7d7dc66dda27ba05e9041caeca8f20def8c4",class:b.content},t("slot",{key:"e3b08eb1097e0d788df4a45f78711bd0a5f02656"})),this.h.hasSlot("footer")&&t("div",{key:"0f4ef687f88e18a935d8f651bb7d2a9ea2c3df97",class:b.footer},t("slot",{key:"d645292f3ee9f007d9aeffdefcf2c26a1e5415b1",name:"footer"}))))}onClickHandler(e){e.stopPropagation();if(this.collapsible){this.open=!this.open;this.govToggle.emit({open:this.open,element:this.host})}}async validateAccessibility(){if(this.collapsible){n(this.accessibleTriggerLabel,this.accessibleTriggerLabelledBy,b.root,this.host)}}get host(){return this}},[4,"gov-card",{direction:[1],collapsible:[4],open:[1540],href:[513],target:[1],accessibleTriggerLabel:[1,"accessible-label"],accessibleTriggerLabelledBy:[1,"accessible-labelledby"],validateAccessibility:[64]}]);function g(){if(typeof customElements==="undefined"){return}const e=["gov-card","gov-icon"];e.forEach((e=>{switch(e){case"gov-card":if(!customElements.get(e)){customElements.define(e,v)}break;case"gov-icon":if(!customElements.get(e)){h()}break}}))}g();const p=v;const u=g;export{p as GovCard,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=gov-card.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{G as o,d as s}from"./p-
|
|
1
|
+
import{G as o,d as s}from"./p-cbe3bc71.js";const c=o;const t=s;export{c as GovChip,t as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=gov-chip.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,c as
|
|
1
|
+
import{p as e,H as s,c as a,h as i,d as t}from"./p-42200001.js";import{g as o,a as c,c as l}from"./p-ea7fdd2e.js";import{c as d}from"./p-e8ec030e.js";import{b}from"./p-10cad7f1.js";import{c as n}from"./p-cd6c2938.js";import{t as h}from"./p-26618322.js";import{d as r}from"./p-e0c3b1a7.js";import{d as f}from"./p-abea96cf.js";import{d as g}from"./p-2b33d27c.js";const m={root:"gov-dialog",dialog:"gov-dialog__dialog",inner:"gov-dialog__inner",header:"gov-dialog__header",title:"gov-dialog__title",content:"gov-dialog__content",close:"gov-dialog__close",footer:"gov-dialog__footer",bodyFix:"body-fixed"};const p=e(class e extends s{constructor(){super();this.__registerHost();this.govClose=a(this,"gov-close",7);this.hydrated=false;this.open=false;this.blockClose=false;this.blockBackdropClose=false;this.role="dialog";this.labelTag="h2";this.accessibleLabelledBy=undefined;this.accessibleDescribedBy=undefined;this.accessibleCloseLabel="Zavřít okno";this.accessibleCloseLabelledBy=undefined;this.h=o(this.host);this.labelId=n("GovDialogLabel");this.contentId=n("GovDialogContent")}watchOpen(e){this.open=e;this.setFocus().finally()}showDialog(){this.open=true;document.body.classList.add(m.bodyFix)}hideDialog(){this.open=false;document.body.classList.remove(m.bodyFix)}async componentDidRender(){if(d()){h((()=>this.validateAccessibility()))}if(this.open){this.showDialog()}else{this.hideDialog()}}connectedCallback(){this.hydrated=true}disconnectedCallback(){document.body.classList.remove(m.bodyFix)}render(){return i(t,{key:"d4185a1b611db509ebf08509afa23b6e1682fe6f",class:this.h.classes(m.root),open:this.open,hydrated:this.hydrated},i("dialog",{key:"6a9624025826c1bd0eb7e83739112cf7b2d56dbc",class:m.dialog,hidden:!this.open,tabindex:c(this.open),open:this.open,"aria-modal":"true","aria-hidden":l(!this.open),"aria-labelledby":this.accessibleLabelledBy||this.labelId,"aria-describedby":this.accessibleDescribedBy||this.contentId,role:this.role},i("div",{key:"1f93dc885aad9898151e00ca4717c8dd8eeea1ff",class:m.inner},i("div",{key:"4455c3f5f5e6aa9e6ec84ce400ead24a3e526374",class:m.header},this.h.hasSlot("icon")&&i("span",{key:"40bd7dba7f121d87e00b48b5c4f3ed0c01f5d4a0"},i("slot",{key:"911f36f5199cde0f6561da2385934bb88e668c68",name:"icon"})),this.h.hasSlot("title")&&i("span",{key:"1e45df978ffc0f360d242d24e826b4df41188196",class:m.title,id:this.labelId},i("slot",{key:"920d60a3305db5b2b7963e6e0c795dbe49101f40",name:"title"})),i("gov-button",{key:"42a64cd1706ba71362bc0bc0b8d69e9867ec5fb1",ref:e=>this.closeCtaRef=e,disabled:this.blockClose,class:m.close,color:"primary","aria-label":this.accessibleCloseLabel,"aria-labelledby":this.accessibleCloseLabelledBy,type:"base",size:"m","on-gov-click":this.onCloseHandler.bind(this)},i("gov-icon",{key:"480265e99c21126cbb755df8e6c6f482f69fb92b",slot:"icon-start",name:"x-lg",type:"components"}))),i("div",{key:"dc16ca442fbb779b8d0c127253324d2894e1b1e5",class:m.content,id:this.contentId},i("slot",{key:"a721e2e66951a436c2a7c946648e15cd1043a7c1"})),this.h.hasSlot("footer")&&i("div",{key:"ea53d2a6284285c3b33a346784f783e69cc6ff4a",class:m.footer},i("slot",{key:"1693aec930d48ffd79505638b4b03df4e50529f5",name:"footer"})))),this.open?i("gov-backdrop",{disabled:this.blockBackdropClose,"aria-label":this.accessibleCloseLabel,"aria-labelled-by":this.accessibleCloseLabelledBy,"on-gov-click":this.onCloseHandler.bind(this)}):null)}onCloseHandler(e){e.stopPropagation();e.preventDefault();if(this.blockClose===false){this.hideDialog();this.govClose.emit(e)}}async setFocus(){if(this.open&&this.closeCtaRef){this.closeCtaRef.setFocus().catch()}}async validateAccessibility(){b(this.accessibleLabelledBy,"accessible-labelled-by",m.root);b(this.accessibleDescribedBy,"accessible-described-by",m.root)}get host(){return this}static get watchers(){return{open:["watchOpen"]}}},[4,"gov-dialog",{open:[1540],blockClose:[4,"block-close"],blockBackdropClose:[4,"block-backdrop-close"],role:[1],labelTag:[1,"label-tag"],accessibleLabelledBy:[1,"accessible-labelled-by"],accessibleDescribedBy:[1,"accessible-described-by"],accessibleCloseLabel:[1,"accessible-close-label"],accessibleCloseLabelledBy:[1,"accessible-close-labelled-by"],setFocus:[64],validateAccessibility:[64]},undefined,{open:["watchOpen"]}]);function y(){if(typeof customElements==="undefined"){return}const e=["gov-dialog","gov-backdrop","gov-button","gov-icon"];e.forEach((e=>{switch(e){case"gov-dialog":if(!customElements.get(e)){customElements.define(e,p)}break;case"gov-backdrop":if(!customElements.get(e)){r()}break;case"gov-button":if(!customElements.get(e)){f()}break;case"gov-icon":if(!customElements.get(e)){g()}break}}))}y();const k=p;const v=y;export{k as GovDialog,v as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=gov-dialog.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,h as s,d as
|
|
1
|
+
import{p as e,H as t,h as s,d as i}from"./p-42200001.js";import{p as o}from"./p-e0e2e9c1.js";import{S as a}from"./p-92f420cb.js";import{g as c}from"./p-ea7fdd2e.js";import{v as n}from"./p-0b3574c2.js";import{A as r,a as d}from"./p-d4509899.js";o(a,["_S","_M","_L"]);var m;(function(e){e["HORIZONTAL"]="horizontal";e["VERTICAL"]="vertical"})(m||(m={}));const f={root:"gov-empty",content:"gov-empty__content"};const p=e(class e extends t{constructor(){super();this.__registerHost();this.size="m";this.direction="vertical";this.h=c(this.host)}validateSize(e){n(d,e,r.root)}componentWillLoad(){this.validateSize(this.size)}render(){return s(i,{key:"e1da3889a26333688dc65efaa66664219de109f5",class:this.h.classes(f.root),size:this.size,direction:this.direction},this.h.hasSlot("icon")&&s("slot",{key:"592a4e748c922485301a5c24fb459948e854acae",name:"icon"}),s("div",{key:"e8b2296af06278720ab78cbb6f4b3ef2ce8b09e7",class:f.content},s("slot",{key:"ec87498dbf98c45455f7d5247c5938dce0acf6e6",name:"headline"}),s("slot",{key:"9f9a00c7bc8404a81ddaf6025d023e1ee7058834"})))}get host(){return this}static get watchers(){return{size:["validateSize"]}}},[4,"gov-empty",{size:[1],direction:[1]},undefined,{size:["validateSize"]}]);function l(){if(typeof customElements==="undefined"){return}const e=["gov-empty"];e.forEach((e=>{switch(e){case"gov-empty":if(!customElements.get(e)){customElements.define(e,p)}break}}))}l();const h=p;const u=l;export{h as GovEmpty,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=gov-empty.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["pick","Sizes","EmptyClass","root","content","GovEmpty","proxyCustomElement","H","constructor","this","h","govHost","host","validateSize","newValue","validateProp","AccordionSizes","AccordionClass","componentWillLoad","size","render","Host","key","class","classes","hasSlot","name"],"sources":["../../../packages/core/src/components/gov-empty/constants.ts","../../../packages/core/src/components/gov-empty/gov-empty.tsx"],"sourcesContent":["import {pick} from \"../../utils/utils\";\nimport {Sizes} from \"../../core/constants/sizes\";\nimport {ValueOf} from \"../../types/interfaces\";\n\nexport const EmptySizes = pick(Sizes, ['_S', '_M', '_L'])\nexport type EmptySizesType = `${ValueOf<typeof EmptySizes>}`\n\nexport const EmptyClass = {\n\troot: 'gov-empty',\n\tcontent: 'gov-empty__content',\n}\n","import {Component, Element, Host, h, Prop, Watch} from '@stencil/core'\nimport {EmptyClass, EmptySizesType} from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport {validateProp} from \"../../helpers/Validate/props\";\nimport {AccordionClass, AccordionSizes} from \"../gov-accordion/constants\";\n\n@Component({\n\ttag: 'gov-empty',\n})\nexport class GovEmpty {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovEmptyElement\n\t/**\n\t * Element size.\n\t */\n\t@Prop() readonly size?: EmptySizesType = 'm'\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(EmptyClass.root)} size={this.size}>\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t)}\n\t\t\t\t<div class={EmptyClass.content}>\n\t\t\t\t\t<slot name=\"headline\" />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"mappings":"oPAI0BA,EAAKC,EAAO,CAAC,KAAM,KAAM,
|
|
1
|
+
{"version":3,"names":["pick","Sizes","EmptyDirection","EmptyClass","root","content","GovEmpty","proxyCustomElement","H","constructor","this","h","govHost","host","validateSize","newValue","validateProp","AccordionSizes","AccordionClass","componentWillLoad","size","render","Host","key","class","classes","direction","hasSlot","name"],"sources":["../../../packages/core/src/components/gov-empty/constants.ts","../../../packages/core/src/components/gov-empty/gov-empty.tsx"],"sourcesContent":["import {pick} from \"../../utils/utils\";\nimport {Sizes} from \"../../core/constants/sizes\";\nimport {ValueOf} from \"../../types/interfaces\";\n\nexport const EmptySizes = pick(Sizes, ['_S', '_M', '_L'])\nexport type EmptySizesType = `${ValueOf<typeof EmptySizes>}`\n\nexport enum EmptyDirection {\n\tHORIZONTAL = 'horizontal',\n\tVERTICAL = 'vertical',\n}\nexport type EmptyDirectionType = `${ValueOf<typeof EmptyDirection>}`\n\nexport const EmptyClass = {\n\troot: 'gov-empty',\n\tcontent: 'gov-empty__content',\n}\n","import {Component, Element, Host, h, Prop, Watch} from '@stencil/core'\nimport {EmptyClass, EmptyDirectionType, EmptySizesType} from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport {validateProp} from \"../../helpers/Validate/props\";\nimport {AccordionClass, AccordionSizes} from \"../gov-accordion/constants\";\n\n@Component({\n\ttag: 'gov-empty',\n})\nexport class GovEmpty {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovEmptyElement\n\t/**\n\t * Element size.\n\t */\n\t@Prop() readonly size?: EmptySizesType = 'm'\n\t/**\n\t * Element direction\n\t */\n\t@Prop() readonly direction: EmptyDirectionType = \"vertical\"\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(EmptyClass.root)} size={this.size} direction={this.direction}>\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t)}\n\t\t\t\t<div class={EmptyClass.content}>\n\t\t\t\t\t<slot name=\"headline\" />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"mappings":"oPAI0BA,EAAKC,EAAO,CAAC,KAAM,KAAM,OAGnD,IAAYC,GAAZ,SAAYA,GACXA,EAAA,2BACAA,EAAA,sBACA,EAHD,CAAYA,MAAc,KAMnB,MAAMC,EAAa,CACzBC,KAAM,YACNC,QAAS,sB,MCLGC,EAAQC,EAAA,MAAAD,UAAAE,EAGpB,WAAAC,G,wCAQyC,I,eAIQ,WAXhDC,KAAKC,EAAIC,EAAQF,KAAKG,K,CAcvB,YAAAC,CAAaC,GACZC,EAAaC,EAAgBF,EAAUG,EAAed,K,CAGvD,iBAAAe,GACCT,KAAKI,aAAaJ,KAAKU,K,CAGxB,MAAAC,GACC,OACCV,EAACW,EAAI,CAAAC,IAAA,2CAACC,MAAOd,KAAKC,EAAEc,QAAQtB,EAAWC,MAAOgB,KAAMV,KAAKU,KAAMM,UAAWhB,KAAKgB,WAC7EhB,KAAKC,EAAEgB,QAAQ,SACfhB,EAAA,QAAAY,IAAA,2CAAMK,KAAK,SAEZjB,EAAA,OAAAY,IAAA,2CAAKC,MAAOrB,EAAWE,SACtBM,EAAA,QAAAY,IAAA,2CAAMK,KAAK,aACXjB,EAAA,QAAAY,IAAA,8C","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{G as o,d as s}from"./p-
|
|
1
|
+
import{G as o,d as s}from"./p-90657523.js";const t=o;const p=s;export{t as GovFormAutocomplete,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=gov-form-autocomplete.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as i,c as s,h as e,d as h}from"./p-42200001.js";import{c as n}from"./p-cd6c2938.js";import{v as o}from"./p-0b3574c2.js";import{g as a,d as r,e as c}from"./p-9908b9f0.js";import{g as d,c as l,t as m}from"./p-ea7fdd2e.js";import{F as u}from"./p-1c1d0bbe.js";import{i as f,A as p,a as v}from"./p-33d5d1ed.js";import{d as b}from"./p-
|
|
1
|
+
import{p as t,H as i,c as s,h as e,d as h}from"./p-42200001.js";import{c as n}from"./p-cd6c2938.js";import{v as o}from"./p-0b3574c2.js";import{g as a,d as r,e as c}from"./p-9908b9f0.js";import{g as d,c as l,t as m}from"./p-ea7fdd2e.js";import{F as u}from"./p-1c1d0bbe.js";import{i as f,A as p,a as v}from"./p-33d5d1ed.js";import{d as b}from"./p-2b33d27c.js";const g=t(class t extends i{constructor(){super();this.__registerHost();this.govFocus=s(this,"gov-focus",7);this.govBlur=s(this,"gov-blur",7);this.govChange=s(this,"gov-change",7);this.hydrated=false;this.value=undefined;this.checked=false;this.required=false;this.disabled=false;this.indeterminate=false;this.name=undefined;this.size="m";this.identifier=undefined;this.noLabel=false;this.invalid=undefined;this.inheritedAttributes={};this.checkboxId=n("GovCheckbox");this.h=d(this.host);this.f=a(this.h)}validateSize(t){o(c,t,r.root)}watchControlAttrs(){this.passControlAttrs()}passControlAttrs(){this.f.passAttrToControl("size",this.size);this.f.passAttrToControl("disabled",l(this.disabled));this.f.passAttrToControl("invalid",l(this.invalid));this.f.passAttrToControl("type","checkbox")}componentWillLoad(){this.passControlAttrs();this.inheritedAttributes=f(this.host)}componentDidLoad(){this.attributeObserver=new p(this.host,((t,i)=>{this.onAriaAttributeChange(t,i)}));this.attributeObserver.startObserving(v)}async componentDidRender(){this.f.passAttrToLabel("identifier",this.identifier||this.checkboxId);this.f.passAttrToLabel("required",String(this.required));this.passControlAttrs()}connectedCallback(){this.hydrated=true}disconnectedCallback(){var t;(t=this.attributeObserver)===null||t===void 0?void 0:t.stopObserving()}onAriaAttributeChange(t,i){this.host.removeAttribute(t);this.inheritedAttributes=Object.assign(Object.assign({},this.inheritedAttributes),{[t]:i})}render(){const t=t=>{if(this.noLabel){return e("label",{class:r.label},t)}return t};return e(h,{class:r.root,hydrated:this.hydrated,checked:this.checked,size:this.size,invalid:m(this.invalid)},t(e(u,null,e("input",Object.assign({id:this.identifier||this.checkboxId,type:"checkbox",value:this.value,name:this.name,checked:this.checked,onClick:this.onClickHandler.bind(this),onChange:this.onChangeHandler.bind(this),onFocus:this.onFocusHandler.bind(this),onBlur:this.onBlurHandler.bind(this),required:this.required,disabled:this.disabled,indeterminate:this.indeterminate,ref:t=>this.inputRef=t},this.inheritedAttributes,{"aria-checked":l(this.checked),"aria-required":m(this.required),"aria-invalid":m(this.invalid),"aria-disabled":m(this.disabled)})),e("span",null,e("slot",{name:"label"}),e("gov-icon",{class:r.check,name:"check-lg",type:"components"}),e("gov-icon",{class:r.indeterminate,name:"dash-lg",type:"components"})))))}onFocusHandler(t){t.stopPropagation();this.govFocus.emit({component:r.root,value:this.value,checked:this.checked,originalEvent:t})}onBlurHandler(t){t.stopPropagation();this.govBlur.emit({component:r.root,value:this.value,checked:this.checked,originalEvent:t})}onClickHandler(t){t.stopPropagation()}onChangeHandler(t){this.checked=t.target.checked;t.stopPropagation();this.govChange.emit({component:r.root,value:this.value,checked:this.checked,originalEvent:t})}async getRef(){return this.inputRef}get host(){return this}static get watchers(){return{size:["validateSize","watchControlAttrs"],disabled:["watchControlAttrs"],invalid:["watchControlAttrs"]}}},[4,"gov-form-checkbox",{value:[1],checked:[1540],required:[4],disabled:[516],indeterminate:[516],name:[1],size:[513],identifier:[1],noLabel:[4,"no-label"],invalid:[4],inheritedAttributes:[32],getRef:[64]},undefined,{size:["validateSize","watchControlAttrs"],disabled:["watchControlAttrs"],invalid:["watchControlAttrs"]}]);function k(){if(typeof customElements==="undefined"){return}const t=["gov-form-checkbox","gov-icon"];t.forEach((t=>{switch(t){case"gov-form-checkbox":if(!customElements.get(t)){customElements.define(t,g)}break;case"gov-icon":if(!customElements.get(t)){b()}break}}))}k();const C=g;const A=k;export{C as GovFormCheckbox,A as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=gov-form-checkbox.js.map
|