@abgov/web-components 1.0.0-alpha.174 → 1.0.0-alpha.175

package/package.json

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

package/web-components.es.js

@@ -9073,7 +9073,7 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (109:4) {#if leadingicon}
+// (123:4) {#if leadingicon}
 function create_if_block_3$4(ctx) {
 	let goa_icon;
 
@@ -9098,7 +9098,7 @@ function create_if_block_3$4(ctx) {
 	};
 }
 
-// (139:4) {#if trailingicon && !handlesTrailingIconClick}
+// (157:4) {#if trailingicon && !handlesTrailingIconClick}
 function create_if_block_2$4(ctx) {
 	let goa_icon;
 
@@ -9124,7 +9124,7 @@ function create_if_block_2$4(ctx) {
 	};
 }
 
-// (149:4) {#if trailingicon && handlesTrailingIconClick}
+// (167:4) {#if trailingicon && handlesTrailingIconClick}
 function create_if_block_1$4(ctx) {
 	let goa_icon_button;
 	let mounted;
@@ -9133,7 +9133,7 @@ function create_if_block_1$4(ctx) {
 	return {
 		c() {
 			goa_icon_button = element("goa-icon-button");
-			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[21]);
+			set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[24]);
 			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]);
@@ -9148,8 +9148,8 @@ function create_if_block_1$4(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*isDisabled*/ 2097152) {
-				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[21]);
+			if (dirty[0] & /*isDisabled*/ 16777216) {
+				set_custom_element_data(goa_icon_button, "disabled", /*isDisabled*/ ctx[24]);
 			}
 
 			if (dirty[0] & /*trailingicon*/ 64) {
@@ -9164,7 +9164,7 @@ function create_if_block_1$4(ctx) {
 	};
 }
 
-// (161:4) {#if suffix}
+// (179:4) {#if suffix}
 function create_if_block$a(ctx) {
 	let span;
 	let t;
@@ -9210,8 +9210,8 @@ function create_fragment$k(ctx) {
 	let dispose;
 	let if_block0 = /*prefix*/ ctx[14] && create_if_block_4(ctx);
 	let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$4(ctx);
-	let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[24] && create_if_block_2$4(ctx);
-	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[24] && create_if_block_1$4(ctx);
+	let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[27] && create_if_block_2$4(ctx);
+	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[27] && create_if_block_1$4(ctx);
 	let if_block4 = /*suffix*/ ctx[15] && create_if_block$a(ctx);
 
 	return {
@@ -9237,10 +9237,20 @@ function create_fragment$k(ctx) {
 			div1.innerHTML = `<slot name="trailingContent"></slot>`;
 			this.c = noop;
 			attr(div0, "class", "leading-content");
-			attr(input, "class", input_class_value = `input--${/*variant*/ ctx[7]}`);
+
+			attr(input, "class", input_class_value = `
+        input--${/*variant*/ ctx[7]}
+        ${/*_leadingContentSlot*/ ctx[22] && !/*isDisabled*/ ctx[24]
+			? "input-leading-content"
+			: ""}
+        ${/*_trailingContentSlot*/ ctx[23] && !/*isDisabled*/ ctx[24]
+			? "input-trailing-content"
+			: ""}
+      `);
+
 			attr(input, "style", input_style_value = `--search-icon-offset: ${/*trailingicon*/ ctx[6] ? "-0.5rem" : "0"}`);
-			input.readOnly = /*isReadonly*/ ctx[23];
-			input.disabled = /*isDisabled*/ ctx[21];
+			input.readOnly = /*isReadonly*/ ctx[26];
+			input.disabled = /*isDisabled*/ ctx[24];
 			attr(input, "data-testid", /*testid*/ ctx[8]);
 			attr(input, "autocapitalize", /*autocapitalize*/ ctx[3]);
 			attr(input, "name", /*name*/ ctx[2]);
@@ -9256,12 +9266,18 @@ function create_fragment$k(ctx) {
 
 			attr(div2, "class", div2_class_value = `
       goa-input
-      ${/*isDisabled*/ ctx[21] ? "goa-input--disabled" : ""}
+      ${/*isDisabled*/ ctx[24] ? "goa-input--disabled" : ""}
       variant--${/*variant*/ ctx[7]}
       type--${/*type*/ ctx[1]}
+      ${/*_leadingContentSlot*/ ctx[22]
+			? "goa-input-leading-content"
+			: ""}
+      ${/*_trailingContentSlot*/ ctx[23]
+			? "goa-input-trailing-content"
+			: ""}
     `);
 
-			toggle_class(div2, "error", /*isError*/ ctx[22]);
+			toggle_class(div2, "error", /*isError*/ ctx[25]);
 			attr(div3, "class", "container");
 
 			attr(div3, "style", div3_style_value = `
@@ -9279,7 +9295,7 @@ function create_fragment$k(ctx) {
 			if (if_block1) if_block1.m(div2, null);
 			append(div2, t2);
 			append(div2, input);
-			/*input_binding*/ ctx[33](input);
+			/*input_binding*/ ctx[36](input);
 			append(div2, t3);
 			if (if_block2) if_block2.m(div2, null);
 			append(div2, t4);
@@ -9288,11 +9304,12 @@ function create_fragment$k(ctx) {
 			if (if_block4) if_block4.m(div2, null);
 			append(div2, t6);
 			append(div2, div1);
+			/*div3_binding*/ ctx[37](div3);
 
 			if (!mounted) {
 				dispose = [
-					listen(input, "keyup", /*onKeyUp*/ ctx[25]),
-					listen(input, "change", /*onKeyUp*/ ctx[25])
+					listen(input, "keyup", /*onKeyUp*/ ctx[28]),
+					listen(input, "change", /*onKeyUp*/ ctx[28])
 				];
 
 				mounted = true;
@@ -9325,7 +9342,15 @@ function create_fragment$k(ctx) {
 				if_block1 = null;
 			}
 
-			if (dirty[0] & /*variant*/ 128 && input_class_value !== (input_class_value = `input--${/*variant*/ ctx[7]}`)) {
+			if (dirty[0] & /*variant, _leadingContentSlot, isDisabled, _trailingContentSlot*/ 29360256 && input_class_value !== (input_class_value = `
+        input--${/*variant*/ ctx[7]}
+        ${/*_leadingContentSlot*/ ctx[22] && !/*isDisabled*/ ctx[24]
+			? "input-leading-content"
+			: ""}
+        ${/*_trailingContentSlot*/ ctx[23] && !/*isDisabled*/ ctx[24]
+			? "input-trailing-content"
+			: ""}
+      `)) {
 				attr(input, "class", input_class_value);
 			}
 
@@ -9333,12 +9358,12 @@ function create_fragment$k(ctx) {
 				attr(input, "style", input_style_value);
 			}
 
-			if (dirty[0] & /*isReadonly*/ 8388608) {
-				input.readOnly = /*isReadonly*/ ctx[23];
+			if (dirty[0] & /*isReadonly*/ 67108864) {
+				input.readOnly = /*isReadonly*/ ctx[26];
 			}
 
-			if (dirty[0] & /*isDisabled*/ 2097152) {
-				input.disabled = /*isDisabled*/ ctx[21];
+			if (dirty[0] & /*isDisabled*/ 16777216) {
+				input.disabled = /*isDisabled*/ ctx[24];
 			}
 
 			if (dirty[0] & /*testid*/ 256) {
@@ -9381,7 +9406,7 @@ function create_fragment$k(ctx) {
 				attr(input, "aria-label", input_aria_label_value);
 			}
 
-			if (/*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[24]) {
+			if (/*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[27]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 				} else {
@@ -9394,7 +9419,7 @@ function create_fragment$k(ctx) {
 				if_block2 = null;
 			}
 
-			if (/*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[24]) {
+			if (/*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[27]) {
 				if (if_block3) {
 					if_block3.p(ctx, dirty);
 				} else {
@@ -9420,17 +9445,23 @@ function create_fragment$k(ctx) {
 				if_block4 = null;
 			}
 
-			if (dirty[0] & /*isDisabled, variant, type*/ 2097282 && div2_class_value !== (div2_class_value = `
+			if (dirty[0] & /*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot*/ 29360258 && div2_class_value !== (div2_class_value = `
       goa-input
-      ${/*isDisabled*/ ctx[21] ? "goa-input--disabled" : ""}
+      ${/*isDisabled*/ ctx[24] ? "goa-input--disabled" : ""}
       variant--${/*variant*/ ctx[7]}
       type--${/*type*/ ctx[1]}
+      ${/*_leadingContentSlot*/ ctx[22]
+			? "goa-input-leading-content"
+			: ""}
+      ${/*_trailingContentSlot*/ ctx[23]
+			? "goa-input-trailing-content"
+			: ""}
     `)) {
 				attr(div2, "class", div2_class_value);
 			}
 
-			if (dirty[0] & /*isDisabled, variant, type, isError*/ 6291586) {
-				toggle_class(div2, "error", /*isError*/ ctx[22]);
+			if (dirty[0] & /*isDisabled, variant, type, _leadingContentSlot, _trailingContentSlot, isError*/ 62914690) {
+				toggle_class(div2, "error", /*isError*/ ctx[25]);
 			}
 
 			if (dirty[0] & /*mt, mr, mb, ml, width*/ 983552 && div3_style_value !== (div3_style_value = `
@@ -9446,10 +9477,11 @@ function create_fragment$k(ctx) {
 			if (detaching) detach(div3);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*input_binding*/ ctx[33](null);
+			/*input_binding*/ ctx[36](null);
 			if (if_block2) if_block2.d();
 			if (if_block3) if_block3.d();
 			if (if_block4) if_block4.d();
+			/*div3_binding*/ ctx[37](null);
 			mounted = false;
 			run_all(dispose);
 		}
@@ -9511,6 +9543,9 @@ function instance$i($$self, $$props, $$invalidate) {
 	let { mb = null } = $$props;
 	let { ml = null } = $$props;
 	let inputEl;
+	let _rootEL;
+	let _leadingContentSlot = false;
+	let _trailingContentSlot = false;
 	let _debounceId = null;
 
 	function onKeyUp(e) {
@@ -9544,6 +9579,18 @@ function instance$i($$self, $$props, $$invalidate) {
 		if (prefix != "" || suffix != "") {
 			console.warn("GoAInput [prefix] and [suffix] properties are deprecated. Instead use leadingContent and trailingContent.");
 		}
+
+		const leadingContentSlot = _rootEL.querySelector("slot[name=leadingContent]");
+
+		if (leadingContentSlot && leadingContentSlot.assignedNodes().length > 0) {
+			$$invalidate(22, _leadingContentSlot = true);
+		}
+
+		const trailingContentSlot = _rootEL.querySelector("slot[name=trailingContent]");
+
+		if (trailingContentSlot && trailingContentSlot.assignedNodes().length > 0) {
+			$$invalidate(23, _trailingContentSlot = true);
+		}
 	});
 
 	function input_binding($$value) {
@@ -9553,6 +9600,13 @@ function instance$i($$self, $$props, $$invalidate) {
 		});
 	}
 
+	function div3_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			_rootEL = $$value;
+			$$invalidate(21, _rootEL);
+		});
+	}
+
 	$$self.$$set = $$props => {
 		if ('type' in $$props) $$invalidate(1, type = $$props.type);
 		if ('name' in $$props) $$invalidate(2, name = $$props.name);
@@ -9562,11 +9616,11 @@ function instance$i($$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(26, disabled = $$props.disabled);
-		if ('handletrailingiconclick' in $$props) $$invalidate(27, handletrailingiconclick = $$props.handletrailingiconclick);
-		if ('focused' in $$props) $$invalidate(28, focused = $$props.focused);
-		if ('readonly' in $$props) $$invalidate(29, readonly = $$props.readonly);
-		if ('error' in $$props) $$invalidate(30, error = $$props.error);
+		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 ('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);
@@ -9575,7 +9629,7 @@ function instance$i($$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(31, debounce = $$props.debounce);
+		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);
@@ -9583,27 +9637,27 @@ function instance$i($$self, $$props, $$invalidate) {
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*handletrailingiconclick*/ 134217728) {
-			$$invalidate(24, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
+		if ($$self.$$.dirty[0] & /*handletrailingiconclick*/ 1073741824) {
+			$$invalidate(27, handlesTrailingIconClick = toBoolean(handletrailingiconclick));
 		}
 
-		if ($$self.$$.dirty[0] & /*focused*/ 268435456) {
-			$$invalidate(32, isFocused = toBoolean(focused));
+		if ($$self.$$.dirty[1] & /*focused*/ 1) {
+			$$invalidate(35, isFocused = toBoolean(focused));
 		}
 
-		if ($$self.$$.dirty[0] & /*readonly*/ 536870912) {
-			$$invalidate(23, isReadonly = toBoolean(readonly));
+		if ($$self.$$.dirty[1] & /*readonly*/ 2) {
+			$$invalidate(26, isReadonly = toBoolean(readonly));
 		}
 
-		if ($$self.$$.dirty[0] & /*error*/ 1073741824) {
-			$$invalidate(22, isError = toBoolean(error));
+		if ($$self.$$.dirty[1] & /*error*/ 4) {
+			$$invalidate(25, isError = toBoolean(error));
 		}
 
-		if ($$self.$$.dirty[0] & /*disabled*/ 67108864) {
-			$$invalidate(21, isDisabled = toBoolean(disabled));
+		if ($$self.$$.dirty[0] & /*disabled*/ 536870912) {
+			$$invalidate(24, isDisabled = toBoolean(disabled));
 		}
 
-		if ($$self.$$.dirty[0] & /*inputEl*/ 1048576 | $$self.$$.dirty[1] & /*isFocused*/ 2) {
+		if ($$self.$$.dirty[0] & /*inputEl*/ 1048576 | $$self.$$.dirty[1] & /*isFocused*/ 16) {
 			if (isFocused && inputEl) {
 				setTimeout(() => inputEl.focus(), 1);
 			}
@@ -9640,6 +9694,9 @@ function instance$i($$self, $$props, $$invalidate) {
 		mb,
 		ml,
 		inputEl,
+		_rootEL,
+		_leadingContentSlot,
+		_trailingContentSlot,
 		isDisabled,
 		isError,
 		isReadonly,
@@ -9652,7 +9709,8 @@ function instance$i($$self, $$props, $$invalidate) {
 		error,
 		debounce,
 		isFocused,
-		input_binding
+		input_binding,
+		div3_binding
 	];
 }
 
@@ -9660,7 +9718,7 @@ class Input extends SvelteElement {
 	constructor(options) {
 		super();
 
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) 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.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{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}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,.error:hover{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box;line-height:normal}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%;background-color:var(--goa-color-greyscale-white)}.goa-input:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.goa-input:active:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus:not(.goa-input-leading-content):not(.goa-input-trailing-content),.goa-input:focus-within:not(.goa-input-leading-content):not(.goa-input-trailing-content){box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.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{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans);z-index:1}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--goa-color-greyscale-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m);border-right:1px solid var(--goa-color-greyscale-700)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);border-left:1px solid var(--goa-color-greyscale-700)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--goa-color-greyscale-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--goa-color-greyscale-200)}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:not(.goa-input-leading-content):not(.goa-input-trailing-content),.error:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.error:focus-within:hover:not(.goa-input-leading-content):not(.goa-input-trailing-content){border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.error .input-leading-content,.error .input-leading-content:hover,.error .input-trailing-content,.error .input-trailing-content:hover{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-error)}.error .input-leading-content:focus,.error .input-trailing-content:focus,.error .input-leading-content:active,.error .input-trailing-content:active{outline:var(--goa-border-width-s) solid var(--goa-color-interactive-error);box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus)}.input-leading-content:hover,.input-trailing-content:hover{box-shadow:inset 0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover);outline:var(--goa-border-width-s) solid var(--goa-color-interactive-hover)}.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{box-shadow:0 0 0 var(--goa-border-width-l) var(--goa-color-interactive-focus);outline:var(--goa-border-width-s) solid var(--goa-color-greyscale-700)}.error .input-trailing-content,.input-trailing-content:hover,.input-trailing-content:active,.input-trailing-content:focus,.input-trailing-content:focus-within{border-top-left-radius:var(--goa-border-radius-m);border-bottom-left-radius:var(--goa-border-radius-m)}.error .input-leading-content,.input-leading-content:hover,.input-leading-content:active,.input-leading-content:focus,.input-leading-content:focus-within{border-top-right-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m)}.input-leading-content.input-trailing-content,.input-leading-content.input-trailing-content:hover,.input-leading-content.input-trailing-content:active,.input-leading-content.input-trailing-content:focus,.input-leading-content.input-trailing-content:focus-within{border-radius:0}input[type="search"]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
       center center no-repeat}</style>`;
 
 		init(
@@ -9682,11 +9740,11 @@ class Input extends SvelteElement {
 				leadingicon: 5,
 				trailingicon: 6,
 				variant: 7,
-				disabled: 26,
-				handletrailingiconclick: 27,
-				focused: 28,
-				readonly: 29,
-				error: 30,
+				disabled: 29,
+				handletrailingiconclick: 30,
+				focused: 31,
+				readonly: 32,
+				error: 33,
 				testid: 8,
 				width: 9,
 				arialabel: 10,
@@ -9695,7 +9753,7 @@ class Input extends SvelteElement {
 				step: 13,
 				prefix: 14,
 				suffix: 15,
-				debounce: 31,
+				debounce: 34,
 				mt: 16,
 				mr: 17,
 				mb: 18,
@@ -9821,7 +9879,7 @@ class Input extends SvelteElement {
 	}
 
 	get disabled() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[29];
 	}
 
 	set disabled(disabled) {
@@ -9830,7 +9888,7 @@ class Input extends SvelteElement {
 	}
 
 	get handletrailingiconclick() {
-		return this.$$.ctx[27];
+		return this.$$.ctx[30];
 	}
 
 	set handletrailingiconclick(handletrailingiconclick) {
@@ -9839,7 +9897,7 @@ class Input extends SvelteElement {
 	}
 
 	get focused() {
-		return this.$$.ctx[28];
+		return this.$$.ctx[31];
 	}
 
 	set focused(focused) {
@@ -9848,7 +9906,7 @@ class Input extends SvelteElement {
 	}
 
 	get readonly() {
-		return this.$$.ctx[29];
+		return this.$$.ctx[32];
 	}
 
 	set readonly(readonly) {
@@ -9857,7 +9915,7 @@ class Input extends SvelteElement {
 	}
 
 	get error() {
-		return this.$$.ctx[30];
+		return this.$$.ctx[33];
 	}
 
 	set error(error) {
@@ -9938,7 +9996,7 @@ class Input extends SvelteElement {
 	}
 
 	get debounce() {
-		return this.$$.ctx[31];
+		return this.$$.ctx[34];
 	}
 
 	set debounce(debounce) {