feat(popover): add Popover component

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 160,
+  "total": 161,
   "components": [
     {
       "moduleName": "Accordion",
@@ -6778,6 +6778,76 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "input" }
     },
+    {
+      "moduleName": "Popover",
+      "filePath": "src/Popover/Popover.svelte",
+      "props": [
+        {
+          "name": "open",
+          "kind": "let",
+          "description": "Set to `true` to display the popover",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "caret",
+          "kind": "let",
+          "description": "Set to `true` render a caret",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "align",
+          "kind": "let",
+          "description": "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\"",
+          "value": "\"top\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "light",
+          "kind": "let",
+          "description": "Set to `true` to enable the light variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "highContrast",
+          "kind": "let",
+          "description": "Set to `true` to enable the high contrast variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "relative",
+          "kind": "let",
+          "description": "Set to `true` to use a relative position",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "div" }
+    },
     {
       "moduleName": "ProgressIndicator",
       "filePath": "src/ProgressIndicator/ProgressIndicator.svelte",

docs/src/layouts/ComponentLayout.svelte

@@ -208,7 +208,12 @@
     }
   }
 
-  .preview-viewer > .bx--aspect-ratio {
+  .preview-viewer > .bx--aspect-ratio,
+  .preview-viewer [data-outline] {
     outline: 1px solid var(--cds-interactive-04);
   }
+
+  [data-outline="relative"] {
+    position: relative;
+  }
 </style>

docs/src/pages/_layout.svelte

@@ -20,7 +20,7 @@
   import Footer from "../components/Footer.svelte";
 
   const deprecated = ["ToggleSmall", "Icon"];
-  const new_components = ["ImageLoader", "LocalStorage"];
+  const new_components = ["Popover"];
 
   let isOpen = false;
   let isSideNavOpen = true;

docs/src/pages/components/Popover.svx

@@ -0,0 +1,67 @@
+<script>
+  import { Popover } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+By default, the position of the popover component is absolute.
+
+<div data-outline="relative">
+    Parent
+    <Popover open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### Relative
+
+Set `relative` to `true` to use a relative position.
+
+<div data-outline="relative">
+    Parent
+    <Popover relative open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+
+### With caret
+
+<div data-outline="relative">
+    Parent
+    <Popover caret open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### Custom caret alignment
+
+By default, the caret is aligned "top".
+
+Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.
+
+<div data-outline="relative">
+    Parent
+    <Popover caret align="top-left" open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### Light variant
+
+<div data-outline="relative">
+    Parent
+    <Popover light open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### High contrast variant
+
+<div data-outline="relative">
+    Parent
+    <Popover highContrast open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>