winduum 2.2.8 → 2.2.10

package/src/components/popover/index.js

@@ -7,21 +7,21 @@ import { animationsFinished, nextRepaint } from '../../common.js'
  * @returns Promise<void>
  */
 export const computePopover = async (element, popoverElement, options = {}) => {
-    const { computePosition, flip, shift, offset } = await import('@floating-ui/dom')
+  const { computePosition, flip, shift, offset } = await import('@floating-ui/dom')
 
-    popoverElement.classList.remove(popoverElement._placement)
+  popoverElement.classList.remove(popoverElement._placement)
 
-    await computePosition(element, popoverElement, {
-        placement: options?.placement,
-        middleware: options?.middleware ?? [offset(12 ?? options?.offset), flip(options?.flip), shift({ padding: 8, ...options?.shift })]
-    }).then(({ x, y, placement }) => {
-        Object.assign(popoverElement.style, {
-            inset: `${y}px auto auto ${x}px`
-        })
-
-        popoverElement._placement = placement
-        popoverElement.classList.add(popoverElement._placement)
+  await computePosition(element, popoverElement, {
+    placement: options?.placement,
+    middleware: options?.middleware ?? [offset(options?.offset ?? 12), flip(options?.flip), shift({ padding: 8, ...options?.shift })],
+  }).then(({ x, y, placement }) => {
+    Object.assign(popoverElement.style, {
+      inset: `${y}px auto auto ${x}px`,
     })
+
+    popoverElement._placement = placement
+    popoverElement.classList.add(popoverElement._placement)
+  })
 }
 
 /**
@@ -30,14 +30,14 @@ export const computePopover = async (element, popoverElement, options = {}) => {
  * @returns Promise<void>
  */
 export const hidePopover = async (element, options = { openAttribute: 'data-open' }) => {
-    const popoverElement = document.getElementById(element.getAttribute('popovertarget'))
+  const popoverElement = document.getElementById(element.getAttribute('popovertarget'))
 
-    popoverElement.removeAttribute(options?.openAttribute)
-    await animationsFinished(popoverElement)
-    popoverElement._cleanup && popoverElement._cleanup()
-    popoverElement.hidePopover && popoverElement.hidePopover()
+  popoverElement.removeAttribute(options?.openAttribute)
+  await animationsFinished(popoverElement)
+  popoverElement._cleanup && popoverElement._cleanup()
+  popoverElement.hidePopover && popoverElement.hidePopover()
 
-    element.ariaExpanded = 'false'
+  element.ariaExpanded = 'false'
 }
 
 /**
@@ -46,36 +46,36 @@ export const hidePopover = async (element, options = { openAttribute: 'data-open
  * @returns Promise<void>
  */
 export const showPopover = async (element, options) => {
-    options = {
-        openAttribute: 'data-open',
-        compute: true,
-        ...options
-    }
+  options = {
+    openAttribute: 'data-open',
+    compute: true,
+    ...options,
+  }
 
-    const { autoUpdate } = await import('@floating-ui/dom')
+  const { autoUpdate } = await import('@floating-ui/dom')
 
-    const popoverElement = document.getElementById(element.getAttribute('popovertarget'))
+  const popoverElement = document.getElementById(element.getAttribute('popovertarget'))
 
-    element.ariaExpanded = 'true'
+  element.ariaExpanded = 'true'
 
-    if (!element.ariaHasPopup) (element.ariaHasPopup = 'dialog')
-    if (!popoverElement.role) (popoverElement.role = element.ariaHasPopup)
+  if (!element.ariaHasPopup) (element.ariaHasPopup = 'dialog')
+  if (!popoverElement.role) (popoverElement.role = element.ariaHasPopup)
 
-    popoverElement.showPopover && popoverElement.showPopover()
+  popoverElement.showPopover && popoverElement.showPopover()
 
-    await nextRepaint()
+  await nextRepaint()
 
-    popoverElement.setAttribute(options?.openAttribute, '')
+  popoverElement.setAttribute(options?.openAttribute, '')
 
-    if (!options.compute) {
-        return
-    }
+  if (!options.compute) {
+    return
+  }
 
-    popoverElement._cleanup = autoUpdate(
-        element,
-        popoverElement,
-        async () => await computePopover(options.anchorSelector ? document.querySelector(options.anchorSelector) : element, popoverElement, options)
-    )
+  popoverElement._cleanup = autoUpdate(
+    element,
+    popoverElement,
+    async () => await computePopover(options.anchorSelector ? document.querySelector(options.anchorSelector) : element, popoverElement, options),
+  )
 }
 
 /**
@@ -84,9 +84,10 @@ export const showPopover = async (element, options) => {
  * @returns Promise<void>
  */
 export const togglePopover = async (element, options) => {
-    if (element.ariaExpanded !== 'true') {
-        await showPopover(element, options)
-    } else {
-        await hidePopover(element)
-    }
+  if (element.ariaExpanded !== 'true') {
+    await showPopover(element, options)
+  }
+  else {
+    await hidePopover(element)
+  }
 }

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

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

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-progress-block-size: 1rem;
   --x-progress-border-radius: var(--radius-full);
 }

package/src/components/range/index.js

@@ -4,7 +4,7 @@
  * @returns void
  */
 export const setTrackProperty = ({ element, value, min, max }, track = 'start') => {
-    element.style.setProperty('--x-range-track-' + track, `${(((value - min) / (max - min)) * 100).toString()}%`)
+  element.style.setProperty('--x-range-track-' + track, `${(((value - min) / (max - min)) * 100).toString()}%`)
 }
 
 /**
@@ -13,38 +13,38 @@ export const setTrackProperty = ({ element, value, min, max }, track = 'start')
  * @returns void
  */
 export const setValue = (element, options = {}) => {
-    const { selector, track } = {
-        selector: '.x-range',
-        track: 'start',
-        ...options
-    }
+  const { selector, track } = {
+    selector: '.x-range',
+    track: 'start',
+    ...options,
+  }
 
-    const parentElement = element.closest(selector)
+  const parentElement = element.closest(selector)
 
-    if (!parentElement._trackValues) {
-        parentElement._trackValues = {
-            start: 0,
-            end: Infinity
-        }
+  if (!parentElement._trackValues) {
+    parentElement._trackValues = {
+      start: 0,
+      end: Infinity,
     }
+  }
 
-    if (Object.keys(parentElement._trackValues).length > 1) {
-        if (
-            (track === 'start' && element.value < parentElement._trackValues.end)
-            || (track === 'end' && parentElement._trackValues.start < element.value)
-        ) {
-            parentElement._trackValues[track] = Number(element.value)
-        }
-
-        element.value = parentElement._trackValues[track]
+  if (Object.keys(parentElement._trackValues).length > 1) {
+    if (
+      (track === 'start' && element.value < parentElement._trackValues.end)
+      || (track === 'end' && parentElement._trackValues.start < element.value)
+    ) {
+      parentElement._trackValues[track] = Number(element.value)
     }
 
-    setTrackProperty({
-        element: parentElement,
-        value: element.value,
-        min: Number(element.min) || 0,
-        max: Number(element.max) || 100
-    }, track)
+    element.value = parentElement._trackValues[track]
+  }
+
+  setTrackProperty({
+    element: parentElement,
+    value: element.value,
+    min: Number(element.min) || 0,
+    max: Number(element.max) || 100,
+  }, track)
 }
 
 /**
@@ -54,15 +54,15 @@ export const setValue = (element, options = {}) => {
  * @returns void
  */
 export const setOutputValue = (element, outputElement, options = {}) => {
-    options = {
-        lang: document.documentElement.lang,
-        formatOptions: {
-            style: 'decimal',
-            minimumFractionDigits: 0,
-            maximumFractionDigits: 0
-        },
-        ...options
-    }
+  options = {
+    lang: document.documentElement.lang,
+    formatOptions: {
+      style: 'decimal',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    },
+    ...options,
+  }
 
-    outputElement.innerHTML = Number(element.value).toLocaleString(options.lang, options.formatOptions)
+  outputElement.innerHTML = Number(element.value).toLocaleString(options.lang, options.formatOptions)
 }

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-range-track-block-size: 0.375rem;
   --x-range-thumb-size: 1.125rem;
   --x-range-thumb-border-width: 0;

package/src/components/rating/default.css

@@ -26,7 +26,7 @@
 
     &::before {
       mask: var(--x-rating-icon-mask);
-      background-color: currentColor;
+      background-color: currentcolor;
       content: "";
     }
   }

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-rating-inline-size: 1.25rem;
   --x-rating-block-size: 1.25rem;
   --x-rating-gap: 0.25rem;

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-switch-inline-size: 3rem;
   --x-switch-block-size: 1.5rem;
   --x-switch-icon-size: 1.125rem;
@@ -7,9 +8,9 @@
   --x-switch-line-height: calc(1em + 0.25rem);
   --x-switch-gap: 0.75rem;
   --x-switch-border-radius: var(--radius-full);
-  --x-switch-background-color: currentColor;
+  --x-switch-background-color: currentcolor;
   --x-switch-outline-width: 2px;
-  --x-switch-outline-color: currentColor;
+  --x-switch-outline-color: currentcolor;
 
   &.dark {
     --x-switch-background-color: var(--color-body-tertiary);

package/src/components/table/interactive.css

@@ -1,11 +1,13 @@
 .x-table {
   :where(tbody:first-child, tfoot:first-child) {
     :where(tr:first-child) {
-      &, :where(th,td):where(:first-child) {
+      &,
+      :where(th,td):where(:first-child) {
         border-start-start-radius: var(--x-table-border-radius);
       }
 
-      &, :where(th,td):where(:last-child) {
+      &,
+      :where(th,td):where(:last-child) {
         border-start-end-radius: var(--x-table-border-radius);
       }
     }
@@ -13,17 +15,20 @@
 
   :where(tbody:last-child, tfoot:last-child) {
     :where(tr:last-child) {
-      &, :where(th,td):where(:first-child) {
+      &,
+      :where(th,td):where(:first-child) {
         border-end-start-radius: var(--x-table-border-radius);
       }
 
-      &, :where(th,td):where(:last-child) {
+      &,
+      :where(th,td):where(:last-child) {
         border-end-end-radius: var(--x-table-border-radius);
       }
     }
   }
 
-  :where(tr, th, td):where([tabindex="0"]), :where(.outline) {
+  :where(tr, th, td):where([tabindex="0"]),
+  :where(.outline) {
     transition: var(--transition-all);
     outline: var(--x-table-outline-width, 1px) solid transparent;
     outline-offset: calc(var(--x-table-outline-width, 1px) * -1);

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-table-border-radius: var(--radius-xl);
   --x-table-padding-inline: 1rem;
   --x-table-cell-spacing-x: 0.625rem;

package/src/components/tabs/index.js

@@ -4,10 +4,10 @@
  * @returns void
  */
 export const toggleTab = (element, options = {}) => {
-    options.tabElements?.forEach(element => (element.ariaSelected = 'false'))
-    options.tabPanelElements?.forEach(target => (target.ariaHidden = 'true'))
-    element.ariaSelected = 'true'
+  options.tabElements?.forEach(element => (element.ariaSelected = 'false'))
+  options.tabPanelElements?.forEach(target => (target.ariaHidden = 'true'))
+  element.ariaSelected = 'true'
 
-    const ariaControls = document.getElementById(element.getAttribute('aria-controls'))
-    if (ariaControls) (ariaControls.ariaHidden = 'false')
+  const ariaControls = document.getElementById(element.getAttribute('aria-controls'))
+  if (ariaControls) (ariaControls.ariaHidden = 'false')
 }

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-text-content-bold: var(--font-weight-semibold);
   --x-text-content-margin-block: calc(var(--spacing) * 5);
   --x-text-list-marker-size: 0.375em;

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

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

package/src/components/toast/index.js

@@ -6,21 +6,21 @@ import { animationsFinished, nextRepaint } from '../../common.js'
  * @returns Promise<void>
  */
 export const closeToast = async (element, options = {}) => {
-    options = {
-        closedAttribute: 'data-closed',
-        heightProperty: '--x-toast-block-size',
-        ...options
-    }
+  options = {
+    closedAttribute: 'data-closed',
+    heightProperty: '--x-toast-block-size',
+    ...options,
+  }
 
-    element.style.setProperty(options.heightProperty, `${element.offsetHeight}px`)
+  element.style.setProperty(options.heightProperty, `${element.offsetHeight}px`)
 
-    await nextRepaint()
+  await nextRepaint()
 
-    element.setAttribute(options.closedAttribute, '')
+  element.setAttribute(options.closedAttribute, '')
 
-    await animationsFinished(element)
+  await animationsFinished(element)
 
-    options.remove && element.remove()
+  options.remove && element.remove()
 }
 
 /**
@@ -29,23 +29,23 @@ export const closeToast = async (element, options = {}) => {
  * @returns Promise<void>
  */
 export const showToast = async (element, options = {}) => {
-    options = {
-        openAttribute: 'data-open',
-        autoHide: null,
-        heightProperty: '--x-toast-block-size',
-        close: {},
-        ...options
-    }
+  options = {
+    openAttribute: 'data-open',
+    autoHide: null,
+    heightProperty: '--x-toast-block-size',
+    close: {},
+    ...options,
+  }
 
-    element.style.setProperty(options.heightProperty, `${element.offsetHeight}px`)
-    element.style.height = '0'
+  element.style.setProperty(options.heightProperty, `${element.offsetHeight}px`)
+  element.style.height = '0'
 
-    await animationsFinished(element)
+  await animationsFinished(element)
 
-    element.style.height = ''
-    element.setAttribute(options.openAttribute, '')
+  element.style.height = ''
+  element.setAttribute(options.openAttribute, '')
 
-    if (options.autoHide) {
-        setTimeout(() => closeToast(element, options.close), options.autoHide * ((element.parentElement.children.length + 1) / 2))
-    }
+  if (options.autoHide) {
+    setTimeout(() => closeToast(element, options.close), options.autoHide * ((element.parentElement.children.length + 1) / 2))
+  }
 }

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-toast-content-border-radius: var(--radius-2xl);
   --x-toast-content-padding-block: calc(var(--spacing) * 3);
   --x-toast-content-padding-inline: calc(var(--spacing) * 4);

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-toast-inline-size: 20rem;
   --x-toast-transition-duration: calc(var(--default-transition-duration) * 2);
 }

package/src/components/toaster/index.js

@@ -6,7 +6,7 @@ import { closeToast } from '../toast/index.js'
  * @returns Promise<void>
  */
 export const closeToaster = (element, options = {}) => {
-    [...element.children].forEach(toast =>
-        closeToast(toast, options)
-    )
+  [...element.children].forEach(toast =>
+    closeToast(toast, options),
+  )
 }

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-toaster-padding: calc(var(--spacing) * 5);
   --x-toaster-margin-block: calc(var(--spacing) * 1);
 }

package/src/components/tooltip/default.css

@@ -26,7 +26,8 @@
     pointer-events: none;
   }
 
-  &:where(.top), &:where(.bottom) {
+  &:where(.top),
+  &:where(.bottom) {
     &::before {
       --tw-translate-x: -50%;
 
@@ -35,7 +36,8 @@
     }
   }
 
-  &:where(.left), &:where(.right) {
+  &:where(.left),
+  &:where(.right) {
     &::before {
       --tw-translate-y: -50%;
 

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-tooltip-background-color: var(--color-main);
   --x-tooltip-color: var(--color-main-foreground);
   --x-tooltip-border-radius: var(--radius-md);

package/src/theme/config/font.css

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --default-font-family: ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-primary: var(--default-font-family);
   --font-secondary: var(--default-font-family);

package/src/theme/config/radius.css

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --radius: var(--radius-xl);
   --radius-xs: 0.125rem;
   --radius-sm: 0.25rem;

package/src/theme/config/spacing.css

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --spacing: 0.25rem;
   --spacing-px: 1px;
   --spacing-0: 0px;

package/src/theme/config/transition.css

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --default-transition-duration: 150ms;
   --default-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset, visibility, display, overlay;
   --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

package/src/theme/config/z.css

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --z-index-10: 10;
   --z-index-20: 20;
   --z-index-30: 30;

package/src/theme/dark-rgb.css

@@ -1,4 +1,5 @@
-:root.dark, :host.dark {
+:root.dark,
+:host.dark {
   --default-color-scheme: dark;
   --color-main: rgb(var(--color-main-rgb));
   --color-body: rgb(var(--color-body-rgb));

package/src/theme/dark.css

@@ -1,4 +1,5 @@
-:root.dark, :host.dark {
+:root.dark,
+:host.dark {
   --default-color-scheme: dark;
   --color-main: var(--color-light);
   --color-body: var(--color-dark);

package/src/theme/default-p3.css

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   @media (color-gamut: p3) {
     --color-primary: color(display-p3 0.23 0.51 0.96);
     --color-main: color(display-p3 0.09 0.09 0.09);

package/src/theme/default-rgb.css

@@ -1,5 +1,6 @@
-:root, :host {
-  --default-color-space: sRGB;
+:root,
+:host {
+  --default-color-space: srgb;
   --default-color-scheme: light;
   --color-current: rgb(var(--color-current-rgb));
   --color-current-foreground: rgb(var(--color-current-foreground-rgb));

package/src/theme/default.css

@@ -1,5 +1,6 @@
-:root, :host {
-  --default-color-space: sRGB;
+:root,
+:host {
+  --default-color-space: srgb;
   --default-color-scheme: light;
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);

package/src/utilities/container/props/default.css

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --container: min(100% - (var(--container-padding) * 2), var(--container-width));
   --container-breakout: min(100% - (var(--container-padding) * 2), var(--container-breakout-width));
   --container-width: 80rem;

package/src/utilities/divider.css

@@ -1,5 +1,5 @@
 .divider {
-  --color-accent: currentColor;
+  --color-accent: currentcolor;
 
   display: flex;
   align-items: center;
@@ -9,7 +9,8 @@
     gap: var(--divider-gap, calc(var(--spacing) * 3));
   }
 
-  &::before, &::after {
+  &::before,
+  &::after {
     content: "";
     flex-grow: 1;
     border: 0;
@@ -22,7 +23,8 @@
   }
 
   &:where(.flex-col) {
-    &::before, &::after {
+    &::before,
+    &::after {
       border: 0;
       border-inline-start:
         1px solid color-mix(

package/src/utilities/dot.css

@@ -3,7 +3,7 @@
   inline-size: 0.5rem;
   block-size: 0.5rem;
   border-radius: var(--radius-full);
-  background-color: currentColor;
+  background-color: currentcolor;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;