@abgov/web-components 1.0.0-alpha.82 → 1.0.0-alpha.83

package/package.json

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

package/web-components.es.js

@@ -1147,7 +1147,7 @@ function instance$y($$self, $$props, $$invalidate) {
 class AppHeader extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.app-header{display:flex;align-items:center;justify-content:space-between;margin:0 auto;padding:1rem 0.5rem;border-bottom:1px solid var(--color-gray-100)}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 768px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.app-header{display:flex;align-items:center;justify-content:space-between;margin:0 auto;padding:1rem 1.5rem;border-bottom:1px solid var(--color-gray-100)}@media(max-width: 640px){.app-header{padding:1rem 1rem}}.app-link{display:flex;align-items:center;text-decoration:none;color:inherit}.title{margin-left:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.image-desktop{display:none}.image-mobile{display:block}@media(min-width: 768px){.image-desktop{display:block}.image-mobile{display:none}.title{margin-left:1.75rem}.image-desktop{display:block}.image-mobile{display:none}}</style>`;
 
 		init(
 			this,
@@ -1813,7 +1813,7 @@ class Button extends SvelteElement {
 		super();
 
 		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
-      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:var(--color-white);color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.danger{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.danger:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.danger:focus,.primary.danger:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.danger{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.danger:focus,.secondary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger:focus,.tertiary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
+      border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.danger{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.danger:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.danger:focus,.primary.danger:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.danger{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.danger:focus,.secondary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger:focus,.tertiary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
 
 		init(
 			this,
@@ -7078,8 +7078,8 @@ function create_if_block$7(ctx) {
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
-		if (/*fullscreen*/ ctx[4]) return 0;
-		if (/*inline*/ ctx[5]) return 1;
+		if (/*fullscreen*/ ctx[3]) return 0;
+		if (/*inline*/ ctx[4]) return 1;
 		return -1;
 	}
 
@@ -7155,14 +7155,13 @@ function create_if_block$7(ctx) {
 	};
 }
 
-// (39:19) 
+// (38:19) 
 function create_if_block_3$1(ctx) {
 	let div;
 	let goa_spinner;
-	let goa_spinner_progress_value;
 	let t;
 	let div_class_value;
-	let if_block = /*message*/ ctx[1] && create_if_block_4(ctx);
+	let if_block = /*message*/ ctx[0] && create_if_block_4(ctx);
 
 	return {
 		c() {
@@ -7170,11 +7169,10 @@ function create_if_block_3$1(ctx) {
 			goa_spinner = element("goa-spinner");
 			t = space();
 			if (if_block) if_block.c();
-			set_custom_element_data(goa_spinner, "type", /*type*/ ctx[0]);
-			set_custom_element_data(goa_spinner, "size", /*spinnerSize*/ ctx[3]);
-			set_custom_element_data(goa_spinner, "progress", goa_spinner_progress_value = /*progress*/ ctx[2] || 0);
-			attr(div, "class", div_class_value = "spinner-" + /*spinnerSize*/ ctx[3]);
-			toggle_class(div, "inline", /*inline*/ ctx[5]);
+			set_custom_element_data(goa_spinner, "size", /*spinnerSize*/ ctx[2]);
+			set_custom_element_data(goa_spinner, "progress", /*progress*/ ctx[1]);
+			attr(div, "class", div_class_value = "spinner-" + /*spinnerSize*/ ctx[2]);
+			toggle_class(div, "inline", /*inline*/ ctx[4]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -7183,19 +7181,15 @@ function create_if_block_3$1(ctx) {
 			if (if_block) if_block.m(div, null);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*type*/ 1) {
-				set_custom_element_data(goa_spinner, "type", /*type*/ ctx[0]);
-			}
-
-			if (dirty & /*spinnerSize*/ 8) {
-				set_custom_element_data(goa_spinner, "size", /*spinnerSize*/ ctx[3]);
+			if (dirty & /*spinnerSize*/ 4) {
+				set_custom_element_data(goa_spinner, "size", /*spinnerSize*/ ctx[2]);
 			}
 
-			if (dirty & /*progress*/ 4 && goa_spinner_progress_value !== (goa_spinner_progress_value = /*progress*/ ctx[2] || 0)) {
-				set_custom_element_data(goa_spinner, "progress", goa_spinner_progress_value);
+			if (dirty & /*progress*/ 2) {
+				set_custom_element_data(goa_spinner, "progress", /*progress*/ ctx[1]);
 			}
 
-			if (/*message*/ ctx[1]) {
+			if (/*message*/ ctx[0]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -7208,12 +7202,12 @@ function create_if_block_3$1(ctx) {
 				if_block = null;
 			}
 
-			if (dirty & /*spinnerSize*/ 8 && div_class_value !== (div_class_value = "spinner-" + /*spinnerSize*/ ctx[3])) {
+			if (dirty & /*spinnerSize*/ 4 && div_class_value !== (div_class_value = "spinner-" + /*spinnerSize*/ ctx[2])) {
 				attr(div, "class", div_class_value);
 			}
 
-			if (dirty & /*spinnerSize, inline*/ 40) {
-				toggle_class(div, "inline", /*inline*/ ctx[5]);
+			if (dirty & /*spinnerSize, inline*/ 20) {
+				toggle_class(div, "inline", /*inline*/ ctx[4]);
 			}
 		},
 		i: noop,
@@ -7225,17 +7219,16 @@ function create_if_block_3$1(ctx) {
 	};
 }
 
-// (28:2) {#if fullscreen}
+// (27:2) {#if fullscreen}
 function create_if_block_1$4(ctx) {
 	let div;
 	let goa_spinner;
-	let goa_spinner_progress_value;
 	let t;
 	let div_transition;
 	let current;
 	let mounted;
 	let dispose;
-	let if_block = /*message*/ ctx[1] && create_if_block_2$3(ctx);
+	let if_block = /*message*/ ctx[0] && create_if_block_2$3(ctx);
 
 	return {
 		c() {
@@ -7243,10 +7236,9 @@ function create_if_block_1$4(ctx) {
 			goa_spinner = element("goa-spinner");
 			t = space();
 			if (if_block) if_block.c();
-			set_custom_element_data(goa_spinner, "type", /*type*/ ctx[0]);
-			set_custom_element_data(goa_spinner, "size", /*spinnerSize*/ ctx[3]);
-			set_custom_element_data(goa_spinner, "progress", goa_spinner_progress_value = /*progress*/ ctx[2] || 0);
-			toggle_class(div, "fullscreen", /*fullscreen*/ ctx[4]);
+			set_custom_element_data(goa_spinner, "size", /*spinnerSize*/ ctx[2]);
+			set_custom_element_data(goa_spinner, "progress", /*progress*/ ctx[1]);
+			toggle_class(div, "fullscreen", /*fullscreen*/ ctx[3]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -7261,19 +7253,15 @@ function create_if_block_1$4(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (!current || dirty & /*type*/ 1) {
-				set_custom_element_data(goa_spinner, "type", /*type*/ ctx[0]);
+			if (!current || dirty & /*spinnerSize*/ 4) {
+				set_custom_element_data(goa_spinner, "size", /*spinnerSize*/ ctx[2]);
 			}
 
-			if (!current || dirty & /*spinnerSize*/ 8) {
-				set_custom_element_data(goa_spinner, "size", /*spinnerSize*/ ctx[3]);
+			if (!current || dirty & /*progress*/ 2) {
+				set_custom_element_data(goa_spinner, "progress", /*progress*/ ctx[1]);
 			}
 
-			if (!current || dirty & /*progress*/ 4 && goa_spinner_progress_value !== (goa_spinner_progress_value = /*progress*/ ctx[2] || 0)) {
-				set_custom_element_data(goa_spinner, "progress", goa_spinner_progress_value);
-			}
-
-			if (/*message*/ ctx[1]) {
+			if (/*message*/ ctx[0]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -7286,8 +7274,8 @@ function create_if_block_1$4(ctx) {
 				if_block = null;
 			}
 
-			if (dirty & /*fullscreen*/ 16) {
-				toggle_class(div, "fullscreen", /*fullscreen*/ ctx[4]);
+			if (dirty & /*fullscreen*/ 8) {
+				toggle_class(div, "fullscreen", /*fullscreen*/ ctx[3]);
 			}
 		},
 		i(local) {
@@ -7315,7 +7303,7 @@ function create_if_block_1$4(ctx) {
 	};
 }
 
-// (42:6) {#if message}
+// (41:6) {#if message}
 function create_if_block_4(ctx) {
 	let div;
 	let t;
@@ -7323,7 +7311,7 @@ function create_if_block_4(ctx) {
 	return {
 		c() {
 			div = element("div");
-			t = text(/*message*/ ctx[1]);
+			t = text(/*message*/ ctx[0]);
 			attr(div, "class", "message");
 		},
 		m(target, anchor) {
@@ -7331,7 +7319,7 @@ function create_if_block_4(ctx) {
 			append(div, t);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*message*/ 2) set_data(t, /*message*/ ctx[1]);
+			if (dirty & /*message*/ 1) set_data(t, /*message*/ ctx[0]);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -7339,7 +7327,7 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (35:6) {#if message}
+// (34:6) {#if message}
 function create_if_block_2$3(ctx) {
 	let div;
 	let t;
@@ -7347,7 +7335,7 @@ function create_if_block_2$3(ctx) {
 	return {
 		c() {
 			div = element("div");
-			t = text(/*message*/ ctx[1]);
+			t = text(/*message*/ ctx[0]);
 			attr(div, "class", "message");
 		},
 		m(target, anchor) {
@@ -7355,7 +7343,7 @@ function create_if_block_2$3(ctx) {
 			append(div, t);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*message*/ 2) set_data(t, /*message*/ ctx[1]);
+			if (dirty & /*message*/ 1) set_data(t, /*message*/ ctx[0]);
 		},
 		d(detaching) {
 			if (detaching) detach(div);
@@ -7366,7 +7354,7 @@ function create_if_block_2$3(ctx) {
 function create_fragment$f(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*isVisible*/ ctx[6] && create_if_block$7(ctx);
+	let if_block = /*isVisible*/ ctx[5] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -7380,11 +7368,11 @@ function create_fragment$f(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*isVisible*/ ctx[6]) {
+			if (/*isVisible*/ ctx[5]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*isVisible*/ 64) {
+					if (dirty & /*isVisible*/ 32) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -7421,39 +7409,36 @@ function create_fragment$f(ctx) {
 
 function instance$e($$self, $$props, $$invalidate) {
 	let isVisible;
-	let { type = "infinite" } = $$props;
 	let { variant = "inline" } = $$props;
 	let { size = "large" } = $$props;
 	let { message = "" } = $$props;
-	let { progress = 0 } = $$props;
+	let { progress = -1 } = $$props;
 	let { visible = "false" } = $$props;
 	let spinnerSize;
 	let fullscreen;
 	let inline;
 
 	onMount(async () => {
-		$$invalidate(3, spinnerSize = size === "small" ? "large" : "xlarge");
-		$$invalidate(4, fullscreen = variant === "fullscreen");
-		$$invalidate(5, inline = variant === "inline");
+		$$invalidate(2, spinnerSize = size === "small" ? "large" : "xlarge");
+		$$invalidate(3, fullscreen = variant === "fullscreen");
+		$$invalidate(4, inline = variant === "inline");
 	});
 
 	$$self.$$set = $$props => {
-		if ('type' in $$props) $$invalidate(0, type = $$props.type);
-		if ('variant' in $$props) $$invalidate(7, variant = $$props.variant);
-		if ('size' in $$props) $$invalidate(8, size = $$props.size);
-		if ('message' in $$props) $$invalidate(1, message = $$props.message);
-		if ('progress' in $$props) $$invalidate(2, progress = $$props.progress);
-		if ('visible' in $$props) $$invalidate(9, visible = $$props.visible);
+		if ('variant' in $$props) $$invalidate(6, variant = $$props.variant);
+		if ('size' in $$props) $$invalidate(7, size = $$props.size);
+		if ('message' in $$props) $$invalidate(0, message = $$props.message);
+		if ('progress' in $$props) $$invalidate(1, progress = $$props.progress);
+		if ('visible' in $$props) $$invalidate(8, visible = $$props.visible);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*visible*/ 512) {
-			$$invalidate(6, isVisible = toBoolean(visible));
+		if ($$self.$$.dirty & /*visible*/ 256) {
+			$$invalidate(5, isVisible = toBoolean(visible));
 		}
 	};
 
 	return [
-		type,
 		message,
 		progress,
 		spinnerSize,
@@ -7482,12 +7467,11 @@ class CircularProgress extends SvelteElement {
 			create_fragment$f,
 			safe_not_equal,
 			{
-				type: 0,
-				variant: 7,
-				size: 8,
-				message: 1,
-				progress: 2,
-				visible: 9
+				variant: 6,
+				size: 7,
+				message: 0,
+				progress: 1,
+				visible: 8
 			},
 			null
 		);
@@ -7505,20 +7489,11 @@ class CircularProgress extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["type", "variant", "size", "message", "progress", "visible"];
-	}
-
-	get type() {
-		return this.$$.ctx[0];
-	}
-
-	set type(type) {
-		this.$$set({ type });
-		flush();
+		return ["variant", "size", "message", "progress", "visible"];
 	}
 
 	get variant() {
-		return this.$$.ctx[7];
+		return this.$$.ctx[6];
 	}
 
 	set variant(variant) {
@@ -7527,7 +7502,7 @@ class CircularProgress extends SvelteElement {
 	}
 
 	get size() {
-		return this.$$.ctx[8];
+		return this.$$.ctx[7];
 	}
 
 	set size(size) {
@@ -7536,7 +7511,7 @@ class CircularProgress extends SvelteElement {
 	}
 
 	get message() {
-		return this.$$.ctx[1];
+		return this.$$.ctx[0];
 	}
 
 	set message(message) {
@@ -7545,7 +7520,7 @@ class CircularProgress extends SvelteElement {
 	}
 
 	get progress() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[1];
 	}
 
 	set progress(progress) {
@@ -7554,7 +7529,7 @@ class CircularProgress extends SvelteElement {
 	}
 
 	get visible() {
-		return this.$$.ctx[9];
+		return this.$$.ctx[8];
 	}
 
 	set visible(visible) {
@@ -8203,7 +8178,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (42:2) {#if ["alpha", "beta"].includes(level)}
+// (34:2) {#if ["alpha", "beta"].includes(level)}
 function create_if_block_1$3(ctx) {
 	let div0;
 	let t0_value = capitalize(/*level*/ ctx[0]) + "";
@@ -8225,7 +8200,7 @@ function create_if_block_1$3(ctx) {
 			t2 = text("This is a new ");
 			a = element("a");
 			a.textContent = "Alberta Government";
-			t4 = text("\n      service\n      ");
+			t4 = text(" service\n      ");
 			if (if_block) if_block.c();
 			attr(div0, "data-testid", "level");
 			attr(div0, "class", div0_class_value = "service-level service-level--" + /*level*/ ctx[0].toLowerCase());
@@ -8272,7 +8247,7 @@ function create_if_block_1$3(ctx) {
 	};
 }
 
-// (52:6) {#if feedbackurl}
+// (43:6) {#if feedbackurl}
 function create_if_block_2$2(ctx) {
 	let span;
 	let t0;
@@ -8305,7 +8280,7 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-// (60:2) {#if version}
+// (49:2) {#if version}
 function create_if_block$6(ctx) {
 	let div;
 	let t;
@@ -8438,7 +8413,7 @@ function instance$a($$self, $$props, $$invalidate) {
 class MicrositeHeader extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-xs);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;height:2.5rem;padding:0 0.5rem;gap:0.5rem}.spacer{flex:1 1 auto}.version{color:var(--goa-color-600)}.service-level{font-weight:bold;padding:0 0.5rem;height:1.5rem;display:flex;align-items:center}.service-level--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-level--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-level--live{padding:0}.site-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--goa-color-text)}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.5rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-level{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-level--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-level--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-level--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
 
 		init(
 			this,
@@ -9138,12 +9113,12 @@ function create_if_block$4(ctx) {
 			: "var(--goa-color-primary)");
 
 			attr(path, "stroke-linecap", "round");
-			attr(svg, "class", svg_class_value = `spinner-${/*type*/ ctx[1]}`);
+			attr(svg, "class", svg_class_value = `spinner-${/*type*/ ctx[2]}`);
 			attr(svg, "fill", "none");
 			attr(svg, "viewBox", svg_viewBox_value = "0 0 " + /*diameter*/ ctx[5] + " " + /*diameter*/ ctx[5]);
 			attr(svg, "width", /*diameter*/ ctx[5]);
 			attr(svg, "height", /*diameter*/ ctx[5]);
-			attr(svg, "data-testid", /*testid*/ ctx[2]);
+			attr(svg, "data-testid", /*testid*/ ctx[1]);
 			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
 		},
 		m(target, anchor) {
@@ -9188,7 +9163,7 @@ function create_if_block$4(ctx) {
 				attr(path, "stroke", path_stroke_value);
 			}
 
-			if (dirty & /*type*/ 2 && svg_class_value !== (svg_class_value = `spinner-${/*type*/ ctx[1]}`)) {
+			if (dirty & /*type*/ 4 && svg_class_value !== (svg_class_value = `spinner-${/*type*/ ctx[2]}`)) {
 				attr(svg, "class", svg_class_value);
 			}
 
@@ -9204,8 +9179,8 @@ function create_if_block$4(ctx) {
 				attr(svg, "height", /*diameter*/ ctx[5]);
 			}
 
-			if (dirty & /*testid*/ 4) {
-				attr(svg, "data-testid", /*testid*/ ctx[2]);
+			if (dirty & /*testid*/ 2) {
+				attr(svg, "data-testid", /*testid*/ ctx[1]);
 			}
 		},
 		d(detaching) {
@@ -9260,9 +9235,9 @@ function instance$8($$self, $$props, $$invalidate) {
 	let $_progress;
 	let { size } = $$props;
 	let { invert = false } = $$props;
-	let { type = "infinite" } = $$props;
-	let { progress = "0" } = $$props;
+	let { progress = -1 } = $$props;
 	let { testid = "" } = $$props;
+	let type = "infinite";
 	const _progress = tweened(0, { duration: 500, easing: quartOut });
 	component_subscribe($$self, _progress, value => $$invalidate(7, $_progress = value));
 
@@ -9294,16 +9269,22 @@ function instance$8($$self, $$props, $$invalidate) {
 	$$self.$$set = $$props => {
 		if ('size' in $$props) $$invalidate(10, size = $$props.size);
 		if ('invert' in $$props) $$invalidate(0, invert = $$props.invert);
-		if ('type' in $$props) $$invalidate(1, type = $$props.type);
 		if ('progress' in $$props) $$invalidate(11, progress = $$props.progress);
-		if ('testid' in $$props) $$invalidate(2, testid = $$props.testid);
+		if ('testid' in $$props) $$invalidate(1, testid = $$props.testid);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*progress*/ 2048) {
 			// Reactive
 			{
-				_progress.set(parseFloat(progress));
+				// Typescript recognizes `progress` as a number, but once compiled, due to it being a web component, progress is a string.
+				// This line makes both sides happy.
+				const p = parseFloat(progress + '');
+
+				if (p >= 0) {
+					_progress.set(p || 1); // start at 1 to prevent incorrect arc calculations
+					$$invalidate(2, type = "progress");
+				}
 			}
 		}
 
@@ -9328,7 +9309,7 @@ function instance$8($$self, $$props, $$invalidate) {
 			$$invalidate(12, pathRadius = radius - strokewidth / 2);
 		}
 
-		if ($$self.$$.dirty & /*type, pathRadius, progress*/ 6146) {
+		if ($$self.$$.dirty & /*type, pathRadius, progress*/ 6148) {
 			$$invalidate(6, ready = type === "infinite"
 			? pathRadius
 			: pathRadius && progress);
@@ -9337,8 +9318,8 @@ function instance$8($$self, $$props, $$invalidate) {
 
 	return [
 		invert,
-		type,
 		testid,
+		type,
 		radius,
 		strokewidth,
 		diameter,
@@ -9370,9 +9351,8 @@ class Spinner extends SvelteElement {
 			{
 				size: 10,
 				invert: 0,
-				type: 1,
 				progress: 11,
-				testid: 2
+				testid: 1
 			},
 			null
 		);
@@ -9390,7 +9370,7 @@ class Spinner extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["size", "invert", "type", "progress", "testid"];
+		return ["size", "invert", "progress", "testid"];
 	}
 
 	get size() {
@@ -9411,15 +9391,6 @@ class Spinner extends SvelteElement {
 		flush();
 	}
 
-	get type() {
-		return this.$$.ctx[1];
-	}
-
-	set type(type) {
-		this.$$set({ type });
-		flush();
-	}
-
 	get progress() {
 		return this.$$.ctx[11];
 	}
@@ -9430,7 +9401,7 @@ class Spinner extends SvelteElement {
 	}
 
 	get testid() {
-		return this.$$.ctx[2];
+		return this.$$.ctx[1];
 	}
 
 	set testid(testid) {