winduum 2.2.28 → 3.0.0-next.10

package/src/components/details/index.js

@@ -1,78 +1,13 @@
 /**
- * @type {import("./").DefaultOptions}
+ * @param {HTMLInputElement} element
+ * @param {import("./").ToggleDetailsOptions} options
+ * @returns void
  */
-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,
+export const toggleDetails = (element, options = {}) => {
+  const { selector } = {
+    selector: 'details',
     ...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)
-  }
+  element?.closest(selector)?.toggleAttribute('open', element.checked)
 }

package/src/components/details/readme.md

@@ -1,8 +1,5 @@
 # [Details](https://winduum.dev/docs/components/details.html)
 
-## Dependencies
-* [slide-element](https://www.npmjs.com/package/slide-element)
-
 ## Installation
 ```shell
 npm i winduum
@@ -10,7 +7,7 @@ npm i winduum
 Learn more how to set up Winduum [here](https://winduum.dev/docs/).
 
 ```js
-import { showDetails } from 'winduum/src/components/details/index.js'
+import { toggleDetails } from 'winduum/src/components/details/index.js'
 ```
 
 ### Local imports
@@ -18,7 +15,7 @@ By default, imports are directly from `npm` so you can leverage updates.
 You can also copy and paste the code from this directory to your project and remap the imports to local.
 
 ```js
-import { showDetails } from '@/components/details/assets/index.js'
+import { toggleDetails } from '@/components/details/assets/index.js'
 ```
 
 ### Docs

package/src/components/dialog/content.css

@@ -3,10 +3,16 @@
   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;
 
-  :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/drawer.css

@@ -0,0 +1,20 @@
+.x-dialog {
+  &:is(.drawer) {
+    timeline-scope: --x-drawer-backdrop;
+    animation: x-drawer-backdrop-opacity linear both;
+    animation-timeline: --x-drawer-backdrop;
+
+    &::backdrop {
+      background-color:
+        color-mix(
+          in var(--x-drawer-background-color-space, srgb),
+          var(--color-dark) calc(var(--x-drawer-backdrop-opacity, 0) * var(--x-drawer-background-color-opacity)),
+          var(--x-drawer-background-color-mix, transparent)
+        );
+
+      @supports not (animation-timeline: --x) {
+        --x-drawer-backdrop-opacity: 1;
+      }
+    }
+  }
+}

package/src/components/dialog/index.css

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

package/src/components/dialog/index.js

@@ -1,82 +1,11 @@
-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
-  }
-
-  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,
+  if (target?.matches('dialog[open]') && !document.activeElement.matches('input,textarea') && closedBy && closedBy !== 'none') {
+    target?.close()
   }
+})
 
-  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()
-}
+new ResizeObserver(() => {
+  document.documentElement.style.setProperty('--default-scrollbar-width', `${Math.max(0, window.innerWidth - document.body.clientWidth)}px`)
+}).observe(document.body)

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/drawer/content.css

@@ -1,7 +1,8 @@
 .x-drawer-content {
+  background-color: var(--x-drawer-content-background-color);
+  padding: var(--x-drawer-content-padding-block) var(--x-drawer-content-padding-inline);
   inline-size: var(--x-drawer-content-inline-size);
   block-size: var(--x-drawer-content-block-size);
-  background-color: var(--x-drawer-content-background-color);
   flex-shrink: 0;
   scroll-snap-align: end;
 }

package/src/components/drawer/default.css

@@ -1,40 +1,22 @@
 .x-drawer {
-  z-index: var(--x-drawer-z-index, var(--z-index-30));
-  background-color:
-    color-mix(
-      in var(--x-drawer-background-color-space, srgb),
-      var(--color-dark) calc(var(--background-color-opacity, 0) * var(--x-drawer-background-color-opacity)),
-      var(--x-drawer-background-color-mix, transparent)
-    );
   position: fixed;
   inset: 0;
-  display: flex;
-  overflow: auto hidden;
-  scrollbar-width: none;
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
+  width: 100dvw;
+  height: 100dvh;
+  timeline-scope: --x-drawer-backdrop;
+  animation: x-drawer-backdrop-opacity linear both;
+  animation-timeline: --x-drawer-backdrop;
 
-  &:not([open]),
   &::backdrop {
-    display: none;
-  }
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &::after {
-    content: "";
-    min-inline-size: 100vw;
-    scroll-snap-align: end;
-  }
-
-  &.flex-col {
-    overflow: hidden auto;
+    background-color:
+      color-mix(
+        in var(--x-drawer-background-color-space, srgb),
+        var(--color-dark) calc(var(--x-drawer-backdrop-opacity, 0) * var(--x-drawer-background-color-opacity)),
+        var(--x-drawer-background-color-mix, transparent)
+      );
 
-    &::after {
-      min-block-size: 100dvh;
+    @supports not (animation-timeline: --x) {
+      --x-drawer-backdrop-opacity: 1;
     }
   }
 }

package/src/components/drawer/index.css

@@ -1,4 +1,7 @@
 @import "./props/default.css";
 @import "./props/content.css";
+@import "./keyframes/default.css";
 @import "./default.css";
 @import "./content.css";
+@import "./scroller.css";
+@import "./noscript.css";

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

@@ -1,16 +1,9 @@
-export interface ScrollDrawerOptions {
-    snapClass?: string
-    opacityProperty?: string
-    opacityRatio?: number
-    scrollOpen?: number
-    scrollClose?: number
-    scrollSize?: number
-    scrollDirection?:number
-}
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom'
 
-export function showDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
-export function closeDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
-export function scrollInitDrawer(element: HTMLElement | Element, distance?: number, direction?: 'left' | 'top'): void
-export function toggleDrawerAttributes(element: HTMLDialogElement | Element, state?: 'open' | 'close', snapClass?: string): void
-export function scrollDrawerState(scrollState: number, scrollDirection: number): boolean
-export function scrollDrawer(element: HTMLDialogElement | Element, options?: ScrollDrawerOptions): void
+export function isVerticalDrawer(placement: DrawerPlacement): boolean
+export function scrollDrawer(element: HTMLElement | Element, placement: DrawerPlacement, reverse?: boolean, behavior?: 'auto' | 'instant'): void
+export function showDrawer(element: HTMLElement | Element, placement: DrawerPlacement): Promise<void>
+export function closeDrawer(element: HTMLElement | Element, placement: DrawerPlacement): void
+export function drawerEvents(element: HTMLDialogElement | Element, contentElement: HTMLElement | Element, placement: DrawerPlacement, signal?: AbortSignal): void
+export function drawerObserver(element: HTMLDialogElement | Element, placement: DrawerPlacement): IntersectionObserver
+export function drawerProperties(element: HTMLElement | Element, placement: DrawerPlacement): ['top' | 'left', number, number]

package/src/components/drawer/index.js

@@ -1,85 +1,102 @@
+import { supportsScrollInitialTarget } from '../../supports.js'
 import { nextRepaint } from '../../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,
-  }
-
-  element.style.setProperty(
-    options.opacityProperty,
-    `${Math.min(Math.abs((options.scrollDirection / options.scrollSize) - options.opacityRatio), 1)}`,
+export const drawerObserver = (element, placement) => {
+  const visibleThreshold = 1 / (
+    isVerticalDrawer(placement) ? window.innerHeight : window.innerWidth
   )
 
-  if (scrollDrawerState(options.scrollOpen, options.scrollDirection)) {
-    toggleDrawerAttributes(element, 'open', options.snapClass)
-  }
+  return new IntersectionObserver((entries) => {
+    if (entries.at(-1).intersectionRatio < visibleThreshold) element.close()
+  }, {
+    root: element,
+    threshold: [visibleThreshold, 1],
+  })
+}
 
-  if (scrollDrawerState(options.scrollClose, options.scrollDirection) && !element.inert) {
-    toggleDrawerAttributes(element, 'close', options.snapClass)
-    element.close && element.close()
-  }
+/**
+ * @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]
+
+  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 {
+  &:where(.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;
+}