@gov-design-system-ce/components 0.0.25 → 0.0.26

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

@@ -0,0 +1 @@
+{"version":3,"file":"Forms.js","sourceRoot":"","sources":["../../../../../src/pages/Forms.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAG,CAAC,MAAe,EAAE,EAAE;EAC5C,IAAI,CAAC,MAAM;IAAE,OAAO,MAAM,CAAA;EAC1B,OAAO,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAA;AAC/D,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,GAAW,EAAE,EAAE;EACjD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;AACzD,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC;EAClB,EAAE,IAAI,EAAE,MAAM,EAAE;EAChB,EAAE,IAAI,EAAE,OAAO,EAAE;EACjB,EAAE,IAAI,EAAE,OAAO,EAAE;EACjB,EAAE,IAAI,EAAE,QAAQ,EAAE;EAClB,EAAE,IAAI,EAAE,QAAQ,EAAE;EAClB,EAAE,IAAI,EAAE,QAAQ,EAAE;EAClB,EAAE,IAAI,EAAE,QAAQ,EAAE;EAClB,EAAE,IAAI,EAAE,OAAO,EAAE;EACjB,EAAE,IAAI,EAAE,QAAQ,EAAE;EAClB,EAAE,IAAI,EAAE,QAAQ,EAAE;EAClB,EAAE,IAAI,EAAE,OAAO,EAAE;EACjB,EAAE,IAAI,EAAE,SAAS,EAAE;EACnB,EAAE,IAAI,EAAE,OAAO,EAAE;EACjB,EAAE,IAAI,EAAE,OAAO,EAAE;EACjB,EAAE,IAAI,EAAE,OAAO,EAAE;EACjB,EAAE,IAAI,EAAE,QAAQ,EAAE;EAClB,EAAE,IAAI,EAAE,QAAQ,EAAE;CAClB,CAAA;AAED,MAAM,SAAU,SAAQ,WAAW;EAClC,iBAAiB;IAChB,CAAC;IAAA,CAAC,GAAG,EAAE;MACN,UAAU,CAAC,GAAG,EAAE;QACf,MAAM,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmC,CAAA;QAC5E,MAAM,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAkC,CAAA;QACzE,IAAI,EAAE,EAAE;UACP,EAAE,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAU,CAAC;YAC5C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;UACf,CAAC,CAAC,CAAA;SACF;QACD,IAAI,EAAE,EAAE;UACP,EAAE,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAS,CAAC;YAC3C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;UAChB,CAAC,CAAC,CAAA;UACF,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE;YAC1B,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;cAC5B,UAAU,CAAC,GAAG,EAAE;gBACf,OAAO,CACN,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;kBAC1B,IAAI,CAAC,IAAI;oBAAE,OAAO,KAAK,CAAA;kBACvB,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;gBAC9F,CAAC,CAAC,CACF,CAAA;cACF,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAA;YAC5B,CAAC,CAAC,CAAA;UACH,CAAC,CAAC,CAAA;SACF;MACF,CAAC,EAAE,IAAI,CAAC,CAAA;IACT,CAAC,CAAC,EAAE,CAAA;IACJ,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwnChB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE;EACnD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;CAC9C","sourcesContent":["const removeDiacritics = (string?: string) => {\n\tif (!string) return string\n\treturn string.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '')\n}\n\nconst randomNumber = (min: number, max: number) => {\n\treturn Math.floor(Math.random() * (max - min + 1) + min)\n}\n\nconst data = () => [\n\t{ name: 'Pepa' },\n\t{ name: 'Katak' },\n\t{ name: 'Tomáš' },\n\t{ name: 'Ludvík' },\n\t{ name: 'Anežda' },\n\t{ name: 'Xaviér' },\n\t{ name: 'Ondřej' },\n\t{ name: 'Mirek' },\n\t{ name: 'Zdeněk' },\n\t{ name: 'Monika' },\n\t{ name: 'Jirka' },\n\t{ name: 'Abrahám' },\n\t{ name: 'Lucie' },\n\t{ name: 'Emily' },\n\t{ name: 'Pavel' },\n\t{ name: 'Gustav' },\n\t{ name: 'Amálie' },\n]\n\nclass FormsPage extends HTMLElement {\n\tconnectedCallback() {\n\t\t;(() => {\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst po = document.getElementById('bagr') as HTMLGovFormAutocompleteElement\n\t\t\t\tconst ba = document.getElementById('ba') as HTMLGovFormMultiSelectElement\n\t\t\t\tif (ba) {\n\t\t\t\t\tba.addEventListener('gov-change', function (e) {\n\t\t\t\t\t\tconsole.log(e)\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\tif (po) {\n\t\t\t\t\tpo.addEventListener('gov-select', function(e) {\n\t\t\t\t\t\tconsole.log(e);\n\t\t\t\t\t})\n\t\t\t\t\tpo.setSearchCallback(val => {\n\t\t\t\t\t\treturn new Promise(resolve => {\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tresolve(\n\t\t\t\t\t\t\t\t\tdata().filter(({ name }) => {\n\t\t\t\t\t\t\t\t\t\tif (!name) return false\n\t\t\t\t\t\t\t\t\t\treturn removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(val).toLowerCase()) > -1\n\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}, randomNumber(100, 1000))\n\t\t\t\t\t\t})\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}, 1000)\n\t\t})()\n\t\tthis.innerHTML = `\n\t\t\t<h2>\n\t\t\t\tSamostatné použití\n\t\t\t</h2>\n\t\t\t<gov-form-input placeholder=\"Co hledáte\">\n\t\t\t\t<gov-icon slot=\"right-icon\" name=\"info\"></gov-icon>\n\t\t\t</gov-form-input>\n\t\t\t<br>\n\t\t\t<gov-form-select size=\"l\" name=\"test-me\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<br>\n\t\t\t<gov-form-multi-select size=\"xl\" id=\"ba\" placeholder=\"Placeholder\" wcag-described-by=\"me-and-you\">\n\t\t\t\t<option value>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\" selected>Value D</option>\n\t\t\t\t<option value=\"e\">Value E</option>\n\t\t\t\t<option value=\"f\">Value F</option>\n\t\t\t\t<option value=\"g\">Value G</option>\n\t\t\t\t<option value=\"h\">Value H</option>\n\t\t\t\t<option value=\"i\" selected>Value I</option>\n\t\t\t</gov-form-multi-select>\n\t\t\t<br>\n\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked no-label></gov-form-checkbox>\n\t\t\t<gov-form-radio name=\"superRadio2\" value=\"me1\" no-label></gov-form-radio>\n\t\t\t<br>\n\t\t\t<gov-form-radio name=\"superRadio2\" value=\"me2\" checked no-label></gov-form-radio>\n\t\t\t<gov-form-switch name=\"test-me\" value=\"me2\" checked no-label></gov-form-switch>\n\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t</gov-form-checkbox>\n\t\t\t<gov-form-radio name=\"superRadio\" value=\"me1\">\n\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t</gov-form-radio>\n\t\t\t<gov-form-radio name=\"superRadio\" value=\"me2\" checked>\n\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t</gov-form-radio>\n\t\t\t<gov-form-switch name=\"test-me\" value=\"me2\" checked>\n\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t</gov-form-switch>\n\n\n\t\t\t<h2>\n\t\t\t\tDate & Time input (nativní)\n\t\t\t</h2>\n\t\t\t<gov-form-input size=\"m\" placeholder=\"Co hledáte\" input-type=\"datetime-local\"></gov-form-input>\n\t\t\t<br>\n\t\t\t<gov-form-input size=\"l\" placeholder=\"Co hledáte\" input-type=\"date\"></gov-form-input>\n\t\t\t<br>\n\t\t\t<gov-form-input size=\"xl\" placeholder=\"Co hledáte\" input-type=\"time\"></gov-form-input>\n\n\t\t\t<h2>Search</h2>\n\t\t\t<gov-form-control size=\"m\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-search name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-input slot=\"input\" id=\"kapr\" name=\"test-me\" placeholder=\"Co hledáte\"></gov-form-input>\n\t\t\t\t\t\t<gov-button slot=\"button\" variant=\"primary\" size=\"s\">\n\t\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"search\"></gov-icon>\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</gov-form-search>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control size=\"l\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-search name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-input slot=\"input\" id=\"kapr\" name=\"test-me\" placeholder=\"Co hledáte\"></gov-form-input>\n\t\t\t\t\t\t<gov-button slot=\"button\" variant=\"primary\" size=\"m\">\n\t\t\t\t\t\t\tHledat\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</gov-form-search>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control size=\"xl\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-search name=\"test-me-c\" value=\"me\" checked variant=\"secondary\">\n\t\t\t\t\t\t<gov-form-input slot=\"input\" id=\"kapr\" name=\"test-me\" placeholder=\"Co hledáte\"></gov-form-input>\n\t\t\t\t\t\t<gov-button slot=\"button\" variant=\"secondary\" size=\"l\">\n\t\t\t\t\t\t\tHledat\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</gov-form-search>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\n\t\t\t<h2>File</h2>\n\t\t\t<div class=\"container-view\">\n\t\t\t<h3>Normal</h3>\n\t\t\t\t<gov-form-control>\n\t\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Přidat přílohu *</gov-form-label>\n\t\t\t\t\t<gov-form-group>\n\t\t\t\t\t\t<gov-form-file name=\"test-me-c\" expanded accept=\"image/*\" max-file-size=\"1024\">\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" tabindex=\"-1\">\n\t\t\t\t\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p class=\"gov-text--s\">\n\t\t\t\t\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</gov-form-file>\n\t\t\t\t\t</gov-form-group>\n\t\t\t\t</gov-form-control>\n\t\t\t\t<br>\n\n\t\t\t\t<gov-form-control disabled>\n\t\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Přidat přílohu *</gov-form-label>\n\t\t\t\t\t<gov-form-group>\n\t\t\t\t\t\t<gov-form-file name=\"test-me-c\">\n\t\t\t\t\t\t\t<p aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<gov-button disabled variant=\"primary\" type=\"outlined\">\n\t\t\t\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"upload\"></gov-icon>\n\t\t\t\t\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p class=\"gov-text--s\">\n\t\t\t\t\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</gov-form-file>\n\t\t\t\t\t</gov-form-group>\n\t\t\t\t</gov-form-control>\n\t\t\t\t<br>\n\n\t\t\t\t<gov-form-control invalid>\n\t\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Přidat přílohu *</gov-form-label>\n\t\t\t\t\t<gov-form-group>\n\t\t\t\t\t\t<gov-form-file name=\"test-me-c\">\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\">\n\t\t\t\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"upload\"></gov-icon>\n\t\t\t\t\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p class=\"gov-text--s\">\n\t\t\t\t\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</gov-form-file>\n\t\t\t\t\t</gov-form-group>\n\t\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\t\tRequired\n\t\t\t\t\t</gov-form-message>\n\t\t\t\t</gov-form-control>\n\t\t\t\t<br>\n\n\t\t\t\t<h3>Expanded</h3>\n\t\t\t\t<gov-form-control>\n\t\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Přidat přílohu *</gov-form-label>\n\t\t\t\t\t<gov-form-group>\n\t\t\t\t\t\t<gov-form-file expanded name=\"test-me-c\">\n\t\t\t\t\t\t\t<p class=\"gov-color--secondary-800\">\n\t\t\t\t\t\t\t\tPřetáhněte soubor nebo\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\">\n\t\t\t\t\t\t\t\t\tNahrajte ze zařízení\n\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p class=\"gov-text--s\">\n\t\t\t\t\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</gov-form-file>\n\t\t\t\t\t</gov-form-group>\n\t\t\t\t</gov-form-control>\n\t\t\t\t<br>\n\n\t\t\t\t<gov-form-control disabled>\n\t\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Přidat přílohu *</gov-form-label>\n\t\t\t\t\t<gov-form-group>\n\t\t\t\t\t\t<gov-form-file expanded name=\"test-me-c\">\n\t\t\t\t\t\t\t<p class=\"gov-color--secondary-800\">\n\t\t\t\t\t\t\t\tPřetáhněte soubor nebo\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<gov-button disabled variant=\"primary\" type=\"outlined\">\n\t\t\t\t\t\t\t\t\tNahrát ze zařízení\n\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p class=\"gov-text--s\">\n\t\t\t\t\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</gov-form-file>\n\t\t\t\t\t</gov-form-group>\n\t\t\t\t</gov-form-control>\n\t\t\t\t<br>\n\n\t\t\t\t<gov-form-control invalid>\n\t\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Přidat přílohu *</gov-form-label>\n\t\t\t\t\t<gov-form-group>\n\t\t\t\t\t\t<gov-form-file expanded name=\"test-me-c\">\n\t\t\t\t\t\t\t<p class=\"gov-color--secondary-800\">\n\t\t\t\t\t\t\t\tPřetáhněte soubor nebo\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\">\n\t\t\t\t\t\t\t\t\tNahrát ze zařízení\n\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p class=\"gov-text--s\">\n\t\t\t\t\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</gov-form-file>\n\t\t\t\t\t</gov-form-group>\n\t\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\t\tRequired\n\t\t\t\t\t</gov-form-message>\n\t\t\t\t</gov-form-control>\n\t\t\t\t<br>\n\t\t\t</div>\n\n\t\t\t<h2>Multiselect</h2>\n\t\t\t<gov-form-control>\n\t\t\t\t<gov-form-label slot=\"top\">Multiselect</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-multi-select id=\"ba\" placeholder=\"Placeholder\" wcag-described-by=\"me-and-you\">\n\t\t\t\t\t\t<option value>Placeholder</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\" selected>Value D</option>\n\t\t\t\t\t\t<option value=\"e\">Value E</option>\n\t\t\t\t\t\t<option value=\"f\">Value F</option>\n\t\t\t\t\t\t<option value=\"g\">Value G</option>\n\t\t\t\t\t\t<option value=\"h\">Value H</option>\n\t\t\t\t\t\t<option value=\"i\" selected>Value I</option>\n\t\t\t\t\t</gov-form-multi-select>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\n\t\t\t<h2>Autocomplete</h2>\n\t\t\t<gov-form-control>\n\t\t\t\t<gov-form-label slot=\"top\">Label of autocomplete</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-autocomplete placeholder=\"Placeholder autcomplete\" id=\"bagr\"></gov-form-autocomplete>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\n\t\t\t<h2>Textarea</h2>\n\t\t\t<h3>\n\t\t\t\tDefault\n\t\t\t</h3>\n\t\t\t<gov-form-control type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of textarea</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input multiline rows=\"3\" name=\"test-me\" placeholder=\"Placeholder\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tInvalid\n\t\t\t</h3>\n\t\t\t<gov-form-control invalid=\"TRUE\" type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of textarea</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input required multiline rows=\"3\" name=\"test-me\" value=\"Value of textarea\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tDisabled\n\t\t\t</h3>\n\t\t\t<gov-form-control disabled type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of textarea</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input multiline rows=\"3\" name=\"test-me\" value=\"Value of textarea\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\n\t\t\t<h2>Checkbox</h2>\n\t\t\t<h3>\n\t\t\t\tGaps\n\t\t\t</h3>\n\n\t\t\t<gov-form-control size=\"xs\">\n\t\t\t\t<gov-form-label size=\"xs\" slot=\"top\">Label of word</gov-form-label>\n\t\t\t\t<gov-form-group gap=\"2xs\">\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked></gov-form-checkbox>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked></gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control size=\"xs\">\n\t\t\t\t<gov-form-group gap=\"2xs\">\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" required checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Option 1</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Option 2</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control size=\"s\">\n\t\t\t\t<gov-form-group gap=\"xs\">\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Option 1</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Option 2</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control size=\"m\">\n\t\t\t\t<gov-form-group gap=\"s\">\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Option 1</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Option 2</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control size=\"l\">\n\t\t\t\t<gov-form-group gap=\"m\">\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Option 1</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Option 2</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\n\t\t\t<h3>\n\t\t\t\tDefault\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"xs\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"s\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"m\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"l\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tInvalid\n\t\t\t</h3>\n\t\t\t<gov-form-control invalid=\"true\" size=\"xs\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control invalid=\"true\" size=\"s\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control invalid=\"true\" size=\"m\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t\n\t\t\t<h3>\n\t\t\t\tDisabled\n\t\t\t</h3>\n\t\t\t<gov-form-control disabled size=\"xs\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\">\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control disabled=\"True\" size=\"s\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\">\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control disabled=\"TRUE\" size=\"m\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control disabled=\"1\" size=\"l\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-checkbox name=\"test-me-c\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-checkbox>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\n\t\t\t<h2>Radio</h2>\n\t\t\t<h3>\n\t\t\t\tDefault group\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"xs\" fieldset>\n\t\t\t\t\t<gov-form-label legend size=\"s\" slot=\"top\">Seznam skupiny</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test1\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test1\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control size=\"s\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test2\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test2\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control size=\"m\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test3\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test3\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control size=\"l\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test4\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test4\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tInvalid\n\t\t\t</h3>\n\t\t\t<gov-form-control invalid=\"true\" size=\"xs\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test5\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test5\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control invalid=\"true\" size=\"s\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test6\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test6\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control invalid=\"true\" size=\"m\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test7\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test7\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control invalid=\"true\" size=\"l\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test8\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test8\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tDisabled\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"xs\" disabled>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test9\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test9\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control disabled=\"true\" size=\"s\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test10\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test10\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control disabled=\"true\" size=\"m\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test11\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test11\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br>\n\t\t\t<gov-form-control disabled=\"true\" size=\"l\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-radio name=\"test12\" value=\"me\" >\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 1</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t\t<gov-form-radio name=\"test12\" value=\"me2\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Value 2</gov-form-label>\n\t\t\t\t\t</gov-form-radio>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\n\t\t\t<h2>Select</h2>\n\t\t\t<h3>\n\t\t\t\tDefault\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"m\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"l\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<option value=\"a\" selected>Value A</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"xl\">\n\t\t\t\t<gov-form-label size=\"m\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<option value=\"a\" selected>Value A</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tPrefix / sufix\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"m\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<span slot=\"prefix\">$</span>\n\t\t\t\t\t\t<span slot=\"sufix\">Kč</span>\n\n\t\t\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"l\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<span slot=\"prefix\">$</span>\n\t\t\t\t\t\t<span slot=\"sufix\">Kč</span>\n\n\t\t\t\t\t\t<option value=\"a\" selected>Value A</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"l\">\n\t\t\t\t<gov-form-label size=\"m\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<span slot=\"prefix\">$</span>\n\t\t\t\t\t\t<span slot=\"sufix\">Kč</span>\n\n\t\t\t\t\t\t<option value=\"a\" selected>Value A</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tInvalid\n\t\t\t</h3>\n\t\t\t<gov-form-control invalid=\"true\" size=\"m\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control invalid=\"true\" size=\"l\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control invalid=\"true\" size=\"xl\">\n\t\t\t\t<gov-form-label size=\"m\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tDisabled\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"m\" disabled>\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control disabled=\"true\" size=\"m\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control disabled=\"true\" size=\"l\">\n\t\t\t\t<gov-form-label size=\"m\" slot=\"top\">Souhlasím</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-select name=\"test-me\">\n\t\t\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\n\t\t\t<h2>Input</h2>\n\t\t\t<h3>\n\t\t\t\tDefault\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"m\" type=\"input\" id=\"metro2\">\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\" id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"l\" type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of input 3333</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input id=\"kapr\" name=\"test-me\" value=\"Value of input\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"xl\" type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label size=\"m\" 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 id=\"kapr\" name=\"test-me\" value=\"Value of input\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tPrefix / sufix\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"m\" type=\"input\" id=\"metro2\">\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\" id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\">\n\t\t\t\t\t\t<span slot=\"prefix\">$</span>\n\t\t\t\t\t\t<span slot=\"sufix\">Kč</span>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"l\" type=\"input\" id=\"metro2\">\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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<span slot=\"prefix\">$</span>\n\t\t\t\t\t\t<span slot=\"sufix\">Kč</span>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"xl\" type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label size=\"m\" 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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<span slot=\"prefix\">$</span>\n\t\t\t\t\t\t<span slot=\"sufix\">Kč</span>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tLeft icon\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"m\" type=\"input\" id=\"metro2\">\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 id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\">\n\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"l\" type=\"input\" id=\"metro2\">\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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"xl\" type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label size=\"m\" 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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tRight icon\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"m\" type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label 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 id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\">\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"l\" type=\"input\" id=\"metro2\">\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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"xl\" type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label size=\"m\" 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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tSuccess\n\t\t\t</h3>\n\t\t\t<gov-form-control success=\"true\" size=\"m\" type=\"input\" id=\"metro2\">\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 id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control success=\"True\" size=\"l\" type=\"input\" id=\"metro2\">\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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control success=\"1\" size=\"xl\" type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label size=\"m\" 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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tInvalid\n\t\t\t</h3>\n\t\t\t<gov-form-control invalid=\"true\" size=\"m\" type=\"input\" id=\"metro2\">\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 id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control invalid=\"true\" size=\"l\" type=\"input\" id=\"metro2\">\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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control invalid=\"true\" size=\"xl\" type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label size=\"m\" 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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tDisabled\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"m\" type=\"input\" id=\"metro2\" disabled>\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 id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\">\n\t\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control disabled=\"True\" size=\"l\" type=\"input\" id=\"metro2\">\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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control disabled=\"1\" size=\"xl\" type=\"input\" id=\"metro2\">\n\t\t\t\t<gov-form-label size=\"m\" 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 id=\"kapr\" name=\"test-me\" value=\"Value of input\">\n\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"info\"></gov-icon>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\n\t\t\t<h3>\n\t\t\t\tPassword power\n\t\t\t</h3>\n\t\t\t<gov-form-password-power power=\"0\"></gov-form-password-power>\n\t\t\t<gov-form-password-power power=\"1\">slabé</gov-form-password-power>\n\t\t\t<gov-form-password-power power=\"2\">střední</gov-form-password-power>\n\t\t\t<gov-form-password-power power=\"3\">silné</gov-form-password-power>\n\n\t\t\t<h2>Switch</h2>\n\t\t\t<h3>\n\t\t\t\tDefault\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"xs\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"s\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"m\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\n\t\t\t<gov-form-control size=\"l\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\n\t\t\t<h3>\n\t\t\t\tWith message\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"xs\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"s\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"m\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"l\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t\t<gov-form-message slot=\"bottom\" variant=\"error\">\n\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\tRequired\n\t\t\t\t</gov-form-message>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tWith label\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"xs\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of toggle</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"s\">\n\t\t\t\t<gov-form-label size=\"s\" slot=\"top\">Label of toggle</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"m\">\n\t\t\t\t<gov-form-label size=\"m\" slot=\"top\">Label of toggle</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"l\">\n\t\t\t\t<gov-form-label size=\"m\" slot=\"top\">Label of toggle</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tDisabled\n\t\t\t</h3>\n\t\t\t<gov-form-control type=\"switch\" size=\"xs\" disabled>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\">\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control type=\"switch\" size=\"s\" disabled=\"true\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\">\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control type=\"switch\" size=\"m\" disabled=\"true\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control type=\"switch\" size=\"l\" disabled=\"true\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<h3>\n\t\t\t\tInvalid\n\t\t\t</h3>\n\t\t\t<gov-form-control size=\"xs\" invalid=\"True\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch invalid name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"s\" invalid=\"TRUE\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch invalid name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"m\" invalid=\"true\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch invalid name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<gov-form-control size=\"l\" invalid=\"1\">\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-switch invalid name=\"test-me\" value=\"me\" checked>\n\t\t\t\t\t\t<gov-form-label slot=\"label\">Souhlasím</gov-form-label>\n\t\t\t\t\t</gov-form-switch>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t`\n\t}\n}\n\nif (customElements.get('forms-page') === undefined) {\n\tcustomElements.define('forms-page', FormsPage)\n}\n"]}

package/dist/collection/pages/FormsRestructure.js

@@ -0,0 +1,13 @@
+class FormsRestructurePage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+			<h4>Forms</h4>
+			<div class="container-view container-view--inline">
+			</div>
+		`;
+  }
+}
+if (customElements.get('forms-restructue-page') === undefined) {
+  customElements.define('forms-restructue-page', FormsRestructurePage);
+}
+//# sourceMappingURL=FormsRestructure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormsRestructure.js","sourceRoot":"","sources":["../../../../../src/pages/FormsRestructure.ts"],"names":[],"mappings":"AAAA,MAAM,oBAAqB,SAAQ,WAAW;EAC7C,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;GAIhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,KAAK,SAAS,EAAE;EAC9D,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,oBAAoB,CAAC,CAAA;CACpE","sourcesContent":["class FormsRestructurePage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t\t<h4>Forms</h4>\n\t\t\t<div class=\"container-view container-view--inline\">\n\t\t\t</div>\n\t\t`\n\t}\n}\n\nif (customElements.get('forms-restructue-page') === undefined) {\n\tcustomElements.define('forms-restructue-page', FormsRestructurePage)\n}\n"]}

package/dist/collection/pages/Grid.js

@@ -0,0 +1,92 @@
+class GridPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>
+			Grid
+		</h2>
+		<style>
+			.gov-grid-item span {
+				display: block;
+				background: lightgray;
+				padding: 10px;
+			}
+		</style>
+		<gov-grid>
+			<gov-grid-item size="1/12"><span>1/12</span></gov-grid-item>
+			<gov-grid-item size="11/12"><span>11/12</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid>
+			<gov-grid-item size="2/12"><span>2/12</span></gov-grid-item>
+			<gov-grid-item size="10/12"><span>10/12</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid>
+			<gov-grid-item size="3/12"><span>3/12</span></gov-grid-item>
+			<gov-grid-item size="9/12"><span>9/12</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid>
+			<gov-grid-item size="4/12"><span>4/12</span></gov-grid-item>
+			<gov-grid-item size="8/12"><span>8/12</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid>
+			<gov-grid-item size="5/12"><span>5/12</span></gov-grid-item>
+			<gov-grid-item size="7/12"><span>7/12</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid>
+			<gov-grid-item size="6/12"><span>6/12</span></gov-grid-item>
+			<gov-grid-item size="6/12"><span>6/12</span></gov-grid-item>
+		</gov-grid>
+
+		<h2>Responsive grid</h2>
+		<gov-grid>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 1</span></gov-grid-item>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 2</span></gov-grid-item>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 3</span></gov-grid-item>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 4</span></gov-grid-item>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 5</span></gov-grid-item>
+			<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 6</span></gov-grid-item>
+		</gov-grid>
+
+		<h2>Horizontal (X) align</h2>
+		<gov-grid>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid align-x="middle">
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid align-x="bottom">
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>
+		</gov-grid>
+		<br>
+
+		<h2>Vertical (Y) align</h2>
+		<gov-grid>
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid align-y="center">
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+		</gov-grid>
+		<br>
+		<gov-grid align-y="right">
+			<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>
+		</gov-grid>
+			`;
+  }
+}
+if (customElements.get('grid-page') === undefined) {
+  customElements.define('grid-page', GridPage);
+}
+//# sourceMappingURL=Grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../../../src/pages/Grid.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;EACjC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmFf,CAAA;EACH,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;EAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;CAC5C","sourcesContent":["class GridPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>\n\t\t\tGrid\n\t\t</h2>\n\t\t<style>\n\t\t\t.gov-grid-item span {\n\t\t\t\tdisplay: block;\n\t\t\t\tbackground: lightgray;\n\t\t\t\tpadding: 10px;\n\t\t\t}\n\t\t</style>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size=\"1/12\"><span>1/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"11/12\"><span>11/12</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size=\"2/12\"><span>2/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"10/12\"><span>10/12</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size=\"3/12\"><span>3/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"9/12\"><span>9/12</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size=\"4/12\"><span>4/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"8/12\"><span>8/12</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size=\"5/12\"><span>5/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"7/12\"><span>7/12</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size=\"6/12\"><span>6/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"6/12\"><span>6/12</span></gov-grid-item>\n\t\t</gov-grid>\n\n\t\t<h2>Responsive grid</h2>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size-sm=\"6/12\" size-md=\"4/12\" size-lg=\"3/12\" size-xl=\"2/12\"><span>Cell 1</span></gov-grid-item>\n\t\t\t<gov-grid-item size-sm=\"6/12\" size-md=\"4/12\" size-lg=\"3/12\" size-xl=\"2/12\"><span>Cell 2</span></gov-grid-item>\n\t\t\t<gov-grid-item size-sm=\"6/12\" size-md=\"4/12\" size-lg=\"3/12\" size-xl=\"2/12\"><span>Cell 3</span></gov-grid-item>\n\t\t\t<gov-grid-item size-sm=\"6/12\" size-md=\"4/12\" size-lg=\"3/12\" size-xl=\"2/12\"><span>Cell 4</span></gov-grid-item>\n\t\t\t<gov-grid-item size-sm=\"6/12\" size-md=\"4/12\" size-lg=\"3/12\" size-xl=\"2/12\"><span>Cell 5</span></gov-grid-item>\n\t\t\t<gov-grid-item size-sm=\"6/12\" size-md=\"4/12\" size-lg=\"3/12\" size-xl=\"2/12\"><span>Cell 6</span></gov-grid-item>\n\t\t</gov-grid>\n\n\t\t<h2>Horizontal (X) align</h2>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-x=\"middle\">\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-x=\"bottom\">\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\n\t\t<h2>Vertical (Y) align</h2>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-y=\"center\">\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-y=\"right\">\n\t\t\t<gov-grid-item size=\"4/12\"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t</gov-grid>\n\t\t\t`\n\t}\n}\n\nif (customElements.get('grid-page') === undefined) {\n\tcustomElements.define('grid-page', GridPage)\n}\n"]}

package/dist/collection/pages/Home.js

@@ -0,0 +1,9 @@
+class HomePage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = ``;
+  }
+}
+if (customElements.get('home-page') === undefined) {
+  customElements.define('home-page', HomePage);
+}
+//# sourceMappingURL=Home.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Home.js","sourceRoot":"","sources":["../../../../../src/pages/Home.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;EACjC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;EACpB,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;EAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;CAC5C","sourcesContent":["class HomePage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = ``\n\t}\n}\n\nif (customElements.get('home-page') === undefined) {\n\tcustomElements.define('home-page', HomePage)\n}\n"]}

package/dist/collection/pages/Layout.js

@@ -0,0 +1,97 @@
+class LayoutPage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+		<h2>Layout</h2>
+
+		<gov-container>
+			<gov-layout type="stretch">
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="aside" variant="right">
+				<gov-layout-column>
+					<p><b>Aside right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="aside" variant="left">
+				<gov-layout-column>
+					<p><b>Aside left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="aside" variant="right" inverse>
+				<gov-layout-column>
+					<p><b>Aside right inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside right inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="aside" variant="left" inverse>
+				<gov-layout-column>
+					<p><b>Aside left inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>
+				</gov-layout-column>
+				<gov-layout-column>
+					<p><b>Aside left inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="text" variant="left">
+				<gov-layout-column>
+					<p><b>Text left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="text">
+				<gov-layout-column>
+					<p><b>Text</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+			<gov-layout type="text" variant="right">
+				<gov-layout-column>
+					<p><b>Text right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>
+				</gov-layout-column>
+			</gov-layout>
+			<br>
+		</gov-container>
+		<br>
+
+		`;
+  }
+}
+if (customElements.get('layout-page') === undefined) {
+  customElements.define('layout-page', LayoutPage);
+}
+//# sourceMappingURL=Layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../../src/pages/Layout.ts"],"names":[],"mappings":"AAAA,MAAM,UAAW,SAAQ,WAAW;EACnC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE;EACpD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;CAChD","sourcesContent":["class LayoutPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Layout</h2>\n\n\t\t<gov-container>\n\t\t\t<gov-layout type=\"stretch\">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\t\t\t<br>\n\t\t\t<gov-layout>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\t\t\t<br>\n\t\t\t<gov-layout>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\t\t\t<br>\n\t\t\t<gov-layout type=\"aside\" variant=\"right\">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\t\t\t<br>\n\t\t\t<gov-layout type=\"aside\" variant=\"left\">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\t\t\t<br>\n\t\t\t<gov-layout type=\"aside\" variant=\"right\" inverse>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside right inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside right inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\t\t\t<br>\n\t\t\t<gov-layout type=\"aside\" variant=\"left\" inverse>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside left inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside left inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\t\t\t<br>\n\t\t\t<gov-layout type=\"text\" variant=\"left\">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Text left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\t\t\t<br>\n\t\t\t<gov-layout type=\"text\">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Text</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\t\t\t<br>\n\t\t\t<gov-layout type=\"text\" variant=\"right\">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Text right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\t\t\t<br>\n\t\t</gov-container>\n\t\t<br>\n\n\t\t`\n\t}\n}\n\nif (customElements.get('layout-page') === undefined) {\n\tcustomElements.define('layout-page', LayoutPage)\n}\n"]}

package/dist/collection/pages/Loading.js

@@ -0,0 +1,95 @@
+class LoadingPage extends HTMLElement {
+  connectedCallback() {
+    setTimeout(function () {
+      document.getElementById('btn').addEventListener('gov-click', function () {
+        document.getElementById('loading').setAttribute('loading', 'true');
+      });
+    }, 500);
+    this.innerHTML = `
+			<h2>Loading</h2>
+			<div class="preview-container">
+      <div class="skeletons-defaults">
+        <h2>Default</h2>
+        <gov-skeleton variant="success"></gov-skeleton>     
+      </div>
+      <div class="skeletons-appearance-circle">
+        <h2>Default circle</h2>
+        <gov-skeleton shape="circle"> </gov-skeleton>
+      </div> 
+      <div class="skeletons-appearance-circle">
+        <h2>Default rect</h2>
+        <gov-skeleton shape="rect"> </gov-skeleton>
+      </div>       
+      <div class="skeletons-with-count">
+        <h2>Default 4 rows</h2>
+        <gov-skeleton count="2"></gov-skeleton>
+      </div>           
+      <div class="skeletons-animation-no-animation">
+        <h2>Without animation</h2>
+        <gov-skeleton animation="false"></gov-skeleton>
+      </div>
+      <div class="skeletons-animation-pulse">
+        <h2>Pulse animation</h2>
+        <gov-skeleton animation="pulse"></gov-skeleton>
+      </div>
+      <div class="skeletons-animation-progress">
+        <h2>Progress animation</h2>
+        <gov-skeleton animation="progress"></gov-skeleton>
+      </div>
+      <div class="skeletons-with-theming">
+        <h2>Custom styles</h2>
+        <style>
+          .custom-skeleton {
+            --skeleton-width: 100px;
+            --skeleton-height: 100px;
+            --skeleton-background: #cccccc;
+            --skeleton-border-radius: 20px;
+          }
+        </style>
+        <gov-skeleton></gov-skeleton>
+      </div>
+      <div>
+        <h2>Custom width</h2>
+        <gov-skeleton width="500px"></gov-skeleton>
+      </div>
+      <div>
+        <h2>Custom height</h2>
+        <gov-skeleton height="80px"></gov-skeleton>
+      </div>
+    </div>
+			
+			
+			<gov-button variant="primary" id="btn" wcag-label="Zobrazit načítání">Zobrazit načítání</gov-button>
+
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+			<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>
+
+			<gov-loading id="loading">Načítání</gov-loading>
+		`;
+  }
+}
+if (customElements.get('loading-page') === undefined) {
+  customElements.define('loading-page', LoadingPage);
+}
+//# sourceMappingURL=Loading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../../../src/pages/Loading.ts"],"names":[],"mappings":"AAAA,MAAM,WAAY,SAAQ,WAAW;EACpC,iBAAiB;IAChB,UAAU,CAAC;MACV,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,WAAW,EAAE;QAC5D,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;MACnE,CAAC,CAAC,CAAA;IACH,CAAC,EAAE,GAAG,CAAC,CAAA;IACP,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE;EACrD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;CAClD","sourcesContent":["class LoadingPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tsetTimeout(function () {\n\t\t\tdocument.getElementById('btn').addEventListener('gov-click', function () {\n\t\t\t\tdocument.getElementById('loading').setAttribute('loading', 'true')\n\t\t\t})\n\t\t}, 500)\n\t\tthis.innerHTML = `\n\t\t\t<h2>Loading</h2>\n\t\t\t<div class=\"preview-container\">\n      <div class=\"skeletons-defaults\">\n        <h2>Default</h2>\n        <gov-skeleton variant=\"success\"></gov-skeleton>     \n      </div>\n      <div class=\"skeletons-appearance-circle\">\n        <h2>Default circle</h2>\n        <gov-skeleton shape=\"circle\"> </gov-skeleton>\n      </div> \n      <div class=\"skeletons-appearance-circle\">\n        <h2>Default rect</h2>\n        <gov-skeleton shape=\"rect\"> </gov-skeleton>\n      </div>       \n      <div class=\"skeletons-with-count\">\n        <h2>Default 4 rows</h2>\n        <gov-skeleton count=\"2\"></gov-skeleton>\n      </div>           \n      <div class=\"skeletons-animation-no-animation\">\n        <h2>Without animation</h2>\n        <gov-skeleton animation=\"false\"></gov-skeleton>\n      </div>\n      <div class=\"skeletons-animation-pulse\">\n        <h2>Pulse animation</h2>\n        <gov-skeleton animation=\"pulse\"></gov-skeleton>\n      </div>\n      <div class=\"skeletons-animation-progress\">\n        <h2>Progress animation</h2>\n        <gov-skeleton animation=\"progress\"></gov-skeleton>\n      </div>\n      <div class=\"skeletons-with-theming\">\n        <h2>Custom styles</h2>\n        <style>\n          .custom-skeleton {\n            --skeleton-width: 100px;\n            --skeleton-height: 100px;\n            --skeleton-background: #cccccc;\n            --skeleton-border-radius: 20px;\n          }\n        </style>\n        <gov-skeleton></gov-skeleton>\n      </div>\n      <div>\n        <h2>Custom width</h2>\n        <gov-skeleton width=\"500px\"></gov-skeleton>\n      </div>\n      <div>\n        <h2>Custom height</h2>\n        <gov-skeleton height=\"80px\"></gov-skeleton>\n      </div>\n    </div>\n\t\t\t\n\t\t\t\n\t\t\t<gov-button variant=\"primary\" id=\"btn\" wcag-label=\"Zobrazit načítání\">Zobrazit načítání</gov-button>\n\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\n\t\t\t<gov-loading id=\"loading\">Načítání</gov-loading>\n\t\t`\n\t}\n}\n\nif (customElements.get('loading-page') === undefined) {\n\tcustomElements.define('loading-page', LoadingPage)\n}\n"]}