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

package/dist/hydrate/index.js

@@ -5846,7 +5846,8 @@ function splitByWhitespace(string) {
   return string.split(/(\s+)/);
 }
 
-const getWindowProperty = (name) => window && property(name, window);
+const isWindow = typeof window !== "undefined";
+const getWindowProperty = (name) => isWindow && window && property(name, window);
 const config = () => {
   const defaultConfig = {
     canValidateWcagOnRender: false,
@@ -9585,7 +9586,7 @@ class AlertPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 		<h2>Alert</h2>
-		
+
 		<gov-alert variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
@@ -10086,48 +10087,72 @@ class ButtonPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 			<h1>Buttons</h1>
+
+			<h4>Dropdown</h4>
+
+			<gov-layout>
+				<gov-layout-column>
+					<div class="container-view">
+						<gov-dropdown>
+							<gov-button variant="primary" size="s">
+								Více
+							</gov-button>
+							<ul slot="list">
+								<li>
+									<gov-button variant="primary" type="base" size="s">
+										A další nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="primary" type="base" size="s">
+										A další dlouhá nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="primary" type="base" size="s">
+										A další
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+							</ul>
+						</gov-dropdown>
+					</div>
+				</gov-layout-column>
+				<gov-layout-column>
+					<div class="container-view">
+						<gov-dropdown position="right">
+							<gov-button variant="primary" size="s">
+								Více
+							</gov-button>
+							<ul slot="list">
+								<li>
+									<gov-button variant="secondary" type="base" size="s">
+										A další nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="secondary" type="base" size="s">
+										A další dlouhá nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="secondary" type="base" size="s">
+										A další
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+							</ul>
+						</gov-dropdown>
+					</div>
+				</gov-layout-column>
+			</gov-layout>
+
 			<h4>Buttons - primary (default)</h4>
-			
-			
-			<gov-button-test type="solid" variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				<gov-icon slot="left-icon" name="info"></gov-icon>
-			</gov-button-test>
-			
-			<gov-form-input size="m" placeholder="Co hledáte" input-type="datetime-local"></gov-form-input>
-			
-			
-			
-			<br/>
-			<br/>
-			<br/>
-			<br/>
-			<br/>
-			<hr/>
-			<br/>
-			<br/>
-			<br/>
-			<br/>
-			
-			<gov-control-group>
-				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				</gov-button>
-				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				</gov-button>
-				<gov-form-input multiline rows="3" name="test-me" disabled value="Value of textarea"></gov-form-input>
-				<gov-form-select size="l" name="test-me">
-					<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-button variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				</gov-button>
-			</gov-control-group>
-			
+
 			<div class="container-view">
 				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -11522,7 +11547,7 @@ class ControlGroupPage extends HTMLElement {
     this.innerHTML = `
 		<h2>Control Group</h2>
 
-		<gov-control-group bordered>
+		<gov-control-group>
 			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
 			<gov-button variant="primary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
@@ -11533,9 +11558,31 @@ class ControlGroupPage extends HTMLElement {
 			<gov-button variant="primary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 			</gov-button>
+			<gov-dropdown position="right">
+				<gov-button variant="primary" size="s">
+					Více
+				</gov-button>
+				<ul slot="list">
+					<li>
+						<gov-button variant="primary" type="base" size="s">
+							A další nabídka
+						</gov-button>
+					</li>
+					<li>
+						<gov-button variant="primary" type="base" size="s">
+							A další nabídka
+						</gov-button>
+					</li>
+					<li>
+						<gov-button variant="primary" type="base" size="s">
+							A další nabídka
+						</gov-button>
+					</li>
+				</ul>
+			</gov-dropdown>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="primary" bordered>
+		<gov-control-group variant="primary">
 			<gov-form-select name="test-me" size="m">
 				<option value="" selected>Placeholder</option>
 				<option value="b">Value B</option>
@@ -11547,7 +11594,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group bordered>
+		<gov-control-group>
 			<gov-button variant="primary" type="outlined" size="l">
 				<gov-icon slot="left-icon" name="gear"></gov-icon>
 			</gov-button>
@@ -11561,7 +11608,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="primary" bordered>
+		<gov-control-group variant="primary" no-border>
 		<gov-button variant="primary" type="outlined" size="xl">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
 			</gov-button>
@@ -11580,7 +11627,7 @@ class ControlGroupPage extends HTMLElement {
 		</gov-control-group>
 		<br><br>
 
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary" no-border>
 			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
 			<gov-button variant="primary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
@@ -11605,7 +11652,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 			<gov-button variant="primary" type="outlined" size="l">
 				<gov-icon slot="left-icon" name="gear"></gov-icon>
 			</gov-button>
@@ -11619,7 +11666,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 		<gov-button variant="primary" type="outlined" size="xl">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
 			</gov-button>
@@ -11638,7 +11685,7 @@ class ControlGroupPage extends HTMLElement {
 		</gov-control-group>
 		<br><br>
 
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="s"></gov-form-input>
 			<gov-button variant="secondary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
@@ -11651,7 +11698,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary">
+		<gov-control-group variant="secondary" no-border>
 			<gov-form-select name="test-me" size="m">
 				<option value="" selected>Placeholder</option>
 				<option value="b">Value B</option>
@@ -11663,7 +11710,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 			<gov-button variant="secondary" type="outlined" size="l">
 				<gov-icon slot="left-icon" name="gear"></gov-icon>
 			</gov-button>
@@ -11677,7 +11724,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 		<gov-button variant="secondary" type="outlined" size="xl">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
 			</gov-button>
@@ -11694,146 +11741,6 @@ class ControlGroupPage extends HTMLElement {
 				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 			</gov-button>
 		</gov-control-group>
-
-		<h2>Invalid</h2>
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group bordered invalid="true">
-				<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
-				<gov-button variant="primary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-				</gov-button>
-				<gov-button variant="primary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-				</gov-button>
-				<gov-button variant="primary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-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>
-		<br />
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group invalid="true">
-				<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-button variant="primary" type="outlined" size="m">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-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>
-		<br />
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group bordered invalid="true">
-				<gov-button variant="primary" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="gear"></gov-icon>
-				</gov-button>
-				<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
-					<gov-button variant="primary" type="outlined" size="l" tabindex="-1">
-						Nahrát soubor ze zařízení
-					</gov-button>
-				</gov-form-file>
-				<gov-button variant="primary" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-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>
-		<br />
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group bordered invalid="true">
-				<gov-button variant="primary" type="outlined" size="xl">
-					<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-				</gov-button>
-				<gov-button variant="primary" type="outlined" size="xl">
-					<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-				</gov-button>
-				<gov-form-select name="test-me" size="xl">
-					<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-button variant="primary" type="outlined" size="xl">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-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>
-
-		<h2>Disabled</h2>
-		<gov-control-group bordered disabled="true">
-			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
-			<gov-button variant="primary" type="outlined" size="s">
-				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-			</gov-button>
-			<gov-button variant="primary" type="outlined" size="s">
-				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-			</gov-button>
-			<gov-button variant="primary" type="outlined" size="s">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
-		<br />
-		<gov-control-group disabled="true">
-			<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-button variant="primary" type="outlined" size="m">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
-		<br />
-		<gov-control-group bordered disabled="true">
-			<gov-button variant="primary" type="outlined" size="l">
-				<gov-icon slot="left-icon" name="gear"></gov-icon>
-			</gov-button>
-			<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
-				<gov-button variant="primary" type="outlined" size="l" tabindex="-1">
-					Nahrát soubor ze zařízení
-				</gov-button>
-			</gov-form-file>
-			<gov-button variant="primary" type="outlined" size="l">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
-		<br />
-		<gov-control-group bordered disabled="true">
-		<gov-button variant="primary" type="outlined" size="xl">
-				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-			</gov-button>
-			<gov-button variant="primary" type="outlined" size="xl">
-				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-			</gov-button>
-			<gov-form-select name="test-me" size="xl">
-				<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-button variant="primary" type="outlined" size="xl">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
 		`;
   }
 }
@@ -14087,15 +13994,21 @@ if (customElements.get('side-nav-page') === undefined) {
 class SpacerPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-			<gov-spacer size="2xs"></gov-spacer>
-			<gov-spacer size="xs"></gov-spacer>
-			<gov-spacer size="s"></gov-spacer>
-			<gov-spacer size="m"></gov-spacer>
+			<style>
+			 gov-spacer {
+				background: lightgray;
+				margin-bottom: 10px;
+			 }
+			</style>
+			<gov-spacer size="2xs" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="xs" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="s" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="m" breakpoint="sm"></gov-spacer>
 			<gov-spacer size="l" breakpoint="sm"></gov-spacer>
-			<gov-spacer size="xl"></gov-spacer>
-			<gov-spacer size="2xl"></gov-spacer>
-			<gov-spacer size="3xl"></gov-spacer>
-			<gov-spacer size="4xl"></gov-spacer>
+			<gov-spacer size="xl" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="2xl" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="3xl" breakpoint="sm"></gov-spacer>
+			<gov-spacer size="4xl" breakpoint="sm"></gov-spacer>
 		`;
   }
 }
@@ -15973,201 +15886,30 @@ class GovContainer {
   }; }
 }
 
-pick(Sizes, ['_M', '_L', '_XL']);
-const FormControlClass = {
-  root: 'gov-form-control',
-  holder: 'gov-form-control__holder',
-  bottom: 'gov-form-control__bottom',
-};
-
-const FormInputSizes = pick(Sizes, ['_S', '_M', '_L', '_XL']);
-const FormInputVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
-var InputTypes;
-(function (InputTypes) {
-  InputTypes["COLOR"] = "color";
-  InputTypes["DATE"] = "date";
-  InputTypes["DATETIME_LOCAL"] = "datetime-local";
-  InputTypes["EMAIL"] = "email";
-  InputTypes["MONTH"] = "month";
-  InputTypes["NUMBER"] = "number";
-  InputTypes["PASSWORD"] = "password";
-  InputTypes["SEARCH"] = "search";
-  InputTypes["TEL"] = "tel";
-  InputTypes["TEXT"] = "text";
-  InputTypes["TIME"] = "time";
-  InputTypes["URL"] = "url";
-  InputTypes["WEEK"] = "week";
-})(InputTypes || (InputTypes = {}));
-var Type;
-(function (Type) {
-  Type["RESET"] = "reset";
-})(Type || (Type = {}));
-const FormInputClass = {
-  root: 'gov-form-input',
-};
-
-const FormSelectSizes = pick(Sizes, ['_M', '_L', '_XL']);
-const FormSelectVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
-const FormSelectClass = {
-  root: 'gov-form-select',
-  icon: 'gov-form-select__icon',
-};
-
-const FormMultiselectSizes = pick(Sizes, ['_M', '_L', '_XL']);
-const FormMultiselectVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
-const FormMultiSelectClass = {
-  root: 'gov-form-multi-select',
-  wrap: 'gov-form-multi-select__wrap',
-  list: 'gov-form-multi-select__list',
-  item: 'gov-form-multi-select__item',
-};
-
-const FormSwitchSizes = pick(Sizes, ['_XS', '_S', '_M', '_L']);
-const FormSwitchClass = {
-  root: 'gov-form-switch',
-  holder: 'gov-form-switch__holder',
-  input: 'gov-form-switch__input',
-  indicator: 'gov-form-switch__indicator',
-};
-
-const FormCheckboxSizes = pick(Sizes, ['_XS', '_S', '_M', '_L']);
-const FormCheckboxClass = {
-  root: 'gov-form-checkbox',
-  check: 'gov-form-checkbox__check',
-};
-
-const FormRadioSizes = pick(Sizes, ['_XS', '_S', '_M', '_L']);
-const FormRadioClass = {
-  root: 'gov-form-radio',
-  holder: 'gov-form-radio__holder',
-  input: 'gov-form-radio__input',
-  indicator: 'gov-form-radio__indicator',
-};
-
-const FormMessageVariants = pick(Variants, ['SECONDARY', 'SUCCESS', 'ERROR', 'WARNING']);
-const FormMessageClass = {
-  root: 'gov-form-message',
-  content: 'gov-form-message__content',
-  icon: 'gov-form-message__icon',
-};
-
-const FormAutocompleteSizes = pick(Sizes, ['_M', '_L', '_XL']);
-const FormAutocompleteVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
-const FormAutocompleteClass = {
-  root: 'gov-form-autocomplete',
-  list: 'gov-form-autocomplete__list',
-  item: 'gov-form-autocomplete__item',
-  empty: 'gov-form-autocomplete__item--empty',
-  loading: 'gov-form-autocomplete__item--loading',
-};
-
-pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL']);
-const FormLabelClass = {
-  root: 'gov-form-label',
-  label: 'gov-form-label__label',
-};
-
-const govForm = (govHost) => {
-  return {
-    get govHost() {
-      return govHost;
-    },
-    passAttrToControl(name, value) {
-      if (this.control) {
-        this.control.setAttribute(name, value);
-      }
-    },
-    passAttrToLabel(name, value) {
-      if (this.label) {
-        this.label.setAttribute(name, value);
-      }
-    },
-    get hasGroupChildren() {
-      if (this.control) {
-        return this.control.querySelectorAll('gov-form-group > *').length > 1;
-      }
-      return false;
-    },
-    get control() {
-      if (this.govHost.name === FormControlClass.root) {
-        return this.govHost.hostElement;
-      }
-      return this.govHost.getParent(FormControlClass.root);
-    },
-    get label() {
-      const innerLabel = this.govHost.hostElement.querySelector(`.${FormLabelClass.root}`);
-      if (innerLabel) {
-        return innerLabel;
-      }
-      if (this.control) {
-        return this.control.querySelector(`.${FormLabelClass.root}`);
-      }
-      return null;
-    },
-    get mainElementsInControl() {
-      const formElements = [
-        FormSelectClass.root,
-        FormInputClass.root,
-        FormSwitchClass.root,
-        FormCheckboxClass.root,
-        FormRadioClass.root,
-        FormMultiSelectClass.root,
-        FormAutocompleteClass.root,
-      ];
-      if (this.control) {
-        const elements = formElements.map(el => `${el}:first-of-type`).join(', ');
-        return Array.from(this.control.querySelectorAll(elements));
-      }
-      return [];
-    },
-    get messageElements() {
-      if (this.control) {
-        return Array.from(this.control.querySelectorAll(FormMessageClass.root));
-      }
-      return [];
-    },
-  };
-};
-
 pick(Variants, ['PRIMARY', 'SECONDARY']);
 const ControlGroupClass = {
   root: 'gov-control-group',
 };
 
-const govControlGroupCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-control-group{position:relative;display:flex;width:100%;align-items:center;border-radius:var(--gov-control-group-border-radius, 0.25rem);overflow:hidden}.gov-control-group .element *,.gov-control-group .gov-button .element{border:none !important;border-radius:0}.gov-control-group.bordered>*:last-child{border-right:none !important}.gov-control-group[variant=primary]{border:var(--gov-control-group-border-primary, 0.0625rem solid var(--gov-color-primary-600))}.gov-control-group[variant=primary].bordered>*{border-right:var(--gov-control-group-border-primary, 0.0625rem solid var(--gov-color-primary-600))}.gov-control-group[variant=secondary]{border:var(--gov-control-group-border-secondary, 0.0625rem solid var(--gov-color-secondary-700))}.gov-control-group[variant=secondary].bordered>*{border-right:var(--gov-control-group-border-secondary, 0.0625rem solid var(--gov-color-secondary-700))}.gov-control-group[invalid=\"\"],.gov-control-group[invalid=true i],.gov-control-group[invalid=\"1\"]{border:var(--gov-control-group-border-invalid, 0.0625rem solid var(--gov-color-error-400))}.gov-control-group[disabled=\"\"],.gov-control-group[disabled=true i],.gov-control-group[disabled=\"1\"]{border:var(--gov-control-group-border-disabled, 0.0625rem solid var(--gov-color-secondary-600));pointer-events:none}.gov-control-group[disabled=\"\"] *,.gov-control-group[disabled=true i] *,.gov-control-group[disabled=\"1\"] *{background-color:var(--gov-control-group-background-disabled, var(--gov-color-secondary-300));color:var(--gov-control-group-color-disabled, var(--gov-color-secondary-600)) !important}.gov-control-group[disabled=\"\"].bordered>*,.gov-control-group[disabled=true i].bordered>*,.gov-control-group[disabled=\"1\"].bordered>*{border-right:var(--gov-control-group-border-disabled, 0.0625rem solid var(--gov-color-secondary-600))}";
+const govControlGroupCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-control-group{position:relative;display:flex;width:100%;align-items:center;border-radius:var(--gov-control-group-border-radius, 0.25rem)}.gov-control-group .element *,.gov-control-group .gov-button .element{border:none !important;border-radius:0}.gov-control-group[variant=primary]{border:var(--gov-control-group-border-primary, 0.0625rem solid var(--gov-color-primary-600))}.gov-control-group[variant=primary]>*{border-right:var(--gov-control-group-border-primary, 0.0625rem solid var(--gov-color-primary-600))}.gov-control-group[variant=secondary]{border:var(--gov-control-group-border-secondary, 0.0625rem solid var(--gov-color-secondary-700))}.gov-control-group[variant=secondary]>*{border-right:var(--gov-control-group-border-secondary, 0.0625rem solid var(--gov-color-secondary-700))}.gov-control-group>*:last-child{border-right:none}.gov-control-group.no-border>*{border-right:none}";
 
 class GovControlGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.variant = Variants.PRIMARY;
-    this.invalid = undefined;
-    this.disabled = undefined;
-    this.isBordered = false;
+    this.noBorder = false;
     this.h = govHost(this.host);
-    this.f = govForm(this.h);
   }
   validateVariant(newValue) {
     validateProp(Variants, newValue, ControlGroupClass.root);
   }
-  watchDisabled() {
-    this.passControlAttrs();
-  }
-  passControlAttrs() {
-    this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
-    this.f.passAttrToControl("invalid", toBoolAttr(this.invalid));
-  }
-  componentWillLoad() {
-    this.watchDisabled();
-  }
   render() {
-    const bordered = this.isBordered === true ? " bordered" : "";
-    return (hAsync(Host, { class: this.h.classes(ControlGroupClass.root) + bordered, variant: this.variant, invalid: toBoolAttrIfDefined(this.invalid), disabled: this.disabled }, hAsync("slot", null)));
+    const noBorder = this.noBorder === true ? "no-border" : undefined;
+    return (hAsync(Host, { class: this.h.classes([ControlGroupClass.root, noBorder]), variant: this.variant }, hAsync("slot", null)));
   }
   get host() { return getElement(this); }
   static get watchers() { return {
-    "variant": ["validateVariant"],
-    "disabled": ["watchDisabled"],
-    "invalid": ["watchDisabled"]
+    "variant": ["validateVariant"]
   }; }
   static get style() { return govControlGroupCss; }
   static get cmpMeta() { return {
@@ -16175,9 +15917,7 @@ class GovControlGroup {
     "$tagName$": "gov-control-group",
     "$members$": {
       "variant": [1],
-      "invalid": [4],
-      "disabled": [4],
-      "isBordered": [4, "bordered"]
+      "noBorder": [4, "no-border"]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -16216,6 +15956,132 @@ class GovCookiebar {
   }; }
 }
 
+const ClickOutsideOptionsDefaults = {
+    triggerEvents: "click",
+    exclude: ""
+};
+/**
+ * Register callback function for HTMLElement to be executed when user clicks outside of element.
+ * @example
+```
+<span
+    ref={spanEl => registerClickOutside(this, spanEl, () => this.test())}>
+      Hello, World!
+</span>;
+```
+ */
+function registerClickOutside(component, element, callback, opt = ClickOutsideOptionsDefaults) {
+    const excludedNodes = getExcludedNodes(opt);
+    getTriggerEvents(opt).forEach(triggerEvent => {
+        window.addEventListener(triggerEvent, (e) => {
+            initClickOutside(e, component, element, callback, excludedNodes);
+        }, false);
+    });
+}
+function initClickOutside(event, component, element, callback, excludedNodes) {
+    const target = event.target;
+    if (!element.contains(target) && !isExcluded(target, excludedNodes)) {
+        callback.call(component);
+    }
+}
+function getTriggerEvents(opt) {
+    if (opt.triggerEvents) {
+        return opt.triggerEvents.split(",").map(e => e.trim());
+    }
+    return ["click"];
+}
+function getExcludedNodes(opt) {
+    if (opt.exclude) {
+        try {
+            return Array.from(document.querySelectorAll(opt.exclude));
+        }
+        catch (err) {
+            console.warn(`@ClickOutside: Exclude: '${opt.exclude}' will not be evaluated. Check your exclude selector syntax.`, err);
+        }
+    }
+    return;
+}
+function isExcluded(target, excudedNodes) {
+    if (target && excudedNodes) {
+        for (let excludedNode of excudedNodes) {
+            if (excludedNode.contains(target)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+var Position;
+(function (Position) {
+  Position["LEFT"] = "left";
+  Position["RIGHT"] = "right";
+})(Position || (Position = {}));
+const DropdownClass = {
+  root: 'gov-dropdown',
+  list: 'gov-dropdown__list'
+};
+
+const govDropdownCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-dropdown{position:relative}.gov-dropdown__list{position:absolute;left:0;z-index:100}.gov-dropdown ul{padding:0.25rem;border-radius:var(--gov-border-radius, 0.1875rem);background-color:var(--gov-dropdown-bg-color, var(--gov-color-neutral-white));box-shadow:var(--gov-dropdown-box-shadow, 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1))}.gov-dropdown li{margin:0;white-space:nowrap}.gov-dropdown li::before{content:none}.gov-dropdown li>*{width:100%}.gov-dropdown li>* .element{justify-content:space-between;width:100%;padding:0.5rem !important;font-weight:400 !important}.gov-dropdown[position=right] .gov-dropdown__list{right:0;left:initial}";
+
+class GovDropdown {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.govChange = createEvent(this, "gov-change", 7);
+    this.open = false;
+    this.position = Position.LEFT;
+    this.h = govHost(this.host);
+    this.listId = createID("GovDropdownList");
+    this.controlId = createID("GovDropdownControl");
+  }
+  componentWillLoad() {
+    if (this.trigger) {
+      this.trigger.setAttribute("wcag-controls", this.listId);
+      this.trigger.setAttribute("wcag-has-popup", toBoolAttr(!!this.list));
+      this.trigger.setAttribute("identifier", this.controlId);
+      this.trigger.addEventListener("gov-click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.open = !this.open;
+        this.govChange.emit({
+          component: DropdownClass.root,
+          originalEvent: e,
+          open: this.open,
+        });
+      });
+    }
+  }
+  get trigger() {
+    return this.host.querySelector(`* > ${ButtonClass.root}`);
+  }
+  get list() {
+    return this.h.getSlot("list");
+  }
+  render() {
+    return (hAsync(Host, { class: this.h.classes([DropdownClass.root]), open: this.open, position: this.position }, hAsync("slot", null), hAsync("div", { ref: el => registerClickOutside(this, el, () => this.open = false), class: DropdownClass.list, id: this.listId, "aria-labelledby": this.controlId, "aria-hidden": toBoolAttr(!this.open), hidden: !this.open }, hAsync("slot", { name: "list" }))));
+  }
+  /**
+   * Returns a clickable element instance
+   */
+  async getState() {
+    return this.open;
+  }
+  get host() { return getElement(this); }
+  static get style() { return govDropdownCss; }
+  static get cmpMeta() { return {
+    "$flags$": 4,
+    "$tagName$": "gov-dropdown",
+    "$members$": {
+      "open": [1028],
+      "position": [1],
+      "getState": [64]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
 const EmptyClass = {
   root: 'gov-empty',
   icon: 'gov-empty__icon',
@@ -16274,6 +16140,16 @@ class GovErrorCode {
   }; }
 }
 
+const FormAutocompleteSizes = pick(Sizes, ['_M', '_L', '_XL']);
+const FormAutocompleteVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
+const FormAutocompleteClass = {
+  root: 'gov-form-autocomplete',
+  list: 'gov-form-autocomplete__list',
+  item: 'gov-form-autocomplete__item',
+  empty: 'gov-form-autocomplete__item--empty',
+  loading: 'gov-form-autocomplete__item--loading',
+};
+
 const govFormAutocompleteCss = ".gov-form-autocomplete__list{margin:0;padding:0}.gov-form-autocomplete__list>.gov-form-autocomplete__item{margin:0;padding:0;background:none}.gov-form-autocomplete__list>.gov-form-autocomplete__item::before{display:none}.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-autocomplete{position:relative;display:block;width:100%}.gov-form-autocomplete__list{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);position:absolute;top:100%;right:0;left:0;z-index:5;max-height:14.0625rem;margin-top:0.5rem;border:var(--gov-autocomplete-item-hover, 0.0625rem solid var(--gov-color-secondary-500));border-radius:var(--gov-border-radius, 0.1875rem);background:var(--gov-autocomplete-bg, var(--gov-color-neutral-white));overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}.gov-form-autocomplete__list>.gov-form-autocomplete__item{padding:0.75rem 0.5rem;cursor:pointer}.gov-form-autocomplete__item--empty,.gov-form-autocomplete__item--loading{padding:0.75rem 0.5rem;color:var(--gov-autocomplete-item-disable-color, var(--gov-color-secondary-600))}.gov-form-autocomplete__item--empty .gov-icon,.gov-form-autocomplete__item--loading .gov-icon{height:12px}.gov-form-autocomplete__list:empty{display:none}.gov-form-autocomplete__item[aria-selected=\"\"],.gov-form-autocomplete__item[aria-selected=true i],.gov-form-autocomplete__item[aria-selected=\"1\"]{background:var(--gov-autocomplete-item-select, var(--gov-color-secondary-400))}@media not all and (pointer: coarse){.gov-form-autocomplete__item:hover{background:var(--gov-autocomplete-item-hover, var(--gov-color-primary-100))}}";
 
 class GovFormAutocomplete {
@@ -16534,6 +16410,152 @@ class GovFormAutocomplete {
   }; }
 }
 
+const FormCheckboxSizes = pick(Sizes, ['_XS', '_S', '_M', '_L']);
+const FormCheckboxClass = {
+  root: 'gov-form-checkbox',
+  check: 'gov-form-checkbox__check',
+};
+
+pick(Sizes, ['_M', '_L', '_XL']);
+const FormControlClass = {
+  root: 'gov-form-control',
+  holder: 'gov-form-control__holder',
+  bottom: 'gov-form-control__bottom',
+};
+
+const FormInputSizes = pick(Sizes, ['_S', '_M', '_L', '_XL']);
+const FormInputVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
+var InputTypes;
+(function (InputTypes) {
+  InputTypes["COLOR"] = "color";
+  InputTypes["DATE"] = "date";
+  InputTypes["DATETIME_LOCAL"] = "datetime-local";
+  InputTypes["EMAIL"] = "email";
+  InputTypes["MONTH"] = "month";
+  InputTypes["NUMBER"] = "number";
+  InputTypes["PASSWORD"] = "password";
+  InputTypes["SEARCH"] = "search";
+  InputTypes["TEL"] = "tel";
+  InputTypes["TEXT"] = "text";
+  InputTypes["TIME"] = "time";
+  InputTypes["URL"] = "url";
+  InputTypes["WEEK"] = "week";
+})(InputTypes || (InputTypes = {}));
+var Type;
+(function (Type) {
+  Type["RESET"] = "reset";
+})(Type || (Type = {}));
+const FormInputClass = {
+  root: 'gov-form-input',
+};
+
+const FormSelectSizes = pick(Sizes, ['_M', '_L', '_XL']);
+const FormSelectVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
+const FormSelectClass = {
+  root: 'gov-form-select',
+  icon: 'gov-form-select__icon',
+};
+
+const FormMultiselectSizes = pick(Sizes, ['_M', '_L', '_XL']);
+const FormMultiselectVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
+const FormMultiSelectClass = {
+  root: 'gov-form-multi-select',
+  wrap: 'gov-form-multi-select__wrap',
+  list: 'gov-form-multi-select__list',
+  item: 'gov-form-multi-select__item',
+};
+
+const FormSwitchSizes = pick(Sizes, ['_XS', '_S', '_M', '_L']);
+const FormSwitchClass = {
+  root: 'gov-form-switch',
+  holder: 'gov-form-switch__holder',
+  input: 'gov-form-switch__input',
+  indicator: 'gov-form-switch__indicator',
+};
+
+const FormRadioSizes = pick(Sizes, ['_XS', '_S', '_M', '_L']);
+const FormRadioClass = {
+  root: 'gov-form-radio',
+  holder: 'gov-form-radio__holder',
+  input: 'gov-form-radio__input',
+  indicator: 'gov-form-radio__indicator',
+};
+
+const FormMessageVariants = pick(Variants, ['SECONDARY', 'SUCCESS', 'ERROR', 'WARNING']);
+const FormMessageClass = {
+  root: 'gov-form-message',
+  content: 'gov-form-message__content',
+  icon: 'gov-form-message__icon',
+};
+
+pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL']);
+const FormLabelClass = {
+  root: 'gov-form-label',
+  label: 'gov-form-label__label',
+};
+
+const govForm = (govHost) => {
+  return {
+    get govHost() {
+      return govHost;
+    },
+    passAttrToControl(name, value) {
+      if (this.control) {
+        this.control.setAttribute(name, value);
+      }
+    },
+    passAttrToLabel(name, value) {
+      if (this.label) {
+        this.label.setAttribute(name, value);
+      }
+    },
+    get hasGroupChildren() {
+      if (this.control) {
+        return this.control.querySelectorAll('gov-form-group > *').length > 1;
+      }
+      return false;
+    },
+    get control() {
+      if (this.govHost.name === FormControlClass.root) {
+        return this.govHost.hostElement;
+      }
+      return this.govHost.getParent(FormControlClass.root);
+    },
+    get label() {
+      const innerLabel = this.govHost.hostElement.querySelector(`.${FormLabelClass.root}`);
+      if (innerLabel) {
+        return innerLabel;
+      }
+      if (this.control) {
+        return this.control.querySelector(`.${FormLabelClass.root}`);
+      }
+      return null;
+    },
+    get mainElementsInControl() {
+      const formElements = [
+        FormSelectClass.root,
+        FormInputClass.root,
+        FormSwitchClass.root,
+        FormCheckboxClass.root,
+        FormRadioClass.root,
+        FormMultiSelectClass.root,
+        FormAutocompleteClass.root,
+      ];
+      if (this.control) {
+        const elements = formElements.map(el => `${el}:first-of-type`).join(', ');
+        return Array.from(this.control.querySelectorAll(elements));
+      }
+      return [];
+    },
+    get messageElements() {
+      if (this.control) {
+        return Array.from(this.control.querySelectorAll(FormMessageClass.root));
+      }
+      return [];
+    },
+  };
+};
+
 const govFormCheckboxCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-checkbox{cursor:pointer}.gov-form-checkbox input{position:absolute;top:0;left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.gov-form-checkbox input+span{position:relative;display:block}.gov-form-checkbox input+span::before{content:\"\";position:absolute;display:block;top:0;left:0;border:var(--gov-form-checkbox-border-size, 0.125rem solid var(--gov-color-primary));background-color:var(--gov-form-checkbox-background-color, var(--gov-color-neutral-white));transition:150ms linear border-color, 150ms linear background-color, 150ms linear outline-color}.gov-form-checkbox .gov-form-label__label{position:relative;z-index:1;width:100%}.gov-form-checkbox input:focus-visible+span::before{outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base)}[invalid=\"\"].gov-form-checkbox .gov-form-label__label,[invalid=true i].gov-form-checkbox .gov-form-label__label,[invalid=\"1\"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-error, var(--gov-color-error))}[invalid=\"\"].gov-form-checkbox input+span::before,[invalid=true i].gov-form-checkbox input+span::before,[invalid=\"1\"].gov-form-checkbox input+span::before{border-color:var(--gov-form-state-color-error, var(--gov-color-error))}[disabled=\"\"].gov-form-checkbox,[disabled=true i].gov-form-checkbox,[disabled=\"1\"].gov-form-checkbox{pointer-events:none}[disabled=\"\"].gov-form-checkbox .gov-form-label__label,[disabled=true i].gov-form-checkbox .gov-form-label__label,[disabled=\"1\"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[disabled=\"\"].gov-form-checkbox input+span::before,[disabled=true i].gov-form-checkbox input+span::before,[disabled=\"1\"].gov-form-checkbox input+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}[size=xs].gov-form-checkbox{font-weight:var(--gov-text-xs-font-weight);font-size:var(--gov-text-xs-font-size);line-height:var(--gov-text-xs-line-height);letter-spacing:var(--gov-text-xs-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);min-height:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem)}[size=xs].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) + var(--gov-form-checkbox-core-xs-gap, 0.75rem))}[size=xs].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);height:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem)}[size=s].gov-form-checkbox{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);min-height:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem)}[size=s].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) + var(--gov-form-checkbox-core-s-gap, 0.75rem))}[size=s].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);height:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem)}[size=m].gov-form-checkbox{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);min-height:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem)}[size=m].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) + var(--gov-form-checkbox-core-m-gap, 1rem))}[size=m].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);height:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem)}[size=l].gov-form-checkbox{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-l-indicator-size, 2rem);min-height:var(--gov-form-checkbox-core-l-indicator-size, 2rem)}[size=l].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-l-indicator-size, 2rem) + var(--gov-form-checkbox-core-l-gap, 1rem))}[size=l].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-l-indicator-size, 2rem);height:var(--gov-form-checkbox-core-l-indicator-size, 2rem)}.gov-form-checkbox input+span::before{border-radius:var(--gov-border-radius, 0.1875rem)}.gov-form-checkbox__check{position:absolute;color:var(--gov-form-checkbox-check-color, var(--gov-color-neutral-white));opacity:0;transition:150ms linear opacity}.gov-form-checkbox input:checked+span::before{background:var(--gov-form-checkbox-indicator-bg, var(--gov-color-primary))}input:checked+span .gov-form-checkbox__check{opacity:1}.gov-form-checkbox[invalid=\"\"] input:checked+span::before,.gov-form-checkbox[invalid=true i] input:checked+span::before,.gov-form-checkbox[invalid=\"1\"] input:checked+span::before{background:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-checkbox[disabled=\"\"] input:checked+span::before,.gov-form-checkbox[disabled=true i] input:checked+span::before,.gov-form-checkbox[disabled=\"1\"] input:checked+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));background-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}.gov-form-checkbox[size=xs] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-check-size, 0.75rem)) / 2);left:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-check-size, 0.75rem)) / 2);width:var(--gov-form-checkbox-core-xs-check-size, 0.75rem);height:var(--gov-form-checkbox-core-xs-check-size, 0.75rem)}.gov-form-checkbox[size=s] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-check-size, 0.825rem)) / 2);left:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-check-size, 0.825rem)) / 2);width:var(--gov-form-checkbox-core-s-check-size, 0.825rem);height:var(--gov-form-checkbox-core-s-check-size, 0.825rem)}.gov-form-checkbox[size=m] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-check-size, 0.9rem)) / 2);left:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-check-size, 0.9rem)) / 2);width:var(--gov-form-checkbox-core-m-check-size, 0.9rem);height:var(--gov-form-checkbox-core-m-check-size, 0.9rem)}.gov-form-checkbox[size=l] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-check-size, 1.2rem)) / 2);left:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-check-size, 1.2rem)) / 2);width:var(--gov-form-checkbox-core-l-check-size, 1.2rem);height:var(--gov-form-checkbox-core-l-check-size, 1.2rem)}";
 
 class GovFormCheckbox {
@@ -17820,7 +17842,12 @@ class GovFormSelect {
   }
   markSelectedValue() {
     this.host.querySelectorAll("option").forEach((option) => {
-      option.setAttribute("selected", toBoolAttr(option.value === this.value));
+      if (option.value === this.value) {
+        option.setAttribute("selected", "selected");
+      }
+      else {
+        option.removeAttribute("selected");
+      }
     });
   }
   render() {
@@ -20342,6 +20369,7 @@ registerComponents([
   GovContainer,
   GovControlGroup,
   GovCookiebar,
+  GovDropdown,
   GovEmpty,
   GovErrorCode,
   GovFormAutocomplete,