winduum 3.0.0-next.10 → 3.0.0-next.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "3.0.0-next.10",
+  "version": "3.0.0-next.11",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",

package/src/components/carousel/index.js

@@ -1,3 +1,38 @@
+/**
+ * @param {HTMLElement} element
+ * @param {boolean} vertical
+ * @returns {{ position: number, always: boolean }[]}
+ */
+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
  * @param {object} options
@@ -17,8 +52,36 @@ export const scrollBy = (element, { direction = 1, vertical = false, ratio = 0.8
         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
+    }
+  }
+
   element.scrollBy({
-    [position]: (distance ?? element.clientWidth * ratio) * direction,
+    [position]: distance * direction,
   })
 }
 

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

@@ -0,0 +1,13 @@
+export interface ValidateFieldOptions {
+    validationMessage?: string
+    selector?: string
+    validitySelector?: string
+    infoContent?: string
+    iconParentSelector?: string
+    iconSelector?: string
+    iconContent?: string
+    validIcon?: string | null
+    invalidIcon?: string
+}
+
+export function validateField(element: HTMLElement, options?: ValidateFieldOptions): void

package/src/components/field/index.js

@@ -0,0 +1,48 @@
+/**
+ * @param {HTMLElement} element
+ * @param {import("./").ValidateFieldOptions} options
+ * @returns void
+ */
+export const validateField = (element, options = {}) => {
+  options = {
+    selector: ':is(input:not([type="hidden"]), textarea, select):not([readonly], [data-novalidate])',
+    validitySelector: '[data-validity]',
+    infoContent: '<div class="x-info text-error" data-validity></div>',
+    iconParentSelector: '.x-control',
+    iconSelector: '.ms-auto',
+    iconContent: '<div class="ms-auto"></div>',
+    validIcon: null,
+    invalidIcon: '<svg class="text-error" data-validity aria-hidden="true"><use href="#heroicons-outline/exclamation-circle"></use></svg>',
+    ...options,
+  }
+
+  const validationElements = [...element.querySelectorAll(options.selector)]
+
+  if (!validationElements.length) return
+
+  element.querySelectorAll(options.validitySelector).forEach(el => el.remove())
+
+  const invalidElements = validationElements.filter(validationElement => !validationElement.checkValidity())
+
+  validationElements.forEach((validationElement) => {
+    const icon = invalidElements.includes(validationElement) ? options.invalidIcon : options.validIcon
+    const iconParentElement = validationElement.closest(options.iconParentSelector)
+
+    if (!iconParentElement || !icon) return
+
+    if (!iconParentElement.querySelector(options.iconSelector)) {
+      iconParentElement.insertAdjacentHTML('beforeend', options.iconContent)
+    }
+
+    iconParentElement.querySelector(options.iconSelector).insertAdjacentHTML('afterbegin', icon)
+  })
+
+  if (!invalidElements.length) return
+
+  element.insertAdjacentHTML('beforeend', options.infoContent)
+  element.lastElementChild.textContent = options.validationMessage ?? invalidElements[0].dataset.validationMessage ?? invalidElements[0].validationMessage
+}
+
+export default {
+  validateField,
+}

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

@@ -1,3 +1,5 @@
+import { validateField, type ValidateFieldOptions } from "../field";
+
 export interface ValidateFormOptions {
     validateSelector?: string
     validateOptions?: ValidateFieldOptions
@@ -6,17 +8,4 @@ export interface ValidateFormOptions {
     submitterLoadingAttribute?: string
 }
 
-export interface ValidateFieldOptions {
-    validationMessage?: string
-    selector?: string
-    validitySelector?: string
-    infoContent?: string
-    iconParentSelector?: string
-    iconSelector?: string
-    iconContent?: string
-    validIcon?: string | null
-    invalidIcon?: string
-}
-
 export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
-export function validateField(element: HTMLElement, options?: ValidateFieldOptions): void

package/src/components/form/index.js

@@ -1,3 +1,5 @@
+import { validateField } from '../field/index.js'
+
 /**
  * @param {SubmitEvent & { target: HTMLFormElement }} event
  * @param {import("./").ValidateFormOptions} options
@@ -29,52 +31,6 @@ export const validateForm = (event, options = {}) => {
   })
 }
 
-/**
- * @param {HTMLElement} element
- * @param {import("./").ValidateFieldOptions} options
- * @returns void
- */
-export const validateField = (element, options = {}) => {
-  options = {
-    selector: ':is(input:not([type="hidden"]), textarea, select):not([readonly], [data-novalidate])',
-    validitySelector: '[data-validity]',
-    infoContent: '<div class="x-info text-error" data-validity></div>',
-    iconParentSelector: '.x-control',
-    iconSelector: '.ms-auto',
-    iconContent: '<div class="ms-auto"></div>',
-    validIcon: null,
-    invalidIcon: '<svg class="text-error" data-validity aria-hidden="true"><use href="#heroicons-outline/exclamation-circle"></use></svg>',
-    ...options,
-  }
-
-  const validationElements = [...element.querySelectorAll(options.selector)]
-
-  if (!validationElements.length) return
-
-  element.querySelectorAll(options.validitySelector).forEach(el => el.remove())
-
-  const invalidElements = validationElements.filter(validationElement => !validationElement.checkValidity())
-
-  validationElements.forEach((validationElement) => {
-    const icon = invalidElements.includes(validationElement) ? options.invalidIcon : options.validIcon
-    const iconParentElement = validationElement.closest(options.iconParentSelector)
-
-    if (!iconParentElement || !icon) return
-
-    if (!iconParentElement.querySelector(options.iconSelector)) {
-      iconParentElement.insertAdjacentHTML('beforeend', options.iconContent)
-    }
-
-    iconParentElement.querySelector(options.iconSelector).insertAdjacentHTML('afterbegin', icon)
-  })
-
-  if (!invalidElements.length) return
-
-  element.insertAdjacentHTML('beforeend', options.infoContent)
-  element.lastElementChild.textContent = options.validationMessage ?? invalidElements[0].dataset.validationMessage ?? invalidElements[0].validationMessage
-}
-
 export default {
   validateForm,
-  validateField,
 }

package/types/index.d.ts

@@ -32,50 +32,35 @@ declare module 'winduum/supports' {
 
 	export const supportsInterestFor: boolean;
 
+	export const supportsScrollInitialTarget: boolean;
+
+	export const supportsAnimationTimeline: boolean;
+
+	export const supportsScrollSnapEvents: boolean;
+
 	export {};
 }
 
 declare module 'winduum/src/components/carousel' {
-	export interface ObserveCarouselOptions {
-		visibleAttribute?: string
-		observerOptions?: {
-			rootMargin?: string
-			threshold?: number | number[]
-		}
-	}
-
-	export interface PaginationCarouselOptions {
-		element?: HTMLElement | Element
-		itemContent?: string
-		activeAttribute?: string
-	}
+	export type CarouselPlacement = 'left' | 'right' | 'top' | 'bottom'
 
-	export interface ScrollCarouselOptions {
-		observe?: ObserveCarouselOptions
-		pagination?: PaginationCarouselOptions
-		progressElement?: HTMLProgressElement | Element
-		counterMinElement?: HTMLElement | Element
-		counterMaxElement?: HTMLElement | Element
+	export interface ScrollByOptions {
+		direction?: number
+		vertical?: boolean
+		ratio?: number
 	}
 
-	export interface AutoplayCarouselOptions {
-		delay?: number
-		pauseElements?: HTMLElement[] | Element[]
+	export interface ToggleScrollStateOptions {
+		prevElement?: HTMLButtonElement | null
+		nextElement?: HTMLButtonElement | null
+		vertical?: boolean
 	}
 
-	export interface DragCarouselOptions {
-		activeAttribute?: string
-	}
-
-	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
 
 	export {};
 }
@@ -99,22 +84,33 @@ declare module 'winduum/src/components/dialog' {
 }
 
 declare module 'winduum/src/components/drawer' {
-	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 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]
+
+	export {};
+}
+
+declare module 'winduum/src/components/field' {
+	export interface ValidateFieldOptions {
+		validationMessage?: string
+		selector?: string
+		validitySelector?: string
+		infoContent?: string
+		iconParentSelector?: string
+		iconSelector?: string
+		iconContent?: string
+		validIcon?: string | null
+		invalidIcon?: string
 	}
 
-	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 validateField(element: HTMLElement, options?: ValidateFieldOptions): void
 
 	export {};
 }
@@ -128,7 +124,8 @@ declare module 'winduum/src/components/form' {
 		submitterLoadingAttribute?: string
 	}
 
-	export interface ValidateFieldOptions {
+	export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
+	interface ValidateFieldOptions {
 		validationMessage?: string
 		selector?: string
 		validitySelector?: string
@@ -140,16 +137,15 @@ declare module 'winduum/src/components/form' {
 		invalidIcon?: string
 	}
 
-	export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
-	export function validateField(element: HTMLElement, options?: ValidateFieldOptions): void
+	function validateField(element: HTMLElement, options?: ValidateFieldOptions): void
 
 	export {};
 }
 
 declare module 'winduum/src/components/tabs' {
 	interface ToggleTabOptions {
-		tabElements?: NodeListOf<Element>
-		tabPanelElements?: NodeListOf<Element>
+		tabElements?: NodeListOf<Element> | Element[]
+		tabPanelElements?: NodeListOf<Element> | Element[]
 	}
 
 	export function toggleTab(element: HTMLElement | Element, options?: ToggleTabOptions): void
@@ -184,6 +180,7 @@ declare module 'winduum/src/components/toaster' {
 	}
 
 	export function closeToaster(element: HTMLElement, options?: CloseToastOptions): Promise<void>
+	export function toasterObserver(): MutationObserver
 
 	export {};
 }

package/types/index.d.ts.map

@@ -7,42 +7,33 @@
 		"createPlugin",
 		"supportsTimelineTrigger",
 		"supportsInterestFor",
-		"ObserveCarouselOptions",
-		"PaginationCarouselOptions",
-		"ScrollCarouselOptions",
-		"AutoplayCarouselOptions",
-		"DragCarouselOptions",
-		"scrollPrev",
-		"scrollNext",
-		"scrollTo",
-		"getItemCount",
-		"observeCarousel",
-		"scrollCarousel",
-		"paginationCarousel",
-		"autoplayCarousel",
-		"dragCarousel",
+		"supportsScrollInitialTarget",
+		"supportsAnimationTimeline",
+		"supportsScrollSnapEvents",
+		"CarouselPlacement",
+		"ScrollByOptions",
+		"ToggleScrollStateOptions",
+		"scrollBy",
+		"toggleScrollState",
+		"setCurrentAttribute",
+		"setSnappedAttribute",
+		"scrollToMarker",
 		"SetPositionOptions",
 		"setPosition",
 		"setKeyboardStep",
 		"setMouseStep",
-		"DefaultOptions",
-		"defaultOptions",
-		"showDetails",
-		"closeDetails",
-		"toggleDetails",
-		"showDialog",
-		"closeDialog",
-		"ScrollDrawerOptions",
+		"DrawerPlacement",
+		"isVerticalDrawer",
+		"scrollDrawer",
 		"showDrawer",
 		"closeDrawer",
-		"scrollInitDrawer",
-		"toggleDrawerAttributes",
-		"scrollDrawerState",
-		"scrollDrawer",
-		"ValidateFormOptions",
+		"drawerEvents",
+		"drawerObserver",
+		"drawerProperties",
 		"ValidateFieldOptions",
-		"validateForm",
 		"validateField",
+		"ValidateFormOptions",
+		"validateForm",
 		"ToggleTabOptions",
 		"toggleTab",
 		"ShowToastOptions",
@@ -50,11 +41,9 @@
 		"closeToast",
 		"showToast",
 		"closeToaster",
-		"ShowPopoverOptions",
-		"HidePopoverOptions",
-		"showPopover",
-		"hidePopover",
-		"togglePopover",
+		"toasterObserver",
+		"computePositionPopover",
+		"autoUpdatePopover",
 		"SetTrackPropertyOptions",
 		"SetValueOptions",
 		"SetOutputOptions",
@@ -70,9 +59,8 @@
 		"../src/supports.js",
 		"../src/components/carousel/index.d.ts",
 		"../src/components/compare/index.d.ts",
-		"../src/components/details/index.d.ts",
-		"../src/components/dialog/index.d.ts",
 		"../src/components/drawer/index.d.ts",
+		"../src/components/field/index.d.ts",
 		"../src/components/form/index.d.ts",
 		"../src/components/tabs/index.d.ts",
 		"../src/components/toast/index.d.ts",
@@ -96,9 +84,8 @@
 		null,
 		null,
 		null,
-		null,
 		null
 	],
-	"mappings": ";;kBAEiBA,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBjBC,aAAaA;;yBAEFC,YAAYA;;;;;;cCrBvBC,uBAAuBA;;cAKvBC,mBAAmBA;;;;;;kBCRfC,sBAAsBA;;;;;;;;kBAQtBC,yBAAyBA;;;;;;kBAMzBC,qBAAqBA;;;;;;;;kBAQrBC,uBAAuBA;;;;;kBAKvBC,mBAAmBA;;;;iBAIpBC,UAAUA;iBACVC,UAAUA;iBACVC,QAAQA;iBACRC,YAAYA;iBACZC,eAAeA;iBACfC,cAAcA;iBACdC,kBAAkBA;iBAClBC,gBAAgBA;iBAChBC,YAAYA;;;;;;kBCvCXC,kBAAkBA;;;;;iBAKnBC,WAAWA;iBACXC,eAAeA;iBACfC,YAAYA;;;;;;kBCPXC,cAAcA;;;;;cAKlBC,cAAcA;iBACXC,WAAWA;iBACXC,YAAYA;iBACZC,aAAaA;;;;;;kBCRZJ,cAAcA;;;;;;;;;;cAUlBC,cAAcA;iBACXI,UAAUA;iBACVC,WAAWA;;;;;;kBCZVC,mBAAmBA;;;;;;;;;;iBAUpBC,UAAUA;iBACVC,WAAWA;iBACXC,gBAAgBA;iBAChBC,sBAAsBA;iBACtBC,iBAAiBA;iBACjBC,YAAYA;;;;;;kBCfXC,mBAAmBA;;;;;;;;kBAQnBC,oBAAoBA;;;;;;;;;;;;;;;;;;;iBAmBrBC,YAAYA;iBACZC,aAAaA;;;;;;WC5BnBC,gBAAgBA;;;;;iBAKVC,SAASA;;;;;;kBCLRC,gBAAgBA;;;;;;;kBAOhBC,iBAAiBA;;;;;;iBAMlBC,UAAUA;iBACVC,SAASA;;;;;;kBCdRF,iBAAiBA;;;;;iBAKlBG,YAAYA;;;;;;;kBCHXC,kBAAkBA;;;;;;;;;;;kBAWlBC,kBAAkBA;;;;iBAInBC,WAAWA;iBACXC,WAAWA;iBACXC,aAAaA;;;;;;kBCnBZC,uBAAuBA;;;;;;;kBAOvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;;;kBCnBbC,eAAeA;;;;;;iBAMhBC,UAAUA;;;;;;iBCNVC,UAAUA",
+	"mappings": ";;kBAEiBA,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBjBC,aAAaA;;yBAEFC,YAAYA;;;;;;cCrBvBC,uBAAuBA;;cAKvBC,mBAAmBA;;cAKnBC,2BAA2BA;;cAK3BC,yBAAyBA;;cAKzBC,wBAAwBA;;;;;;aCvBzBC,iBAAiBA;;kBAEZC,eAAeA;;;;;;kBAMfC,wBAAwBA;;;;;;iBAMzBC,QAAQA;iBACRC,iBAAiBA;iBACjBC,mBAAmBA;iBACnBC,mBAAmBA;iBACnBC,cAAcA;;;;;;kBClBbC,kBAAkBA;;;;;iBAKnBC,WAAWA;iBACXC,eAAeA;iBACfC,YAAYA;;;;;;;;;;;aCPhBC,eAAeA;;iBAEXC,gBAAgBA;iBAChBC,YAAYA;iBACZC,UAAUA;iBACVC,WAAWA;iBACXC,YAAYA;iBACZC,cAAcA;iBACdC,gBAAgBA;;;;;;kBCRfC,oBAAoBA;;;;;;;;;;;;iBAYrBC,aAAaA;;;;;;kBCVZC,mBAAmBA;;;;;;;;iBAQpBC,YAAYA;WDVXH,oBAAoBA;;;;;;;;;;;;UAYrBC,aAAaA;;;;;;WEZnBG,gBAAgBA;;;;;iBAKVC,SAASA;;;;;;kBCLRC,gBAAgBA;;;;;;;kBAOhBC,iBAAiBA;;;;;;iBAMlBC,UAAUA;iBACVC,SAASA;;;;;;kBCdRF,iBAAiBA;;;;;iBAKlBG,YAAYA;iBACZC,eAAeA;;;;;;;;kBCHPC,sBAAsBA;;;;;;;kBAOtBC,iBAAiBA;;;;;;;;;;;kBCVxBC,uBAAuBA;;;;;;;kBAOvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;;;kBCnBbC,eAAeA;;;;;;iBAMhBC,UAAUA;;;;;;iBCNVC,UAAUA",
 	"ignoreList": []
 }