@abgov/react-components 4.0.0-alpha.28 → 4.0.0-alpha.30

package/package.json

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

package/react-components.esm.js

@@ -3850,7 +3850,7 @@ function instance$q($$self, $$props, $$invalidate) {
 class Chip extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--chip-font-size);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;margin:0.25rem;padding:0 0.75rem}.text{padding-bottom:var(--font-valign-fix)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus);background-color:var(--color-white)}.chip:hover{background-color:var(--color-gray-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
+    this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--chip-font-size);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;margin:0.25rem;padding:0 0.75rem;cursor:default}.text{padding-bottom:var(--font-valign-fix)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus);background-color:var(--color-white)}.chip:hover{background-color:var(--color-gray-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -4255,7 +4255,7 @@ function get_each_context$4(ctx, list, i) {
   child_ctx[35] = list[i];
   child_ctx[37] = i;
   return child_ctx;
-} // (175:2) {#if isMenuVisible}
+} // (179:2) {#if isMenuVisible}
 
 
 function create_if_block$d(ctx) {
@@ -4300,7 +4300,7 @@ function create_if_block$d(ctx) {
     }
 
   };
-} // (211:4) {#each options as option, index (option.value)}
+} // (215:4) {#each options as option, index (option.value)}
 
 
 function create_each_block$4(key_1, ctx) {
@@ -4737,6 +4737,11 @@ function instance$o($$self, $$props, $$invalidate) {
   let ctx; // Hooks
 
   onMount(async () => {
+    if (!name) {
+      console.error("goa-dropdown: missing the required `name` attribute. It must match the children's name attribute.");
+      return;
+    }
+
     el.addEventListener("focus", onFocus, true);
     el.addEventListener("blur", onBlur, true); // parse and convert values to strings to avoid later type comparison issues
 
@@ -5124,6 +5129,11 @@ function instance$n($$self, $$props, $$invalidate) {
   let ctx; // Hooks
 
   onMount(async () => {
+    if (!name) {
+      console.error("goa-dropdown-item: missing the required `name` attribute. It must match the parent's name attribute");
+      return;
+    }
+
     ctx = await getContext(name);
     ctx.notify({
       type: BIND$1,
@@ -7541,13 +7551,32 @@ function fly(node, {
 }
 
 function noScroll(_node, opts) {
+  let toggledScrolling = false;
+
   function hideScrollbars() {
+    if (!isScrollable()) {
+      return;
+    }
+
     const scrollbarWidth = calculateScrollbarWidth();
-    document.body.style.overflow = "hidden";
-    document.body.style.paddingRight = scrollbarWidth + "px";
+
+    if (scrollbarWidth > 0) {
+      toggledScrolling = true;
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = scrollbarWidth + "px";
+    }
+  }
+
+  function isScrollable() {
+    return document.body.style.overflow !== "hidden";
   }
 
   function resetScrollbars() {
+    if (!toggledScrolling) {
+      return;
+    }
+
+    toggledScrolling = false;
     setTimeout(() => {
       document.body.style.overflow = "";
       document.body.style.paddingRight = "0";
@@ -7576,9 +7605,7 @@ function noScroll(_node, opts) {
 
   return {
     update() {
-      if (opts.enable) {
-        hideScrollbars();
-      } else {
+      if (!opts.enable) {
         resetScrollbars();
       }
     },
@@ -7619,12 +7646,12 @@ function create_if_block$9(ctx) {
   ctx[0] && create_if_block_3$2(ctx);
   let if_block1 =
   /*isClosable*/
-  ctx[5] && create_if_block_2$4(ctx);
+  ctx[3] && create_if_block_2$4(ctx);
 
   function select_block_type(ctx, dirty) {
     if (
     /*isScrollable*/
-    ctx[7]) return create_if_block_1$5;
+    ctx[6]) return create_if_block_1$5;
     return create_else_block$1;
   }
 
@@ -7657,13 +7684,11 @@ function create_if_block$9(ctx) {
       attr(div3, "class", "modal-pane");
       attr(div4, "data-testid", "modal");
       attr(div4, "class", "modal");
-      attr(div4, "style", div4_style_value = "--scroll-offset: " +
-      /*scrollOffset*/
-      ctx[4] + "px; " + (
+      attr(div4, "style", div4_style_value = "" + ((
       /*width*/
       ctx[2] && `--width: ${
       /*width*/
-      ctx[2]};`) + ";");
+      ctx[2]};`) + ";"));
       set_custom_element_data(goa_focus_trap, "active",
       /*open*/
       ctx[1]);
@@ -7690,10 +7715,10 @@ function create_if_block$9(ctx) {
       if (!mounted) {
         dispose = [listen(div0, "click",
         /*close*/
-        ctx[8]), action_destroyer(noscroll_action = noScroll.call(null, div4, {
+        ctx[7]), action_destroyer(noscroll_action = noScroll.call(null, div4, {
           enable:
           /*isOpen*/
-          ctx[3]
+          ctx[5]
         }))];
         mounted = true;
       }
@@ -7719,7 +7744,7 @@ function create_if_block$9(ctx) {
 
       if (
       /*isClosable*/
-      ctx[5]) {
+      ctx[3]) {
         if (if_block1) {
           if_block1.p(ctx, dirty);
         } else {
@@ -7743,23 +7768,21 @@ function create_if_block$9(ctx) {
       }
 
       if (!current || dirty &
-      /*scrollOffset, width*/
-      20 && div4_style_value !== (div4_style_value = "--scroll-offset: " +
-      /*scrollOffset*/
-      ctx[4] + "px; " + (
+      /*width*/
+      4 && div4_style_value !== (div4_style_value = "" + ((
       /*width*/
       ctx[2] && `--width: ${
       /*width*/
-      ctx[2]};`) + ";")) {
+      ctx[2]};`) + ";"))) {
         attr(div4, "style", div4_style_value);
       }
 
       if (noscroll_action && is_function(noscroll_action.update) && dirty &
       /*isOpen*/
-      8) noscroll_action.update.call(null, {
+      32) noscroll_action.update.call(null, {
         enable:
         /*isOpen*/
-        ctx[3]
+        ctx[5]
       });
 
       if (!current || dirty &
@@ -7778,7 +7801,7 @@ function create_if_block$9(ctx) {
         div3_intro = create_in_transition(div3, fly, {
           duration:
           /*_transitionTime*/
-          ctx[6],
+          ctx[4],
           y: 200
         });
         div3_intro.start();
@@ -7788,7 +7811,7 @@ function create_if_block$9(ctx) {
         div4_intro = create_in_transition(div4, fade, {
           duration:
           /*_transitionTime*/
-          ctx[6]
+          ctx[4]
         });
         div4_intro.start();
       });
@@ -7800,20 +7823,20 @@ function create_if_block$9(ctx) {
       div3_outro = create_out_transition(div3, fly, {
         delay:
         /*_transitionTime*/
-        ctx[6],
+        ctx[4],
         duration:
         /*_transitionTime*/
-        ctx[6],
+        ctx[4],
         y: -100
       });
       if (div4_intro) div4_intro.invalidate();
       div4_outro = create_out_transition(div4, fade, {
         delay:
         /*_transitionTime*/
-        ctx[6],
+        ctx[4],
         duration:
         /*_transitionTime*/
-        ctx[6]
+        ctx[4]
       });
       current = false;
     },
@@ -7830,7 +7853,7 @@ function create_if_block$9(ctx) {
     }
 
   };
-} // (60:8) {#if heading}
+} // (58:8) {#if heading}
 
 
 function create_if_block_3$2(ctx) {
@@ -7864,7 +7887,7 @@ function create_if_block_3$2(ctx) {
     }
 
   };
-} // (63:8) {#if isClosable}
+} // (61:8) {#if isClosable}
 
 
 function create_if_block_2$4(ctx) {
@@ -7888,7 +7911,7 @@ function create_if_block_2$4(ctx) {
       if (!mounted) {
         dispose = listen(goa_icon_button, "click",
         /*close*/
-        ctx[8]);
+        ctx[7]);
         mounted = true;
       }
     },
@@ -7902,7 +7925,7 @@ function create_if_block_2$4(ctx) {
     }
 
   };
-} // (77:10) {:else}
+} // (75:10) {:else}
 
 
 function create_else_block$1(ctx) {
@@ -7923,7 +7946,7 @@ function create_else_block$1(ctx) {
     }
 
   };
-} // (73:10) {#if isScrollable}
+} // (71:10) {#if isScrollable}
 
 
 function create_if_block_1$5(ctx) {
@@ -7953,7 +7976,7 @@ function create_fragment$i(ctx) {
   let current;
   let if_block =
   /*isOpen*/
-  ctx[3] && create_if_block$9(ctx);
+  ctx[5] && create_if_block$9(ctx);
   return {
     c() {
       if (if_block) if_block.c();
@@ -7970,13 +7993,13 @@ function create_fragment$i(ctx) {
     p(ctx, [dirty]) {
       if (
       /*isOpen*/
-      ctx[3]) {
+      ctx[5]) {
         if (if_block) {
           if_block.p(ctx, dirty);
 
           if (dirty &
           /*isOpen*/
-          8) {
+          32) {
             transition_in(if_block, 1);
           }
         } else {
@@ -8038,7 +8061,9 @@ function instance$g($$self, $$props, $$invalidate) {
   let {
     width
   } = $$props;
-  let scrollOffset = 0;
+  onMount(() => {
+    console.log("in the modal v2");
+  });
 
   function close(e) {
     if (!isClosable) {
@@ -8053,66 +8078,56 @@ function instance$g($$self, $$props, $$invalidate) {
 
   $$self.$$set = $$props => {
     if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-    if ('closable' in $$props) $$invalidate(9, closable = $$props.closable);
-    if ('scrollable' in $$props) $$invalidate(10, scrollable = $$props.scrollable);
+    if ('closable' in $$props) $$invalidate(8, closable = $$props.closable);
+    if ('scrollable' in $$props) $$invalidate(9, scrollable = $$props.scrollable);
     if ('open' in $$props) $$invalidate(1, open = $$props.open);
-    if ('transition' in $$props) $$invalidate(11, transition = $$props.transition);
+    if ('transition' in $$props) $$invalidate(10, transition = $$props.transition);
     if ('width' in $$props) $$invalidate(2, width = $$props.width);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*closable*/
-    512) {
-      $$invalidate(5, isClosable = toBoolean(closable));
+    256) {
+      $$invalidate(3, isClosable = toBoolean(closable));
     }
 
     if ($$self.$$.dirty &
     /*scrollable*/
-    1024) {
-      $$invalidate(7, isScrollable = toBoolean(scrollable));
+    512) {
+      $$invalidate(6, isScrollable = toBoolean(scrollable));
     }
 
     if ($$self.$$.dirty &
     /*open*/
     2) {
-      $$invalidate(3, isOpen = toBoolean(open));
-    }
-
-    if ($$self.$$.dirty &
-    /*isOpen*/
-    8) {
-      {
-        if (isOpen) {
-          $$invalidate(4, scrollOffset = window.pageYOffset);
-        }
-      }
+      $$invalidate(5, isOpen = toBoolean(open));
     }
 
     if ($$self.$$.dirty &
     /*transition*/
-    2048) {
-      $$invalidate(6, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
+    1024) {
+      $$invalidate(4, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
     }
   };
 
-  return [heading, open, width, isOpen, scrollOffset, isClosable, _transitionTime, isScrollable, close, closable, scrollable, transition];
+  return [heading, open, width, isClosable, _transitionTime, isOpen, isScrollable, close, closable, scrollable, transition];
 }
 
 class Modal extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:absolute;top:var(--scroll-offset, 0);left:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1 auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1 auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$g, create_fragment$i, safe_not_equal, {
       heading: 0,
-      closable: 9,
-      scrollable: 10,
+      closable: 8,
+      scrollable: 9,
       open: 1,
-      transition: 11,
+      transition: 10,
       width: 2
     }, null);
 
@@ -8144,7 +8159,7 @@ class Modal extends SvelteElement {
   }
 
   get closable() {
-    return this.$$.ctx[9];
+    return this.$$.ctx[8];
   }
 
   set closable(closable) {
@@ -8155,7 +8170,7 @@ class Modal extends SvelteElement {
   }
 
   get scrollable() {
-    return this.$$.ctx[10];
+    return this.$$.ctx[9];
   }
 
   set scrollable(scrollable) {
@@ -8177,7 +8192,7 @@ class Modal extends SvelteElement {
   }
 
   get transition() {
-    return this.$$.ctx[11];
+    return this.$$.ctx[10];
   }
 
   set transition(transition) {
@@ -9064,7 +9079,7 @@ function get_each_context$3(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[14] = list[i];
   return child_ctx;
-} // (51:2) {#each options as option (option.value) }
+} // (55:2) {#each options as option (option.value) }
 
 
 function create_each_block$3(key_1, ctx) {
@@ -9359,6 +9374,11 @@ function instance$d($$self, $$props, $$invalidate) {
   let ctx;
   let el;
   onMount(() => {
+    if (!name) {
+      console.error("goa-radio: missing the required `name` attribute. It must match the children's name attribute.");
+      return;
+    }
+
     ctx = createContext(name);
     ctx.subscribe(msg => {
       switch (msg === null || msg === void 0 ? void 0 : msg.type) {
@@ -9551,6 +9571,11 @@ function instance$c($$self, $$props, $$invalidate) {
   } = $$props;
   let ctx;
   onMount(async () => {
+    if (!name) {
+      console.error("goa-radio-item: missing the required `name` attribute. It must match the parent's name attribute.");
+      return;
+    }
+
     ctx = await getContext(name);
     ctx.notify({
       type: BIND,

package/react-components.umd.js

@@ -3906,7 +3906,7 @@
 	class Chip extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--chip-font-size);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;margin:0.25rem;padding:0 0.75rem}.text{padding-bottom:var(--font-valign-fix)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus);background-color:var(--color-white)}.chip:hover{background-color:var(--color-gray-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>.leading-icon{margin-left:-0.25rem}.chip{vertical-align:middle;align-items:center;background-color:var(--color-white);border-radius:99px;border:1px solid #949494;box-sizing:border-box;color:var(--goa-color-text);display:inline-flex;flex-direction:row;font-size:var(--chip-font-size);font-weight:var(--fw-regular);gap:0.25rem;height:2rem;justify-content:center;margin:0.25rem;padding:0 0.75rem;cursor:default}.text{padding-bottom:var(--font-valign-fix)}.chip:focus{outline:2px solid var(--goa-color-interactive--focus);background-color:var(--color-white)}.chip:hover{background-color:var(--color-gray-200)}.deletable{cursor:pointer}.delete-icon{margin-right:-0.25rem}.error,.error:hover{background-color:var(--goa-color-status-emergency-light)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -4294,7 +4294,7 @@
 	  child_ctx[35] = list[i];
 	  child_ctx[37] = i;
 	  return child_ctx;
-	} // (175:2) {#if isMenuVisible}
+	} // (179:2) {#if isMenuVisible}
 
 
 	function create_if_block$d(ctx) {
@@ -4339,7 +4339,7 @@
 	    }
 
 	  };
-	} // (211:4) {#each options as option, index (option.value)}
+	} // (215:4) {#each options as option, index (option.value)}
 
 
 	function create_each_block$4(key_1, ctx) {
@@ -4792,6 +4792,11 @@
 	  let ctx; // Hooks
 
 	  onMount(_async(function () {
+	    if (!name) {
+	      console.error("goa-dropdown: missing the required `name` attribute. It must match the children's name attribute.");
+	      return;
+	    }
+
 	    el.addEventListener("focus", onFocus, true);
 	    el.addEventListener("blur", onBlur, true); // parse and convert values to strings to avoid later type comparison issues
 
@@ -5164,7 +5169,12 @@
 
 	  let ctx; // Hooks
 
-	  onMount(function () {
+	  onMount(_async(function () {
+	    if (!name) {
+	      console.error("goa-dropdown-item: missing the required `name` attribute. It must match the parent's name attribute");
+	      return;
+	    }
+
 	    return _await(getContext(name), function (_getContext2) {
 	      ctx = _getContext2;
 	      ctx.notify({
@@ -5174,7 +5184,7 @@
 	        value
 	      });
 	    });
-	  });
+	  }));
 
 	  $$self.$$set = $$props => {
 	    if ('name' in $$props) $$invalidate(0, name = $$props.name);
@@ -7584,13 +7594,32 @@
 	}
 
 	function noScroll(_node, opts) {
+	  let toggledScrolling = false;
+
 	  function hideScrollbars() {
+	    if (!isScrollable()) {
+	      return;
+	    }
+
 	    const scrollbarWidth = calculateScrollbarWidth();
-	    document.body.style.overflow = "hidden";
-	    document.body.style.paddingRight = scrollbarWidth + "px";
+
+	    if (scrollbarWidth > 0) {
+	      toggledScrolling = true;
+	      document.body.style.overflow = "hidden";
+	      document.body.style.paddingRight = scrollbarWidth + "px";
+	    }
+	  }
+
+	  function isScrollable() {
+	    return document.body.style.overflow !== "hidden";
 	  }
 
 	  function resetScrollbars() {
+	    if (!toggledScrolling) {
+	      return;
+	    }
+
+	    toggledScrolling = false;
 	    setTimeout(() => {
 	      document.body.style.overflow = "";
 	      document.body.style.paddingRight = "0";
@@ -7619,9 +7648,7 @@
 
 	  return {
 	    update() {
-	      if (opts.enable) {
-	        hideScrollbars();
-	      } else {
+	      if (!opts.enable) {
 	        resetScrollbars();
 	      }
 	    },
@@ -7662,12 +7689,12 @@
 	  ctx[0] && create_if_block_3$2(ctx);
 	  let if_block1 =
 	  /*isClosable*/
-	  ctx[5] && create_if_block_2$4(ctx);
+	  ctx[3] && create_if_block_2$4(ctx);
 
 	  function select_block_type(ctx, dirty) {
 	    if (
 	    /*isScrollable*/
-	    ctx[7]) return create_if_block_1$5;
+	    ctx[6]) return create_if_block_1$5;
 	    return create_else_block$1;
 	  }
 
@@ -7700,13 +7727,11 @@
 	      attr(div3, "class", "modal-pane");
 	      attr(div4, "data-testid", "modal");
 	      attr(div4, "class", "modal");
-	      attr(div4, "style", div4_style_value = "--scroll-offset: " +
-	      /*scrollOffset*/
-	      ctx[4] + "px; " + (
+	      attr(div4, "style", div4_style_value = "" + ((
 	      /*width*/
 	      ctx[2] && `--width: ${
       /*width*/
-      ctx[2]};`) + ";");
+      ctx[2]};`) + ";"));
 	      set_custom_element_data(goa_focus_trap, "active",
 	      /*open*/
 	      ctx[1]);
@@ -7733,10 +7758,10 @@
 	      if (!mounted) {
 	        dispose = [listen(div0, "click",
 	        /*close*/
-	        ctx[8]), action_destroyer(noscroll_action = noScroll.call(null, div4, {
+	        ctx[7]), action_destroyer(noscroll_action = noScroll.call(null, div4, {
 	          enable:
 	          /*isOpen*/
-	          ctx[3]
+	          ctx[5]
 	        }))];
 	        mounted = true;
 	      }
@@ -7762,7 +7787,7 @@
 
 	      if (
 	      /*isClosable*/
-	      ctx[5]) {
+	      ctx[3]) {
 	        if (if_block1) {
 	          if_block1.p(ctx, dirty);
 	        } else {
@@ -7786,23 +7811,21 @@
 	      }
 
 	      if (!current || dirty &
-	      /*scrollOffset, width*/
-	      20 && div4_style_value !== (div4_style_value = "--scroll-offset: " +
-	      /*scrollOffset*/
-	      ctx[4] + "px; " + (
+	      /*width*/
+	      4 && div4_style_value !== (div4_style_value = "" + ((
 	      /*width*/
 	      ctx[2] && `--width: ${
       /*width*/
-      ctx[2]};`) + ";")) {
+      ctx[2]};`) + ";"))) {
 	        attr(div4, "style", div4_style_value);
 	      }
 
 	      if (noscroll_action && is_function(noscroll_action.update) && dirty &
 	      /*isOpen*/
-	      8) noscroll_action.update.call(null, {
+	      32) noscroll_action.update.call(null, {
 	        enable:
 	        /*isOpen*/
-	        ctx[3]
+	        ctx[5]
 	      });
 
 	      if (!current || dirty &
@@ -7821,7 +7844,7 @@
 	        div3_intro = create_in_transition(div3, fly, {
 	          duration:
 	          /*_transitionTime*/
-	          ctx[6],
+	          ctx[4],
 	          y: 200
 	        });
 	        div3_intro.start();
@@ -7831,7 +7854,7 @@
 	        div4_intro = create_in_transition(div4, fade, {
 	          duration:
 	          /*_transitionTime*/
-	          ctx[6]
+	          ctx[4]
 	        });
 	        div4_intro.start();
 	      });
@@ -7843,20 +7866,20 @@
 	      div3_outro = create_out_transition(div3, fly, {
 	        delay:
 	        /*_transitionTime*/
-	        ctx[6],
+	        ctx[4],
 	        duration:
 	        /*_transitionTime*/
-	        ctx[6],
+	        ctx[4],
 	        y: -100
 	      });
 	      if (div4_intro) div4_intro.invalidate();
 	      div4_outro = create_out_transition(div4, fade, {
 	        delay:
 	        /*_transitionTime*/
-	        ctx[6],
+	        ctx[4],
 	        duration:
 	        /*_transitionTime*/
-	        ctx[6]
+	        ctx[4]
 	      });
 	      current = false;
 	    },
@@ -7873,7 +7896,7 @@
 	    }
 
 	  };
-	} // (60:8) {#if heading}
+	} // (58:8) {#if heading}
 
 
 	function create_if_block_3$2(ctx) {
@@ -7907,7 +7930,7 @@
 	    }
 
 	  };
-	} // (63:8) {#if isClosable}
+	} // (61:8) {#if isClosable}
 
 
 	function create_if_block_2$4(ctx) {
@@ -7931,7 +7954,7 @@
 	      if (!mounted) {
 	        dispose = listen(goa_icon_button, "click",
 	        /*close*/
-	        ctx[8]);
+	        ctx[7]);
 	        mounted = true;
 	      }
 	    },
@@ -7945,7 +7968,7 @@
 	    }
 
 	  };
-	} // (77:10) {:else}
+	} // (75:10) {:else}
 
 
 	function create_else_block$1(ctx) {
@@ -7966,7 +7989,7 @@
 	    }
 
 	  };
-	} // (73:10) {#if isScrollable}
+	} // (71:10) {#if isScrollable}
 
 
 	function create_if_block_1$5(ctx) {
@@ -7996,7 +8019,7 @@
 	  let current;
 	  let if_block =
 	  /*isOpen*/
-	  ctx[3] && create_if_block$9(ctx);
+	  ctx[5] && create_if_block$9(ctx);
 	  return {
 	    c() {
 	      if (if_block) if_block.c();
@@ -8013,13 +8036,13 @@
 	    p(ctx, [dirty]) {
 	      if (
 	      /*isOpen*/
-	      ctx[3]) {
+	      ctx[5]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 
 	          if (dirty &
 	          /*isOpen*/
-	          8) {
+	          32) {
 	            transition_in(if_block, 1);
 	          }
 	        } else {
@@ -8081,7 +8104,9 @@
 	  let {
 	    width
 	  } = $$props;
-	  let scrollOffset = 0;
+	  onMount(() => {
+	    console.log("in the modal v2");
+	  });
 
 	  function close(e) {
 	    if (!isClosable) {
@@ -8096,66 +8121,56 @@
 
 	  $$self.$$set = $$props => {
 	    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
-	    if ('closable' in $$props) $$invalidate(9, closable = $$props.closable);
-	    if ('scrollable' in $$props) $$invalidate(10, scrollable = $$props.scrollable);
+	    if ('closable' in $$props) $$invalidate(8, closable = $$props.closable);
+	    if ('scrollable' in $$props) $$invalidate(9, scrollable = $$props.scrollable);
 	    if ('open' in $$props) $$invalidate(1, open = $$props.open);
-	    if ('transition' in $$props) $$invalidate(11, transition = $$props.transition);
+	    if ('transition' in $$props) $$invalidate(10, transition = $$props.transition);
 	    if ('width' in $$props) $$invalidate(2, width = $$props.width);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*closable*/
-	    512) {
-	      $$invalidate(5, isClosable = toBoolean(closable));
+	    256) {
+	      $$invalidate(3, isClosable = toBoolean(closable));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*scrollable*/
-	    1024) {
-	      $$invalidate(7, isScrollable = toBoolean(scrollable));
+	    512) {
+	      $$invalidate(6, isScrollable = toBoolean(scrollable));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*open*/
 	    2) {
-	      $$invalidate(3, isOpen = toBoolean(open));
-	    }
-
-	    if ($$self.$$.dirty &
-	    /*isOpen*/
-	    8) {
-	      {
-	        if (isOpen) {
-	          $$invalidate(4, scrollOffset = window.pageYOffset);
-	        }
-	      }
+	      $$invalidate(5, isOpen = toBoolean(open));
 	    }
 
 	    if ($$self.$$.dirty &
 	    /*transition*/
-	    2048) {
-	      $$invalidate(6, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
+	    1024) {
+	      $$invalidate(4, _transitionTime = transition === "none" ? 0 : transition === "slow" ? 400 : 200);
 	    }
 	  };
 
-	  return [heading, open, width, isOpen, scrollOffset, isClosable, _transitionTime, isScrollable, close, closable, scrollable, transition];
+	  return [heading, open, width, isClosable, _transitionTime, isOpen, isScrollable, close, closable, scrollable, transition];
 	}
 
 	class Modal extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:absolute;top:var(--scroll-offset, 0);left:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1 auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.modal{font-family:var(--font-family);position:fixed;inset:0;display:flex;align-items:center;justify-content:center;height:100vh;width:100%;z-index:100}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.2);z-index:1000}.modal-pane{position:relative;background-color:#fff;z-index:1001;width:90%;margin:1rem;box-shadow:var(--shadow-2);border-radius:4px;max-height:90%}@media(min-width: 640px){.modal-pane{width:var(--width, 60ch);max-height:80%}}.modal-actions{text-align:right;padding:0 1.75rem;margin:1.75rem 0;flex:1 1 auto}.modal-close{position:absolute;top:1rem;right:1rem}.modal-title{font-size:var(--fs-xl);padding-bottom:1rem;padding:0 1.75rem;margin:1.75rem 0;margin-right:40px;flex:0 0 auto}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$g, create_fragment$i, safe_not_equal, {
 	      heading: 0,
-	      closable: 9,
-	      scrollable: 10,
+	      closable: 8,
+	      scrollable: 9,
 	      open: 1,
-	      transition: 11,
+	      transition: 10,
 	      width: 2
 	    }, null);
 
@@ -8187,7 +8202,7 @@
 	  }
 
 	  get closable() {
-	    return this.$$.ctx[9];
+	    return this.$$.ctx[8];
 	  }
 
 	  set closable(closable) {
@@ -8198,7 +8213,7 @@
 	  }
 
 	  get scrollable() {
-	    return this.$$.ctx[10];
+	    return this.$$.ctx[9];
 	  }
 
 	  set scrollable(scrollable) {
@@ -8220,7 +8235,7 @@
 	  }
 
 	  get transition() {
-	    return this.$$.ctx[11];
+	    return this.$$.ctx[10];
 	  }
 
 	  set transition(transition) {
@@ -9108,7 +9123,7 @@
 	  const child_ctx = ctx.slice();
 	  child_ctx[14] = list[i];
 	  return child_ctx;
-	} // (51:2) {#each options as option (option.value) }
+	} // (55:2) {#each options as option (option.value) }
 
 
 	function create_each_block$3(key_1, ctx) {
@@ -9403,6 +9418,11 @@
 	  let ctx;
 	  let el;
 	  onMount(() => {
+	    if (!name) {
+	      console.error("goa-radio: missing the required `name` attribute. It must match the children's name attribute.");
+	      return;
+	    }
+
 	    ctx = createContext(name);
 	    ctx.subscribe(msg => {
 	      switch (msg === null || msg === void 0 ? void 0 : msg.type) {
@@ -9594,7 +9614,12 @@
 	    name
 	  } = $$props;
 	  let ctx;
-	  onMount(function () {
+	  onMount(_async(function () {
+	    if (!name) {
+	      console.error("goa-radio-item: missing the required `name` attribute. It must match the parent's name attribute.");
+	      return;
+	    }
+
 	    return _await(getContext(name), function (_getContext3) {
 	      ctx = _getContext3;
 	      ctx.notify({
@@ -9603,7 +9628,7 @@
 	        label
 	      });
 	    });
-	  });
+	  }));
 
 	  $$self.$$set = $$props => {
 	    if ('value' in $$props) $$invalidate(0, value = $$props.value);