@gov-design-system-ce/components 4.0.7 → 4.0.8-rc01

package/dist/hydrate/index.js

@@ -7555,7 +7555,7 @@ const FormInputClass = {
   root: 'gov-form-input',
 };
 
-const FormSelectSizes = pick(Sizes, ['_M', '_L', '_XL']);
+const FormSelectSizes = pick(Sizes, ['_S', '_M', '_L', '_XL']);
 const FormSelectVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
 const FormSelectClass = {
   root: 'gov-form-select',
@@ -8507,8 +8507,50 @@ class GovFormMessage {
   }; }
 }
 
-const hasOwnProperty = (obj, prop) => {
-  return Object.prototype.hasOwnProperty.call(obj, prop);
+const is = (value) => value !== undefined && value !== null;
+const isObject = (obj) => typeof obj === 'object';
+const isString = (input) => is(input) && typeof input === 'string';
+
+const parseJSONString = (value) => {
+  if (isString(value) && value.length) {
+    try {
+      console.log(value);
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed) || isObject(parsed)) {
+        return parsed;
+      }
+    }
+    catch (e) {
+      console.log(e);
+      return null;
+    }
+  }
+  return null;
+};
+
+const createArrayRange = (from, to) => {
+  if (Number.isInteger(from) && Number.isInteger(to)) {
+    return [...Array(to + 1).keys()].slice(from);
+  }
+  return [];
+};
+const propsValueToArray = (value) => {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  else if (isString(value)) {
+    const parsed = parseJSONString(value);
+    if (Array.isArray(parsed)) {
+      return parsed;
+    }
+  }
+  return [];
+};
+
+const tick = (callback) => {
+  setTimeout(() => {
+    callback();
+  }, 0);
 };
 
 const govFormMultiSelectCss = ".gov-form-multi-select__list{margin:0;padding:0}.gov-form-multi-select__list>.gov-form-multi-select__item{margin:0;padding:0;background:none}.gov-form-multi-select__list>.gov-form-multi-select__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-multi-select{position:relative;display:flex;width:100%;align-items:center}.gov-form-multi-select .element{position:relative;display:flex;flex:1 1 auto}.gov-form-multi-select input,.gov-form-multi-select select,.gov-form-multi-select textarea{width:100%;border-radius:var(--gov-border-radius, 0.1875rem);background-color:var(--gov-form-bg-color, var(--gov-color-neutral-white));font-family:var(--gov-font-family, \"Roboto\", sans-serif)}.gov-form-multi-select input:focus,.gov-form-multi-select select:focus,.gov-form-multi-select textarea:focus{outline:none}.gov-form-multi-select input:focus-visible,.gov-form-multi-select select:focus-visible,.gov-form-multi-select textarea:focus-visible{border-radius:var(--gov-border-radius, 0.1875rem);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0}.gov-form-multi-select input::-moz-placeholder,.gov-form-multi-select select::-moz-placeholder,.gov-form-multi-select textarea::-moz-placeholder{color:var(--gov-form-placeholder-color, var(--gov-color-secondary-600))}.gov-form-multi-select input::placeholder,.gov-form-multi-select select::placeholder,.gov-form-multi-select textarea::placeholder{color:var(--gov-form-placeholder-color, var(--gov-color-secondary-600))}.gov-form-multi-select textarea{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);padding:0.5rem 0.75rem;resize:none}.gov-form-multi-select *[slot=left-icon],.gov-form-multi-select *[slot=right-icon]{position:absolute;top:50%;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none}.gov-form-multi-select *[slot=left-icon]{left:0}.gov-form-multi-select *[slot=right-icon]{right:0}.gov-form-multi-select *[slot=prefix],.gov-form-multi-select *[slot=sufix]{margin:0}[size=s].gov-form-multi-select{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);gap:0.5rem var(--gov-form-input-core-s-icon-size, 1rem)}[size=s].gov-form-multi-select input,[size=s].gov-form-multi-select select{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);height:var(--gov-form-input-core-s-height, 2rem);padding:var(--gov-form-input-core-s-padding, 0.25rem 0.75rem)}[size=s].gov-form-multi-select *[slot=left-icon],[size=s].gov-form-multi-select *[slot=right-icon]{width:var(--gov-form-input-core-s-icon-size, 1rem);height:var(--gov-form-input-core-s-icon-size, 1rem)}[size=s].gov-form-multi-select *[slot=left-icon]{left:calc((var(--gov-form-input-core-s-icon-padding, 2rem) - var(--gov-form-input-core-s-icon-size, 1rem)) / 2)}[size=s].gov-form-multi-select *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-s-icon-padding, 2rem)}[size=s].gov-form-multi-select *[slot=right-icon]{right:calc((var(--gov-form-input-core-s-icon-padding, 2rem) - var(--gov-form-input-core-s-icon-size, 1rem)) / 2)}[size=s].gov-form-multi-select *[slot=right-icon]~input,[size=s].gov-form-multi-select *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-s-icon-padding, 2rem)}[size=m].gov-form-multi-select{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);gap:0.5rem var(--gov-form-input-core-m-icon-size, 1rem)}[size=m].gov-form-multi-select input,[size=m].gov-form-multi-select select{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);height:var(--gov-form-input-core-m-height, 2.5rem);padding:var(--gov-form-input-core-m-padding, 0.4375rem 0.75rem)}[size=m].gov-form-multi-select *[slot=left-icon],[size=m].gov-form-multi-select *[slot=right-icon]{width:var(--gov-form-input-core-m-icon-size, 1rem);height:var(--gov-form-input-core-m-icon-size, 1rem)}[size=m].gov-form-multi-select *[slot=left-icon]{left:calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2)}[size=m].gov-form-multi-select *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-m-icon-padding, 2.5rem)}[size=m].gov-form-multi-select *[slot=right-icon]{right:calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2)}[size=m].gov-form-multi-select *[slot=right-icon]~input,[size=m].gov-form-multi-select *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-m-icon-padding, 2.5rem)}[size=l].gov-form-multi-select{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);gap:0.5rem var(--gov-form-input-core-l-icon-size, 1rem)}[size=l].gov-form-multi-select input,[size=l].gov-form-multi-select select{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);height:var(--gov-form-input-core-l-height, 3rem);padding:var(--gov-form-input-core-l-padding, 0.6875rem 0.75rem)}[size=l].gov-form-multi-select *[slot=left-icon],[size=l].gov-form-multi-select *[slot=right-icon]{width:var(--gov-form-input-core-l-icon-size, 1rem);height:var(--gov-form-input-core-l-icon-size, 1rem)}[size=l].gov-form-multi-select *[slot=left-icon]{left:calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2)}[size=l].gov-form-multi-select *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-l-icon-padding, 2.5rem)}[size=l].gov-form-multi-select *[slot=right-icon]{right:calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2)}[size=l].gov-form-multi-select *[slot=right-icon]~input,[size=l].gov-form-multi-select *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-l-icon-padding, 2.5rem)}[size=xl].gov-form-multi-select{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);gap:0.5rem var(--gov-form-input-core-xl-icon-size, 1.25rem)}[size=xl].gov-form-multi-select input,[size=xl].gov-form-multi-select select{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);height:var(--gov-form-input-core-xl-height, 3.5rem);padding:var(--gov-form-input-core-xl-padding, 0.9375rem 1rem 0.875rem)}[size=xl].gov-form-multi-select *[slot=left-icon],[size=xl].gov-form-multi-select *[slot=right-icon]{width:var(--gov-form-input-core-xl-icon-size, 1.25rem);height:var(--gov-form-input-core-xl-icon-size, 1.25rem)}[size=xl].gov-form-multi-select *[slot=left-icon]{left:calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2)}[size=xl].gov-form-multi-select *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-xl-icon-padding, 3rem)}[size=xl].gov-form-multi-select *[slot=right-icon]{right:calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2)}[size=xl].gov-form-multi-select *[slot=right-icon]~input,[size=xl].gov-form-multi-select *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-xl-icon-padding, 3rem)}[variant=primary].gov-form-multi-select input,[variant=primary].gov-form-multi-select select,[variant=primary].gov-form-multi-select textarea{color:var(--gov-form-input-color-primary, var(--gov-color-secondary-700));border:var(--gov-form-input-border-primary, 0.0625rem solid var(--gov-color-primary-600))}[variant=primary].gov-form-multi-select *[slot=left-icon],[variant=primary].gov-form-multi-select *[slot=right-icon]:not(.icon-arrow){color:var(--gov-form-input-icon-color-primary, var(--gov-color-primary))}[variant=secondary].gov-form-multi-select input,[variant=secondary].gov-form-multi-select select,[variant=secondary].gov-form-multi-select textarea{color:var(--gov-form-input-color-secondary, var(--gov-color-secondary-700));border:var(--gov-form-input-border-secondary, 0.0625rem solid var(--gov-color-secondary-700))}[variant=secondary].gov-form-multi-select *[slot=left-icon],[variant=secondary].gov-form-multi-select *[slot=right-icon]:not(.icon-arrow){color:var(--gov-form-input-icon-color-secondary, var(--gov-color-primary))}[disabled=\"\"].gov-form-multi-select,[disabled=true i].gov-form-multi-select,[disabled=\"1\"].gov-form-multi-select{pointer-events:none}[disabled=\"\"].gov-form-multi-select input,[disabled=\"\"].gov-form-multi-select select,[disabled=\"\"].gov-form-multi-select textarea,[disabled=true i].gov-form-multi-select input,[disabled=true i].gov-form-multi-select select,[disabled=true i].gov-form-multi-select textarea,[disabled=\"1\"].gov-form-multi-select input,[disabled=\"1\"].gov-form-multi-select select,[disabled=\"1\"].gov-form-multi-select textarea{border-color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));background:var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[disabled=\"\"].gov-form-multi-select *[slot=left-icon],[disabled=\"\"].gov-form-multi-select *[slot=right-icon],[disabled=true i].gov-form-multi-select *[slot=left-icon],[disabled=true i].gov-form-multi-select *[slot=right-icon],[disabled=\"1\"].gov-form-multi-select *[slot=left-icon],[disabled=\"1\"].gov-form-multi-select *[slot=right-icon]{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600)) !important}[invalid=\"\"].gov-form-multi-select input,[invalid=\"\"].gov-form-multi-select select,[invalid=\"\"].gov-form-multi-select textarea,[invalid=true i].gov-form-multi-select input,[invalid=true i].gov-form-multi-select select,[invalid=true i].gov-form-multi-select textarea,[invalid=\"1\"].gov-form-multi-select input,[invalid=\"1\"].gov-form-multi-select select,[invalid=\"1\"].gov-form-multi-select textarea{border-color:var(--gov-form-state-color-error, var(--gov-color-error));color:var(--gov-form-state-color-error, var(--gov-color-error))}[invalid=\"\"].gov-form-multi-select input::-moz-placeholder,[invalid=\"\"].gov-form-multi-select select::-moz-placeholder,[invalid=\"\"].gov-form-multi-select textarea::-moz-placeholder,[invalid=true i].gov-form-multi-select input::-moz-placeholder,[invalid=true i].gov-form-multi-select select::-moz-placeholder,[invalid=true i].gov-form-multi-select textarea::-moz-placeholder,[invalid=\"1\"].gov-form-multi-select input::-moz-placeholder,[invalid=\"1\"].gov-form-multi-select select::-moz-placeholder,[invalid=\"1\"].gov-form-multi-select textarea::-moz-placeholder{color:var(--gov-form-state-color-error, var(--gov-color-error-300))}[invalid=\"\"].gov-form-multi-select input::placeholder,[invalid=\"\"].gov-form-multi-select select::placeholder,[invalid=\"\"].gov-form-multi-select textarea::placeholder,[invalid=true i].gov-form-multi-select input::placeholder,[invalid=true i].gov-form-multi-select select::placeholder,[invalid=true i].gov-form-multi-select textarea::placeholder,[invalid=\"1\"].gov-form-multi-select input::placeholder,[invalid=\"1\"].gov-form-multi-select select::placeholder,[invalid=\"1\"].gov-form-multi-select textarea::placeholder{color:var(--gov-form-state-color-error, var(--gov-color-error-300))}[invalid=\"\"].gov-form-multi-select *[slot=left-icon],[invalid=\"\"].gov-form-multi-select *[slot=right-icon],[invalid=true i].gov-form-multi-select *[slot=left-icon],[invalid=true i].gov-form-multi-select *[slot=right-icon],[invalid=\"1\"].gov-form-multi-select *[slot=left-icon],[invalid=\"1\"].gov-form-multi-select *[slot=right-icon]{color:var(--gov-form-state-color-error, var(--gov-color-error)) !important}[invalid=\"\"].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[invalid=true i].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[invalid=\"1\"].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow){display:none}[success=\"\"].gov-form-multi-select *[slot=right-icon]:not(.icon-arrow),[success=true i].gov-form-multi-select *[slot=right-icon]:not(.icon-arrow),[success=\"1\"].gov-form-multi-select *[slot=right-icon]:not(.icon-arrow){color:var(--gov-form-state-color-success, var(--gov-color-success))}[success=\"\"].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[success=true i].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[success=\"1\"].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow){display:none}[multiline=\"\"].gov-form-multi-select *[slot=left-icon],[multiline=\"\"].gov-form-multi-select *[slot=right-icon],[multiline=true i].gov-form-multi-select *[slot=left-icon],[multiline=true i].gov-form-multi-select *[slot=right-icon],[multiline=\"1\"].gov-form-multi-select *[slot=left-icon],[multiline=\"1\"].gov-form-multi-select *[slot=right-icon]{display:none}.gov-form-multi-select{background:none}.gov-form-multi-select select{-webkit-appearance:none;-moz-appearance:none}.gov-form-multi-select select::-ms-expand{display:none}[size=s].gov-form-multi-select *[slot=right-icon]{right:var(--gov-form-select-s-arrow-right-position, 0.75rem);width:var(--gov-form-select-s-arrow-size, 0.75rem);height:var(--gov-form-select-s-arrow-size, 0.75rem)}[size=s][invalid=\"\"].gov-form-multi-select .icon-arrow,[size=s][invalid=true i].gov-form-multi-select .icon-arrow,[size=s][invalid=\"1\"].gov-form-multi-select .icon-arrow{right:calc(3 * var(--gov-form-select-s-arrow-right-position, 0.75rem))}[size=s][success=\"\"].gov-form-multi-select .icon-arrow,[size=s][success=true i].gov-form-multi-select .icon-arrow,[size=s][success=\"1\"].gov-form-multi-select .icon-arrow{right:calc(3 * var(--gov-form-select-s-arrow-right-position, 0.75rem))}[size=m].gov-form-multi-select *[slot=right-icon]{right:var(--gov-form-select-m-arrow-right-position, 1rem);width:var(--gov-form-select-m-arrow-size, 0.75rem);height:var(--gov-form-select-m-arrow-size, 0.75rem)}[size=m][invalid=\"\"].gov-form-multi-select .icon-arrow,[size=m][invalid=true i].gov-form-multi-select .icon-arrow,[size=m][invalid=\"1\"].gov-form-multi-select .icon-arrow{right:calc(3 * var(--gov-form-select-m-arrow-right-position, 1rem))}[size=m][success=\"\"].gov-form-multi-select .icon-arrow,[size=m][success=true i].gov-form-multi-select .icon-arrow,[size=m][success=\"1\"].gov-form-multi-select .icon-arrow{right:calc(3 * var(--gov-form-select-m-arrow-right-position, 1rem))}[size=l].gov-form-multi-select *[slot=right-icon]{right:var(--gov-form-select-l-arrow-right-position, 1rem);width:var(--gov-form-select-l-arrow-size, 1rem);height:var(--gov-form-select-l-arrow-size, 1rem)}[size=l][invalid=\"\"].gov-form-multi-select .icon-arrow,[size=l][invalid=true i].gov-form-multi-select .icon-arrow,[size=l][invalid=\"1\"].gov-form-multi-select .icon-arrow{right:calc(3 * var(--gov-form-select-l-arrow-right-position, 1rem))}[size=l][success=\"\"].gov-form-multi-select .icon-arrow,[size=l][success=true i].gov-form-multi-select .icon-arrow,[size=l][success=\"1\"].gov-form-multi-select .icon-arrow{right:calc(3 * var(--gov-form-select-l-arrow-right-position, 1rem))}[size=xl].gov-form-multi-select *[slot=right-icon]{right:var(--gov-form-select-xl-arrow-right-position, 1.3125rem);width:var(--gov-form-select-xl-arrow-size, 1rem);height:var(--gov-form-select-xl-arrow-size, 1rem)}[size=xl][invalid=\"\"].gov-form-multi-select .icon-arrow,[size=xl][invalid=true i].gov-form-multi-select .icon-arrow,[size=xl][invalid=\"1\"].gov-form-multi-select .icon-arrow{right:calc(3 * var(--gov-form-select-xl-arrow-right-position, 1.3125rem))}[size=xl][success=\"\"].gov-form-multi-select .icon-arrow,[size=xl][success=true i].gov-form-multi-select .icon-arrow,[size=xl][success=\"1\"].gov-form-multi-select .icon-arrow{right:calc(3 * var(--gov-form-select-xl-arrow-right-position, 1.3125rem))}[size=s][invalid=\"\"].gov-form-multi-select *[slot=right-icon]~select,[size=s][invalid=\"\"].gov-form-multi-select *[slot=right-icon]~input,[size=s][invalid=true i].gov-form-multi-select *[slot=right-icon]~select,[size=s][invalid=true i].gov-form-multi-select *[slot=right-icon]~input,[size=s][invalid=\"1\"].gov-form-multi-select *[slot=right-icon]~select,[size=s][invalid=\"1\"].gov-form-multi-select *[slot=right-icon]~input{padding-right:calc(2 * var(--gov-form-input-core-s-icon-padding, 2rem))}[size=s][success=\"\"].gov-form-multi-select *[slot=right-icon]~select,[size=s][success=\"\"].gov-form-multi-select *[slot=right-icon]~input,[size=s][success=true i].gov-form-multi-select *[slot=right-icon]~select,[size=s][success=true i].gov-form-multi-select *[slot=right-icon]~input,[size=s][success=\"1\"].gov-form-multi-select *[slot=right-icon]~select,[size=s][success=\"1\"].gov-form-multi-select *[slot=right-icon]~input{padding-right:calc(2 * var(--gov-form-input-core-s-icon-padding, 2rem))}[size=m][invalid=\"\"].gov-form-multi-select *[slot=right-icon]~select,[size=m][invalid=\"\"].gov-form-multi-select *[slot=right-icon]~input,[size=m][invalid=true i].gov-form-multi-select *[slot=right-icon]~select,[size=m][invalid=true i].gov-form-multi-select *[slot=right-icon]~input,[size=m][invalid=\"1\"].gov-form-multi-select *[slot=right-icon]~select,[size=m][invalid=\"1\"].gov-form-multi-select *[slot=right-icon]~input{padding-right:calc(2 * var(--gov-form-input-core-m-icon-padding, 2.5rem))}[size=m][success=\"\"].gov-form-multi-select *[slot=right-icon]~select,[size=m][success=\"\"].gov-form-multi-select *[slot=right-icon]~input,[size=m][success=true i].gov-form-multi-select *[slot=right-icon]~select,[size=m][success=true i].gov-form-multi-select *[slot=right-icon]~input,[size=m][success=\"1\"].gov-form-multi-select *[slot=right-icon]~select,[size=m][success=\"1\"].gov-form-multi-select *[slot=right-icon]~input{padding-right:calc(2 * var(--gov-form-input-core-m-icon-padding, 2.5rem))}[size=l][invalid=\"\"].gov-form-multi-select *[slot=right-icon]~select,[size=l][invalid=\"\"].gov-form-multi-select *[slot=right-icon]~input,[size=l][invalid=true i].gov-form-multi-select *[slot=right-icon]~select,[size=l][invalid=true i].gov-form-multi-select *[slot=right-icon]~input,[size=l][invalid=\"1\"].gov-form-multi-select *[slot=right-icon]~select,[size=l][invalid=\"1\"].gov-form-multi-select *[slot=right-icon]~input{padding-right:calc(2 * var(--gov-form-input-core-l-icon-padding, 2.5rem))}[size=l][success=\"\"].gov-form-multi-select *[slot=right-icon]~select,[size=l][success=\"\"].gov-form-multi-select *[slot=right-icon]~input,[size=l][success=true i].gov-form-multi-select *[slot=right-icon]~select,[size=l][success=true i].gov-form-multi-select *[slot=right-icon]~input,[size=l][success=\"1\"].gov-form-multi-select *[slot=right-icon]~select,[size=l][success=\"1\"].gov-form-multi-select *[slot=right-icon]~input{padding-right:calc(2 * var(--gov-form-input-core-l-icon-padding, 2.5rem))}[size=xl][invalid=\"\"].gov-form-multi-select *[slot=right-icon]~select,[size=xl][invalid=\"\"].gov-form-multi-select *[slot=right-icon]~input,[size=xl][invalid=true i].gov-form-multi-select *[slot=right-icon]~select,[size=xl][invalid=true i].gov-form-multi-select *[slot=right-icon]~input,[size=xl][invalid=\"1\"].gov-form-multi-select *[slot=right-icon]~select,[size=xl][invalid=\"1\"].gov-form-multi-select *[slot=right-icon]~input{padding-right:calc(2 * var(--gov-form-input-core-xl-icon-padding, 3rem))}[size=xl][success=\"\"].gov-form-multi-select *[slot=right-icon]~select,[size=xl][success=\"\"].gov-form-multi-select *[slot=right-icon]~input,[size=xl][success=true i].gov-form-multi-select *[slot=right-icon]~select,[size=xl][success=true i].gov-form-multi-select *[slot=right-icon]~input,[size=xl][success=\"1\"].gov-form-multi-select *[slot=right-icon]~select,[size=xl][success=\"1\"].gov-form-multi-select *[slot=right-icon]~input{padding-right:calc(2 * var(--gov-form-input-core-xl-icon-padding, 3rem))}.gov-form-multi-select{flex-wrap:wrap}.gov-form-multi-select__wrap{display:flex;gap:0.5rem;width:100%}.gov-form-multi-select__list{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:flex;gap:0.5rem;flex-wrap:wrap}.gov-form-multi-select__list>.gov-form-multi-select__item{position:relative;display:flex;flex:0 0 auto;align-items:center;padding:0rem 0rem 0rem 0.5rem;background:var(--gov-form-multiselect-bg, var(--gov-color-primary-200));transition:150ms linear background-color}";
@@ -8521,6 +8563,8 @@ class GovFormMultiSelect {
     this.govChange = createEvent(this, "gov-change", 7);
     this.govSelect = createEvent(this, "gov-select", 7);
     this.govRemove = createEvent(this, "gov-remove", 7);
+    this.value = undefined;
+    this.options = undefined;
     this.identifier = undefined;
     this.placeholder = undefined;
     this.variant = undefined;
@@ -8537,9 +8581,9 @@ class GovFormMultiSelect {
     this.wcagLabelledBy = undefined;
     this.wcagOwns = undefined;
     this.focused = undefined;
-    this.value = undefined;
-    this.selectedOptions = [];
-    this.options = [];
+    this.valueState = undefined;
+    this.selectedOptionsState = [];
+    this.optionsState = [];
     this.selectId = createID('GovSelect');
     this.listId = createID('GovMultiList');
     this.h = govHost(this.host);
@@ -8551,6 +8595,12 @@ class GovFormMultiSelect {
   validateSize(newValue) {
     validateProp(FormMultiselectSizes, newValue, FormMultiSelectClass.root);
   }
+  watchOptions(newValue) {
+    this.optionsState = propsValueToArray(newValue);
+  }
+  watchValue(newValue) {
+    this.selectedOptionsState = propsValueToArray(newValue);
+  }
   watchDisabled() {
     this.passControlAttrs();
   }
@@ -8563,65 +8613,74 @@ class GovFormMultiSelect {
     this.validateVariant(this.variant);
     this.validateSize(this.size);
     this.watchDisabled();
+    this.passControlAttrs();
+    this.f.passAttrToLabel('required', String(this.required));
+    this.optionsState = propsValueToArray(this.options);
+    this.selectedOptionsState = propsValueToArray(this.value);
   }
   getAvailableOptions(ignoreFilter = false) {
-    if (Array.isArray(this.options) && this.options.length) {
+    if (Array.isArray(this.optionsState) && this.optionsState.length) {
       if (ignoreFilter) {
-        return this.options;
+        return this.optionsState;
       }
-      return this.options.filter((option) => {
-        const isSelected = this.selectedOptions.findIndex((selected) => selected.value === option.value);
-        return (isSelected !== -1 || (option === null || option === void 0 ? void 0 : option.disabled)) ? false : true;
-      });
+      return this.optionsState.filter((option) => {
+        const selectedIndex = this.selectedValueIndex(option.value);
+        return (selectedIndex !== -1 || (option === null || option === void 0 ? void 0 : option.disabled)) ? false : true;
+      }).map((option) => { var _a; return ({ name: (_a = option.name) !== null && _a !== void 0 ? _a : option.value, value: option.value }); });
     }
     return Array.from(this.selectRef.querySelectorAll('option'))
       .filter((option) => {
       if (ignoreFilter) {
         return true;
       }
-      return !(option.disabled || option.selected);
+      const selectedIndex = this.selectedValueIndex(option.value);
+      return !(option.disabled || option.selected || selectedIndex > -1);
     })
       .map((option) => ({ name: option.textContent, value: option.value }));
   }
   initAutocomplete() {
-    this.autocompleteRef.addEventListener('gov-select', this.onSelectHandler.bind(this));
-    this.autocompleteRef.addEventListener('gov-input', this.onInputHandler.bind(this));
-    this.autocompleteRef.addEventListener('gov-focus', this.onFocusHandler.bind(this));
-    this.autocompleteRef.addEventListener('gov-blur', this.onBlurHandler.bind(this));
-    this.autocompleteRef
-      .setSearchCallback(value => {
+    var _a, _b, _c, _d, _e;
+    (_a = this.autocompleteRef) === null || _a === void 0 ? void 0 : _a.addEventListener('gov-select', this.onSelectHandler.bind(this));
+    (_b = this.autocompleteRef) === null || _b === void 0 ? void 0 : _b.addEventListener('gov-input', this.onInputHandler.bind(this));
+    (_c = this.autocompleteRef) === null || _c === void 0 ? void 0 : _c.addEventListener('gov-focus', this.onFocusHandler.bind(this));
+    (_d = this.autocompleteRef) === null || _d === void 0 ? void 0 : _d.addEventListener('gov-blur', this.onBlurHandler.bind(this));
+    (_e = this.autocompleteRef) === null || _e === void 0 ? void 0 : _e.setSearchCallback(searchString => {
       return new Promise(resolve => {
         const data = this.getAvailableOptions();
-        if (String(value).length === 0) {
+        if (String(searchString).length === 0) {
           return resolve(data);
         }
-        resolve(data.filter(({ name }) => {
+        resolve(data.filter(({ name, value }) => {
           if (!name)
-            return false;
-          return removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(value).toLowerCase()) > -1;
+            name = value;
+          return removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(searchString).toLowerCase()) > -1;
         }));
       });
-    })
-      .then();
+    }).finally();
   }
-  getOptionIndex(value) {
-    return this.selectedOptions.findIndex(option => option.value === value.value && option.name === value.name);
+  selectedValueIndex(value) {
+    return this.selectedOptionsState.findIndex((selected) => selected === value);
   }
   getOptionElement(value) {
-    return this.selectRef.querySelector('option[value="' + value.value + '"]');
+    return this.selectRef.querySelector('option[value="' + value + '"]');
+  }
+  getOption(value) {
+    var _a;
+    return (_a = this.getAvailableOptions(true).find((option) => option.value === value)) !== null && _a !== void 0 ? _a : null;
   }
   selectOption(newOption, notify = true) {
-    const index = this.getOptionIndex(newOption);
+    const index = this.selectedValueIndex(newOption);
     if (index === -1) {
-      this.selectedOptions = [...this.selectedOptions, newOption];
+      this.selectedOptionsState = [...this.selectedOptionsState, newOption];
+      this.value = this.selectedOptionsState;
       if (notify) {
         this.govChange.emit({
           component: FormMultiSelectClass.root,
-          value: this.selectedOptions,
+          value: this.selectedOptionsState,
         });
         this.govSelect.emit({
           component: FormMultiSelectClass.root,
-          value: this.selectedOptions,
+          value: this.selectedOptionsState,
         });
       }
       const option = this.getOptionElement(newOption);
@@ -8631,18 +8690,19 @@ class GovFormMultiSelect {
     }
   }
   removeOption(removeOption, notify = true) {
-    const index = this.getOptionIndex(removeOption);
+    const index = this.selectedValueIndex(removeOption);
     if (index !== -1) {
-      this.selectedOptions.splice(index, 1);
-      this.selectedOptions = [...this.selectedOptions];
+      this.selectedOptionsState.splice(index, 1);
+      this.selectedOptionsState = [...this.selectedOptionsState];
+      this.value = this.selectedOptionsState;
       if (notify) {
         this.govChange.emit({
           component: FormMultiSelectClass.root,
-          value: this.selectedOptions,
+          value: this.selectedOptionsState,
         });
         this.govRemove.emit({
           component: FormMultiSelectClass.root,
-          value: this.selectedOptions,
+          value: this.selectedOptionsState,
         });
       }
       const option = this.getOptionElement(removeOption);
@@ -8653,13 +8713,14 @@ class GovFormMultiSelect {
   }
   async componentDidLoad() {
     this.initAutocomplete();
-    this.selectRef.querySelectorAll('option').forEach((option) => {
-      if (option.selected) {
-        this.selectOption({
-          name: option.textContent,
-          value: option.value,
-        }, false);
-      }
+  }
+  async componentDidRender() {
+    tick(() => {
+      this.selectRef.querySelectorAll('option').forEach((option) => {
+        if (option.selected) {
+          this.selectOption(option.value, false);
+        }
+      });
     });
     if (canValidateWcagOnRender()) {
       await delay(500);
@@ -8667,10 +8728,16 @@ class GovFormMultiSelect {
     }
   }
   render() {
-    return (hAsync(Host, { class: FormMultiSelectClass.root, size: this.size, variant: this.variant }, hAsync("div", { class: FormMultiSelectClass.wrap }, hAsync("div", { class: "element" }, hAsync("gov-form-autocomplete", { value: this.value, disabled: this.disabled, identifier: this.identifier || this.selectId, required: false, size: this.size, variant: this.variant, placeholder: this.placeholder, "message-empty": this.messageEmpty, "message-loading": this.messageLoading, ref: el => (this.autocompleteRef = el), minlength: 0, wcagDescribedBy: this.wcagDescribedBy, wcagLabelledBy: this.wcagLabelledBy, wcagOwns: this.listId }), hAsync("gov-icon", { slot: "right-icon", class: "icon-arrow", name: "chevron-down" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && hAsync("slot", { name: "right-icon" }), this.success && hAsync("gov-icon", { slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && hAsync("gov-icon", { slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync("select", { hidden: true, "aria-hidden": toBoolAttr(true), multiple: true, required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, hAsync("slot", null), this.options.map((option) => {
-      return (hAsync("option", { value: option.value, selected: option.value === this.value, disabled: option === null || option === void 0 ? void 0 : option.disabled }, option.name));
-    })))), this.hideSelectedList === false ? (hAsync("ul", { role: "listbox", id: this.listId, class: FormMultiSelectClass.list }, this.selectedOptions.map(option => {
-      return (hAsync("li", { class: FormMultiSelectClass.item, role: "option" }, option.name, hAsync("gov-button", { wcagLabel: 'Odebrat vybranou položku ' + option.name, variant: "primary", type: "base", size: "s", "on-gov-click": () => this.onTagRemove(option) }, hAsync("gov-icon", { name: "x-lg" }))));
+    return (hAsync(Host, { class: FormMultiSelectClass.root, size: this.size, variant: this.variant }, hAsync("div", { class: FormMultiSelectClass.wrap }, hAsync("div", { class: "element" }, hAsync("gov-form-autocomplete", { value: this.valueState, disabled: this.disabled, identifier: this.identifier || this.selectId, required: false, size: this.size, variant: this.variant, placeholder: this.placeholder, "message-empty": this.messageEmpty, "message-loading": this.messageLoading, ref: el => (this.autocompleteRef = el), minlength: 0, wcagDescribedBy: this.wcagDescribedBy, wcagLabelledBy: this.wcagLabelledBy, wcagOwns: this.listId }), hAsync("gov-icon", { slot: "right-icon", class: "icon-arrow", name: "chevron-down" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && hAsync("slot", { name: "right-icon" }), this.success && hAsync("gov-icon", { slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && hAsync("gov-icon", { slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync("select", { hidden: true, class: 'hidden-select-list', "aria-hidden": toBoolAttr(true), multiple: true, required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, hAsync("slot", null), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
+      var _a;
+      const selectedOption = this.selectedValueIndex(option.value);
+      return (hAsync("option", { value: option.value, selected: selectedOption > -1, disabled: option === null || option === void 0 ? void 0 : option.disabled }, (_a = option.name) !== null && _a !== void 0 ? _a : option.value));
+    })))), this.hideSelectedList === false ? (hAsync("ul", { role: "listbox", id: this.listId, class: FormMultiSelectClass.list }, Array.isArray(this.selectedOptionsState) && this.selectedOptionsState.map(selected => {
+      var _a, _b;
+      const option = this.getOption(selected);
+      if (!option)
+        return null;
+      return (hAsync("li", { class: FormMultiSelectClass.item, role: "option" }, (_a = option.name) !== null && _a !== void 0 ? _a : option.value, hAsync("gov-button", { wcagLabel: (_b = 'Odebrat vybranou položku ' + option.name) !== null && _b !== void 0 ? _b : option.value, variant: "primary", type: "base", size: "s", "on-gov-click": () => this.onTagRemove(selected) }, hAsync("gov-icon", { name: "x-lg" }))));
     }))) : null));
   }
   onFocusHandler(e) {
@@ -8679,7 +8746,7 @@ class GovFormMultiSelect {
     this.govFocus.emit({
       component: FormMultiSelectClass.root,
       originalEvent: e,
-      value: this.selectedOptions,
+      value: this.selectedOptionsState,
     });
   }
   onBlurHandler(e) {
@@ -8689,19 +8756,19 @@ class GovFormMultiSelect {
     this.govBlur.emit({
       component: FormMultiSelectClass.root,
       originalEvent: e,
-      value: this.selectedOptions,
+      value: this.selectedOptionsState,
     });
   }
   onInputHandler(e) {
-    this.value = e.detail.value;
+    this.valueState = e.detail.value;
     e.stopPropagation();
   }
   onSelectHandler(e) {
     e.stopPropagation();
     const value = e.detail.selected;
-    this.selectOption(value);
-    this.value = '';
-    this.autocompleteRef.clearValue();
+    this.selectOption(value.value);
+    this.valueState = '';
+    this.autocompleteRef.clearValue().finally();
     this.autocompleteRef.focus();
   }
   onTagRemove(removeOption) {
@@ -8717,7 +8784,7 @@ class GovFormMultiSelect {
    * Sets the ordered value of the element
    */
   async setValue(value) {
-    this.value = value;
+    this.valueState = value;
   }
   /**
    * Returns an instance of the native html select element
@@ -8725,50 +8792,6 @@ class GovFormMultiSelect {
   async getRef() {
     return this.selectRef;
   }
-  /**
-   * Returns a list of selected items
-   */
-  async getSelectedOptions() {
-    return this.selectedOptions;
-  }
-  /**
-   * Setting a list of options to choose from
-   */
-  async setOptions(options) {
-    if (Array.isArray(options)) {
-      this.options = [...options];
-    }
-  }
-  /**
-   * Returns all available options
-   */
-  async getOptions(ignoreFilter = true) {
-    return this.getAvailableOptions(ignoreFilter);
-  }
-  /**
-   * Setting the list of selected options
-   */
-  async setSelectedOptions(options) {
-    if (Array.isArray(options)) {
-      this.selectedOptions = [...options];
-    }
-  }
-  /**
-   * To remove an option from the selected list
-   */
-  async removeSelectedOption(option, notify = false) {
-    if (typeof option === 'object' && hasOwnProperty(option, 'name') && hasOwnProperty(option, 'value')) {
-      this.removeOption(option, notify);
-    }
-  }
-  /**
-   * Returns an instance of the native html select element
-   */
-  async setSelectedOption(option, notify = false) {
-    if (typeof option === 'object' && hasOwnProperty(option, 'name') && hasOwnProperty(option, 'value')) {
-      this.selectOption(option, notify);
-    }
-  }
   /**
    * Validate the WCAG attributes of the component
    */
@@ -8782,6 +8805,8 @@ class GovFormMultiSelect {
   static get watchers() { return {
     "variant": ["validateVariant"],
     "size": ["validateSize", "watchDisabled"],
+    "options": ["watchOptions"],
+    "value": ["watchValue"],
     "disabled": ["watchDisabled"],
     "invalid": ["watchDisabled"],
     "success": ["watchDisabled"]
@@ -8791,6 +8816,8 @@ class GovFormMultiSelect {
     "$flags$": 4,
     "$tagName$": "gov-form-multi-select",
     "$members$": {
+      "value": [1537],
+      "options": [1537],
       "identifier": [1],
       "placeholder": [1],
       "variant": [1],
@@ -8807,23 +8834,17 @@ class GovFormMultiSelect {
       "wcagLabelledBy": [1, "wcag-labelled-by"],
       "wcagOwns": [1, "wcag-owns"],
       "focused": [32],
-      "value": [32],
-      "selectedOptions": [32],
-      "options": [32],
+      "valueState": [32],
+      "selectedOptionsState": [32],
+      "optionsState": [32],
       "setFocus": [64],
       "setValue": [64],
       "getRef": [64],
-      "getSelectedOptions": [64],
-      "setOptions": [64],
-      "getOptions": [64],
-      "setSelectedOptions": [64],
-      "removeSelectedOption": [64],
-      "setSelectedOption": [64],
       "validateWcag": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
+    "$attrsToReflect$": [["value", "value"], ["options", "options"]]
   }; }
 }
 
@@ -9026,6 +9047,7 @@ class GovFormSelect {
     this.govBlur = createEvent(this, "gov-blur", 7);
     this.govChange = createEvent(this, "gov-change", 7);
     this.value = undefined;
+    this.options = undefined;
     this.identifier = undefined;
     this.variant = 'secondary';
     this.size = 'm';
@@ -9040,7 +9062,7 @@ class GovFormSelect {
     this.wcagLabelledBy = undefined;
     this.wcagOwns = undefined;
     this.focused = undefined;
-    this.options = [];
+    this.optionsState = [];
     this.h = govHost(this.host);
     this.f = govForm(this.h);
     this.selectId = createID('GovSelect');
@@ -9051,6 +9073,9 @@ class GovFormSelect {
   validateSize(newValue) {
     validateProp(FormSelectSizes, newValue, FormSelectClass.root);
   }
+  watchOptions(newValue) {
+    this.optionsState = propsValueToArray(newValue);
+  }
   watchDisabled() {
     this.passControlAttrs();
   }
@@ -9068,12 +9093,14 @@ class GovFormSelect {
     this.markSelectedValue();
     this.passControlAttrs();
     this.f.passAttrToLabel('required', String(this.required));
+    this.optionsState = propsValueToArray(this.options);
   }
   async componentDidRender() {
     if (canValidateWcagOnRender()) {
       await delay(500);
       await this.validateWcag();
     }
+    tick(() => this.markSelectedValue());
   }
   markSelectedValue() {
     this.host.querySelectorAll('option').forEach((option) => {
@@ -9086,8 +9113,9 @@ class GovFormSelect {
     });
   }
   render() {
-    return (hAsync(Host, { class: FormSelectClass.root, size: this.size, variant: this.variant }, this.h.hasSlot('prefix') && hAsync("slot", { name: "prefix" }), hAsync("span", { class: "element" }, hAsync("gov-icon", { slot: "right-icon", name: "chevron-down", class: "icon-arrow" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && hAsync("slot", { name: "right-icon" }), this.success && hAsync("gov-icon", { slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && hAsync("gov-icon", { slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync("select", { id: this.identifier || this.selectId, onFocus: this.onFocusHandler.bind(this), onChange: this.onChangeHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-activedescendant": this.wcagActiveDescendant, "aria-controls": this.wcagControls, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, hAsync("slot", null), this.options.map((option) => {
-      return (hAsync("option", { value: option.value, selected: option.value === this.value, disabled: option === null || option === void 0 ? void 0 : option.disabled }, option.label));
+    return (hAsync(Host, { class: FormSelectClass.root, size: this.size, variant: this.variant }, this.h.hasSlot('prefix') && hAsync("slot", { name: "prefix" }), hAsync("span", { class: "element" }, hAsync("gov-icon", { slot: "right-icon", name: "chevron-down", class: "icon-arrow" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && hAsync("slot", { name: "right-icon" }), this.success && hAsync("gov-icon", { slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && hAsync("gov-icon", { slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync("select", { id: this.identifier || this.selectId, onFocus: this.onFocusHandler.bind(this), onChange: this.onChangeHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-activedescendant": this.wcagActiveDescendant, "aria-controls": this.wcagControls, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, hAsync("slot", null), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
+      var _a;
+      return (hAsync("option", { value: option.value, selected: option.value === this.value, disabled: option === null || option === void 0 ? void 0 : option.disabled }, (_a = option.label) !== null && _a !== void 0 ? _a : option.value));
     }))), this.h.hasSlot('sufix') && hAsync("slot", { name: "sufix" })));
   }
   onFocusHandler(e) {
@@ -9121,26 +9149,12 @@ class GovFormSelect {
   async setFocus(options) {
     return this.selectRef.focus(options);
   }
-  /**
-   * Sets the ordered value of the element
-   */
-  async setValue(value) {
-    this.value = value;
-  }
   /**
    * Returns an instance of the native html select element
    */
   async getRef() {
     return this.selectRef;
   }
-  /**
-   * Sets the selection options
-   */
-  async setOptions(options) {
-    if (Array.isArray(options)) {
-      this.options = options;
-    }
-  }
   /**
    * Validate the WCAG attributes of the component
    */
@@ -9155,6 +9169,7 @@ class GovFormSelect {
   static get watchers() { return {
     "variant": ["validateVariant"],
     "size": ["validateSize", "watchDisabled"],
+    "options": ["watchOptions"],
     "disabled": ["watchDisabled"],
     "invalid": ["watchDisabled"],
     "value": ["watchValue"]
@@ -9165,6 +9180,7 @@ class GovFormSelect {
     "$tagName$": "gov-form-select",
     "$members$": {
       "value": [1537],
+      "options": [1537],
       "identifier": [1],
       "variant": [1],
       "size": [1],
@@ -9179,16 +9195,14 @@ class GovFormSelect {
       "wcagLabelledBy": [1, "wcag-labelled-by"],
       "wcagOwns": [1, "wcag-owns"],
       "focused": [32],
-      "options": [32],
+      "optionsState": [32],
       "setFocus": [64],
-      "setValue": [64],
       "getRef": [64],
-      "setOptions": [64],
       "validateWcag": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["value", "value"]]
+    "$attrsToReflect$": [["value", "value"], ["options", "options"]]
   }; }
 }
 
@@ -9995,13 +10009,6 @@ function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 10) {
   };
 }
 
-const createArrayRange = (from, to) => {
-  if (Number.isInteger(from) && Number.isInteger(to)) {
-    return [...Array(to + 1).keys()].slice(from);
-  }
-  return [];
-};
-
 const govPaginationCss = ".gov-pagination__list{margin:0;padding:0}.gov-pagination__list .gov-pagination__item{margin:0;padding:0;background:none}.gov-pagination__list .gov-pagination__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-pagination{position:relative;display:block;width:100%}.gov-pagination__list{display:flex;align-items:center;flex-wrap:wrap;font-weight:bold;text-align:center}.gov-pagination__list .gov-pagination__item{display:flex;justify-content:center;align-items:center;margin:0;padding:0.125rem;border-radius:var(--gov-border-radius, 0.1875rem);overflow:hidden}.gov-pagination__list .gov-pagination__item--arrow{display:flex}.gov-pagination__list .gov-pagination__item--select{z-index:1;display:flex;overflow:visible;padding:0rem 1rem}.gov-pagination__arrow{margin:0}.gov-pagination__item--more .gov-form-select select{border:none !important;padding-right:0.75rem !important}.gov-pagination__item--more .gov-form-select .gov-icon{display:none}.gov-pagination__inner{display:flex;justify-content:center;align-items:center;align-self:stretch;width:100%;text-decoration:none}.gov-pagination__inner[wcag-current=true][type=solid][variant=primary] .element{background-color:var(--gov-button-primary-solid-hover-bg, var(--gov-color-primary-700));color:var(--gov-button-primary-solid-hover-color, var(--gov-color-neutral-white))}.gov-pagination__inner[wcag-current=true][type=outlined][variant=primary] .element{background-color:var(--gov-button-primary-outlined-hover-bg, var(--gov-color-primary-100));color:var(--gov-button-primary-outlined-hover-color, var(--gov-color-primary))}.gov-pagination__inner[wcag-current=true][type=base][variant=primary] .element{background-color:var(--gov-button-primary-base-hover-bg, var(--gov-color-primary-100));color:var(--gov-button-primary-base-hover-color, var(--gov-color-primary))}.gov-pagination__inner[wcag-current=true][type=link][variant=primary] .element{background-color:var(--gov-button-primary-link-hover-bg, transparent);color:var(--gov-button-primary-link-hover-color, var(--gov-color-primary))}.gov-pagination__inner[wcag-current=true][type=solid][variant=secondary] .element{background-color:var(--gov-button-secondary-solid-hover-bg, var(--gov-color-secondary-900));color:var(--gov-button-secondary-solid-hover-color, var(--gov-color-neutral-white))}.gov-pagination__inner[wcag-current=true][type=outlined][variant=secondary] .element{background-color:var(--gov-button-secondary-outlined-hover-bg, var(--gov-color-secondary-300));color:var(--gov-button-secondary-outlined-hover-color, var(--gov-color-secondary))}.gov-pagination__inner[wcag-current=true][type=base][variant=secondary] .element{background-color:var(--gov-button-secondary-base-hover-bg, var(--gov-color-secondary-300));color:var(--gov-button-secondary-base-hover-color, var(--gov-color-secondary))}.gov-pagination__inner[wcag-current=true][type=link][variant=secondary] .element{background-color:var(--gov-button-secondary-link-hover-bg, transparent);color:var(--gov-button-secondary-link-hover-color, var(--gov-color-secondary))}.gov-pagination__inner[wcag-current=true][type=solid][variant=error] .element{background-color:var(--gov-button-error-solid-hover-bg, var(--gov-color-error-500));color:var(--gov-button-error-solid-hover-color, var(--gov-color-neutral-white))}.gov-pagination__inner[wcag-current=true][type=outlined][variant=error] .element{background-color:var(--gov-button-error-outlined-hover-bg, var(--gov-color-error-100));color:var(--gov-button-error-outlined-hover-color, var(--gov-color-error))}.gov-pagination__inner[wcag-current=true][type=base][variant=error] .element{background-color:var(--gov-button-error-base-hover-bg, var(--gov-color-error-100));color:var(--gov-button-error-base-hover-color, var(--gov-color-error))}.gov-pagination__inner[wcag-current=true][type=link][variant=error] .element{background-color:var(--gov-button-error-link-hover-bg, transparent);color:var(--gov-button-error-link-hover-color, var(--gov-color-error))}.gov-pagination__inner[wcag-current=true][type=solid][variant=success] .element{background-color:var(--gov-button-success-solid-hover-bg, var(--gov-color-success-600));color:var(--gov-button-success-solid-hover-color, var(--gov-color-neutral-white))}.gov-pagination__inner[wcag-current=true][type=outlined][variant=success] .element{background-color:var(--gov-button-success-outlined-hover-bg, var(--gov-color-success-100));color:var(--gov-button-success-outlined-hover-color, var(--gov-color-success-500))}.gov-pagination__inner[wcag-current=true][type=base][variant=success] .element{background-color:var(--gov-button-success-base-hover-bg, var(--gov-color-success-100));color:var(--gov-button-success-base-hover-color, var(--gov-color-success-500))}.gov-pagination__inner[wcag-current=true][type=link][variant=success] .element{background-color:var(--gov-button-success-link-hover-bg, transparent);color:var(--gov-button-success-link-hover-color, var(--gov-color-success-500))}.gov-pagination__inner[wcag-current=true][type=solid][variant=warning] .element{background-color:var(--gov-button-warning-solid-hover-bg, var(--gov-color-warning-600));color:var(--gov-button-warning-solid-hover-color, var(--gov-color-neutral-white))}.gov-pagination__inner[wcag-current=true][type=outlined][variant=warning] .element{background-color:var(--gov-button-warning-outlined-hover-bg, var(--gov-color-warning-200));color:var(--gov-button-warning-outlined-hover-color, var(--gov-color-warning-500))}.gov-pagination__inner[wcag-current=true][type=base][variant=warning] .element{background-color:var(--gov-button-warning-base-hover-bg, var(--gov-color-warning-200));color:var(--gov-button-warning-base-hover-color, var(--gov-color-warning-500))}.gov-pagination__inner[wcag-current=true][type=link][variant=warning] .element{background-color:var(--gov-button-warning-link-hover-bg, transparent);color:var(--gov-button-warning-link-hover-color, var(--gov-color-warning-500))}.gov-pagination[size=s] .gov-pagination__inner{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);font-weight:inherit}.gov-pagination[size=s] .gov-pagination__inner .element{min-width:var(--gov-pagination-s-button-size, 2rem)}.gov-pagination[size=m] .gov-pagination__inner{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);font-weight:inherit}.gov-pagination[size=m] .gov-pagination__inner .element{min-width:var(--gov-pagination-m-button-size, 2.5rem)}";
 
 class GovPagination {
@@ -10083,7 +10090,7 @@ class GovPagination {
       const ariaCurrent = toBoolAttrIfDefined(this.pagination.currentPage === page ? true : undefined);
       return (hAsync("gov-button", { href: this.prepareLinkUrl(page), variant: this.variant, size: this.size, type: "base", disabled: isDisabled, "on-gov-click": (e) => this.onClickHandler(e, page), "wcag-label": description ? description : page > -1 ? this.wcagPageLabel + " " + page : undefined, "wcag-current": ariaCurrent, class: PaginationClass.inner }, content));
     };
-    return (hAsync(Host, { class: this.h.classes(PaginationClass.root), type: this.type, variant: this.variant, size: this.size }, hAsync("nav", { "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy }, hAsync("ul", { class: PaginationClass.list }, hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.currentPage > 1 ? 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-left" }), this.labelStart)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-left" }), this.labelPrev)), this.type == "select" ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemSelect]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: "m", variant: this.variant, "wcag-labelled-by": this.pageSelectId, "on-gov-change": this.onSelectHandler.bind(this) }, createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: this.pagination.currentPage === page }, page))))))) : (hAsync(Fragment, null, this.pagination.pages.map(page => (hAsync("li", { class: this.isActivePageClass(PaginationClass.item, page) }, pageResolver(page, page, '')))), this.pagination.totalPages ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemMore]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: "m", variant: this.variant, "wcag-labelled-by": this.pageSelectId, ref: el => (this.spreadSelectRef = el), "on-gov-change": this.onSelectHandler.bind(this) }, hAsync("option", { selected: true, hidden: true }, "..."), createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: false }, page))))))) : null)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-right" }), this.labelNext)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-right" }), this.labelEnd))))));
+    return (hAsync(Host, { class: this.h.classes(PaginationClass.root), type: this.type, variant: this.variant, size: this.size }, hAsync("nav", { "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy }, hAsync("ul", { class: PaginationClass.list }, hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.currentPage > 1 ? 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-left" }), this.labelStart)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-left" }), this.labelPrev)), this.type == "select" ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemSelect]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: this.size, variant: this.variant, "wcag-labelled-by": this.pageSelectId, "on-gov-change": this.onSelectHandler.bind(this) }, createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: this.pagination.currentPage === page }, page))))))) : (hAsync(Fragment, null, this.pagination.pages.map(page => (hAsync("li", { class: this.isActivePageClass(PaginationClass.item, page) }, pageResolver(page, page, '')))), this.pagination.totalPages ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemMore]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: this.size, variant: this.variant, "wcag-labelled-by": this.pageSelectId, ref: el => (this.spreadSelectRef = el), "on-gov-change": this.onSelectHandler.bind(this) }, hAsync("option", { selected: true, hidden: true }, "..."), createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: false }, page))))))) : null)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-right" }), this.labelNext)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-right" }), this.labelEnd))))));
   }
   onClickHandler(e, page) {
     e.stopPropagation();