webcoreui 1.2.0 → 1.4.0

package/package.json

@@ -1,109 +1,111 @@
-{
-    "name": "webcoreui",
-    "type": "module",
-    "version": "1.2.0",
-    "scripts": {
-        "prepare": "husky",
-        "pre-commit": "lint-staged",
-        "dev": "astro dev",
-        "start": "astro preview",
-        "build": "astro check && astro build",
-        "build:package": "node scripts/build.js",
-        "compile": "node scripts/sass.js",
-        "test": "cd .. && vitest run && npm run test:sass",
-        "test:dev": "vitest",
-        "test:run": "vitest run",
-        "test:sass": "vitest run src/tests/unit/scss.test.js --config astro.config.mjs",
-        "test:e2e": "playwright test",
-        "test:e2e:update": "playwright test --update-snapshots",
-        "test:e2e:ui": "playwright test --ui",
-        "create-component": "node scripts/createComponent.js",
-        "lint": "eslint src/**/* --fix"
-    },
-    "devDependencies": {
-        "@astrojs/check": "0.9.4",
-        "@astrojs/node": "9.4.1",
-        "@astrojs/react": "4.3.0",
-        "@astrojs/svelte": "7.1.0",
-        "@eslint/js": "9.23.0",
-        "@playwright/test": "1.55.1",
-        "@types/node": "24.6.2",
-        "@typescript-eslint/parser": "8.39.1",
-        "astro": "5.13.0",
-        "astro-eslint-parser": "1.2.2",
-        "eslint": "9.23.0",
-        "eslint-plugin-astro": "1.3.1",
-        "eslint-plugin-react": "7.37.4",
-        "eslint-plugin-simple-import-sort": "12.1.1",
-        "eslint-plugin-svelte": "3.3.3",
-        "husky": "9.1.7",
-        "jsdom": "26.0.0",
-        "lint-staged": "15.5.0",
-        "react": "19.0.0",
-        "react-dom": "19.0.0",
-        "sass": "1.90.0",
-        "sass-true": "8.1.0",
-        "svelte": "5.38.1",
-        "svelte-eslint-parser": "1.1.0",
-        "typescript": "5.9.2",
-        "typescript-eslint": "8.39.1",
-        "vite-tsconfig-paths": "5.1.4",
-        "vitest": "3.0.4"
-    },
-    "exports": {
-        ".": "./index.js",
-        "./astro": "./astro.js",
-        "./svelte": "./svelte.js",
-        "./react": "./react.js",
-        "./icons": "./icons.js",
-        "./integration": "./integration.js",
-        "./styles": "./scss/index.scss",
-        "./config": "./scss/config.scss"
-    },
-    "files": [
-        "components",
-        "icons",
-        "scss",
-        "utils",
-        "astro.d.ts",
-        "astro.js",
-        "icons.d.ts",
-        "icons.js",
-        "svelte.d.ts",
-        "svelte.js",
-        "react.d.ts",
-        "react.js",
-        "index.js",
-        "index.d.ts",
-        "integration.js",
-        "integration.d.ts",
-        "README.md",
-        "LICENSE"
-    ],
-    "license": "MIT",
-    "description": "UI component and template library for Astro, Svelte, and React apps styled with Sass.",
-    "keywords": [
-        "webcore",
-        "component",
-        "components",
-        "ui components",
-        "component library",
-        "astro components",
-        "svelte components",
-        "react components",
-        "frontend",
-        "library",
-        "sass"
-    ],
-    "homepage": "https://webcoreui.dev",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/Frontendland/webcoreui.git"
-    },
-    "bugs": {
-        "url": "https://github.com/Frontendland/webcoreui/issues"
-    },
-    "lint-staged": {
-        "*.{js,ts,jsx,tsx,svelte,astro}": "eslint src/**/*"
-    }
-}
+{
+    "name": "webcoreui",
+    "type": "module",
+    "version": "1.4.0",
+    "scripts": {
+        "prepare": "husky",
+        "pre-commit": "lint-staged",
+        "dev": "astro dev",
+        "start": "astro preview",
+        "build": "astro check && astro build",
+        "build:package": "node scripts/build.js",
+        "compile": "node scripts/sass.js",
+        "test": "cd .. && vitest run && npm run test:sass",
+        "test:dev": "vitest",
+        "test:run": "vitest run",
+        "test:sass": "vitest run src/tests/unit/scss.test.js --config astro.config.mjs",
+        "test:e2e": "playwright test",
+        "test:e2e:update": "playwright test --update-snapshots",
+        "test:e2e:ui": "playwright test --ui",
+        "create-component": "node scripts/createComponent.js",
+        "lint": "eslint src/**/* --fix"
+    },
+    "devDependencies": {
+        "@astrojs/check": "0.9.6",
+        "@astrojs/node": "9.5.4",
+        "@astrojs/react": "4.4.2",
+        "@astrojs/svelte": "7.2.5",
+        "@eslint/js": "9.39.3",
+        "@playwright/test": "1.58.2",
+        "@types/node": "25.3.0",
+        "@typescript-eslint/parser": "8.56.1",
+        "astro": "5.17.3",
+        "astro-eslint-parser": "1.3.0",
+        "eslint": "9.39.3",
+        "eslint-plugin-astro": "1.6.0",
+        "eslint-plugin-react": "7.37.5",
+        "eslint-plugin-simple-import-sort": "12.1.1",
+        "eslint-plugin-svelte": "3.15.0",
+        "husky": "9.1.7",
+        "jsdom": "28.1.0",
+        "lint-staged": "16.2.7",
+        "react": "19.2.4",
+        "react-dom": "19.2.4",
+        "sass": "1.97.3",
+        "sass-true": "10.1.0",
+        "svelte": "5.53.3",
+        "svelte-eslint-parser": "1.5.1",
+        "typescript": "5.9.3",
+        "typescript-eslint": "8.56.1",
+        "vite-tsconfig-paths": "6.1.1",
+        "vitest": "4.0.18"
+    },
+    "exports": {
+        ".": "./index.js",
+        "./astro": "./astro.js",
+        "./svelte": "./svelte.js",
+        "./react": "./react.js",
+        "./icons": "./icons.js",
+        "./integration": "./integration.js",
+        "./styles": "./scss/index.scss",
+        "./config": "./scss/config.scss"
+    },
+    "files": [
+        "components",
+        "icons",
+        "scss",
+        "utils",
+        "astro.d.ts",
+        "astro.js",
+        "icons.d.ts",
+        "icons.js",
+        "svelte.d.ts",
+        "svelte.js",
+        "react.d.ts",
+        "react.js",
+        "index.js",
+        "index.d.ts",
+        "integration.js",
+        "integration.d.ts",
+        "README.md",
+        "LICENSE"
+    ],
+    "license": "MIT",
+    "description": "UI component and template library for Astro, Svelte, and React apps styled with Sass.",
+    "keywords": [
+        "webcore",
+        "components",
+        "ui components",
+        "ui library",
+        "component library",
+        "withastro",
+        "astro",
+        "astro ui",
+        "astro ui library",
+        "astro-component",
+        "astro components",
+        "svelte components",
+        "react components"
+    ],
+    "homepage": "https://webcoreui.dev",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Frontendland/webcoreui.git"
+    },
+    "bugs": {
+        "url": "https://github.com/Frontendland/webcoreui/issues"
+    },
+    "lint-staged": {
+        "*.{js,ts,jsx,tsx,svelte,astro}": "eslint src/**/*"
+    }
+}

package/react.d.ts

@@ -15,12 +15,15 @@ import type { ReactCollapsibleProps as WReactCollapsibleProps } from './componen
 import type { ReactConditionalWrapperProps as WReactConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
 import type { ReactContextMenuProps as WReactContextMenuProps } from './components/ContextMenu/contextmenu'
 import type { ReactCopyProps as WReactCopyProps } from './components/Copy/copy'
+import type { ReactCounterProps as WReactCounterProps } from './components/Counter/counter'
 import type { ReactDataTableProps as WReactDataTableProps } from './components/DataTable/datatable'
 import type { ReactFlexProps as WReactFlexProps } from './components/Flex/flex'
 import type { ReactFooterProps as WReactFooterProps } from './components/Footer/footer'
 import type { ReactGridProps as WReactGridProps } from './components/Grid/grid'
 import type { ReactGroupProps as WReactGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
+import type { ImageProps as WImageProps } from './components/Image/image'
+import type { ImageLoaderProps as WImageLoaderProps } from './components/ImageLoader/imageloader'
 import type { ReactInputProps as WReactInputProps } from './components/Input/input'
 import type { ReactKbdProps as WReactKbdProps } from './components/Kbd/kbd'
 import type { ReactListProps as WReactListProps } from './components/List/list'
@@ -76,12 +79,15 @@ declare module 'webcoreui/react' {
 	export const ConditionalWrapper: FC<WReactConditionalWrapperProps>
 	export const ContextMenu: FC<WReactContextMenuProps>
 	export const Copy: FC<WReactCopyProps>
+	export const Counter: FC<WReactCounterProps>
 	export const DataTable: FC<WReactDataTableProps>
 	export const Flex: FC<WReactFlexProps>
 	export const Footer: FC<WReactFooterProps>
 	export const Grid: FC<WReactGridProps>
 	export const Group: FC<WReactGroupProps>
 	export const Icon: FC<WIconProps>
+	export const Image: FC<WImageProps>
+	export const ImageLoader: FC<WImageLoaderProps>
 	export const Input: FC<WReactInputProps>
 	export const Kbd: FC<WReactKbdProps>
 	export const List: FC<WReactListProps>
@@ -130,12 +136,15 @@ declare module 'webcoreui/react' {
 	export type ConditionalWrapperProps = WReactConditionalWrapperProps
 	export type ContextMenuProps = WReactContextMenuProps
 	export type CopyProps = WReactCopyProps
+	export type CounterProps = WReactCounterProps
 	export type DataTableProps = WReactDataTableProps
 	export type FlexProps = WReactFlexProps
 	export type FooterProps = WReactFooterProps
 	export type GridProps = WReactGridProps
 	export type GroupProps = WReactGroupProps
 	export type IconProps = WIconProps
+	export type ImageProps = WImageProps
+	export type ImageLoaderProps = WImageLoaderProps
 	export type InputProps = WReactInputProps
 	export type KbdProps = WReactKbdProps
 	export type ListProps = WReactListProps

package/react.js

@@ -14,12 +14,15 @@ import CollapsibleComponent from './components/Collapsible/Collapsible.tsx'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.tsx'
 import ContextMenuComponent from './components/ContextMenu/ContextMenu.tsx'
 import CopyComponent from './components/Copy/Copy.tsx'
+import CounterComponent from './components/Counter/Counter.tsx'
 import DataTableComponent from './components/DataTable/DataTable.tsx'
 import FlexComponent from './components/Flex/Flex.tsx'
 import FooterComponent from './components/Footer/Footer.tsx'
 import GridComponent from './components/Grid/Grid.tsx'
 import GroupComponent from './components/Group/Group.tsx'
 import IconComponent from './components/Icon/Icon.tsx'
+import ImageComponent from './components/Image/Image.tsx'
+import ImageLoaderComponent from './components/ImageLoader/ImageLoader.tsx'
 import InputComponent from './components/Input/Input.tsx'
 import KbdComponent from './components/Kbd/Kbd.tsx'
 import ListComponent from './components/List/List.tsx'
@@ -68,12 +71,15 @@ export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const ContextMenu = ContextMenuComponent
 export const Copy = CopyComponent
+export const Counter = CounterComponent
 export const DataTable = DataTableComponent
 export const Flex = FlexComponent
 export const Footer = FooterComponent
 export const Grid = GridComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
+export const Image = ImageComponent
+export const ImageLoader = ImageLoaderComponent
 export const Input = InputComponent
 export const Kbd = KbdComponent
 export const List = ListComponent

package/scss/resets.scss

@@ -72,7 +72,9 @@
     }
 
     img {
+        @include visibility(block);
         @include border-radius();
+
         object-fit: cover;
     }
 

package/svelte.d.ts

@@ -15,12 +15,15 @@ import type { SvelteCollapsibleProps as WSvelteCollapsibleProps } from './compon
 import type { SvelteConditionalWrapperProps as WSvelteConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
 import type { SvelteContextMenuProps as WSvelteContextMenuProps } from './components/ContextMenu/contextmenu'
 import type { SvelteCopyProps as WSvelteCopyProps } from './components/Copy/copy'
+import type { SvelteCounterProps as WSvelteCounterProps } from './components/Counter/counter'
 import type { SvelteDataTableProps as WSvelteDataTableProps } from './components/DataTable/datatable'
 import type { SvelteFlexProps as WSvelteFlexProps } from './components/Flex/flex'
 import type { SvelteFooterProps as WSvelteFooterProps } from './components/Footer/footer'
 import type { SvelteGridProps as WSvelteGridProps } from './components/Grid/grid'
 import type { SvelteGroupProps as WSvelteGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
+import type { ImageProps as WImageProps } from './components/Image/image'
+import type { ImageLoaderProps as WImageLoaderProps } from './components/ImageLoader/imageloader'
 import type { SvelteInputProps as WSvelteInputProps } from './components/Input/input'
 import type { SvelteKbdProps as WSvelteKbdProps } from './components/Kbd/kbd'
 import type { SvelteListProps as WSvelteListProps } from './components/List/list'
@@ -76,12 +79,15 @@ declare module 'webcoreui/svelte' {
 	export const ConditionalWrapper: Component<WSvelteConditionalWrapperProps>
 	export const ContextMenu: Component<WSvelteContextMenuProps>
 	export const Copy: Component<WSvelteCopyProps>
+	export const Counter: Component<WSvelteCounterProps>
 	export const DataTable: Component<WSvelteDataTableProps>
 	export const Flex: Component<WSvelteFlexProps>
 	export const Footer: Component<WSvelteFooterProps>
 	export const Grid: Component<WSvelteGridProps>
 	export const Group: Component<WSvelteGroupProps>
 	export const Icon: Component<WIconProps>
+	export const Image: Component<WImageProps>
+	export const ImageLoader: Component<WImageLoaderProps>
 	export const Input: Component<WSvelteInputProps>
 	export const Kbd: Component<WSvelteKbdProps>
 	export const List: Component<WSvelteListProps>
@@ -130,12 +136,15 @@ declare module 'webcoreui/svelte' {
 	export type ConditionalWrapperProps = WSvelteConditionalWrapperProps
 	export type ContextMenuProps = WSvelteContextMenuProps
 	export type CopyProps = WSvelteCopyProps
+	export type CounterProps = WSvelteCounterProps
 	export type DataTableProps = WSvelteDataTableProps
 	export type FlexProps = WSvelteFlexProps
 	export type FooterProps = WSvelteFooterProps
 	export type GridProps = WSvelteGridProps
 	export type GroupProps = WSvelteGroupProps
 	export type IconProps = WIconProps
+	export type ImageProps = WImageProps
+	export type ImageLoaderProps = WImageLoaderProps
 	export type InputProps = WSvelteInputProps
 	export type KbdProps = WSvelteKbdProps
 	export type ListProps = WSvelteListProps

package/svelte.js

@@ -14,12 +14,15 @@ import CollapsibleComponent from './components/Collapsible/Collapsible.svelte'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
 import ContextMenuComponent from './components/ContextMenu/ContextMenu.svelte'
 import CopyComponent from './components/Copy/Copy.svelte'
+import CounterComponent from './components/Counter/Counter.svelte'
 import DataTableComponent from './components/DataTable/DataTable.svelte'
 import FlexComponent from './components/Flex/Flex.svelte'
 import FooterComponent from './components/Footer/Footer.svelte'
 import GridComponent from './components/Grid/Grid.svelte'
 import GroupComponent from './components/Group/Group.svelte'
 import IconComponent from './components/Icon/Icon.svelte'
+import ImageComponent from './components/Image/Image.svelte'
+import ImageLoaderComponent from './components/ImageLoader/ImageLoader.svelte'
 import InputComponent from './components/Input/Input.svelte'
 import KbdComponent from './components/Kbd/Kbd.svelte'
 import ListComponent from './components/List/List.svelte'
@@ -68,12 +71,15 @@ export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const ContextMenu = ContextMenuComponent
 export const Copy = CopyComponent
+export const Counter = CounterComponent
 export const DataTable = DataTableComponent
 export const Flex = FlexComponent
 export const Footer = FooterComponent
 export const Grid = GridComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
+export const Image = ImageComponent
+export const ImageLoader = ImageLoaderComponent
 export const Input = InputComponent
 export const Kbd = KbdComponent
 export const List = ListComponent

package/utils/DOMUtils.ts

@@ -1,6 +1,6 @@
-export const get = (selector: string, all?: boolean) => all
-    ? document?.querySelectorAll(selector)
-    : document?.querySelector(selector)
+export const get = <T extends Element = Element>(selector: string, all?: boolean): T | NodeListOf<T> | null => all
+    ? document?.querySelectorAll<T>(selector)
+    : document?.querySelector<T>(selector)
 
 export const on = (
     selector: string | HTMLElement | Document,

package/utils/modal.ts

@@ -13,7 +13,7 @@ export type ModalCallback = {
 }
 
 export type Modal = {
-    trigger: string
+    trigger?: string
     modal: string
     onOpen?: (args: ModalCallback) => unknown
     onClose?: (args: ModalCallback) => unknown
@@ -29,7 +29,7 @@ export const modal = (config: Modal | string): ModalInstance | undefined => {
 
     const modalSelector = typeof config === 'string' ? config : modal
 
-    const triggerDOM = document.querySelector(trigger)
+    const triggerDOM = trigger ? document.querySelector(trigger) : null
     const modalDOM = document.querySelector(modalSelector)
 
     if (modalDOM instanceof HTMLElement) {

package/utils/popover.ts

@@ -14,6 +14,12 @@ export type PopoverPosition = 'top'
     | 'bottom-start'
     | 'bottom-end'
 
+export type PopoverInstance = {
+    close: () => void
+    destroy: () => void
+    remove: () => void
+}
+
 export type PopoverCallback = {
     trigger: HTMLElement
     popover: HTMLElement
@@ -40,7 +46,7 @@ export const popover = ({
     closeOnEsc = true,
     onOpen,
     onClose
-}: Popover) => {
+}: Popover): PopoverInstance | undefined => {
     const triggerDOM = document.querySelector(trigger) as HTMLElement
     const popoverDOM = document.querySelector(popover) as HTMLElement
 
@@ -51,7 +57,7 @@ export const popover = ({
             popoverDOM.dataset.position = position.split('-')[0]
         }
 
-        const handleOpen = () => {
+        const getPosition = () => {
             const triggerPosition = triggerDOM.getBoundingClientRect()
             const popoverPosition = popoverDOM.getBoundingClientRect()
 
@@ -139,77 +145,105 @@ export const popover = ({
                 }
             }
 
-            const { top, left } = positions[position as keyof typeof positions] || positions.bottom
+            let finalPosition = position || 'bottom'
+            let { top, left } = positions[finalPosition]
+
+            const viewportTop = window.scrollY
+            const viewportBottom = window.scrollY + window.innerHeight
+            const viewportLeft = 0
+            const viewportRight = window.innerWidth
+
+            const overflowsTop = top < viewportTop
+            const overflowsBottom = top + popoverPosition.height > viewportBottom
+            const overflowsLeft = left < viewportLeft
+            const overflowsRight = left + popoverPosition.width > viewportRight
+
+            if (finalPosition.startsWith('bottom') && overflowsBottom) {
+                finalPosition = finalPosition.replace('bottom', 'top') as PopoverPosition
+            } else if (finalPosition.startsWith('top') && overflowsTop) {
+                finalPosition = finalPosition.replace('top', 'bottom') as PopoverPosition
+            } else if (finalPosition.startsWith('right') && overflowsRight) {
+                finalPosition = finalPosition.replace('right', 'left') as PopoverPosition
+            } else if (finalPosition.startsWith('left') && overflowsLeft) {
+                finalPosition = finalPosition.replace('left', 'right') as PopoverPosition
+            }
+
+            ({ top, left } = positions[finalPosition])
+
+            top = Math.max(viewportTop, Math.min(top, viewportBottom - popoverPosition.height))
+            left = Math.max(viewportLeft, Math.min(left, viewportRight - popoverPosition.width))
 
+            popoverDOM.dataset.position = finalPosition.split('-')[0]
+
+            return { top, left }
+        }
+
+        const handleOpen = () => {
+            const { top, left } = getPosition()
+
+            popoverDOM.dataset.noTransition = 'true'
             popoverDOM.style.top = `${top}px`
             popoverDOM.style.left = `${left}px`
 
-            setTimeout(() => {
-                popoverDOM.dataset.show = popoverDOM.dataset.show === 'true'
-                    ? ''
-                    : 'true'
-            }, 0)
+            popoverDOM.getBoundingClientRect()
+            popoverDOM.removeAttribute('data-no-transition')
 
-            setTimeout(() => {
-                if (!popoverDOM.dataset.show) {
-                    popoverDOM.removeAttribute('data-show')
-                }
-            }, 300)
+            if (popoverDOM.dataset.show) {
+                popoverDOM.removeAttribute('data-show')
+            } else {
+                popoverDOM.dataset.show = 'true'
+            }
 
             onOpen?.({
                 trigger: triggerDOM,
                 popover: popoverDOM,
-                position
+                position: popoverDOM.dataset.position as PopoverPosition
             })
         }
 
-        const handleClose = (event: MouseEvent) => {
-            const target = event.target as HTMLElement
-            const hidePopover = !popoverDOM.contains(target)
-                && !triggerDOM.contains(target)
-                && popoverDOM.dataset.show
+        const closePopover = () => {
+            if (popoverDOM.dataset.show !== 'true') {
+                return
+            }
 
-            if (hidePopover) {
-                popoverDOM.dataset.show = ''
+            popoverDOM.removeAttribute('data-show')
+
+            const handleTransitionEnd = (e: TransitionEvent) => {
+                if (e.target !== popoverDOM) {
+                    return
+                }
+
+                popoverDOM.removeEventListener('transitionend', handleTransitionEnd)
 
                 onClose?.({
                     trigger: triggerDOM,
                     popover: popoverDOM,
-                    position
+                    position: popoverDOM.dataset.position as PopoverPosition
                 })
             }
 
-            setTimeout(() => {
-                if (!popoverDOM.dataset.show) {
-                    popoverDOM.removeAttribute('data-show')
-                }
-            }, 300)
+            popoverDOM.addEventListener('transitionend', handleTransitionEnd)
         }
 
-        const handleCloseOnEsc = (event: KeyboardEvent) => {
-            if (event.key === 'Escape' && popoverDOM.dataset.show) {
-                popoverDOM.dataset.show = ''
+        const handleClose = (event: MouseEvent) => {
+            const target = event.target as HTMLElement
+            const hidePopover = !popoverDOM.contains(target)
+                && !triggerDOM.contains(target)
+                && popoverDOM.dataset.show
 
-                onClose?.({
-                    trigger: triggerDOM,
-                    popover: popoverDOM,
-                    position
-                })
+            if (hidePopover) {
+                closePopover()
+            }
+        }
 
-                setTimeout(() => {
-                    popoverDOM.removeAttribute('data-show')
-                }, 300)
+        const handleCloseOnEsc = (event: KeyboardEvent) => {
+            if (event.key === 'Escape' && popoverDOM.dataset.show) {
+                closePopover()
             }
         }
 
         const removeOnResize = debounce(() => {
-            popoverDOM.dataset.show = ''
-
-            setTimeout(() => {
-                if (!popoverDOM.dataset.show) {
-                    popoverDOM.removeAttribute('data-show')
-                }
-            }, 300)
+            closePopover()
         })
 
         const observer = new ResizeObserver(() => {
@@ -230,7 +264,10 @@ export const popover = ({
         }
 
         return {
-            remove() {
+            close() {
+                closePopover()
+            },
+            destroy() {
                 triggerDOM.removeEventListener('click', handleOpen)
                 observer.disconnect()
 
@@ -241,6 +278,10 @@ export const popover = ({
                 if (closeOnEsc) {
                     document.removeEventListener('keydown', handleCloseOnEsc)
                 }
+            },
+            remove() {
+                popoverDOM.remove()
+                this.destroy()
             }
         }
     }