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

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]] + "";
 
@@ -9266,7 +9266,7 @@ function create_if_block_4$2(ctx) {
 	};
 }
 
-// (123:4) {#if leadingicon}
+// (124:4) {#if leadingicon}
 function create_if_block_3$7(ctx) {
 	let goa_icon;
 
@@ -9291,7 +9291,7 @@ function create_if_block_3$7(ctx) {
 	};
 }
 
-// (157:4) {#if trailingicon && !handlesTrailingIconClick}
+// (159:4) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_2$7(ctx) {
 	let goa_icon;
 
@@ -9317,8 +9317,8 @@ function create_if_block_2$7(ctx) {
 	};
 }
 
-// (167:4) {#if trailingicon && handlesTrailingIconClick}
-function create_if_block_1$7(ctx) {
+// (169:4) {#if trailingicon && handlesTrailingIconClick}
+function create_if_block_1$8(ctx) {
 	let goa_icon_button;
 	let mounted;
 	let dispose;
@@ -9326,7 +9326,7 @@ function create_if_block_1$7(ctx) {
 	return {
 		c() {
 			goa_icon_button = element("goa-icon-button");
-			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[24]);
+			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[25]);
 			set_custom_element_data(goa_icon_button, "variant", "nocolor");
 			set_custom_element_data(goa_icon_button, "size", "medium");
 			set_custom_element_data(goa_icon_button, "icon", /*trailingicon*/ ctx[6]);
@@ -9341,8 +9341,8 @@ function create_if_block_1$7(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*isDisabled*/ 16777216) {
-				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[24]);
+			if (dirty[0] & /*isDisabled*/ 33554432) {
+				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[25]);
 			}
 
 			if (dirty[0] & /*trailingicon*/ 64) {
@@ -9357,7 +9357,7 @@ function create_if_block_1$7(ctx) {
 	};
 }
 
-// (179:4) {#if suffix}
+// (181:4) {#if suffix}
 function create_if_block$d(ctx) {
 	let span;
 	let t;
@@ -9403,8 +9403,8 @@ function create_fragment$p(ctx) {
 	let dispose;
 	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_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[28] && create_if_block_2$7(ctx);
+	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[28] && create_if_block_1$8(ctx);
 	let if_block4 = /*suffix*/ ctx[15] && create_if_block$d(ctx);
 
 	return {
@@ -9433,17 +9433,17 @@ function create_fragment$p(ctx) {
 
 			attr(input, "class", input_class_value = `
         input--${/*variant*/ ctx[7]}
-        ${/*_leadingContentSlot*/ ctx[22] && !/*isDisabled*/ ctx[24]
+        ${/*_leadingContentSlot*/ ctx[23] && !/*isDisabled*/ ctx[25]
 			? "input-leading-content"
 			: ""}
-        ${/*_trailingContentSlot*/ ctx[23] && !/*isDisabled*/ ctx[24]
+        ${/*_trailingContentSlot*/ ctx[24] && !/*isDisabled*/ ctx[25]
 			? "input-trailing-content"
 			: ""}
       `);
 
 			attr(input, "style", input_style_value = `--search-icon-offset: ${/*trailingicon*/ ctx[6] ? "-0.5rem" : "0"}`);
-			input.readOnly = /*isReadonly*/ ctx[26];
-			input.disabled = /*isDisabled*/ ctx[24];
+			input.readOnly = /*isReadonly*/ ctx[27];
+			input.disabled = /*isDisabled*/ ctx[25];
 			attr(input, "data-testid", /*testid*/ ctx[8]);
 			attr(input, "autocapitalize", /*autocapitalize*/ ctx[3]);
 			attr(input, "name", /*name*/ ctx[2]);
@@ -9453,28 +9453,29 @@ function create_fragment$p(ctx) {
 			attr(input, "min", /*min*/ ctx[11]);
 			attr(input, "max", /*max*/ ctx[12]);
 			attr(input, "step", /*step*/ ctx[13]);
+			attr(input, "maxlength", /*maxlength*/ ctx[16]);
 			attr(input, "role", "textbox");
 			attr(input, "aria-label", input_aria_label_value = /*arialabel*/ ctx[10] || /*name*/ ctx[2]);
 			attr(div1, "class", "trailing-content");
 
 			attr(div2, "class", div2_class_value = `
       goa-input
-      ${/*isDisabled*/ ctx[24] ? "goa-input--disabled" : ""}
+      ${/*isDisabled*/ ctx[25] ? "goa-input--disabled" : ""}
       variant--${/*variant*/ ctx[7]}
       type--${/*type*/ ctx[1]}
-      ${/*_leadingContentSlot*/ ctx[22]
+      ${/*_leadingContentSlot*/ ctx[23]
 			? "goa-input-leading-content"
 			: ""}
-      ${/*_trailingContentSlot*/ ctx[23]
+      ${/*_trailingContentSlot*/ ctx[24]
 			? "goa-input-trailing-content"
 			: ""}
     `);
 
-			toggle_class(div2, "error", /*isError*/ ctx[25]);
+			toggle_class(div2, "error", /*isError*/ ctx[26]);
 			attr(div3, "class", "container");
 
 			attr(div3, "style", div3_style_value = `
-    ${calculateMargin(/*mt*/ ctx[16], /*mr*/ ctx[17], /*mb*/ ctx[18], /*ml*/ ctx[19])};
+    ${calculateMargin(/*mt*/ ctx[17], /*mr*/ ctx[18], /*mb*/ ctx[19], /*ml*/ ctx[20])};
     --width: ${/*width*/ ctx[9]};
   `);
 		},
@@ -9488,7 +9489,7 @@ function create_fragment$p(ctx) {
 			if (if_block1) if_block1.m(div2, null);
 			append(div2, t2);
 			append(div2, input);
-			/*input_binding*/ ctx[36](input);
+			/*input_binding*/ ctx[37](input);
 			append(div2, t3);
 			if (if_block2) if_block2.m(div2, null);
 			append(div2, t4);
@@ -9497,12 +9498,12 @@ function create_fragment$p(ctx) {
 			if (if_block4) if_block4.m(div2, null);
 			append(div2, t6);
 			append(div2, div1);
-			/*div3_binding*/ ctx[37](div3);
+			/*div3_binding*/ ctx[38](div3);
 
 			if (!mounted) {
 				dispose = [
-					listen(input, "keyup", /*onKeyUp*/ ctx[28]),
-					listen(input, "change", /*onKeyUp*/ ctx[28])
+					listen(input, "keyup", /*onKeyUp*/ ctx[29]),
+					listen(input, "change", /*onKeyUp*/ ctx[29])
 				];
 
 				mounted = true;
@@ -9535,12 +9536,12 @@ function create_fragment$p(ctx) {
 				if_block1 = null;
 			}
 
-			if (dirty[0] & /*variant, _leadingContentSlot, isDisabled, _trailingContentSlot*/ 29360256 && input_class_value !== (input_class_value = `
+			if (dirty[0] & /*variant, _leadingContentSlot, isDisabled, _trailingContentSlot*/ 58720384 && input_class_value !== (input_class_value = `
         input--${/*variant*/ ctx[7]}
-        ${/*_leadingContentSlot*/ ctx[22] && !/*isDisabled*/ ctx[24]
+        ${/*_leadingContentSlot*/ ctx[23] && !/*isDisabled*/ ctx[25]
 			? "input-leading-content"
 			: ""}
-        ${/*_trailingContentSlot*/ ctx[23] && !/*isDisabled*/ ctx[24]
+        ${/*_trailingContentSlot*/ ctx[24] && !/*isDisabled*/ ctx[25]
 			? "input-trailing-content"
 			: ""}
       `)) {
@@ -9551,12 +9552,12 @@ function create_fragment$p(ctx) {
 				attr(input, "style", input_style_value);
 			}
 
-			if (dirty[0] & /*isReadonly*/ 67108864) {
-				input.readOnly = /*isReadonly*/ ctx[26];
+			if (dirty[0] & /*isReadonly*/ 134217728) {
+				input.readOnly = /*isReadonly*/ ctx[27];
 			}
 
-			if (dirty[0] & /*isDisabled*/ 16777216) {
-				input.disabled = /*isDisabled*/ ctx[24];
+			if (dirty[0] & /*isDisabled*/ 33554432) {
+				input.disabled = /*isDisabled*/ ctx[25];
 			}
 
 			if (dirty[0] & /*testid*/ 256) {
@@ -9595,11 +9596,15 @@ function create_fragment$p(ctx) {
 				attr(input, "step", /*step*/ ctx[13]);
 			}
 
+			if (dirty[0] & /*maxlength*/ 65536) {
+				attr(input, "maxlength", /*maxlength*/ ctx[16]);
+			}
+
 			if (dirty[0] & /*arialabel, name*/ 1028 && input_aria_label_value !== (input_aria_label_value = /*arialabel*/ ctx[10] || /*name*/ ctx[2])) {
 				attr(input, "aria-label", input_aria_label_value);
 			}
 
-			if (/*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[27]) {
+			if (/*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[28]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
@@ -9612,11 +9617,11 @@ function create_fragment$p(ctx) {
 				if_block2 = null;
 			}
 
-			if (/*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[27]) {
+			if (/*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[28]) {
 				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);
 				}
@@ -9638,27 +9643,27 @@ function create_fragment$p(ctx) {
 				if_block4 = null;
 			}
 
-			if (dirty[0] & /*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot*/ 29360258 && div2_class_value !== (div2_class_value = `
+			if (dirty[0] & /*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot*/ 58720386 && div2_class_value !== (div2_class_value = `
       goa-input
-      ${/*isDisabled*/ ctx[24] ? "goa-input--disabled" : ""}
+      ${/*isDisabled*/ ctx[25] ? "goa-input--disabled" : ""}
       variant--${/*variant*/ ctx[7]}
       type--${/*type*/ ctx[1]}
-      ${/*_leadingContentSlot*/ ctx[22]
+      ${/*_leadingContentSlot*/ ctx[23]
 			? "goa-input-leading-content"
 			: ""}
-      ${/*_trailingContentSlot*/ ctx[23]
+      ${/*_trailingContentSlot*/ ctx[24]
 			? "goa-input-trailing-content"
 			: ""}
     `)) {
 				attr(div2, "class", div2_class_value);
 			}
 
-			if (dirty[0] & /*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot, isError*/ 62914690) {
-				toggle_class(div2, "error", /*isError*/ ctx[25]);
+			if (dirty[0] & /*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot, isError*/ 125829250) {
+				toggle_class(div2, "error", /*isError*/ ctx[26]);
 			}
 
-			if (dirty[0] & /*mt, mr, mb, ml, width*/ 983552 && div3_style_value !== (div3_style_value = `
-    ${calculateMargin(/*mt*/ ctx[16], /*mr*/ ctx[17], /*mb*/ ctx[18], /*ml*/ ctx[19])};
+			if (dirty[0] & /*mt, mr, mb, ml, width*/ 1966592 && div3_style_value !== (div3_style_value = `
+    ${calculateMargin(/*mt*/ ctx[17], /*mr*/ ctx[18], /*mb*/ ctx[19], /*ml*/ ctx[20])};
     --width: ${/*width*/ ctx[9]};
   `)) {
 				attr(div3, "style", div3_style_value);
@@ -9670,11 +9675,11 @@ function create_fragment$p(ctx) {
 			if (detaching) detach(div3);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*input_binding*/ ctx[36](null);
+			/*input_binding*/ ctx[37](null);
 			if (if_block2) if_block2.d();
 			if (if_block3) if_block3.d();
 			if (if_block4) if_block4.d();
-			/*div3_binding*/ ctx[37](null);
+			/*div3_binding*/ ctx[38](null);
 			mounted = false;
 			run_all(dispose);
 		}
@@ -9731,6 +9736,7 @@ function instance$m($$self, $$props, $$invalidate) {
 	let { prefix = "" } = $$props;
 	let { suffix = "" } = $$props;
 	let { debounce = 0 } = $$props;
+	let { maxlength = null } = $$props;
 	let { mt = null } = $$props;
 	let { mr = null } = $$props;
 	let { mb = null } = $$props;
@@ -9776,27 +9782,27 @@ function instance$m($$self, $$props, $$invalidate) {
 		const leadingContentSlot = _rootEL.querySelector("slot[name=leadingContent]");
 
 		if (leadingContentSlot && leadingContentSlot.assignedNodes().length > 0) {
-			$$invalidate(22, _leadingContentSlot = true);
+			$$invalidate(23, _leadingContentSlot = true);
 		}
 
 		const trailingContentSlot = _rootEL.querySelector("slot[name=trailingContent]");
 
 		if (trailingContentSlot && trailingContentSlot.assignedNodes().length > 0) {
-			$$invalidate(23, _trailingContentSlot = true);
+			$$invalidate(24, _trailingContentSlot = true);
 		}
 	});
 
 	function input_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			inputEl = $$value;
-			$$invalidate(20, inputEl);
+			$$invalidate(21, inputEl);
 		});
 	}
 
 	function div3_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			_rootEL = $$value;
-			$$invalidate(21, _rootEL);
+			$$invalidate(22, _rootEL);
 		});
 	}
 
@@ -9809,11 +9815,11 @@ function instance$m($$self, $$props, $$invalidate) {
 		if ('leadingicon' in $$props) $$invalidate(5, leadingicon = $$props.leadingicon);
 		if ('trailingicon' in $$props) $$invalidate(6, trailingicon = $$props.trailingicon);
 		if ('variant' in $$props) $$invalidate(7, variant = $$props.variant);
-		if ('disabled' in $$props) $$invalidate(29, disabled = $$props.disabled);
-		if ('handletrailingiconclick' in $$props) $$invalidate(30, handletrailingiconclick = $$props.handletrailingiconclick);
-		if ('focused' in $$props) $$invalidate(31, focused = $$props.focused);
-		if ('readonly' in $$props) $$invalidate(32, readonly = $$props.readonly);
-		if ('error' in $$props) $$invalidate(33, error = $$props.error);
+		if ('disabled' in $$props) $$invalidate(30, disabled = $$props.disabled);
+		if ('handletrailingiconclick' in $$props) $$invalidate(31, handletrailingiconclick = $$props.handletrailingiconclick);
+		if ('focused' in $$props) $$invalidate(32, focused = $$props.focused);
+		if ('readonly' in $$props) $$invalidate(33, readonly = $$props.readonly);
+		if ('error' in $$props) $$invalidate(34, error = $$props.error);
 		if ('testid' in $$props) $$invalidate(8, testid = $$props.testid);
 		if ('width' in $$props) $$invalidate(9, width = $$props.width);
 		if ('arialabel' in $$props) $$invalidate(10, arialabel = $$props.arialabel);
@@ -9822,41 +9828,42 @@ function instance$m($$self, $$props, $$invalidate) {
 		if ('step' in $$props) $$invalidate(13, step = $$props.step);
 		if ('prefix' in $$props) $$invalidate(14, prefix = $$props.prefix);
 		if ('suffix' in $$props) $$invalidate(15, suffix = $$props.suffix);
-		if ('debounce' in $$props) $$invalidate(34, debounce = $$props.debounce);
-		if ('mt' in $$props) $$invalidate(16, mt = $$props.mt);
-		if ('mr' in $$props) $$invalidate(17, mr = $$props.mr);
-		if ('mb' in $$props) $$invalidate(18, mb = $$props.mb);
-		if ('ml' in $$props) $$invalidate(19, ml = $$props.ml);
+		if ('debounce' in $$props) $$invalidate(35, debounce = $$props.debounce);
+		if ('maxlength' in $$props) $$invalidate(16, maxlength = $$props.maxlength);
+		if ('mt' in $$props) $$invalidate(17, mt = $$props.mt);
+		if ('mr' in $$props) $$invalidate(18, mr = $$props.mr);
+		if ('mb' in $$props) $$invalidate(19, mb = $$props.mb);
+		if ('ml' in $$props) $$invalidate(20, ml = $$props.ml);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*handletrailingiconclick*/ 1073741824) {
-			$$invalidate(27, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+		if ($$self.$$.dirty[1] & /*handletrailingiconclick*/ 1) {
+			$$invalidate(28, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 		}
 
-		if ($$self.$$.dirty[1] & /*focused*/ 1) {
-			$$invalidate(35, isFocused = toBoolean(focused));
+		if ($$self.$$.dirty[1] & /*focused*/ 2) {
+			$$invalidate(36, isFocused = toBoolean(focused));
 		}
 
-		if ($$self.$$.dirty[1] & /*readonly*/ 2) {
-			$$invalidate(26, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty[1] & /*readonly*/ 4) {
+			$$invalidate(27, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty[1] & /*error*/ 4) {
-			$$invalidate(25, isError = toBoolean(error));
+		if ($$self.$$.dirty[1] & /*error*/ 8) {
+			$$invalidate(26, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty[0] & /*disabled*/ 536870912) {
-			$$invalidate(24, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty[0] & /*disabled*/ 1073741824) {
+			$$invalidate(25, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty[0] & /*inputEl*/ 1048576 | $$self.$$.dirty[1] & /*isFocused*/ 16) {
+		if ($$self.$$.dirty[0] & /*inputEl*/ 2097152 | $$self.$$.dirty[1] & /*isFocused*/ 32) {
 			if (isFocused && inputEl) {
 				setTimeout(() => inputEl.focus(), 1);
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*inputEl, type*/ 1048578) {
+		if ($$self.$$.dirty[0] & /*inputEl, type*/ 2097154) {
 			if (inputEl && type === "search") {
 				inputEl.addEventListener("search", e => {
 					onKeyUp(e);
@@ -9882,6 +9889,7 @@ function instance$m($$self, $$props, $$invalidate) {
 		step,
 		prefix,
 		suffix,
+		maxlength,
 		mt,
 		mr,
 		mb,
@@ -9933,11 +9941,11 @@ class Input extends SvelteElement {
 				leadingicon: 5,
 				trailingicon: 6,
 				variant: 7,
-				disabled: 29,
-				handletrailingiconclick: 30,
-				focused: 31,
-				readonly: 32,
-				error: 33,
+				disabled: 30,
+				handletrailingiconclick: 31,
+				focused: 32,
+				readonly: 33,
+				error: 34,
 				testid: 8,
 				width: 9,
 				arialabel: 10,
@@ -9946,11 +9954,12 @@ class Input extends SvelteElement {
 				step: 13,
 				prefix: 14,
 				suffix: 15,
-				debounce: 34,
-				mt: 16,
-				mr: 17,
-				mb: 18,
-				ml: 19
+				debounce: 35,
+				maxlength: 16,
+				mt: 17,
+				mr: 18,
+				mb: 19,
+				ml: 20
 			},
 			null,
 			[-1, -1]
@@ -9992,6 +10001,7 @@ class Input extends SvelteElement {
 			"prefix",
 			"suffix",
 			"debounce",
+			"maxlength",
 			"mt",
 			"mr",
 			"mb",
@@ -10072,7 +10082,7 @@ class Input extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[29];
+		return this.$$.ctx[30];
 	}
 
 	set disabled(disabled) {
@@ -10081,7 +10091,7 @@ class Input extends SvelteElement {
 	}
 
 	get handletrailingiconclick() {
-		return this.$$.ctx[30];
+		return this.$$.ctx[31];
 	}
 
 	set handletrailingiconclick(handletrailingiconclick) {
@@ -10090,7 +10100,7 @@ class Input extends SvelteElement {
 	}
 
 	get focused() {
-		return this.$$.ctx[31];
+		return this.$$.ctx[32];
 	}
 
 	set focused(focused) {
@@ -10099,7 +10109,7 @@ class Input extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[32];
+		return this.$$.ctx[33];
 	}
 
 	set readonly(readonly) {
@@ -10108,7 +10118,7 @@ class Input extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[33];
+		return this.$$.ctx[34];
 	}
 
 	set error(error) {
@@ -10189,7 +10199,7 @@ class Input extends SvelteElement {
 	}
 
 	get debounce() {
-		return this.$$.ctx[34];
+		return this.$$.ctx[35];
 	}
 
 	set debounce(debounce) {
@@ -10197,17 +10207,26 @@ class Input extends SvelteElement {
 		flush();
 	}
 
-	get mt() {
+	get maxlength() {
 		return this.$$.ctx[16];
 	}
 
+	set maxlength(maxlength) {
+		this.$$set({ maxlength });
+		flush();
+	}
+
+	get mt() {
+		return this.$$.ctx[17];
+	}
+
 	set mt(mt) {
 		this.$$set({ mt });
 		flush();
 	}
 
 	get mr() {
-		return this.$$.ctx[17];
+		return this.$$.ctx[18];
 	}
 
 	set mr(mr) {
@@ -10216,7 +10235,7 @@ class Input extends SvelteElement {
 	}
 
 	get mb() {
-		return this.$$.ctx[18];
+		return this.$$.ctx[19];
 	}
 
 	set mb(mb) {
@@ -10225,7 +10244,7 @@ class Input extends SvelteElement {
 	}
 
 	get ml() {
-		return this.$$.ctx[19];
+		return this.$$.ctx[20];
 	}
 
 	set ml(ml) {
@@ -10258,7 +10277,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 +10413,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 +10462,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 +10640,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 +10749,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 +10909,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 +13493,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 +13726,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 +14641,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 +14667,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 +14696,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 +14708,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 +14879,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 +14943,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 +14966,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 +14998,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,