diff --git a/src/Popover/Popover.svelte b/src/Popover/Popover.svelte
index 2249cc9c..39c56117 100644
--- a/src/Popover/Popover.svelte
+++ b/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 @@
}}"
/>
-
-
-
-
-
+
+
diff --git a/src/Popover/PopoverContent.svelte b/src/Popover/PopoverContent.svelte
new file mode 100644
index 00000000..68d04119
--- /dev/null
+++ b/src/Popover/PopoverContent.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
diff --git a/src/Popover/index.js b/src/Popover/index.js
index 6ffabfa1..5d0144b7 100644
--- a/src/Popover/index.js
+++ b/src/Popover/index.js
@@ -1 +1,2 @@
export { default as Popover } from "./Popover.svelte";
+export { default as PopoverContent } from "./PopoverContent.svelte";
diff --git a/src/index.js b/src/index.js
index fc289bf6..16fba2b6 100644
--- a/src/index.js
+++ b/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,
diff --git a/tests/Popover.test.svelte b/tests/Popover.test.svelte
index d56ec71c..49fbfb67 100644
--- a/tests/Popover.test.svelte
+++ b/tests/Popover.test.svelte
@@ -1,5 +1,5 @@
@@ -9,12 +9,10 @@
closeOnOutsideClick
align="right"
caret
- relative
- light
highContrast
on:click:outside="{() => {
console.log('on:click:outside');
}}"
>
-
Content
+ Content
diff --git a/types/Popover/Popover.svelte.d.ts b/types/Popover/Popover.svelte.d.ts
index 674a8b3c..88ca7ea6 100644
--- a/types/Popover/Popover.svelte.d.ts
+++ b/types/Popover/Popover.svelte.d.ts
@@ -1,7 +1,7 @@
import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
-type RestProps = SvelteHTMLElements["div"];
+type RestProps = SvelteHTMLElements["span"];
export interface PopoverProps extends RestProps {
/**
@@ -17,14 +17,20 @@ export interface PopoverProps extends RestProps {
closeOnOutsideClick?: boolean;
/**
- * Set to `true` render a caret
+ * Set to `true` to render the tab tip variant
* @default false
*/
+ isTabTip?: boolean;
+
+ /**
+ * Set to `true` render a caret
+ * @default undefined
+ */
caret?: boolean;
/**
* Specify the alignment of the caret
- * @default "top"
+ * @default undefined
*/
align?:
| "top"
@@ -41,10 +47,10 @@ export interface PopoverProps extends RestProps {
| "right-top";
/**
- * Set to `true` to enable the light variant
- * @default false
+ * Set to `false` to omit the drop shadow
+ * @default true
*/
- light?: boolean;
+ dropShadow?: boolean;
/**
* Set to `true` to enable the high contrast variant
@@ -52,12 +58,6 @@ export interface PopoverProps extends RestProps {
*/
highContrast?: boolean;
- /**
- * Set to `true` to use a relative position
- * @default false
- */
- relative?: boolean;
-
[key: `data-${string}`]: any;
}
diff --git a/types/Popover/PopoverContent.svelte.d.ts b/types/Popover/PopoverContent.svelte.d.ts
new file mode 100644
index 00000000..614d57a2
--- /dev/null
+++ b/types/Popover/PopoverContent.svelte.d.ts
@@ -0,0 +1,24 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type RestProps = SvelteHTMLElements["span"];
+
+export interface PopoverContentProps extends RestProps {
+ /**
+ * @default null
+ */
+ className?: undefined;
+
+ /**
+ * @default {}
+ */
+ contentProps?: {};
+
+ [key: `data-${string}`]: any;
+}
+
+export default class PopoverContent extends SvelteComponentTyped<
+ PopoverContentProps,
+ Record,
+ { default: {} }
+> {}
diff --git a/types/index.d.ts b/types/index.d.ts
index 360753c1..8f06b22c 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -91,6 +91,7 @@ export { default as Pagination } from "./Pagination/Pagination.svelte";
export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton.svelte";
export { default as PaginationNav } from "./PaginationNav/PaginationNav.svelte";
export { default as Popover } from "./Popover/Popover.svelte";
+export { default as PopoverContent } from "./Popover/PopoverContent.svelte";
export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator.svelte";
export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton.svelte";