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

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;
 }
 

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<string, any>,
+  { default: {} }
+> {}

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";