@abgov/react-components 4.0.0-alpha.132 → 4.0.0-alpha.134

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.132",
+  "version": "4.0.0-alpha.134",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -2130,7 +2130,7 @@ function instance$F($$self, $$props, $$invalidate) {
     ml = null
   } = $$props;
   onMount(() => {
-    validateType(type);
+    setTimeout(() => validateType(type), 1);
 
     if (!showIcon && !content) {
       console.warn("GoABadge must have either then content or icon property set");
@@ -3563,7 +3563,7 @@ function instance$B($$self, $$props, $$invalidate) {
     testid = ""
   } = $$props;
   onMount(() => {
-    validateType(type);
+    setTimeout(() => validateType(type), 1);
   });
 
   $$self.$$set = $$props => {
@@ -12648,7 +12648,7 @@ function instance$h($$self, $$props, $$invalidate) {
     feedbackurl = ""
   } = $$props;
   onMount(() => {
-    validateType(type);
+    setTimeout(() => validateType(type), 1);
   });
 
   $$self.$$set = $$props => {
@@ -13686,7 +13686,7 @@ function instance$f($$self, $$props, $$invalidate) {
   } = $$props;
   let show = true;
   onMount(() => {
-    validateType(type);
+    setTimeout(() => validateType(type), 1);
   });
 
   function close(e) {
@@ -16376,7 +16376,7 @@ function instance$9($$self, $$props, $$invalidate) {
     ml = null
   } = $$props;
   onMount(() => {
-    validateType(type);
+    setTimeout(() => validateType(type), 1);
     validateSize(size);
   });
 
@@ -19012,7 +19012,7 @@ function create_else_block(ctx) {
     }
 
   };
-} // (148:38) 
+} // (152:38) 
 
 
 function create_if_block_3(ctx) {
@@ -19034,7 +19034,7 @@ function create_if_block_3(ctx) {
     }
 
   };
-} // (146:36) 
+} // (150:36) 
 
 
 function create_if_block_2(ctx) {
@@ -19057,7 +19057,7 @@ function create_if_block_2(ctx) {
     }
 
   };
-} // (144:4) {#if _isCurrent}
+} // (148:4) {#if _isCurrent}
 
 
 function create_if_block_1(ctx) {
@@ -19079,7 +19079,7 @@ function create_if_block_1(ctx) {
     }
 
   };
-} // (156:4) {#if status === "incomplete"}
+} // (160:4) {#if status === "incomplete"}
 
 
 function create_if_block(ctx) {
@@ -19171,6 +19171,7 @@ function create_fragment$1(ctx) {
       /*arialabel*/
       ctx[2]);
       attr(label, "role", "listitem");
+      attr(label, "tabindex", "-1");
       attr(label, "for",
       /*text*/
       ctx[0]);
@@ -19429,10 +19430,10 @@ function instance$1($$self, $$props, $$invalidate) {
 class FormStep extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):focus-within{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
+    this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):focus,[role="listitem"]:not([aria-disabled="true"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
   }[data-status=complete] .status{background-color:var(--goa-color-interactive-default)}[aria-current="step"][data-status=complete] .status{background:var(--goa-color-greyscale-white)}.step-number{margin-bottom:var(--font-valign-fix);font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-secondary)}[role="listitem"]:not(
-    [data-status=complete], 
-    [data-status=incomplete], 
+    [data-status=complete],
+    [data-status=incomplete],
     [aria-current="step"]
   ) .status{border-color:var(--goa-color-greyscale-500)}.text{font:var(--goa-typography-body-s)}.subtext{margin-top:0.25rem;font:var(--goa-typography-body-xs);color:var(--goa-color-text-secondary)}.details{margin-top:0.75rem}@media(max-width: 639px){[role="listitem"]{flex-direction:row;align-items:center;text-align:start}.details{margin-left:1rem;margin-top:0}}</style>`;
     init(this, {

package/react-components.umd.js

@@ -2171,7 +2171,7 @@
 	    ml = null
 	  } = $$props;
 	  onMount(() => {
-	    validateType(type);
+	    setTimeout(() => validateType(type), 1);
 
 	    if (!showIcon && !content) {
 	      console.warn("GoABadge must have either then content or icon property set");
@@ -3604,7 +3604,7 @@
 	    testid = ""
 	  } = $$props;
 	  onMount(() => {
-	    validateType(type);
+	    setTimeout(() => validateType(type), 1);
 	  });
 
 	  $$self.$$set = $$props => {
@@ -12694,7 +12694,7 @@
 	    feedbackurl = ""
 	  } = $$props;
 	  onMount(() => {
-	    validateType(type);
+	    setTimeout(() => validateType(type), 1);
 	  });
 
 	  $$self.$$set = $$props => {
@@ -13732,7 +13732,7 @@
 	  } = $$props;
 	  let show = true;
 	  onMount(() => {
-	    validateType(type);
+	    setTimeout(() => validateType(type), 1);
 	  });
 
 	  function close(e) {
@@ -16425,7 +16425,7 @@
 	    ml = null
 	  } = $$props;
 	  onMount(() => {
-	    validateType(type);
+	    setTimeout(() => validateType(type), 1);
 	    validateSize(size);
 	  });
 
@@ -19062,7 +19062,7 @@
 	    }
 
 	  };
-	} // (148:38) 
+	} // (152:38) 
 
 
 	function create_if_block_3(ctx) {
@@ -19084,7 +19084,7 @@
 	    }
 
 	  };
-	} // (146:36) 
+	} // (150:36) 
 
 
 	function create_if_block_2(ctx) {
@@ -19107,7 +19107,7 @@
 	    }
 
 	  };
-	} // (144:4) {#if _isCurrent}
+	} // (148:4) {#if _isCurrent}
 
 
 	function create_if_block_1(ctx) {
@@ -19129,7 +19129,7 @@
 	    }
 
 	  };
-	} // (156:4) {#if status === "incomplete"}
+	} // (160:4) {#if status === "incomplete"}
 
 
 	function create_if_block(ctx) {
@@ -19221,6 +19221,7 @@
 	      /*arialabel*/
 	      ctx[2]);
 	      attr(label, "role", "listitem");
+	      attr(label, "tabindex", "-1");
 	      attr(label, "for",
 	      /*text*/
 	      ctx[0]);
@@ -19479,10 +19480,10 @@
 	class FormStep extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):focus-within{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
+	    this.shadowRoot.innerHTML = `<style>input[type=checkbox]{position:absolute;left:-9999px}[role="listitem"]{display:flex;box-sizing:border-box;height:100%;text-align:center;flex-direction:column;align-items:center;padding:var(--goa-space-l)}[role="listitem"]:not([aria-disabled="true"]):focus-within,[role="listitem"]:not([aria-disabled="true"]):focus,[role="listitem"]:not([aria-disabled="true"]):active{outline:var(--goa-color-interactive-focus) solid var(--goa-border-width-l)}[role="listitem"]:not([aria-disabled="true"]):hover{background-color:rgba(0,0,0,0.05);cursor:pointer}.status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:999px;border:4px solid var(--goa-color-interactive-default);background:var(--goa-color-greyscale-white);height:2.5rem;width:2.5rem}[aria-current="step"] .text{font-weight:var(--goa-font-weight-bold)
   }[data-status=complete] .status{background-color:var(--goa-color-interactive-default)}[aria-current="step"][data-status=complete] .status{background:var(--goa-color-greyscale-white)}.step-number{margin-bottom:var(--font-valign-fix);font-weight:var(--goa-font-weight-bold);color:var(--goa-color-text-secondary)}[role="listitem"]:not(
-    [data-status=complete], 
-    [data-status=incomplete], 
+    [data-status=complete],
+    [data-status=incomplete],
     [aria-current="step"]
   ) .status{border-color:var(--goa-color-greyscale-500)}.text{font:var(--goa-typography-body-s)}.subtext{margin-top:0.25rem;font:var(--goa-typography-body-xs);color:var(--goa-color-text-secondary)}.details{margin-top:0.75rem}@media(max-width: 639px){[role="listitem"]{flex-direction:row;align-items:center;text-align:start}.details{margin-left:1rem;margin-top:0}}</style>`;
 	    init(this, {