winduum 2.2.8 → 2.2.10

package/src/components/button/interactive.css

@@ -31,7 +31,9 @@
       --x-button-outline-color-opacity: var(--x-button-focus-outline-color-opacity);
     }
 
-    &:active, &:checked, &.active {
+    &:active,
+    &:checked,
+    &.active {
       --x-button-background-color: var(--x-button-active-background-color, var(--color-accent));
       --x-button-background-color-mix: var(--x-button-active-background-color-mix);
       --x-button-background-color-opacity: var(--x-button-active-background-color-opacity);

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-button-outline-width: 2px;
   --x-button-border-width: 0px;
   --x-button-border-radius: var(--radius-xl);

package/src/components/button/props/interactive.css

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-button-hover-background-color-mix: var(--color-dark);
   --x-button-hover-background-color-opacity: 80%;
   --x-button-focus-outline-offset: 2px;

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-card-background-color: var(--color-body-primary);
   --x-card-border-radius: var(--radius-2xl);
   --x-card-padding-block: calc(var(--spacing) * 6);

package/src/components/carousel/content.css

@@ -23,7 +23,8 @@
 
   /* TODO grabbing */
   &:is(.grabbing) {
-    &, & * {
+    &,
+    & * {
       cursor: grabbing;
     }
 

package/src/components/carousel/index.js

@@ -4,9 +4,9 @@
  * @returns void
  */
 export const scrollTo = (element, index = 0) => {
-    const scrollPaddingLeft = parseInt(getComputedStyle(element).scrollPaddingLeft)
+  const scrollPaddingLeft = parseInt(getComputedStyle(element).scrollPaddingLeft)
 
-    element.scroll({ left: element?.children[index]?.offsetLeft - (isNaN(scrollPaddingLeft) ? 0 : scrollPaddingLeft) })
+  element.scroll({ left: element?.children[index]?.offsetLeft - (isNaN(scrollPaddingLeft) ? 0 : scrollPaddingLeft) })
 }
 
 /**
@@ -14,7 +14,7 @@ export const scrollTo = (element, index = 0) => {
  * @returns void
  */
 export const scrollPrev = (element) => {
-    scrollTo(element, element._activeIndex - 1)
+  scrollTo(element, element._activeIndex - 1)
 }
 
 /**
@@ -22,7 +22,7 @@ export const scrollPrev = (element) => {
  * @returns void
  */
 export const scrollNext = (element) => {
-    scrollTo(element, element._activeIndex + 1)
+  scrollTo(element, element._activeIndex + 1)
 }
 
 /**
@@ -32,16 +32,17 @@ export const scrollNext = (element) => {
  * @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
+  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
 }
 
 /**
@@ -50,31 +51,31 @@ export const getItemCount = (element, scrollWidth = element.scrollWidth - elemen
  * @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)
-        })
+  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))
+    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
-    })
+    if (activeElement) {
+      element._activeIndex = [...element.children].indexOf(activeElement)
+    }
+  }, {
+    root: element,
+    threshold: 0.75,
+    ...options.observerOptions,
+  })
 
-    ;[...element.children].forEach(children => element._observer.observe(children))
+  ;[...element.children].forEach(children => element._observer.observe(children))
 
-    return element._observer
+  return element._observer
 }
 
 /**
@@ -83,33 +84,33 @@ export const observeCarousel = (element, options = {}) => {
  * @returns void
  */
 export const scrollCarousel = (element, options = {}) => {
-    options.pagination = {
-        activeAttribute: 'data-active',
-        ...options.pagination
-    }
+  options.pagination = {
+    activeAttribute: 'data-active',
+    ...options.pagination,
+  }
 
-    const activeItem = getItemCount(element, element.scrollLeft, element.scrollLeft < element._lastScrollLeft)
-    const activeItemMax = getItemCount(element)
+  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))
+  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, '')
-    }
+    options.pagination.element.children[activeItem - 1]?.setAttribute(options.pagination.activeAttribute, '')
+  }
 
-    if (options.progressElement) {
-        options.progressElement.value = activeItem / activeItemMax * 100
-    }
+  if (options.progressElement) {
+    options.progressElement.value = activeItem / activeItemMax * 100
+  }
 
-    if (options.counterMinElement) {
-        options.counterMinElement.innerHTML = `${activeItem}`
-    }
+  if (options.counterMinElement) {
+    options.counterMinElement.innerHTML = `${activeItem}`
+  }
 
-    if (options.counterMaxElement) {
-        options.counterMaxElement.innerHTML = `${activeItemMax}`
-    }
+  if (options.counterMaxElement) {
+    options.counterMaxElement.innerHTML = `${activeItemMax}`
+  }
 
-    element._lastScrollLeft = element.scrollLeft <= 0 ? 0 : element.scrollLeft
+  element._lastScrollLeft = element.scrollLeft <= 0 ? 0 : element.scrollLeft
 }
 
 /**
@@ -118,24 +119,24 @@ export const scrollCarousel = (element, options = {}) => {
  * @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))
-        })
+  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))
     })
+  })
 }
 
 /**
@@ -144,28 +145,29 @@ export const paginationCarousel = (element, options = {}) => {
  * @returns void
  */
 export const autoplayCarousel = (element, options = {}) => {
-    options = {
-        delay: 4000,
-        pauseElements: [],
-        ...options
-    }
+  options = {
+    delay: 4000,
+    pauseElements: [],
+    ...options,
+  }
 
-    let paused
+  let paused
 
-    options.pauseElements.forEach((element) => {
-        element?.addEventListener('mouseenter', () => (paused = true))
-        element?.addEventListener('mouseleave', () => (paused = false))
-    })
+  options.pauseElements.forEach((element) => {
+    element?.addEventListener('mouseenter', () => (paused = true))
+    element?.addEventListener('mouseleave', () => (paused = false))
+  })
 
-    setInterval(() => {
-        if (paused) return
+  setInterval(() => {
+    if (paused) return
 
-        if (element.scrollLeft < element.scrollWidth - element.clientWidth) {
-            scrollNext(element)
-        } else {
-            scrollTo(element, 0)
-        }
-    }, options.delay)
+    if (element.scrollLeft < element.scrollWidth - element.clientWidth) {
+      scrollNext(element)
+    }
+    else {
+      scrollTo(element, 0)
+    }
+  }, options.delay)
 }
 
 /**
@@ -174,52 +176,52 @@ export const autoplayCarousel = (element, options = {}) => {
  * @returns void
  */
 export const dragCarousel = (element, options = {}) => {
-    options = {
-        activeAttribute: 'data-grabbing',
-        ...options
-    }
+  options = {
+    activeAttribute: 'data-grabbing',
+    ...options,
+  }
 
-    if (!matchMedia('(hover: hover) and (pointer: fine)').matches) {
-        return
-    }
+  if (!matchMedia('(hover: hover) and (pointer: fine)').matches) {
+    return
+  }
 
-    let isDown
-    let startX
-    let scrollLeft
-    let timeout
+  let isDown
+  let startX
+  let scrollLeft
+  let timeout
 
-    const endGrabbing = () => {
-        isDown = false
-        element.removeAttribute(options.activeAttribute)
+  const endGrabbing = () => {
+    isDown = false
+    element.removeAttribute(options.activeAttribute)
 
-        scrollTo(element, element._activeIndex)
+    scrollTo(element, element._activeIndex)
 
-        clearTimeout(timeout)
+    clearTimeout(timeout)
 
-        timeout = setTimeout(() => {
-            element.style.scrollSnapType = ''
-        }, 300)
-    }
+    timeout = setTimeout(() => {
+      element.style.scrollSnapType = ''
+    }, 300)
+  }
 
-    element.addEventListener('mouseleave', endGrabbing)
+  element.addEventListener('mouseleave', endGrabbing)
 
-    element.addEventListener('mouseup', endGrabbing)
+  element.addEventListener('mouseup', endGrabbing)
 
-    element.addEventListener('mousedown', ({ pageX }) => {
-        isDown = true
-        startX = pageX - element.offsetLeft
-        scrollLeft = element.scrollLeft
-    })
+  element.addEventListener('mousedown', ({ pageX }) => {
+    isDown = true
+    startX = pageX - element.offsetLeft
+    scrollLeft = element.scrollLeft
+  })
 
-    element.addEventListener('mousemove', (e) => {
-        if (!isDown) return
-        e.preventDefault()
+  element.addEventListener('mousemove', (e) => {
+    if (!isDown) return
+    e.preventDefault()
 
-        const x = e.pageX - element.offsetLeft
+    const x = e.pageX - element.offsetLeft
 
-        element.setAttribute(options.activeAttribute, '')
-        element.style.scrollSnapType = 'unset'
-        element.scroll({ left: scrollLeft - ((x - startX) * 1.25), behavior: 'instant' })
-        element.ondragstart = e => e.preventDefault()
-    })
+    element.setAttribute(options.activeAttribute, '')
+    element.style.scrollSnapType = 'unset'
+    element.scroll({ left: scrollLeft - ((x - startX) * 1.25), behavior: 'instant' })
+    element.ondragstart = e => e.preventDefault()
+  })
 }

package/src/components/check/default.css

@@ -50,7 +50,7 @@
       mask: var(--x-check-icon-mask);
       transition: inherit;
       content: "";
-      background-color: currentColor;
+      background-color: currentcolor;
       opacity: 0%;
       transform: scale(0);
       will-change: transform;

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

@@ -1,12 +1,13 @@
-:root, :host {
+:root,
+:host {
   --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-border-radius: var(--radius-md);
   --x-check-border-width: 1px;
-  --x-check-background-color: currentColor;
-  --x-check-border-color: currentColor;
+  --x-check-background-color: currentcolor;
+  --x-check-border-color: currentcolor;
   --x-check-outline-width: 2px;
   --x-check-icon-size: 1.125rem;
   --x-check-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>');

package/src/components/color/default.css

@@ -17,7 +17,8 @@
     outline-offset: var(--x-color-outline-offset);
     display: inline-grid;
 
-    &::before, &::after {
+    &::before,
+    &::after {
       border: 1px solid transparent;
       border-radius: inherit;
       grid-area: 1/-1;

package/src/components/color/interactive.css

@@ -7,7 +7,8 @@
     &:disabled {
       cursor: not-allowed;
 
-      &::before, &::after {
+      &::before,
+      &::after {
         opacity: var(--x-color-disabled-opacity, 50%);
       }
     }

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

@@ -1,5 +1,6 @@
-:root, :host {
-  --x-color-primary: currentColor;
+:root,
+:host {
+  --x-color-primary: currentcolor;
   --x-color-secondary: transparent;
   --x-color-size: 1.5rem;
   --x-color-border-radius: var(--radius-full);

package/src/components/compare/default.css

@@ -6,7 +6,8 @@
   overflow: hidden;
   border-radius: inherit;
 
-  > *, &::before {
+  > *,
+  &::before {
     position: relative;
     pointer-events: none;
     grid-area: 1/1;

package/src/components/compare/index.js

@@ -4,13 +4,13 @@
  * @returns void
  */
 export const setPosition = (element, options = {}) => {
-    const { selector, positionProperty } = {
-        selector: '.x-compare',
-        positionProperty: '--x-compare-position',
-        ...options
-    }
+  const { selector, positionProperty } = {
+    selector: '.x-compare',
+    positionProperty: '--x-compare-position',
+    ...options,
+  }
 
-    element?.closest(selector)?.style.setProperty(positionProperty, `${element.value}%`)
+  element?.closest(selector)?.style.setProperty(positionProperty, `${element.value}%`)
 }
 
 /**
@@ -20,9 +20,9 @@ export const setPosition = (element, options = {}) => {
  * @returns void
  */
 export const setKeyboardStep = (element, key, step = '10') => {
-    if (key?.toLowerCase() !== 'arrowright' && key?.toLowerCase() !== 'arrowleft') return
+  if (key?.toLowerCase() !== 'arrowright' && key?.toLowerCase() !== 'arrowleft') return
 
-    element.step = step
+  element.step = step
 }
 
 /**
@@ -31,5 +31,5 @@ export const setKeyboardStep = (element, key, step = '10') => {
  * @returns void
  */
 export const setMouseStep = (element, step = '0.1') => {
-    element.step = step
+  element.step = step
 }

package/src/components/control/icon.css

@@ -3,7 +3,8 @@
   --x-control-end: calc(var(--x-control-icon-count-end, 1) * (var(--x-control-icon-size) + var(--x-control-icon-gap)) - var(--x-control-icon-gap));
 
   &:has(textarea) {
-    :where(.me-auto), :where(.ms-auto) {
+    :where(.me-auto),
+    :where(.ms-auto) {
       align-self: start;
     }
   }
@@ -24,7 +25,8 @@
     --x-control-icon-count-end: 2;
   }
 
-  :where(.me-auto), :where(.ms-auto) {
+  :where(.me-auto),
+  :where(.ms-auto) {
     gap: var(--x-control-icon-gap);
     display: flex;
     align-items: center;

package/src/components/control/interactive.css

@@ -10,7 +10,8 @@
     --x-control-outline-color-opacity: var(--x-control-focus-outline-color-opacity, 20%);
   }
 
-  &.disabled, &:has(:where(input, textarea, select):disabled) {
+  &.disabled,
+  &:has(:where(input, textarea, select):disabled) {
     --x-control-background-color: var(--x-control-disabled-background-color, currentColor);
     --x-control-background-color-opacity: var(--x-control-disabled-background-color-opacity, 5%);
     --x-control-border-color: var(--x-control-disabled-border-color, currentColor);

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-control-color-swatch-inline-size: 1.25rem;
   --x-control-color-swatch-block-size: 1.25rem;
   --x-control-color-swatch-border-radius: var(--radius-full);

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

@@ -1,16 +1,17 @@
-:root, :host {
+:root,
+:host {
   --x-control-block-size: 3rem;
   --x-control-block-size-textarea: 8rem;
   --x-control-padding-inline: 0.75rem;
   --x-control-padding-block: 0.75rem;
   --x-control-border-width: 1px;
   --x-control-border-radius: var(--radius-xl);
-  --x-control-border-color: currentColor;
+  --x-control-border-color: currentcolor;
   --x-control-font-weight: var(--font-weight-medium);
   --x-control-font-size: var(--text-base);
   --x-control-background-color: var(--color-body-primary);
-  --x-control-color: currentColor;
+  --x-control-color: currentcolor;
   --x-control-outline-width: 3px;
-  --x-control-placeholder-color: currentColor;
+  --x-control-placeholder-color: currentcolor;
   --x-control-placeholder-opacity: 50%;
 }

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-control-label-translate-y: 0.625rem;
   --x-control-label-scale: 0.8;
 }

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-control-icon-size: 1.25rem;
   --x-control-icon-gap: 0.375rem;
 }

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

@@ -1,13 +1,14 @@
-:root, :host {
+:root,
+:host {
   --x-control-select-picker-border-width: 1px;
   --x-control-select-picker-border-radius: var(--radius-lg);
-  --x-control-select-picker-border-color: currentColor;
+  --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-gap: 0.25rem;
-  --x-control-select-picker-scrollbar-color: currentColor var(--color-body-primary);
+  --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-border-radius: var(--radius-md);

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

@@ -1,4 +1,5 @@
-:root, :host {
+: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-margin-inline-end: -0.25rem;

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

@@ -1,6 +1,7 @@
 .x-control:has(select:not([multiple])) {
   select {
-    &, &::picker(select) {
+    &,
+    &::picker(select) {
       appearance: base-select;
     }
 
@@ -65,7 +66,8 @@
         display: none;
       }
 
-      &:hover, &:focus-visible {
+      &:hover,
+      &:focus-visible {
         background-color: var(--x-control-select-option-hocus-background-color);
       }
 

package/src/components/control/select.css

@@ -13,7 +13,7 @@
     transition: var(--transition-transform);
     will-change: transform;
     grid-area: x-control-padding;
-    background-color: currentColor;
+    background-color: currentcolor;
     pointer-events: none;
     align-self: center;
     content: "";