winduum 3.0.0-next.1 → 3.0.0-next.2

package/src/components/carousel/index.js

@@ -1,227 +1,93 @@
 /**
- * @param {HTMLElement | Element} element
- * @param {number} index
- * @returns void
- */
-export const scrollTo = (element, index = 0) => {
-  const scrollPaddingLeft = parseInt(getComputedStyle(element).scrollPaddingLeft)
-
-  element.scroll({ left: element?.children[index]?.offsetLeft - (isNaN(scrollPaddingLeft) ? 0 : scrollPaddingLeft) })
-}
-
-/**
- * @param {HTMLElement | Element & { _activeIndex: number }} element
+ * @param {HTMLElement} element
+ * @param {object} options
+ * @param {number} [options.direction=1]
+ * @param {number} [options.distance]
+ * @param {'left' | 'top'} [options.position='left']
+ * @param {number} [options.ratio=0.85]
  * @returns void
  */
-export const scrollPrev = (element) => {
-  scrollTo(element, element._activeIndex - 1)
-}
-
-/**
- * @param {HTMLElement | Element & { _activeIndex: number }} element
- * @returns void
- */
-export const scrollNext = (element) => {
-  scrollTo(element, element._activeIndex + 1)
-}
-
-/**
- * @param {HTMLElement | Element} element
- * @param {number} scrollWidth
- * @param {boolean} mathFloor
- * @returns number
- */
-export const getItemCount = (element, scrollWidth = element.scrollWidth - element.clientWidth, mathFloor = false) => {
-  const gap = parseInt(getComputedStyle(element).rowGap)
-  const mathRound = (value, floor) => floor ? Math.floor(value) : Math.ceil(value)
-
-  return [...element.children].reduce((count, children) => {
-    if (mathRound(scrollWidth / (children.offsetWidth + (isNaN(gap) ? 0 : gap)), mathFloor) > count) {
-      return count + 1
-    }
-    else {
-      return count
-    }
-  }, 0) + 1
-}
-
-/**
- * @param {HTMLElement | Element} element
- * @param {import("./").ObserveCarouselOptions} options
- * @returns IntersectionObserver
- */
-export const observeCarousel = (element, options = {}) => {
-  options = {
-    visibleAttribute: 'data-visible',
-    observerOptions: {},
-    ...options,
-  }
-
-  element._observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      entry.target.toggleAttribute(options.visibleAttribute, entry.isIntersecting)
-    })
-
-    const activeElement = [...element.children].find(children => children.hasAttribute(options.visibleAttribute))
-
-    if (activeElement) {
-      element._activeIndex = [...element.children].indexOf(activeElement)
-    }
-  }, {
-    root: element,
-    threshold: 0.75,
-    ...options.observerOptions,
+export const scrollBy = (element, { direction = 1, distance, position = 'left', ratio = 0.85 }) => {
+  element.scrollBy({
+    [position]: (distance ?? element.clientWidth * ratio) * direction,
   })
-
-  ;[...element.children].forEach(children => element._observer.observe(children))
-
-  return element._observer
 }
 
 /**
- * @param {HTMLElement | Element} element
- * @param {import("./").ScrollCarouselOptions} options
+ * @param {HTMLElement} element
+ * @param {object} options
+ * @param {HTMLButtonElement | null} [options.prevElement]
+ * @param {HTMLButtonElement | null} [options.nextElement]
+ * @param {boolean} [options.scrollStart]
+ * @param {boolean} [options.scrollEnd]
+ * @param {boolean} [options.scrollNone]
  * @returns void
  */
-export const scrollCarousel = (element, options = {}) => {
-  options.pagination = {
-    activeAttribute: 'data-active',
-    ...options.pagination,
-  }
-
-  const activeItem = getItemCount(element, element.scrollLeft, element.scrollLeft < element._lastScrollLeft)
-  const activeItemMax = getItemCount(element)
+export const toggleScrollState = (element, { prevElement, nextElement, scrollStart, scrollEnd, scrollNone }) => {
+  scrollStart ??= element.scrollLeft <= 0
+  scrollEnd ??= element.scrollLeft >= element.scrollWidth - element.clientWidth
+  scrollNone ??= !(element.scrollWidth - element.clientWidth)
 
-  if (options?.pagination?.element) {
-    ;[...options.pagination.element.children].forEach(children => children.removeAttribute(options.pagination.activeAttribute))
+  if (prevElement) prevElement.disabled = scrollStart
+  if (nextElement) nextElement.disabled = scrollEnd
 
-    options.pagination.element.children[activeItem - 1]?.setAttribute(options.pagination.activeAttribute, '')
-  }
-
-  if (options.progressElement) {
-    options.progressElement.value = activeItem / activeItemMax * 100
-  }
-
-  if (options.counterMinElement) {
-    options.counterMinElement.innerHTML = `${activeItem}`
-  }
-
-  if (options.counterMaxElement) {
-    options.counterMaxElement.innerHTML = `${activeItemMax}`
-  }
-
-  element._lastScrollLeft = element.scrollLeft <= 0 ? 0 : element.scrollLeft
+  element.toggleAttribute('data-scroll-start', scrollStart)
+  element.toggleAttribute('data-scroll-end', scrollEnd)
+  element.toggleAttribute('data-scroll-none', scrollNone)
 }
 
 /**
- * @param {HTMLElement | Element} element
- * @param {import("./").PaginationCarouselOptions} options
+ * @param {HTMLElement} element
+ * @param {number} index
+ * @param {string} [attributeName='data-current']
  * @returns void
  */
-export const paginationCarousel = (element, options = {}) => {
-  options = {
-    itemContent: '<div aria-hidden="true"></div>',
-    activeAttribute: 'data-active',
-    ...options,
-  }
-
-  if (!options.element) return
-
-  options.element.insertAdjacentHTML('beforeend', [...Array(getItemCount(element))].map(
-    () => options.itemContent,
-  ).join(''))
-
-  ;[...options.element.children].forEach((children, i) => {
-    (i === 0) && children.setAttribute(options.activeAttribute, '')
-    children.addEventListener('click', ({ currentTarget }) => {
-      scrollTo(element, [...options.element.children].indexOf(currentTarget))
-    })
-  })
+export const setCurrentAttribute = (element, index, attributeName = 'aria-current') => {
+  element.querySelector(`[${attributeName}]`)?.removeAttribute(attributeName)
+  element.children[index].setAttribute(attributeName, 'true')
 }
 
 /**
- * @param {HTMLElement | Element} element
- * @param {import("./").AutoplayCarouselOptions} options
+ * @param {HTMLElement & { _markerIndex?: number | null }} element
+ * @param {HTMLElement} target
+ * @param {HTMLElement | null} markerGroupElement
  * @returns void
  */
-export const autoplayCarousel = (element, options = {}) => {
-  options = {
-    delay: 4000,
-    pauseElements: [],
-    ...options,
-  }
+export const setSnappedAttribute = (element, target, markerGroupElement) => {
+  const snappedIndex = [...element.children].indexOf(target)
 
-  let paused
+  setCurrentAttribute(element, snappedIndex, 'data-snapped')
 
-  options.pauseElements.forEach((element) => {
-    element?.addEventListener('mouseenter', () => (paused = true))
-    element?.addEventListener('mouseleave', () => (paused = false))
-  })
+  if (markerGroupElement) {
+    const markerTarget = markerGroupElement.querySelector(`[href="#${target.id}"]`)
+    const index = element._markerIndex ?? (markerTarget && [...markerGroupElement.children].indexOf(markerTarget)) ?? snappedIndex
 
-  setInterval(() => {
-    if (paused) return
+    setCurrentAttribute(markerGroupElement, index)
 
-    if (element.scrollLeft < element.scrollWidth - element.clientWidth) {
-      scrollNext(element)
-    }
-    else {
-      scrollTo(element, 0)
-    }
-  }, options.delay)
+    element._markerIndex = null
+  }
 }
 
 /**
- * @param {HTMLElement | Element & { _activeIndex: number }} element
- * @param {import("./").DragCarouselOptions} options
+ * @param {HTMLElement & { _markerIndex?: number | null }} element
+ * @param {HTMLElement | HTMLLinkElement} target
+ * @param {HTMLElement} markerGroupElement
+ * @param {ScrollIntoViewOptions} scrollIntoViewOptions
  * @returns void
  */
-export const dragCarousel = (element, options = {}) => {
-  options = {
-    activeAttribute: 'data-grabbing',
-    ...options,
-  }
-
-  if (!matchMedia('(hover: hover) and (pointer: fine)').matches) {
-    return
-  }
-
-  let isDown
-  let startX
-  let scrollLeft
-  let timeout
-
-  const endGrabbing = () => {
-    isDown = false
-    element.removeAttribute(options.activeAttribute)
-
-    scrollTo(element, element._activeIndex)
-
-    clearTimeout(timeout)
-
-    timeout = setTimeout(() => {
-      element.style.scrollSnapType = ''
-    }, 300)
-  }
-
-  element.addEventListener('mouseleave', endGrabbing)
-
-  element.addEventListener('mouseup', endGrabbing)
-
-  element.addEventListener('mousedown', ({ pageX }) => {
-    isDown = true
-    startX = pageX - element.offsetLeft
-    scrollLeft = element.scrollLeft
-  })
+export const scrollToMarker = (element, target, markerGroupElement, scrollIntoViewOptions = {}) => {
+  const snappedTarget = document.getElementById(target.getAttribute('href').slice(1))
+  const markerTargetIndex = [...markerGroupElement.children].indexOf(target)
+  const index = snappedTarget ? [...element.children].indexOf(snappedTarget) : markerTargetIndex
 
-  element.addEventListener('mousemove', (e) => {
-    if (!isDown) return
-    e.preventDefault()
+  element._markerIndex = markerTargetIndex
 
-    const x = e.pageX - element.offsetLeft
+  setCurrentAttribute(markerGroupElement, markerTargetIndex)
 
-    element.setAttribute(options.activeAttribute, '')
-    element.style.scrollSnapType = 'unset'
-    element.scroll({ left: scrollLeft - ((x - startX) * 1.25), behavior: 'instant' })
-    element.ondragstart = e => e.preventDefault()
+  element.children[index]?.scrollIntoView({
+    inline: 'start',
+    block: 'nearest',
+    container: 'nearest',
+    ...scrollIntoViewOptions,
   })
 }

package/src/components/dialog/content.css

@@ -6,7 +6,6 @@
   transition: var(--transition-transform), var(--transition-opacity) allow-discrete, var(--transition-display) allow-discrete;
   margin: auto;
   pointer-events: auto;
-  height: 200vh;
 
   @starting-style {
     transform: translateY(-2rem);

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/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.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;
+}