feat(v11): Popover

* Breaking changes *

- The `Popover` now uses a different markup. The trigger becomes a child of the component.
- The new `PopoverContent` becomes an additional child of the `Popover` component.
- remove `relative` property

src/Popover/Popover.svelte

@@ -9,24 +9,27 @@
   /** Set to `true` to close the popover on an outside click */
   export let closeOnOutsideClick = false;
 
-  /** Set to `true` render a caret */
-  export let caret = false;
+  /** Set to `true` to render the tab tip variant */
+  export let isTabTip = false;
+
+  /**
+   * Set to `true` render a caret
+   * @type {boolean}
+   * */
+  export let caret = isTabTip ? false : true;
 
   /**
    * Specify the alignment of the caret
    * @type {"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"}
    */
-  export let align = "top";
+  export let align = isTabTip ? "bottom-left" : "bottom";
 
-  /** Set to `true` to enable the light variant */
-  export let light = false;
+  /** Set to `false` to omit the drop shadow */
+  export let dropShadow = true;
 
   /** Set to `true` to enable the high contrast variant */
   export let highContrast = false;
 
-  /** Set to `true` to use a relative position */
-  export let relative = false;
-
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
@@ -44,11 +47,11 @@
   }}"
 />
 
-<div
+<span
   bind:this="{ref}"
-  class:bx--popover="{true}"
+  class:bx--popover-container="{true}"
   class:bx--popover--caret="{caret}"
-  class:bx--popover--light="{light}"
+  class:bx--popover--drop-shadow="{dropShadow}"
   class:bx--popover--high-contrast="{highContrast}"
   class:bx--popover--top="{align === 'top'}"
   class:bx--popover--top-left="{align === 'top-left'}"
@@ -63,11 +66,8 @@
   class:bx--popover--right-bottom="{align === 'right-bottom'}"
   class:bx--popover--right-top="{align === 'right-top'}"
   class:bx--popover--open="{open}"
-  class:bx--popover--relative="{relative}"
-  style:position="{relative ? "relative" : undefined}"
   {...$$restProps}
+  style="{$$restProps.style}"
 >
-  <div class:bx--popover-contents="{true}">
-    <slot />
-  </div>
-</div>
+  <slot />
+</span>

src/Popover/PopoverContent.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let className = null;
+  export let contentProps = {};
+
+  /** Obtain a reference to the popover content HTML element */
+  export let ref = null;
+</script>
+
+<span class:bx--popover="{true}" bind:this="{ref}" {...$$restProps}>
+  <span
+    class:bx--popover-content="{true}"
+    class="{className}"
+    {...contentProps}
+  >
+    <slot />
+  </span>
+  <span class:bx--popover-caret="{true}"></span>
+</span>

src/Popover/index.js

@@ -1 +1,2 @@
 export { default as Popover } from "./Popover.svelte";
+export { default as PopoverContent } from "./PopoverContent.svelte";

src/index.js

@@ -84,7 +84,7 @@ export { OrderedList } from "./OrderedList";
 export { OverflowMenu, OverflowMenuItem } from "./OverflowMenu";
 export { Pagination, PaginationSkeleton } from "./Pagination";
 export { PaginationNav } from "./PaginationNav";
-export { Popover } from "./Popover";
+export { Popover, PopoverContent } from "./Popover";
 export { ProgressBar } from "./ProgressBar";
 export {
   ProgressIndicator,