winduum 2.2.28 → 3.0.0-next.2

package/src/components/drawer/index.js

@@ -1,85 +1,103 @@
-import { nextRepaint } from '../../common.js'
+import { supportsScrollInitialTarget } from '/src/supports.js'
+import { nextRepaint } from '/src/common.js'
 
 /**
- * @param {HTMLElement | Element} element
- * @param {number} distance
- * @param {'top' | 'left'} direction
- * @returns void
+ * @param {'left' | 'right' | 'top' | 'bottom'} placement
+ * @returns boolean
  */
-export const showDrawer = async (element, distance = 0, direction = 'left') => {
-  element.scroll({ [direction]: distance })
+export const isVerticalDrawer = (placement) => {
+  return ['top', 'bottom'].includes(placement)
 }
 
 /**
  * @param {HTMLElement | Element} element
- * @param {number} distance
- * @param {'top' | 'left'} direction
+ * @param {'left' | 'right' | 'top' | 'bottom'} placement
+ * @param {boolean} reverse
+ * @param {'auto' | 'instant'} behavior
  * @returns void
  */
-export const closeDrawer = (element, distance = element.scrollWidth, direction = 'left') => {
-  element.scroll({ [direction]: distance })
+export const scrollDrawer = (element, placement, reverse = false, behavior = 'auto') => {
+  const [direction, distance, closedDistance] = drawerProperties(element, placement)
+
+  element.scroll({ [direction]: reverse ? closedDistance : distance, behavior })
 }
 
 /**
  * @param {HTMLElement | Element} element
- * @param {number} distance
- * @param {'top' | 'left'} direction
+ * @param {'left' | 'right' | 'top' | 'bottom'} placement
  * @returns void
  */
-export const scrollInitDrawer = async (element, distance = element.scrollWidth, direction = 'left') => {
-  element.scroll({ [direction]: distance, behavior: 'instant' })
-  await nextRepaint()
+export const showDrawer = async (element, placement) => {
+  if (!supportsScrollInitialTarget) {
+    scrollDrawer(element, placement, true, 'instant')
+    await nextRepaint()
+  }
+
+  scrollDrawer(element, placement)
 }
 
 /**
  * @param {HTMLElement | Element} element
- * @param {'open' | 'close'} state
- * @param {string} snapClass
+ * @param {'left' | 'right' | 'top' | 'bottom'} placement
  * @returns void
  */
-export const toggleDrawerAttributes = (element, state = 'open', snapClass) => {
-  element.classList[state === 'open' ? 'add' : 'remove'](...snapClass.split(/\s/))
-  element.inert = state === 'close'
-  element.dispatchEvent(new CustomEvent(`x-drawer:${state}`))
+export const closeDrawer = (element, placement) => {
+  scrollDrawer(element, placement, true)
 }
 
 /**
- * @param {number} scrollState
- * @param {number} scrollDirection
- * @returns boolean
+ * @param {HTMLElement | Element} element
+ * @param {HTMLElement | Element} contentElement
+ * @param {AbortSignal} signal
+ * @param {'left' | 'right' | 'top' | 'bottom'} placement
+ * @returns void
  */
-export const scrollDrawerState = (scrollState, scrollDirection) => {
-  return scrollState ? Math.ceil(scrollDirection) >= scrollState : Math.floor(scrollDirection) <= scrollState
+export const drawerEvents = (element, contentElement, placement, signal) => {
+  element.addEventListener('cancel', (event) => {
+    const scroller = element.firstElementChild
+
+    if (scroller.scrollHeight > 0 || scroller.scrollWidth > 0) event.preventDefault()
+
+    closeDrawer(scroller, placement)
+  }, { signal })
+
+  element.addEventListener('click', ({ target }) => {
+    if (!contentElement.contains(target) && !contentElement.isEqualNode(target))
+      closeDrawer(element.firstElementChild, placement)
+  }, { signal })
 }
 
 /**
  * @param {HTMLDialogElement | Element} element
- * @param {import("./").ScrollDrawerOptions} options
- * @returns void
+ * @param {'left' | 'right' | 'top' | 'bottom'} placement
+ * @returns IntersectionObserver
  */
-export const scrollDrawer = (element, options = {}) => {
-  options = {
-    snapClass: 'snap-x snap-mandatory',
-    opacityProperty: '--background-color-opacity',
-    opacityRatio: 1,
-    scrollOpen: 0,
-    scrollClose: element.scrollWidth - element.clientWidth,
-    scrollSize: element.scrollWidth - element.clientWidth,
-    scrollDirection: element.scrollLeft,
-    ...options,
-  }
+export const drawerObserver = (element, placement) => {
+  const visibleThreshold = 1 / (
+    isVerticalDrawer(placement) ? window.innerHeight : window.innerWidth
+  )
 
-  element.style.setProperty(
-    options.opacityProperty,
-    `${Math.min(Math.abs((options.scrollDirection / options.scrollSize) - options.opacityRatio), 1)}`,
+  return new IntersectionObserver((entries) => {
+    if (entries.at(-1).intersectionRatio < visibleThreshold) element.close()
+  }, {
+    root: element,
+    threshold: [visibleThreshold, 1],
+  },
   )
+}
 
-  if (scrollDrawerState(options.scrollOpen, options.scrollDirection)) {
-    toggleDrawerAttributes(element, 'open', options.snapClass)
-  }
+/**
+ * @param {HTMLElement | Element} element
+ * @param {'left' | 'right' | 'top' | 'bottom'} placement
+ * @returns {['top' | 'left', number, number]}
+ */
+export const drawerProperties = (element, placement) => {
+  const [openedDistance, closedDistance] = {
+    left: [0, element.offsetWidth],
+    right: [element.offsetWidth, 0],
+    top: [0, element.offsetHeight],
+    bottom: [element.offsetHeight, 0],
+  }[placement]
 
-  if (scrollDrawerState(options.scrollClose, options.scrollDirection) && !element.inert) {
-    toggleDrawerAttributes(element, 'close', options.snapClass)
-    element.close && element.close()
-  }
+  return [isVerticalDrawer(placement) ? 'top' : 'left', openedDistance, closedDistance]
 }

package/src/components/drawer/keyframes/default.css

@@ -0,0 +1,9 @@
+@keyframes x-drawer-backdrop-opacity {
+  0% {
+    --x-drawer-backdrop-opacity: 1;
+  }
+
+  100% {
+    --x-drawer-backdrop-opacity: 0;
+  }
+}

package/src/components/drawer/noscript.css

@@ -0,0 +1,32 @@
+.x-drawer {
+  @media (scripting: none) {
+    --x-drawer-backdrop-opacity: 1;
+
+    width: fit-content;
+    height: fit-content;
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--ease-in-out);
+    transition-duration: var(--default-transition-duration);
+    transition-behavior: allow-discrete;
+
+    &::backdrop {
+      transition: inherit;
+    }
+
+    &:not([open]) {
+      &::backdrop {
+        opacity: 0%;
+      }
+    }
+
+    @starting-style {
+      &[open] {
+        opacity: 0%;
+
+        &::backdrop {
+          opacity: 0%;
+        }
+      }
+    }
+  }
+}

package/src/components/drawer/nosnap.css

@@ -0,0 +1,32 @@
+.x-drawer {
+  &:is(.no-snap) {
+    --x-drawer-backdrop-opacity: 1;
+
+    width: fit-content;
+    height: fit-content;
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--ease-in-out);
+    transition-duration: var(--default-transition-duration);
+    transition-behavior: allow-discrete;
+
+    &::backdrop {
+      transition: inherit;
+    }
+
+    &:not([open]) {
+      &::backdrop {
+        opacity: 0%;
+      }
+    }
+
+    @starting-style {
+      &[open] {
+        opacity: 0%;
+
+        &::backdrop {
+          opacity: 0%;
+        }
+      }
+    }
+  }
+}

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

@@ -3,6 +3,6 @@
   --x-drawer-content-background-color: var(--color-body-primary);
   --x-drawer-content-padding-block: 2rem;
   --x-drawer-content-padding-inline: 1.5rem;
-  --x-drawer-content-inline-size: 100%;
-  --x-drawer-content-block-size: 100%;
+  --x-drawer-content-inline-size: 50dvw;
+  --x-drawer-content-block-size: 100dvh;
 }

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

@@ -2,3 +2,9 @@
 :host {
   --x-drawer-background-color-opacity: 75%;
 }
+
+@property --x-drawer-backdrop-opacity {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}

package/src/components/drawer/scroller.css

@@ -0,0 +1,32 @@
+.x-drawer-scroller {
+  display: flex;
+  width: inherit;
+  height: inherit;
+  overflow: auto clip;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: none;
+  scroll-snap-type: x mandatory;
+  scroll-timeline: --x-drawer-backdrop x;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::after {
+    content: "";
+    min-inline-size: 100dvw;
+    scroll-snap-align: end;
+    scroll-initial-target: nearest;
+  }
+
+  &:where(.snap-y) {
+    overflow: clip auto;
+    scroll-timeline: --x-drawer-backdrop y;
+
+    &::after {
+      min-block-size: 100dvh;
+    }
+  }
+}

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