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

package/react-components.esm.js

@@ -1355,7 +1355,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, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -2200,7 +2200,7 @@ class Button extends SvelteElement {
   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),
@@ -2594,7 +2594,7 @@ function instance$u($$self, $$props, $$invalidate) {
     type
   } = $$props;
   let {
-    heading
+    heading = ""
   } = $$props;
   let {
     testid = ""
@@ -7664,7 +7664,7 @@ function create_if_block$9(ctx) {
       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]);
     },
@@ -7765,7 +7765,7 @@ function create_if_block$9(ctx) {
       if (!current || dirty &
       /*open*/
       2) {
-        set_custom_element_data(goa_focus_trap, "open",
+        set_custom_element_data(goa_focus_trap, "active",
         /*open*/
         ctx[1]);
       }
@@ -8497,10 +8497,10 @@ function create_if_block$7(ctx) {
   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;
   }
 
@@ -8578,39 +8578,35 @@ 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);
+  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) {
@@ -8621,33 +8617,25 @@ function create_if_block_3$1(ctx) {
     },
 
     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 {
@@ -8662,18 +8650,18 @@ function create_if_block_3$1(ctx) {
 
       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]);
       }
     },
 
@@ -8686,13 +8674,12 @@ 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;
@@ -8700,25 +8687,22 @@ function create_if_block_1$4(ctx) {
   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) {
@@ -8737,33 +8721,25 @@ 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*/
-      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 {
@@ -8778,10 +8754,10 @@ function create_if_block_1$4(ctx) {
 
       if (dirty &
       /*fullscreen*/
-      16) {
+      8) {
         toggle_class(div, "fullscreen",
         /*fullscreen*/
-        ctx[4]);
+        ctx[3]);
       }
     },
 
@@ -8813,7 +8789,7 @@ function create_if_block_1$4(ctx) {
     }
 
   };
-} // (42:6) {#if message}
+} // (41:6) {#if message}
 
 
 function create_if_block_4(ctx) {
@@ -8824,7 +8800,7 @@ function create_if_block_4(ctx) {
       div = element("div");
       t = text(
       /*message*/
-      ctx[1]);
+      ctx[0]);
       attr(div, "class", "message");
     },
 
@@ -8836,9 +8812,9 @@ function create_if_block_4(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*message*/
-      2) set_data(t,
+      1) set_data(t,
       /*message*/
-      ctx[1]);
+      ctx[0]);
     },
 
     d(detaching) {
@@ -8846,7 +8822,7 @@ function create_if_block_4(ctx) {
     }
 
   };
-} // (35:6) {#if message}
+} // (34:6) {#if message}
 
 
 function create_if_block_2$3(ctx) {
@@ -8857,7 +8833,7 @@ function create_if_block_2$3(ctx) {
       div = element("div");
       t = text(
       /*message*/
-      ctx[1]);
+      ctx[0]);
       attr(div, "class", "message");
     },
 
@@ -8869,9 +8845,9 @@ function create_if_block_2$3(ctx) {
     p(ctx, dirty) {
       if (dirty &
       /*message*/
-      2) set_data(t,
+      1) set_data(t,
       /*message*/
-      ctx[1]);
+      ctx[0]);
     },
 
     d(detaching) {
@@ -8886,7 +8862,7 @@ function create_fragment$f(ctx) {
   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();
@@ -8903,13 +8879,13 @@ function create_fragment$f(ctx) {
     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 {
@@ -8948,9 +8924,6 @@ function create_fragment$f(ctx) {
 
 function instance$e($$self, $$props, $$invalidate) {
   let isVisible;
-  let {
-    type = "infinite"
-  } = $$props;
   let {
     variant = "inline"
   } = $$props;
@@ -8961,7 +8934,7 @@ function instance$e($$self, $$props, $$invalidate) {
     message = ""
   } = $$props;
   let {
-    progress = 0
+    progress = -1
   } = $$props;
   let {
     visible = "false"
@@ -8970,29 +8943,28 @@ function instance$e($$self, $$props, $$invalidate) {
   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));
+    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 {
@@ -9004,12 +8976,11 @@ class CircularProgress extends SvelteElement {
       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) {
@@ -9025,22 +8996,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) {
@@ -9051,7 +9011,7 @@ class CircularProgress extends SvelteElement {
   }
 
   get size() {
-    return this.$$.ctx[8];
+    return this.$$.ctx[7];
   }
 
   set size(size) {
@@ -9062,7 +9022,7 @@ class CircularProgress extends SvelteElement {
   }
 
   get message() {
-    return this.$$.ctx[1];
+    return this.$$.ctx[0];
   }
 
   set message(message) {
@@ -9073,7 +9033,7 @@ class CircularProgress extends SvelteElement {
   }
 
   get progress() {
-    return this.$$.ctx[2];
+    return this.$$.ctx[1];
   }
 
   set progress(progress) {
@@ -9084,7 +9044,7 @@ class CircularProgress extends SvelteElement {
   }
 
   get visible() {
-    return this.$$.ctx[9];
+    return this.$$.ctx[8];
   }
 
   set visible(visible) {
@@ -9876,7 +9836,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) {
@@ -9903,7 +9863,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--" +
@@ -9964,7 +9924,7 @@ function create_if_block_1$3(ctx) {
     }
 
   };
-} // (52:6) {#if feedbackurl}
+} // (43:6) {#if feedbackurl}
 
 
 function create_if_block_2$2(ctx) {
@@ -10006,7 +9966,7 @@ function create_if_block_2$2(ctx) {
     }
 
   };
-} // (60:2) {#if version}
+} // (49:2) {#if version}
 
 
 function create_if_block$6(ctx) {
@@ -10174,7 +10134,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, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -11046,7 +11006,7 @@ function create_if_block$4(ctx) {
       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*/
@@ -11061,7 +11021,7 @@ function create_if_block$4(ctx) {
       ctx[5]);
       attr(svg, "data-testid",
       /*testid*/
-      ctx[2]);
+      ctx[1]);
       attr(svg, "xmlns", "http://www.w3.org/2000/svg");
     },
 
@@ -11142,9 +11102,9 @@ function create_if_block$4(ctx) {
 
       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);
       }
 
@@ -11176,10 +11136,10 @@ function create_if_block$4(ctx) {
 
       if (dirty &
       /*testid*/
-      4) {
+      2) {
         attr(svg, "data-testid",
         /*testid*/
-        ctx[2]);
+        ctx[1]);
       }
     },
 
@@ -11249,14 +11209,12 @@ function instance$8($$self, $$props, $$invalidate) {
     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,
@@ -11293,9 +11251,8 @@ 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 = () => {
@@ -11304,7 +11261,16 @@ function instance$8($$self, $$props, $$invalidate) {
     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");
+        }
       }
     }
 
@@ -11344,12 +11310,12 @@ function instance$8($$self, $$props, $$invalidate) {
 
     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 {
@@ -11363,9 +11329,8 @@ class Spinner extends SvelteElement {
     }, instance$8, create_fragment$9, safe_not_equal, {
       size: 10,
       invert: 0,
-      type: 1,
       progress: 11,
-      testid: 2
+      testid: 1
     }, null);
 
     if (options) {
@@ -11381,7 +11346,7 @@ class Spinner extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["size", "invert", "type", "progress", "testid"];
+    return ["size", "invert", "progress", "testid"];
   }
 
   get size() {
@@ -11406,17 +11371,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];
   }
@@ -11429,7 +11383,7 @@ class Spinner extends SvelteElement {
   }
 
   get testid() {
-    return this.$$.ctx[2];
+    return this.$$.ctx[1];
   }
 
   set testid(testid) {
@@ -12025,7 +11979,9 @@ function create_fragment$7(ctx) {
   return {
     c() {
       div = element("div");
-      div.innerHTML = `<slot></slot>`;
+      div.innerHTML = `<slot></slot> 
+  
+  <span tabindex="0"></span>`;
       this.c = noop;
     },
 
@@ -12033,7 +11989,7 @@ function create_fragment$7(ctx) {
       insert(target, div, anchor);
       /*div_binding*/
 
-      ctx[3](div);
+      ctx[4](div);
     },
 
     p: noop,
@@ -12044,20 +12000,16 @@ function create_fragment$7(ctx) {
       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':
@@ -12077,13 +12029,14 @@ function isFocusable(element) {
 }
 
 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);
@@ -12091,15 +12044,18 @@ function instance$6($$self, $$props, $$invalidate) {
 
   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;
       }
     }
@@ -12107,37 +12063,34 @@ function instance$6($$self, $$props, $$invalidate) {
     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;
       }
     }
@@ -12145,67 +12098,57 @@ function instance$6($$self, $$props, $$invalidate) {
     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) {
@@ -12216,30 +12159,34 @@ function instance$6($$self, $$props, $$invalidate) {
   }
 
   $$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 {
@@ -12250,7 +12197,7 @@ class FocusTrap extends SvelteElement {
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$6, create_fragment$7, safe_not_equal, {
-      open: 1
+      active: 1
     }, null);
 
     if (options) {
@@ -12266,16 +12213,16 @@ class FocusTrap extends SvelteElement {
   }
 
   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();
   }
@@ -13994,7 +13941,6 @@ const GoAChip = ({
 };
 
 const GoACircularProgress = ({
-  type,
   visible,
   message,
   progress,
@@ -14002,7 +13948,6 @@ const GoACircularProgress = ({
   size
 }) => {
   return jsx("goa-circular-progress", {
-    type: type,
     visible: visible ? "true" : "false",
     message: message,
     progress: progress,