winduum 2.2.8 → 2.2.10

package/src/components/details/index.js

@@ -2,8 +2,8 @@
  * @type {import("./").DefaultOptions}
  */
 export const defaultOptions = {
-    selector: 'details',
-    summarySelector: 'summary'
+  selector: 'details',
+  summarySelector: 'summary',
 }
 
 /**
@@ -12,21 +12,21 @@ export const defaultOptions = {
  * @returns Promise<void>
  */
 export const showDetails = async (element, options = {}) => {
-    options = {
-        ...defaultOptions,
-        ...options
-    }
+  options = {
+    ...defaultOptions,
+    ...options,
+  }
 
-    const details = element.closest(options.selector)
-    const { down } = await import('slide-element')
-    const content = details.querySelector(options.summarySelector).nextElementSibling
+  const details = element.closest(options.selector)
+  const { down } = await import('slide-element')
+  const content = details.querySelector(options.summarySelector).nextElementSibling
 
-    details._isHiding = false
-    details.open = true
+  details._isHiding = false
+  details.open = true
 
-    await down(content, {
-        display: ''
-    })
+  await down(content, {
+    display: '',
+  })
 }
 
 /**
@@ -35,23 +35,23 @@ export const showDetails = async (element, options = {}) => {
  * @returns Promise<void>
  */
 export const closeDetails = async (element, options = {}) => {
-    options = {
-        ...defaultOptions,
-        ...options
-    }
+  options = {
+    ...defaultOptions,
+    ...options,
+  }
 
-    const details = element.closest(options.selector)
-    const { up } = await import('slide-element')
-    const content = details.querySelector(options.summarySelector).nextElementSibling
+  const details = element.closest(options.selector)
+  const { up } = await import('slide-element')
+  const content = details.querySelector(options.summarySelector).nextElementSibling
 
-    details._isHiding = true
+  details._isHiding = true
 
-    await up(content, {
-        display: ''
-    })
+  await up(content, {
+    display: '',
+  })
 
-    details._isHiding && (details.open = false)
-    details._isHiding = false
+  details._isHiding && (details.open = false)
+  details._isHiding = false
 }
 
 /**
@@ -60,18 +60,19 @@ export const closeDetails = async (element, options = {}) => {
  * @returns Promise<void>
  */
 export const toggleDetails = async (element, options = {}) => {
-    options = {
-        ...defaultOptions,
-        ...options
-    }
+  options = {
+    ...defaultOptions,
+    ...options,
+  }
 
-    const details = element.closest(options.selector)
+  const details = element.closest(options.selector)
 
-    if (details._isHiding && !element.checked) return
+  if (details._isHiding && !element.checked) return
 
-    if (element.checked ?? !details.open) {
-        await showDetails(element, options)
-    } else {
-        await closeDetails(element, options)
-    }
+  if (element.checked ?? !details.open) {
+    await showDetails(element, options)
+  }
+  else {
+    await closeDetails(element, options)
+  }
 }

package/src/components/dialog/default.css

@@ -15,7 +15,8 @@
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
 
-  &::backdrop, &:not([open]) {
+  &::backdrop,
+  &:not([open]) {
     display: none;
   }
 

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

@@ -5,7 +5,7 @@ export interface DefaultOptions {
     openAttribute?: string
     closedAttribute?: string
     contentSelector?: string
-    scrollbarWidthProperty?: string
+    scrollbarWidthProperty?: string | null
 }
 
 export const defaultOptions: DefaultOptions

package/src/components/dialog/index.js

@@ -4,12 +4,12 @@ import { animationsFinished, nextRepaint } from '../../common.js'
  * @type {import("./").DefaultOptions}
 */
 export const defaultOptions = {
-    closedAttribute: 'data-closed',
-    openAttribute: 'data-open',
-    scrollbarWidthProperty: '--default-scrollbar-width',
-    contentSelector: '.x-dialog-content',
-    closable: true,
-    modal: true
+  closedAttribute: 'data-closed',
+  openAttribute: 'data-open',
+  scrollbarWidthProperty: '--default-scrollbar-width',
+  contentSelector: '.x-dialog-content',
+  closable: true,
+  modal: true,
 }
 
 /**
@@ -19,38 +19,40 @@ export const defaultOptions = {
  * @returns Promise<void>
  */
 export const showDialog = async (element, options = {}) => {
-    options = {
-        ...defaultOptions,
-        ...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)
-        })
+  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.addEventListener('click', ({ target }) => {
+      if (target.nodeName === 'DIALOG' && options.closable) {
+        closeDialog(element, options)
+      }
+    })
 
-        element._dialogHasEvents = true
-    }
+    element._dialogHasEvents = true
+  }
 
-    element.setAttribute(options.closedAttribute, '')
+  element.setAttribute(options.closedAttribute, '')
 
-    options.modal ? element.showModal() : element.show()
-    element.scroll(0, 0)
+  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.removeAttribute(options.closedAttribute)
+  await animationsFinished(element.querySelector(options.contentSelector))
+  element.setAttribute(options.openAttribute, '')
 
-    element.dispatchEvent(new CustomEvent('x-dialog:show'))
+  element.dispatchEvent(new CustomEvent('x-dialog:show'))
 }
 
 /**
@@ -60,21 +62,21 @@ export const showDialog = async (element, options = {}) => {
  * @returns Promise<void>
  */
 export const closeDialog = async (element, options = {}) => {
-    options = {
-        ...defaultOptions,
-        ...options
-    }
+  options = {
+    ...defaultOptions,
+    ...options,
+  }
 
-    element.dispatchEvent(new CustomEvent('x-dialog:close'))
+  element.dispatchEvent(new CustomEvent('x-dialog:close'))
 
-    element.removeAttribute(options.openAttribute)
-    element.setAttribute(options.closedAttribute, '')
+  element.removeAttribute(options.openAttribute)
+  element.setAttribute(options.closedAttribute, '')
 
-    await animationsFinished(element.querySelector(options.contentSelector))
+  await animationsFinished(element.querySelector(options.contentSelector))
 
-    element.close()
+  element.close()
 
-    await nextRepaint()
+  await nextRepaint()
 
-    options.remove && element.remove()
+  options.remove && element.remove()
 }

package/src/components/dialog/props/content.css

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-dialog-content-padding-block: 2rem;
   --x-dialog-content-padding-inline: 1.5rem;
   --x-dialog-content-inline-size: 35rem;

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-dialog-padding-block: 2rem;
   --x-dialog-padding-inline: 1.5rem;
   --x-dialog-background-color: var(--color-dark);

package/src/components/drawer/default.css

@@ -15,7 +15,8 @@
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
 
-  &:not([open]), &::backdrop {
+  &:not([open]),
+  &::backdrop {
     display: none;
   }
 

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

@@ -11,4 +11,6 @@ export interface ScrollDrawerOptions {
 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

package/src/components/drawer/index.js

@@ -7,7 +7,7 @@ import { nextRepaint } from '../../common.js'
  * @returns void
  */
 export const showDrawer = async (element, distance = 0, direction = 'left') => {
-    element.scroll({ [direction]: distance })
+  element.scroll({ [direction]: distance })
 }
 
 /**
@@ -17,7 +17,7 @@ export const showDrawer = async (element, distance = 0, direction = 'left') => {
  * @returns void
  */
 export const closeDrawer = (element, distance = element.scrollWidth, direction = 'left') => {
-    element.scroll({ [direction]: distance })
+  element.scroll({ [direction]: distance })
 }
 
 /**
@@ -27,8 +27,29 @@ export const closeDrawer = (element, distance = element.scrollWidth, direction =
  * @returns void
  */
 export const scrollInitDrawer = async (element, distance = element.scrollWidth, direction = 'left') => {
-    element.scroll({ [direction]: distance, behavior: 'instant' })
-    await nextRepaint()
+  element.scroll({ [direction]: distance, behavior: 'instant' })
+  await nextRepaint()
+}
+
+/**
+ * @param {HTMLElement | Element} element
+ * @param {'open' | 'close'} state
+ * @param {string} snapClass
+ * @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}`))
+}
+
+/**
+ * @param {number} scrollState
+ * @param {number} scrollDirection
+ * @returns boolean
+ */
+export const scrollDrawerState = (scrollState, scrollDirection) => {
+  return scrollState ? Math.ceil(scrollDirection) >= scrollState : Math.floor(scrollDirection) <= scrollState
 }
 
 /**
@@ -37,34 +58,28 @@ export const scrollInitDrawer = async (element, distance = element.scrollWidth,
  * @returns void
  */
 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)}`
-    )
+  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,
+  }
 
-    if (options.scrollDirection === options.scrollOpen) {
-        element.classList.add(...options.snapClass.split(/\s/))
-        element.inert = false
-        element.dispatchEvent(new CustomEvent('x-drawer:open'))
-    }
+  element.style.setProperty(
+    options.opacityProperty,
+    `${Math.min(Math.abs((options.scrollDirection / options.scrollSize) - options.opacityRatio), 1)}`,
+  )
 
-    const closeDirection = options.scrollClose ? options.scrollDirection >= options.scrollClose : options.scrollDirection <= options.scrollClose
+  if (scrollDrawerState(options.scrollOpen, options.scrollDirection)) {
+    toggleDrawerAttributes(element, 'open', options.snapClass)
+  }
 
-    if (closeDirection && !element.inert) {
-        element.classList.remove(...options.snapClass.split(/\s/))
-        element.inert = true
-        element.close && element.close()
-        element.dispatchEvent(new CustomEvent('x-drawer:close'))
-    }
+  if (scrollDrawerState(options.scrollClose, options.scrollDirection) && !element.inert) {
+    toggleDrawerAttributes(element, 'close', options.snapClass)
+    element.close && element.close()
+  }
 }

package/src/components/drawer/props/content.css

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-drawer-content-background-color: var(--color-body-primary);
   --x-drawer-content-padding-block: 2rem;
   --x-drawer-content-padding-inline: 1.5rem;

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

@@ -1,3 +1,4 @@
-:root, :host {
+:root,
+:host {
   --x-drawer-background-color-opacity: 75%;
 }

package/src/components/form/index.js

@@ -4,32 +4,33 @@
  * @returns void
  */
 export const validateForm = (event, options = {}) => {
-    options = {
-        validateSelectors: '.x-control, .x-check, .x-switch, .x-rating, .x-color',
-        validateOptions: {
-            validate: true
-        },
-        validateField,
-        submitterLoadingAttribute: 'data-loading',
-        scrollOptions: { behavior: 'smooth', block: 'center' },
-        ...options
+  options = {
+    validateSelectors: '.x-control, .x-check, .x-switch, .x-rating, .x-color',
+    validateOptions: {
+      validate: true,
+    },
+    validateField,
+    submitterLoadingAttribute: 'data-loading',
+    scrollOptions: { behavior: 'smooth', block: 'center' },
+    ...options,
+  }
+
+  if (options.validateOptions.validate) {
+    if (!event.target.checkValidity()) {
+      event.preventDefault()
+      event.stopImmediatePropagation()
+
+      event.target.querySelector(':invalid').scrollIntoView(options.scrollOptions)
+      event.target.querySelector(':invalid').focus()
     }
-
-    if (options.validateOptions.validate) {
-        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, '')
-        }
+    else {
+      event?.submitter?.setAttribute(options.submitterLoadingAttribute, '')
     }
+  }
 
-    event.target.querySelectorAll(options.validateSelectors).forEach((element) => {
-        options.validateField(element, options.validateOptions)
-    })
+  event.target.querySelectorAll(options.validateSelectors).forEach((element) => {
+    options.validateField(element, options.validateOptions)
+  })
 }
 
 /**
@@ -38,75 +39,77 @@ export const validateForm = (event, 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
+  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)
     }
 
-    if (!element.querySelector(options.selector)) return
+    element.querySelector(options.endSelector).insertAdjacentHTML('afterbegin', icon)
+  }
 
-    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}`
+  if (validationElement.value !== '') {
+    element.setAttribute(options.activeAttribute, '')
+  }
+  else {
+    element.removeAttribute(options.activeAttribute)
+  }
 
-    const insertIcon = (icon) => {
-        if (!endParentElement || !icon) return
+  if (!validationElement.outerHTML.match(options.ignoreMatch) && options.validate) {
+    element?.removeAttribute(options.validAttribute)
+    element?.removeAttribute(options.invalidAttribute)
 
-        if (!element?.querySelector(options.endSelector)) {
-            element?.insertAdjacentHTML('beforeend', options.endContent)
-        }
+    infoParentElement?.querySelector(infoSelector)?.remove()
+    endParentElement?.querySelector(endSelector)?.remove()
 
-        element.querySelector(options.endSelector).insertAdjacentHTML('afterbegin', icon)
-    }
+    if (validationElement.checkValidity()) {
+      element.setAttribute(options.validAttribute, '')
 
-    if (validationElement.value !== '') {
-        element.setAttribute(options.activeAttribute, '')
-    } else {
-        element.removeAttribute(options.activeAttribute)
+      insertIcon(options.validIcon)
     }
+    else {
+      element.setAttribute(options.invalidAttribute, '')
 
-    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)
+      insertIcon(options.invalidIcon)
 
-            if (infoParentElement) {
-                infoParentElement.insertAdjacentHTML('beforeend', options.infoContent)
-                infoParentElement.querySelector(infoSelector).textContent = validationMessage
-            }
-        }
+      if (infoParentElement) {
+        infoParentElement.insertAdjacentHTML('beforeend', options.infoContent)
+        infoParentElement.querySelector(infoSelector).textContent = validationMessage
+      }
     }
+  }
 }
 
 export default {
-    validateForm,
-    validateField
+  validateForm,
+  validateField,
 }

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-heading-font-family: var(--font-primary);
   --x-heading-font-weight: var(--font-weight-semibold);
   --x-heading-font-size: var(--text-xl);

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-info-font-size: var(--text-xs);
   --x-info-line-height: calc(1em + 0.25rem);
 }

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-label-font-size: var(--text-sm);
   --x-label-line-height: calc(1em + 0.25rem);
 }

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-link-font-size: var(--text-sm);
   --x-link-line-height: calc(1em + 0.25rem);
 }

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-notice-padding-block: 1.25rem;
   --x-notice-padding-inline: 1.5rem;
   --x-notice-font-size: var(--text-sm);

package/src/components/popover/content.css

@@ -13,7 +13,8 @@
   inline-size: max-content;
   position: absolute;
 
-  &:where(.bottom), & {
+  &:where(.bottom),
+  & {
     transform-origin: top;
   }
 
@@ -91,7 +92,8 @@
   }
 
   &:not([popover]) {
-    .trigger-focus:not(:focus, :focus-within) > &, .trigger-hover:not(:hover) > & {
+    .trigger-focus:not(:focus, :focus-within) > &,
+    .trigger-hover:not(:hover) > & {
       --tw-scale-x: var(--x-popover-content-scale-x);
       --tw-scale-y: var(--x-popover-content-scale-y);