winduum 2.2.21 → 3.0.0-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "2.2.21",
+  "version": "3.0.0-next.1",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -30,8 +30,9 @@
     "eslint": "^10.0.2",
     "fast-glob": "^3.3.3",
     "globals": "^17.4.0",
-    "postcss": "^8.5.8",
-    "postcss-custom-media": "^12.0.1",
+    "invokers-polyfill": "^0.6.1",
+    "postcss": "^8.5.6",
+    "postcss-custom-media": "^12.0.0",
     "postcss-import": "^16.1.1",
     "postcss-nesting": "^14.0.0",
     "slide-element": "^2.3.1",
@@ -40,7 +41,8 @@
     "tailwindcss": "^4.2.1",
     "typescript": "^5",
     "vite": "^7.3.1",
-    "vue": "^3.5.29"
+    "vue": "^3.5.29",
+    "webuum": "^0.1.0"
   },
   "files": [
     "index.js",

package/src/base/reset.css

@@ -48,6 +48,10 @@
   display: revert;
 }
 
+:where([popover]) {
+  position-anchor: auto;
+}
+
 /* Revert table vertical-align */
 :where(tr, th, td),
 :where(thead, tbody, tfoot) {

package/src/common.js

@@ -8,4 +8,12 @@ export const nextRepaint = () => {
   })
 }
 
-export const animationsFinished = async element => Promise.all(element.getAnimations().map(animation => animation.finished))
+export const animationsFinished = async (element) => {
+  const animations = element?.getAnimations?.() || []
+  const results = await Promise.allSettled(animations.map(a => a.finished))
+
+  return results.filter(r => r.status === 'fulfilled').map(r => r.value)
+}
+
+export const supportsAnchor = CSS.supports('anchor-name', '--')
+export const supportsAnchoredContainer = CSS.supports('container-type: anchored')

package/src/components/details/default.css

@@ -0,0 +1,14 @@
+.x-details {
+  &::details-content {
+    transition:
+      height var(--default-transition-duration) var(--default-transition-timing-function),
+      content-visibility var(--default-transition-duration) var(--default-transition-timing-function) allow-discrete;
+    height: 0;
+    overflow: clip;
+    interpolate-size: allow-keywords;
+  }
+
+  &[open]::details-content {
+    height: auto;
+  }
+}

package/src/components/details/index.css

@@ -0,0 +1 @@
+@import "./default.css";

package/src/components/dialog/content.css

@@ -3,10 +3,17 @@
   border-radius: var(--x-dialog-content-border-radius, var(--radius-3xl));
   padding: var(--x-dialog-content-padding-block) var(--x-dialog-content-padding-inline);
   inline-size: min(100%, var(--x-dialog-content-inline-size));
-  transition: var(--transition-transform), var(--transition-opacity);
+  transition: var(--transition-transform), var(--transition-opacity) allow-discrete, var(--transition-display) allow-discrete;
   margin: auto;
+  pointer-events: auto;
+  height: 200vh;
 
-  :where(dialog[data-closed]) & {
+  @starting-style {
+    transform: translateY(-2rem);
+    opacity: 0%;
+  }
+
+  :where(dialog:not([open])) & {
     transform: translateY(-2rem);
     opacity: 0%;
   }

package/src/components/dialog/default.css

@@ -7,21 +7,35 @@
       var(--x-dialog-background-color) var(--x-dialog-background-color-opacity),
       var(--x-dialog-background-color-mix, transparent)
     );
-  transition: var(--transition-background);
+  transition: var(--transition-background) allow-discrete, var(--transition-display) allow-discrete, var(--transition-overlay) allow-discrete;
   display: flex;
   position: fixed;
   inset: 0;
   overflow: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
+  scrollbar-gutter: stable;
+
+  @starting-style {
+    background-color: transparent;
+  }
 
   &::backdrop,
   &:not([open]) {
     display: none;
   }
 
-  &[data-closed] {
+  &:not([open]) {
     background-color: transparent;
+
+    html:not(:has(.x-dialog[open])) & {
+      scrollbar-gutter: auto;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
   }
 }
 

package/src/components/dialog/index.js

@@ -1,82 +1,7 @@
-import { animationsFinished, nextRepaint } from '../../common.js'
+document.documentElement.addEventListener('click', ({ target }) => {
+  const closedBy = target?.getAttribute('closedby')
 
-/**
- * @type {import("./").DefaultOptions}
-*/
-export const defaultOptions = {
-  closedAttribute: 'data-closed',
-  openAttribute: 'data-open',
-  scrollbarWidthProperty: '--default-scrollbar-width',
-  contentSelector: '.x-dialog-content',
-  closable: true,
-  modal: true,
-}
-
-/**
- * Shows a dialog.
- * @param {HTMLDialogElement | HTMLElement} element - The dialog element to show.
- * @param {import("./").DefaultOptions} options - The options for showing the dialog.
- * @returns Promise<void>
- */
-export const showDialog = async (element, options = {}) => {
-  options = {
-    ...defaultOptions,
-    ...options,
-  }
-
-  if (options.scrollbarWidthProperty) {
-    document.documentElement.style.setProperty(options.scrollbarWidthProperty, `${window.innerWidth - document.body.clientWidth}px`)
-  }
-
-  if (!element?._dialogHasEvents) {
-    element.addEventListener('cancel', (e) => {
-      e.preventDefault()
-      options.closable && closeDialog(element, options)
-    })
-
-    element.addEventListener('click', ({ target }) => {
-      if (target.nodeName === 'DIALOG' && options.closable) {
-        closeDialog(element, options)
-      }
-    })
-
-    element._dialogHasEvents = true
+  if (target?.matches('dialog[open]') && !document.activeElement.matches('input,textarea') && closedBy && closedBy !== 'none') {
+    target?.close()
   }
-
-  element.setAttribute(options.closedAttribute, '')
-
-  options.modal ? element.showModal() : element.show()
-  element.scroll(0, 0)
-
-  element.removeAttribute(options.closedAttribute)
-  await animationsFinished(element.querySelector(options.contentSelector))
-  element.setAttribute(options.openAttribute, '')
-
-  element.dispatchEvent(new CustomEvent('x-dialog:show'))
-}
-
-/**
- * Closes and dismisses a dialog.
- * @param {HTMLDialogElement | HTMLElement} element - The dialog element to dismiss.
- * @param {import("./").DefaultOptions} options - The options for closing the dialog.
- * @returns Promise<void>
- */
-export const closeDialog = async (element, options = {}) => {
-  options = {
-    ...defaultOptions,
-    ...options,
-  }
-
-  element.dispatchEvent(new CustomEvent('x-dialog:close'))
-
-  element.removeAttribute(options.openAttribute)
-  element.setAttribute(options.closedAttribute, '')
-
-  await animationsFinished(element.querySelector(options.contentSelector))
-
-  element.close()
-
-  await nextRepaint()
-
-  options.remove && element.remove()
-}
+})

package/src/components/dialog/readme.md

@@ -29,12 +29,8 @@ You can also copy and paste the code from this directory to your project and rem
 @import "@/components/dialog/assets/index.css" layer(components);
 ```
 
-```js
-import { showDialog } from '@/components/dialog/assets/index.js'
-```
-
 ### Docs
-Visit [docs](https://winduum.dev/docs/components/dialog.html) to learn more about Javascript API and see usage examples.
+Visit [docs](https://winduum.dev/docs/components/dialog.html) to learn more about usage examples.
 
 ### Frameworks
 * [winduum/winduum-vue](https://github.com/winduum/winduum-vue/blob/main/src/components/dialog)

package/src/components/index.css

@@ -3,6 +3,7 @@
 @import "./check/index.css";
 @import "./color/index.css";
 @import "./control/index.css";
+@import "./details/index.css";
 @import "./group/index.css";
 @import "./heading/index.css";
 @import "./image/index.css";

package/src/components/popover/content.css

@@ -2,103 +2,14 @@
   background-color: var(--x-popover-content-background-color);
   border-radius: var(--x-popover-content-border-radius);
   padding: var(--x-popover-content-padding-block) var(--x-popover-content-padding-inline);
-  z-index: var(--x-popover-content-z-index, var(--z-index-10));
-  transition-property: var(--default-transition-property);
-  transition-timing-function: var(--ease-in-out);
-  transition-duration: var(--default-transition-duration);
-  transform:
-    translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
-    scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
+  transition: inherit;
   will-change: transform;
-  inline-size: max-content;
-  position: absolute;
 
-  &:where(.bottom),
-  & {
-    transform-origin: top;
+  @starting-style {
+    scale: var(--x-popover-content-starting-scale);
   }
 
-  &:where(.bottom-start) {
-    transform-origin: top left;
-  }
-
-  &:where(.bottom-end) {
-    inset-inline-end: 0;
-    transform-origin: top right;
-  }
-
-  &:where(.right) {
-    inset-block-start: 0;
-    inset-inline-start: 100%;
-    transform-origin: left;
-  }
-
-  &:where(.right-start) {
-    transform-origin: left top;
-  }
-
-  &:where(.right-end) {
-    inset-block: auto 0;
-    transform-origin: left bottom;
-  }
-
-  &:where(.left) {
-    inset-block-start: 0;
-    inset-inline-end: 100%;
-    transform-origin: right;
-  }
-
-  &:where(.left-start) {
-    transform-origin: right top;
-  }
-
-  &:where(.left-end) {
-    inset-block: auto 0;
-    transform-origin: right bottom;
-  }
-
-  &:where(.top) {
-    inset-block-end: 100%;
-    transform-origin: bottom;
-  }
-
-  &:where(.top-start) {
-    transform-origin: bottom left;
-  }
-
-  &:where(.top-end) {
-    inset-inline-end: 0;
-    transform-origin: bottom right;
-  }
-
-  &:where(.inline-center) {
-    --tw-translate-x: -50%;
-
-    inset-inline-start: 50%;
-  }
-
-  &:where(.block-center) {
-    --tw-translate-y: -50%;
-
-    inset-block-start: 50%;
-  }
-
-  &[popover]:not([data-open]) {
-    --tw-scale-x: var(--x-popover-content-scale-x);
-    --tw-scale-y: var(--x-popover-content-scale-y);
-
-    opacity: 0%;
-    pointer-events: none;
-  }
-
-  &:not([popover]) {
-    .trigger-focus:not(:focus, :focus-within) > &,
-    .trigger-hover:not(:hover) > & {
-      --tw-scale-x: var(--x-popover-content-scale-x);
-      --tw-scale-y: var(--x-popover-content-scale-y);
-
-      opacity: 0%;
-      visibility: hidden;
-    }
+  :where(.x-popover:not(:popover-open)) > & {
+    scale: var(--x-popover-content-starting-scale);
   }
 }

package/src/components/popover/default.css

@@ -1,4 +1,17 @@
 .x-popover {
-  position: relative;
-  display: inline-block;
+  transition-property: var(--default-transition-property);
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: var(--default-transition-duration);
+  transition-behavior: allow-discrete;
+  position: fixed;
+  inset: auto;
+  container-type: anchored;
+
+  @starting-style {
+    opacity: var(--x-popover-starting-opacity);
+  }
+
+  &:not(:popover-open) {
+    opacity: var(--x-popover-starting-opacity);
+  }
 }

package/src/components/popover/index.css

@@ -1,3 +1,4 @@
+@import "./props/default.css";
 @import "./props/content.css";
 @import "./default.css";
 @import "./content.css";

package/src/components/popover/index.d.ts

@@ -1,20 +1,16 @@
-import { FlipOptions, Middleware, OffsetOptions, Placement, ShiftOptions } from "@floating-ui/dom";
+import type { ComputePositionConfig } from '@floating-ui/dom'
+import type { Placement } from '@floating-ui/utils'
 
-export interface ShowPopoverOptions {
-    anchorSelector: string,
-    openAttribute?: string
-    compute?: boolean
-    placement?: Placement
-    middleware?: Array<Middleware | null | undefined | false>
-    offset?: OffsetOptions
-    flip?: FlipOptions
-    shift?: ShiftOptions
-}
+export declare function computePositionPopover(
+  referenceElement: HTMLElement,
+  floatingElement: HTMLElement & { $currentPlacement?: string },
+  placement: Placement,
+  options?: ComputePositionConfig | boolean
+): Promise<void>
 
-export interface HidePopoverOptions {
-    openAttribute?: string
-}
-
-export function showPopover(element: HTMLElement | Element, options?: ShowPopoverOptions): Promise<void>
-export function hidePopover(element: HTMLElement | Element): Promise<void>
-export function togglePopover(element: HTMLElement | Element, options?: ShowPopoverOptions): Promise<void>
+export declare function autoUpdatePopover(
+  referenceElement: HTMLElement,
+  floatingElement: HTMLElement,
+  placement: Placement,
+  options?: ComputePositionConfig | boolean
+): Promise<() => void>

package/src/components/popover/index.js

@@ -1,93 +1,53 @@
-import { animationsFinished, nextRepaint } from '../../common.js'
+import { supportsAnchor } from '../../common.js'
 
 /**
- * @param {HTMLElement | Element} element
- * @param {HTMLElement | Element} popoverElement
- * @param {import("./").ShowPopoverOptions} options
- * @returns Promise<void>
+ * @param {HTMLElement} referenceElement
+ * @param {HTMLElement & { _currentPlacement?: import('@floating-ui/utils').Placement }} floatingElement
+ * @param {import('@floating-ui/utils').Placement} placement
+ * @param {import('@floating-ui/dom').ComputePositionConfig | boolean} [options={}]
+ * @returns {Promise<void>}
  */
-export const computePopover = async (element, popoverElement, options = {}) => {
-  const { computePosition, flip, shift, offset } = await import('@floating-ui/dom')
-
-  popoverElement.classList.remove(popoverElement._placement)
-
-  await computePosition(element, popoverElement, {
-    placement: options?.placement,
-    middleware: options?.middleware ?? [offset(options?.offset ?? 12), flip(options?.flip), shift({ padding: 8, ...options?.shift })],
+export const computePositionPopover = async (
+  referenceElement,
+  floatingElement,
+  placement,
+  options = {},
+) => {
+  const { computePosition, flip } = await import('@floating-ui/dom')
+
+  const autoUpdate = options === true
+  const middleware = autoUpdate ? [flip()] : []
+
+  floatingElement.classList.remove(floatingElement._currentPlacement ?? placement)
+  floatingElement.style.setProperty('--anchor-size', !supportsAnchor ? `${referenceElement.offsetWidth}px` : '')
+
+  await computePosition(referenceElement, floatingElement, {
+    middleware,
+    placement,
+    ...(autoUpdate ? {} : options),
   }).then(({ x, y, placement }) => {
-    Object.assign(popoverElement.style, {
-      inset: `${y}px auto auto ${x}px`,
-    })
-
-    popoverElement._placement = placement
-    popoverElement.classList.add(popoverElement._placement)
+    floatingElement.style.inset = !supportsAnchor ? `${y}px auto auto ${x}px` : ''
+    floatingElement.classList.add(placement)
+    floatingElement._currentPlacement = placement
   })
 }
 
 /**
- * @param {HTMLElement | Element} element - The HTML content to insert into the dialog.
- * @param {import("./").HidePopoverOptions} options
- * @returns Promise<void>
+ * @param {HTMLElement} referenceElement
+ * @param {HTMLElement} floatingElement
+ * @param {import('@floating-ui/utils').Placement} placement
+ * @param {import('@floating-ui/dom').ComputePositionConfig | boolean} [options={}]
+ * @returns {Promise<() => void>}
  */
-export const hidePopover = async (element, options = { openAttribute: 'data-open' }) => {
-  const popoverElement = document.getElementById(element.getAttribute('popovertarget'))
-
-  popoverElement.removeAttribute(options?.openAttribute)
-  await animationsFinished(popoverElement)
-  popoverElement._cleanup && popoverElement._cleanup()
-  popoverElement.hidePopover && popoverElement.hidePopover()
-
-  element.ariaExpanded = 'false'
-}
-
-/**
- * @param {HTMLElement | Element} element
- * @param {import("./").ShowPopoverOptions} options
- * @returns Promise<void>
- */
-export const showPopover = async (element, options) => {
-  options = {
-    openAttribute: 'data-open',
-    compute: true,
-    ...options,
-  }
-
+export const autoUpdatePopover = async (
+  referenceElement,
+  floatingElement,
+  placement,
+  options = {},
+) => {
   const { autoUpdate } = await import('@floating-ui/dom')
 
-  const popoverElement = document.getElementById(element.getAttribute('popovertarget'))
-
-  element.ariaExpanded = 'true'
-
-  if (!element.ariaHasPopup) (element.ariaHasPopup = 'dialog')
-  if (!popoverElement.role) (popoverElement.role = element.ariaHasPopup)
-
-  popoverElement.showPopover && popoverElement.showPopover()
-
-  await nextRepaint()
-
-  popoverElement.setAttribute(options?.openAttribute, '')
-
-  if (!options.compute) {
-    return
-  }
-
-  popoverElement._cleanup = autoUpdate(
-    element,
-    popoverElement,
-    async () => await computePopover(options.anchorSelector ? document.querySelector(options.anchorSelector) : element, popoverElement, options),
+  return autoUpdate(referenceElement, floatingElement, () =>
+    computePositionPopover(referenceElement, floatingElement, placement, options),
   )
 }
-
-/**
- * @param {HTMLElement | Element} element
- * @param {import("./").ShowPopoverOptions} options
- * @returns Promise<void>
- */
-export const togglePopover = async (element, options) => {
-  if (element.ariaExpanded !== 'true') {
-    await showPopover(element, options)
-  }
-  else {
-    await hidePopover(element)
-  }
-}

package/src/components/popover/props/content.css

@@ -4,6 +4,5 @@
   --x-popover-content-border-radius: var(--radius-xl);
   --x-popover-content-padding-block: calc(var(--spacing) * 2);
   --x-popover-content-padding-inline: calc(var(--spacing) * 2);
-  --x-popover-content-scale-y: 0.75;
-  --x-popover-content-scale-x: 0.75;
+  --x-popover-content-starting-scale: 0.75;
 }

package/src/components/popover/props/default.css

@@ -0,0 +1,4 @@
+:root,
+:host {
+  --x-popover-starting-opacity: 0;
+}

package/src/components/popover/readme.md

@@ -14,9 +14,8 @@ Include CSS either globally or to your component _([you can't use TailwindCSS la
 or modular (you can use your own props or CSS)
 
 ```css
-@import "winduum/src/components/popover/props/content.css" layer(components);
+@import "winduum/src/components/popover/props/default.css" layer(components);
 @import "winduum/src/components/popover/default.css" layer(components);
-@import "winduum/src/components/popover/content.css" layer(components);
 ```
 
 ### Local imports

package/src/components/tooltip/default.css

@@ -26,8 +26,8 @@
     pointer-events: none;
   }
 
-  &:where(.top),
-  &:where(.bottom) {
+  &:where(.tooltip-top),
+  &:where(.tooltip-bottom) {
     &::before {
       --tw-translate-x: -50%;
 
@@ -36,8 +36,8 @@
     }
   }
 
-  &:where(.left),
-  &:where(.right) {
+  &:where(.tooltip-left),
+  &:where(.tooltip-right) {
     &::before {
       --tw-translate-y: -50%;
 
@@ -46,28 +46,28 @@
     }
   }
 
-  &:where(.bottom) {
+  &:where(.tooltip-bottom) {
     &::before {
       inset-block-start: 100%;
       transform-origin: top;
     }
   }
 
-  &:where(.top) {
+  &:where(.tooltip-top) {
     &::before {
       inset-block-end: 100%;
       transform-origin: bottom;
     }
   }
 
-  &:where(.left) {
+  &:where(.tooltip-left) {
     &::before {
       inset-inline-end: 100%;
       transform-origin: right;
     }
   }
 
-  &:where(.right) {
+  &:where(.tooltip-right) {
     &::before {
       inset-inline-start: 100%;
       transform-origin: left;

package/tailwindcss/utilities/index.css

@@ -5,6 +5,7 @@
 @import "./dot.css";
 @import "./grid-cols-container.css";
 @import "./link.css";
+@import "./position.css";
 @import "./ripple.css";
 @import "./skeleton.css";
 @import "./spinner.css";

package/tailwindcss/utilities/position.css

@@ -0,0 +1,179 @@
+@utility bottom {
+  position-area: block-end center;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: top;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: bottom;
+    }
+  }
+}
+
+@utility bottom-start {
+  position-area: block-end span-inline-end;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: top left;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: bottom left;
+    }
+  }
+}
+
+@utility bottom-end {
+  position-area: block-end span-inline-start;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: top right;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: bottom right;
+    }
+  }
+}
+
+@utility top {
+  position-area: block-start center;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: bottom;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: top;
+    }
+  }
+}
+
+@utility top-start {
+  position-area: block-start span-inline-end;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: bottom left;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: top left;
+    }
+  }
+}
+
+@utility top-end {
+  position-area: block-start span-inline-start;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: bottom right;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: top right;
+    }
+  }
+}
+
+@utility left {
+  position-area: inline-start center;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: right;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: left;
+    }
+  }
+}
+
+@utility left-start {
+  position-area: inline-start span-block-end;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: right top;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: left top;
+    }
+  }
+}
+
+@utility left-end {
+  position-area: inline-start span-block-start;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: right bottom;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: left bottom;
+    }
+  }
+}
+
+@utility right {
+  position-area: inline-end center;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: left;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: right;
+    }
+  }
+}
+
+@utility right-start {
+  position-area: inline-end span-block-end;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: left top;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: right top;
+    }
+  }
+}
+
+@utility right-end {
+  position-area: inline-end span-block-start;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: left bottom;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: right bottom;
+    }
+  }
+}

package/types/index.d.ts

@@ -85,34 +85,7 @@ declare module 'winduum/src/components/compare' {
 	export {};
 }
 
-declare module 'winduum/src/components/details' {
-	export interface DefaultOptions {
-		selector?: string
-		summarySelector?: string
-	}
-
-	export const defaultOptions: DefaultOptions
-	export function showDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-	export function closeDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-	export function toggleDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-
-	export {};
-}
-
 declare module 'winduum/src/components/dialog' {
-	export interface DefaultOptions {
-		remove?: boolean | null
-		closable?: boolean | null
-		modal?: boolean
-		openAttribute?: string
-		closedAttribute?: string
-		contentSelector?: string
-		scrollbarWidthProperty?: string | null
-	}
-
-	export const defaultOptions: DefaultOptions
-	export function showDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>
-	export function closeDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>
 
 	export {};
 }
@@ -215,25 +188,21 @@ declare module 'winduum/src/components/toaster' {
 }
 
 declare module 'winduum/src/components/popover' {
-	import type { FlipOptions, Middleware, OffsetOptions, Placement, ShiftOptions } from '@floating-ui/dom';
-	export interface ShowPopoverOptions {
-		anchorSelector: string,
-		openAttribute?: string
-		compute?: boolean
-		placement?: Placement
-		middleware?: Array<Middleware | null | undefined | false>
-		offset?: OffsetOptions
-		flip?: FlipOptions
-		shift?: ShiftOptions
-	}
-
-	export interface HidePopoverOptions {
-		openAttribute?: string
-	}
-
-	export function showPopover(element: HTMLElement | Element, options?: ShowPopoverOptions): Promise<void>
-	export function hidePopover(element: HTMLElement | Element): Promise<void>
-	export function togglePopover(element: HTMLElement | Element, options?: ShowPopoverOptions): Promise<void>
+	import type { ComputePositionConfig } from '@floating-ui/dom';
+	import type { Placement } from '@floating-ui/utils';
+  export function computePositionPopover(
+	referenceElement: HTMLElement,
+	floatingElement: HTMLElement & { $currentPlacement?: string },
+	placement: Placement,
+	options?: ComputePositionConfig | boolean
+  ): Promise<void>
+
+  export function autoUpdatePopover(
+	referenceElement: HTMLElement,
+	floatingElement: HTMLElement,
+	placement: Placement,
+	options?: ComputePositionConfig | boolean
+  ): Promise<() => void>
 
 	export {};
 }

package/types/index.d.ts.map

@@ -23,13 +23,6 @@
 		"setPosition",
 		"setKeyboardStep",
 		"setMouseStep",
-		"DefaultOptions",
-		"defaultOptions",
-		"showDetails",
-		"closeDetails",
-		"toggleDetails",
-		"showDialog",
-		"closeDialog",
 		"ScrollDrawerOptions",
 		"showDrawer",
 		"closeDrawer",
@@ -48,11 +41,8 @@
 		"closeToast",
 		"showToast",
 		"closeToaster",
-		"ShowPopoverOptions",
-		"HidePopoverOptions",
-		"showPopover",
-		"hidePopover",
-		"togglePopover",
+		"computePositionPopover",
+		"autoUpdatePopover",
 		"SetTrackPropertyOptions",
 		"SetValueOptions",
 		"SetOutputOptions",
@@ -67,8 +57,6 @@
 		"../plugin/index.d.ts",
 		"../src/components/carousel/index.d.ts",
 		"../src/components/compare/index.d.ts",
-		"../src/components/details/index.d.ts",
-		"../src/components/dialog/index.d.ts",
 		"../src/components/drawer/index.d.ts",
 		"../src/components/form/index.d.ts",
 		"../src/components/tabs/index.d.ts",
@@ -91,10 +79,8 @@
 		null,
 		null,
 		null,
-		null,
-		null,
 		null
 	],
-	"mappings": ";;kBAEiBA,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBjBC,aAAaA;;yBAEFC,YAAYA;;;;;;kBCxBnBC,sBAAsBA;;;;;;;;kBAQtBC,yBAAyBA;;;;;;kBAMzBC,qBAAqBA;;;;;;;;kBAQrBC,uBAAuBA;;;;;kBAKvBC,mBAAmBA;;;;iBAIpBC,UAAUA;iBACVC,UAAUA;iBACVC,QAAQA;iBACRC,YAAYA;iBACZC,eAAeA;iBACfC,cAAcA;iBACdC,kBAAkBA;iBAClBC,gBAAgBA;iBAChBC,YAAYA;;;;;;kBCvCXC,kBAAkBA;;;;;iBAKnBC,WAAWA;iBACXC,eAAeA;iBACfC,YAAYA;;;;;;kBCPXC,cAAcA;;;;;cAKlBC,cAAcA;iBACXC,WAAWA;iBACXC,YAAYA;iBACZC,aAAaA;;;;;;kBCRZJ,cAAcA;;;;;;;;;;cAUlBC,cAAcA;iBACXI,UAAUA;iBACVC,WAAWA;;;;;;kBCZVC,mBAAmBA;;;;;;;;;;iBAUpBC,UAAUA;iBACVC,WAAWA;iBACXC,gBAAgBA;iBAChBC,sBAAsBA;iBACtBC,iBAAiBA;iBACjBC,YAAYA;;;;;;kBCfXC,mBAAmBA;;;;;;;;kBAQnBC,oBAAoBA;;;;;;;;;;;;;;;;;;;iBAmBrBC,YAAYA;iBACZC,aAAaA;;;;;;WC5BnBC,gBAAgBA;;;;;iBAKVC,SAASA;;;;;;kBCLRC,gBAAgBA;;;;;;;kBAOhBC,iBAAiBA;;;;;;iBAMlBC,UAAUA;iBACVC,SAASA;;;;;;kBCdRF,iBAAiBA;;;;;iBAKlBG,YAAYA;;;;;;;kBCHXC,kBAAkBA;;;;;;;;;;;kBAWlBC,kBAAkBA;;;;iBAInBC,WAAWA;iBACXC,WAAWA;iBACXC,aAAaA;;;;;;kBCnBZC,uBAAuBA;;;;;;;kBAOvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;;;kBCnBbC,eAAeA;;;;;;iBAMhBC,UAAUA;;;;;;iBCNVC,UAAUA",
+	"mappings": ";;kBAEiBA,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBjBC,aAAaA;;yBAEFC,YAAYA;;;;;;kBCxBnBC,sBAAsBA;;;;;;;;kBAQtBC,yBAAyBA;;;;;;kBAMzBC,qBAAqBA;;;;;;;;kBAQrBC,uBAAuBA;;;;;kBAKvBC,mBAAmBA;;;;iBAIpBC,UAAUA;iBACVC,UAAUA;iBACVC,QAAQA;iBACRC,YAAYA;iBACZC,eAAeA;iBACfC,cAAcA;iBACdC,kBAAkBA;iBAClBC,gBAAgBA;iBAChBC,YAAYA;;;;;;kBCvCXC,kBAAkBA;;;;;iBAKnBC,WAAWA;iBACXC,eAAeA;iBACfC,YAAYA;;;;;;;;;;;kBCPXC,mBAAmBA;;;;;;;;;;iBAUpBC,UAAUA;iBACVC,WAAWA;iBACXC,gBAAgBA;iBAChBC,sBAAsBA;iBACtBC,iBAAiBA;iBACjBC,YAAYA;;;;;;kBCfXC,mBAAmBA;;;;;;;;kBAQnBC,oBAAoBA;;;;;;;;;;;;;;;;;;;iBAmBrBC,YAAYA;iBACZC,aAAaA;;;;;;WC5BnBC,gBAAgBA;;;;;iBAKVC,SAASA;;;;;;kBCLRC,gBAAgBA;;;;;;;kBAOhBC,iBAAiBA;;;;;;iBAMlBC,UAAUA;iBACVC,SAASA;;;;;;kBCdRF,iBAAiBA;;;;;iBAKlBG,YAAYA;;;;;;;;kBCFJC,sBAAsBA;;;;;;;kBAOtBC,iBAAiBA;;;;;;;;;;;kBCVxBC,uBAAuBA;;;;;;;kBAOvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;;;kBCnBbC,eAAeA;;;;;;iBAMhBC,UAAUA;;;;;;iBCNVC,UAAUA",
 	"ignoreList": []
 }

package/src/components/details/index.d.ts

@@ -1,9 +0,0 @@
-export interface DefaultOptions {
-    selector?: string
-    summarySelector?: string
-}
-
-export const defaultOptions: DefaultOptions
-export function showDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-export function closeDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-export function toggleDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>

package/src/components/details/index.js

@@ -1,78 +0,0 @@
-/**
- * @type {import("./").DefaultOptions}
- */
-export const defaultOptions = {
-  selector: 'details',
-  summarySelector: 'summary',
-}
-
-/**
- * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./").DefaultOptions} options
- * @returns Promise<void>
- */
-export const showDetails = async (element, options = {}) => {
-  options = {
-    ...defaultOptions,
-    ...options,
-  }
-
-  const details = element.closest(options.selector)
-  const { down } = await import('slide-element')
-  const content = details.querySelector(options.summarySelector).nextElementSibling
-
-  details._isHiding = false
-  details.open = true
-
-  await down(content, {
-    display: '',
-  })
-}
-
-/**
- * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./").DefaultOptions} options
- * @returns Promise<void>
- */
-export const closeDetails = async (element, options = {}) => {
-  options = {
-    ...defaultOptions,
-    ...options,
-  }
-
-  const details = element.closest(options.selector)
-  const { up } = await import('slide-element')
-  const content = details.querySelector(options.summarySelector).nextElementSibling
-
-  details._isHiding = true
-
-  await up(content, {
-    display: '',
-  })
-
-  details._isHiding && (details.open = false)
-  details._isHiding = false
-}
-
-/**
- * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./").DefaultOptions} options
- * @returns Promise<void>
- */
-export const toggleDetails = async (element, options = {}) => {
-  options = {
-    ...defaultOptions,
-    ...options,
-  }
-
-  const details = element.closest(options.selector)
-
-  if (details._isHiding && !element.checked) return
-
-  if (element.checked ?? !details.open) {
-    await showDetails(element, options)
-  }
-  else {
-    await closeDetails(element, options)
-  }
-}

package/src/components/dialog/index.d.ts

@@ -1,13 +0,0 @@
-export interface DefaultOptions {
-    remove?: boolean | null
-    closable?: boolean | null
-    modal?: boolean
-    openAttribute?: string
-    closedAttribute?: string
-    contentSelector?: string
-    scrollbarWidthProperty?: string | null
-}
-
-export const defaultOptions: DefaultOptions
-export function showDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>
-export function closeDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>