@abgov/react-components 4.0.0-alpha.142 → 4.0.0-alpha.144

package/lib/popover/popover.d.ts

@@ -1,5 +1,6 @@
 import React, { FC, ReactNode } from "react";
-interface WCProps {
+import { Margins } from "../../common/styling";
+interface WCProps extends Margins {
     maxwidth?: string;
     padded?: boolean;
 }
@@ -10,7 +11,7 @@ declare global {
         }
     }
 }
-interface Props {
+interface Props extends Margins {
     target?: ReactNode;
     testId?: string;
     maxWidth?: string;

package/package.json

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

package/react-components.esm.js

@@ -12361,35 +12361,25 @@ customElements.define("goa-input", Input);
 /* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.51.0 */
 
 function create_if_block_3$5(ctx) {
-  let div0;
-  let t0;
-  let div1;
+  let div;
   return {
     c() {
-      div0 = element("div");
-      div0.innerHTML = `<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 26C20.1797 26 26 20.1797 26 13C26 5.8203 20.1797 0 13 0C5.8203 0 0 5.8203 0 13C0 20.1797 5.8203 26 13 26Z" fill="#00AAD2"></path><path d="M16.9764 17.7174C15.942 17.3358 14.9325 16.8896 13.9539 16.3817C14.8446 16.0551 15.7131 15.6708 16.5539 15.2312C16.6398 16.0688 16.7831 16.8995 16.9829 17.7174H16.9764ZM22.5339 7.42143C22.1016 7.36618 22.3259 7.56931 22.2089 8.13968C21.863 9.3075 21.2806 10.3917 20.4978 11.3248C19.7151 12.258 18.7487 13.0201 17.6589 13.5639C17.3972 10.9368 17.5336 8.28529 18.0635 5.69893C18.5104 4.07393 19.0385 4.3778 18.3885 4.03818C17.6946 3.68068 16.9471 4.15356 16.3443 5.35931C14.4174 9.81946 11.7695 13.932 8.50689 17.5322C7.96404 18.2422 7.16875 18.7161 6.28592 18.8556C5.40309 18.9951 4.50044 18.7894 3.76514 18.2813C3.43039 17.9986 3.30689 18.4357 3.72289 18.8826C4.47366 19.5882 5.47211 19.9699 6.50216 19.945C7.53222 19.92 8.51102 19.4905 9.22677 18.7493C12.0405 15.3939 14.429 11.7038 16.3378 7.76268C16.1901 9.91268 16.2243 12.0713 16.4401 14.2156C15.4158 14.7181 14.3475 15.1256 13.2486 15.4327C12.6181 15.5952 12.2281 15.8552 12.2168 16.1461C12.2054 16.4711 12.6279 16.7359 13.2405 17.0252C14.3293 17.5419 17.5191 19.0499 18.3056 19.5066C18.9784 19.8966 19.3066 19.5927 19.5065 19.1702C19.7665 18.6209 19.0531 18.3041 18.369 18.0961C18.0632 16.9353 17.8555 15.7508 17.7483 14.5552C19.4404 13.5939 20.8636 12.2226 21.8871 10.5674C22.1817 9.98406 22.4001 9.36529 22.5371 8.7263C22.6338 8.3321 22.6602 7.92393 22.6151 7.52056C22.6151 7.52056 22.6038 7.43281 22.5371 7.42468" fill="white"></path></svg>`;
-      t0 = space();
-      div1 = element("div");
-      div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
-      attr(div0, "class", "service-type service-type--live");
-      attr(div1, "data-testid", "type");
-      attr(div1, "class", "site-text");
+      div = element("div");
+      div.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
+      attr(div, "data-testid", "type");
+      attr(div, "class", "site-text");
     },
 
     m(target, anchor) {
-      insert(target, div0, anchor);
-      insert(target, t0, anchor);
-      insert(target, div1, anchor);
+      insert(target, div, anchor);
     },
 
     d(detaching) {
-      if (detaching) detach(div0);
-      if (detaching) detach(t0);
-      if (detaching) detach(div1);
+      if (detaching) detach(div);
     }
 
   };
-} // (41:2) {#if ["alpha", "beta"].includes(type)}
+} // (29:2) {#if ["alpha", "beta"].includes(type)}
 
 
 function create_if_block_1$5(ctx) {
@@ -12477,7 +12467,7 @@ function create_if_block_1$5(ctx) {
     }
 
   };
-} // (50:6) {#if feedbackurl}
+} // (38:6) {#if feedbackurl}
 
 
 function create_if_block_2$5(ctx) {
@@ -12519,7 +12509,7 @@ function create_if_block_2$5(ctx) {
     }
 
   };
-} // (56:2) {#if version}
+} // (44:2) {#if version}
 
 
 function create_if_block$b(ctx) {
@@ -12691,7 +12681,7 @@ function instance$k($$self, $$props, $$invalidate) {
 class MicrositeHeader extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);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(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);align-items:center;justify-content:space-between;padding:0.25rem 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-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);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(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);align-items:center;justify-content:space-between;padding:0.25rem 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-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -14549,11 +14539,11 @@ function create_if_block$7(ctx) {
       ctx[1]);
       set_style(section, "padding",
       /*paddedContent*/
-      ctx[4] ? 'var(--goa-space-m)' : '0');
+      ctx[9] ? 'var(--goa-space-m)' : '0');
       attr(div1, "class", "popover-container");
       set_custom_element_data(goa_focus_trap, "active",
       /*_isContentVisible*/
-      ctx[2]);
+      ctx[6]);
     },
 
     m(target, anchor) {
@@ -14563,11 +14553,14 @@ function create_if_block$7(ctx) {
       append(goa_focus_trap, div1);
       append(div1, section);
       append(section, slot);
+      /*section_binding*/
+
+      ctx[14](section);
 
       if (!mounted) {
         dispose = listen(div0, "click",
         /*closePopover*/
-        ctx[6]);
+        ctx[11]);
         mounted = true;
       }
     },
@@ -14583,23 +14576,26 @@ function create_if_block$7(ctx) {
 
       if (dirty &
       /*paddedContent*/
-      16) {
+      512) {
         set_style(section, "padding",
         /*paddedContent*/
-        ctx[4] ? 'var(--goa-space-m)' : '0');
+        ctx[9] ? 'var(--goa-space-m)' : '0');
       }
 
       if (dirty &
       /*_isContentVisible*/
-      4) {
+      64) {
         set_custom_element_data(goa_focus_trap, "active",
         /*_isContentVisible*/
-        ctx[2]);
+        ctx[6]);
       }
     },
 
     d(detaching) {
       if (detaching) detach(goa_focus_trap);
+      /*section_binding*/
+
+      ctx[14](null);
       mounted = false;
       dispose();
     }
@@ -14611,11 +14607,12 @@ function create_fragment$h(ctx) {
   let div1;
   let div0;
   let t;
+  let div1_style_value;
   let mounted;
   let dispose;
   let if_block =
   /*_isContentVisible*/
-  ctx[2] && create_if_block$7(ctx);
+  ctx[6] && create_if_block$7(ctx);
   return {
     c() {
       div1 = element("div");
@@ -14630,6 +14627,15 @@ function create_fragment$h(ctx) {
       attr(div1, "data-testid",
       /*testid*/
       ctx[0]);
+      attr(div1, "style", div1_style_value = calculateMargin(
+      /*mt*/
+      ctx[2],
+      /*mr*/
+      ctx[3],
+      /*mb*/
+      ctx[4],
+      /*ml*/
+      ctx[5]));
     },
 
     m(target, anchor) {
@@ -14637,14 +14643,14 @@ function create_fragment$h(ctx) {
       append(div1, div0);
       /*div0_binding*/
 
-      ctx[8](div0);
+      ctx[13](div0);
       append(div1, t);
       if (if_block) if_block.m(div1, null);
 
       if (!mounted) {
         dispose = listen(div0, "click",
         /*showPopover*/
-        ctx[5]);
+        ctx[10]);
         mounted = true;
       }
     },
@@ -14652,7 +14658,7 @@ function create_fragment$h(ctx) {
     p(ctx, [dirty]) {
       if (
       /*_isContentVisible*/
-      ctx[2]) {
+      ctx[6]) {
         if (if_block) {
           if_block.p(ctx, dirty);
         } else {
@@ -14672,6 +14678,20 @@ function create_fragment$h(ctx) {
         /*testid*/
         ctx[0]);
       }
+
+      if (dirty &
+      /*mt, mr, mb, ml*/
+      60 && div1_style_value !== (div1_style_value = calculateMargin(
+      /*mt*/
+      ctx[2],
+      /*mr*/
+      ctx[3],
+      /*mb*/
+      ctx[4],
+      /*ml*/
+      ctx[5]))) {
+        attr(div1, "style", div1_style_value);
+      }
     },
 
     i: noop,
@@ -14681,7 +14701,7 @@ function create_fragment$h(ctx) {
       if (detaching) detach(div1);
       /*div0_binding*/
 
-      ctx[8](null);
+      ctx[13](null);
       if (if_block) if_block.d();
       mounted = false;
       dispose();
@@ -14690,6 +14710,25 @@ function create_fragment$h(ctx) {
   };
 }
 
+function getBoundingClientRectWithMargins(el) {
+  const rect = el.getBoundingClientRect();
+  const style = window.getComputedStyle(el);
+  const mTop = parseInt(style.marginTop, 10) || 0;
+  const mRight = parseInt(style.marginRight, 10) || 0;
+  const mBottom = parseInt(style.marginBottom, 10) || 0;
+  const mLeft = parseInt(style.marginLeft, 10) || 0;
+  return {
+    top: rect.top - mTop,
+    right: rect.right + mRight,
+    bottom: rect.bottom + mBottom,
+    left: rect.left - mLeft,
+    width: rect.width + mLeft + mRight,
+    height: rect.height + mTop + mBottom,
+    x: rect.x - mLeft,
+    y: rect.y - mTop
+  };
+}
+
 function instance$f($$self, $$props, $$invalidate) {
   let paddedContent;
   let {
@@ -14705,6 +14744,20 @@ function instance$f($$self, $$props, $$invalidate) {
 
   let _targetEl;
 
+  let _popoverEl;
+
+  let {
+    mt = null
+  } = $$props;
+  let {
+    mr = null
+  } = $$props;
+  let {
+    mb = null
+  } = $$props;
+  let {
+    ml = null
+  } = $$props;
   onMount(async () => {
     await tick();
     addFocusEventListener();
@@ -14713,12 +14766,14 @@ function instance$f($$self, $$props, $$invalidate) {
     removeEventListeners();
   });
 
-  function showPopover() {
-    $$invalidate(2, _isContentVisible = true);
+  async function showPopover() {
+    $$invalidate(6, _isContentVisible = true);
+    await tick();
+    setPopoverPosition();
   }
 
   function closePopover() {
-    $$invalidate(2, _isContentVisible = false);
+    $$invalidate(6, _isContentVisible = false);
   }
 
   const onInputKeyDown = e => {
@@ -14736,6 +14791,30 @@ function instance$f($$self, $$props, $$invalidate) {
     }
   };
 
+  function setPopoverPosition() {
+    // Get target and content rectangles
+    const targetRect = getBoundingClientRectWithMargins(_targetEl);
+    const contentRect = getBoundingClientRectWithMargins(_popoverEl); // Calculate available space above and below the target element
+
+    const spaceAbove = targetRect.top;
+    const spaceBelow = window.innerHeight - targetRect.bottom; // Determine if there's more space above or below the target element
+
+    const displayAbove = spaceAbove > contentRect.height && spaceAbove > spaceBelow && spaceBelow < contentRect.height; // If there's more space above, display the popover above the target element
+
+    if (displayAbove) {
+      $$invalidate(8, _popoverEl.style.top = `${-contentRect.height - targetRect.height - 4}px`, _popoverEl);
+    } else {
+      $$invalidate(8, _popoverEl.style.top = '0px', _popoverEl);
+    } // Move the popover to the left if it is too far to the right and only if there is space to the left
+
+
+    if (window.innerWidth - targetRect.right < contentRect.width && targetRect.left > contentRect.width) {
+      $$invalidate(8, _popoverEl.style.left = `-${contentRect.width - targetRect.width}px`, _popoverEl);
+    } else {
+      $$invalidate(8, _popoverEl.style.left = '0px', _popoverEl);
+    }
+  }
+
   function addFocusEventListener() {
     _targetEl.addEventListener("focus", onFocus, true);
   }
@@ -14754,31 +14833,42 @@ function instance$f($$self, $$props, $$invalidate) {
   function div0_binding($$value) {
     binding_callbacks[$$value ? 'unshift' : 'push'](() => {
       _targetEl = $$value;
-      $$invalidate(3, _targetEl);
+      $$invalidate(7, _targetEl);
+    });
+  }
+
+  function section_binding($$value) {
+    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+      _popoverEl = $$value;
+      $$invalidate(8, _popoverEl);
     });
   }
 
   $$self.$$set = $$props => {
     if ('testid' in $$props) $$invalidate(0, testid = $$props.testid);
     if ('maxwidth' in $$props) $$invalidate(1, maxwidth = $$props.maxwidth);
-    if ('padded' in $$props) $$invalidate(7, padded = $$props.padded);
+    if ('padded' in $$props) $$invalidate(12, padded = $$props.padded);
+    if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
+    if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
+    if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
+    if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
   };
 
   $$self.$$.update = () => {
     if ($$self.$$.dirty &
     /*padded*/
-    128) {
-      $$invalidate(4, paddedContent = toBoolean(padded));
+    4096) {
+      $$invalidate(9, paddedContent = toBoolean(padded));
     }
   };
 
-  return [testid, maxwidth, _isContentVisible, _targetEl, paddedContent, showPopover, closePopover, padded, div0_binding];
+  return [testid, maxwidth, mt, mr, mb, ml, _isContentVisible, _targetEl, _popoverEl, paddedContent, showPopover, closePopover, padded, div0_binding, section_binding];
 }
 
 class Popover 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)}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}.popover-content{position:absolute;left:0;right:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--goa-border-radius-m);outline:none;box-shadow:var(--shadow-1);z-index:99}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}.popover-container{position:relative}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}.popover-content{position:absolute;left:0;right:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);outline:none;filter:drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));z-index:99;width:max-content}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}.popover-container{position:relative}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -14786,7 +14876,11 @@ class Popover extends SvelteElement {
     }, instance$f, create_fragment$h, safe_not_equal, {
       testid: 0,
       maxwidth: 1,
-      padded: 7
+      padded: 12,
+      mt: 2,
+      mr: 3,
+      mb: 4,
+      ml: 5
     }, null);
 
     if (options) {
@@ -14802,7 +14896,7 @@ class Popover extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["testid", "maxwidth", "padded"];
+    return ["testid", "maxwidth", "padded", "mt", "mr", "mb", "ml"];
   }
 
   get testid() {
@@ -14828,7 +14922,7 @@ class Popover extends SvelteElement {
   }
 
   get padded() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[12];
   }
 
   set padded(padded) {
@@ -14838,6 +14932,50 @@ class Popover extends SvelteElement {
     flush();
   }
 
+  get mt() {
+    return this.$$.ctx[2];
+  }
+
+  set mt(mt) {
+    this.$$set({
+      mt
+    });
+    flush();
+  }
+
+  get mr() {
+    return this.$$.ctx[3];
+  }
+
+  set mr(mr) {
+    this.$$set({
+      mr
+    });
+    flush();
+  }
+
+  get mb() {
+    return this.$$.ctx[4];
+  }
+
+  set mb(mb) {
+    this.$$set({
+      mb
+    });
+    flush();
+  }
+
+  get ml() {
+    return this.$$.ctx[5];
+  }
+
+  set ml(ml) {
+    this.$$set({
+      ml
+    });
+    flush();
+  }
+
 }
 
 customElements.define("goa-popover", Popover);
@@ -22862,12 +23000,20 @@ const GoAPopover = ({
   testId,
   maxWidth,
   padded,
-  children
+  children,
+  mt,
+  mr,
+  mb,
+  ml
 }) => {
   return jsxs("goa-popover", Object.assign({
     "data-testid": testId,
     maxwidth: maxWidth,
-    padded: padded
+    padded: padded,
+    mt: mt,
+    mr: mr,
+    mb: mb,
+    ml: ml
   }, {
     children: [children, target && jsx("div", Object.assign({
       slot: "target"

package/react-components.umd.js

@@ -12407,35 +12407,25 @@
 	/* libs/web-components/src/components/microsite-header/MicrositeHeader.svelte generated by Svelte v3.51.0 */
 
 	function create_if_block_3$5(ctx) {
-	  let div0;
-	  let t0;
-	  let div1;
+	  let div;
 	  return {
 	    c() {
-	      div0 = element("div");
-	      div0.innerHTML = `<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 26C20.1797 26 26 20.1797 26 13C26 5.8203 20.1797 0 13 0C5.8203 0 0 5.8203 0 13C0 20.1797 5.8203 26 13 26Z" fill="#00AAD2"></path><path d="M16.9764 17.7174C15.942 17.3358 14.9325 16.8896 13.9539 16.3817C14.8446 16.0551 15.7131 15.6708 16.5539 15.2312C16.6398 16.0688 16.7831 16.8995 16.9829 17.7174H16.9764ZM22.5339 7.42143C22.1016 7.36618 22.3259 7.56931 22.2089 8.13968C21.863 9.3075 21.2806 10.3917 20.4978 11.3248C19.7151 12.258 18.7487 13.0201 17.6589 13.5639C17.3972 10.9368 17.5336 8.28529 18.0635 5.69893C18.5104 4.07393 19.0385 4.3778 18.3885 4.03818C17.6946 3.68068 16.9471 4.15356 16.3443 5.35931C14.4174 9.81946 11.7695 13.932 8.50689 17.5322C7.96404 18.2422 7.16875 18.7161 6.28592 18.8556C5.40309 18.9951 4.50044 18.7894 3.76514 18.2813C3.43039 17.9986 3.30689 18.4357 3.72289 18.8826C4.47366 19.5882 5.47211 19.9699 6.50216 19.945C7.53222 19.92 8.51102 19.4905 9.22677 18.7493C12.0405 15.3939 14.429 11.7038 16.3378 7.76268C16.1901 9.91268 16.2243 12.0713 16.4401 14.2156C15.4158 14.7181 14.3475 15.1256 13.2486 15.4327C12.6181 15.5952 12.2281 15.8552 12.2168 16.1461C12.2054 16.4711 12.6279 16.7359 13.2405 17.0252C14.3293 17.5419 17.5191 19.0499 18.3056 19.5066C18.9784 19.8966 19.3066 19.5927 19.5065 19.1702C19.7665 18.6209 19.0531 18.3041 18.369 18.0961C18.0632 16.9353 17.8555 15.7508 17.7483 14.5552C19.4404 13.5939 20.8636 12.2226 21.8871 10.5674C22.1817 9.98406 22.4001 9.36529 22.5371 8.7263C22.6338 8.3321 22.6602 7.92393 22.6151 7.52056C22.6151 7.52056 22.6038 7.43281 22.5371 7.42468" fill="white"></path></svg>`;
-	      t0 = space();
-	      div1 = element("div");
-	      div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
-	      attr(div0, "class", "service-type service-type--live");
-	      attr(div1, "data-testid", "type");
-	      attr(div1, "class", "site-text");
+	      div = element("div");
+	      div.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
+	      attr(div, "data-testid", "type");
+	      attr(div, "class", "site-text");
 	    },
 
 	    m(target, anchor) {
-	      insert(target, div0, anchor);
-	      insert(target, t0, anchor);
-	      insert(target, div1, anchor);
+	      insert(target, div, anchor);
 	    },
 
 	    d(detaching) {
-	      if (detaching) detach(div0);
-	      if (detaching) detach(t0);
-	      if (detaching) detach(div1);
+	      if (detaching) detach(div);
 	    }
 
 	  };
-	} // (41:2) {#if ["alpha", "beta"].includes(type)}
+	} // (29:2) {#if ["alpha", "beta"].includes(type)}
 
 
 	function create_if_block_1$5(ctx) {
@@ -12523,7 +12513,7 @@
 	    }
 
 	  };
-	} // (50:6) {#if feedbackurl}
+	} // (38:6) {#if feedbackurl}
 
 
 	function create_if_block_2$5(ctx) {
@@ -12565,7 +12555,7 @@
 	    }
 
 	  };
-	} // (56:2) {#if version}
+	} // (44:2) {#if version}
 
 
 	function create_if_block$b(ctx) {
@@ -12737,7 +12727,7 @@
 	class MicrositeHeader extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);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(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);align-items:center;justify-content:space-between;padding:0.25rem 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-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}a{color:var(--goa-color-interactive-default);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(--goa-font-size-2);background-color:var(--goa-color-greyscale-100);align-items:center;justify-content:space-between;padding:0.25rem 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-type{font-weight:bold;padding:0.125rem 0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-warning-default);color:var(--goa-color-text-default)}.service-type--beta{background-color:var(--goa-color-brand-default);color:var(--goa-color-text-light)}.site-text{color:var(--goa-color-text-default);line-height:1.25rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -14597,11 +14587,11 @@
 	      ctx[1]);
 	      set_style(section, "padding",
 	      /*paddedContent*/
-	      ctx[4] ? 'var(--goa-space-m)' : '0');
+	      ctx[9] ? 'var(--goa-space-m)' : '0');
 	      attr(div1, "class", "popover-container");
 	      set_custom_element_data(goa_focus_trap, "active",
 	      /*_isContentVisible*/
-	      ctx[2]);
+	      ctx[6]);
 	    },
 
 	    m(target, anchor) {
@@ -14611,11 +14601,14 @@
 	      append(goa_focus_trap, div1);
 	      append(div1, section);
 	      append(section, slot);
+	      /*section_binding*/
+
+	      ctx[14](section);
 
 	      if (!mounted) {
 	        dispose = listen(div0, "click",
 	        /*closePopover*/
-	        ctx[6]);
+	        ctx[11]);
 	        mounted = true;
 	      }
 	    },
@@ -14631,23 +14624,26 @@
 
 	      if (dirty &
 	      /*paddedContent*/
-	      16) {
+	      512) {
 	        set_style(section, "padding",
 	        /*paddedContent*/
-	        ctx[4] ? 'var(--goa-space-m)' : '0');
+	        ctx[9] ? 'var(--goa-space-m)' : '0');
 	      }
 
 	      if (dirty &
 	      /*_isContentVisible*/
-	      4) {
+	      64) {
 	        set_custom_element_data(goa_focus_trap, "active",
 	        /*_isContentVisible*/
-	        ctx[2]);
+	        ctx[6]);
 	      }
 	    },
 
 	    d(detaching) {
 	      if (detaching) detach(goa_focus_trap);
+	      /*section_binding*/
+
+	      ctx[14](null);
 	      mounted = false;
 	      dispose();
 	    }
@@ -14659,11 +14655,12 @@
 	  let div1;
 	  let div0;
 	  let t;
+	  let div1_style_value;
 	  let mounted;
 	  let dispose;
 	  let if_block =
 	  /*_isContentVisible*/
-	  ctx[2] && create_if_block$7(ctx);
+	  ctx[6] && create_if_block$7(ctx);
 	  return {
 	    c() {
 	      div1 = element("div");
@@ -14678,6 +14675,15 @@
 	      attr(div1, "data-testid",
 	      /*testid*/
 	      ctx[0]);
+	      attr(div1, "style", div1_style_value = calculateMargin(
+	      /*mt*/
+	      ctx[2],
+	      /*mr*/
+	      ctx[3],
+	      /*mb*/
+	      ctx[4],
+	      /*ml*/
+	      ctx[5]));
 	    },
 
 	    m(target, anchor) {
@@ -14685,14 +14691,14 @@
 	      append(div1, div0);
 	      /*div0_binding*/
 
-	      ctx[8](div0);
+	      ctx[13](div0);
 	      append(div1, t);
 	      if (if_block) if_block.m(div1, null);
 
 	      if (!mounted) {
 	        dispose = listen(div0, "click",
 	        /*showPopover*/
-	        ctx[5]);
+	        ctx[10]);
 	        mounted = true;
 	      }
 	    },
@@ -14700,7 +14706,7 @@
 	    p(ctx, [dirty]) {
 	      if (
 	      /*_isContentVisible*/
-	      ctx[2]) {
+	      ctx[6]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
@@ -14720,6 +14726,20 @@
 	        /*testid*/
 	        ctx[0]);
 	      }
+
+	      if (dirty &
+	      /*mt, mr, mb, ml*/
+	      60 && div1_style_value !== (div1_style_value = calculateMargin(
+	      /*mt*/
+	      ctx[2],
+	      /*mr*/
+	      ctx[3],
+	      /*mb*/
+	      ctx[4],
+	      /*ml*/
+	      ctx[5]))) {
+	        attr(div1, "style", div1_style_value);
+	      }
 	    },
 
 	    i: noop,
@@ -14729,7 +14749,7 @@
 	      if (detaching) detach(div1);
 	      /*div0_binding*/
 
-	      ctx[8](null);
+	      ctx[13](null);
 	      if (if_block) if_block.d();
 	      mounted = false;
 	      dispose();
@@ -14738,7 +14758,33 @@
 	  };
 	}
 
+	function getBoundingClientRectWithMargins(el) {
+	  const rect = el.getBoundingClientRect();
+	  const style = window.getComputedStyle(el);
+	  const mTop = parseInt(style.marginTop, 10) || 0;
+	  const mRight = parseInt(style.marginRight, 10) || 0;
+	  const mBottom = parseInt(style.marginBottom, 10) || 0;
+	  const mLeft = parseInt(style.marginLeft, 10) || 0;
+	  return {
+	    top: rect.top - mTop,
+	    right: rect.right + mRight,
+	    bottom: rect.bottom + mBottom,
+	    left: rect.left - mLeft,
+	    width: rect.width + mLeft + mRight,
+	    height: rect.height + mTop + mBottom,
+	    x: rect.x - mLeft,
+	    y: rect.y - mTop
+	  };
+	}
+
 	function instance$f($$self, $$props, $$invalidate) {
+	  const showPopover = _async(function () {
+	    $$invalidate(6, _isContentVisible = true);
+	    return _call(tick, function () {
+	      setPopoverPosition();
+	    });
+	  });
+
 	  let paddedContent;
 	  let {
 	    testid = ""
@@ -14753,6 +14799,20 @@
 
 	  let _targetEl;
 
+	  let _popoverEl;
+
+	  let {
+	    mt = null
+	  } = $$props;
+	  let {
+	    mr = null
+	  } = $$props;
+	  let {
+	    mb = null
+	  } = $$props;
+	  let {
+	    ml = null
+	  } = $$props;
 	  onMount(function () {
 	    return _call(tick, function () {
 	      addFocusEventListener();
@@ -14762,12 +14822,8 @@
 	    removeEventListeners();
 	  });
 
-	  function showPopover() {
-	    $$invalidate(2, _isContentVisible = true);
-	  }
-
 	  function closePopover() {
-	    $$invalidate(2, _isContentVisible = false);
+	    $$invalidate(6, _isContentVisible = false);
 	  }
 
 	  const onInputKeyDown = e => {
@@ -14785,6 +14841,30 @@
 	    }
 	  };
 
+	  function setPopoverPosition() {
+	    // Get target and content rectangles
+	    const targetRect = getBoundingClientRectWithMargins(_targetEl);
+	    const contentRect = getBoundingClientRectWithMargins(_popoverEl); // Calculate available space above and below the target element
+
+	    const spaceAbove = targetRect.top;
+	    const spaceBelow = window.innerHeight - targetRect.bottom; // Determine if there's more space above or below the target element
+
+	    const displayAbove = spaceAbove > contentRect.height && spaceAbove > spaceBelow && spaceBelow < contentRect.height; // If there's more space above, display the popover above the target element
+
+	    if (displayAbove) {
+	      $$invalidate(8, _popoverEl.style.top = `${-contentRect.height - targetRect.height - 4}px`, _popoverEl);
+	    } else {
+	      $$invalidate(8, _popoverEl.style.top = '0px', _popoverEl);
+	    } // Move the popover to the left if it is too far to the right and only if there is space to the left
+
+
+	    if (window.innerWidth - targetRect.right < contentRect.width && targetRect.left > contentRect.width) {
+	      $$invalidate(8, _popoverEl.style.left = `-${contentRect.width - targetRect.width}px`, _popoverEl);
+	    } else {
+	      $$invalidate(8, _popoverEl.style.left = '0px', _popoverEl);
+	    }
+	  }
+
 	  function addFocusEventListener() {
 	    _targetEl.addEventListener("focus", onFocus, true);
 	  }
@@ -14803,31 +14883,42 @@
 	  function div0_binding($$value) {
 	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	      _targetEl = $$value;
-	      $$invalidate(3, _targetEl);
+	      $$invalidate(7, _targetEl);
+	    });
+	  }
+
+	  function section_binding($$value) {
+	    binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+	      _popoverEl = $$value;
+	      $$invalidate(8, _popoverEl);
 	    });
 	  }
 
 	  $$self.$$set = $$props => {
 	    if ('testid' in $$props) $$invalidate(0, testid = $$props.testid);
 	    if ('maxwidth' in $$props) $$invalidate(1, maxwidth = $$props.maxwidth);
-	    if ('padded' in $$props) $$invalidate(7, padded = $$props.padded);
+	    if ('padded' in $$props) $$invalidate(12, padded = $$props.padded);
+	    if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
+	    if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
+	    if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
+	    if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
 	  };
 
 	  $$self.$$.update = () => {
 	    if ($$self.$$.dirty &
 	    /*padded*/
-	    128) {
-	      $$invalidate(4, paddedContent = toBoolean(padded));
+	    4096) {
+	      $$invalidate(9, paddedContent = toBoolean(padded));
 	    }
 	  };
 
-	  return [testid, maxwidth, _isContentVisible, _targetEl, paddedContent, showPopover, closePopover, padded, div0_binding];
+	  return [testid, maxwidth, mt, mr, mb, ml, _isContentVisible, _targetEl, _popoverEl, paddedContent, showPopover, closePopover, padded, div0_binding, section_binding];
 	}
 
 	class Popover 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)}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}.popover-content{position:absolute;left:0;right:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);border-radius:var(--goa-border-radius-m);outline:none;box-shadow:var(--shadow-1);z-index:99}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}.popover-container{position:relative}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.popover-target{width:fit-content;cursor:pointer}.popover-target:focus{outline:var(--goa-border-width-l) solid var(--goa-color-interactive-focus)}.popover-content{position:absolute;left:0;right:0;margin-top:3px;list-style-type:none;background:var(--goa-color-greyscale-white);outline:none;filter:drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));z-index:99;width:max-content}.popover-background{cursor:default;position:fixed;z-index:98;inset:0}.popover-container{position:relative}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -14835,7 +14926,11 @@
 	    }, instance$f, create_fragment$h, safe_not_equal, {
 	      testid: 0,
 	      maxwidth: 1,
-	      padded: 7
+	      padded: 12,
+	      mt: 2,
+	      mr: 3,
+	      mb: 4,
+	      ml: 5
 	    }, null);
 
 	    if (options) {
@@ -14851,7 +14946,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["testid", "maxwidth", "padded"];
+	    return ["testid", "maxwidth", "padded", "mt", "mr", "mb", "ml"];
 	  }
 
 	  get testid() {
@@ -14877,7 +14972,7 @@
 	  }
 
 	  get padded() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[12];
 	  }
 
 	  set padded(padded) {
@@ -14887,6 +14982,50 @@
 	    flush();
 	  }
 
+	  get mt() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set mt(mt) {
+	    this.$$set({
+	      mt
+	    });
+	    flush();
+	  }
+
+	  get mr() {
+	    return this.$$.ctx[3];
+	  }
+
+	  set mr(mr) {
+	    this.$$set({
+	      mr
+	    });
+	    flush();
+	  }
+
+	  get mb() {
+	    return this.$$.ctx[4];
+	  }
+
+	  set mb(mb) {
+	    this.$$set({
+	      mb
+	    });
+	    flush();
+	  }
+
+	  get ml() {
+	    return this.$$.ctx[5];
+	  }
+
+	  set ml(ml) {
+	    this.$$set({
+	      ml
+	    });
+	    flush();
+	  }
+
 	}
 
 	customElements.define("goa-popover", Popover);
@@ -22906,11 +23045,19 @@
 	      testId = _a.testId,
 	      maxWidth = _a.maxWidth,
 	      padded = _a.padded,
-	      children = _a.children;
+	      children = _a.children,
+	      mt = _a.mt,
+	      mr = _a.mr,
+	      mb = _a.mb,
+	      ml = _a.ml;
 	  return jsxRuntime.jsxs("goa-popover", __assign({
 	    "data-testid": testId,
 	    maxwidth: maxWidth,
-	    padded: padded
+	    padded: padded,
+	    mt: mt,
+	    mr: mr,
+	    mb: mb,
+	    ml: ml
 	  }, {
 	    children: [children, target && jsxRuntime.jsx("div", __assign({
 	      slot: "target"