winduum 3.0.0-next.1 → 3.0.0-next.11

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

@@ -1,40 +1,19 @@
-export interface ObserveCarouselOptions {
-    visibleAttribute?: string
-    observerOptions?: {
-        rootMargin?: string
-        threshold?: number | number[]
-    }
-}
-
-export interface PaginationCarouselOptions {
-    element?: HTMLElement | Element
-    itemContent?: string
-    activeAttribute?: string
-}
-
-export interface ScrollCarouselOptions {
-    observe?: ObserveCarouselOptions
-    pagination?: PaginationCarouselOptions
-    progressElement?: HTMLProgressElement | Element
-    counterMinElement?: HTMLElement | Element
-    counterMaxElement?: HTMLElement | Element
-}
+export type CarouselPlacement = 'left' | 'right' | 'top' | 'bottom'
 
-export interface AutoplayCarouselOptions {
-    delay?: number
-    pauseElements?: HTMLElement[] | Element[]
+export interface ScrollByOptions {
+    direction?: number
+    vertical?: boolean
+    ratio?: number
 }
 
-export interface DragCarouselOptions {
-    activeAttribute?: string
+export interface ToggleScrollStateOptions {
+    prevElement?: HTMLButtonElement | null
+    nextElement?: HTMLButtonElement | null
+    vertical?: boolean
 }
 
-export function scrollPrev(element: HTMLElement | Element): void
-export function scrollNext(element: HTMLElement | Element): void
-export function scrollTo(element: HTMLElement | Element, selected?: number): void
-export function getItemCount(element: HTMLElement | Element, scrollWidth?: number, mathFloor?: boolean): number
-export function observeCarousel(element: HTMLElement | Element, options?: ObserveCarouselOptions): void
-export function scrollCarousel(element: HTMLElement | Element, options?: ScrollCarouselOptions): void
-export function paginationCarousel(element: HTMLElement | Element, options?: PaginationCarouselOptions): void
-export function autoplayCarousel(element: HTMLElement | Element, options?: AutoplayCarouselOptions): void
-export function dragCarousel(element: HTMLElement | Element, options?: DragCarouselOptions): void
+export function scrollBy(element: HTMLElement, options?: ScrollByOptions): void
+export function toggleScrollState(element: HTMLElement, options?: ToggleScrollStateOptions): void
+export function setCurrentAttribute(element: HTMLElement, index: number, attributeName?: string): void
+export function setSnappedAttribute(element: HTMLElement, target: HTMLElement, markerGroupElement?: HTMLElement | null): void
+export function scrollToMarker(element: HTMLElement, target: HTMLElement, markerGroupElement: HTMLElement, scrollIntoViewOptions?: ScrollIntoViewOptions): void

package/src/components/carousel/index.js

@@ -1,227 +1,171 @@
 /**
- * @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
- * @returns void
+ * @param {HTMLElement} element
+ * @param {boolean} vertical
+ * @returns {{ position: number, always: boolean }[]}
  */
-export const scrollPrev = (element) => {
-  scrollTo(element, element._activeIndex - 1)
+const getSnapPositions = (element, vertical) => {
+  const elementRect = element.getBoundingClientRect()
+  const scrollPosition = vertical ? element.scrollTop : element.scrollLeft
+  const clientSize = vertical ? element.clientHeight : element.clientWidth
+  const maxScroll = (vertical ? element.scrollHeight : element.scrollWidth) - clientSize
+
+  return [...element.children]
+    .map((child) => {
+      const childRect = child.getBoundingClientRect()
+      const start = (vertical ? childRect.top - elementRect.top : childRect.left - elementRect.left) + scrollPosition
+      const size = vertical ? childRect.height : childRect.width
+      const { scrollSnapAlign, scrollSnapStop } = getComputedStyle(child)
+      const align = scrollSnapAlign.split(' ').at(vertical ? 0 : -1)
+
+      if (align === 'none') return null
+
+      const position = align === 'end'
+        ? start + size - clientSize
+        : align === 'center'
+          ? start + (size - clientSize) / 2
+          : start
+
+      return {
+        position: Math.max(0, Math.min(position, maxScroll)),
+        always: scrollSnapStop === 'always',
+      }
+    })
+    .filter(snapPosition => snapPosition !== null)
 }
 
 /**
- * @param {HTMLElement | Element & { _activeIndex: number }} element
+ * @param {HTMLElement} element
+ * @param {object} options
+ * @param {number} [options.direction=1]
+ * @param {boolean} [options.vertical=false]
+ * @param {number} [options.ratio=0.85]
  * @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
+export const scrollBy = (element, { direction = 1, vertical = false, ratio = 0.85 }) => {
+  const { distance, position } = vertical
+    ? {
+        distance: element.clientHeight * ratio,
+        position: 'top',
+      }
+    : {
+        distance: element.clientWidth * ratio,
+        position: 'left',
+      }
+
+  /* Safari does not snap after programmatic scrolls — browsers with native
+     scroll snap events are the ones that do, others get the exact snap offset */
+  if (!('onscrollsnapchanging' in window)) {
+    const scrollPosition = vertical ? element.scrollTop : element.scrollLeft
+    const targetPosition = scrollPosition + distance * direction
+    const passes = snapPosition => direction > 0 ? snapPosition.position > scrollPosition + 1 : snapPosition.position < scrollPosition - 1
+    const closer = (a, b) => direction > 0 ? a.position < b.position : a.position > b.position
+    const snapPositions = getSnapPositions(element, vertical).filter(passes)
+
+    if (snapPositions.length) {
+      let target = snapPositions.reduce((closest, current) =>
+        Math.abs(current.position - targetPosition) < Math.abs(closest.position - targetPosition) ? current : closest,
+      )
+
+      /* scroll-snap-stop: always must not be passed over */
+      const stop = snapPositions.reduce((first, current) =>
+        current.always && (!first || closer(current, first)) ? current : first, null)
+
+      if (stop && closer(stop, target)) target = stop
+
+      element.scrollTo({
+        [position]: target.position,
+      })
+
+      return
     }
-    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,
+  element.scrollBy({
+    [position]: distance * 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} vertical
  * @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)
-
-  if (options?.pagination?.element) {
-    ;[...options.pagination.element.children].forEach(children => children.removeAttribute(options.pagination.activeAttribute))
-
-    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
+export const toggleScrollState = (element, { prevElement, nextElement, vertical = false }) => {
+  const { scrollStart, scrollEnd, scrollNone } = vertical
+    ? {
+        scrollStart: element.scrollTop <= 0,
+        scrollEnd: element.scrollTop >= element.scrollHeight - element.clientHeight,
+        scrollNone: !(element.scrollHeight - element.clientHeight),
+      }
+    : {
+        scrollStart: element.scrollLeft <= 0,
+        scrollEnd: element.scrollLeft >= element.scrollWidth - element.clientWidth,
+        scrollNone: !(element.scrollWidth - element.clientWidth),
+      }
+
+  if (prevElement) prevElement.disabled = scrollStart
+  if (nextElement) nextElement.disabled = scrollEnd
+
+  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/check/props/default.css

@@ -3,7 +3,7 @@
   --x-check-size: 1.25rem;
   --x-check-gap: calc(var(--spacing) * 3);
   --x-check-font-size: var(--text-sm);
-  --x-check-line-height: calc(1em + 0.25rem);
+  --x-check-line-height: 1.25rem;
   --x-check-border-radius: var(--radius-md);
   --x-check-border-width: 1px;
   --x-check-background-color: currentcolor;

package/src/components/control/props/select-picker.css

@@ -5,12 +5,12 @@
   --x-control-select-picker-border-color: currentcolor;
   --x-control-select-picker-background-color: var(--color-body-primary);
   --x-control-select-picker-margin-block: 0.375rem;
-  --x-control-select-picker-padding-block: 0.375rem;
-  --x-control-select-picker-padding-inline: 0.375rem;
+  --x-control-select-picker-padding-block: calc(var(--spacing) * 1);
+  --x-control-select-picker-padding-inline: calc(var(--spacing) * 1);
   --x-control-select-picker-gap: 0.25rem;
   --x-control-select-picker-scrollbar-color: currentcolor var(--color-body-primary);
-  --x-control-select-option-padding-block: 0.75rem;
-  --x-control-select-option-padding-inline: 0.75rem;
+  --x-control-select-option-padding-block: calc(var(--spacing) * 2.5);
+  --x-control-select-option-padding-inline: calc(var(--spacing) * 3);
   --x-control-select-option-border-radius: var(--radius-md);
   --x-control-select-option-hocus-background-color: var(--color-body-secondary);
 }

package/src/components/control/props/select.css

@@ -1,6 +1,6 @@
 :root,
 :host {
-  --x-control-select-icon-size: 1.25rem;
-  --x-control-select-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>');
+  --x-control-select-icon-size: 1rem;
+  --x-control-select-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>');
   --x-control-select-icon-margin-inline-end: -0.25rem;
 }

package/src/components/control/tel-country-code.css

@@ -0,0 +1,24 @@
+.x-control {
+  &:has([autocomplete="tel-country-code"]) {
+    :where(select) {
+      @media not (scripting: none) {
+        font-size: 0;
+      }
+
+      + :where(span) {
+        pointer-events: none;
+
+        @media (scripting: none) {
+          display: none;
+        }
+      }
+
+      :where(option) {
+        &::before {
+          content: attr(data-icon);
+          margin-inline-end: 0.5ch;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+export interface ToggleDetailsOptions {
+    selector?: string
+}
+
+export function toggleDetails(element: HTMLInputElement, options?: ToggleDetailsOptions): void

package/src/components/details/index.js

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

@@ -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/dialog/index.js

@@ -5,3 +5,7 @@ document.documentElement.addEventListener('click', ({ target }) => {
     target?.close()
   }
 })
+
+new ResizeObserver(() => {
+  document.documentElement.style.setProperty('--default-scrollbar-width', `${Math.max(0, window.innerWidth - document.body.clientWidth)}px`)
+}).observe(document.body)

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