@abgov/web-components 1.0.0-alpha.92 → 1.0.0-alpha.95

package/package.json

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

package/web-components.es.js

@@ -1732,9 +1732,9 @@ function clickHandler(e) {
 function instance$w($$self, $$props, $$invalidate) {
 	let isDisabled;
 	let isButtonDark;
-	const BUTTON_TYPES = ["primary", "secondary", "tertiary", "start"];
-	const SIZES = ["", "compact"];
-	const VARIANTS = ["", "destructive"];
+	const BUTTON_TYPES = ["primary", "submit", "secondary", "tertiary", "start"];
+	const SIZES = ["normal", "compact"];
+	const VARIANTS = ["normal", "destructive"];
 
 	// type check functions
 	function isButtonType(value) {
@@ -1750,8 +1750,8 @@ function instance$w($$self, $$props, $$invalidate) {
 	}
 
 	let { type = "primary" } = $$props;
-	let { size = "" } = $$props;
-	let { variant = "" } = $$props;
+	let { size = "normal" } = $$props;
+	let { variant = "normal" } = $$props;
 	let { title = "" } = $$props;
 	let { disabled = "false" } = $$props;
 	let { leadingicon = null } = $$props;
@@ -1812,7 +1812,7 @@ class Button extends SvelteElement {
 		super();
 
 		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.destructive{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.destructive:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.destructive:focus,.primary.destructive:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
+      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.submit,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.submit:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.submit:focus,button.submit:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.submit.destructive,.primary.destructive{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.submit.destructive:hover,.primary.destructive:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.submit.destructive:focus,.primary.destructive:focus,.primary.destructive:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.destructive{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.destructive:focus,.secondary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.destructive:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.destructive:focus,.tertiary.destructive:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
 
 		init(
 			this,
@@ -3527,7 +3527,7 @@ function writable(value, start = noop) {
 }
 
 const stores = {};
-class ContextStore {
+class ContextStoreInternal {
   constructor() {
     this.store = writable();
   }
@@ -3541,22 +3541,12 @@ class ContextStore {
   }
 }
 function createContext(name) {
-  const ctx = new ContextStore();
+  const ctx = new ContextStoreInternal();
   stores[name] = ctx;
   return ctx;
 }
-async function getContext(name) {
-  return await _getContext(name, 0);
-}
-async function _getContext(name, attempts) {
-  if (attempts > 10) {
-    throw new Error(`Could not find context ${name}`);
-  }
-  if (stores[name]) {
-    return stores[name];
-  }
-  await tick();
-  return _getContext(name, attempts + 1);
+function getContext(name) {
+  return stores[name];
 }
 function deleteContext(name) {
   const store = stores[name];
@@ -3571,12 +3561,12 @@ const BIND$1 = "bind";
 
 function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[36] = list[i];
-	child_ctx[38] = i;
+	child_ctx[39] = list[i];
+	child_ctx[41] = i;
 	return child_ctx;
 }
 
-// (180:2) {#if isMenuVisible}
+// (198:2) {#if isMenuVisible}
 function create_if_block$d(ctx) {
 	let div;
 	let div_data_testid_value;
@@ -3610,10 +3600,10 @@ function create_if_block$d(ctx) {
 	};
 }
 
-// (216:4) {#each options as option, index (option.value)}
-function create_each_block$4(key_1, ctx) {
+// (234:4) {#each options as option, index}
+function create_each_block$4(ctx) {
 	let li;
-	let t0_value = /*option*/ ctx[36].label + "";
+	let t0_value = (/*option*/ ctx[39].label || /*option*/ ctx[39].value) + "";
 	let t0;
 	let t1;
 	let li_aria_label_value;
@@ -3624,25 +3614,22 @@ function create_each_block$4(key_1, ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[22](/*option*/ ctx[36]);
+		return /*click_handler*/ ctx[22](/*option*/ ctx[39]);
 	}
 
 	return {
-		key: key_1,
-		first: null,
 		c() {
 			li = element("li");
 			t0 = text(t0_value);
 			t1 = space();
-			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[36].label || /*option*/ ctx[36].value);
-			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[36].value}-dropdown-item`);
-			attr(li, "data-index", li_data_index_value = /*index*/ ctx[38]);
+			attr(li, "aria-label", li_aria_label_value = /*option*/ ctx[39].label || /*option*/ ctx[39].value);
+			attr(li, "data-testid", li_data_testid_value = `${/*option*/ ctx[39].value}-dropdown-item`);
+			attr(li, "data-index", li_data_index_value = /*index*/ ctx[41]);
 			attr(li, "class", "goa-dropdown-option");
 			attr(li, "style", li_style_value = `display: ${"block"}`);
 			toggle_class(li, "goa-dropdown-option--disabled", false);
-			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[38] === /*highlightedIndex*/ ctx[13]);
-			toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[9].includes(/*option*/ ctx[36].value));
-			this.first = li;
+			toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[41] === /*highlightedIndex*/ ctx[13]);
+			toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[9].includes(/*option*/ ctx[39].value));
 		},
 		m(target, anchor) {
 			insert(target, li, anchor);
@@ -3656,26 +3643,22 @@ function create_each_block$4(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty[0] & /*options*/ 1024 && t0_value !== (t0_value = /*option*/ ctx[36].label + "")) set_data(t0, t0_value);
+			if (dirty[0] & /*options*/ 1024 && t0_value !== (t0_value = (/*option*/ ctx[39].label || /*option*/ ctx[39].value) + "")) set_data(t0, t0_value);
 
-			if (dirty[0] & /*options*/ 1024 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[36].label || /*option*/ ctx[36].value)) {
+			if (dirty[0] & /*options*/ 1024 && li_aria_label_value !== (li_aria_label_value = /*option*/ ctx[39].label || /*option*/ ctx[39].value)) {
 				attr(li, "aria-label", li_aria_label_value);
 			}
 
-			if (dirty[0] & /*options*/ 1024 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[36].value}-dropdown-item`)) {
+			if (dirty[0] & /*options*/ 1024 && li_data_testid_value !== (li_data_testid_value = `${/*option*/ ctx[39].value}-dropdown-item`)) {
 				attr(li, "data-testid", li_data_testid_value);
 			}
 
-			if (dirty[0] & /*options*/ 1024 && li_data_index_value !== (li_data_index_value = /*index*/ ctx[38])) {
-				attr(li, "data-index", li_data_index_value);
-			}
-
-			if (dirty[0] & /*options, highlightedIndex*/ 9216) {
-				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[38] === /*highlightedIndex*/ ctx[13]);
+			if (dirty[0] & /*highlightedIndex*/ 8192) {
+				toggle_class(li, "goa-dropdown-option--tabbed", /*index*/ ctx[41] === /*highlightedIndex*/ ctx[13]);
 			}
 
 			if (dirty[0] & /*_values, options*/ 1536) {
-				toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[9].includes(/*option*/ ctx[36].value));
+				toggle_class(li, "goa-dropdown-option--selected", /*_values*/ ctx[9].includes(/*option*/ ctx[39].value));
 			}
 		},
 		d(detaching) {
@@ -3698,20 +3681,16 @@ function create_fragment$q(ctx) {
 	let ul;
 	let slot;
 	let t2;
-	let each_blocks = [];
-	let each_1_lookup = new Map();
 	let ul_style_value;
 	let div1_style_value;
 	let mounted;
 	let dispose;
 	let if_block = /*isMenuVisible*/ ctx[12] && create_if_block$d(ctx);
 	let each_value = /*options*/ ctx[10];
-	const get_key = ctx => /*option*/ ctx[36].value;
+	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		let child_ctx = get_each_context$4(ctx, each_value, i);
-		let key = get_key(child_ctx);
-		each_1_lookup.set(key, each_blocks[i] = create_each_block$4(key, child_ctx));
+		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
 	}
 
 	return {
@@ -3823,7 +3802,25 @@ function create_fragment$q(ctx) {
 
 			if (dirty[0] & /*options, highlightedIndex, _values, onSelect*/ 534016) {
 				each_value = /*options*/ ctx[10];
-				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, destroy_block, create_each_block$4, null, get_each_context$4);
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context$4(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block$4(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(ul, null);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
 			}
 
 			if (dirty[0] & /*maxheight*/ 8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${/*maxheight*/ ctx[3]}`)) {
@@ -3847,11 +3844,7 @@ function create_fragment$q(ctx) {
 		d(detaching) {
 			if (detaching) detach(div1);
 			if (if_block) if_block.d();
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].d();
-			}
-
+			destroy_each(each_blocks, detaching);
 			/*ul_binding*/ ctx[23](null);
 			/*div1_binding*/ ctx[24](null);
 			mounted = false;
@@ -3891,15 +3884,47 @@ function instance$o($$self, $$props, $$invalidate) {
 	let ctx;
 
 	// Hooks
-	onMount(async () => {
-		if (!name) {
-			console.error("goa-dropdown: missing the required `name` attribute. It must match the children's name attribute.");
-			return;
-		}
+	onMount(() => {
+		const maxAttempts = 10;
+		let attempts = 0;
+
+		const fn = setInterval(
+			async () => {
+				attempts++;
+
+				if (name && el) {
+					addEventListeners();
+					parseValues();
+					bindContext();
+					clearInterval(fn);
+				}
 
+				if (attempts > maxAttempts) {
+					console.error("goa-dropdown: missing the required `name` attribute. It must match the children's name attribute.");
+					clearInterval(fn);
+				}
+			},
+			10
+		);
+	});
+
+	onDestroy(() => {
+		removeEventListeners();
+		deleteContext(name);
+	});
+
+	// Functions
+	function addEventListeners() {
 		el.addEventListener("focus", onFocus, true);
 		el.addEventListener("blur", onBlur, true);
+	}
 
+	function removeEventListeners() {
+		el.removeEventListener("focus", onFocus, true);
+		el.removeEventListener("blur", onBlur, true);
+	}
+
+	function parseValues() {
 		// parse and convert values to strings to avoid later type comparison issues
 		let rawValue;
 
@@ -3913,17 +3938,8 @@ function instance$o($$self, $$props, $$invalidate) {
 
 		// convert all values to strings to avoid later type comparison issues
 		$$invalidate(9, _values = rawValues.map(val => `${val}`));
+	}
 
-		bindContext();
-	});
-
-	onDestroy(() => {
-		el.removeEventListener("focus", onFocus, true);
-		el.removeEventListener("blur", onBlur, true);
-		deleteContext(name);
-	});
-
-	// Functions
 	function bindContext() {
 		ctx = createContext(name);
 
@@ -4311,15 +4327,23 @@ function instance$n($$self, $$props, $$invalidate) {
 	// private
 	let ctx;
 
-	// Hooks
-	onMount(async () => {
-		if (!name) {
-			console.error("goa-dropdown-item: missing the required `name` attribute. It must match the parent's name attribute");
-			return;
-		}
+	onMount(() => {
+
+		const fn = setInterval(
+			() => {
+				if (name && value) {
+					ctx = getContext(name);
 
-		ctx = await getContext(name);
-		ctx.notify({ type: BIND$1, name, label, value });
+					if (!ctx) {
+						return;
+					}
+
+					ctx.notify({ type: BIND$1, name, label, value });
+					clearInterval(fn);
+				}
+			},
+			10
+		);
 	});
 
 	$$self.$$set = $$props => {
@@ -7614,7 +7638,7 @@ function get_each_context$3(ctx, list, i) {
 	return child_ctx;
 }
 
-// (55:2) {#each options as option (option.value) }
+// (63:2) {#each options as option (option.value) }
 function create_each_block$3(key_1, ctx) {
 	let label;
 	let input;
@@ -7802,21 +7826,35 @@ function instance$d($$self, $$props, $$invalidate) {
 	let el;
 
 	onMount(() => {
-		if (!name) {
-			console.error("goa-radio: missing the required `name` attribute. It must match the children's name attribute.");
-			return;
-		}
+		const maxAttempts = 10;
+		let attempts = 0;
+
+		const fn = setInterval(
+			async () => {
+				attempts++;
+
+				if (name) {
+					ctx = createContext(name);
+
+					ctx.subscribe(msg => {
+						switch (msg === null || msg === void 0 ? void 0 : msg.type) {
+							case BIND:
+								{
+									$$invalidate(4, options = [...options, msg]);
+								}
+						}
+					});
 
-		ctx = createContext(name);
+					clearInterval(fn);
+				}
 
-		ctx.subscribe(msg => {
-			switch (msg === null || msg === void 0 ? void 0 : msg.type) {
-				case BIND:
-					{
-						$$invalidate(4, options = [...options, msg]);
-					}
-			}
-		});
+				if (attempts > maxAttempts) {
+					console.error("goa-radio: missing the required `name` attribute. It must match the children's name attribute.");
+					clearInterval(fn);
+				}
+			},
+			10
+		);
 	});
 
 	function onChange(newValue) {
@@ -7994,14 +8032,32 @@ function instance$c($$self, $$props, $$invalidate) {
 	let { name } = $$props;
 	let ctx;
 
-	onMount(async () => {
-		if (!name) {
-			console.error("goa-radio-item: missing the required `name` attribute. It must match the parent's name attribute.");
-			return;
-		}
+	onMount(() => {
+		const maxAttempts = 10;
+		let attempts = 0;
+
+		const fn = setInterval(
+			() => {
+				attempts++;
+
+				if (name) {
+					ctx = getContext(name);
+
+					if (!ctx) {
+						return;
+					}
+
+					ctx.notify({ type: BIND, value, label });
+					clearInterval(fn);
+				}
 
-		ctx = await getContext(name);
-		ctx.notify({ type: BIND, value, label });
+				if (attempts > maxAttempts) {
+					console.error("goa-radio-item: missing the required `name` attribute. It must match the parent's name attribute.");
+					clearInterval(fn);
+				}
+			},
+			10
+		);
 	});
 
 	$$self.$$set = $$props => {