winduum 2.2.20 → 3.0.0-next.1

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/src/theme/config/easing.css

@@ -0,0 +1,9 @@
+:root,
+:host {
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-anticipate: cubic-bezier(1, -0.4, 0.35, 0.95);
+  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
+  --ease-emphasized: linear(0, 0.0341 6.4%, 0.1281 11.41%, 0.6604 20.61%, 0.7653 24.59%, 0.8448 30.42%, 0.9155 40.62%, 0.9633 54.99%, 1);
+}

package/src/theme/config/index.css

@@ -1,3 +1,4 @@
+@import "./easing.css";
 @import "./font.css";
 @import "./radius.css";
 @import "./spacing.css";

package/src/theme/config/transition.css

@@ -2,10 +2,7 @@
 :host {
   --default-transition-duration: 150ms;
   --default-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset, visibility, display, overlay;
-  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: var(--default-transition-timing-function);
+  --default-transition-timing-function: var(--ease-in-out);
   --transition-all: all var(--default-transition-duration) var(--default-transition-timing-function);
   --transition-color: color var(--default-transition-duration) var(--default-transition-timing-function);
   --transition-background: background var(--default-transition-duration) var(--default-transition-timing-function);

package/tailwindcss/theme/config/easing.css

@@ -0,0 +1,5 @@
+@theme {
+  --ease-anticipate: cubic-bezier(1, -0.4, 0.35, 0.95);
+  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
+  --ease-emphasized: linear(0, 0.0341 6.4%, 0.1281 11.41%, 0.6604 20.61%, 0.7653 24.59%, 0.8448 30.42%, 0.9155 40.62%, 0.9633 54.99%, 1);
+}

package/tailwindcss/theme/config/index.css

@@ -1,4 +1,5 @@
 @import "./breakpoint.css";
+@import "./easing.css";
 @import "./font.css";
 @import "./radius.css";
 @import "./transition.css";

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