@gov-design-system-ce/components 0.0.36 → 0.0.37

package/dist/collection/pages/Forms.js

@@ -32,11 +32,17 @@ class FormsPage extends HTMLElement {
       setTimeout(() => {
         const po = document.getElementById('bagr');
         const ba = document.getElementById('ba');
+        const na = document.getElementById('kaprWWWWWW');
         if (ba) {
           ba.addEventListener('gov-change', function (e) {
             console.log(e);
           });
         }
+        if (na) {
+          na.addEventListener('gov-blur', function (e) {
+            console.log(e);
+          });
+        }
         if (po) {
           po.addEventListener('gov-select', function (e) {
             console.log(e);
@@ -59,7 +65,7 @@ class FormsPage extends HTMLElement {
 			<h2>
 				Samostatné použití
 			</h2>
-			<gov-form-input placeholder="Co hledáte">
+			<gov-form-input placeholder="Co hledáte" variant="primary">
 				<gov-icon slot="right-icon" name="info"></gov-icon>
 			</gov-form-input>
 			<br>
@@ -101,6 +107,9 @@ class FormsPage extends HTMLElement {
 			</gov-form-switch>
 
 
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>
 				Date & Time input (nativní)
 			</h2>
@@ -110,10 +119,14 @@ class FormsPage extends HTMLElement {
 			<br>
 			<gov-form-input size="xl" placeholder="Co hledáte" input-type="time"></gov-form-input>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Search</h2>
 			<gov-form-control>
 				<gov-form-group>
-					<gov-form-search name="test-me-c" value="me" checked>
+					<gov-form-search name="test-me-c" value="me" variant="secondary">
 						<gov-form-input slot="input" id="kapr" name="test-me" size="m" placeholder="Co hledáte"></gov-form-input>
 						<gov-button slot="button" variant="primary" size="s">
 							<gov-icon slot="left-icon" name="search"></gov-icon>
@@ -124,7 +137,7 @@ class FormsPage extends HTMLElement {
 			<br>
 			<gov-form-control>
 				<gov-form-group>
-					<gov-form-search name="test-me-c" value="me" checked>
+					<gov-form-search name="test-me-c" value="me" variant="primary">
 						<gov-form-input slot="input" id="kapr" name="test-me" size="l" placeholder="Co hledáte"></gov-form-input>
 						<gov-button slot="button" variant="primary" size="m">
 							Hledat
@@ -144,13 +157,17 @@ class FormsPage extends HTMLElement {
 				</gov-form-group>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>File</h2>
 			<div class="container-view">
 			<h3>Normal</h3>
 				<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" expanded accept="image/*" max-file-size="1024">
+						<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
 							<p>
 								<gov-button variant="primary" type="outlined" tabindex="-1">
 									Nahrát soubor ze zařízení
@@ -163,9 +180,8 @@ class FormsPage extends HTMLElement {
 					</gov-form-group>
 				</gov-form-control>
 				<br>
-
 				<gov-form-control>
-					<gov-form-label size="s" slot="top">Přidat přílohu 22 *</gov-form-label>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
 					<gov-form-group>
 						<gov-form-file name="test-me-c">
 							<p aria-hidden="true">
@@ -181,11 +197,10 @@ class FormsPage extends HTMLElement {
 					</gov-form-group>
 				</gov-form-control>
 				<br>
-
-				<gov-form-control invalid>
+				<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">
+						<gov-form-file name="test-me-c" invalid>
 							<p>
 								<gov-button variant="primary" type="outlined">
 									<gov-icon slot="left-icon" name="upload"></gov-icon>
@@ -209,7 +224,7 @@ class FormsPage extends HTMLElement {
 					<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">
-							<p class="gov-color--secondary-800">
+							<p>
 								Přetáhněte soubor nebo
 							</p>
 							<p>
@@ -224,12 +239,11 @@ class FormsPage extends HTMLElement {
 					</gov-form-group>
 				</gov-form-control>
 				<br>
-
 				<gov-form-control disabled>
 					<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">
-							<p class="gov-color--secondary-800">
+						<gov-form-file expanded name="test-me-c" disabled>
+							<p>
 								Přetáhněte soubor nebo
 							</p>
 							<p>
@@ -244,12 +258,11 @@ class FormsPage extends HTMLElement {
 					</gov-form-group>
 				</gov-form-control>
 				<br>
-
 				<gov-form-control invalid>
 					<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">
-							<p class="gov-color--secondary-800">
+						<gov-form-file expanded name="test-me-c" invalid>
+							<p>
 								Přetáhněte soubor nebo
 							</p>
 							<p>
@@ -270,6 +283,10 @@ class FormsPage extends HTMLElement {
 				<br>
 			</div>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Multiselect</h2>
 			<gov-form-control>
 				<gov-form-label slot="top">Multiselect</gov-form-label>
@@ -292,17 +309,43 @@ class FormsPage extends HTMLElement {
 				</gov-form-message>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Autocomplete</h2>
 			<gov-form-control>
 				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
 				<gov-form-group>
-					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr"></gov-form-autocomplete>
+					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control>
+				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
+				<gov-form-group>
+					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr" invalid="true">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
 					<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">Label of autocomplete</gov-form-label>
+				<gov-form-group>
+					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr" disabled="true">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
+				</gov-form-group>
+			</gov-form-control>
+
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
 
 			<h2>Textarea</h2>
 			<h3>
@@ -314,21 +357,23 @@ class FormsPage extends HTMLElement {
 					<gov-form-input multiline rows="3" name="test-me" placeholder="Placeholder"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>
-			<gov-form-control invalid="TRUE" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
 				<gov-form-group>
-					<gov-form-input required multiline rows="3" name="test-me" value="Value of textarea"></gov-form-input>
+					<gov-form-input required multiline rows="3" name="test-me" value="Value of textarea" invalid="TRUE"></gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
 					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
+
 			<h3>
-				Disabled DDD
+				Disabled
 			</h3>
 			<gov-form-control id="metro2">
 				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
@@ -337,58 +382,61 @@ class FormsPage extends HTMLElement {
 				</gov-form-group>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Checkbox</h2>
 			<h3>
 				Gaps
 			</h3>
-
-			<gov-form-control size="xs">
+			<gov-form-control>
 				<gov-form-label size="xs" slot="top">Label of word</gov-form-label>
 				<gov-form-group gap="2xs">
-					<gov-form-checkbox name="test-me-c" value="me" checked></gov-form-checkbox>
-					<gov-form-checkbox name="test-me-c" value="me" checked></gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked></gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked></gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control size="xs">
+			<gov-form-control>
 				<gov-form-group gap="2xs">
-					<gov-form-checkbox name="test-me-c" value="me" required checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" required checked>
 						<gov-form-label slot="label">Option 1</gov-form-label>
 					</gov-form-checkbox>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked>
 						<gov-form-label slot="label">Option 2</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control size="s">
+			<gov-form-control>
 				<gov-form-group gap="xs">
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="s" checked>
 						<gov-form-label slot="label">Option 1</gov-form-label>
 					</gov-form-checkbox>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="s" checked>
 						<gov-form-label slot="label">Option 2</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-group gap="s">
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked>
 						<gov-form-label slot="label">Option 1</gov-form-label>
 					</gov-form-checkbox>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked>
 						<gov-form-label slot="label">Option 2</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-group gap="m">
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="l" checked>
 						<gov-form-label slot="label">Option 1</gov-form-label>
 					</gov-form-checkbox>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="l" checked>
 						<gov-form-label slot="label">Option 2</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
@@ -397,40 +445,41 @@ class FormsPage extends HTMLElement {
 			<h3>
 				Default
 			</h3>
-			<gov-form-control size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="s" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="l" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>
-			<gov-form-control invalid="true" size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" checked invalid="true">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
@@ -439,9 +488,9 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="s" checked invalid="true">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
@@ -450,9 +499,9 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked invalid="true">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
@@ -461,96 +510,101 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			
+
 			<h3>
 				Disabled
 			</h3>
-			<gov-form-control disabled size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me">
+					<gov-form-checkbox name="test-me-c" value="me" size="xs" disabled>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="True" size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me">
+					<gov-form-checkbox name="test-me-c" value="me" size="s" disabled="True">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="TRUE" size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="m" checked disabled="TRUE">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="1" size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-checkbox name="test-me-c" value="me" checked>
+					<gov-form-checkbox name="test-me-c" value="me" size="l" checked disabled="1">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-checkbox>
 				</gov-form-group>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Radio</h2>
 			<h3>
 				Default group
 			</h3>
-			<gov-form-control size="xs" fieldset>
+			<gov-form-control fieldset>
 					<gov-form-label legend size="s" slot="top">Seznam skupiny</gov-form-label>
 				<gov-form-group>
-					<gov-form-radio name="test1" value="me" >
+					<gov-form-radio name="test1" value="me" size="xs">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test1" value="me2" checked>
+					<gov-form-radio name="test1" value="me2" size="xs" checked>
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test2" value="me" >
+					<gov-form-radio name="test2" value="me" size="s">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test2" value="me2" checked>
+					<gov-form-radio name="test2" value="me2" size="s" checked>
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test3" value="me" >
+					<gov-form-radio name="test3" value="me" size="m">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test3" value="me2" checked>
+					<gov-form-radio name="test3" value="me2" size="m" checked>
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test4" value="me" >
+					<gov-form-radio name="test4" value="me" size="l">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test4" value="me2" checked>
+					<gov-form-radio name="test4" value="me2" size="l" checked>
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>
-			<gov-form-control invalid="true" size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test5" value="me" >
+					<gov-form-radio name="test5" value="me" size="xs" invalid="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test5" value="me2" checked>
+					<gov-form-radio name="test5" value="me2" size="xs" checked invalid="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
@@ -560,12 +614,12 @@ class FormsPage extends HTMLElement {
 				</gov-form-message>
 			</gov-form-control>
 			<br>
-			<gov-form-control invalid="true" size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test6" value="me" >
+					<gov-form-radio name="test6" value="me" size="s" invalid="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test6" value="me2" checked>
+					<gov-form-radio name="test6" value="me2" size="s" checked invalid="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
@@ -575,12 +629,12 @@ class FormsPage extends HTMLElement {
 				</gov-form-message>
 			</gov-form-control>
 			<br>
-			<gov-form-control invalid="true" size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test7" value="me" >
+					<gov-form-radio name="test7" value="me" size="m" invalid="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test7" value="me2" checked>
+					<gov-form-radio name="test7" value="me2" size="m" checked invalid="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
@@ -590,12 +644,12 @@ class FormsPage extends HTMLElement {
 				</gov-form-message>
 			</gov-form-control>
 			<br>
-			<gov-form-control invalid="true" size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test8" value="me" >
+					<gov-form-radio name="test8" value="me" size="l" invalid="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test8" value="me2" checked>
+					<gov-form-radio name="test8" value="me2" size="l" checked invalid="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
@@ -604,61 +658,66 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
+
 			<h3>
 				Disabled
 			</h3>
-			<gov-form-control size="xs" disabled>
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test9" value="me" >
+					<gov-form-radio name="test9" value="me" size="xs" disabled>
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test9" value="me2" checked>
+					<gov-form-radio name="test9" value="me2" size="xs" checked disabled>
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control disabled="true" size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test10" value="me" >
+					<gov-form-radio name="test10" value="me" size="s" disabled="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test10" value="me2" checked>
+					<gov-form-radio name="test10" value="me2" size="s" checked disabled="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control disabled="true" size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test11" value="me" >
+					<gov-form-radio name="test11" value="me" size="m" disabled="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test11" value="me2" checked>
+					<gov-form-radio name="test11" value="me2" size="m" checked disabled="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 			<br>
-			<gov-form-control disabled="true" size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-radio name="test12" value="me" >
+					<gov-form-radio name="test12" value="me" size="l" disabled="true">
 						<gov-form-label slot="label">Value 1</gov-form-label>
 					</gov-form-radio>
-					<gov-form-radio name="test12" value="me2" checked>
+					<gov-form-radio name="test12" value="me2" size="l" checked disabled="true">
 						<gov-form-label slot="label">Value 2</gov-form-label>
 					</gov-form-radio>
 				</gov-form-group>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Select</h2>
 			<h3>
 				Default
 			</h3>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<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>
@@ -666,10 +725,10 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="l">
 						<option value="a" selected>Value A</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -677,10 +736,10 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="xl">
+			<gov-form-control>
 				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<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>
@@ -688,16 +747,16 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Prefix / sufix
 			</h3>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<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>
@@ -705,13 +764,12 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<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>
@@ -719,13 +777,12 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<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>
@@ -733,13 +790,14 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>
-			<gov-form-control invalid="true" size="m">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<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>
@@ -751,10 +809,10 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="l">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<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>
@@ -766,10 +824,10 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="xl">
+			<gov-form-control>
 				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<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>
@@ -781,13 +839,14 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
+
 			<h3>
 				Disabled
 			</h3>
-			<gov-form-control size="m" disabled>
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<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>
@@ -795,10 +854,10 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="true" size="m">
+			<gov-form-control>
 				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<gov-form-select name="test-me" size="m" disabled="true">
 						<option value="" selected>Placeholder</option>
 						<option value="b">Value B</option>
 						<option value="c">Value C</option>
@@ -806,10 +865,10 @@ class FormsPage extends HTMLElement {
 					</gov-form-select>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="true" size="l">
+			<gov-form-control>
 				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>
-					<gov-form-select name="test-me">
+					<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>
@@ -818,153 +877,238 @@ class FormsPage extends HTMLElement {
 				</gov-form-group>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Input</h2>
 			<h3>
-				Default
+				Primary
 			</h3>
-			<gov-form-control size="m" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="m"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input 3333</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input"></gov-form-input>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="primary" size="l"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input"></gov-form-input>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="primary" size="xl"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
+
+			<h3>
+				Secondary
+			</h3>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="m"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input 3333</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="secondary" size="l"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" variant="secondary" size="xl"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
 			<h3>
 				Prefix / sufix
 			</h3>
-			<gov-form-control size="m" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder">
+					<gov-form-input type="number" id="kapr" 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 size="l" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" 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 size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" 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 size="m" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Right icon
 			</h3>
-			<gov-form-control size="m" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s">
+					<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m">
+					<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Success
 			</h3>
-			<gov-form-control success="true" size="m" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2" success="true">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2" success="true">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m"></gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control success="True" size="l" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2" success="True">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l">
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control success="1" size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2" success="1">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>
-			<gov-form-control invalid="true" size="m" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s" invalid="true"></gov-form-input>
 				</gov-form-group>
 				<gov-form-message slot="bottom" variant="error">
 					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="l" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m" invalid="true"></gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l" invalid="true">
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
@@ -973,10 +1117,10 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control invalid="true" size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl" invalid="true">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
@@ -985,34 +1129,47 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
+
 			<h3>
 				Disabled
 			</h3>
-			<gov-form-control size="m" type="input" id="metro2" disabled>
+			<gov-form-control size="m" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="s" disabled>
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="m" type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder" size="m" disabled>
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="True" size="l" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="l" disabled="True">
 						<gov-icon slot="right-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control disabled="1" size="xl" type="input" id="metro2">
+			<gov-form-control type="input" id="metro2">
 				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
 				<gov-form-group>
-					<gov-form-input id="kapr" name="test-me" value="Value of input">
+					<gov-form-input id="kapr" name="test-me" value="Value of input" size="xl" disabled="1">
 						<gov-icon slot="left-icon" name="info"></gov-icon>
 					</gov-form-input>
 				</gov-form-group>
 			</gov-form-control>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h3>
 				Password power
 			</h3>
@@ -1021,35 +1178,38 @@ class FormsPage extends HTMLElement {
 			<gov-form-password-power power="2">střední</gov-form-password-power>
 			<gov-form-password-power power="3">silné</gov-form-password-power>
 
+
+			<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
+
+
 			<h2>Switch</h2>
 			<h3>
 				Default
 			</h3>
-			<gov-form-control size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="xs" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="s" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="m" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="l" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
@@ -1058,9 +1218,9 @@ class FormsPage extends HTMLElement {
 			<h3>
 				With message
 			</h3>
-			<gov-form-control size="xs">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="xs" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
@@ -1069,9 +1229,9 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control size="s">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="s" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
@@ -1080,9 +1240,9 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control size="m">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="m" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
@@ -1091,9 +1251,9 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
-			<gov-form-control size="l">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="l" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
@@ -1102,99 +1262,102 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
+
 			<h3>
 				With label
 			</h3>
-			<gov-form-control size="xs">
+			<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" checked>
+					<gov-form-switch name="test-me" value="me" size="xs" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="s">
+			<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" checked>
+					<gov-form-switch name="test-me" value="me" size="s" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="m">
+			<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" checked>
+					<gov-form-switch name="test-me" value="me" size="m" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l">
+			<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" checked>
+					<gov-form-switch name="test-me" value="me" size="l" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Disabled
 			</h3>
-			<gov-form-control type="switch" size="xs" disabled>
+			<gov-form-control type="switch">
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me">
+					<gov-form-switch name="test-me" value="me" size="xs" disabled>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control type="switch" size="s" disabled="true">
+			<gov-form-control type="switch">
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me">
+					<gov-form-switch name="test-me" value="me" size="s" disabled="true">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control type="switch" size="m" disabled="true">
+			<gov-form-control type="switch">
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="m" checked disabled="true">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control type="switch" size="l" disabled="true">
+			<gov-form-control type="switch">
 				<gov-form-group>
-					<gov-form-switch name="test-me" value="me" checked>
+					<gov-form-switch name="test-me" value="me" size="l" checked disabled="true">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>
-			<gov-form-control size="xs" invalid="True">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
+					<gov-form-switch invalid name="test-me" value="me" size="xs" invalid="True">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="s" invalid="TRUE">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
+					<gov-form-switch invalid name="test-me" value="me" size="s" invalid="TRUE">
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="m" invalid="true">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
+					<gov-form-switch invalid name="test-me" value="me" size="m" invalid="true" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>
 			</gov-form-control>
-			<gov-form-control size="l" invalid="1">
+			<gov-form-control>
 				<gov-form-group>
-					<gov-form-switch invalid name="test-me" value="me" checked>
+					<gov-form-switch invalid name="test-me" value="me" size="l" invalid="1" checked>
 						<gov-form-label slot="label">Souhlasím</gov-form-label>
 					</gov-form-switch>
 				</gov-form-group>