@abgov/react-components 4.0.0-alpha.143 → 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.143",
+  "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

@@ -14539,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) {
@@ -14553,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;
       }
     },
@@ -14573,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();
     }
@@ -14601,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");
@@ -14620,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) {
@@ -14627,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;
       }
     },
@@ -14642,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 {
@@ -14662,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,
@@ -14671,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();
@@ -14680,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 {
@@ -14695,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();
@@ -14703,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 => {
@@ -14726,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);
   }
@@ -14744,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),
@@ -14776,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) {
@@ -14792,7 +14896,7 @@ class Popover extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["testid", "maxwidth", "padded"];
+    return ["testid", "maxwidth", "padded", "mt", "mr", "mb", "ml"];
   }
 
   get testid() {
@@ -14818,7 +14922,7 @@ class Popover extends SvelteElement {
   }
 
   get padded() {
-    return this.$$.ctx[7];
+    return this.$$.ctx[12];
   }
 
   set padded(padded) {
@@ -14828,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);
@@ -22852,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

@@ -14587,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) {
@@ -14601,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;
 	      }
 	    },
@@ -14621,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();
 	    }
@@ -14649,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");
@@ -14668,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) {
@@ -14675,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;
 	      }
 	    },
@@ -14690,7 +14706,7 @@
 	    p(ctx, [dirty]) {
 	      if (
 	      /*_isContentVisible*/
-	      ctx[2]) {
+	      ctx[6]) {
 	        if (if_block) {
 	          if_block.p(ctx, dirty);
 	        } else {
@@ -14710,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,
@@ -14719,7 +14749,7 @@
 	      if (detaching) detach(div1);
 	      /*div0_binding*/
 
-	      ctx[8](null);
+	      ctx[13](null);
 	      if (if_block) if_block.d();
 	      mounted = false;
 	      dispose();
@@ -14728,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 = ""
@@ -14743,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();
@@ -14752,12 +14822,8 @@
 	    removeEventListeners();
 	  });
 
-	  function showPopover() {
-	    $$invalidate(2, _isContentVisible = true);
-	  }
-
 	  function closePopover() {
-	    $$invalidate(2, _isContentVisible = false);
+	    $$invalidate(6, _isContentVisible = false);
 	  }
 
 	  const onInputKeyDown = e => {
@@ -14775,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);
 	  }
@@ -14793,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),
@@ -14825,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) {
@@ -14841,7 +14946,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["testid", "maxwidth", "padded"];
+	    return ["testid", "maxwidth", "padded", "mt", "mr", "mb", "ml"];
 	  }
 
 	  get testid() {
@@ -14867,7 +14972,7 @@
 	  }
 
 	  get padded() {
-	    return this.$$.ctx[7];
+	    return this.$$.ctx[12];
 	  }
 
 	  set padded(padded) {
@@ -14877,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);
@@ -22896,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"