@gov-design-system-ce/components 4.2.9 → 4.6.0

package/dist/collection/pages/Forms.js

@@ -1,2329 +0,0 @@
-const removeDiacritics = (string) => {
-    if (!string)
-        return string;
-    return string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-};
-const randomNumber = (min, max) => {
-    return Math.floor(Math.random() * (max - min + 1) + min);
-};
-const data = () => [
-    { name: 'Pepa' },
-    { name: 'Katak' },
-    { name: 'Tomáš' },
-    { name: 'Ludvík' },
-    { name: 'Anežda' },
-    { name: 'Xaviér' },
-    { name: 'Ondřej' },
-    { name: 'Mirek' },
-    { name: 'Zdeněk' },
-    { name: 'Monika' },
-    { name: 'Jirka' },
-    { name: 'Abrahám' },
-    { name: 'Lucie' },
-    { name: 'Emily' },
-    { name: 'Pavel' },
-    { name: 'Gustav' },
-    { name: 'Amálie' },
-];
-class FormsPage extends HTMLElement {
-    connectedCallback() {
-        ;
-        (() => {
-            setTimeout(() => {
-                const selectedList = document.getElementById('selected');
-                const moja = document.getElementById('moja');
-                const da = document.getElementById('test-me-ujo');
-                const po = document.getElementById('bagr');
-                const ba = document.getElementById('ba');
-                const na = document.getElementById('kaprWWWWWW');
-                const ms = document.getElementById('poleno');
-                if (ba) {
-                    ba.addEventListener('gov-change', function (e) {
-                        console.log(e);
-                    });
-                }
-                if (na) {
-                    na.addEventListener('gov-blur', function (e) {
-                        console.log(e);
-                    });
-                }
-                if (da) {
-                    da.addEventListener('gov-files', function (e) {
-                        console.log(e.detail);
-                    });
-                }
-                if (po) {
-                    po.addEventListener('gov-select', function (e) {
-                        console.log(e);
-                    });
-                    po.setSearchCallback(val => {
-                        return new Promise(resolve => {
-                            setTimeout(() => {
-                                resolve(data().filter(({ name }) => {
-                                    if (!name)
-                                        return false;
-                                    return removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(val).toLowerCase()) > -1;
-                                }));
-                            }, randomNumber(100, 1000));
-                        });
-                    });
-                }
-                if (ms && selectedList) {
-                    ms.addEventListener('gov-change', (e) => {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-ignore
-                        e.detail.value.map((item) => {
-                            const cta = document.createElement('button');
-                            cta.innerHTML = item;
-                            cta.addEventListener('click', () => {
-                                ms.options = [{ value: 'a', label: 'Aneta' }];
-                            });
-                            selectedList.appendChild(cta);
-                        });
-                    });
-                    ms.options = [{ value: 'a', label: 'Aneta' }, { value: 'b', label: 'Beata' }, { value: 't', label: 'Tomáš' }];
-                    setTimeout(() => {
-                        //ms.setSelectedOption({value: 'a', name: 'Aneta'})
-                        //ms.setSelectedOptions([{value: 'a', name: 'Aneta'}])
-                        //console.log('sets');
-                        //ms.getSelectedOptions().then((t) => console.log(t))
-                    }, 5000);
-                }
-                if (moja) {
-                    moja.options = [{ value: 'd', label: 'Value D' }, { value: 'e', label: 'Value E' }, {
-                            value: 'f',
-                            label: 'Value F',
-                            disabled: true
-                        }];
-                    setTimeout(() => {
-                        moja.value = 'h';
-                        moja.options = [{ value: 'g', label: 'Value G' }, { value: 'h', label: 'Value H' }, {
-                                value: 'i',
-                                label: 'Value I',
-                            }];
-                    }, 2000);
-                }
-                const mojeId = document.getElementById('moje-id');
-                const input = document.createElement('gov-form-input');
-                input.setAttribute('size', 'l');
-                input.setAttribute('placeholder', 'Co hledáte HYDRATED?');
-                input.addEventListener('gov-hydrated', () => {
-                    console.log('hydrated');
-                });
-                mojeId.prepend(input);
-            }, 1000);
-        })();
-        this.innerHTML = `
-<div id="selected"></div>
-<div id="moje-id"></div>
-<br><br>
-
-<ul class="gov-list--plain nav-top">
-	<li><a href="#input">Input</a></li>
-	<li><a href="#containing-input">Containing Input</a></li>
-	<li><a href="#select">Select</a></li>
-	<li><a href="#checkbox">Checkbox</a></li>
-	<li><a href="#radio">Radio</a></li>
-	<li><a href="#switch">Switch</a></li>
-	<li><a href="#range">Range</a></li>
-</ul>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<gov-form-control>
-	<gov-form-label size="m" slot="top">Multiselect</gov-form-label>
-	<gov-form-group>
-		<gov-form-multi-select name="test-me" size="xl" id="poleno">
-		</gov-form-multi-select>
-	</gov-form-group>
-</gov-form-control>
-
-<gov-form-control>
-	<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select  value="e" name="test-me" size="xl" id="moja">
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-
-<h2>Samostatné použití</h2>
-<gov-form-input placeholder="Co hledáte" size="m">
-	<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-</gov-form-input>
-<br>
-<gov-form-select size="l" name="test-me" invalid="true">
-	<option value="" selected>Placeholder</option>
-	<option value="b">Value B</option>
-	<option value="c">Value C</option>
-	<option value="d">Value D</option>
-</gov-form-select>
-<br>
-<gov-form-select size="l" name="test-me" success="true">
-	<option value="" selected>Placeholder</option>
-	<option value="b">Value B</option>
-	<option value="c">Value C</option>
-	<option value="d">Value D</option>
-</gov-form-select>
-<br>
-<div>
-	<gov-form-checkbox size="m" name="test-me-c" value="me" checked no-label></gov-form-checkbox>
-</div>
-<div>
-	<gov-form-radio size="m" name="superRadio2" value="me1" no-label></gov-form-radio>
-	<br>
-	<gov-form-radio size="m" name="superRadio2" value="me2" checked no-label></gov-form-radio>
-</div>
-<div>
-	<gov-form-switch size="m" name="test-me" value="me2" checked no-label></gov-form-switch>
-</div>
-<br><br>
-<gov-form-checkbox size="m" name="test-me-c" value="me" checked>
-	<gov-form-label size="m" slot="label">Souhlasím</gov-form-label>
-</gov-form-checkbox>
-<gov-form-radio size="m" name="superRadio" value="me1">
-	<gov-form-label size="m" slot="label">Souhlasím</gov-form-label>
-</gov-form-radio>
-<gov-form-radio size="m" name="superRadio" value="me2" checked>
-	<gov-form-label size="m" slot="label">Souhlasím</gov-form-label>
-</gov-form-radio>
-<gov-form-switch size="m" name="test-me" value="me2" checked>
-	<gov-form-label size="m" slot="label">Souhlasím</gov-form-label>
-</gov-form-switch>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2 id="input">Input</h2>
-<gov-form-control type="input">
-	<gov-form-label size="xs" slot="top">Label of input XS</gov-form-label>
-	<gov-form-group gap="xs">
-		<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="xs"></gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input S</gov-form-label>
-	<gov-form-group gap="s">
-		<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input M</gov-form-label>
-	<gov-form-group gap="m">
-		<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="m" required="true"></gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input 3333 L</gov-form-label>
-	<gov-form-group gap="l">
-		<gov-form-input name="test-me" value="Value of input" size="l"></gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="m" slot="top">Label of input XL</gov-form-label>
-	<gov-form-group gap="xl">
-		<gov-form-input name="test-me" value="Value of input" size="xl"></gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Prefix / sufix</h3>
-<gov-form-control type="input">
-	<gov-form-label size="xs" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="xs">
-			<p slot="prefix">$</p>
-			<p slot="sufix">Kč</p>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="s">
-			<p slot="prefix">$</p>
-			<p slot="sufix">Kč</p>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="m">
-			<span slot="prefix">$</span>
-			<span slot="sufix">Kč</span>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="l">
-			<span slot="prefix">$</span>
-			<span slot="sufix">Kč</span>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="m" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="xl">
-			<span slot="prefix">$</span>
-			<span slot="sufix">Kč</span>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Left icon</h3>
-<gov-form-control type="input">
-	<gov-form-label size="xs" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="xs">
-			<gov-icon slot="icon-start" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="s">
-			<gov-icon slot="icon-start" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="m">
-			<gov-icon slot="icon-start" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="l">
-			<gov-icon slot="icon-start" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="m" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="xl">
-			<gov-icon slot="icon-start" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Right icon</h3>
-<gov-form-control type="input">
-	<gov-form-label size="xs" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="xs">
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="s">
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="m" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="m">
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="l" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="l">
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="xl" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="xl">
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Success</h3>
-<gov-form-control type="input">
-	<gov-form-label size="xs" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="xs" success="true"></gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="s" success="true"></gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="m" success="true"></gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="l" success="True">
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="m" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="xl" success="1">
-			<gov-icon slot="icon-start" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Error</h3>
-<gov-form-control type="input">
-	<gov-form-label size="xs" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="xs" invalid="true" invalid="true"></gov-form-input>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="xs">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="s" invalid="true"></gov-form-input>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="s">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="m" invalid="true"></gov-form-input>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="m">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="l" invalid="true">
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="l">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="m" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="xl" invalid="true">
-			<gov-icon slot="icon-start" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="xl">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-
-<h3>Disabled</h3>
-<gov-form-control size="xs" type="input">
-	<gov-form-label size="xs" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="xs" disabled>
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control size="m" type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="s" disabled>
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control size="m" type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" placeholder="Placeholder" size="m" disabled required>
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="l" disabled="True">
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="input">
-	<gov-form-label size="m" slot="top">Label of input</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" value="Value of input" size="xl" disabled="1">
-			<gov-icon slot="icon-start" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h3 id="containing-input">Password power</h3>
-<gov-form-password-power power="0"></gov-form-password-power>
-<gov-form-password-power power="1">slabé</gov-form-password-power>
-<gov-form-password-power power="2">střední</gov-form-password-power>
-<gov-form-password-power power="3">silné</gov-form-password-power>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h3>Password input</h3>
-<div style="width: 400px">
-<gov-form-control type="input">
-	<gov-form-label size="m" slot="top">Heslo</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" size="m" input-type="password">
-			<gov-icon slot="icon-start" name="gear"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-	<gov-form-password-power power="2">střední</gov-form-password-power>
-</gov-form-control>
-</div>
-<gov-form-control type="input">
-	<gov-form-label size="m" slot="top">Heslo</gov-form-label>
-	<gov-form-group>
-		<gov-form-input name="test-me" size="m" input-type="password">
-		</gov-form-input>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="m">
-		<gov-icon slot="icon" name="x-lg"></gov-icon>
-		Podmínka
-	</gov-form-message>
-	<gov-form-message slot="bottom" color="success" size="m">
-		<gov-icon slot="icon" name="check-lg"></gov-icon>
-		Podmínka
-	</gov-form-message>
-	<gov-form-message slot="bottom" color="error" size="m">
-		<gov-icon slot="icon" name="x-lg"></gov-icon>
-		Podmínka
-	</gov-form-message>
-	<gov-form-message slot="bottom" color="success" size="m">
-		<gov-icon slot="icon" name="check-lg"></gov-icon>
-		Podmínka
-	</gov-form-message>
-</gov-form-control>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2>Textarea</h2>
-<h3>Default</h3>
-<gov-form-control type="input">
-	<gov-form-label size="xs" slot="top">Label of textarea</gov-form-label>
-	<gov-form-group>
-		<gov-form-input size="xs" multiline rows="3" name="test-me" placeholder="Placeholder">
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
-	<gov-form-group>
-		<gov-form-input size="s" multiline rows="3" name="test-me" placeholder="Placeholder">
-			<gov-icon slot="icon-start" name="geo-alt-fill"></gov-icon>
-			<gov-icon slot="icon-end" name="geo-alt-fill"></gov-icon>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<gov-form-control type="input">
-	<gov-form-label size="m" slot="top">Label of textarea</gov-form-label>
-	<gov-form-group>
-		<gov-form-input size="m" multiline rows="3" name="test-me" placeholder="Placeholder">
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<gov-form-control type="input">
-	<gov-form-label size="l" slot="top">Label of textarea</gov-form-label>
-	<gov-form-group>
-		<gov-form-input size="l" multiline rows="3" name="test-me" placeholder="Placeholder">
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<gov-form-control type="input">
-	<gov-form-label size="xl" slot="top">Label of textarea</gov-form-label>
-	<gov-form-group>
-		<gov-form-input size="xl" multiline rows="3" name="test-me" placeholder="Placeholder" required>
-		</gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Invalid</h3>
-<gov-form-control type="input">
-	<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
-	<gov-form-group>
-		<gov-form-input size="m" required multiline rows="3" name="test-me" value="Value of textarea" invalid="TRUE"></gov-form-input>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-
-<h3>Disabled</h3>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
-	<gov-form-group>
-		<gov-form-input size="m" multiline rows="3" name="test-me" disabled required value="Value of textarea"></gov-form-input>
-	</gov-form-group>
-</gov-form-control>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2>Date & Time input (nativní)</h2>
-<gov-form-input size="xs" placeholder="Co hledáte" input-type="datetime-local"></gov-form-input>
-<br>
-<gov-form-input size="s" placeholder="Co hledáte" input-type="date"></gov-form-input>
-<br>
-<gov-form-input size="m" placeholder="Co hledáte" input-type="datetime-local"></gov-form-input>
-<br>
-<gov-form-input size="l" placeholder="Co hledáte" input-type="date"></gov-form-input>
-<br>
-<gov-form-input size="xl" placeholder="Co hledáte" input-type="time"></gov-form-input>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2>Search</h2>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-search name="test-me-c" value="me" size="s" color="primary">
-			<gov-form-input slot="input" name="test-me" size="s" placeholder="Co hledáte"></gov-form-input>
-			<gov-button slot="button" size="xs" color="primary" type="solid">
-				Hledat
-			</gov-button>
-		</gov-form-search>
-	</gov-form-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-search name="test-me-c" value="me" checked size="m" color="primary">
-			<gov-form-input slot="input" size="m" name="test-me" placeholder="Co hledáte"></gov-form-input>
-			<gov-button slot="button" color="primary" size="s" type="solid">
-				Hledat
-			</gov-button>
-		</gov-form-search>
-	</gov-form-group>
-</gov-form-control>
-<br>
-<gov-form-search name="test-me-d" checked size="m" color="neutral">
-	<gov-form-control>
-		<gov-form-group>
-			<gov-form-input slot="input" size="m" name="test-me-d" placeholder="Co hledáte"></gov-form-input>
-		</gov-form-group>
-	</gov-form-control>
-	<gov-button slot="button" color="primary" size="s" type="solid">
-		<gov-icon slot="icon-start" name="search"></gov-icon>
-	</gov-button>
-</gov-form-search>
-<br>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-search name="test-me-c" value="me" size="l" color="neutral">
-			<gov-form-input slot="input" name="test-me" size="l" placeholder="Co hledáte"></gov-form-input>
-			<gov-button slot="button-erase" size="m" color="neutral" type="base">
-				<gov-icon slot="icon-start" name="x"></gov-icon>
-			</gov-button>
-			<gov-button slot="button" size="m" color="neutral" type="solid">
-				<gov-icon slot="icon-start" name="search"></gov-icon>
-			</gov-button>
-		</gov-form-search>
-	</gov-form-group>
-</gov-form-control>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2>Autocomplete</h2>
-<gov-form-control>
-	<gov-form-label slot="top" size="xs">Label of autocomplete</gov-form-label>
-	<gov-form-group>
-		<gov-form-autocomplete placeholder="Placeholder autcomplete" size="xs">
-			<gov-icon name="search" slot="icon-end" />
-		</gov-form-autocomplete>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label slot="top" size="s">Label of autocomplete</gov-form-label>
-	<gov-form-group>
-		<gov-form-autocomplete placeholder="Placeholder autcomplete" size="s" invalid="true" required="true">
-			<gov-icon name="search" slot="icon-end" />
-		</gov-form-autocomplete>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="s">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label slot="top" size="m">Label of autocomplete</gov-form-label>
-	<gov-form-group>
-		<gov-form-autocomplete placeholder="Placeholder autcomplete" size="m" success="true" required="true">
-			<gov-icon name="search" slot="icon-end" />
-		</gov-form-autocomplete>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label slot="top" size="l" disabled="1">Label of autocomplete</gov-form-label>
-	<gov-form-group>
-		<gov-form-autocomplete placeholder="Placeholder autcomplete" size="l" disabled="true" required>
-			<gov-icon name="search" slot="icon-end" />
-		</gov-form-autocomplete>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label slot="top" size="xl">Label of autocomplete</gov-form-label>
-	<gov-form-group>
-		<gov-form-autocomplete placeholder="Placeholder autcomplete" size="xl" invalid="true" required="true">
-			<gov-icon name="search" slot="icon-end" />
-		</gov-form-autocomplete>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="xl">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2>File</h2>
-<h3>Default</h3>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Přidat přílohu</gov-form-label>
-	<gov-form-group>
-		<gov-form-file size="m" id="test-me-ujo" display-attachments="true" multiple accept=".pdf,.jpg,.png,.jpeg" max-file-size="616448" required="true">
-			<p>
-				<gov-button color="primary" type="outlined" size="m" tabindex="-1">
-					<gov-icon type="components" name="search"></gov-icon>
-					Nahrát soubor ze zařízení
-				</gov-button>
-			</p>
-			<p class="gov-form-file__note">
-				Podporované formáty XML, PDF, DOC
-			</p>
-		</gov-form-file>
-	</gov-form-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Přidat přílohu</gov-form-label>
-	<gov-form-group>
-		<gov-form-file name="test-me-c" disabled required="true">
-			<p aria-hidden="true">
-				<gov-button color="primary" type="outlined" size="s" tabindex="-1" disabled>
-					<gov-icon slot="icon-start" name="upload"></gov-icon>
-					Nahrát soubor ze zařízení
-				</gov-button>
-			</p>
-			<p class="gov-form-file__note">
-				Podporované formáty XML, PDF, DOC
-			</p>
-		</gov-form-file>
-	</gov-form-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Přidat přílohu</gov-form-label>
-	<gov-form-group>
-		<gov-form-file name="test-me-c" invalid required="true">
-			<p>
-				<gov-button color="error" type="outlined" size="m" tabindex="-1">
-					<gov-icon slot="icon-start" name="upload"></gov-icon>
-					Nahrát soubor ze zařízení
-				</gov-button>
-			</p>
-		</gov-form-file>
-		<p style="margin-top: 6px;">
-			Podporované formáty XML, PDF, DOC
-		</p>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="m">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<br>
-
-<h3>Expanded</h3>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Přidat přílohu</gov-form-label>
-	<gov-form-group>
-		<gov-form-file expanded name="test-me-c" required>
-			<p>
-				Přetáhněte soubor nebo
-			</p>
-			<p>
-				<gov-button color="primary" type="outlined" size="m" tabindex="-1">
-					Nahrát ze zařízení
-				</gov-button>
-			</p>
-			<p class="gov-form-file__note">
-				Podporované formáty XML, PDF, DOC
-			</p>
-		</gov-form-file>
-	</gov-form-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Přidat přílohu</gov-form-label>
-	<gov-form-group>
-		<gov-form-file expanded name="test-me-c" disabled aria-label="Tohle je husty" required>
-			<p>
-				Přetáhněte soubor nebo
-			</p>
-			<p>
-				<gov-button disabled color="primary" type="outlined" size="m" tabindex="-1">
-					Nahrát ze zařízení
-				</gov-button>
-			</p>
-			<p class="gov-form-file__note">
-				Podporované formáty XML, PDF, DOC
-			</p>
-		</gov-form-file>
-	</gov-form-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Přidat přílohu</gov-form-label>
-	<gov-form-group>
-		<gov-form-file expanded name="test-me-c" invalid required>
-			<p>
-				Přetáhněte soubor nebo
-			</p>
-			<p>
-				<gov-button color="error" type="outlined" size="m" tabindex="-1">
-					Nahrát ze zařízení
-				</gov-button>
-			</p>
-			<p class="gov-form-file__note">
-				Podporované formáty XML, PDF, DOC
-			</p>
-		</gov-form-file>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="m">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2 id="select">Select</h2>
-<gov-form-control>
-	<gov-form-label size="xs" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="xs">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="s">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="m">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="l" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="l" required>
-			<option value="a" selected>Value A</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="xl" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="xl">
-			<option value="a" selected>Value A</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Prefix / sufix</h3>
-<gov-form-control>
-	<gov-form-label size="xs" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="xs">
-		<span slot="prefix">$</span>
-		<span slot="sufix">Kč</span>
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="s">
-		<span slot="prefix">$</span>
-		<span slot="sufix">Kč</span>
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="m">
-		<span slot="prefix">$</span>
-		<span slot="sufix">Kč</span>
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="l" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="l">
-		<span slot="prefix">$</span>
-		<span slot="sufix">Kč</span>
-			<option value="a" selected>Value A</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="xl" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="xl">
-		<span slot="prefix">$</span>
-		<span slot="sufix">Kč</span>
-			<option value="a" selected>Value A</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Success</h3>
-<gov-form-control>
-	<gov-form-label size="xs" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="xs"  success="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="s" success="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="m" success="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="l" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="l" success="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="xl" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="xl" success="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Invalid</h3>
-<gov-form-control>
-	<gov-form-label size="xs" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="xs" invalid="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="xs">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="s" invalid="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="s">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="m" invalid="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="m">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="l" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="l" invalid="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="l">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="xl" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="xl" invalid="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="xl">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-
-<h3>Disabled</h3>
-<gov-form-control>
-	<gov-form-label size="xs" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="xs" disabled>
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="s" disabled>
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="m" disabled>
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="l" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="l" disabled="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="xl" slot="top">Souhlasím</gov-form-label>
-	<gov-form-group>
-		<gov-form-select name="test-me" size="xl" disabled="true">
-			<option value="" selected>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d">Value D</option>
-		</gov-form-select>
-	</gov-form-group>
-</gov-form-control>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2>Multiselect</h2>
-<gov-form-control>
-	<gov-form-label slot="top" size="xs">Multiselect</gov-form-label>
-	<gov-form-group>
-		<gov-form-multi-select size="xs" placeholder="Placeholder" wcag-described-by="me-and-you">
-			<option value>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d" selected>Value D</option>
-			<option value="e">Value E</option>
-			<option value="f">Value F</option>
-			<option value="g">Value G</option>
-			<option value="h">Value H</option>
-			<option value="i" selected>Value I</option>
-		</gov-form-multi-select>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="neutral" size="xs">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label slot="top" size="s">Multiselect</gov-form-label>
-	<gov-form-group>
-		<gov-form-multi-select size="s" placeholder="Placeholder" wcag-described-by="me-and-you" required>
-			<option value>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d" selected>Value D</option>
-			<option value="e">Value E</option>
-			<option value="f">Value F</option>
-			<option value="g">Value G</option>
-			<option value="h">Value H</option>
-			<option value="i" selected>Value I</option>
-		</gov-form-multi-select>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="neutral" size="xs">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label slot="top" size="m">Multiselect</gov-form-label>
-	<gov-form-group>
-		<gov-form-multi-select size="m" placeholder="Placeholder" wcag-described-by="me-and-you" required invalid="true">
-			<option value>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d" selected>Value D</option>
-			<option value="e">Value E</option>
-			<option value="f">Value F</option>
-			<option value="g">Value G</option>
-			<option value="h">Value H</option>
-			<option value="i" selected>Value I</option>
-		</gov-form-multi-select>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="m">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label slot="top" size="l">Multiselect</gov-form-label>
-	<gov-form-group>
-		<gov-form-multi-select size="l" placeholder="Placeholder" wcag-described-by="me-and-you" success="true">
-			<option value>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d" selected>Value D</option>
-			<option value="e">Value E</option>
-			<option value="f">Value F</option>
-			<option value="g">Value G</option>
-			<option value="h">Value H</option>
-			<option value="i" selected>Value I</option>
-		</gov-form-multi-select>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label slot="top" size="xl">Multiselect</gov-form-label>
-	<gov-form-group>
-		<gov-form-multi-select size="xl" placeholder="Placeholder" wcag-described-by="me-and-you" disabled>
-			<option value>Placeholder</option>
-			<option value="b">Value B</option>
-			<option value="c">Value C</option>
-			<option value="d" selected>Value D</option>
-			<option value="e">Value E</option>
-			<option value="f">Value F</option>
-			<option value="g">Value G</option>
-			<option value="h">Value H</option>
-			<option value="i" selected>Value I</option>
-		</gov-form-multi-select>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="neutral" size="xl">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<h3>Prefix/sufix</h3>
-<gov-form-multi-select size="s" placeholder="Placeholder" wcag-described-by="me-and-you">
-	<span slot="prefix">$</span>
-	<span slot="sufix">Kč</span>
-	<option value>Placeholder</option>
-	<option value="b">Value B</option>
-	<option value="c">Value C</option>
-	<option value="d" selected>Value D</option>
-	<option value="e">Value E</option>
-	<option value="f">Value F</option>
-	<option value="g">Value G</option>
-	<option value="h">Value H</option>
-	<option value="i" selected>Value I</option>
-</gov-form-multi-select>
-<br>
-<gov-form-multi-select size="m" placeholder="Placeholder" wcag-described-by="me-and-you" invalid="true">
-	<span slot="prefix">$</span>
-	<span slot="sufix">Kč</span>
-	<option value>Placeholder</option>
-	<option value="b">Value B</option>
-	<option value="c">Value C</option>
-	<option value="d" selected>Value D</option>
-	<option value="e">Value E</option>
-	<option value="f">Value F</option>
-	<option value="g">Value G</option>
-	<option value="h">Value H</option>
-	<option value="i" selected>Value I</option>
-</gov-form-multi-select>
-<br>
-<gov-form-multi-select size="l" placeholder="Placeholder" wcag-described-by="me-and-you" success="true">
-	<span slot="prefix">$</span>
-	<span slot="sufix">Kč</span>
-	<option value>Placeholder</option>
-	<option value="b">Value B</option>
-	<option value="c">Value C</option>
-	<option value="d" selected>Value D</option>
-	<option value="e">Value E</option>
-	<option value="f">Value F</option>
-	<option value="g">Value G</option>
-	<option value="h">Value H</option>
-	<option value="i" selected>Value I</option>
-</gov-form-multi-select>
-<br>
-<gov-form-multi-select size="xl" placeholder="Placeholder" wcag-described-by="me-and-you" disabled>
-	<span slot="prefix">$</span>
-	<span slot="sufix">Kč</span>
-	<option value>Placeholder</option>
-	<option value="b">Value B</option>
-	<option value="c">Value C</option>
-	<option value="d" selected>Value D</option>
-	<option value="e">Value E</option>
-	<option value="f">Value F</option>
-	<option value="g">Value G</option>
-	<option value="h">Value H</option>
-	<option value="i" selected>Value I</option>
-</gov-form-multi-select>
-
-<br><br>
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2 id="checkbox">Checkbox</h2>
-<h3>Gaps</h3>
-<gov-form-control>
-	<gov-form-label size="xs" slot="top">Label of word</gov-form-label>
-	<gov-form-checkbox-group gap="xs" value='["me"]'>
-		<gov-form-checkbox indeterminate name="test-me-a" value="me" size="m" no-label>
-			<gov-form-label slot="label" class="sr-only">Option 1</gov-form-label>
-		</gov-form-checkbox>
-		<gov-form-checkbox name="test-me-a" value="me2" size="m" no-label>
-			<gov-form-label slot="label" class="sr-only">Option 2</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-checkbox-group gap="xs" value='["me", "me2"]'>
-		<gov-form-checkbox name="test-me-b" value="me" size="xs" required>
-			<gov-form-label slot="label">Option 1</gov-form-label>
-		</gov-form-checkbox>
-		<gov-form-checkbox name="test-me-b" value="me2" size="xs">
-			<gov-form-label slot="label" size="xs">Option 2</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-checkbox-group gap="xs" value='["me", "me2"]'>
-		<gov-form-checkbox name="test-me-c" value="me" size="s" required>
-			<gov-form-label slot="label">Option 1</gov-form-label>
-		</gov-form-checkbox>
-		<gov-form-checkbox name="test-me-c" value="me2" size="s">
-			<gov-form-label slot="label" size="s">Option 2</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-checkbox-group gap="xs" value='["me", "me2"]'>
-		<gov-form-checkbox name="test-me-d" value="me" size="m">
-			<gov-form-label slot="label">Option 1</gov-form-label>
-		</gov-form-checkbox>
-		<gov-form-checkbox name="test-me-d" value="me2" size="m">
-			<gov-form-label slot="label" size="m">Option 2</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-checkbox-group gap="s" value='["me"]'>
-		<gov-form-checkbox name="test-me-e" value="me" size="l">
-			<gov-form-label slot="label">Option 1</gov-form-label>
-		</gov-form-checkbox>
-		<gov-form-checkbox name="test-me-e" value="me2" size="l">
-			<gov-form-label slot="label" size="l">Option 2</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-checkbox-group gap="m" value='["me2"]'>
-		<gov-form-checkbox name="test-me-f" value="me" size="xl">
-			<gov-form-label slot="label">Option 1</gov-form-label>
-		</gov-form-checkbox>
-		<gov-form-checkbox name="test-me-f" value="me2" size="xl">
-			<gov-form-label slot="label" size="xl">Option 2</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-
-<h3>Default</h3>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-g" value="me" size="xs">
-			<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group>
-		<gov-form-checkbox name="test-me-h" value="me" size="s">
-			<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group>
-		<gov-form-checkbox name="test-me-i" value="me" size="m">
-			<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group>
-		<gov-form-checkbox name="test-me-j" value="me" size="l">
-			<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-k" value="me" size="xl">
-			<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-
-<h3>With message</h3>
-<gov-form-control>
-	<gov-form-checkbox-group>
-		<gov-form-checkbox name="test-me-l" value="me" size="xs">
-			<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-	<gov-form-message slot="bottom" size="xs">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-m" value="me" size="s">
-			<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-	<gov-form-message slot="bottom" size="s">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-n" value="me" size="m">
-			<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-	<gov-form-message slot="bottom" size="m">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-o" value="me" size="l">
-			<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-	<gov-form-message slot="bottom" size="l">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group>
-		<gov-form-checkbox name="test-me-p" value="me" size="xl">
-			<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-	<gov-form-message slot="bottom" size="xl">
-		Message
-	</gov-form-message>
-</gov-form-control>
-
-<h3>Invalid</h3>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-q" value="me" size="xs" invalid="true" required>
-			<gov-form-label slot="label" size="xs" invalid="true">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-	<gov-form-message slot="bottom" color="error" size="xs">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-r" value="me" size="s" invalid="true" required>
-			<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-	<gov-form-message slot="bottom" color="error" size="s">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-s" value="me" size="m" invalid="true">
-			<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-	<gov-form-message slot="bottom" color="error" size="m">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-t" value="me" size="l" invalid="true">
-			<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-	<gov-form-message slot="bottom" color="error" size="l">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-u" value="me" size="xl" invalid="true">
-			<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-	<gov-form-message slot="bottom" color="error" size="xl">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-
-<h3>Disabled</h3>
-<gov-form-control>
-	<gov-form-checkbox-group>
-		<gov-form-checkbox name="test-me-1" value="me" size="xs" disabled>
-			<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group>
-		<gov-form-checkbox name="test-me-2" value="me" size="s" disabled="True">
-			<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-3" value="me" size="m" disabled="TRUE">
-			<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-4" value="me" size="l" disabled="1">
-			<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-checkbox-group value='["me"]'>
-		<gov-form-checkbox name="test-me-5" value="me" size="xl" disabled="1">
-			<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>
-		</gov-form-checkbox>
-	</gov-form-checkbox-group>
-</gov-form-control>
-
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2 id="radio">Radio</h2>
-<h3>Default group</h3>
-<gov-form-control fieldset>
-	<gov-form-label legend size="xs" slot="top">Seznam skupiny</gov-form-label>
-	<gov-form-radio-group value="me">
-		<gov-form-radio name="test1" value="me" size="xs">
-			<gov-form-label slot="label" size="xs">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="test2" value="me2" size="xs">
-			<gov-form-label slot="label" size="xs">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="test3" value="me" size="s">
-			<gov-form-label slot="label" size="s">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="test4" value="me2" size="s">
-			<gov-form-label slot="label" size="s">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="test5" value="me" size="m">
-			<gov-form-label slot="label" size="m">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="test6" value="me2" size="m">
-			<gov-form-label slot="label" size="m">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="test7" value="me" size="l" required>
-			<gov-form-label slot="label" size="l">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="test8" value="me2" size="l" required>
-			<gov-form-label slot="label" size="l">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="test9" value="me" size="xl">
-			<gov-form-label slot="label" size="xl">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="test10" value="me2" size="xl">
-			<gov-form-label slot="label" size="xl">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-</gov-form-control>
-
-<h3>With message</h3>
-<gov-form-control fieldset>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="message1" value="me" size="xs">
-			<gov-form-label slot="label" size="xs">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="message2" value="me2" size="xs">
-			<gov-form-label slot="label" size="xs">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-	<gov-form-message slot="bottom" size="xs">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="message3" value="me" size="s">
-			<gov-form-label slot="label" size="s">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="message4" value="me2" size="s">
-			<gov-form-label slot="label" size="s">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-	<gov-form-message slot="bottom" size="s">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="message5" value="me" size="m">
-			<gov-form-label slot="label" size="m">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="message6" value="me2" size="m">
-			<gov-form-label slot="label" size="m">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-	<gov-form-message slot="bottom" size="m">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="message7" value="me" size="l">
-			<gov-form-label slot="label" size="l">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="message8" value="me2" size="l">
-			<gov-form-label slot="label" size="l">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-	<gov-form-message slot="bottom" size="l">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="message9" value="me" size="xl">
-			<gov-form-label slot="label" size="xl">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="message10" value="me2" size="xl">
-			<gov-form-label slot="label" size="xl">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-	<gov-form-message slot="bottom" size="xl">
-		Message
-	</gov-form-message>
-</gov-form-control>
-
-<h3>Invalid</h3>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="invalid1" value="me" size="xs" invalid="true">
-			<gov-form-label slot="label" size="xs">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="invalid1" value="me2" size="xs" invalid="true">
-			<gov-form-label slot="label" size="xs">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-	<gov-form-message slot="bottom" color="error" size="xs">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="invalid2" value="me" size="s" invalid="true" required>
-			<gov-form-label slot="label" size="s">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="invalid2" value="me2" size="s" invalid="true" required>
-			<gov-form-label slot="label" size="s">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-	<gov-form-message slot="bottom" color="error" size="s">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="invalid3" value="me" size="m" invalid="true" required>
-			<gov-form-label slot="label" size="m">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="invalid3" value="me2" size="m" invalid="true" required>
-			<gov-form-label slot="label" size="m">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-	<gov-form-message slot="bottom" color="error" size="m">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="invalid4" value="me" size="l" invalid="true">
-			<gov-form-label slot="label" size="l">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="invalid4" value="me2" size="l" invalid="true">
-			<gov-form-label slot="label" size="l">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-	<gov-form-message slot="bottom" color="error" size="l">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="invalid5" value="me" size="xl" invalid="true">
-			<gov-form-label slot="label" size="xl">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="invalid5" value="me2" size="xl" invalid="true">
-			<gov-form-label slot="label" size="xl">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-	<gov-form-message slot="bottom" color="error" size="xl">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-
-<h3>Disabled</h3>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="disabled1" value="me" size="xs" disabled>
-			<gov-form-label slot="label" size="xs">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="disabled1" value="me2" size="xs" disabled>
-			<gov-form-label slot="label" size="xs">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="disabled2" value="me" size="s" disabled="true">
-			<gov-form-label slot="label" size="s">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="disabled2" value="me2" size="s" disabled="true">
-			<gov-form-label slot="label" size="s">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="disabled3" value="me" size="m" disabled="true">
-			<gov-form-label slot="label" size="m">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="disabled3" value="me2" size="m" disabled="true">
-			<gov-form-label slot="label" size="m">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="disabled4" value="me" size="l" disabled="true">
-			<gov-form-label slot="label" size="l">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="disabled4" value="me2" size="l" disabled="true">
-			<gov-form-label slot="label" size="l">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-</gov-form-control>
-<br>
-<gov-form-control>
-	<gov-form-radio-group value="me2">
-		<gov-form-radio name="disabled5" value="me" size="xl" disabled="true">
-			<gov-form-label slot="label" size="xl">Value 1</gov-form-label>
-		</gov-form-radio>
-		<gov-form-radio name="disabled5" value="me2" size="xl" disabled="true">
-			<gov-form-label slot="label" size="xl">Value 2</gov-form-label>
-		</gov-form-radio>
-	</gov-form-radio-group>
-</gov-form-control>
-
-
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2 id="switch">Switch</h2>
-<h3>Default</h3>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="xs" checked>
-			<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="s" checked>
-			<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="m" checked>
-			<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="l" checked>
-			<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="xl" checked>
-			<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>With message</h3>
-<gov-form-control size="xs" type="switch">
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="xs" checked>
-			<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-	<gov-form-message slot="bottom" size="xs">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control size="s" type="switch">
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="s" checked>
-			<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-	<gov-form-message slot="bottom" size="s">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control size="m" type="switch">
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="m" checked>
-			<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-	<gov-form-message slot="bottom" size="m">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control size="l" type="switch">
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="l" checked>
-			<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-	<gov-form-message slot="bottom" size="l">
-		Message
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control size="xl" type="switch">
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="xl" checked>
-			<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-	<gov-form-message slot="bottom" size="xl">
-		Message
-	</gov-form-message>
-</gov-form-control>
-
-<h3>With label</h3>
-<gov-form-control>
-	<gov-form-label size="xs" slot="top">Label of toggle</gov-form-label>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="xs" checked>
-			<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="s" slot="top">Label of toggle</gov-form-label>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="s" checked>
-			<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="m" slot="top">Label of toggle</gov-form-label>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="m" checked>
-			<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="l" slot="top">Label of toggle</gov-form-label>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="l" checked>
-			<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="xl" slot="top">Label of toggle</gov-form-label>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="xl" checked>
-			<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Without label</h3>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="xs" checked></gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="s" checked></gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="m" checked></gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="l" checked></gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="xl" checked></gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Disabled</h3>
-<gov-form-control type="switch">
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="xs" disabled>
-			<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="switch">
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="s" disabled="true">
-			<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="switch">
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="m" checked disabled="true">
-			<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="switch">
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="l" checked disabled="true">
-			<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control type="switch">
-	<gov-form-group>
-		<gov-form-switch name="test-me" value="me" size="xl" checked disabled="true">
-			<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>Invalid</h3>
-<gov-form-control size="xs" type="switch">
-	<gov-form-group>
-		<gov-form-switch invalid name="test-me" value="me" size="xs" invalid="True">
-			<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="xs">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control size="s" type="switch">
-	<gov-form-group>
-		<gov-form-switch invalid name="test-me" value="me" size="s" invalid="TRUE">
-			<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="s">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control size="m" type="switch">
-	<gov-form-group>
-		<gov-form-switch invalid name="test-me" value="me" size="m" invalid="true" checked>
-			<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="m">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control size="l" type="switch">
-	<gov-form-group>
-		<gov-form-switch invalid name="test-me" value="me" size="l" invalid="1" checked>
-			<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="l">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<gov-form-control size="xl" type="switch">
-	<gov-form-group>
-		<gov-form-switch invalid name="test-me" value="me" size="xl" invalid="1" checked>
-			<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>
-		</gov-form-switch>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="xl">
-		<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-		Required
-	</gov-form-message>
-</gov-form-control>
-<h2 id="switch">Theme switch</h2>
-<gov-theme-switch size="xs" label-light="Světloulinký" label-dark="Tmavoulinký" display-label="true"></gov-theme-switch>
-<br>
-<gov-theme-switch size="s" label-light="Světloučký" label-dark="Tmavoučký" display-label="true"></gov-theme-switch>
-<br>
-<gov-theme-switch size="m" label-light="Light" label-dark="Dark" display-label="true"></gov-theme-switch>
-<br>
-<gov-theme-switch size="l" display-label="true"></gov-theme-switch>
-<br>
-<gov-theme-switch size="xl" display-label="true"></gov-theme-switch>
-
-
-<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
-
-
-<h2 id="range">Range</h2>
-<h3>S</h3>
-<gov-form-control>
-	<gov-form-label size="s" for="range1">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="s" min="0" max="100" step="25" value="50" name="range1" tooltip list-identifier="list2">
-			<div role="listbox" id="list2" slot="datalist">
-				<span role="listitem" data-value="0">Option</span>
-				<span role="listitem" data-value="25">Option</span>
-				<span role="listitem" data-value="50">Option</span>
-				<span role="listitem" data-value="75">Option</span>
-				<span role="listitem" data-value="100">Option</span>
-			</div>
-		</gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="s" for="range2">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="s" min="0" max="100" step="25" value="50" name="range2" list-identifier="list3" input>
-			<div role="listbox" id="list3" slot="datalist" data-list>
-				<span role="listitem" data-value="0">Option</span>
-				<span role="listitem" data-value="25">Option</span>
-				<span role="listitem" data-value="50">Option</span>
-				<span role="listitem" data-value="75">Option</span>
-				<span role="listitem" data-value="100">Option</span>
-			</div>
-		</gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>M</h3>
-<gov-form-control>
-	<gov-form-label size="m" for="range3">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="m" min="0" max="100" step="5" value="30" name="range3" tooltip list-identifier="list2">
-			<div role="listbox" id="list2" slot="datalist">
-				<span role="listitem" data-value="0">Option</span>
-				<span role="listitem" data-value="25">Option</span>
-				<span role="listitem" data-value="50">Option</span>
-				<span role="listitem" data-value="75">Option</span>
-				<span role="listitem" data-value="100">Option</span>
-			</div>
-		</gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="m" for="range4">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="m" min="0" max="100" step="5" value="30" name="range4" list-identifier="list3" input>
-			<div role="listbox" id="list3" slot="datalist" data-vertical="true">
-				<span role="listitem" data-value="0">Option</span>
-				<span role="listitem" data-value="25">Option</span>
-				<span role="listitem" data-value="50">Option</span>
-				<span role="listitem" data-value="75">Option</span>
-				<span role="listitem" data-value="100">Option</span>
-			</div>
-		</gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-
-<h3>L</h3>
-<gov-form-control>
-	<gov-form-label size="l" for="range5">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="l" min="0" max="100" value="84" name="range5" tooltip list-identifier="list2">
-			<div role="listbox" id="list2" slot="datalist">
-				<span role="listitem" data-value="0">Option</span>
-				<span role="listitem" data-value="25">Option</span>
-				<span role="listitem" data-value="50">Option</span>
-				<span role="listitem" data-value="75">Option</span>
-				<span role="listitem" data-value="100">Option</span>
-			</div>
-		</gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-<gov-form-control>
-	<gov-form-label size="l" for="range6">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="l" min="0" max="100" value="84" name="range6" list-identifier="list3" input>
-			<div role="listbox" id="list3" slot="datalist" data-vertical="1">
-				<span role="listitem" data-value="0">Option</span>
-				<span role="listitem" data-value="25">Option</span>
-				<span role="listitem" data-value="50">Option</span>
-				<span role="listitem" data-value="75">Option</span>
-				<span role="listitem" data-value="100">Option</span>
-			</div>
-		</gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-
-<br><br>
-<gov-form-range size="m" min="10" max="150" step="10" value="80"></gov-form-range>
-
-<gov-form-control>
-	<gov-form-label size="m" for="range7">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="m" min="1000" max="15000" step="1000" value="1000" name="range7" tooltip></gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-
-<gov-form-control>
-	<gov-form-label size="m" for="range8">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="m" min="10" max="150" step="10" value="100" name="range8" tooltip>
-			<p slot="prefix">Min</p>
-			<p slot="sufix">Max</p>
-		</gov-form-range>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="neutral" size="s">
-		Message
-	</gov-form-message>
-</gov-form-control>
-
-<gov-form-control>
-	<gov-form-label size="m" for="range9">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="m" min="0" max="100" step="25" value="50" name="range9" tooltip list-identifier="list">
-			<div role="listbox" id="list" slot="datalist" data-vertical>
-				<span role="listitem" data-value="0">Option</span>
-				<span role="listitem" data-value="25">Option</span>
-				<span role="listitem" data-value="50">Option</span>
-				<span role="listitem" data-value="75">Option</span>
-				<span role="listitem" data-value="100">Option</span>
-			</div>
-		</gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-
-<gov-form-control>
-	<gov-form-label size="m" for="range10">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="m" min="0" max="100" step="25" value="50" name="range10" tooltip list-identifier="list2">
-			<div role="listbox" id="list2" slot="datalist">
-				<span role="listitem" data-value="0">Option</span>
-				<span role="listitem" data-value="25">Option</span>
-				<span role="listitem" data-value="50">Option</span>
-				<span role="listitem" data-value="75">Option</span>
-				<span role="listitem" data-value="100">Option</span>
-			</div>
-		</gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-
-<gov-form-control>
-	<gov-form-label size="m" for="range11">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="m" min="10" max="150" step="10" value="100" name="range11" input></gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-
-<gov-form-control>
-	<gov-form-label size="m" for="range12">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="m" min="0" max="100" step="25" value="50" name="range12" list-identifier="list3" input>
-			<div role="listbox" id="list3" slot="datalist" data-vertical>
-				<span role="listitem" data-value="0">Option</span>
-				<span role="listitem" data-value="25">Option</span>
-				<span role="listitem" data-value="50">Option</span>
-				<span role="listitem" data-value="75">Option</span>
-				<span role="listitem" data-value="100">Option</span>
-			</div>
-		</gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-
-<gov-form-control>
-	<gov-form-label size="m" for="range13">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="m" min="0" max="100" step="25" value="50" name="range13" list-identifier="list4" input invalid="true">
-			<div role="listbox" id="list4" slot="datalist">
-				<span role="listitem" data-value="0">Option</span>
-				<span role="listitem" data-value="25">Option</span>
-				<span role="listitem" data-value="50">Option</span>
-				<span role="listitem" data-value="75">Option</span>
-				<span role="listitem" data-value="100">Option</span>
-			</div>
-		</gov-form-range>
-	</gov-form-group>
-	<gov-form-message slot="bottom" color="error" size="s">
-		<gov-icon slot="icon" name="exclamation-lg"></gov-icon>
-		Message
-	</gov-form-message>
-</gov-form-control>
-
-<gov-form-control>
-	<gov-form-label size="m" for="range14">Label</gov-form-label>
-	<gov-form-group>
-		<gov-form-range size="m" min="0" max="100" step="25" value="50" name="range14" list-identifier="list4" tooltip input disabled="true">
-			<div role="listbox" id="list4" slot="datalist">
-				<span role="listitem" data-value="0">Option</span>
-				<span role="listitem" data-value="25">Option</span>
-				<span role="listitem" data-value="50">Option</span>
-				<span role="listitem" data-value="75">Option</span>
-				<span role="listitem" data-value="100">Option</span>
-			</div>
-		</gov-form-range>
-	</gov-form-group>
-</gov-form-control>
-		`;
-    }
-}
-if (customElements.get('forms-page') === undefined) {
-    customElements.define('forms-page', FormsPage);
-}
-//# sourceMappingURL=Forms.js.map