winduum 2.2.28 → 3.0.0-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "2.2.28",
+  "version": "3.0.0-next.2",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -25,11 +25,13 @@
     "@stylistic/stylelint-config": "^5.0.0",
     "@tailwindcss/vite": "^4.3.0",
     "@vitejs/plugin-vue": "^6.0.7",
+    "@webreflection/custom-elements-builtin": "^0.4.1",
     "autoprefixer": "^10.5.0",
     "dts-buddy": "^0.8.0",
-    "eslint": "^10.4.0",
+    "eslint": "^10.4.1",
     "fast-glob": "^3.3.3",
     "globals": "^17.6.0",
+    "invokers-polyfill": "^1.0.3",
     "postcss": "^8.5.15",
     "postcss-custom-media": "^12.0.1",
     "postcss-import": "^16.1.1",
@@ -39,8 +41,9 @@
     "stylelint-config-standard": "^40.0.0",
     "tailwindcss": "^4.3.0",
     "typescript": "^6",
-    "vite": "^8.0.14",
-    "vue": "^3.5.34"
+    "vite": "^8.0.16",
+    "vue": "^3.5.35",
+    "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/carousel/content.css

@@ -15,6 +15,7 @@
   & > :where(*) {
     flex: 0 0 auto;
     scroll-snap-align: start;
+    scroll-snap-stop: always;
 
     &:last-child {
       scroll-snap-align: end;

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