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

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

@@ -1,16 +1,9 @@
-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 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 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]

package/src/components/drawer/index.js

@@ -1,85 +1,102 @@
+import { supportsScrollInitialTarget } from '../../supports.js'
 import { nextRepaint } from '../../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,
-  }
-
-  element.style.setProperty(
-    options.opacityProperty,
-    `${Math.min(Math.abs((options.scrollDirection / options.scrollSize) - options.opacityRatio), 1)}`,
+export const drawerObserver = (element, placement) => {
+  const visibleThreshold = 1 / (
+    isVerticalDrawer(placement) ? window.innerHeight : window.innerWidth
   )
 
-  if (scrollDrawerState(options.scrollOpen, options.scrollDirection)) {
-    toggleDrawerAttributes(element, 'open', options.snapClass)
-  }
+  return new IntersectionObserver((entries) => {
+    if (entries.at(-1).intersectionRatio < visibleThreshold) element.close()
+  }, {
+    root: element,
+    threshold: [visibleThreshold, 1],
+  })
+}
 
-  if (scrollDrawerState(options.scrollClose, options.scrollDirection) && !element.inert) {
-    toggleDrawerAttributes(element, 'close', options.snapClass)
-    element.close && element.close()
-  }
+/**
+ * @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]
+
+  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 {
+  &:where(.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;
+}

package/src/components/drawer/scroller.css

@@ -0,0 +1,32 @@
+.x-drawer-scroller {
+  display: flex;
+  width: inherit;
+  height: inherit;
+  overflow: auto clip;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: none;
+  scroll-snap-type: x mandatory;
+  scroll-timeline: --x-drawer-backdrop x;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::after {
+    content: "";
+    min-inline-size: 100dvw;
+    scroll-snap-align: end;
+    scroll-initial-target: nearest;
+  }
+
+  &:where(.snap-y) {
+    overflow: clip auto;
+    scroll-timeline: --x-drawer-backdrop y;
+
+    &::after {
+      min-block-size: 100dvh;
+    }
+  }
+}

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,29 +1,11 @@
+import { validateField, type ValidateFieldOptions } from "../field";
+
 export interface ValidateFormOptions {
-    validateSelectors?: string
+    validateSelector?: string
     validateOptions?: ValidateFieldOptions
     validateField?: typeof validateField
     scrollOptions?: ScrollIntoViewOptions
     submitterLoadingAttribute?: string
 }
 
-export interface ValidateFieldOptions {
-    validate?: boolean
-    validationMessage?: string
-    selector?: string
-    ignoreMatch?: RegExp
-    validitySelector?: string
-    infoParentSelector?: string
-    infoSelector?: string
-    infoContent?: string
-    endParentSelector?: string
-    endSelector?: string
-    endContent?: string
-    validAttribute?: string
-    validIcon?: string | null
-    invalidAttribute?: string
-    invalidIcon?: string
-    activeAttribute?: string
-}
-
 export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
-export function validateField(element: HTMLElement | SubmitEvent, options?: ValidateFieldOptions): void

package/src/components/form/index.js

@@ -1,115 +1,36 @@
+import { validateField } from '../field/index.js'
+
 /**
- * @param {Event | SubmitEvent} event
+ * @param {SubmitEvent & { target: HTMLFormElement }} event
  * @param {import("./").ValidateFormOptions} options
  * @returns void
  */
 export const validateForm = (event, options = {}) => {
   options = {
-    validateSelectors: '.x-control, .x-check, .x-switch, .x-rating, .x-color',
-    validateOptions: {
-      validate: true,
-    },
+    validateSelector: '.x-field',
+    validateOptions: {},
     validateField,
     submitterLoadingAttribute: 'data-loading',
     scrollOptions: { behavior: 'smooth', block: 'center' },
     ...options,
   }
 
-  if (options.validateOptions.validate) {
-    if (!event.target.checkValidity()) {
-      event.preventDefault()
-      event.stopImmediatePropagation()
+  if (!event.target.checkValidity()) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
 
-      event.target.querySelector(':invalid').scrollIntoView(options.scrollOptions)
-      event.target.querySelector(':invalid').focus()
-    }
-    else {
-      event?.submitter?.setAttribute(options.submitterLoadingAttribute, '')
-    }
+    event.target.querySelector(':invalid').scrollIntoView(options.scrollOptions)
+    event.target.querySelector(':invalid').focus()
+  }
+  else if (options.submitterLoadingAttribute) {
+    event?.submitter?.setAttribute(options.submitterLoadingAttribute, '')
   }
 
-  event.target.querySelectorAll(options.validateSelectors).forEach((element) => {
+  event.target.querySelectorAll(options.validateSelector).forEach((element) => {
     options.validateField(element, options.validateOptions)
   })
 }
 
-/**
- * @param {HTMLElement} element
- * @param {import("./").ValidateFieldOptions} options
- * @returns void
- */
-export const validateField = (element, options = {}) => {
-  options = {
-    validate: true,
-    selector: 'input:not([type="hidden"]), textarea, select',
-    ignoreMatch: /(data-novalidate|readonly)/,
-    validitySelector: '.validity',
-    infoParentSelector: '.x-field',
-    infoSelector: '.x-info',
-    infoContent: '<div class="x-info text-error validity"></div>',
-    endParentSelector: '.x-control',
-    endSelector: '.ms-auto',
-    endContent: '<div class="ms-auto"></div>',
-    validAttribute: 'data-valid',
-    validIcon: null,
-    invalidAttribute: 'data-invalid',
-    invalidIcon: '<svg class="text-error validity" aria-hidden="true"><use href="#icon-exclamation-circle"></use></svg>',
-    activeAttribute: 'data-active',
-    ...options,
-  }
-
-  if (!element.querySelector(options.selector)) return
-
-  const validationElement = element.querySelector(options.selector)
-  const validationMessage = options.validationMessage ?? validationElement.dataset.validationMessage ?? validationElement.validationMessage
-  const infoParentElement = validationElement?.closest(options.infoParentSelector)
-  const endParentElement = validationElement.closest(options.endParentSelector)
-  const infoSelector = options.infoSelector + options.validitySelector
-  const endSelector = `${options.endSelector} ${options.validitySelector}`
-
-  const insertIcon = (icon) => {
-    if (!endParentElement || !icon) return
-
-    if (!element?.querySelector(options.endSelector)) {
-      element?.insertAdjacentHTML('beforeend', options.endContent)
-    }
-
-    element.querySelector(options.endSelector).insertAdjacentHTML('afterbegin', icon)
-  }
-
-  if (validationElement.value !== '') {
-    element.setAttribute(options.activeAttribute, '')
-  }
-  else {
-    element.removeAttribute(options.activeAttribute)
-  }
-
-  if (!validationElement.outerHTML.match(options.ignoreMatch) && options.validate) {
-    element?.removeAttribute(options.validAttribute)
-    element?.removeAttribute(options.invalidAttribute)
-
-    infoParentElement?.querySelector(infoSelector)?.remove()
-    endParentElement?.querySelector(endSelector)?.remove()
-
-    if (validationElement.checkValidity()) {
-      element.setAttribute(options.validAttribute, '')
-
-      insertIcon(options.validIcon)
-    }
-    else {
-      element.setAttribute(options.invalidAttribute, '')
-
-      insertIcon(options.invalidIcon)
-
-      if (infoParentElement) {
-        infoParentElement.insertAdjacentHTML('beforeend', options.infoContent)
-        infoParentElement.querySelector(infoSelector).textContent = validationMessage
-      }
-    }
-  }
-}
-
 export default {
   validateForm,
-  validateField,
 }

package/src/components/heading/lg.css

@@ -1,3 +1,3 @@
 .x-heading:is(.lg) {
-  --x-heading-font-size: var(--text-3xl);
+  --x-heading-font-size: var(--text-5xl);
 }

package/src/components/heading/props/default.css

@@ -2,6 +2,6 @@
 :host {
   --x-heading-font-family: var(--font-primary);
   --x-heading-font-weight: var(--font-weight-semibold);
-  --x-heading-font-size: var(--text-xl);
+  --x-heading-font-size: var(--text-4xl);
   --x-heading-line-height: calc(1em + 0.375rem);
 }

package/src/components/heading/sm.css

@@ -1,3 +1,3 @@
 .x-heading:is(.sm) {
-  --x-heading-font-size: var(--text-lg);
+  --x-heading-font-size: var(--text-3xl);
 }

package/src/components/label/props/default.css

@@ -1,5 +1,6 @@
 :root,
 :host {
-  --x-label-font-size: var(--text-sm);
-  --x-label-line-height: calc(1em + 0.25rem);
+  --x-label-font-size: var(--text-2xs);
+  --x-label-line-height: calc(1em + 0.125rem);
+  --x-label-font-weight: var(--font-weight-medium);
 }

package/src/components/popover/content.css

@@ -2,6 +2,8 @@
   background-color: var(--x-popover-content-background-color);
   border-radius: var(--x-popover-content-border-radius);
   padding: var(--x-popover-content-padding-block) var(--x-popover-content-padding-inline);
+  color: var(--x-popover-content-color);
+  font-size: var(--x-popover-font-size);
   transition: inherit;
   will-change: transform;
 

package/src/components/popover/default.css

@@ -14,4 +14,4 @@
   &:not(:popover-open) {
     opacity: var(--x-popover-starting-opacity);
   }
-}
+}

package/src/components/popover/index.css

@@ -2,3 +2,4 @@
 @import "./props/content.css";
 @import "./default.css";
 @import "./content.css";
+@import "./tooltip.css";

package/src/components/popover/tooltip.css

@@ -0,0 +1,11 @@
+.x-popover {
+  &:is(.tooltip) {
+    --x-popover-content-background-color: var(--color-main);
+    --x-popover-content-color: var(--color-main-foreground);
+    --x-popover-content-border-radius: var(--radius-md);
+    --x-popover-content-padding-block: calc(var(--spacing) * 1);
+    --x-popover-content-padding-inline: calc(var(--spacing) * 2);
+    --x-popover-font-size: var(--text-sm);
+    --x-popover-content-starting-scale: 0.75;
+  }
+}

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

@@ -1,6 +1,6 @@
 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