@abgov/web-components 1.0.0-alpha.121 → 1.0.0-alpha.123

package/web-components.es.js

@@ -1427,20 +1427,20 @@ function create_fragment$D(ctx) {
 			div = element("div");
 			slot = element("slot");
 			this.c = noop;
-			set_style(div, "--alignment", "flex-" + /*alignment*/ ctx[1]);
-			set_style(div, "--gap-size", /*gap*/ ctx[0] === "small" ? "0.5rem" : "1.25rem");
+			set_style(div, "--alignment", /*_alignment*/ ctx[1]);
+			set_style(div, "--gap-size", /*gap*/ ctx[0] === "relaxed" ? "1rem" : "0.75rem");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			append(div, slot);
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*alignment*/ 2) {
-				set_style(div, "--alignment", "flex-" + /*alignment*/ ctx[1]);
+			if (dirty & /*_alignment*/ 2) {
+				set_style(div, "--alignment", /*_alignment*/ ctx[1]);
 			}
 
 			if (dirty & /*gap*/ 1) {
-				set_style(div, "--gap-size", /*gap*/ ctx[0] === "small" ? "0.5rem" : "1.25rem");
+				set_style(div, "--gap-size", /*gap*/ ctx[0] === "relaxed" ? "1rem" : "0.75rem");
 			}
 		},
 		i: noop,
@@ -1452,15 +1452,45 @@ function create_fragment$D(ctx) {
 }
 
 function instance$y($$self, $$props, $$invalidate) {
-	let { gap = "medium" } = $$props;
+	let _alignment;
 	let { alignment } = $$props;
+	let { gap = "relaxed" } = $$props;
+	const BUTTON_ALIGNMENTS = ["start", "end", "center"];
+	const GAP = ["relaxed", "compact"];
+
+	// type check functions
+	function isButtonAlignment(value) {
+		return BUTTON_ALIGNMENTS.includes(value);
+	}
+
+	function isGap(value) {
+		return GAP.includes(value);
+	}
+
+	onMount(() => {
+		if (!isButtonAlignment(alignment)) {
+			console.error("Invalid button group alignment");
+		}
+
+		if (!isGap(gap)) {
+			console.error("Invalid button group gap");
+		}
+	});
 
 	$$self.$$set = $$props => {
+		if ('alignment' in $$props) $$invalidate(2, alignment = $$props.alignment);
 		if ('gap' in $$props) $$invalidate(0, gap = $$props.gap);
-		if ('alignment' in $$props) $$invalidate(1, alignment = $$props.alignment);
 	};
 
-	return [gap, alignment];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*alignment*/ 4) {
+			$$invalidate(1, _alignment = alignment === "start"
+			? "flex-start"
+			: alignment === "center" ? "center" : "flex-end");
+		}
+	};
+
+	return [gap, _alignment, alignment];
 }
 
 class ButtonGroup extends SvelteElement {
@@ -1478,7 +1508,7 @@ class ButtonGroup extends SvelteElement {
 			instance$y,
 			create_fragment$D,
 			safe_not_equal,
-			{ gap: 0, alignment: 1 },
+			{ alignment: 2, gap: 0 },
 			null
 		);
 
@@ -1495,24 +1525,24 @@ class ButtonGroup extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["gap", "alignment"];
+		return ["alignment", "gap"];
 	}
 
-	get gap() {
-		return this.$$.ctx[0];
+	get alignment() {
+		return this.$$.ctx[2];
 	}
 
-	set gap(gap) {
-		this.$$set({ gap });
+	set alignment(alignment) {
+		this.$$set({ alignment });
 		flush();
 	}
 
-	get alignment() {
-		return this.$$.ctx[1];
+	get gap() {
+		return this.$$.ctx[0];
 	}
 
-	set alignment(alignment) {
-		this.$$set({ alignment });
+	set gap(gap) {
+		this.$$set({ gap });
 		flush();
 	}
 }
@@ -3424,7 +3454,7 @@ function create_if_block_3$4(ctx) {
 	let goa_spinner;
 	let t;
 	let div_class_value;
-	let if_block = /*message*/ ctx[0] && create_if_block_4$1(ctx);
+	let if_block = /*message*/ ctx[0] && create_if_block_4$2(ctx);
 
 	return {
 		c() {
@@ -3456,7 +3486,7 @@ function create_if_block_3$4(ctx) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
-					if_block = create_if_block_4$1(ctx);
+					if_block = create_if_block_4$2(ctx);
 					if_block.c();
 					if_block.m(div, null);
 				}
@@ -3567,7 +3597,7 @@ function create_if_block_1$6(ctx) {
 }
 
 // (41:6) {#if message}
-function create_if_block_4$1(ctx) {
+function create_if_block_4$2(ctx) {
 	let div;
 	let t;
 
@@ -6117,20 +6147,30 @@ function create_if_block_3$3(ctx) {
 // (36:2) {#if error}
 function create_if_block_1$5(ctx) {
 	let div;
-	let t;
+	let goa_icon;
+	let t0;
+	let t1;
 
 	return {
 		c() {
 			div = element("div");
-			t = text(/*error*/ ctx[2]);
+			goa_icon = element("goa-icon");
+			t0 = space();
+			t1 = text(/*error*/ ctx[2]);
+			set_custom_element_data(goa_icon, "type", "warning");
+			set_custom_element_data(goa_icon, "size", "small");
+			set_custom_element_data(goa_icon, "theme", "filled");
+			set_style(goa_icon, "pointer-events", "none");
 			attr(div, "class", "error-msg");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
-			append(div, t);
+			append(div, goa_icon);
+			append(div, t0);
+			append(div, t1);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*error*/ 4) set_data(t, /*error*/ ctx[2]);
+			if (dirty & /*error*/ 4) set_data(t1, /*error*/ ctx[2]);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -6138,7 +6178,7 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-// (39:2) {#if helptext}
+// (42:2) {#if helptext}
 function create_if_block$8(ctx) {
 	let div;
 	let t;
@@ -6280,7 +6320,7 @@ function instance$h($$self, $$props, $$invalidate) {
 class FormItem extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}.label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0}.label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text);margin-right:56px}.error-msg{font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}.label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0}.label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text);margin-right:56px}.error-msg{display:inline-flex;gap:0.25rem;font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
 
 		init(
 			this,
@@ -6502,7 +6542,7 @@ function create_fragment$h(ctx) {
 			set_custom_element_data(goa_icon, "size", /*size*/ ctx[1]);
 			set_custom_element_data(goa_icon, "theme", /*theme*/ ctx[2]);
 			set_custom_element_data(goa_icon, "inverted", /*isInverted*/ ctx[5]);
-			set_style(button, "--size", /*_size*/ ctx[6]);
+			set_style(button, "--pading-size", /*_paddingSize*/ ctx[6]);
 			attr(button, "title", /*title*/ ctx[3]);
 			button.disabled = /*isDisabled*/ ctx[7];
 			attr(button, "class", /*css*/ ctx[8]);
@@ -6538,8 +6578,8 @@ function create_fragment$h(ctx) {
 				set_custom_element_data(goa_icon, "inverted", /*isInverted*/ ctx[5]);
 			}
 
-			if (dirty & /*_size*/ 64) {
-				set_style(button, "--size", /*_size*/ ctx[6]);
+			if (dirty & /*_paddingSize*/ 64) {
+				set_style(button, "--pading-size", /*_paddingSize*/ ctx[6]);
 			}
 
 			if (dirty & /*title*/ 8) {
@@ -6576,7 +6616,7 @@ function instance$f($$self, $$props, $$invalidate) {
 	let css;
 	let isDisabled;
 	let isInverted;
-	let _size;
+	let _paddingSize;
 	let { icon } = $$props;
 	let { size = "medium" } = $$props;
 	let { theme = "outline" } = $$props;
@@ -6612,10 +6652,10 @@ function instance$f($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty & /*size*/ 2) {
-			$$invalidate(6, _size = ({
-				small: "1rem",
-				medium: "1rem",
-				large: "2rem"
+			$$invalidate(6, _paddingSize = ({
+				small: "0.25rem",
+				medium: "0.25rem",
+				large: "0.5rem"
 			})[size]);
 		}
 	};
@@ -6627,7 +6667,7 @@ function instance$f($$self, $$props, $$invalidate) {
 		title,
 		testId,
 		isInverted,
-		_size,
+		_paddingSize,
 		isDisabled,
 		css,
 		variant,
@@ -6639,7 +6679,7 @@ function instance$f($$self, $$props, $$invalidate) {
 class IconButton extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;padding:0 0.75rem}.color{border-radius:0.5rem;padding:calc(var(--size) / 4);color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.nocolor{border-radius:0.5rem;padding:calc(var(--size) / 4)}button:hover{background-color:var(--color-gray-100);border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);outline:none}button:focus,button:active{background-color:var(--color-gray-100);border-color:var(--goa-color-interactive--active);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;background:transparent;cursor:pointer;border:none;border-radius:0.5rem;padding:var(--pading-size)}.color,.dark{color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.dark:not(.inverted){color:unset}button:hover{background-color:var(--color-gray-100);border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);outline:none}button:focus,button:active{background-color:var(--color-gray-100);border-color:var(--goa-color-interactive--active);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{pointer-events:none;opacity:0.5;transform:none;cursor:default}button:disabled:hover{background-color:transparent}button.dark:hover{background-color:rgba(0, 0, 0, 0.3)}button.dark:focus,button.dark:active{background-color:rgba(0, 0, 0, 0.3);box-shadow:0 0 0 3px var(--color-white)}</style>`;
 
 		init(
 			this,
@@ -7047,7 +7087,7 @@ customElements.define("goa-icon", Icon);
 
 /* libs/web-components/src/components/input/Input.svelte generated by Svelte v3.51.0 */
 
-function create_if_block_4(ctx) {
+function create_if_block_4$1(ctx) {
 	let div;
 	let t;
 
@@ -7201,7 +7241,7 @@ function create_fragment$f(ctx) {
 	let div1_style_value;
 	let mounted;
 	let dispose;
-	let if_block0 = /*prefix*/ ctx[14] && create_if_block_4(ctx);
+	let if_block0 = /*prefix*/ ctx[14] && create_if_block_4$1(ctx);
 	let if_block1 = /*leadingicon*/ ctx[5] && create_if_block_3$2(ctx);
 	let if_block2 = /*trailingicon*/ ctx[6] && !/*handlesTrailingIconClick*/ ctx[20] && create_if_block_2$3(ctx);
 	let if_block3 = /*trailingicon*/ ctx[6] && /*handlesTrailingIconClick*/ ctx[20] && create_if_block_1$4(ctx);
@@ -7283,7 +7323,7 @@ function create_fragment$f(ctx) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_4(ctx);
+					if_block0 = create_if_block_4$1(ctx);
 					if_block0.c();
 					if_block0.m(div0, t0);
 				}
@@ -8187,88 +8227,98 @@ customElements.define("goa-microsite-header", MicrositeHeader);
 
 function create_if_block$4(ctx) {
 	let goa_focus_trap;
-	let div4;
+	let div5;
 	let div0;
 	let t0;
-	let div3;
+	let div4;
 	let t1;
+	let div3;
 	let t2;
-	let div1;
 	let t3;
-	let slot0;
+	let div1;
 	let t4;
+	let slot0;
+	let t5;
 	let div2;
-	let div3_intro;
-	let div3_outro;
-	let div4_style_value;
-	let noscroll_action;
 	let div4_intro;
 	let div4_outro;
+	let div5_style_value;
+	let noscroll_action;
+	let div5_intro;
+	let div5_outro;
 	let current;
 	let mounted;
 	let dispose;
-	let if_block0 = /*heading*/ ctx[0] && create_if_block_3(ctx);
-	let if_block1 = /*isClosable*/ ctx[3] && create_if_block_2$1(ctx);
+	let if_block0 = /*type*/ ctx[4] === "callout" && create_if_block_4(ctx);
+	let if_block1 = /*heading*/ ctx[1] && create_if_block_3(ctx);
+	let if_block2 = /*isClosable*/ ctx[5] && create_if_block_2$1(ctx);
 
 	function select_block_type(ctx, dirty) {
 		return create_if_block_1$2;
 	}
 
 	let current_block_type = select_block_type();
-	let if_block2 = current_block_type(ctx);
+	let if_block3 = current_block_type(ctx);
 
 	return {
 		c() {
 			goa_focus_trap = element("goa-focus-trap");
-			div4 = element("div");
+			div5 = element("div");
 			div0 = element("div");
 			t0 = space();
-			div3 = element("div");
+			div4 = element("div");
 			if (if_block0) if_block0.c();
 			t1 = space();
+			div3 = element("div");
 			if (if_block1) if_block1.c();
 			t2 = space();
-			div1 = element("div");
-			if_block2.c();
+			if (if_block2) if_block2.c();
 			t3 = space();
-			slot0 = element("slot");
+			div1 = element("div");
+			if_block3.c();
 			t4 = space();
+			slot0 = element("slot");
+			t5 = space();
 			div2 = element("div");
 			div2.innerHTML = `<slot name="actions"></slot>`;
 			attr(div0, "data-testid", "modal-overlay");
 			attr(div0, "class", "modal-overlay");
 			attr(div1, "data-testid", "modal-content");
 			attr(div1, "class", "modal-content");
-			attr(div2, "data-testid", "modal-actions");
 			attr(div2, "class", "modal-actions");
-			attr(div3, "class", "modal-pane");
-			attr(div4, "data-testid", "modal");
-			attr(div4, "class", "modal");
-			attr(div4, "style", div4_style_value = "" + ((/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";"));
-			set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
+			attr(div2, "data-testid", "modal-actions");
+			attr(div3, "class", "content");
+			attr(div4, "class", "modal-pane");
+			attr(div5, "data-testid", "modal");
+			attr(div5, "class", "modal");
+			attr(div5, "style", div5_style_value = "" + ((/*width*/ ctx[3] && `--width: ${/*width*/ ctx[3]};`) + ";"));
+			set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[2]);
 		},
 		m(target, anchor) {
 			insert(target, goa_focus_trap, anchor);
-			append(goa_focus_trap, div4);
-			append(div4, div0);
-			append(div4, t0);
+			append(goa_focus_trap, div5);
+			append(div5, div0);
+			append(div5, t0);
+			append(div5, div4);
+			if (if_block0) if_block0.m(div4, null);
+			append(div4, t1);
 			append(div4, div3);
-			if (if_block0) if_block0.m(div3, null);
-			append(div3, t1);
 			if (if_block1) if_block1.m(div3, null);
 			append(div3, t2);
+			if (if_block2) if_block2.m(div3, null);
+			append(div3, t3);
 			append(div3, div1);
-			if_block2.m(div1, null);
-			append(div1, t3);
+			if_block3.m(div1, null);
+			append(div1, t4);
 			append(div1, slot0);
-			append(div3, t4);
+			append(div3, t5);
 			append(div3, div2);
 			current = true;
 
 			if (!mounted) {
 				dispose = [
-					listen(div0, "click", /*close*/ ctx[6]),
-					action_destroyer(noscroll_action = noscroll.call(null, div4, { enable: /*isOpen*/ ctx[5] }))
+					listen(div0, "click", /*close*/ ctx[9]),
+					action_destroyer(noscroll_action = noscroll.call(null, div5, { enable: /*isOpen*/ ctx[8] }))
 				];
 
 				mounted = true;
@@ -8277,24 +8327,24 @@ function create_if_block$4(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (/*heading*/ ctx[0]) {
+			if (/*type*/ ctx[4] === "callout") {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
-					if_block0 = create_if_block_3(ctx);
+					if_block0 = create_if_block_4(ctx);
 					if_block0.c();
-					if_block0.m(div3, t1);
+					if_block0.m(div4, t1);
 				}
 			} else if (if_block0) {
 				if_block0.d(1);
 				if_block0 = null;
 			}
 
-			if (/*isClosable*/ ctx[3]) {
+			if (/*heading*/ ctx[1]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block_2$1(ctx);
+					if_block1 = create_if_block_3(ctx);
 					if_block1.c();
 					if_block1.m(div3, t2);
 				}
@@ -8303,52 +8353,65 @@ function create_if_block$4(ctx) {
 				if_block1 = null;
 			}
 
-			if (!current || dirty & /*width*/ 4 && div4_style_value !== (div4_style_value = "" + ((/*width*/ ctx[2] && `--width: ${/*width*/ ctx[2]};`) + ";"))) {
-				attr(div4, "style", div4_style_value);
+			if (/*isClosable*/ ctx[5]) {
+				if (if_block2) {
+					if_block2.p(ctx, dirty);
+				} else {
+					if_block2 = create_if_block_2$1(ctx);
+					if_block2.c();
+					if_block2.m(div3, t3);
+				}
+			} else if (if_block2) {
+				if_block2.d(1);
+				if_block2 = null;
+			}
+
+			if (!current || dirty & /*width*/ 8 && div5_style_value !== (div5_style_value = "" + ((/*width*/ ctx[3] && `--width: ${/*width*/ ctx[3]};`) + ";"))) {
+				attr(div5, "style", div5_style_value);
 			}
 
-			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 32) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[5] });
+			if (noscroll_action && is_function(noscroll_action.update) && dirty & /*isOpen*/ 256) noscroll_action.update.call(null, { enable: /*isOpen*/ ctx[8] });
 
-			if (!current || dirty & /*open*/ 2) {
-				set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[1]);
+			if (!current || dirty & /*open*/ 4) {
+				set_custom_element_data(goa_focus_trap, "active", /*open*/ ctx[2]);
 			}
 		},
 		i(local) {
 			if (current) return;
 
 			add_render_callback(() => {
-				if (div3_outro) div3_outro.end(1);
+				if (div4_outro) div4_outro.end(1);
 
-				div3_intro = create_in_transition(div3, fly, {
-					duration: /*_transitionTime*/ ctx[4],
+				div4_intro = create_in_transition(div4, fly, {
+					duration: /*_transitionTime*/ ctx[7],
 					y: 200
 				});
 
-				div3_intro.start();
+				div4_intro.start();
 			});
 
 			add_render_callback(() => {
-				if (div4_outro) div4_outro.end(1);
-				div4_intro = create_in_transition(div4, fade, { duration: /*_transitionTime*/ ctx[4] });
-				div4_intro.start();
+				if (div5_outro) div5_outro.end(1);
+				div5_intro = create_in_transition(div5, fade, { duration: /*_transitionTime*/ ctx[7] });
+				div5_intro.start();
 			});
 
 			current = true;
 		},
 		o(local) {
-			if (div3_intro) div3_intro.invalidate();
+			if (div4_intro) div4_intro.invalidate();
 
-			div3_outro = create_out_transition(div3, fly, {
-				delay: /*_transitionTime*/ ctx[4],
-				duration: /*_transitionTime*/ ctx[4],
+			div4_outro = create_out_transition(div4, fly, {
+				delay: /*_transitionTime*/ ctx[7],
+				duration: /*_transitionTime*/ ctx[7],
 				y: -100
 			});
 
-			if (div4_intro) div4_intro.invalidate();
+			if (div5_intro) div5_intro.invalidate();
 
-			div4_outro = create_out_transition(div4, fade, {
-				delay: /*_transitionTime*/ ctx[4],
-				duration: /*_transitionTime*/ ctx[4]
+			div5_outro = create_out_transition(div5, fade, {
+				delay: /*_transitionTime*/ ctx[7],
+				duration: /*_transitionTime*/ ctx[7]
 			});
 
 			current = false;
@@ -8357,16 +8420,61 @@ function create_if_block$4(ctx) {
 			if (detaching) detach(goa_focus_trap);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			if_block2.d();
-			if (detaching && div3_outro) div3_outro.end();
+			if (if_block2) if_block2.d();
+			if_block3.d();
 			if (detaching && div4_outro) div4_outro.end();
+			if (detaching && div5_outro) div5_outro.end();
 			mounted = false;
 			run_all(dispose);
 		}
 	};
 }
 
-// (53:8) {#if heading}
+// (79:6) {#if type === "callout"}
+function create_if_block_4(ctx) {
+	let div;
+	let goa_icon;
+	let goa_icon_inverted_value;
+	let div_class_value;
+
+	return {
+		c() {
+			div = element("div");
+			goa_icon = element("goa-icon");
+			set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[6]);
+
+			set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value = /*calloutvariant*/ ctx[0] === "important"
+			? "false"
+			: "true");
+
+			attr(div, "class", div_class_value = "callout-bar " + /*calloutvariant*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, goa_icon);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*iconType*/ 64) {
+				set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[6]);
+			}
+
+			if (dirty & /*calloutvariant*/ 1 && goa_icon_inverted_value !== (goa_icon_inverted_value = /*calloutvariant*/ ctx[0] === "important"
+			? "false"
+			: "true")) {
+				set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value);
+			}
+
+			if (dirty & /*calloutvariant*/ 1 && div_class_value !== (div_class_value = "callout-bar " + /*calloutvariant*/ ctx[0])) {
+				attr(div, "class", div_class_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (85:8) {#if heading}
 function create_if_block_3(ctx) {
 	let div;
 	let t;
@@ -8374,7 +8482,7 @@ function create_if_block_3(ctx) {
 	return {
 		c() {
 			div = element("div");
-			t = text(/*heading*/ ctx[0]);
+			t = text(/*heading*/ ctx[1]);
 			attr(div, "data-testid", "modal-title");
 			attr(div, "class", "modal-title");
 		},
@@ -8383,7 +8491,7 @@ function create_if_block_3(ctx) {
 			append(div, t);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*heading*/ 1) set_data(t, /*heading*/ ctx[0]);
+			if (dirty & /*heading*/ 2) set_data(t, /*heading*/ ctx[1]);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -8391,7 +8499,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (56:8) {#if isClosable}
+// (88:8) {#if isClosable}
 function create_if_block_2$1(ctx) {
 	let div;
 	let goa_icon_button;
@@ -8404,6 +8512,7 @@ function create_if_block_2$1(ctx) {
 			goa_icon_button = element("goa-icon-button");
 			set_custom_element_data(goa_icon_button, "data-testid", "modal-close-button");
 			set_custom_element_data(goa_icon_button, "icon", "close");
+			set_custom_element_data(goa_icon_button, "variant", "nocolor");
 			attr(div, "class", "modal-close");
 		},
 		m(target, anchor) {
@@ -8411,7 +8520,7 @@ function create_if_block_2$1(ctx) {
 			append(div, goa_icon_button);
 
 			if (!mounted) {
-				dispose = listen(goa_icon_button, "click", /*close*/ ctx[6]);
+				dispose = listen(goa_icon_button, "click", /*close*/ ctx[9]);
 				mounted = true;
 			}
 		},
@@ -8424,7 +8533,7 @@ function create_if_block_2$1(ctx) {
 	};
 }
 
-// (67:10) {#if isScrollable}
+// (100:10) {#if isScrollable}
 function create_if_block_1$2(ctx) {
 	let goa_scrollable;
 
@@ -8434,7 +8543,6 @@ function create_if_block_1$2(ctx) {
 			goa_scrollable.innerHTML = `<slot></slot>`;
 			set_custom_element_data(goa_scrollable, "direction", "vertical");
 			set_custom_element_data(goa_scrollable, "height", "50");
-			set_custom_element_data(goa_scrollable, "hpadding", "1.75");
 		},
 		m(target, anchor) {
 			insert(target, goa_scrollable, anchor);
@@ -8448,7 +8556,7 @@ function create_if_block_1$2(ctx) {
 function create_fragment$d(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isOpen*/ ctx[5] && create_if_block$4(ctx);
+	let if_block = /*isOpen*/ ctx[8] && create_if_block$4(ctx);
 
 	return {
 		c() {
@@ -8462,11 +8570,11 @@ function create_fragment$d(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*isOpen*/ ctx[5]) {
+			if (/*isOpen*/ ctx[8]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*isOpen*/ 32) {
+					if (dirty & /*isOpen*/ 256) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -8505,11 +8613,21 @@ function instance$b($$self, $$props, $$invalidate) {
 	let isClosable;
 	let isOpen;
 	let _transitionTime;
+	let iconType;
+	const CALLOUT_VARIANT = ["emergency", "important", "information", "success", "event"];
+
+	// type check function
+	function isCalloutVariantType(value) {
+		return CALLOUT_VARIANT.includes(value);
+	}
+
 	let { heading = "" } = $$props;
 	let { closable = "false" } = $$props;
 	let { open = "false" } = $$props;
 	let { transition = "none" } = $$props;
 	let { width = "" } = $$props;
+	let { type = "default" } = $$props;
+	let { calloutvariant } = $$props;
 
 	function close(e) {
 		if (!isClosable) {
@@ -8520,35 +8638,59 @@ function instance$b($$self, $$props, $$invalidate) {
 		e.stopPropagation();
 	}
 
+	onMount(() => {
+		if (type === "callout" && !isCalloutVariantType(calloutvariant)) {
+			$$invalidate(0, calloutvariant = "");
+			throw "Invalid callout variant";
+		}
+	});
+
 	$$self.$$set = $$props => {
-		if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-		if ('closable' in $$props) $$invalidate(7, closable = $$props.closable);
-		if ('open' in $$props) $$invalidate(1, open = $$props.open);
-		if ('transition' in $$props) $$invalidate(8, transition = $$props.transition);
-		if ('width' in $$props) $$invalidate(2, width = $$props.width);
+		if ('heading' in $$props) $$invalidate(1, heading = $$props.heading);
+		if ('closable' in $$props) $$invalidate(10, closable = $$props.closable);
+		if ('open' in $$props) $$invalidate(2, open = $$props.open);
+		if ('transition' in $$props) $$invalidate(11, transition = $$props.transition);
+		if ('width' in $$props) $$invalidate(3, width = $$props.width);
+		if ('type' in $$props) $$invalidate(4, type = $$props.type);
+		if ('calloutvariant' in $$props) $$invalidate(0, calloutvariant = $$props.calloutvariant);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*closable*/ 128) {
-			$$invalidate(3, isClosable = toBoolean(closable));
+		if ($$self.$$.dirty & /*closable*/ 1024) {
+			$$invalidate(5, isClosable = toBoolean(closable));
 		}
 
-		if ($$self.$$.dirty & /*open*/ 2) {
-			$$invalidate(5, isOpen = toBoolean(open));
+		if ($$self.$$.dirty & /*open*/ 4) {
+			$$invalidate(8, isOpen = toBoolean(open));
 		}
 
-		if ($$self.$$.dirty & /*transition*/ 256) {
-			$$invalidate(4, _transitionTime = transition === "none"
+		if ($$self.$$.dirty & /*transition*/ 2048) {
+			$$invalidate(7, _transitionTime = transition === "none"
 			? 0
 			: transition === "slow" ? 400 : 200);
 		}
+
+		if ($$self.$$.dirty & /*calloutvariant*/ 1) {
+			$$invalidate(6, iconType = calloutvariant === "emergency"
+			? "warning"
+			: calloutvariant === "important"
+				? "alert-circle"
+				: calloutvariant === "information"
+					? "information-circle"
+					: calloutvariant === "success"
+						? "checkmark-circle"
+						: calloutvariant === "event" ? "calendar" : "");
+		}
 	};
 
 	return [
+		calloutvariant,
 		heading,
 		open,
 		width,
+		type,
 		isClosable,
+		iconType,
 		_transitionTime,
 		isOpen,
 		close,
@@ -8560,7 +8702,7 @@ function instance$b($$self, $$props, $$invalidate) {
 class Modal extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1 auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.emergency{background-color:var(--goa-color-status-emergency)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info)}.event{background-color:var(--goa-color-status-info)}.success{background-color:var(--goa-color-status-success)}.callout-bar{flex:0 0 3rem;text-align:center;padding-top:2rem}.content{flex:1 1 auto;width:100%;margin:2rem 2rem}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;display:flex;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions{margin:1.5rem 0 0}.modal-actions:empty{margin:0}.modal-close{position:absolute;top:2rem;right:2rem}.modal-title{font-size:var(--fs-xl);margin:0 0 1.5rem;margin-right:40px;flex:0 0 auto}.modal-content{line-height:1.75rem}</style>`;
 
 		init(
 			this,
@@ -8573,11 +8715,13 @@ class Modal extends SvelteElement {
 			create_fragment$d,
 			safe_not_equal,
 			{
-				heading: 0,
-				closable: 7,
-				open: 1,
-				transition: 8,
-				width: 2
+				heading: 1,
+				closable: 10,
+				open: 2,
+				transition: 11,
+				width: 3,
+				type: 4,
+				calloutvariant: 0
 			},
 			null
 		);
@@ -8595,11 +8739,19 @@ class Modal extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["heading", "closable", "open", "transition", "width"];
+		return [
+			"heading",
+			"closable",
+			"open",
+			"transition",
+			"width",
+			"type",
+			"calloutvariant"
+		];
 	}
 
 	get heading() {
-		return this.$$.ctx[0];
+		return this.$$.ctx[1];
 	}
 
 	set heading(heading) {
@@ -8608,7 +8760,7 @@ class Modal extends SvelteElement {
 	}
 
 	get closable() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[10];
 	}
 
 	set closable(closable) {
@@ -8617,7 +8769,7 @@ class Modal extends SvelteElement {
 	}
 
 	get open() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[2];
 	}
 
 	set open(open) {
@@ -8626,7 +8778,7 @@ class Modal extends SvelteElement {
 	}
 
 	get transition() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[11];
 	}
 
 	set transition(transition) {
@@ -8635,13 +8787,31 @@ class Modal extends SvelteElement {
 	}
 
 	get width() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[3];
 	}
 
 	set width(width) {
 		this.$$set({ width });
 		flush();
 	}
+
+	get type() {
+		return this.$$.ctx[4];
+	}
+
+	set type(type) {
+		this.$$set({ type });
+		flush();
+	}
+
+	get calloutvariant() {
+		return this.$$.ctx[0];
+	}
+
+	set calloutvariant(calloutvariant) {
+		this.$$set({ calloutvariant });
+		flush();
+	}
 }
 
 customElements.define("goa-modal", Modal);
@@ -8652,11 +8822,13 @@ function create_if_block$3(ctx) {
 	let div3;
 	let div0;
 	let goa_icon;
+	let goa_icon_inverted_value;
 	let t0;
 	let div1;
 	let t1;
 	let div2;
 	let goa_icon_button;
+	let goa_icon_button_inverted_value;
 	let div3_class_value;
 	let div3_transition;
 	let current;
@@ -8675,11 +8847,12 @@ function create_if_block$3(ctx) {
 			div2 = element("div");
 			goa_icon_button = element("goa-icon-button");
 			set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[2]);
-			set_custom_element_data(goa_icon, "inverted", "");
+			set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value = /*type*/ ctx[0] === "important" ? "false" : "true");
 			attr(div0, "class", "icon");
 			attr(div1, "class", "content");
 			set_custom_element_data(goa_icon_button, "icon", "close");
-			set_custom_element_data(goa_icon_button, "inverted", "");
+			set_custom_element_data(goa_icon_button, "variant", "dark");
+			set_custom_element_data(goa_icon_button, "inverted", goa_icon_button_inverted_value = /*type*/ ctx[0] === "important" ? "false" : "true");
 			attr(div2, "class", "close");
 			attr(div3, "class", div3_class_value = "notification " + /*type*/ ctx[0]);
 		},
@@ -8704,6 +8877,14 @@ function create_if_block$3(ctx) {
 				set_custom_element_data(goa_icon, "type", /*iconType*/ ctx[2]);
 			}
 
+			if (!current || dirty & /*type*/ 1 && goa_icon_inverted_value !== (goa_icon_inverted_value = /*type*/ ctx[0] === "important" ? "false" : "true")) {
+				set_custom_element_data(goa_icon, "inverted", goa_icon_inverted_value);
+			}
+
+			if (!current || dirty & /*type*/ 1 && goa_icon_button_inverted_value !== (goa_icon_button_inverted_value = /*type*/ ctx[0] === "important" ? "false" : "true")) {
+				set_custom_element_data(goa_icon_button, "inverted", goa_icon_button_inverted_value);
+			}
+
 			if (!current || dirty & /*type*/ 1 && div3_class_value !== (div3_class_value = "notification " + /*type*/ ctx[0])) {
 				attr(div3, "class", div3_class_value);
 			}
@@ -8790,9 +8971,22 @@ function create_fragment$c(ctx) {
 
 function instance$a($$self, $$props, $$invalidate) {
 	let iconType;
-	let { type } = $$props;
+	let { type = "" } = $$props;
+	const NOTIFICATION_TYPES = ["emergency", "important", "information", "event"];
+
+	// type check function
+	function isNotificationType(value) {
+		return NOTIFICATION_TYPES.includes(value);
+	}
+
 	let show = true;
 
+	onMount(() => {
+		if (!isNotificationType(type)) {
+			console.error("Invalid notification type");
+		}
+	});
+
 	function close() {
 		$$invalidate(1, show = false);
 	}
@@ -8805,11 +8999,11 @@ function instance$a($$self, $$props, $$invalidate) {
 		if ($$self.$$.dirty & /*type*/ 1) {
 			$$invalidate(2, iconType = type === "emergency"
 			? "warning"
-			: type === "caution"
+			: type === "important"
 				? "alert-circle"
 				: type === "information"
 					? "information-circle"
-					: "calendar");
+					: type === "event" ? "calendar" : "");
 		}
 	};
 
@@ -8819,7 +9013,7 @@ function instance$a($$self, $$props, $$invalidate) {
 class Notification extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{padding:1.5rem;display:flex;align-items:center;gap:1rem;border-radius:3px}.emergency{background-color:var(--goa-color-status-emergency);color:var(--color-white)}.caution{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info);color:var(--color-white)}.event{background-color:var(--goa-color-status-success);color:var(--color-white)}.icon{flex:0 0 auto;align-self:flex-start}.content{flex:1 1 auto}.close{flex:0 0 auto;align-self:flex-start}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.notification{padding:1.5rem;display:flex;gap:1rem;border-radius:3px}.emergency{background-color:var(--goa-color-status-emergency);color:var(--color-white)}.important{background-color:var(--goa-color-status-warning)}.information{background-color:var(--goa-color-status-info);color:var(--color-white)}.event{background-color:var(--goa-color-status-success);color:var(--color-white)}.icon{flex:0 0 auto}.content{flex:1 1 auto}::slotted(a){color:unset !important;outline:unset !important}.close{flex:0 0 auto}</style>`;
 
 		init(
 			this,