@abgov/web-components 1.0.0-alpha.43 → 1.0.0-alpha.44

package/web-components.es.js

@@ -2625,7 +2625,38 @@ function writable(value, start = noop) {
     return { set, update, subscribe };
 }
 
-const messageChannel$1 = writable({});
+const stores = {};
+class ContextStore {
+  constructor() {
+    this.store = writable({});
+  }
+  subscribe(event, cb) {
+    return this.store.subscribe((state) => {
+      if (state.type === event) {
+        cb(state);
+      }
+    });
+  }
+  notify(event, data) {
+    this.store.update(() => ({
+      type: event,
+      ...data
+    }));
+  }
+}
+function getContext(name) {
+  if (stores[name]) {
+    return stores[name];
+  }
+  stores[name] = new ContextStore();
+  return stores[name];
+}
+function deleteContext(name) {
+  const store = stores[name];
+  if (!store)
+    return;
+  delete stores[name];
+}
 
 /* libs/web-components/src/components/dropdown/Dropdown.svelte generated by Svelte v3.44.3 */
 
@@ -2645,7 +2676,7 @@ function create_if_block_3$4(ctx) {
 			insert(target, div, anchor);
 
 			if (!mounted) {
-				dispose = listen(div, "click", /*closeMenu*/ ctx[12]);
+				dispose = listen(div, "click", /*closeMenu*/ ctx[14]);
 				mounted = true;
 			}
 		},
@@ -2662,7 +2693,7 @@ function create_if_block_3$4(ctx) {
 	};
 }
 
-// (136:4) {#if !isMenuVisible || !isAutoComplete}
+// (151:4) {#if !isMenuVisible || !filterable}
 function create_if_block_2$5(ctx) {
 	let div;
 	let goa_input;
@@ -2676,7 +2707,8 @@ function create_if_block_2$5(ctx) {
 		c() {
 			div = element("div");
 			goa_input = element("goa-input");
-			set_custom_element_data(goa_input, "disabled", /*isDisabled*/ ctx[10]);
+			set_custom_element_data(goa_input, "error", /*isError*/ ctx[12]);
+			set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[4]);
 			set_custom_element_data(goa_input, "leadingicon", /*leadingicon*/ ctx[1]);
 			set_custom_element_data(goa_input, "placeholder", /*placeholder*/ ctx[3]);
 			set_custom_element_data(goa_input, "id", goa_input_id_value = `${/*name*/ ctx[0]}-dropdown-input`);
@@ -2685,7 +2717,7 @@ function create_if_block_2$5(ctx) {
 			set_custom_element_data(goa_input, "trailingicon", "chevron-down");
 			set_custom_element_data(goa_input, "handletrailingiconclick", "");
 			set_custom_element_data(goa_input, "type", "text");
-			set_custom_element_data(goa_input, "value", goa_input_value_value = /*selectedLabels*/ ctx[4].join(', '));
+			set_custom_element_data(goa_input, "value", goa_input_value_value = /*selectedLabels*/ ctx[7].join(", "));
 			attr(div, "data-testid", div_data_testid_value = `${/*name*/ ctx[0]}-dropdown`);
 		},
 		m(target, anchor) {
@@ -2693,13 +2725,17 @@ function create_if_block_2$5(ctx) {
 			append(div, goa_input);
 
 			if (!mounted) {
-				dispose = listen(goa_input, "focus", /*showMenu*/ ctx[11]);
+				dispose = listen(goa_input, "focus", /*showMenu*/ ctx[13]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*isDisabled*/ 1024) {
-				set_custom_element_data(goa_input, "disabled", /*isDisabled*/ ctx[10]);
+			if (dirty & /*isError*/ 4096) {
+				set_custom_element_data(goa_input, "error", /*isError*/ ctx[12]);
+			}
+
+			if (dirty & /*disabled*/ 16) {
+				set_custom_element_data(goa_input, "disabled", /*disabled*/ ctx[4]);
 			}
 
 			if (dirty & /*leadingicon*/ 2) {
@@ -2714,7 +2750,7 @@ function create_if_block_2$5(ctx) {
 				set_custom_element_data(goa_input, "id", goa_input_id_value);
 			}
 
-			if (dirty & /*selectedLabels*/ 16 && goa_input_value_value !== (goa_input_value_value = /*selectedLabels*/ ctx[4].join(', '))) {
+			if (dirty & /*selectedLabels*/ 128 && goa_input_value_value !== (goa_input_value_value = /*selectedLabels*/ ctx[7].join(", "))) {
 				set_custom_element_data(goa_input, "value", goa_input_value_value);
 			}
 
@@ -2730,14 +2766,14 @@ function create_if_block_2$5(ctx) {
 	};
 }
 
-// (155:4) {#if isMenuVisible}
+// (171:4) {#if isMenuVisible}
 function create_if_block$a(ctx) {
 	let div;
 	let t;
 	let ul;
 	let slot;
 	let ul_style_value;
-	let if_block = /*isAutoComplete*/ ctx[9] && create_if_block_1$7(ctx);
+	let if_block = /*filterable*/ ctx[5] && create_if_block_1$7(ctx);
 
 	return {
 		c() {
@@ -2747,7 +2783,7 @@ function create_if_block$a(ctx) {
 			ul = element("ul");
 			slot = element("slot");
 			attr(ul, "class", "goa-dropdown-list");
-			attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[2] || MAX_HEIGHT}px`);
+			attr(ul, "style", ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[2]}px`);
 			attr(div, "class", "menu");
 		},
 		m(target, anchor) {
@@ -2758,7 +2794,7 @@ function create_if_block$a(ctx) {
 			append(ul, slot);
 		},
 		p(ctx, dirty) {
-			if (/*isAutoComplete*/ ctx[9]) {
+			if (/*filterable*/ ctx[5]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -2771,7 +2807,7 @@ function create_if_block$a(ctx) {
 				if_block = null;
 			}
 
-			if (dirty & /*maxheight*/ 4 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[2] || MAX_HEIGHT}px`)) {
+			if (dirty & /*maxheight*/ 4 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[2]}px`)) {
 				attr(ul, "style", ul_style_value);
 			}
 		},
@@ -2782,42 +2818,54 @@ function create_if_block$a(ctx) {
 	};
 }
 
-// (158:8) {#if isAutoComplete}
+// (174:8) {#if filterable}
 function create_if_block_1$7(ctx) {
 	let goa_input;
+	let goa_input_id_value;
 	let goa_input_trailingicon_value;
 
 	return {
 		c() {
 			goa_input = element("goa-input");
-			set_custom_element_data(goa_input, "focused", /*isMenuVisible*/ ctx[5]);
+			set_custom_element_data(goa_input, "id", goa_input_id_value = `${/*name*/ ctx[0]}-dropdown-filter`);
+			set_custom_element_data(goa_input, "focused", /*isMenuVisible*/ ctx[8]);
 			set_custom_element_data(goa_input, "name", "filter");
 			set_custom_element_data(goa_input, "placeholder", "Filter");
-			set_custom_element_data(goa_input, "trailingicon", goa_input_trailingicon_value = /*filter*/ ctx[8].length > 0 ? 'close-circle' : 'search');
+
+			set_custom_element_data(goa_input, "trailingicon", goa_input_trailingicon_value = /*filter*/ ctx[11].length > 0
+			? "close-circle"
+			: "search");
+
 			set_custom_element_data(goa_input, "handletrailingiconclick", "");
 			set_custom_element_data(goa_input, "type", "text");
-			set_custom_element_data(goa_input, "value", /*filter*/ ctx[8]);
+			set_custom_element_data(goa_input, "value", /*filter*/ ctx[11]);
 		},
 		m(target, anchor) {
 			insert(target, goa_input, anchor);
-			/*goa_input_binding*/ ctx[17](goa_input);
+			/*goa_input_binding*/ ctx[19](goa_input);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*isMenuVisible*/ 32) {
-				set_custom_element_data(goa_input, "focused", /*isMenuVisible*/ ctx[5]);
+			if (dirty & /*name*/ 1 && goa_input_id_value !== (goa_input_id_value = `${/*name*/ ctx[0]}-dropdown-filter`)) {
+				set_custom_element_data(goa_input, "id", goa_input_id_value);
+			}
+
+			if (dirty & /*isMenuVisible*/ 256) {
+				set_custom_element_data(goa_input, "focused", /*isMenuVisible*/ ctx[8]);
 			}
 
-			if (dirty & /*filter*/ 256 && goa_input_trailingicon_value !== (goa_input_trailingicon_value = /*filter*/ ctx[8].length > 0 ? 'close-circle' : 'search')) {
+			if (dirty & /*filter*/ 2048 && goa_input_trailingicon_value !== (goa_input_trailingicon_value = /*filter*/ ctx[11].length > 0
+			? "close-circle"
+			: "search")) {
 				set_custom_element_data(goa_input, "trailingicon", goa_input_trailingicon_value);
 			}
 
-			if (dirty & /*filter*/ 256) {
-				set_custom_element_data(goa_input, "value", /*filter*/ ctx[8]);
+			if (dirty & /*filter*/ 2048) {
+				set_custom_element_data(goa_input, "value", /*filter*/ ctx[11]);
 			}
 		},
 		d(detaching) {
 			if (detaching) detach(goa_input);
-			/*goa_input_binding*/ ctx[17](null);
+			/*goa_input_binding*/ ctx[19](null);
 		}
 	};
 }
@@ -2827,9 +2875,9 @@ function create_fragment$j(ctx) {
 	let t0;
 	let div0;
 	let t1;
-	let if_block0 = /*isMenuVisible*/ ctx[5] && create_if_block_3$4(ctx);
-	let if_block1 = (!/*isMenuVisible*/ ctx[5] || !/*isAutoComplete*/ ctx[9]) && create_if_block_2$5(ctx);
-	let if_block2 = /*isMenuVisible*/ ctx[5] && create_if_block$a(ctx);
+	let if_block0 = /*isMenuVisible*/ ctx[8] && create_if_block_3$4(ctx);
+	let if_block1 = (!/*isMenuVisible*/ ctx[8] || !/*filterable*/ ctx[5]) && create_if_block_2$5(ctx);
+	let if_block2 = /*isMenuVisible*/ ctx[8] && create_if_block$a(ctx);
 
 	return {
 		c() {
@@ -2841,6 +2889,7 @@ function create_fragment$j(ctx) {
 			t1 = space();
 			if (if_block2) if_block2.c();
 			this.c = noop;
+			attr(div1, "data-testid", /*testid*/ ctx[6]);
 			attr(div1, "class", "goa-dropdown-box");
 		},
 		m(target, anchor) {
@@ -2851,10 +2900,10 @@ function create_fragment$j(ctx) {
 			if (if_block1) if_block1.m(div0, null);
 			append(div0, t1);
 			if (if_block2) if_block2.m(div0, null);
-			/*div1_binding*/ ctx[18](div1);
+			/*div1_binding*/ ctx[20](div1);
 		},
 		p(ctx, [dirty]) {
-			if (/*isMenuVisible*/ ctx[5]) {
+			if (/*isMenuVisible*/ ctx[8]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
@@ -2867,7 +2916,7 @@ function create_fragment$j(ctx) {
 				if_block0 = null;
 			}
 
-			if (!/*isMenuVisible*/ ctx[5] || !/*isAutoComplete*/ ctx[9]) {
+			if (!/*isMenuVisible*/ ctx[8] || !/*filterable*/ ctx[5]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
@@ -2880,7 +2929,7 @@ function create_fragment$j(ctx) {
 				if_block1 = null;
 			}
 
-			if (/*isMenuVisible*/ ctx[5]) {
+			if (/*isMenuVisible*/ ctx[8]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
@@ -2892,6 +2941,10 @@ function create_fragment$j(ctx) {
 				if_block2.d(1);
 				if_block2 = null;
 			}
+
+			if (dirty & /*testid*/ 64) {
+				attr(div1, "data-testid", /*testid*/ ctx[6]);
+			}
 		},
 		i: noop,
 		o: noop,
@@ -2900,7 +2953,7 @@ function create_fragment$j(ctx) {
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
 			if (if_block2) if_block2.d();
-			/*div1_binding*/ ctx[18](null);
+			/*div1_binding*/ ctx[20](null);
 		}
 	};
 }
@@ -2908,127 +2961,103 @@ function create_fragment$j(ctx) {
 const MAX_HEIGHT = 300;
 
 function instance$i($$self, $$props, $$invalidate) {
-	let isMultiSelect;
-	let isDisabled;
-	let isAutoComplete;
+	let isError;
 	let { name } = $$props;
 	let { values } = $$props;
 	let { leadingicon } = $$props;
-	let { maxheight } = $$props;
-	let { placeholder } = $$props;
+	let { maxheight = MAX_HEIGHT } = $$props;
+	let { placeholder = "" } = $$props;
 	let { multiselect } = $$props;
 	let { disabled } = $$props;
-	let { autocomplete } = $$props;
+	let { filterable } = $$props;
+	let { error } = $$props;
+	let { testid } = $$props;
 
 	// Private
 	let selectedLabels = [];
 
-	let selectedValues = [];
+	let selectedValues;
 	let isMenuVisible = false;
 	let el;
 	let filterEl;
-	let filter = '';
-
-	// Init
-	const unsubscribe = messageChannel$1.subscribe(channel => {
-		var _a, _b;
-
-		if (((_a = channel[name]) === null || _a === void 0
-		? void 0
-		: _a.tag) !== name) {
-			return;
-		}
+	let filter = "";
+	let ctx;
+	let unsubChangeSelected;
+	let unsubInit;
 
-		const msg = channel[name];
-
-		switch ((_b = msg === null || msg === void 0 ? void 0 : msg.payload) === null || _b === void 0
-		? void 0
-		: _b.type) {
-			case 'DropDownAction':
-				{
-					if (msg.payload.action === 'select') {
-						if (isMultiSelect) {
-							$$invalidate(4, selectedLabels = [...selectedLabels, msg.payload.label]);
-							selectedValues = [...selectedValues, msg.payload.value];
-						} else {
-							$$invalidate(4, selectedLabels = [msg.payload.label]);
-							selectedValues = [msg.payload.value];
-						}
-					}
-
-					if (msg.payload.action === 'deselect') {
-						const _label = msg.payload.label;
-						const _value = msg.payload.value;
-						$$invalidate(4, selectedLabels = selectedLabels.filter(label => label !== _label));
-						selectedValues = selectedValues.filter(value => value !== _value);
-					}
-
-					if (!isMultiSelect) {
-						$$invalidate(5, isMenuVisible = false);
-					}
-
-					messageChannel$1.update(old => Object.assign(Object.assign({}, old), { [name]: null }));
-
-					el.dispatchEvent(new CustomEvent('_change',
-					{
-							composed: true,
-							detail: { event: null, name, value: selectedValues }
-						}));
-
-					break;
-				}
-		}
-	});
-
-	// Hooks
 	onMount(async () => {
 		await tick();
+		$$invalidate(18, ctx = getContext(name));
+
+		// Listen for initial label selection updates on initial mount.
+		// > This is required because the parent does not know the label values
+		// > for each of the children, so on the initial load any preselected values
+		// > have to communicated back to the parent of the label values that correspond
+		// > to the preselected values.
+		// > A separate event is required to prevent circular updates.
+		unsubInit = ctx.subscribe("init", data => {
+			if (multiselect) {
+				$$invalidate(7, selectedLabels = [...selectedLabels, data.label]);
+			} else {
+				$$invalidate(7, selectedLabels = [data.label]);
+			}
 
-		// set initial values state
-		messageChannel$1.update(old => Object.assign(Object.assign({}, old), {
-			[name]: {
-				tag: name,
-				payload: {
-					type: 'DropDownInit',
-					values: values ? JSON.parse(values) : [],
-					multiSelect: isMultiSelect
+			// calling the unsub init
+			unsubInit();
+		});
+
+		// listen for change messages from children
+		unsubChangeSelected = ctx.subscribe("selectionChange", data => {
+			if (data.selected) {
+				if (multiselect) {
+					$$invalidate(7, selectedLabels = [...selectedLabels, data.label]);
+					selectedValues = [...selectedValues, data.value];
+				} else {
+					$$invalidate(7, selectedLabels = [data.label]);
+					selectedValues = [data.value];
 				}
+			} else {
+				$$invalidate(7, selectedLabels = selectedLabels.filter(label => label !== data.label));
+				selectedValues = selectedValues.filter(value => value !== data.value);
 			}
-		}));
-	});
 
-	onDestroy(() => {
-		messageChannel$1.update(old => {
-			delete old[name];
-			return old;
+			if (!multiselect) {
+				$$invalidate(8, isMenuVisible = false);
+			}
+
+			// This isn't required when the component is properly bound, but this
+			// will make the component appear to work properly before the component
+			// is properly bound.
+			ctx.notify("propChange", {
+				multiSelect: multiselect,
+				values: selectedValues
+			});
+
+			el.dispatchEvent(new CustomEvent("_change",
+			{
+					composed: true,
+					detail: { name, value: selectedValues }, // TODO: send single value if multiselect is false
+					
+				}));
 		});
+	});
 
-		unsubscribe();
+	onDestroy(() => {
+		unsubChangeSelected();
+		deleteContext(name);
 	});
 
 	// Reactive
 	let filterOnChangeListener = e => {
 		e.stopPropagation();
-		$$invalidate(8, filter = e.detail.value);
-
-		messageChannel$1.update(old => Object.assign(Object.assign({}, old), {
-			[name]: {
-				tag: name,
-				payload: { type: 'FilterChange', filter }
-			}
-		}));
+		$$invalidate(11, filter = e.detail.value);
+		ctx.notify("filterChange", { filter });
 	};
 
 	let filterOnTrailingIconClickListener = e => {
 		e.stopPropagation();
-		$$invalidate(8, filter = '');
-
-		messageChannel$1.update(old => Object.assign(Object.assign({}, old), {
-			[name]: {
-				tag: name,
-				payload: { type: 'FilterChange', filter }
-			}
-		}));
+		$$invalidate(11, filter = "");
+		ctx.notify("filterChange", { filter });
 
 		filterEl === null || filterEl === void 0
 		? void 0
@@ -3037,18 +3066,22 @@ function instance$i($$self, $$props, $$invalidate) {
 
 	// Functions
 	async function showMenu() {
-		$$invalidate(5, isMenuVisible = true);
+		if (disabled) {
+			return;
+		}
+
+		$$invalidate(8, isMenuVisible = true);
 		await tick();
 
 		// To prevent the event from bubbling up to the parent, we need to listen to the event on the element itself
 		// then we can stop propagation and prevent default
 		filterEl === null || filterEl === void 0
 		? void 0
-		: filterEl.addEventListener('_change', filterOnChangeListener);
+		: filterEl.addEventListener("_change", filterOnChangeListener);
 
 		filterEl === null || filterEl === void 0
 		? void 0
-		: filterEl.addEventListener('_trailingIconClick', filterOnTrailingIconClickListener);
+		: filterEl.addEventListener("_trailingIconClick", filterOnTrailingIconClickListener);
 
 		filterEl === null || filterEl === void 0
 		? void 0
@@ -3056,53 +3089,69 @@ function instance$i($$self, $$props, $$invalidate) {
 	}
 
 	function closeMenu() {
-		$$invalidate(5, isMenuVisible = false);
+		$$invalidate(8, isMenuVisible = false);
 
 		filterEl === null || filterEl === void 0
 		? void 0
-		: filterEl.removeEventListener('_change', filterOnChangeListener);
+		: filterEl.removeEventListener("_change", filterOnChangeListener);
 
 		filterEl === null || filterEl === void 0
 		? void 0
-		: filterEl.removeEventListener('_trailingIconClick', filterOnTrailingIconClickListener);
+		: filterEl.removeEventListener("_trailingIconClick", filterOnTrailingIconClickListener);
 	}
 
 	function goa_input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			filterEl = $$value;
-			$$invalidate(7, filterEl);
+			$$invalidate(10, filterEl);
 		});
 	}
 
 	function div1_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
-			$$invalidate(6, el);
+			$$invalidate(9, el);
 		});
 	}
 
 	$$self.$$set = $$props => {
 		if ('name' in $$props) $$invalidate(0, name = $$props.name);
-		if ('values' in $$props) $$invalidate(13, values = $$props.values);
+		if ('values' in $$props) $$invalidate(15, values = $$props.values);
 		if ('leadingicon' in $$props) $$invalidate(1, leadingicon = $$props.leadingicon);
 		if ('maxheight' in $$props) $$invalidate(2, maxheight = $$props.maxheight);
 		if ('placeholder' in $$props) $$invalidate(3, placeholder = $$props.placeholder);
-		if ('multiselect' in $$props) $$invalidate(14, multiselect = $$props.multiselect);
-		if ('disabled' in $$props) $$invalidate(15, disabled = $$props.disabled);
-		if ('autocomplete' in $$props) $$invalidate(16, autocomplete = $$props.autocomplete);
+		if ('multiselect' in $$props) $$invalidate(16, multiselect = $$props.multiselect);
+		if ('disabled' in $$props) $$invalidate(4, disabled = $$props.disabled);
+		if ('filterable' in $$props) $$invalidate(5, filterable = $$props.filterable);
+		if ('error' in $$props) $$invalidate(17, error = $$props.error);
+		if ('testid' in $$props) $$invalidate(6, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*multiselect*/ 16384) {
-			isMultiSelect = toBoolean(multiselect);
+		if ($$self.$$.dirty & /*error*/ 131072) {
+			// TODO: remove this once goa-input has the toBoolean method removed
+			$$invalidate(12, isError = error ? "true" : "false");
 		}
 
-		if ($$self.$$.dirty & /*disabled*/ 32768) {
-			$$invalidate(10, isDisabled = toBoolean(disabled));
-		}
+		if ($$self.$$.dirty & /*values, ctx, multiselect*/ 360448) {
+			// notify children of value change
+			{
+				if (values !== undefined) {
+					let vals;
 
-		if ($$self.$$.dirty & /*autocomplete*/ 65536) {
-			$$invalidate(9, isAutoComplete = toBoolean(autocomplete));
+					if (typeof values === "string") {
+						vals = values ? JSON.parse(values) : [];
+					} else {
+						vals = values;
+					}
+
+					selectedValues = vals;
+
+					ctx === null || ctx === void 0
+					? void 0
+					: ctx.notify("propChange", { multiSelect: multiselect, values: vals });
+				}
+			}
 		}
 	};
 
@@ -3111,19 +3160,21 @@ function instance$i($$self, $$props, $$invalidate) {
 		leadingicon,
 		maxheight,
 		placeholder,
+		disabled,
+		filterable,
+		testid,
 		selectedLabels,
 		isMenuVisible,
 		el,
 		filterEl,
 		filter,
-		isAutoComplete,
-		isDisabled,
+		isError,
 		showMenu,
 		closeMenu,
 		values,
 		multiselect,
-		disabled,
-		autocomplete,
+		error,
+		ctx,
 		goa_input_binding,
 		div1_binding
 	];
@@ -3132,7 +3183,7 @@ function instance$i($$self, $$props, $$invalidate) {
 class Dropdown extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-dropdown-box{position:relative}.menu goa-input{position:relative}.goa-dropdown-background{position:fixed;inset:0}.goa-dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);box-shadow:var(--shadow-1);z-index:99}.goa-dropdown-list{scroll-behavior:smooth;scrollbar-width:thin}.goa-dropdown-list::-webkit-scrollbar{width:6px}.goa-dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.goa-dropdown-list::-webkit-scrollbar-thumb{background:#888}.goa-dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-dropdown-box{position:relative}.menu goa-input{position:relative}.goa-dropdown-background{position:fixed;z-index:98;inset:0}.goa-dropdown-list{position:absolute;left:0;right:0;padding:0;margin:0;margin-top:3px;list-style-type:none;background:var(--color-white);border-radius:var(--input-border-radius);box-shadow:var(--shadow-1);z-index:99}.goa-dropdown-list{scroll-behavior:smooth;scrollbar-width:thin}.goa-dropdown-list::-webkit-scrollbar{width:6px}.goa-dropdown-list::-webkit-scrollbar-track{background:#f1f1f1}.goa-dropdown-list::-webkit-scrollbar-thumb{background:#888}.goa-dropdown-list::-webkit-scrollbar-thumb:hover{background:#555}</style>`;
 
 		init(
 			this,
@@ -3146,13 +3197,15 @@ class Dropdown extends SvelteElement {
 			safe_not_equal,
 			{
 				name: 0,
-				values: 13,
+				values: 15,
 				leadingicon: 1,
 				maxheight: 2,
 				placeholder: 3,
-				multiselect: 14,
-				disabled: 15,
-				autocomplete: 16
+				multiselect: 16,
+				disabled: 4,
+				filterable: 5,
+				error: 17,
+				testid: 6
 			},
 			null
 		);
@@ -3178,7 +3231,9 @@ class Dropdown extends SvelteElement {
 			"placeholder",
 			"multiselect",
 			"disabled",
-			"autocomplete"
+			"filterable",
+			"error",
+			"testid"
 		];
 	}
 
@@ -3192,7 +3247,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get values() {
-		return this.$$.ctx[13];
+		return this.$$.ctx[15];
 	}
 
 	set values(values) {
@@ -3228,7 +3283,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get multiselect() {
-		return this.$$.ctx[14];
+		return this.$$.ctx[16];
 	}
 
 	set multiselect(multiselect) {
@@ -3237,7 +3292,7 @@ class Dropdown extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[15];
+		return this.$$.ctx[4];
 	}
 
 	set disabled(disabled) {
@@ -3245,19 +3300,37 @@ class Dropdown extends SvelteElement {
 		flush();
 	}
 
-	get autocomplete() {
-		return this.$$.ctx[16];
+	get filterable() {
+		return this.$$.ctx[5];
 	}
 
-	set autocomplete(autocomplete) {
-		this.$$set({ autocomplete });
+	set filterable(filterable) {
+		this.$$set({ filterable });
+		flush();
+	}
+
+	get error() {
+		return this.$$.ctx[17];
+	}
+
+	set error(error) {
+		this.$$set({ error });
+		flush();
+	}
+
+	get testid() {
+		return this.$$.ctx[6];
+	}
+
+	set testid(testid) {
+		this.$$set({ testid });
 		flush();
 	}
 }
 
 customElements.define("goa-dropdown", Dropdown);
 
-/* libs/web-components/src/components/dropdown-item/DropdownItem.svelte generated by Svelte v3.44.3 */
+/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.44.3 */
 
 function create_fragment$i(ctx) {
 	let li;
@@ -3272,7 +3345,7 @@ function create_fragment$i(ctx) {
 			this.c = noop;
 			attr(li, "class", "goa-dropdown-option");
 			attr(li, "style", li_style_value = `display: ${/*isHidden*/ ctx[4] ? "none" : "block"}`);
-			attr(li, "data-testid", /*testId*/ ctx[1]);
+			attr(li, "data-testid", /*testid*/ ctx[1]);
 			toggle_class(li, "goa-dropdown-option--disabled", /*isDisabled*/ ctx[5]);
 			toggle_class(li, "goa-dropdown-option--selected", /*isSelected*/ ctx[3]);
 		},
@@ -3291,8 +3364,8 @@ function create_fragment$i(ctx) {
 				attr(li, "style", li_style_value);
 			}
 
-			if (dirty & /*testId*/ 2) {
-				attr(li, "data-testid", /*testId*/ ctx[1]);
+			if (dirty & /*testid*/ 2) {
+				attr(li, "data-testid", /*testid*/ ctx[1]);
 			}
 
 			if (dirty & /*isDisabled*/ 32) {
@@ -3320,16 +3393,16 @@ function instance$h($$self, $$props, $$invalidate) {
 	let { name = "" } = $$props;
 	let { value = "" } = $$props;
 	let { label = "" } = $$props;
-	let { testId = "" } = $$props;
 	let { selected = "false" } = $$props;
 	let { disabled = "false" } = $$props;
 	let { hide = "false" } = $$props;
+	let { testid } = $$props;
 
 	// private
-	let multiSelect;
-
 	let filteredLabel;
 
+	let ctx;
+
 	function getFilteredLabel(filter) {
 		if (filter.length === 0) {
 			return label;
@@ -3353,89 +3426,73 @@ function instance$h($$self, $$props, $$invalidate) {
 		return filteredLabel;
 	}
 
-	messageChannel$1.subscribe(channel => {
-		const msg = channel[name];
-
-		if (!msg) {
-			return;
-		}
+	function onSelect() {
+		$$invalidate(3, isSelected = !isSelected);
+		ctx.notify("selectionChange", { label, value, selected: isSelected });
+	}
 
-		if (msg.tag !== name) {
-			return;
-		}
+	// Hooks
+	let unsub;
 
-		switch (msg.payload.type) {
-			case "FilterChange":
-				{
-					const filter = msg.payload.filter.toLowerCase();
+	onMount(() => {
+		ctx = getContext(name);
 
-					if (!value && !label) {
-						$$invalidate(7, hide = "false");
-					} else {
-						const matches = value.toLowerCase().includes(filter) || label.toLowerCase().includes(filter);
-						$$invalidate(7, hide = fromBoolean(!matches));
-					}
+		ctx.subscribe("propChange", data => {
+			$$invalidate(3, isSelected = data.values.includes(value));
+		});
 
-					$$invalidate(2, filteredLabel = getFilteredLabel(filter));
-					break;
-				}
-			case "DropDownAction":
-				{
-					if (msg.payload.label !== label && !multiSelect) {
-						$$invalidate(3, isSelected = false);
-					}
+		unsub = ctx.subscribe("propChange", data => {
+			const isSelected = data.values.includes(value);
 
-					break;
-				}
-			case "DropDownInit":
-				{
-					$$invalidate(3, isSelected = msg.payload.values.includes(value));
-					multiSelect = msg.payload.multiSelect;
-
-					if (isSelected) {
-						messageChannel$1.update(old => Object.assign(Object.assign({}, old), {
-							[name]: {
-								tag: name,
-								payload: {
-									type: "DropDownAction",
-									action: "select",
-									label,
-									value
-								}
-							}
-						}));
-					}
+			if (isSelected) {
+				ctx.notify("init", { label, value, selected: true });
+			}
 
-					break;
-				}
-		}
-	});
+			unsub();
+		});
 
-	function onSelect() {
-		$$invalidate(3, isSelected = !isSelected);
+		ctx.subscribe("filterChange", data => {
+			const filter = data.filter.toLowerCase();
 
-		messageChannel$1.update(old => Object.assign(Object.assign({}, old), {
-			[name]: {
-				tag: name,
-				payload: {
-					type: "DropDownAction",
-					action: isSelected ? "select" : "deselect",
-					label,
-					value,
-					multiSelect
+			if (!value && !label) {
+				$$invalidate(7, hide = "false");
+			} else {
+				let matches;
+
+				switch (typeof value) {
+					case "string":
+						matches = (value === null || value === void 0
+						? void 0
+						: value.toLowerCase().includes(filter)) || (label === null || label === void 0
+						? void 0
+						: label.toLowerCase().includes(filter));
+						break;
+					case "number":
+						matches = value === filter || (label === null || label === void 0
+						? void 0
+						: label.toLowerCase().includes(filter));
+						break;
 				}
+
+				$$invalidate(7, hide = fromBoolean(!matches));
 			}
-		}));
-	}
+
+			$$invalidate(2, filteredLabel = getFilteredLabel(filter));
+		});
+	});
+
+	onDestroy(() => {
+		unsub();
+	});
 
 	$$self.$$set = $$props => {
 		if ('name' in $$props) $$invalidate(8, name = $$props.name);
 		if ('value' in $$props) $$invalidate(9, value = $$props.value);
 		if ('label' in $$props) $$invalidate(0, label = $$props.label);
-		if ('testId' in $$props) $$invalidate(1, testId = $$props.testId);
 		if ('selected' in $$props) $$invalidate(10, selected = $$props.selected);
 		if ('disabled' in $$props) $$invalidate(11, disabled = $$props.disabled);
 		if ('hide' in $$props) $$invalidate(7, hide = $$props.hide);
+		if ('testid' in $$props) $$invalidate(1, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
@@ -3454,7 +3511,7 @@ function instance$h($$self, $$props, $$invalidate) {
 
 	return [
 		label,
-		testId,
+		testid,
 		filteredLabel,
 		isSelected,
 		isHidden,
@@ -3487,10 +3544,10 @@ class DropdownItem extends SvelteElement {
 				name: 8,
 				value: 9,
 				label: 0,
-				testId: 1,
 				selected: 10,
 				disabled: 11,
-				hide: 7
+				hide: 7,
+				testid: 1
 			},
 			null
 		);
@@ -3508,7 +3565,7 @@ class DropdownItem extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["name", "value", "label", "testId", "selected", "disabled", "hide"];
+		return ["name", "value", "label", "selected", "disabled", "hide", "testid"];
 	}
 
 	get name() {
@@ -3538,15 +3595,6 @@ class DropdownItem extends SvelteElement {
 		flush();
 	}
 
-	get testId() {
-		return this.$$.ctx[1];
-	}
-
-	set testId(testId) {
-		this.$$set({ testId });
-		flush();
-	}
-
 	get selected() {
 		return this.$$.ctx[10];
 	}
@@ -3573,6 +3621,15 @@ class DropdownItem extends SvelteElement {
 		this.$$set({ hide });
 		flush();
 	}
+
+	get testid() {
+		return this.$$.ctx[1];
+	}
+
+	set testid(testid) {
+		this.$$set({ testid });
+		flush();
+	}
 }
 
 customElements.define("goa-dropdown-item", DropdownItem);
@@ -4956,7 +5013,7 @@ function instance$b($$self, $$props, $$invalidate) {
 class Input extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;background:white;color:var(--color-black, #ccc);padding:var(--input-padding, 0.5rem) 0.5rem;display:inline-flex;align-items:center}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input:disabled{border-color:var(--color-gray-500)}.goa-input:disabled:hover{border-color:var(--color-gray-500)}.goa-input:disabled:focus{box-shadow:none}.goa-input input[readonly]{cursor:pointer}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{line-height:18px}.goa-input-trailing-icon{display:flex;align-items:center}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:block;width:100%;font-size:var(--input-font-size)}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled{opacity:0.5;cursor:default;border-color:var(--color-black)}.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{border-color:var(--color-black);cursor:default;box-shadow:none}.goa-input--disabled input:hover{cursor:default !important}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.goa-state--error .goa-input{border:2px solid var(--goa-color-status-emergency)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-status-emergency-dark)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:3px;background:white;color:var(--color-black, #ccc);padding:var(--input-padding, 0.5rem) 0.5rem;display:inline-flex;align-items:center}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input:disabled{border-color:var(--color-gray-500)}.goa-input:disabled:hover{border-color:var(--color-gray-500)}.goa-input:disabled:focus{box-shadow:none}.goa-input input[readonly]{cursor:pointer}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{line-height:18px}.goa-input-trailing-icon{display:flex;align-items:center}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:block;width:100%;font-size:var(--input-font-size)}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled{opacity:0.5;cursor:default;border-color:var(--color-black)}.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{border-color:var(--color-black);cursor:default;box-shadow:none}.goa-input--disabled input:hover{cursor:default !important}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-status-emergency-dark)}</style>`;
 
 		init(
 			this,
@@ -6477,45 +6534,40 @@ class CircularProgress extends SvelteElement {
 
 customElements.define("goa-circular-progress", CircularProgress);
 
-const messageChannel = writable({});
-
 /* libs/web-components/src/components/radio-group/RadioGroup.svelte generated by Svelte v3.44.3 */
 
 function create_fragment$7(ctx) {
-	let div1;
-	let div0;
+	let div;
 	let slot;
-	let div0_class_value;
+	let div_class_value;
 
 	return {
 		c() {
-			div1 = element("div");
-			div0 = element("div");
+			div = element("div");
 			slot = element("slot");
 			this.c = noop;
-			attr(div0, "class", div0_class_value = `goa-radio-group--${/*orientation*/ ctx[0]}`);
-			attr(div0, "data-testid", /*testid*/ ctx[1]);
+			attr(div, "class", div_class_value = `goa-radio-group--${/*orientation*/ ctx[0]}`);
+			attr(div, "data-testid", /*testid*/ ctx[1]);
 		},
 		m(target, anchor) {
-			insert(target, div1, anchor);
-			append(div1, div0);
-			append(div0, slot);
-			/*div0_binding*/ ctx[9](div0);
+			insert(target, div, anchor);
+			append(div, slot);
+			/*div_binding*/ ctx[10](div);
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*orientation*/ 1 && div0_class_value !== (div0_class_value = `goa-radio-group--${/*orientation*/ ctx[0]}`)) {
-				attr(div0, "class", div0_class_value);
+			if (dirty & /*orientation*/ 1 && div_class_value !== (div_class_value = `goa-radio-group--${/*orientation*/ ctx[0]}`)) {
+				attr(div, "class", div_class_value);
 			}
 
 			if (dirty & /*testid*/ 2) {
-				attr(div0, "data-testid", /*testid*/ ctx[1]);
+				attr(div, "data-testid", /*testid*/ ctx[1]);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div1);
-			/*div0_binding*/ ctx[9](null);
+			if (detaching) detach(div);
+			/*div_binding*/ ctx[10](null);
 		}
 	};
 }
@@ -6525,48 +6577,42 @@ function instance$7($$self, $$props, $$invalidate) {
 	let { name } = $$props;
 	let { value } = $$props;
 	let { orientation = 'vertical' } = $$props;
-	let { disabled } = $$props;
-	let { error } = $$props;
-	let { testid } = $$props;
+	let { disabled = "false" } = $$props;
+	let { error = "false" } = $$props;
+	let { testid = "" } = $$props;
 
 	// private
 	let isError;
+
+	let ctx;
 	let el;
-	let unsubscribe;
 
 	onMount(() => {
-		// set initial state
-		messageChannel.update(prev => {
-			return Object.assign(Object.assign({}, prev), {
-				[name]: {
-					tag: name,
-					payload: {
-						value,
-						disabled: isDisabled,
-						error: isError
-					}
-				}
+		$$invalidate(8, ctx = getContext(name));
+
+		ctx.subscribe("optionChange", state => {
+			// This isn't required when the component is properly bound, but this
+			// will make the component appear to work properly before the component
+			// is properly bound.
+			ctx.notify("propChange", {
+				value: state.value,
+				disabled: state.disabled,
+				error: state.error
 			});
-		});
-
-		unsubscribe = messageChannel.subscribe(state => {
-			const payload = state[name].payload;
-
-			if (payload.value !== value) {
-				$$invalidate(3, value = payload.value);
 
-				el.dispatchEvent(new CustomEvent('_change',
-				{
-						composed: true,
-						detail: { name, value: payload.value }
-					}));
-			}
+			el.dispatchEvent(new CustomEvent('_change',
+			{
+					composed: true,
+					detail: { name, value: state.value }
+				}));
 		});
 	});
 
-	onDestroy(unsubscribe);
+	onDestroy(() => {
+		deleteContext(name);
+	});
 
-	function div0_binding($$value) {
+	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
 			$$invalidate(2, el);
@@ -6574,8 +6620,8 @@ function instance$7($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('name' in $$props) $$invalidate(4, name = $$props.name);
-		if ('value' in $$props) $$invalidate(3, value = $$props.value);
+		if ('name' in $$props) $$invalidate(3, name = $$props.name);
+		if ('value' in $$props) $$invalidate(4, value = $$props.value);
 		if ('orientation' in $$props) $$invalidate(0, orientation = $$props.orientation);
 		if ('disabled' in $$props) $$invalidate(5, disabled = $$props.disabled);
 		if ('error' in $$props) $$invalidate(6, error = $$props.error);
@@ -6584,25 +6630,23 @@ function instance$7($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*disabled*/ 32) {
-			$$invalidate(8, isDisabled = toBoolean(disabled));
+			$$invalidate(9, isDisabled = toBoolean(disabled));
+		}
+
+		if ($$self.$$.dirty & /*error*/ 64) {
+			$$invalidate(7, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty & /*error, name, value, isDisabled, isError*/ 472) {
+		if ($$self.$$.dirty & /*ctx, value, isDisabled, isError*/ 912) {
+			// reactive updates to exposed properties
 			{
-				$$invalidate(7, isError = toBoolean(error));
-
-				messageChannel.update(prev => {
-					return Object.assign(Object.assign({}, prev), {
-						[name]: {
-							tag: name,
-							payload: {
-								value,
-								disabled: isDisabled,
-								error: isError
-							}
-						}
+				ctx === null || ctx === void 0
+				? void 0
+				: ctx.notify("propChange", {
+						value,
+						disabled: isDisabled,
+						error: isError
 					});
-				});
 			}
 		}
 	};
@@ -6611,13 +6655,14 @@ function instance$7($$self, $$props, $$invalidate) {
 		orientation,
 		testid,
 		el,
-		value,
 		name,
+		value,
 		disabled,
 		error,
 		isError,
+		ctx,
 		isDisabled,
-		div0_binding
+		div_binding
 	];
 }
 
@@ -6637,8 +6682,8 @@ class RadioGroup extends SvelteElement {
 			create_fragment$7,
 			safe_not_equal,
 			{
-				name: 4,
-				value: 3,
+				name: 3,
+				value: 4,
 				orientation: 0,
 				disabled: 5,
 				error: 6,
@@ -6664,7 +6709,7 @@ class RadioGroup extends SvelteElement {
 	}
 
 	get name() {
-		return this.$$.ctx[4];
+		return this.$$.ctx[3];
 	}
 
 	set name(name) {
@@ -6673,7 +6718,7 @@ class RadioGroup extends SvelteElement {
 	}
 
 	get value() {
-		return this.$$.ctx[3];
+		return this.$$.ctx[4];
 	}
 
 	set value(value) {
@@ -6720,7 +6765,7 @@ class RadioGroup extends SvelteElement {
 
 customElements.define("goa-radio-group", RadioGroup);
 
-/* libs/web-components/src/components/radio-item/RadioItem.svelte generated by Svelte v3.44.3 */
+/* libs/web-components/src/components/radio-group/RadioItem.svelte generated by Svelte v3.44.3 */
 
 function create_fragment$6(ctx) {
 	let label_1;
@@ -6732,6 +6777,7 @@ function create_fragment$6(ctx) {
 	let slot;
 	let t2_value = (/*label*/ ctx[1] || /*value*/ ctx[0]) + "";
 	let t2;
+	let label_1_data_testid_value;
 	let mounted;
 	let dispose;
 
@@ -6747,13 +6793,13 @@ function create_fragment$6(ctx) {
 			t2 = text(t2_value);
 			this.c = noop;
 			attr(input, "type", "radio");
-			attr(input, "data-testid", "radio-input");
 			attr(input, "name", /*name*/ ctx[2]);
 			input.value = /*value*/ ctx[0];
 			input.checked = /*checked*/ ctx[4];
 			input.disabled = /*disabled*/ ctx[3];
 			attr(div, "class", "goa-radio-icon");
 			attr(span, "class", "goa-radio-label");
+			attr(label_1, "data-testid", label_1_data_testid_value = "radio-item-" + /*value*/ ctx[0]);
 			attr(label_1, "class", "goa-radio");
 			toggle_class(label_1, "goa-radio--disabled", /*disabled*/ ctx[3]);
 			toggle_class(label_1, "goa-radio--error", /*error*/ ctx[5]);
@@ -6792,6 +6838,10 @@ function create_fragment$6(ctx) {
 
 			if (dirty & /*label, value*/ 3 && t2_value !== (t2_value = (/*label*/ ctx[1] || /*value*/ ctx[0]) + "")) set_data(t2, t2_value);
 
+			if (dirty & /*value*/ 1 && label_1_data_testid_value !== (label_1_data_testid_value = "radio-item-" + /*value*/ ctx[0])) {
+				attr(label_1, "data-testid", label_1_data_testid_value);
+			}
+
 			if (dirty & /*disabled*/ 8) {
 				toggle_class(label_1, "goa-radio--disabled", /*disabled*/ ctx[3]);
 			}
@@ -6820,35 +6870,25 @@ function instance$6($$self, $$props, $$invalidate) {
 
 	let checked = false;
 	let error = false;
-	let unsubscribe;
+	let ctx;
 
 	// Hooks
 	onMount(() => {
-		unsubscribe = messageChannel.subscribe(channel => {
-			const msg = channel[name];
-
-			if ((msg === null || msg === void 0 ? void 0 : msg.tag) !== name) {
-				return;
-			}
+		ctx = getContext(name);
 
-			$$invalidate(4, checked = msg.payload.value === value);
-			$$invalidate(3, disabled = msg.payload.disabled);
-			$$invalidate(5, error = msg.payload.error);
+		ctx.subscribe("propChange", state => {
+			$$invalidate(4, checked = state.value === value);
+			$$invalidate(3, disabled = state.disabled);
+			$$invalidate(5, error = state.error);
 		});
 	});
 
-	onDestroy(unsubscribe);
-
 	// Events
 	function onChange(e) {
 		$$invalidate(4, checked = !checked);
 
 		if (checked) {
-			messageChannel.update(prev => {
-				return Object.assign(Object.assign({}, prev), {
-					[name]: { tag: name, payload: { disabled, value } }
-				});
-			});
+			ctx.notify("optionChange", { checked, disabled, value });
 		}
 	}