winduum 2.2.28 → 3.0.0-next.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "2.2.28",
+  "version": "3.0.0-next.10",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -23,24 +23,29 @@
     "@floating-ui/dom": "^1.7.6",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@stylistic/stylelint-config": "^5.0.0",
-    "@tailwindcss/vite": "^4.3.0",
+    "@tailwindcss/vite": "^4.3.2",
     "@vitejs/plugin-vue": "^6.0.7",
-    "autoprefixer": "^10.5.0",
-    "dts-buddy": "^0.8.0",
-    "eslint": "^10.4.0",
+    "@webreflection/custom-elements-builtin": "^0.4.1",
+    "autoprefixer": "^10.5.2",
+    "dts-buddy": "^0.8.2",
+    "eslint": "^10.6.0",
     "fast-glob": "^3.3.3",
-    "globals": "^17.6.0",
-    "postcss": "^8.5.15",
+    "globals": "^17.7.0",
+    "interestfor": "^1.0.8",
+    "invokers-polyfill": "^1.0.3",
+    "postcss": "^8.5.16",
     "postcss-custom-media": "^12.0.1",
     "postcss-import": "^16.1.1",
     "postcss-nesting": "^14.0.0",
+    "scrollsnap-events": "^0.1.1",
     "slide-element": "^2.3.1",
-    "stylelint": "^17.12.0",
+    "stylelint": "^17.14.0",
     "stylelint-config-standard": "^40.0.0",
-    "tailwindcss": "^4.3.0",
+    "tailwindcss": "^4.3.2",
     "typescript": "^6",
-    "vite": "^8.0.14",
-    "vue": "^3.5.34"
+    "vite": "^8.1.3",
+    "vue": "^3.5.39",
+    "webuum": "^0.2.1"
   },
   "files": [
     "index.js",
@@ -62,6 +67,9 @@
       "types": "./types/index.d.ts",
       "default": "./src/supports.js"
     },
+    "./polyfill": {
+      "default": "./src/polyfill.js"
+    },
     "./src/*": "./src/*",
     "./tailwindcss/*": "./tailwindcss/*",
     "./dist/*": "./dist/*",
@@ -79,7 +87,6 @@
       "default": "./src/components/details/index.js"
     },
     "./src/components/dialog": {
-      "types": "./src/components/dialog/index.d.ts",
       "default": "./src/components/dialog/index.js"
     },
     "./src/components/drawer": {

package/src/base/defaults.css

@@ -53,12 +53,14 @@
 }
 
 :where(html) {
+  scroll-padding-top: var(--scroll-padding-top);
   color-scheme: var(--default-color-scheme);
   font-family: var(--font-primary);
   font-weight: var(--font-weight-normal);
   block-size: 100%;
   line-height: 1.5;
   text-size-adjust: 100%;
+  container-type: scroll-state;
 
   @media (prefers-reduced-motion: no-preference) {
     scroll-behavior: smooth;
@@ -73,6 +75,7 @@
   display: flex;
   flex-direction: column;
   overflow-x: clip;
+  container-type: inline-size;
 }
 
 [hidden] {

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.d.ts

@@ -1,2 +1,6 @@
 export function nextRepaint(): Promise<void>;
 export function animationsFinished(element: HTMLElement): Promise<any>;
+export const supportsAnchor: boolean;
+export const supportsAnchoredContainer: boolean;
+export const supportsAnchor: boolean;
+export const supportsAnchoredContainer: boolean;

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.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,108 @@
 /**
- * @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
- */
-export const scrollPrev = (element) => {
-  scrollTo(element, element._activeIndex - 1)
-}
-
-/**
- * @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
-    }
-    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, vertical = false, ratio = 0.85 }) => {
+  const { distance, position } = vertical
+    ? {
+        distance: element.clientHeight * ratio,
+        position: 'top',
+      }
+    : {
+        distance: element.clientWidth * ratio,
+        position: 'left',
+      }
+
+  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} 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/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/details/index.d.ts

@@ -1,9 +1,5 @@
-export interface DefaultOptions {
+export interface ToggleDetailsOptions {
     selector?: string
-    summarySelector?: string
 }
 
-export const defaultOptions: DefaultOptions
-export function showDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-export function closeDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-export function toggleDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
+export function toggleDetails(element: HTMLInputElement, options?: ToggleDetailsOptions): void