@abgov/react-components 4.0.0-alpha.107 → 4.0.0-alpha.109

package/react-components.umd.js

@@ -1065,6 +1065,476 @@
 
 	  };
 	}
+
+	function calculateMargin(mt, mr, mb, ml) {
+	  return [mt && `margin-top:var(--goa-space-${mt});`, mr && `margin-right:var(--goa-space-${mr});`, mb && `margin-bottom:var(--goa-space-${mb});`, ml && `margin-left:var(--goa-space-${ml});`].join(" ");
+	}
+
+	function injectCss(el, rootSelector, css, media) {
+	  const style = document.createElement("style");
+
+	  const _css = Object.entries(css).map(entry => `${entry[0]}: ${entry[1]};`).join(" ");
+
+	  if (media) {
+	    style.innerHTML = `@media (${media}) { ${rootSelector} {${_css}} }`;
+	  } else {
+	    style.innerHTML = `${rootSelector} {${_css}}`;
+	  }
+
+	  el.appendChild(style);
+	}
+
+	function toBoolean(value) {
+	  if (value === "false") {
+	    return false;
+	  }
+
+	  if (value === "") {
+	    return true;
+	  }
+
+	  return !!value;
+	}
+
+	function fromBoolean(value) {
+	  return value ? "true" : "false";
+	}
+
+	function validateRequired(componentName, props) {
+	  Object.entries(props).forEach(prop => {
+	    if (!prop[1]) {
+	      console.warn(`${componentName}: ${prop[0]} is required`);
+	    }
+	  });
+	}
+
+	function typeValidator(message, values, required = false) {
+	  const validator = value => {
+	    if (!required && !value) {
+	      return;
+	    }
+
+	    if (!values.includes(value)) {
+	      console.error(`[${value}] is an invalid ${message.toLowerCase()}`);
+	    }
+	  };
+
+	  return [values, validator];
+	}
+	/* libs/web-components/src/components/accordion/Accordion.svelte generated by Svelte v3.51.0 */
+
+
+	function create_fragment$H(ctx) {
+	  let div3;
+	  let details;
+	  let summary;
+	  let goa_icon;
+	  let goa_icon_fillcolor_value;
+	  let t0;
+	  let div1;
+	  let span0;
+	  let t1;
+	  let span0_class_value;
+	  let span0_data_testid_value;
+	  let t2;
+	  let span1;
+	  let t3;
+	  let t4;
+	  let div0;
+	  let summary_class_value;
+	  let t5;
+	  let div2;
+	  let div3_style_value;
+	  let mounted;
+	  let dispose;
+	  return {
+	    c() {
+	      div3 = element("div");
+	      details = element("details");
+	      summary = element("summary");
+	      goa_icon = element("goa-icon");
+	      t0 = space();
+	      div1 = element("div");
+	      span0 = element("span");
+	      t1 = text(
+	      /*heading*/
+	      ctx[0]);
+	      t2 = space();
+	      span1 = element("span");
+	      t3 = text(
+	      /*secondarytext*/
+	      ctx[1]);
+	      t4 = space();
+	      div0 = element("div");
+	      div0.innerHTML = `<slot name="headingcontent"></slot>`;
+	      t5 = space();
+	      div2 = element("div");
+	      div2.innerHTML = `<slot></slot>`;
+	      this.c = noop;
+	      set_custom_element_data(goa_icon, "type", "chevron-forward");
+	      set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
+	      /*_hovering*/
+	      ctx[8] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-interactive-default)");
+	      attr(span0, "class", span0_class_value = "heading heading-" +
+	      /*headingsize*/
+	      ctx[2]);
+	      attr(span0, "data-testid", span0_data_testid_value = `${
+      /*testid*/
+      ctx[3]}-heading`);
+	      attr(span1, "class", "secondary-text");
+	      attr(div0, "class", "heading-content");
+	      attr(div1, "class", "title");
+	      attr(summary, "class", summary_class_value = `container-${
+      /*headingsize*/
+      ctx[2]}`);
+	      attr(div2, "class", "content");
+	      details.open =
+	      /*isOpen*/
+	      ctx[9];
+	      attr(div3, "style", div3_style_value = calculateMargin(
+	      /*mt*/
+	      ctx[4],
+	      /*mr*/
+	      ctx[5],
+	      /*mb*/
+	      ctx[6],
+	      /*ml*/
+	      ctx[7]));
+	      attr(div3, "class", `
+    goa-accordion
+  `);
+	      attr(div3, "data-testid",
+	      /*testid*/
+	      ctx[3]);
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div3, anchor);
+	      append(div3, details);
+	      append(details, summary);
+	      append(summary, goa_icon);
+	      append(summary, t0);
+	      append(summary, div1);
+	      append(div1, span0);
+	      append(span0, t1);
+	      append(div1, t2);
+	      append(div1, span1);
+	      append(span1, t3);
+	      append(div1, t4);
+	      append(div1, div0);
+	      append(details, t5);
+	      append(details, div2);
+
+	      if (!mounted) {
+	        dispose = [listen(summary, "mouseover",
+	        /*mouseover_handler*/
+	        ctx[11]), listen(summary, "mouseout",
+	        /*mouseout_handler*/
+	        ctx[12]), listen(summary, "focus",
+	        /*focus_handler*/
+	        ctx[13]), listen(summary, "blur",
+	        /*blur_handler*/
+	        ctx[14])];
+	        mounted = true;
+	      }
+	    },
+
+	    p(ctx, [dirty]) {
+	      if (dirty &
+	      /*_hovering*/
+	      256 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
+	      /*_hovering*/
+	      ctx[8] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-interactive-default)")) {
+	        set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
+	      }
+
+	      if (dirty &
+	      /*heading*/
+	      1) set_data(t1,
+	      /*heading*/
+	      ctx[0]);
+
+	      if (dirty &
+	      /*headingsize*/
+	      4 && span0_class_value !== (span0_class_value = "heading heading-" +
+	      /*headingsize*/
+	      ctx[2])) {
+	        attr(span0, "class", span0_class_value);
+	      }
+
+	      if (dirty &
+	      /*testid*/
+	      8 && span0_data_testid_value !== (span0_data_testid_value = `${
+      /*testid*/
+      ctx[3]}-heading`)) {
+	        attr(span0, "data-testid", span0_data_testid_value);
+	      }
+
+	      if (dirty &
+	      /*secondarytext*/
+	      2) set_data(t3,
+	      /*secondarytext*/
+	      ctx[1]);
+
+	      if (dirty &
+	      /*headingsize*/
+	      4 && summary_class_value !== (summary_class_value = `container-${
+      /*headingsize*/
+      ctx[2]}`)) {
+	        attr(summary, "class", summary_class_value);
+	      }
+
+	      if (dirty &
+	      /*isOpen*/
+	      512) {
+	        details.open =
+	        /*isOpen*/
+	        ctx[9];
+	      }
+
+	      if (dirty &
+	      /*mt, mr, mb, ml*/
+	      240 && div3_style_value !== (div3_style_value = calculateMargin(
+	      /*mt*/
+	      ctx[4],
+	      /*mr*/
+	      ctx[5],
+	      /*mb*/
+	      ctx[6],
+	      /*ml*/
+	      ctx[7]))) {
+	        attr(div3, "style", div3_style_value);
+	      }
+
+	      if (dirty &
+	      /*testid*/
+	      8) {
+	        attr(div3, "data-testid",
+	        /*testid*/
+	        ctx[3]);
+	      }
+	    },
+
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(div3);
+	      mounted = false;
+	      run_all(dispose);
+	    }
+
+	  };
+	}
+
+	function instance$B($$self, $$props, $$invalidate) {
+	  let isOpen;
+	  const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
+	  let {
+	    open = "false"
+	  } = $$props;
+	  let {
+	    heading = ""
+	  } = $$props;
+	  let {
+	    secondarytext = ""
+	  } = $$props;
+	  let {
+	    headingsize = "small"
+	  } = $$props;
+	  let {
+	    testid = ""
+	  } = $$props;
+	  let {
+	    mt = null
+	  } = $$props;
+	  let {
+	    mr = null
+	  } = $$props;
+	  let {
+	    mb = "xs"
+	  } = $$props;
+	  let {
+	    ml = null
+	  } = $$props;
+	  let _hovering = false;
+	  onMount(() => {
+	    validateRequired("GoAAccordion", {
+	      heading
+	    });
+	    validateHeadingSize(headingsize);
+	  });
+
+	  const mouseover_handler = () => $$invalidate(8, _hovering = true);
+
+	  const mouseout_handler = () => $$invalidate(8, _hovering = false);
+
+	  const focus_handler = () => $$invalidate(8, _hovering = false);
+
+	  const blur_handler = () => $$invalidate(8, _hovering = false);
+
+	  $$self.$$set = $$props => {
+	    if ('open' in $$props) $$invalidate(10, open = $$props.open);
+	    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
+	    if ('secondarytext' in $$props) $$invalidate(1, secondarytext = $$props.secondarytext);
+	    if ('headingsize' in $$props) $$invalidate(2, headingsize = $$props.headingsize);
+	    if ('testid' in $$props) $$invalidate(3, testid = $$props.testid);
+	    if ('mt' in $$props) $$invalidate(4, mt = $$props.mt);
+	    if ('mr' in $$props) $$invalidate(5, mr = $$props.mr);
+	    if ('mb' in $$props) $$invalidate(6, mb = $$props.mb);
+	    if ('ml' in $$props) $$invalidate(7, ml = $$props.ml);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*open*/
+	    1024) {
+	      $$invalidate(9, isOpen = toBoolean(open));
+	    }
+	  };
+
+	  return [heading, secondarytext, headingsize, testid, mt, mr, mb, ml, _hovering, isOpen, open, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
+	}
+
+	class Accordion extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-accordion,.goa-accordion *{box-sizing:border-box}summary{min-height:3.5rem;border-width:var(--goa-border-width-s);border-style:solid;border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-text-default);;;padding:0.875rem 1rem 0 0;cursor:pointer;list-style:none;display:flex;align-items:flex-start;position:relative}summary.container-medium{min-height:4rem}summary::marker,summary::-webkit-details-marker{display:none}summary .title{display:flex;align-items:center;flex:1}.title span{padding-bottom:var(--goa-space-3xs, 0)}summary .heading{font:var(--goa-typography-heading-s);padding-right:1rem}summary .secondary-text{font:var(--goa-typography-body-s);line-height:1.5rem;padding-right:1rem}summary .heading-content{flex:1
+  }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start}}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, instance$B, create_fragment$H, safe_not_equal, {
+	      open: 10,
+	      heading: 0,
+	      secondarytext: 1,
+	      headingsize: 2,
+	      testid: 3,
+	      mt: 4,
+	      mr: 5,
+	      mb: 6,
+	      ml: 7
+	    }, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+
+	      if (options.props) {
+	        this.$set(options.props);
+	        flush();
+	      }
+	    }
+	  }
+
+	  static get observedAttributes() {
+	    return ["open", "heading", "secondarytext", "headingsize", "testid", "mt", "mr", "mb", "ml"];
+	  }
+
+	  get open() {
+	    return this.$$.ctx[10];
+	  }
+
+	  set open(open) {
+	    this.$$set({
+	      open
+	    });
+	    flush();
+	  }
+
+	  get heading() {
+	    return this.$$.ctx[0];
+	  }
+
+	  set heading(heading) {
+	    this.$$set({
+	      heading
+	    });
+	    flush();
+	  }
+
+	  get secondarytext() {
+	    return this.$$.ctx[1];
+	  }
+
+	  set secondarytext(secondarytext) {
+	    this.$$set({
+	      secondarytext
+	    });
+	    flush();
+	  }
+
+	  get headingsize() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set headingsize(headingsize) {
+	    this.$$set({
+	      headingsize
+	    });
+	    flush();
+	  }
+
+	  get testid() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set testid(testid) {
+	    this.$$set({
+	      testid
+	    });
+	    flush();
+	  }
+
+	  get mt() {
+	    return this.$$.ctx[4];
+	  }
+
+	  set mt(mt) {
+	    this.$$set({
+	      mt
+	    });
+	    flush();
+	  }
+
+	  get mr() {
+	    return this.$$.ctx[5];
+	  }
+
+	  set mr(mr) {
+	    this.$$set({
+	      mr
+	    });
+	    flush();
+	  }
+
+	  get mb() {
+	    return this.$$.ctx[6];
+	  }
+
+	  set mb(mb) {
+	    this.$$set({
+	      mb
+	    });
+	    flush();
+	  }
+
+	  get ml() {
+	    return this.$$.ctx[7];
+	  }
+
+	  set ml(ml) {
+	    this.$$set({
+	      ml
+	    });
+	    flush();
+	  }
+
+	}
+
+	customElements.define("goa-accordion", Accordion);
 	/* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
 	function create_else_block$4(ctx) {
@@ -1377,65 +1847,8 @@
 	}
 
 	customElements.define("goa-app-header", AppHeader);
-
-	function calculateMargin(mt, mr, mb, ml) {
-	  return [mt && `margin-top:var(--goa-space-${mt});`, mr && `margin-right:var(--goa-space-${mr});`, mb && `margin-bottom:var(--goa-space-${mb});`, ml && `margin-left:var(--goa-space-${ml});`].join(" ");
-	}
-
-	function injectCss(el, rootSelector, css, media) {
-	  const style = document.createElement("style");
-
-	  const _css = Object.entries(css).map(entry => `${entry[0]}: ${entry[1]};`).join(" ");
-
-	  if (media) {
-	    style.innerHTML = `@media (${media}) { ${rootSelector} {${_css}} }`;
-	  } else {
-	    style.innerHTML = `${rootSelector} {${_css}}`;
-	  }
-
-	  el.appendChild(style);
-	}
-
-	function toBoolean(value) {
-	  if (value === "false") {
-	    return false;
-	  }
-
-	  if (value === "") {
-	    return true;
-	  }
-
-	  return !!value;
-	}
-
-	function fromBoolean(value) {
-	  return value ? "true" : "false";
-	}
-
-	function validateRequired(componentName, props) {
-	  Object.entries(props).forEach(prop => {
-	    if (!prop[1]) {
-	      console.warn(`${componentName}: ${prop[0]} is required`);
-	    }
-	  });
-	}
-
-	function typeValidator(message, values, required = false) {
-	  const validator = value => {
-	    if (!required && !value) {
-	      return;
-	    }
-
-	    if (!values.includes(value)) {
-	      console.error(`[${value}] is an invalid ${message.toLowerCase()}`);
-	    }
-	  };
-
-	  return [values, validator];
-	}
 	/* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
 
-
 	function create_else_block$3(ctx) {
 	  let div;
 	  return {
@@ -12752,8 +13165,12 @@
 	    validateType(type);
 	  });
 
-	  function close() {
+	  function close(e) {
 	    $$invalidate(1, show = false);
+	    e.target.dispatchEvent(new CustomEvent("_dismiss", {
+	      composed: true
+	    }));
+	    e.stopPropagation();
 	  }
 
 	  $$self.$$set = $$props => {
@@ -15822,7 +16239,7 @@
 	class TextArea extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:0.75rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive-hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
+	    this.shadowRoot.innerHTML = `<style>:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:0.75rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%;resize:vertical}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive-hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
   }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
@@ -16827,15 +17244,48 @@
 	    return t;
 	}
 
+	var GoAAccordion = function GoAAccordion(_a) {
+	  var open = _a.open,
+	      heading = _a.heading,
+	      headingSize = _a.headingSize,
+	      secondaryText = _a.secondaryText,
+	      headingContent = _a.headingContent,
+	      testid = _a.testid,
+	      children = _a.children,
+	      mt = _a.mt,
+	      mr = _a.mr,
+	      mb = _a.mb,
+	      ml = _a.ml;
+	  return jsxRuntime.jsxs("goa-accordion", __assign({
+	    open: open,
+	    headingSize: headingSize,
+	    heading: heading,
+	    secondaryText: secondaryText,
+	    "data-testid": testid,
+	    mt: mt,
+	    mr: mr,
+	    mb: mb,
+	    ml: ml
+	  }, {
+	    children: [children, headingContent && jsxRuntime.jsx("div", __assign({
+	      slot: "headingcontent"
+	    }, {
+	      children: headingContent
+	    }), void 0)]
+	  }), void 0);
+	};
+
 	var GoAAppHeader = function GoAAppHeader(_a) {
 	  var heading = _a.heading,
 	      url = _a.url,
 	      maxContentWidth = _a.maxContentWidth,
+	      testId = _a.testId,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-app-header", __assign({
 	    heading: heading,
 	    url: url,
-	    maxcontentwidth: maxContentWidth
+	    maxcontentwidth: maxContentWidth,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -16854,7 +17304,7 @@
 	    type: type,
 	    content: content,
 	    icon: icon,
-	    testid: testId,
+	    "data-testid": testId,
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
@@ -16962,7 +17412,8 @@
 	    mt: props.mt,
 	    mr: props.mr,
 	    mb: props.mb,
-	    ml: props.ml
+	    ml: props.ml,
+	    "data-testid": props.testId
 	  }, {
 	    children: props.children
 	  }), void 0);
@@ -16971,6 +17422,7 @@
 	var GoAButtonGroup = function GoAButtonGroup(_a) {
 	  var alignment = _a.alignment,
 	      gap = _a.gap,
+	      testId = _a.testId,
 	      children = _a.children,
 	      mt = _a.mt,
 	      mr = _a.mr,
@@ -16982,7 +17434,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -16997,6 +17450,7 @@
 	      variant = _a.variant,
 	      leadingIcon = _a.leadingIcon,
 	      trailingIcon = _a.trailingIcon,
+	      testId = _a.testId,
 	      children = _a.children,
 	      onClick = _a.onClick,
 	      mt = _a.mt,
@@ -17032,6 +17486,7 @@
 	    disabled: disabled,
 	    leadingicon: leadingIcon,
 	    trailingicon: trailingIcon,
+	    "data-testid": testId,
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
@@ -17045,6 +17500,7 @@
 	  var heading = _a.heading,
 	      _b = _a.type,
 	      type = _b === void 0 ? "information" : _b,
+	      testId = _a.testId,
 	      children = _a.children,
 	      mt = _a.mt,
 	      mr = _a.mr,
@@ -17056,7 +17512,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17129,7 +17586,8 @@
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
-	      ml = _a.ml;
+	      ml = _a.ml,
+	      testId = _a.testId;
 	  var el = react.useRef(null);
 	  react.useEffect(function () {
 	    if (!el.current) return;
@@ -17155,7 +17613,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, void 0);
 	};
 
@@ -17164,13 +17623,15 @@
 	      message = _a.message,
 	      progress = _a.progress,
 	      variant = _a.variant,
-	      size = _a.size;
+	      size = _a.size,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-circular-progress", {
 	    visible: visible ? "true" : "false",
 	    message: message,
 	    progress: progress,
 	    variant: variant,
-	    size: size
+	    size: size,
+	    "data-testid": testId
 	  }, void 0);
 	};
 
@@ -17184,7 +17645,8 @@
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
-	      ml = _a.ml;
+	      ml = _a.ml,
+	      testId = _a.testId;
 	  return jsxRuntime.jsxs("goa-container", __assign({
 	    type: type,
 	    padding: padding,
@@ -17192,7 +17654,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: [title && jsxRuntime.jsx("div", __assign({
 	      slot: "title"
@@ -17211,7 +17674,8 @@
 	    mt: props.mt,
 	    mr: props.mr,
 	    mb: props.mb,
-	    ml: props.ml
+	    ml: props.ml,
+	    "data-testid": props.testId
 	  }, void 0);
 	}
 
@@ -17266,7 +17730,7 @@
 	    multiselect: props.multiselect,
 	    native: props.native,
 	    placeholder: props.placeholder,
-	    testid: props.testId,
+	    "data-testid": props.testId,
 	    width: props.width
 	  }, {
 	    children: props.children
@@ -17305,11 +17769,13 @@
 	  var heading = _a.heading,
 	      _b = _a.maxColumnCount,
 	      maxColumnCount = _b === void 0 ? 1 : _b,
+	      testId = _a.testId,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-app-footer-nav-section", __assign({
 	    slot: "nav",
 	    heading: heading,
-	    maxcolumncount: maxColumnCount
+	    maxcolumncount: maxColumnCount,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17317,9 +17783,11 @@
 
 	function GoAAppFooter(_a) {
 	  var maxContentWidth = _a.maxContentWidth,
-	      children = _a.children;
+	      children = _a.children,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-app-footer", __assign({
-	    maxcontentwidth: maxContentWidth
+	    maxcontentwidth: maxContentWidth,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17334,7 +17802,8 @@
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
-	      ml = _a.ml;
+	      ml = _a.ml,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-form-item", __assign({
 	    label: label,
 	    error: error,
@@ -17343,7 +17812,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17356,6 +17826,7 @@
 	      mr = _a.mr,
 	      mb = _a.mb,
 	      ml = _a.ml,
+	      testId = _a.testId,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-grid", __assign({
 	    gap: gap,
@@ -17363,7 +17834,8 @@
 	    minchildwidth: minChildWidth,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17373,11 +17845,13 @@
 	  var heading = _a.heading,
 	      backgroundUrl = _a.backgroundUrl,
 	      minHeight = _a.minHeight,
-	      children = _a.children;
+	      children = _a.children,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-hero-banner", __assign({
 	    heading: heading,
 	    backgroundurl: backgroundUrl,
-	    minheight: minHeight
+	    minheight: minHeight,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17401,6 +17875,7 @@
 	      _c = _a.size,
 	      size = _c === void 0 ? "medium" : _c,
 	      title = _a.title,
+	      testId = _a.testId,
 	      children = _a.children,
 	      mt = _a.mt,
 	      mr = _a.mr,
@@ -17437,7 +17912,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17450,7 +17926,8 @@
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
-	      ml = _a.ml;
+	      ml = _a.ml,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-icon", {
 	    type: type,
 	    theme: theme,
@@ -17458,7 +17935,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, void 0);
 	}
 
@@ -17722,11 +18200,13 @@
 	var GoAMicrositeHeader = function GoAMicrositeHeader(_a) {
 	  var type = _a.type,
 	      version = _a.version,
-	      feedbackUrl = _a.feedbackUrl;
+	      feedbackUrl = _a.feedbackUrl,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-microsite-header", {
 	    type: type,
 	    version: version,
-	    feedbackurl: feedbackUrl
+	    feedbackurl: feedbackUrl,
+	    "data-testid": testId
 	  }, void 0);
 	};
 
@@ -17739,7 +18219,8 @@
 	      transition = _a.transition,
 	      type = _a.type,
 	      calloutVariant = _a.calloutVariant,
-	      onClose = _a.onClose;
+	      onClose = _a.onClose,
+	      testId = _a.testId;
 	  var el = react.useRef(null);
 	  react.useEffect(function () {
 	    if (type) {
@@ -17770,7 +18251,8 @@
 	    scrollable: true,
 	    width: width,
 	    transition: transition,
-	    calloutVariant: calloutVariant
+	    calloutVariant: calloutVariant,
+	    "data-testid": testId
 	  }, {
 	    children: [actions && jsxRuntime.jsx("div", __assign({
 	      slot: "actions"
@@ -17783,9 +18265,30 @@
 	var GoANotification = function GoANotification(_a) {
 	  var _b = _a.type,
 	      type = _b === void 0 ? "information" : _b,
-	      children = _a.children;
+	      children = _a.children,
+	      testId = _a.testId,
+	      onDismiss = _a.onDismiss;
+	  var el = react.useRef(null);
+	  react.useEffect(function () {
+	    if (!el.current) {
+	      return;
+	    }
+
+	    var current = el.current;
+
+	    var listener = function listener() {
+	      onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+	    };
+
+	    current.addEventListener("_dismiss", listener);
+	    return function () {
+	      current.removeEventListener("_dismiss", listener);
+	    };
+	  }, [el, onDismiss]);
 	  return jsxRuntime.jsx("goa-notification", __assign({
-	    type: type
+	    ref: el,
+	    type: type,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17799,7 +18302,8 @@
 
 	var GoAPageBlock = function GoAPageBlock(props) {
 	  return jsxRuntime.jsx("goa-page-block", __assign({
-	    width: props.width
+	    width: props.width,
+	    "data-testid": props.testId
 	  }, {
 	    children: props.children
 	  }), void 0);
@@ -17911,7 +18415,8 @@
 	    mt: props.mt,
 	    mb: props.mb,
 	    ml: props.ml,
-	    mr: props.mr
+	    mr: props.mr,
+	    "data-testid": props.testId
 	  }, void 0);
 	}
 
@@ -17920,6 +18425,7 @@
 	      size = _a.size,
 	      lineCount = _a.lineCount,
 	      type = _a.type,
+	      testId = _a.testId,
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
@@ -17932,14 +18438,16 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, void 0);
 	};
 
 	function GoASpacer(props) {
 	  return jsxRuntime.jsx("goa-spacer", {
 	    hspacing: props.hSpacing,
-	    vspacing: props.vSpacing
+	    vspacing: props.vSpacing,
+	    "data-testid": props.testId
 	  }, void 0);
 	}
 
@@ -17954,7 +18462,7 @@
 	    size: size,
 	    progress: progress,
 	    invert: invert,
-	    testid: testId
+	    "data-testid": testId
 	  }, void 0);
 	};
 
@@ -17962,6 +18470,7 @@
 	  return jsxRuntime.jsx("goa-table", __assign({
 	    width: props.width,
 	    stickyheader: false,
+	    "data-testid": props.testId,
 	    mt: props.mt,
 	    mb: props.mb,
 	    ml: props.ml,
@@ -18053,6 +18562,7 @@
 	  }), void 0);
 	}
 
+	exports.GoAAccordion = GoAAccordion;
 	exports.GoAAppFooter = GoAAppFooter;
 	exports.GoAAppFooterMetaSection = GoAAppFooterMetaSection;
 	exports.GoAAppFooterNavSection = GoAAppFooterNavSection;