@abgov/web-components 1.0.0-alpha.166 → 1.0.0-alpha.168

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/web-components",
-  "version": "1.0.0-alpha.166",
+  "version": "1.0.0-alpha.168",
   "description": "Government of Alberta - UI Web components",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/web-components.es.js

@@ -1203,7 +1203,7 @@ class Accordion extends SvelteElement {
 		super();
 
 		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-accordion,.goa-accordion *{box-sizing:border-box}summary{min-height:3.5rem;border-width:var(--goa-border-width-s);border-style:solid;border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-text-default);;;padding:0.875rem 1rem 0 0;cursor:pointer;list-style:none;display:flex;align-items:flex-start;position:relative}summary.container-medium{min-height:4rem}summary::marker,summary::-webkit-details-marker{display:none}summary .title{display:flex;align-items:center;flex:1}.title span{padding-bottom:var(--goa-space-3xs, 0)}summary .heading{font:var(--goa-typography-heading-s);padding-right:1rem}summary .secondary-text{font:var(--goa-typography-body-s);line-height:1.5rem;padding-right:1rem}summary .heading-content{flex:1
-  }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start}}</style>`;
+  }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}.content ::slotted(p:last-child){margin-bottom:0 !important}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start}}</style>`;
 
 		init(
 			this,
@@ -5038,7 +5038,7 @@ function instance$v($$self, $$props, $$invalidate) {
 class Container extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-container{box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--goa-font-size-4);border-width:1px;border-style:solid;border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.content{border-bottom:1px solid var(--goa-color-greyscale-200);border-left:1px solid var(--goa-color-greyscale-200);border-right:1px solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.goa-container--non-interactive.accent--filled .content{border-color:var(--goa-color-greyscale-200);background-color:var(--goa-color-greyscale-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-warning-default);background-color:var(--goa-color-warning-background)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-emergency-background)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-success-default);background-color:var(--goa-color-success-background)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-info-default);background-color:var(--goa-color-info-background)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-greyscale-black)}.goa-container--interactive header{background-color:var(--goa-color-brand-default);border-color:var(--goa-color-brand-default);color:var(--goa-color-greyscale-white)}.goa-container--info header{background-color:var(--goa-color-info-default);border-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.goa-container--error header{background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.goa-container--success header{background-color:var(--goa-color-success-default);border-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.goa-container--important header{background-color:var(--goa-color-warning-default);border-color:var(--goa-color-warning-default);color:var(--goa-color-greyscale-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--goa-color-greyscale-200);border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-container{box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--goa-font-size-4);border-width:1px;border-style:solid;border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.content{border-bottom:1px solid var(--goa-color-greyscale-200);border-left:1px solid var(--goa-color-greyscale-200);border-right:1px solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.content ::slotted(p:last-child){margin-bottom:0 !important}.goa-container--non-interactive.accent--filled .content{border-color:var(--goa-color-greyscale-200);background-color:var(--goa-color-greyscale-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-warning-default);background-color:var(--goa-color-warning-background)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-emergency-default);background-color:var(--goa-color-emergency-background)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-success-default);background-color:var(--goa-color-success-background)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-info-default);background-color:var(--goa-color-info-background)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-greyscale-black)}.goa-container--interactive header{background-color:var(--goa-color-brand-default);border-color:var(--goa-color-brand-default);color:var(--goa-color-greyscale-white)}.goa-container--info header{background-color:var(--goa-color-info-default);border-color:var(--goa-color-info-default);color:var(--goa-color-greyscale-white)}.goa-container--error header{background-color:var(--goa-color-emergency-default);border-color:var(--goa-color-emergency-default);color:var(--goa-color-greyscale-white)}.goa-container--success header{background-color:var(--goa-color-success-default);border-color:var(--goa-color-success-default);color:var(--goa-color-greyscale-white)}.goa-container--important header{background-color:var(--goa-color-warning-default);border-color:var(--goa-color-warning-default);color:var(--goa-color-greyscale-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--goa-color-greyscale-200);border-top-left-radius:var(--goa-border-radius-m);border-top-right-radius:var(--goa-border-radius-m)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
 
 		init(
 			this,
@@ -5266,7 +5266,7 @@ function instance$u($$self, $$props, $$invalidate) {
 class Details extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{font-family:var(--goa-font-family-sans)}details{max-width:75ch;position:relative}details ::slotted(*){font:var(--goa-typography-body-m)}summary{padding:0.5rem;margin-bottom:0.5rem;cursor:pointer;list-style:none;display:flex;align-items:flex-start}goa-icon{position:absolute}details[open] goa-icon{transform:translateX(-1px) rotate(90deg);top:0.75rem}details summary::-webkit-details-marker{display:none}summary{border-radius:var(--goa-border-radius-m)}summary:focus,summary:active{outline:3px solid var(--goa-color-interactive-focus);border-radius:var(--goa-border-radius-m);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}summary:hover{background-color:var(--goa-color-greyscale-100)}summary span{margin-left:2rem;text-decoration:underline;color:var(--goa-color-interactive-default);padding-bottom:var(--font-valign-fix);line-height:var(--goa-line-height-3)}summary:hover span{color:var(--goa-color-interactive-hover)}.content{border-left:4px solid var(--goa-color-greyscale-200);padding:1rem;margin-left:1.1rem;margin-bottom:var(--goa-space-s)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{font-family:var(--goa-font-family-sans)}details{max-width:75ch;position:relative}details ::slotted(*){font:var(--goa-typography-body-m)}summary{padding:0.5rem;margin-bottom:0.5rem;cursor:pointer;list-style:none;display:flex;align-items:flex-start}goa-icon{position:absolute}details[open] goa-icon{transform:translateX(-1px) rotate(90deg);top:0.75rem}details summary::-webkit-details-marker{display:none}summary{border-radius:var(--goa-border-radius-m)}summary:focus,summary:active{outline:3px solid var(--goa-color-interactive-focus);border-radius:var(--goa-border-radius-m);color:var(--goa-color-interactive-hover);background-color:var(--goa-color-greyscale-100)}summary:hover{background-color:var(--goa-color-greyscale-100)}summary span{margin-left:2rem;text-decoration:underline;color:var(--goa-color-interactive-default);padding-bottom:var(--font-valign-fix);line-height:var(--goa-line-height-3)}summary:hover span{color:var(--goa-color-interactive-hover)}.content{border-left:4px solid var(--goa-color-greyscale-200);padding:1rem;margin-left:1.1rem;margin-bottom:var(--goa-space-s)}.content ::slotted(p:last-child){margin-bottom:0 !important}</style>`;
 
 		init(
 			this,
@@ -5484,18 +5484,18 @@ customElements.define("goa-divider", Divider);
 
 function get_each_context_1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[49] = list[i];
-	child_ctx[53] = i;
+	child_ctx[48] = list[i];
+	child_ctx[52] = i;
 	return child_ctx;
 }
 
 function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[49] = list[i];
+	child_ctx[48] = list[i];
 	return child_ctx;
 }
 
-// (256:2) {:else}
+// (259:2) {:else}
 function create_else_block$5(ctx) {
 	let t0;
 	let goa_input;
@@ -5510,9 +5510,9 @@ function create_else_block$5(ctx) {
 	let ul_style_value;
 	let mounted;
 	let dispose;
-	let if_block = /*_isMenuVisible*/ ctx[15] && create_if_block_1$7(ctx);
-	let each_value_1 = /*_options*/ ctx[13];
-	const get_key = ctx => /*index*/ ctx[53];
+	let if_block = /*_isMenuVisible*/ ctx[17] && create_if_block_1$7(ctx);
+	let each_value_1 = /*_options*/ ctx[12];
+	const get_key = ctx => /*index*/ ctx[52];
 
 	for (let i = 0; i < each_value_1.length; i += 1) {
 		let child_ctx = get_each_context_1(ctx, each_value_1, i);
@@ -5539,24 +5539,24 @@ function create_else_block$5(ctx) {
 			set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[2]);
 			set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
 			set_custom_element_data(goa_input, "aria-controls", "menu");
-			set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[15]);
+			set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[17]);
 			set_custom_element_data(goa_input, "arialabel", goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
 			set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value = `${/*name*/ ctx[0]}-dropdown-input`);
 			set_custom_element_data(goa_input, "readonly", "");
 			set_custom_element_data(goa_input, "role", "combobox");
 			set_custom_element_data(goa_input, "trailingicon", "chevron-down");
 			set_custom_element_data(goa_input, "type", "text");
-			set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[14]);
+			set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[16]);
 			set_custom_element_data(goa_input, "width", "100%");
 			set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
 			attr(ul, "id", "menu");
 			attr(ul, "role", "listbox");
-			attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[14]);
+			attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[16]);
 			attr(ul, "data-testid", "dropdown-menu");
 			attr(ul, "tabindex", "0");
 			attr(ul, "class", "dropdown-list");
 			attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}`);
-			toggle_class(ul, "dropdown-active", /*_isMenuVisible*/ ctx[15]);
+			toggle_class(ul, "dropdown-active", /*_isMenuVisible*/ ctx[17]);
 		},
 		m(target, anchor) {
 			if (if_block) if_block.m(target, anchor);
@@ -5579,7 +5579,7 @@ function create_else_block$5(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (/*_isMenuVisible*/ ctx[15]) {
+			if (/*_isMenuVisible*/ ctx[17]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -5608,8 +5608,8 @@ function create_else_block$5(ctx) {
 				set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[4]);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 32768) {
-				set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[15]);
+			if (dirty[0] & /*_isMenuVisible*/ 131072) {
+				set_custom_element_data(goa_input, "aria-expanded", /*_isMenuVisible*/ ctx[17]);
 			}
 
 			if (dirty[0] & /*arialabel, name*/ 3 && goa_input_arialabel_value !== (goa_input_arialabel_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
@@ -5620,29 +5620,29 @@ function create_else_block$5(ctx) {
 				set_custom_element_data(goa_input, "data-testid", goa_input_data_testid_value);
 			}
 
-			if (dirty[0] & /*_selectedLabel*/ 16384) {
-				set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[14]);
+			if (dirty[0] & /*_selectedLabel*/ 65536) {
+				set_custom_element_data(goa_input, "value", /*_selectedLabel*/ ctx[16]);
 			}
 
 			if (dirty[0] & /*name*/ 1) {
 				set_custom_element_data(goa_input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty[0] & /*_options, _values, _highlightedIndex, onSelect*/ 67186688) {
-				each_value_1 = /*_options*/ ctx[13];
+			if (dirty[0] & /*_options, _values, _highlightedIndex, onSelect*/ 67407872) {
+				each_value_1 = /*_options*/ ctx[12];
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value_1, each_1_lookup, ul, destroy_block, create_each_block_1, null, get_each_context_1);
 			}
 
-			if (dirty[0] & /*_selectedLabel*/ 16384) {
-				attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[14]);
+			if (dirty[0] & /*_selectedLabel*/ 65536) {
+				attr(ul, "aria-activedescendant", /*_selectedLabel*/ ctx[16]);
 			}
 
 			if (dirty[0] & /*maxheight*/ 8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}`)) {
 				attr(ul, "style", ul_style_value);
 			}
 
-			if (dirty[0] & /*_isMenuVisible*/ 32768) {
-				toggle_class(ul, "dropdown-active", /*_isMenuVisible*/ ctx[15]);
+			if (dirty[0] & /*_isMenuVisible*/ 131072) {
+				toggle_class(ul, "dropdown-active", /*_isMenuVisible*/ ctx[17]);
 			}
 		},
 		d(detaching) {
@@ -5665,14 +5665,14 @@ function create_else_block$5(ctx) {
 	};
 }
 
-// (237:2) {#if _native}
+// (240:2) {#if _native}
 function create_if_block$f(ctx) {
 	let select;
 	let slot;
 	let select_aria_label_value;
 	let mounted;
 	let dispose;
-	let each_value = /*_options*/ ctx[13];
+	let each_value = /*_options*/ ctx[12];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -5688,7 +5688,7 @@ function create_if_block$f(ctx) {
 				each_blocks[i].c();
 			}
 
-			select.disabled = /*_disabled*/ ctx[21];
+			select.disabled = /*_disabled*/ ctx[22];
 			attr(select, "aria-label", select_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0]);
 			toggle_class(select, "error", /*_error*/ ctx[23]);
 		},
@@ -5708,8 +5708,8 @@ function create_if_block$f(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*_options*/ 8192) {
-				each_value = /*_options*/ ctx[13];
+			if (dirty[0] & /*_options*/ 4096) {
+				each_value = /*_options*/ ctx[12];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -5731,8 +5731,8 @@ function create_if_block$f(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (dirty[0] & /*_disabled*/ 2097152) {
-				select.disabled = /*_disabled*/ ctx[21];
+			if (dirty[0] & /*_disabled*/ 4194304) {
+				select.disabled = /*_disabled*/ ctx[22];
 			}
 
 			if (dirty[0] & /*arialabel, name*/ 3 && select_aria_label_value !== (select_aria_label_value = /*arialabel*/ ctx[1] || /*name*/ ctx[0])) {
@@ -5753,7 +5753,7 @@ function create_if_block$f(ctx) {
 	};
 }
 
-// (257:4) {#if _isMenuVisible}
+// (260:4) {#if _isMenuVisible}
 function create_if_block_1$7(ctx) {
 	let div;
 	let div_data_testid_value;
@@ -5787,10 +5787,10 @@ function create_if_block_1$7(ctx) {
 	};
 }
 
-// (300:6) {#each _options as option, index (index)}
+// (303:6) {#each _options as option, index (index)}
 function create_each_block_1(key_1, ctx) {
 	let li;
-	let t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "";
+	let t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "";
 	let t0;
 	let t1;
 	let li_id_value;
@@ -5804,7 +5804,7 @@ function create_each_block_1(key_1, ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[32](/*option*/ ctx[49]);
+		return /*click_handler*/ ctx[32](/*option*/ ctx[48]);
 	}
 
 	return {
@@ -5814,22 +5814,22 @@ function create_each_block_1(key_1, ctx) {
 			li = element("li");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(li, "id", li_id_value = /*option*/ ctx[49].label);
+			attr(li, "id", li_id_value = /*option*/ ctx[48].label);
 			attr(li, "role", "option");
-			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value);
+			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[48].label || /*option*/ ctx[48].value);
 
-			attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[49].value)
+			attr(li, "aria-selected", li_aria_selected_value = /*_values*/ ctx[15].includes(/*option*/ ctx[48].value)
 			? "true"
 			: "false");
 
 			attr(li, "class", "dropdown-item");
-			attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`);
-			attr(li, "data-index", li_data_index_value = /*index*/ ctx[53]);
-			attr(li, "data-value", li_data_value_value = /*option*/ ctx[49].value);
+			attr(li, "data-testid", li_data_testid_value = `dropdown-item-${/*option*/ ctx[48].value}`);
+			attr(li, "data-index", li_data_index_value = /*index*/ ctx[52]);
+			attr(li, "data-value", li_data_value_value = /*option*/ ctx[48].value);
 			attr(li, "style", li_style_value = `display: ${"block"}`);
 			toggle_class(li, "dropdown-item--disabled", false);
-			toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[16]);
-			toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[49].value));
+			toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[52] === /*_highlightedIndex*/ ctx[18]);
+			toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[15].includes(/*option*/ ctx[48].value));
 			this.first = li;
 		},
 		m(target, anchor) {
@@ -5844,40 +5844,40 @@ function create_each_block_1(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = (/*option*/ ctx[49].label || /*option*/ ctx[49].value) + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_options*/ 4096 && t0_value !== (t0_value = (/*option*/ ctx[48].label || /*option*/ ctx[48].value) + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*_options*/ 8192 && li_id_value !== (li_id_value = /*option*/ ctx[49].label)) {
+			if (dirty[0] & /*_options*/ 4096 && li_id_value !== (li_id_value = /*option*/ ctx[48].label)) {
 				attr(li, "id", li_id_value);
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[49].label || /*option*/ ctx[49].value)) {
+			if (dirty[0] & /*_options*/ 4096 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[48].label || /*option*/ ctx[48].value)) {
 				attr(li, "aria-label", li_aria_label_value);
 			}
 
-			if (dirty[0] & /*_values, _options*/ 12288 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[12].includes(/*option*/ ctx[49].value)
+			if (dirty[0] & /*_values, _options*/ 36864 && li_aria_selected_value !== (li_aria_selected_value = /*_values*/ ctx[15].includes(/*option*/ ctx[48].value)
 			? "true"
 			: "false")) {
 				attr(li, "aria-selected", li_aria_selected_value);
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[49].value}`)) {
+			if (dirty[0] & /*_options*/ 4096 && li_data_testid_value !== (li_data_testid_value = `dropdown-item-${/*option*/ ctx[48].value}`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[53])) {
+			if (dirty[0] & /*_options*/ 4096 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[52])) {
 				attr(li, "data-index", li_data_index_value);
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[49].value)) {
+			if (dirty[0] & /*_options*/ 4096 && li_data_value_value !== (li_data_value_value = /*option*/ ctx[48].value)) {
 				attr(li, "data-value", li_data_value_value);
 			}
 
-			if (dirty[0] & /*_options, _highlightedIndex*/ 73728) {
-				toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[53] === /*_highlightedIndex*/ ctx[16]);
+			if (dirty[0] & /*_options, _highlightedIndex*/ 266240) {
+				toggle_class(li, "dropdown-item--tabbed", /*index*/ ctx[52] === /*_highlightedIndex*/ ctx[18]);
 			}
 
-			if (dirty[0] & /*_values, _options*/ 12288) {
-				toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[12].includes(/*option*/ ctx[49].value));
+			if (dirty[0] & /*_values, _options*/ 36864) {
+				toggle_class(li, "dropdown-item--selected", /*_values*/ ctx[15].includes(/*option*/ ctx[48].value));
 			}
 		},
 		d(detaching) {
@@ -5888,10 +5888,10 @@ function create_each_block_1(key_1, ctx) {
 	};
 }
 
-// (246:6) {#each _options as option}
+// (249:6) {#each _options as option}
 function create_each_block$4(ctx) {
 	let option;
-	let t0_value = /*option*/ ctx[49].label + "";
+	let t0_value = /*option*/ ctx[48].label + "";
 	let t0;
 	let t1;
 	let option_selected_value;
@@ -5903,10 +5903,10 @@ function create_each_block$4(ctx) {
 			option = element("option");
 			t0 = text(t0_value);
 			t1 = space();
-			option.selected = option_selected_value = /*option*/ ctx[49].selected;
-			option.__value = option_value_value = /*option*/ ctx[49].value;
+			option.selected = option_selected_value = /*option*/ ctx[48].selected;
+			option.__value = option_value_value = /*option*/ ctx[48].value;
 			option.value = option.__value;
-			attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[49].label);
+			attr(option, "aria-label", option_aria_label_value = /*option*/ ctx[48].label);
 		},
 		m(target, anchor) {
 			insert(target, option, anchor);
@@ -5914,18 +5914,18 @@ function create_each_block$4(ctx) {
 			append(option, t1);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*_options*/ 8192 && t0_value !== (t0_value = /*option*/ ctx[49].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*_options*/ 4096 && t0_value !== (t0_value = /*option*/ ctx[48].label + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*_options*/ 8192 && option_selected_value !== (option_selected_value = /*option*/ ctx[49].selected)) {
+			if (dirty[0] & /*_options*/ 4096 && option_selected_value !== (option_selected_value = /*option*/ ctx[48].selected)) {
 				option.selected = option_selected_value;
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && option_value_value !== (option_value_value = /*option*/ ctx[49].value)) {
+			if (dirty[0] & /*_options*/ 4096 && option_value_value !== (option_value_value = /*option*/ ctx[48].value)) {
 				option.__value = option_value_value;
 				option.value = option.__value;
 			}
 
-			if (dirty[0] & /*_options*/ 8192 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[49].label)) {
+			if (dirty[0] & /*_options*/ 4096 && option_aria_label_value !== (option_aria_label_value = /*option*/ ctx[48].label)) {
 				attr(option, "aria-label", option_aria_label_value);
 			}
 		},
@@ -5941,7 +5941,7 @@ function create_fragment$v(ctx) {
 	let div_style_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*_native*/ ctx[22]) return create_if_block$f;
+		if (/*_native*/ ctx[14]) return create_if_block$f;
 		return create_else_block$5;
 	}
 
@@ -5958,10 +5958,10 @@ function create_fragment$v(ctx) {
 
 			attr(div, "style", div_style_value = `
     ${calculateMargin(/*mt*/ ctx[8], /*mr*/ ctx[9], /*mb*/ ctx[10], /*ml*/ ctx[11])}
-    --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[17]}
+    --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[19]}
   `);
 
-			toggle_class(div, "dropdown-native", /*_native*/ ctx[22]);
+			toggle_class(div, "dropdown-native", /*_native*/ ctx[14]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -5985,15 +5985,15 @@ function create_fragment$v(ctx) {
 				attr(div, "data-testid", div_data_testid_value);
 			}
 
-			if (dirty[0] & /*mt, mr, mb, ml, width, _computedWidth*/ 134944 && div_style_value !== (div_style_value = `
+			if (dirty[0] & /*mt, mr, mb, ml, width, _computedWidth*/ 528160 && div_style_value !== (div_style_value = `
     ${calculateMargin(/*mt*/ ctx[8], /*mr*/ ctx[9], /*mb*/ ctx[10], /*ml*/ ctx[11])}
-    --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[17]}
+    --width: ${/*width*/ ctx[5] || /*_computedWidth*/ ctx[19]}
   `)) {
 				attr(div, "style", div_style_value);
 			}
 
-			if (dirty[0] & /*_native*/ 4194304) {
-				toggle_class(div, "dropdown-native", /*_native*/ ctx[22]);
+			if (dirty[0] & /*_native*/ 16384) {
+				toggle_class(div, "dropdown-native", /*_native*/ ctx[14]);
 			}
 		},
 		i: noop,
@@ -6006,6 +6006,21 @@ function create_fragment$v(ctx) {
 	};
 }
 
+function parseValues(selectedValue) {
+	let rawValue;
+
+	try {
+		rawValue = JSON.parse(selectedValue || "[]");
+	} catch(e) {
+		rawValue = [selectedValue];
+	}
+
+	const rawValues = typeof rawValue === "object" ? rawValue : [rawValue];
+
+	// convert all values to strings to avoid later type comparison issues
+	return rawValues.map(val => `${val}`);
+}
+
 function instance$s($$self, $$props, $$invalidate) {
 	let _disabled;
 	let _error;
@@ -6040,25 +6055,15 @@ function instance$s($$self, $$props, $$invalidate) {
 	let _selectEl;
 
 	onMount(async () => {
-		await tick();
-		$$invalidate(12, _values = parseValues());
-		$$invalidate(13, _options = getOptions());
-
-		if (!_native) {
-			$$invalidate(17, _computedWidth = getCustomDropdownWidth(_options));
-			addKeyboardEventListeners();
-			setHighlightedIndexToSelected();
-		}
-
 		// watch for DOM changes within the slot => dynamic binding
 		const slot = _el.querySelector("slot");
 
 		slot === null || slot === void 0
 		? void 0
 		: slot.addEventListener("slotchange", _e => {
-				$$invalidate(14, _selectedLabel = "");
-				$$invalidate(12, _values = parseValues());
-				$$invalidate(13, _options = getOptions());
+				$$invalidate(16, _selectedLabel = "");
+				$$invalidate(15, _values = parseValues(value));
+				$$invalidate(12, _options = getOptions());
 			});
 	});
 
@@ -6094,8 +6099,8 @@ function instance$s($$self, $$props, $$invalidate) {
 			const selected = _values.includes(value);
 
 			if (selected) {
-				$$invalidate(14, _selectedLabel = label);
-				$$invalidate(12, _values = [value]);
+				$$invalidate(16, _selectedLabel = label);
+				$$invalidate(15, _values = [value]);
 			}
 
 			return { selected, value, label };
@@ -6133,28 +6138,12 @@ function instance$s($$self, $$props, $$invalidate) {
 		_el.removeEventListener("blur", onBlur, true);
 	}
 
-	// parse and convert values to strings to avoid later type comparison issues
-	function parseValues() {
-		let rawValue;
-
-		try {
-			rawValue = JSON.parse(value || "[]");
-		} catch(e) {
-			rawValue = [value];
-		}
-
-		const rawValues = typeof rawValue === "object" ? rawValue : [rawValue];
-
-		// convert all values to strings to avoid later type comparison issues
-		return rawValues.map(val => `${val}`);
-	}
-
 	async function showMenu() {
 		if (_disabled || _isMenuVisible) {
 			return;
 		}
 
-		$$invalidate(15, _isMenuVisible = true);
+		$$invalidate(17, _isMenuVisible = true);
 		await tick();
 
 		// hide menu on blur
@@ -6168,11 +6157,11 @@ function instance$s($$self, $$props, $$invalidate) {
 		_menuEl.removeEventListener("blur", closeMenu);
 		_menuEl.removeEventListener("mouseover", onHighlight);
 		setHighlightedIndexToSelected();
-		$$invalidate(15, _isMenuVisible = false);
+		$$invalidate(17, _isMenuVisible = false);
 	}
 
 	function setHighlightedIndexToSelected() {
-		$$invalidate(16, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
+		$$invalidate(18, _highlightedIndex = _options.findIndex(option => _values.includes(option.value)));
 	}
 
 	// Event handlers
@@ -6181,14 +6170,14 @@ function instance$s($$self, $$props, $$invalidate) {
 */
 	function onSelect(value, label, close) {
 		if (_disabled) return;
-		$$invalidate(14, _selectedLabel = label);
+		$$invalidate(16, _selectedLabel = label);
 		let detail;
 
 		if (_multiselect) {
 			_values.push(value);
 			detail = { name, values: _values };
 		} else {
-			$$invalidate(12, _values = [value]);
+			$$invalidate(15, _values = [value]);
 			detail = { name, value };
 		}
 
@@ -6231,14 +6220,14 @@ function instance$s($$self, $$props, $$invalidate) {
 
 	function _handleArrowDown() {
 		if (_highlightedIndex < _options.length - 1) {
-			$$invalidate(16, _highlightedIndex++, _highlightedIndex);
+			$$invalidate(18, _highlightedIndex++, _highlightedIndex);
 			onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
 		}
 	}
 
 	function _handleArrowUp() {
 		if (_highlightedIndex > 0) {
-			$$invalidate(16, _highlightedIndex--, _highlightedIndex);
+			$$invalidate(18, _highlightedIndex--, _highlightedIndex);
 			onSelect(_options[_highlightedIndex].value, _options[_highlightedIndex].label, false);
 		}
 	}
@@ -6254,7 +6243,7 @@ function instance$s($$self, $$props, $$invalidate) {
 	}
 
 	function onHighlight(e) {
-		$$invalidate(16, _highlightedIndex = Number(e.target.dataset.index));
+		$$invalidate(18, _highlightedIndex = Number(e.target.dataset.index));
 	}
 
 	function onNativeSelect(e) {
@@ -6266,8 +6255,8 @@ function instance$s($$self, $$props, $$invalidate) {
 	function select_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_selectEl = $$value;
-			$$invalidate(20, _selectEl);
-			$$invalidate(13, _options);
+			$$invalidate(21, _selectEl);
+			(((($$invalidate(12, _options), $$invalidate(13, _el)), $$invalidate(28, value)), $$invalidate(14, _native)), $$invalidate(30, native));
 		});
 	}
 
@@ -6276,14 +6265,14 @@ function instance$s($$self, $$props, $$invalidate) {
 	function ul_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_menuEl = $$value;
-			$$invalidate(19, _menuEl);
+			$$invalidate(20, _menuEl);
 		});
 	}
 
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_el = $$value;
-			$$invalidate(18, _el);
+			$$invalidate(13, _el);
 		});
 	}
 
@@ -6307,7 +6296,7 @@ function instance$s($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty[0] & /*disabled*/ 64) {
-			$$invalidate(21, _disabled = toBoolean(disabled));
+			$$invalidate(22, _disabled = toBoolean(disabled));
 		}
 
 		if ($$self.$$.dirty[0] & /*error*/ 128) {
@@ -6319,7 +6308,22 @@ function instance$s($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty[0] & /*native*/ 1073741824) {
-			$$invalidate(22, _native = toBoolean(native));
+			$$invalidate(14, _native = toBoolean(native));
+		}
+
+		if ($$self.$$.dirty[0] & /*_el, value, _native, _options*/ 268464128) {
+			{
+				if (_el) {
+					$$invalidate(15, _values = parseValues(value));
+					$$invalidate(12, _options = getOptions());
+
+					if (!_native) {
+						$$invalidate(19, _computedWidth = getCustomDropdownWidth(_options));
+						addKeyboardEventListeners();
+						setHighlightedIndexToSelected();
+					}
+				}
+			}
 		}
 	};
 
@@ -6336,17 +6340,17 @@ function instance$s($$self, $$props, $$invalidate) {
 		mr,
 		mb,
 		ml,
-		_values,
 		_options,
+		_el,
+		_native,
+		_values,
 		_selectedLabel,
 		_isMenuVisible,
 		_highlightedIndex,
 		_computedWidth,
-		_el,
 		_menuEl,
 		_selectEl,
 		_disabled,
-		_native,
 		_error,
 		showMenu,
 		closeMenu,