@abgov/web-components 1.0.0-alpha.196 → 1.0.0-alpha.197

package/package.json

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

package/web-components.es.js

@@ -372,7 +372,7 @@ function wait() {
     }
     return promise;
 }
-function dispatch(node, direction, kind) {
+function dispatch$1(node, direction, kind) {
     node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`));
 }
 const outroing = new Set();
@@ -436,12 +436,12 @@ function create_in_transition(node, fn, params) {
         if (task)
             task.abort();
         running = true;
-        add_render_callback(() => dispatch(node, true, 'start'));
+        add_render_callback(() => dispatch$1(node, true, 'start'));
         task = loop(now => {
             if (running) {
                 if (now >= end_time) {
                     tick(1, 0);
-                    dispatch(node, true, 'end');
+                    dispatch$1(node, true, 'end');
                     cleanup();
                     return running = false;
                 }
@@ -491,12 +491,12 @@ function create_out_transition(node, fn, params) {
             animation_name = create_rule(node, 1, 0, duration, delay, easing, css);
         const start_time = now() + delay;
         const end_time = start_time + duration;
-        add_render_callback(() => dispatch(node, false, 'start'));
+        add_render_callback(() => dispatch$1(node, false, 'start'));
         loop(now => {
             if (running) {
                 if (now >= end_time) {
                     tick(0, 1);
-                    dispatch(node, false, 'end');
+                    dispatch$1(node, false, 'end');
                     if (!--group.r) {
                         // this will result in `end()` being called,
                         // so we don't need to clean up here
@@ -582,12 +582,12 @@ function create_bidirectional_transition(node, fn, params, intro) {
             if (b)
                 tick(0, 1);
             running_program = init(program, duration);
-            add_render_callback(() => dispatch(node, b, 'start'));
+            add_render_callback(() => dispatch$1(node, b, 'start'));
             loop(now => {
                 if (pending_program && now > pending_program.start) {
                     running_program = init(pending_program, duration);
                     pending_program = null;
-                    dispatch(node, running_program.b, 'start');
+                    dispatch$1(node, running_program.b, 'start');
                     if (css) {
                         clear_animation();
                         animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css);
@@ -596,7 +596,7 @@ function create_bidirectional_transition(node, fn, params, intro) {
                 if (running_program) {
                     if (now >= running_program.end) {
                         tick(t = running_program.b, 1 - t);
-                        dispatch(node, running_program.b, 'end');
+                        dispatch$1(node, running_program.b, 'end');
                         if (!pending_program) {
                             // we're done
                             if (running_program.b) {
@@ -1608,7 +1608,7 @@ function create_else_block$9(ctx) {
 }
 
 // (51:2) {#if showIcon}
-function create_if_block_1$f(ctx) {
+function create_if_block_1$g(ctx) {
 	let goa_icon;
 	let goa_icon_arialabel_value;
 
@@ -1674,7 +1674,7 @@ function create_fragment$Q(ctx) {
 	let div_class_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*showIcon*/ ctx[8]) return create_if_block_1$f;
+		if (/*showIcon*/ ctx[8]) return create_if_block_1$g;
 		return create_else_block$9;
 	}
 
@@ -2142,7 +2142,7 @@ function create_else_block$8(ctx) {
 	let t1;
 	let if_block1_anchor;
 	let if_block0 = /*leadingicon*/ ctx[3] && create_if_block_2$a(ctx);
-	let if_block1 = /*trailingicon*/ ctx[4] && create_if_block_1$e(ctx);
+	let if_block1 = /*trailingicon*/ ctx[4] && create_if_block_1$f(ctx);
 
 	return {
 		c() {
@@ -2181,7 +2181,7 @@ function create_else_block$8(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$e(ctx);
+					if_block1 = create_if_block_1$f(ctx);
 					if_block1.c();
 					if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
 				}
@@ -2262,7 +2262,7 @@ function create_if_block_2$a(ctx) {
 }
 
 // (58:4) {#if trailingicon}
-function create_if_block_1$e(ctx) {
+function create_if_block_1$f(ctx) {
 	let goa_icon;
 
 	return {
@@ -3572,7 +3572,7 @@ customElements.define("goa-card-image", CardImage);
 
 /* libs/web-components/src/components/checkbox/Checkbox.svelte generated by Svelte v3.51.0 */
 
-function create_if_block_1$d(ctx) {
+function create_if_block_1$e(ctx) {
 	let svg;
 	let path;
 
@@ -3639,7 +3639,7 @@ function create_fragment$G(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*isIndeterminate*/ ctx[10]) return create_if_block$l;
-		if (/*isChecked*/ ctx[9]) return create_if_block_1$d;
+		if (/*isChecked*/ ctx[9]) return create_if_block_1$e;
 	}
 
 	let current_block_type = select_block_type(ctx);
@@ -4041,7 +4041,7 @@ customElements.define("goa-checkbox", Checkbox);
 
 /* libs/web-components/src/components/chip/Chip.svelte generated by Svelte v3.51.0 */
 
-function create_if_block_1$c(ctx) {
+function create_if_block_1$d(ctx) {
 	let goa_icon;
 
 	return {
@@ -4118,7 +4118,7 @@ function create_fragment$F(ctx) {
 	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_1$c(ctx);
+	let if_block0 = /*leadingicon*/ ctx[4] && create_if_block_1$d(ctx);
 	let if_block1 = /*_deletable*/ ctx[11] && create_if_block$k(ctx);
 
 	return {
@@ -4167,7 +4167,7 @@ function create_fragment$F(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_1$c(ctx);
+					if_block0 = create_if_block_1$d(ctx);
 					if_block0.c();
 					if_block0.m(div1, t0);
 				}
@@ -4551,7 +4551,7 @@ function create_if_block$j(ctx) {
 	let if_block;
 	let if_block_anchor;
 	let current;
-	const if_block_creators = [create_if_block_1$b, create_if_block_3$9];
+	const if_block_creators = [create_if_block_1$c, create_if_block_3$9];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -4697,7 +4697,7 @@ function create_if_block_3$9(ctx) {
 }
 
 // (32:2) {#if fullscreen}
-function create_if_block_1$b(ctx) {
+function create_if_block_1$c(ctx) {
 	let div;
 	let goa_spinner;
 	let t;
@@ -5674,7 +5674,7 @@ function create_else_block$7(ctx) {
 	let ul_style_value;
 	let mounted;
 	let dispose;
-	let if_block = /*_isMenuVisible*/ ctx[17] && create_if_block_1$a(ctx);
+	let if_block = /*_isMenuVisible*/ ctx[17] && create_if_block_1$b(ctx);
 	let each_value_1 = /*_options*/ ctx[12];
 	const get_key = ctx => /*index*/ ctx[54];
 
@@ -5753,7 +5753,7 @@ function create_else_block$7(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_1$a(ctx);
+					if_block = create_if_block_1$b(ctx);
 					if_block.c();
 					if_block.m(t0.parentNode, t0);
 				}
@@ -5928,7 +5928,7 @@ function create_if_block$i(ctx) {
 }
 
 // (271:4) {#if _isMenuVisible}
-function create_if_block_1$a(ctx) {
+function create_if_block_1$b(ctx) {
 	let div;
 	let div_data_testid_value;
 	let noscroll_action;
@@ -7808,7 +7808,7 @@ function create_if_block_3$8(ctx) {
 }
 
 // (42:2) {#if error}
-function create_if_block_1$9(ctx) {
+function create_if_block_1$a(ctx) {
 	let div;
 	let goa_icon;
 	let t0;
@@ -7873,7 +7873,7 @@ function create_fragment$u(ctx) {
 	let t2;
 	let div1_style_value;
 	let if_block0 = /*label*/ ctx[5] && create_if_block_2$8(ctx);
-	let if_block1 = /*error*/ ctx[7] && create_if_block_1$9(ctx);
+	let if_block1 = /*error*/ ctx[7] && create_if_block_1$a(ctx);
 	let if_block2 = /*helptext*/ ctx[6] && create_if_block$f(ctx);
 
 	return {
@@ -7921,7 +7921,7 @@ function create_fragment$u(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$9(ctx);
+					if_block1 = create_if_block_1$a(ctx);
 					if_block1.c();
 					if_block1.m(div1, t2);
 				}
@@ -8812,7 +8812,7 @@ function create_if_block$e(ctx) {
 	function select_block_type(ctx, dirty) {
 		if (dirty & /*type*/ 16) show_if = null;
 		if (show_if == null) show_if = !!Object.keys(/*_iconOverrides*/ ctx[13]).includes(/*type*/ ctx[4]);
-		if (show_if) return create_if_block_1$8;
+		if (show_if) return create_if_block_1$9;
 		return create_else_block$6;
 	}
 
@@ -8878,7 +8878,7 @@ function create_else_block$6(ctx) {
 }
 
 // (56:4) {#if Object.keys(_iconOverrides).includes(type)}
-function create_if_block_1$8(ctx) {
+function create_if_block_1$9(ctx) {
 	let div;
 	let raw_value = /*_iconOverrides*/ ctx[13][/*type*/ ctx[4]] + "";
 
@@ -9318,7 +9318,7 @@ function create_if_block_2$7(ctx) {
 }
 
 // (167:4) {#if trailingicon && handlesTrailingIconClick}
-function create_if_block_1$7(ctx) {
+function create_if_block_1$8(ctx) {
 	let goa_icon_button;
 	let mounted;
 	let dispose;
@@ -9404,7 +9404,7 @@ function create_fragment$p(ctx) {
 	let if_block0 = /*prefix*/ ctx[14] && create_if_block_4$2(ctx);
 	let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$7(ctx);
 	let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[27] && create_if_block_2$7(ctx);
-	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[27] && create_if_block_1$7(ctx);
+	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[27] && create_if_block_1$8(ctx);
 	let if_block4 = /*suffix*/ ctx[15] && create_if_block$d(ctx);
 
 	return {
@@ -9616,7 +9616,7 @@ function create_fragment$p(ctx) {
 				if (if_block3) {
 					if_block3.p(ctx, dirty);
 				} else {
-					if_block3 = create_if_block_1$7(ctx);
+					if_block3 = create_if_block_1$8(ctx);
 					if_block3.c();
 					if_block3.m(div2, t5);
 				}
@@ -10258,7 +10258,7 @@ function create_if_block_3$6(ctx) {
 }
 
 // (31:4) {#if ["alpha", "beta"].includes(type)}
-function create_if_block_1$6(ctx) {
+function create_if_block_1$7(ctx) {
 	let div0;
 	let t0_value = capitalize(/*type*/ ctx[0]) + "";
 	let t0;
@@ -10394,7 +10394,7 @@ function create_fragment$o(ctx) {
 	let t2;
 	let header_style_value;
 	let if_block0 = /*type*/ ctx[0] === "live" && create_if_block_3$6();
-	let if_block1 = show_if && create_if_block_1$6(ctx);
+	let if_block1 = show_if && create_if_block_1$7(ctx);
 	let if_block2 = /*version*/ ctx[1] && create_if_block$c(ctx);
 
 	return {
@@ -10443,7 +10443,7 @@ function create_fragment$o(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_1$6(ctx);
+					if_block1 = create_if_block_1$7(ctx);
 					if_block1.c();
 					if_block1.m(div1, t1);
 				}
@@ -10621,7 +10621,7 @@ function create_if_block$b(ctx) {
 
 	let current_block_type = select_block_type(ctx);
 	let if_block1 = current_block_type(ctx);
-	let if_block2 = /*_isClosable*/ ctx[9] && create_if_block_1$5(ctx);
+	let if_block2 = /*_isClosable*/ ctx[9] && create_if_block_1$6(ctx);
 
 	return {
 		c() {
@@ -10730,7 +10730,7 @@ function create_if_block$b(ctx) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
-					if_block2 = create_if_block_1$5(ctx);
+					if_block2 = create_if_block_1$6(ctx);
 					if_block2.c();
 					if_block2.m(header, null);
 				}
@@ -10890,7 +10890,7 @@ function create_if_block_2$5(ctx) {
 }
 
 // (154:12) {#if _isClosable}
-function create_if_block_1$5(ctx) {
+function create_if_block_1$6(ctx) {
 	let div;
 	let goa_icon_button;
 	let mounted;
@@ -13474,7 +13474,7 @@ function create_if_block_2$4(ctx) {
 }
 
 // (54:31) 
-function create_if_block_1$4(ctx) {
+function create_if_block_1$5(ctx) {
 	let div2;
 	let div0;
 	let skeleton0;
@@ -13707,7 +13707,7 @@ function create_fragment$g(ctx) {
 
 	const if_block_creators = [
 		create_if_block$7,
-		create_if_block_1$4,
+		create_if_block_1$5,
 		create_if_block_2$4,
 		create_if_block_3$4,
 		create_else_block$4
@@ -14622,6 +14622,16 @@ function create_fragment$d(ctx) {
 	};
 }
 
+function dispatch(el, params) {
+	el.dispatchEvent(new CustomEvent("_sort",
+	{
+			composed: true,
+			bubbles: true,
+			cancelable: false,
+			detail: params
+		}));
+}
+
 function instance$a($$self, $$props, $$invalidate) {
 	let _stickyHeader;
 	const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
@@ -14638,7 +14648,11 @@ function instance$a($$self, $$props, $$invalidate) {
 
 	onMount(() => {
 		validateVariant(variant);
+
+		// without setTimeout it won't properly sort in Safari
 		setTimeout(attachSortEventHandling, 0);
+
+		// exit here if when running tests (tests don't have assignedElements)
 		const slot = _rootEl.querySelector("slot");
 
 		if (!slot || slot.assignedElements().length === 0) {
@@ -14663,10 +14677,10 @@ function instance$a($$self, $$props, $$invalidate) {
 				// relay state to all children
 				headings.forEach(child => {
 					if (child.getAttribute("name") === sortBy) {
-						const direction = child.getAttribute("direction");
+						const direction = child["direction"];
 
-						// starting direction is desc
-						const newDirection = direction === "desc" ? "asc" : "desc";
+						// starting direction is asc
+						const newDirection = direction === "asc" ? "desc" : "asc";
 
 						sortDir = newDirection === "asc" ? 1 : -1;
 						child.setAttribute("direction", newDirection);
@@ -14675,14 +14689,25 @@ function instance$a($$self, $$props, $$invalidate) {
 					}
 				});
 
-				heading.dispatchEvent(new CustomEvent("_sort",
-				{
-						composed: true,
-						bubbles: false,
-						cancelable: true,
-						detail: { sortBy, sortDir }
-					}));
+				dispatch(heading, { sortBy, sortDir });
 			});
+
+			// dispatch the default sort params if initially set
+			const initialSortBy = heading.getAttribute("name");
+
+			const initialDirection = heading["direction"];
+
+			if (initialDirection && initialDirection !== "none") {
+				setTimeout(
+					() => {
+						dispatch(heading, {
+							sortBy: initialSortBy,
+							sortDir: initialDirection === "asc" ? 1 : -1
+						});
+					},
+					10
+				);
+			}
 		});
 	}
 
@@ -14835,51 +14860,60 @@ customElements.define("goa-table", Table);
 /* libs/web-components/src/components/table/TableSortHeader.svelte generated by Svelte v3.51.0 */
 
 function create_else_block$3(ctx) {
-	let img;
-	let img_src_value;
+	let div;
 
 	return {
 		c() {
-			img = element("img");
-			attr(img, "alt", /*direction*/ ctx[0]);
-			attr(img, "class", /*direction*/ ctx[0]);
-			if (!src_url_equal(img.src, img_src_value = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgd2lkdGg9IjE2IgogICBoZWlnaHQ9IjIyIgogICB2aWV3Qm94PSIwIDAgMTYgMjIiCiAgIGZpbGw9Im5vbmUiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzEwNjgiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczEwNzIiIC8+CiAgPHBhdGgKICAgICBkPSJtIDAuNTk0Mzc0NzEsNy45MDkwOTkgNi41NTIxODc5OSw3LjY0NjI1IGMgMC4xMDU2MSwwLjEyMzE4IDAuMjM2NjIsMC4yMjIwNiAwLjM4NDA0LDAuMjg5ODUgMC4xNDc0MiwwLjA2Nzc5IDAuMzA3NzYsMC4xMDI4OSAwLjQ3MDAyLDAuMTAyODkgMC4xNjIyNiwwIDAuMzIyNiwtMC4wMzUxIDAuNDcwMDIsLTAuMTAyODkgMC4xNDc0MiwtMC4wNjc3OSAwLjI3ODQzLC0wLjE2NjY3IDAuMzg0MDQsLTAuMjg5ODUgbCA2LjU1MjE4MDMsLTcuNjQ2MjUgYyAwLjYyNTMsLTAuNzI5ODQgMC4xMDY5LC0xLjg1NzE4OCAtMC44NTQxLC0xLjg1NzE4OCBIIDEuNDQ2NTYyNyBjIC0wLjk2MDkzNzk5LDAgLTEuNDc5Mzc1NjksMS4xMjczNDggLTAuODUyMTg3OTksMS44NTcxODggeiIKICAgICBmaWxsPSIjMDA3MGM0IgogICAgIGlkPSJwYXRoMTA2NiIgLz4KPC9zdmc+Cg==")) attr(img, "src", img_src_value);
+			div = element("div");
+
+			div.innerHTML = `<goa-icon type="caret-up" size="small"></goa-icon> 
+      <goa-icon type="caret-down" size="small"></goa-icon>`;
+
+			attr(div, "class", "direction--none");
 		},
 		m(target, anchor) {
-			insert(target, img, anchor);
+			insert(target, div, anchor);
 		},
-		p(ctx, dirty) {
-			if (dirty & /*direction*/ 1) {
-				attr(img, "alt", /*direction*/ ctx[0]);
-			}
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
 
-			if (dirty & /*direction*/ 1) {
-				attr(img, "class", /*direction*/ ctx[0]);
-			}
+// (71:32) 
+function create_if_block_1$4(ctx) {
+	let goa_icon;
+
+	return {
+		c() {
+			goa_icon = element("goa-icon");
+			set_custom_element_data(goa_icon, "type", "caret-up");
+			set_custom_element_data(goa_icon, "size", "small");
+		},
+		m(target, anchor) {
+			insert(target, goa_icon, anchor);
 		},
 		d(detaching) {
-			if (detaching) detach(img);
+			if (detaching) detach(goa_icon);
 		}
 	};
 }
 
-// (55:2) {#if direction === "none"}
+// (69:2) {#if direction === "desc"}
 function create_if_block$5(ctx) {
-	let img;
-	let img_src_value;
+	let goa_icon;
 
 	return {
 		c() {
-			img = element("img");
-			attr(img, "alt", "not sorted");
-			if (!src_url_equal(img.src, img_src_value = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMTUuMzU5ODg3IgogICBoZWlnaHQ9IjIxLjg0NDI1IgogICB2aWV3Qm94PSIwIDAgNC4wNjM5NzAxIDUuNzc5NjI0NCIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNTE3IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM1MTQiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05LjM0NTE0MDMsLTguNzQ0OTg2NikiPgogICAgPHBhdGgKICAgICAgIGQ9Im0gOS40MTc3Njg0LDEyLjM5NzYzMSAxLjczMzU5ODYsMi4wMjMwNyBjIDAuMDI3OTQsMC4wMzI1OSAwLjA2MjYxLDAuMDU4NzUgMC4xMDE2MTEsMC4wNzY2OSAwLjAzOSwwLjAxNzk0IDAuMDgxNDMsMC4wMjcyMiAwLjEyNDM1OSwwLjAyNzIyIDAuMDQyOTMsMCAwLjA4NTM1LC0wLjAwOTMgMC4xMjQzNiwtMC4wMjcyMiAwLjAzOSwtMC4wMTc5NCAwLjA3MzY3LC0wLjA0NDEgMC4xMDE2MSwtMC4wNzY2OSBsIDEuNzMzNTk4LC0yLjAyMzA3IGMgMC4xNjU0NDQsLTAuMTkzMTA0IDAuMDI4MjgsLTAuNDkxMzgxIC0wLjIyNTk4MSwtMC40OTEzODEgSCA5LjY0MzI0MjQgYyAtMC4yNTQyNDgsMCAtMC4zOTE0MTgsMC4yOTgyNzcgLTAuMjI1NDc0LDAuNDkxMzgxIHoiCiAgICAgICBmaWxsPSIjYWRhZGFkIgogICAgICAgaWQ9InBhdGgzMzUiCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMjY0NTgzIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Ik0gMTMuMzM2NDk0LDEwLjg3MTk2OCAxMS42MDI4ODksOC44NDg4OTY2IGMgLTAuMDI3OTQsLTAuMDMyNTkgLTAuMDYyNjEsLTAuMDU4NzUgLTAuMTAxNjExLC0wLjA3NjY5IC0wLjAzOSwtMC4wMTc5NCAtMC4wODE0MywtMC4wMjcyMiAtMC4xMjQzNTksLTAuMDI3MjIgLTAuMDQyOTMsMCAtMC4wODUzNSwwLjAwOTMgLTAuMTI0MzYsMC4wMjcyMiAtMC4wMzkwMSwwLjAxNzk0IC0wLjA3MzY3LDAuMDQ0MSAtMC4xMDE2MTMsMC4wNzY2OSBMIDkuNDE3MzQ3MSwxMC44NzE5NjggYyAtMC4xNjU0NDcsMC4xOTMxMDMgLTAuMDI4MjgsMC40OTEzNzkgMC4yMjU5NzEsMC40OTEzNzkgaCAzLjQ2NzY5NzkgYyAwLjI1NDIzOCwwIDAuMzkxNDI1LC0wLjI5ODI3NiAwLjIyNTQ3OCwtMC40OTEzNzkgeiIKICAgICAgIGZpbGw9IiNhZGFkYWQiCiAgICAgICBpZD0icGF0aDIiCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMjY0NTgzIiAvPgogIDwvZz4KPC9zdmc+Cg==")) attr(img, "src", img_src_value);
+			goa_icon = element("goa-icon");
+			set_custom_element_data(goa_icon, "type", "caret-down");
+			set_custom_element_data(goa_icon, "size", "small");
 		},
 		m(target, anchor) {
-			insert(target, img, anchor);
+			insert(target, goa_icon, anchor);
 		},
-		p: noop,
 		d(detaching) {
-			if (detaching) detach(img);
+			if (detaching) detach(goa_icon);
 		}
 	};
 }
@@ -14890,7 +14924,8 @@ function create_fragment$c(ctx) {
 	let t;
 
 	function select_block_type(ctx, dirty) {
-		if (/*direction*/ ctx[0] === "none") return create_if_block$5;
+		if (/*direction*/ ctx[0] === "desc") return create_if_block$5;
+		if (/*direction*/ ctx[0] === "asc") return create_if_block_1$4;
 		return create_else_block$3;
 	}
 
@@ -14912,9 +14947,7 @@ function create_fragment$c(ctx) {
 			if_block.m(button, null);
 		},
 		p(ctx, [dirty]) {
-			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
-				if_block.p(ctx, dirty);
-			} else {
+			if (current_block_type !== (current_block_type = select_block_type(ctx))) {
 				if_block.d(1);
 				if_block = current_block_type(ctx);
 
@@ -14946,7 +14979,7 @@ function instance$9($$self, $$props, $$invalidate) {
 class TableSortHeader extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{display:flex;align-items:flex-end}button{border:none;background:none;display:flex;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;padding:1rem;width:100%;height:100%;text-align:left;gap:0.25rem;align-items:flex-end;justify-content:stretch}button *{align-self:flex-end}img{width:16px;height:22px;scale:0.7}button:hover{background-color:var(--goa-color-greyscale-100);cursor:pointer;color:var(--goa-color-interactive-default)}img.asc{transform:rotate(180deg)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{display:flex;align-items:flex-end}button{border:none;background:none;display:flex;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;width:100%;height:3.75rem;align-items:center;padding:0 1rem;text-align:left;gap:0.25rem;align-items:center}button:hover{background-color:var(--goa-color-greyscale-100);cursor:pointer;color:var(--goa-color-interactive-hover)}button goa-icon{color:var(--goa-color-interactive-default)}button:hover goa-icon{color:var(--goa-color-interactive-hover)}button .direction--none goa-icon{color:var(--goa-color-greyscale-400)}button:hover .direction--none goa-icon{color:var(--goa-color-greyscale-400)}goa-icon{scale:0.8}.direction--none goa-icon{height:0.625rem}.direction--none{display:inline-flex;flex-direction:column;align-items:center}</style>`;
 
 		init(
 			this,