@abgov/react-components 4.0.0-alpha.24 → 4.0.0-alpha.27

package/react-components.umd.js

@@ -1411,7 +1411,7 @@
 	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, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -2256,7 +2256,7 @@
 	  constructor(options) {
 	    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, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -2650,7 +2650,7 @@
 	    type
 	  } = $$props;
 	  let {
-	    heading
+	    heading = ""
 	  } = $$props;
 	  let {
 	    testid = ""
@@ -7707,7 +7707,7 @@
 	      ctx[2] && `--width: ${
       /*width*/
       ctx[2]};`) + ";");
-	      set_custom_element_data(goa_focus_trap, "open",
+	      set_custom_element_data(goa_focus_trap, "active",
 	      /*open*/
 	      ctx[1]);
 	    },
@@ -7808,7 +7808,7 @@
 	      if (!current || dirty &
 	      /*open*/
 	      2) {
-	        set_custom_element_data(goa_focus_trap, "open",
+	        set_custom_element_data(goa_focus_trap, "active",
 	        /*open*/
 	        ctx[1]);
 	      }
@@ -8540,10 +8540,10 @@
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*fullscreen*/
-	    ctx[4]) return 0;
+	    ctx[3]) return 0;
 	    if (
 	    /*inline*/
-	    ctx[5]) return 1;
+	    ctx[4]) return 1;
 	    return -1;
 	  }
 
@@ -8621,39 +8621,35 @@
 	    }
 
 	  };
-	} // (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);
+	  ctx[0] && create_if_block_4(ctx);
 	  return {
 	    c() {
 	      div = element("div");
 	      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 =
+	      ctx[2]);
+	      set_custom_element_data(goa_spinner, "progress",
 	      /*progress*/
-	      ctx[2] || 0);
+	      ctx[1]);
 	      attr(div, "class", div_class_value = "spinner-" +
 	      /*spinnerSize*/
-	      ctx[3]);
+	      ctx[2]);
 	      toggle_class(div, "inline",
 	      /*inline*/
-	      ctx[5]);
+	      ctx[4]);
 	    },
 
 	    m(target, anchor) {
@@ -8664,33 +8660,25 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (dirty &
-	      /*type*/
-	      1) {
-	        set_custom_element_data(goa_spinner, "type",
-	        /*type*/
-	        ctx[0]);
-	      }
-
 	      if (dirty &
 	      /*spinnerSize*/
-	      8) {
+	      4) {
 	        set_custom_element_data(goa_spinner, "size",
 	        /*spinnerSize*/
-	        ctx[3]);
+	        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);
+	      2) {
+	        set_custom_element_data(goa_spinner, "progress",
+	        /*progress*/
+	        ctx[1]);
 	      }
 
 	      if (
 	      /*message*/
-	      ctx[1]) {
+	      ctx[0]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
@@ -8705,18 +8693,18 @@
 
 	      if (dirty &
 	      /*spinnerSize*/
-	      8 && div_class_value !== (div_class_value = "spinner-" +
+	      4 && div_class_value !== (div_class_value = "spinner-" +
 	      /*spinnerSize*/
-	      ctx[3])) {
+	      ctx[2])) {
 	        attr(div, "class", div_class_value);
 	      }
 
 	      if (dirty &
 	      /*spinnerSize, inline*/
-	      40) {
+	      20) {
 	        toggle_class(div, "inline",
 	        /*inline*/
-	        ctx[5]);
+	        ctx[4]);
 	      }
 	    },
 
@@ -8729,13 +8717,12 @@
 	    }
 
 	  };
-	} // (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;
@@ -8743,25 +8730,22 @@
 	  let dispose;
 	  let if_block =
 	  /*message*/
-	  ctx[1] && create_if_block_2$3(ctx);
+	  ctx[0] && create_if_block_2$3(ctx);
 	  return {
 	    c() {
 	      div = element("div");
 	      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 =
+	      ctx[2]);
+	      set_custom_element_data(goa_spinner, "progress",
 	      /*progress*/
-	      ctx[2] || 0);
+	      ctx[1]);
 	      toggle_class(div, "fullscreen",
 	      /*fullscreen*/
-	      ctx[4]);
+	      ctx[3]);
 	    },
 
 	    m(target, anchor) {
@@ -8780,33 +8764,25 @@
 	    },
 
 	    p(ctx, dirty) {
-	      if (!current || dirty &
-	      /*type*/
-	      1) {
-	        set_custom_element_data(goa_spinner, "type",
-	        /*type*/
-	        ctx[0]);
-	      }
-
 	      if (!current || dirty &
 	      /*spinnerSize*/
-	      8) {
+	      4) {
 	        set_custom_element_data(goa_spinner, "size",
 	        /*spinnerSize*/
-	        ctx[3]);
+	        ctx[2]);
 	      }
 
 	      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);
+	      2) {
+	        set_custom_element_data(goa_spinner, "progress",
+	        /*progress*/
+	        ctx[1]);
 	      }
 
 	      if (
 	      /*message*/
-	      ctx[1]) {
+	      ctx[0]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
@@ -8821,10 +8797,10 @@
 
 	      if (dirty &
 	      /*fullscreen*/
-	      16) {
+	      8) {
 	        toggle_class(div, "fullscreen",
 	        /*fullscreen*/
-	        ctx[4]);
+	        ctx[3]);
 	      }
 	    },
 
@@ -8856,7 +8832,7 @@
 	    }
 
 	  };
-	} // (42:6) {#if message}
+	} // (41:6) {#if message}
 
 
 	function create_if_block_4(ctx) {
@@ -8867,7 +8843,7 @@
 	      div = element("div");
 	      t = text(
 	      /*message*/
-	      ctx[1]);
+	      ctx[0]);
 	      attr(div, "class", "message");
 	    },
 
@@ -8879,9 +8855,9 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*message*/
-	      2) set_data(t,
+	      1) set_data(t,
 	      /*message*/
-	      ctx[1]);
+	      ctx[0]);
 	    },
 
 	    d(detaching) {
@@ -8889,7 +8865,7 @@
 	    }
 
 	  };
-	} // (35:6) {#if message}
+	} // (34:6) {#if message}
 
 
 	function create_if_block_2$3(ctx) {
@@ -8900,7 +8876,7 @@
 	      div = element("div");
 	      t = text(
 	      /*message*/
-	      ctx[1]);
+	      ctx[0]);
 	      attr(div, "class", "message");
 	    },
 
@@ -8912,9 +8888,9 @@
 	    p(ctx, dirty) {
 	      if (dirty &
 	      /*message*/
-	      2) set_data(t,
+	      1) set_data(t,
 	      /*message*/
-	      ctx[1]);
+	      ctx[0]);
 	    },
 
 	    d(detaching) {
@@ -8929,7 +8905,7 @@
 	  let current;
 	  let if_block =
 	  /*isVisible*/
-	  ctx[6] && create_if_block$7(ctx);
+	  ctx[5] && create_if_block$7(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -8946,13 +8922,13 @@
 	    p(ctx, [dirty]) {
 	      if (
 	      /*isVisible*/
-	      ctx[6]) {
+	      ctx[5]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 
 	          if (dirty &
 	          /*isVisible*/
-	          64) {
+	          32) {
 	            transition_in(if_block, 1);
 	          }
 	        } else {
@@ -8991,9 +8967,6 @@
 
 	function instance$e($$self, $$props, $$invalidate) {
 	  let isVisible;
-	  let {
-	    type = "infinite"
-	  } = $$props;
 	  let {
 	    variant = "inline"
 	  } = $$props;
@@ -9004,7 +8977,7 @@
 	    message = ""
 	  } = $$props;
 	  let {
-	    progress = 0
+	    progress = -1
 	  } = $$props;
 	  let {
 	    visible = "false"
@@ -9013,30 +8986,29 @@
 	  let fullscreen;
 	  let inline;
 	  onMount(_async(function () {
-	    $$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");
 	    return _await();
 	  }));
 
 	  $$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));
+	    256) {
+	      $$invalidate(5, isVisible = toBoolean(visible));
 	    }
 	  };
 
-	  return [type, message, progress, spinnerSize, fullscreen, inline, isVisible, variant, size, visible];
+	  return [message, progress, spinnerSize, fullscreen, inline, isVisible, variant, size, visible];
 	}
 
 	class CircularProgress extends SvelteElement {
@@ -9048,12 +9020,11 @@
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$e, 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);
 
 	    if (options) {
@@ -9069,22 +9040,11 @@
 	  }
 
 	  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) {
@@ -9095,7 +9055,7 @@
 	  }
 
 	  get size() {
-	    return this.$$.ctx[8];
+	    return this.$$.ctx[7];
 	  }
 
 	  set size(size) {
@@ -9106,7 +9066,7 @@
 	  }
 
 	  get message() {
-	    return this.$$.ctx[1];
+	    return this.$$.ctx[0];
 	  }
 
 	  set message(message) {
@@ -9117,7 +9077,7 @@
 	  }
 
 	  get progress() {
-	    return this.$$.ctx[2];
+	    return this.$$.ctx[1];
 	  }
 
 	  set progress(progress) {
@@ -9128,7 +9088,7 @@
 	  }
 
 	  get visible() {
-	    return this.$$.ctx[9];
+	    return this.$$.ctx[8];
 	  }
 
 	  set visible(visible) {
@@ -9922,7 +9882,7 @@
 	    }
 
 	  };
-	} // (42:2) {#if ["alpha", "beta"].includes(level)}
+	} // (34:2) {#if ["alpha", "beta"].includes(level)}
 
 
 	function create_if_block_1$3(ctx) {
@@ -9949,7 +9909,7 @@
 	      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--" +
@@ -10010,7 +9970,7 @@
 	    }
 
 	  };
-	} // (52:6) {#if feedbackurl}
+	} // (43:6) {#if feedbackurl}
 
 
 	function create_if_block_2$2(ctx) {
@@ -10052,7 +10012,7 @@
 	    }
 
 	  };
-	} // (60:2) {#if version}
+	} // (49:2) {#if version}
 
 
 	function create_if_block$6(ctx) {
@@ -10220,7 +10180,7 @@
 	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, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -11092,7 +11052,7 @@
 	      attr(path, "stroke-linecap", "round");
 	      attr(svg, "class", svg_class_value = `spinner-${
       /*type*/
-      ctx[1]}`);
+      ctx[2]}`);
 	      attr(svg, "fill", "none");
 	      attr(svg, "viewBox", svg_viewBox_value = "0 0 " +
 	      /*diameter*/
@@ -11107,7 +11067,7 @@
 	      ctx[5]);
 	      attr(svg, "data-testid",
 	      /*testid*/
-	      ctx[2]);
+	      ctx[1]);
 	      attr(svg, "xmlns", "http://www.w3.org/2000/svg");
 	    },
 
@@ -11188,9 +11148,9 @@
 
 	      if (dirty &
 	      /*type*/
-	      2 && svg_class_value !== (svg_class_value = `spinner-${
+	      4 && svg_class_value !== (svg_class_value = `spinner-${
       /*type*/
-      ctx[1]}`)) {
+      ctx[2]}`)) {
 	        attr(svg, "class", svg_class_value);
 	      }
 
@@ -11222,10 +11182,10 @@
 
 	      if (dirty &
 	      /*testid*/
-	      4) {
+	      2) {
 	        attr(svg, "data-testid",
 	        /*testid*/
-	        ctx[2]);
+	        ctx[1]);
 	      }
 	    },
 
@@ -11295,14 +11255,12 @@
 	    invert = false
 	  } = $$props;
 	  let {
-	    type = "infinite"
-	  } = $$props;
-	  let {
-	    progress = "0"
+	    progress = -1
 	  } = $$props;
 	  let {
 	    testid = ""
 	  } = $$props;
+	  let type = "infinite";
 
 	  const _progress = tweened(0, {
 	    duration: 500,
@@ -11339,9 +11297,8 @@
 	  $$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 = () => {
@@ -11350,7 +11307,16 @@
 	    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");
+	        }
 	      }
 	    }
 
@@ -11390,12 +11356,12 @@
 
 	    if ($$self.$$.dirty &
 	    /*type, pathRadius, progress*/
-	    6146) {
+	    6148) {
 	      $$invalidate(6, ready = type === "infinite" ? pathRadius : pathRadius && progress);
 	    }
 	  };
 
-	  return [invert, type, testid, radius, strokewidth, diameter, ready, $_progress, _progress, getArc, size, progress, pathRadius];
+	  return [invert, testid, type, radius, strokewidth, diameter, ready, $_progress, _progress, getArc, size, progress, pathRadius];
 	}
 
 	class Spinner extends SvelteElement {
@@ -11409,9 +11375,8 @@
 	    }, instance$8, create_fragment$9, safe_not_equal, {
 	      size: 10,
 	      invert: 0,
-	      type: 1,
 	      progress: 11,
-	      testid: 2
+	      testid: 1
 	    }, null);
 
 	    if (options) {
@@ -11427,7 +11392,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["size", "invert", "type", "progress", "testid"];
+	    return ["size", "invert", "progress", "testid"];
 	  }
 
 	  get size() {
@@ -11452,17 +11417,6 @@
 	    flush();
 	  }
 
-	  get type() {
-	    return this.$$.ctx[1];
-	  }
-
-	  set type(type) {
-	    this.$$set({
-	      type
-	    });
-	    flush();
-	  }
-
 	  get progress() {
 	    return this.$$.ctx[11];
 	  }
@@ -11475,7 +11429,7 @@
 	  }
 
 	  get testid() {
-	    return this.$$.ctx[2];
+	    return this.$$.ctx[1];
 	  }
 
 	  set testid(testid) {
@@ -12071,7 +12025,9 @@
 	  return {
 	    c() {
 	      div = element("div");
-	      div.innerHTML = `<slot></slot>`;
+	      div.innerHTML = `<slot></slot> 
+  
+  <span tabindex="0"></span>`;
 	      this.c = noop;
 	    },
 
@@ -12079,7 +12035,7 @@
 	      insert(target, div, anchor);
 	      /*div_binding*/
 
-	      ctx[3](div);
+	      ctx[4](div);
 	    },
 
 	    p: noop,
@@ -12090,20 +12046,16 @@
 	      if (detaching) detach(div);
 	      /*div_binding*/
 
-	      ctx[3](null);
+	      ctx[4](null);
 	    }
 
 	  };
 	}
 
 	function isFocusable(element) {
-	  if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null) {
-	    return true;
-	  }
-
-	  if (element.disabled) {
-	    return false;
-	  }
+	  const isTabbable = element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute('tabIndex') !== null;
+	  if (isTabbable) return true;
+	  if (element.disabled) return false;
 
 	  switch (element.nodeName) {
 	    case 'A':
@@ -12123,13 +12075,14 @@
 	}
 
 	function instance$6($$self, $$props, $$invalidate) {
-	  let isOpen;
+	  let isActive;
+	  let {
+	    active
+	  } = $$props;
 	  let ignoreFocusChanges = false;
 	  let lastFocus;
 	  let element;
-	  let {
-	    open
-	  } = $$props;
+	  let hasListeners = false;
 
 	  function removeListeners() {
 	    document.removeEventListener('focus', trapFocus, true);
@@ -12137,15 +12090,18 @@
 
 	  function addListeners() {
 	    document.addEventListener('focus', trapFocus, true);
-	  }
+	  } // ====
+	  // First Node 
+	  // ====
 
-	  function attemptFocusOnFirstDescendant(descendants) {
-	    if (!descendants) return false;
 
-	    for (let i = 0; i < descendants.length; i++) {
-	      let descendant = descendants[i];
+	  function focusOnFirstNode(nodes) {
+	    if (!nodes) return false;
 
-	      if (attemptFocus(descendant) || attemptFocusOnFirstDescendant(descendant.childNodes) || attemptFocusOnFirstDescendantOfSlotElement(descendant) || attemptFocusOnFirstDescendantOfShadowDOM(descendant)) {
+	    for (const node of nodes) {
+	      const isFocusable = focus(node) || focusOnFirstNode(node.childNodes) || focusOnFirstNodeOfSlot(node) || focusOnFirstNodeOfShadowDOM(node);
+
+	      if (isFocusable) {
 	        return true;
 	      }
 	    }
@@ -12153,37 +12109,34 @@
 	    return false;
 	  }
 
-	  function attemptFocusOnFirstDescendantOfSlotElement(node) {
-	    var _a;
-
-	    if (node instanceof HTMLSlotElement) {
-	      let assingedNodesOfSlotElement = (_a = node) === null || _a === void 0 ? void 0 : _a.assignedNodes();
+	  function focusOnFirstNodeOfSlot(node) {
+	    if (!(node instanceof HTMLSlotElement)) return false;
 
-	      if (attemptFocusOnFirstDescendant(assingedNodesOfSlotElement)) {
-	        return true;
-	      }
+	    if (focusOnFirstNode(node.assignedNodes())) {
+	      return true;
 	    }
 	  }
 
-	  function attemptFocusOnFirstDescendantOfShadowDOM(node) {
-	    var _a, _b;
+	  function focusOnFirstNodeOfShadowDOM(node) {
+	    var _a;
 
-	    if (node instanceof HTMLElement) {
-	      let childNodesOfShadowRoot = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.childNodes;
+	    if (!(node instanceof HTMLElement)) return false;
 
-	      if (attemptFocusOnFirstDescendant(childNodesOfShadowRoot)) {
-	        return true;
-	      }
+	    if (focusOnFirstNode((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childNodes)) {
+	      return true;
 	    }
-	  }
+	  } // ====
+	  // Last Node 
+	  // ====
+
 
-	  function attemptFocusOnLastDescendant(descendants) {
-	    if (!descendants) return false;
+	  function focusOnLastNode(nodes) {
+	    if (!nodes) return false;
 
-	    for (let i = descendants.length - 1; i >= 0; i--) {
-	      let descendant = descendants[i];
+	    for (let i = nodes.length - 1; i >= 0; i--) {
+	      let node = nodes[i];
 
-	      if (attemptFocus(descendant) || attemptFocusOnLastDescendant(descendant.childNodes) || attemptFocusOnLastDescendantOfSlotElement(descendant) || attemptFocusOnLastDescendantOfShadowDOM(descendant)) {
+	      if (focus(node) || focusOnLastNode(node.childNodes) || focusOnLastNodeOfSlot(node) || focusOnLastNodeOfShadowDOM(node)) {
 	        return true;
 	      }
 	    }
@@ -12191,67 +12144,57 @@
 	    return false;
 	  }
 
-	  function attemptFocusOnLastDescendantOfSlotElement(node) {
-	    var _a;
-
-	    if (node instanceof HTMLSlotElement) {
-	      let assingedNodesOfSlotElement = (_a = node) === null || _a === void 0 ? void 0 : _a.assignedNodes();
+	  function focusOnLastNodeOfSlot(node) {
+	    if (!(node instanceof HTMLSlotElement)) return false;
 
-	      if (attemptFocusOnLastDescendant(assingedNodesOfSlotElement)) {
-	        return true;
-	      }
+	    if (focusOnLastNode(node.assignedNodes())) {
+	      return true;
 	    }
 	  }
 
-	  function attemptFocusOnLastDescendantOfShadowDOM(node) {
-	    var _a, _b;
+	  function focusOnLastNodeOfShadowDOM(node) {
+	    var _a;
 
-	    if (node instanceof HTMLElement) {
-	      let childNodesOfShadowRoot = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.childNodes;
+	    if (!(node instanceof HTMLElement)) return false;
 
-	      if (attemptFocusOnLastDescendant(childNodesOfShadowRoot)) {
-	        return true;
-	      }
+	    if (focusOnLastNode((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childNodes)) {
+	      return true;
 	    }
 	  }
 
-	  function attemptFocus(element) {
-	    if (!isFocusable(element)) {
-	      return false;
-	    }
-
-	    ignoreFocusChanges = true;
+	  function focus(element) {
+	    if (!isFocusable(element)) return false;
 
 	    try {
+	      ignoreFocusChanges = true;
 	      element.focus();
-	    } catch (e) {}
+	    } catch (e) {} finally {
+	      ignoreFocusChanges = false;
+	    }
 
-	    ignoreFocusChanges = false;
 	    return document.activeElement === element;
 	  }
 
 	  function trapFocus(event) {
 	    var _a;
 
-	    if (ignoreFocusChanges) {
-	      return;
-	    }
-
+	    if (ignoreFocusChanges) return;
 	    const slotElements = (_a = element.firstChild) === null || _a === void 0 ? void 0 : _a.assignedElements();
 	    if (!(slotElements === null || slotElements === void 0 ? void 0 : slotElements.length)) return;
 	    const contentRootElement = slotElements[0];
 
 	    if (event.composedPath().includes(contentRootElement)) {
 	      lastFocus = event.target;
-	    } else {
-	      attemptFocusOnFirstDescendant(contentRootElement.childNodes);
+	      return;
+	    }
 
-	      if (lastFocus == document.activeElement) {
-	        attemptFocusOnLastDescendant(contentRootElement.childNodes);
-	      }
+	    focusOnFirstNode(contentRootElement.childNodes);
 
-	      lastFocus = document.activeElement;
+	    if (lastFocus == document.activeElement) {
+	      focusOnLastNode(contentRootElement.childNodes);
 	    }
+
+	    lastFocus = document.activeElement;
 	  }
 
 	  function div_binding($$value) {
@@ -12262,30 +12205,34 @@
 	  }
 
 	  $$self.$$set = $$props => {
-	    if ('open' in $$props) $$invalidate(1, open = $$props.open);
+	    if ('active' in $$props) $$invalidate(1, active = $$props.active);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
-	    /*open*/
+	    /*active*/
 	    2) {
-	      $$invalidate(2, isOpen = toBoolean(open));
+	      $$invalidate(3, isActive = toBoolean(active));
 	    }
 
 	    if ($$self.$$.dirty &
-	    /*isOpen*/
-	    4) {
+	    /*isActive, hasListeners*/
+	    12) {
 	      {
-	        if (isOpen) {
+	        if (isActive && !hasListeners) {
 	          addListeners();
-	        } else {
+	          $$invalidate(2, hasListeners = true);
+	        }
+
+	        if (!isActive && hasListeners) {
 	          removeListeners();
+	          $$invalidate(2, hasListeners = false);
 	        }
 	      }
 	    }
 	  };
 
-	  return [element, open, isOpen, div_binding];
+	  return [element, active, hasListeners, isActive, div_binding];
 	}
 
 	class FocusTrap extends SvelteElement {
@@ -12296,7 +12243,7 @@
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$6, create_fragment$7, safe_not_equal, {
-	      open: 1
+	      active: 1
 	    }, null);
 
 	    if (options) {
@@ -12312,16 +12259,16 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["open"];
+	    return ["active"];
 	  }
 
-	  get open() {
+	  get active() {
 	    return this.$$.ctx[1];
 	  }
 
-	  set open(open) {
+	  set active(active) {
 	    this.$$set({
-	      open
+	      active
 	    });
 	    flush();
 	  }
@@ -14052,14 +13999,12 @@
 	};
 
 	var GoACircularProgress = function GoACircularProgress(_a) {
-	  var type = _a.type,
-	      visible = _a.visible,
+	  var visible = _a.visible,
 	      message = _a.message,
 	      progress = _a.progress,
 	      variant = _a.variant,
 	      size = _a.size;
 	  return jsxRuntime.jsx("goa-circular-progress", {
-	    type: type,
 	    visible: visible ? "true" : "false",
 	    message: message,
 	    progress: progress,