winduum 2.2.9 → 2.2.11

package/plugin/index.js

@@ -3,12 +3,12 @@ import flattenColorPalette from 'tailwindcss/src/util/flattenColorPalette'
 import divideGap from './utilities/divide-gap.js'
 import { accentColor, textColor } from './utilities/color.js'
 import {
-    tailwindAnimations,
-    tailwindColors,
-    tailwindParseVariables,
-    tailwindPropertyUtilities,
-    tailwindVariables,
-    tailwindVariablesFont
+  tailwindAnimations,
+  tailwindColors,
+  tailwindParseVariables,
+  tailwindPropertyUtilities,
+  tailwindVariables,
+  tailwindVariablesFont,
 } from './utilities/common.js'
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -19,103 +19,103 @@ const relativePath = file => resolve(dirname(fileURLToPath(import.meta.url)), fi
  * @type {import('./').PluginOptions} options.
  */
 export const defaultConfig = {
-    animations: ['ripple', 'spin', 'move-indeterminate', 'fade-in', 'fade-out'],
-    screens: {
-        'xs': '22.5rem',
-        'sm': '26rem',
-        'md': '46.5rem',
-        'lg': '60rem',
-        'xl': '76rem',
-        '2xl': '82rem',
-        '3xl': '88rem',
-        '4xl': '100rem',
-        'xxl': '126rem',
-        '2xxl': '158rem'
-    },
-    settings: {
-        rgb: false,
-        colorMix: true
-    }
+  animations: ['ripple', 'spin', 'move-indeterminate', 'fade-in', 'fade-out'],
+  screens: {
+    'xs': '22.5rem',
+    'sm': '26rem',
+    'md': '46.5rem',
+    'lg': '60rem',
+    'xl': '76rem',
+    '2xl': '82rem',
+    '3xl': '88rem',
+    '4xl': '100rem',
+    'xxl': '126rem',
+    '2xxl': '158rem',
+  },
+  settings: {
+    rgb: false,
+    colorMix: true,
+  },
 }
 
 /**
  * @param {import('./').PluginOptions} userConfig
  */
 export const createPlugin = (userConfig = {}) => {
-    const settings = {
-        ...defaultConfig.settings,
-        ...userConfig.settings
-    }
+  const settings = {
+    ...defaultConfig.settings,
+    ...userConfig.settings,
+  }
 
-    userConfig = {
-        ...defaultConfig,
-        ...userConfig,
-        settings
-    }
+  userConfig = {
+    ...defaultConfig,
+    ...userConfig,
+    settings,
+  }
 
-    return plugin(({ addComponents, matchUtilities, theme, e, corePlugins }) => {
-        matchUtilities(
-            {
-                accent: value => accentColor({ value }, userConfig.settings)
-            },
-            { values: flattenColorPalette(theme('accentColor')), type: ['color', 'any'] }
-        )
-        matchUtilities(
-            {
-                text: value => textColor({ value, corePlugins }, userConfig.settings)
-            },
-            { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
-        )
-        addComponents(tailwindAnimations(userConfig.animations))
-        addComponents(tailwindPropertyUtilities('mask', Object.keys(tailwindParseVariables('mask', relativePath('../src/theme/config/mask.css'), {
-            ...tailwindVariables('mask', userConfig.mask ?? [])
-        }, userConfig.mask, false))))
-        addComponents(divideGap({ theme, e }))
-    }, {
-        corePlugins: {
-            preflight: false,
-            textColor: false,
-            accentColor: false
+  return plugin(({ addComponents, matchUtilities, theme, e, corePlugins }) => {
+    matchUtilities(
+      {
+        accent: value => accentColor({ value }, userConfig.settings),
+      },
+      { values: flattenColorPalette(theme('accentColor')), type: ['color', 'any'] },
+    )
+    matchUtilities(
+      {
+        text: value => textColor({ value, corePlugins }, userConfig.settings),
+      },
+      { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] },
+    )
+    addComponents(tailwindAnimations(userConfig.animations))
+    addComponents(tailwindPropertyUtilities('mask', Object.keys(tailwindParseVariables('mask', relativePath('../src/theme/config/mask.css'), {
+      ...tailwindVariables('mask', userConfig.mask ?? []),
+    }, userConfig.mask, false))))
+    addComponents(divideGap({ theme, e }))
+  }, {
+    corePlugins: {
+      preflight: false,
+      textColor: false,
+      accentColor: false,
+    },
+    theme: {
+      extend: {
+        transitionProperty: {
+          DEFAULT: 'var(--default-transition-property)',
         },
-        theme: {
-            extend: {
-                transitionProperty: {
-                    DEFAULT: 'var(--default-transition-property)'
-                },
-                transitionDuration: {
-                    DEFAULT: 'var(--default-transition-duration)'
-                },
-                transitionTimingFunction: tailwindParseVariables('ease', relativePath('../src/theme/config/transition.css'), {
-                    ...tailwindVariables('ease', userConfig.ease ?? [])
-                }, userConfig.ease),
-                colors: tailwindColors(Object.keys(tailwindParseVariables('color', relativePath('../src/theme/default.css'), {
-                    ...tailwindVariables('color', userConfig.colors ?? [])
-                }, userConfig.colors)), settings.colorMix, settings.rgb),
-                fontSize: tailwindParseVariables('text', relativePath('../src/theme/config/font.css'), {
-                    ...tailwindVariables('text', userConfig.fontSize ?? [])
-                }, userConfig.fontSize),
-                fontFamily: tailwindParseVariables('font', relativePath('../src/theme/config/font.css'), {
-                    ...tailwindVariables('font', userConfig.fontFamily ?? [])
-                }, userConfig.fontFamily),
-                fontWeight: tailwindParseVariables('font-weight', relativePath('../src/theme/config/font.css'), {
-                    ...tailwindVariables('font-weight', userConfig.fontWeight ?? [])
-                }, userConfig.fontWeight),
-                zIndex: tailwindParseVariables('z-index', relativePath('../src/theme/config/z.css'), {
-                    ...tailwindVariables('z-index', userConfig.zIndex ?? []),
-                    0: 0,
-                    auto: 'auto'
-                }, userConfig.zIndex),
-                spacing: tailwindParseVariables('spacing', relativePath('../src/theme/config/spacing.css'), {
-                    ...tailwindVariables('spacing', userConfig.spacing ?? [])
-                }, userConfig.spacing),
-                borderRadius: tailwindParseVariables('radius', relativePath('../src/theme/config/radius.css'), {
-                    ...tailwindVariables('radius', userConfig.borderRadius ?? []),
-                    DEFAULT: 'var(--radius-xl)'
-                }, userConfig.borderRadius),
-                screens: userConfig.screens
-            }
-        }
-    })
+        transitionDuration: {
+          DEFAULT: 'var(--default-transition-duration)',
+        },
+        transitionTimingFunction: tailwindParseVariables('ease', relativePath('../src/theme/config/transition.css'), {
+          ...tailwindVariables('ease', userConfig.ease ?? []),
+        }, userConfig.ease),
+        colors: tailwindColors(Object.keys(tailwindParseVariables('color', relativePath('../src/theme/default.css'), {
+          ...tailwindVariables('color', userConfig.colors ?? []),
+        }, userConfig.colors)), settings.colorMix, settings.rgb),
+        fontSize: tailwindParseVariables('text', relativePath('../src/theme/config/font.css'), {
+          ...tailwindVariables('text', userConfig.fontSize ?? []),
+        }, userConfig.fontSize),
+        fontFamily: tailwindParseVariables('font', relativePath('../src/theme/config/font.css'), {
+          ...tailwindVariables('font', userConfig.fontFamily ?? []),
+        }, userConfig.fontFamily),
+        fontWeight: tailwindParseVariables('font-weight', relativePath('../src/theme/config/font.css'), {
+          ...tailwindVariables('font-weight', userConfig.fontWeight ?? []),
+        }, userConfig.fontWeight),
+        zIndex: tailwindParseVariables('z-index', relativePath('../src/theme/config/z.css'), {
+          ...tailwindVariables('z-index', userConfig.zIndex ?? []),
+          0: 0,
+          auto: 'auto',
+        }, userConfig.zIndex),
+        spacing: tailwindParseVariables('spacing', relativePath('../src/theme/config/spacing.css'), {
+          ...tailwindVariables('spacing', userConfig.spacing ?? []),
+        }, userConfig.spacing),
+        borderRadius: tailwindParseVariables('radius', relativePath('../src/theme/config/radius.css'), {
+          ...tailwindVariables('radius', userConfig.borderRadius ?? []),
+          DEFAULT: 'var(--radius-xl)',
+        }, userConfig.borderRadius),
+        screens: userConfig.screens,
+      },
+    },
+  })
 }
 
 export { tailwindAnimations, tailwindColors, tailwindPropertyUtilities, tailwindVariables, tailwindVariablesFont }

package/plugin/utilities/color.js

@@ -2,68 +2,70 @@ import withAlphaVariable from 'tailwindcss/src/util/withAlphaVariable'
 import toColorValue from 'tailwindcss/src/util/toColorValue'
 
 export const accentColor = ({ value }, settings) => {
-    const matchValue = toColorValue(value).match(/var\((--color-.*?)\)/)
-    const colorProperties = {}
+  const matchValue = toColorValue(value).match(/var\((--color-.*?)\)/)
+  const colorProperties = {}
 
-    if (matchValue) {
-        if (settings.rgb) {
-            colorProperties['--color-accent-rgb'] =
-                `var(${matchValue[1].includes('-rgb') ? matchValue[1] : matchValue[1] + '-rgb'})`
-            colorProperties['--color-accent-foreground-rgb'] =
-                `var(${matchValue[1].includes('-rgb') ? matchValue[1].replace('-rgb', '-foreground-rgb') : matchValue[1] + '-foreground-rgb, var(--color-light-rgb)'})`
-        }
+  if (matchValue) {
+    if (settings.rgb) {
+      colorProperties['--color-accent-rgb']
+                = `var(${matchValue[1].includes('-rgb') ? matchValue[1] : matchValue[1] + '-rgb'})`
+      colorProperties['--color-accent-foreground-rgb']
+                = `var(${matchValue[1].includes('-rgb') ? matchValue[1].replace('-rgb', '-foreground-rgb') : matchValue[1] + '-foreground-rgb, var(--color-light-rgb)'})`
+    }
 
-        if (toColorValue(value).includes('calc(1 * 100%)') || toColorValue(value).includes(' / 1')) {
-            colorProperties['--color-accent'] = matchValue[0].replace('-rgb', '')
-            colorProperties['--color-accent-foreground'] = `var(${matchValue[1].replace('-rgb', '')}-foreground, var(--color-light))`
+    if (toColorValue(value).includes('calc(1 * 100%)') || toColorValue(value).includes(' / 1')) {
+      colorProperties['--color-accent'] = matchValue[0].replace('-rgb', '')
+      colorProperties['--color-accent-foreground'] = `var(${matchValue[1].replace('-rgb', '')}-foreground, var(--color-light))`
 
-            return {
-                ...colorProperties,
-                'accent-color': settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))'
-            }
-        } else {
-            if (matchValue[1].includes('-rgb')) {
-                colorProperties['--color-accent'] = toColorValue(value)
-            } else {
-                colorProperties['--color-accent'] = settings.rgb ? `rgb(var(--color-accent-rgb) / ${toColorValue(value).match(/calc\((.*?)\)/)[0]})` : toColorValue(value)
-            }
+      return {
+        ...colorProperties,
+        'accent-color': settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))',
+      }
+    }
+    else {
+      if (matchValue[1].includes('-rgb')) {
+        colorProperties['--color-accent'] = toColorValue(value)
+      }
+      else {
+        colorProperties['--color-accent'] = settings.rgb ? `rgb(var(--color-accent-rgb) / ${toColorValue(value).match(/calc\((.*?)\)/)[0]})` : toColorValue(value)
+      }
 
-            colorProperties['--color-accent-foreground'] = settings.rgb ? 'rgb(var(--color-accent-foreground-rgb))' : `var(${matchValue[1]}-foreground, var(--color-light))`
+      colorProperties['--color-accent-foreground'] = settings.rgb ? 'rgb(var(--color-accent-foreground-rgb))' : `var(${matchValue[1]}-foreground, var(--color-light))`
 
-            return {
-                ...colorProperties,
-                'accent-color': settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))'
-            }
-        }
+      return {
+        ...colorProperties,
+        'accent-color': settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))',
+      }
     }
+  }
 
-    return {
-        '--color-accent': toColorValue(value),
-        'accent-color': 'var(--color-accent)'
-    }
+  return {
+    '--color-accent': toColorValue(value),
+    'accent-color': 'var(--color-accent)',
+  }
 }
 
 export const textColor = ({ value, corePlugins }, settings) => {
-    const matchValue = toColorValue(value).match(/var\((--color-.*?)\)/)
-    const withCurrentRgb = {}
+  const matchValue = toColorValue(value).match(/var\((--color-.*?)\)/)
+  const withCurrentRgb = {}
 
-    if (matchValue && settings.rgb) {
-        withCurrentRgb['--tw-text-current-rgb'] = matchValue[1].includes('rgb') ? matchValue[0] : `var(${matchValue[1]}-rgb)`
-    }
-
-    if (!corePlugins('textOpacity')) {
-        return {
-            ...withCurrentRgb,
-            color: toColorValue(value)
-        }
-    }
+  if (matchValue && settings.rgb) {
+    withCurrentRgb['--tw-text-current-rgb'] = matchValue[1].includes('rgb') ? matchValue[0] : `var(${matchValue[1]}-rgb)`
+  }
 
+  if (!corePlugins('textOpacity')) {
     return {
-        ...withCurrentRgb,
-        ...withAlphaVariable({
-            color: value,
-            property: 'color',
-            variable: '--tw-text-opacity'
-        })
+      ...withCurrentRgb,
+      color: toColorValue(value),
     }
+  }
+
+  return {
+    ...withCurrentRgb,
+    ...withAlphaVariable({
+      color: value,
+      property: 'color',
+      variable: '--tw-text-opacity',
+    }),
+  }
 }

package/plugin/utilities/common.js

@@ -1,6 +1,6 @@
 import { readFileSync } from 'node:fs'
-import { fileURLToPath } from 'node:url'
-import { resolve, dirname } from 'node:path'
+import { resolve } from 'node:path'
+import process from 'node:process'
 
 /**
  * @param {[]} colors
@@ -9,21 +9,21 @@ import { resolve, dirname } from 'node:path'
  * @returns {Object}
  */
 export const tailwindColors = (colors = [], colorMix = true, rgb = false) => {
-    const result = {
-        current: 'color-mix(in var(--default-color-space), currentcolor calc(<alpha-value> * 100%), var(--default-color-mix, transparent))'
-    }
+  const result = {
+    current: 'color-mix(in var(--default-color-space), currentcolor calc(<alpha-value> * 100%), var(--default-color-mix, transparent))',
+  }
 
-    colors.forEach((name) => {
-        if (rgb) {
-            result[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`
-        }
+  colors.forEach((name) => {
+    if (rgb) {
+      result[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`
+    }
 
-        result[name] = colorMix
-            ? `color-mix(in var(--default-color-space), var(--color-${name}) calc(<alpha-value> * 100%), var(--default-color-mix, transparent))`
-            : `rgb(var(--color-${name}) / <alpha-value>)`
-    })
+    result[name] = colorMix
+      ? `color-mix(in var(--default-color-space), var(--color-${name}) calc(<alpha-value> * 100%), var(--default-color-mix, transparent))`
+      : `rgb(var(--color-${name}) / <alpha-value>)`
+  })
 
-    return result
+  return result
 }
 
 /**
@@ -33,46 +33,46 @@ export const tailwindColors = (colors = [], colorMix = true, rgb = false) => {
  * @returns {Object}
  */
 export const tailwindVariables = (type, variables = [], values = {}) => {
-    if (!Array.isArray(variables)) {
-        return values
-    }
+  if (!Array.isArray(variables)) {
+    return values
+  }
 
-    variables.forEach((name) => {
-        values[name] = `var(--${type}-${name.replace(/\./g, '_')})`
-    })
+  variables.forEach((name) => {
+    values[name] = `var(--${type}-${name.replace(/\./g, '_')})`
+  })
 
-    return values
+  return values
 }
 
 export const tailwindParseVariables = (type, file, customValues = {}, customPath, initialValues = true) => {
-    const parseFile = (fileContent) => {
-        const regex = /(--[\w-]+):\s*([^;]+);/g
-        const matches = [...fileContent.matchAll(regex)]
-        const variables = matches.map(match => [match[1], match[2]])
-        const values = {}
+  const parseFile = (fileContent) => {
+    const regex = /(--[\w-]+):\s*([^;]+);/g
+    const matches = [...fileContent.matchAll(regex)]
+    const variables = matches.map(match => [match[1], match[2]])
+    const values = {}
 
-        variables.forEach((match, index) => {
-            if (!match[0].startsWith(`--${type}-`) || match[0].endsWith('--line-height')) {
-                return
-            }
+    variables.forEach((match, index) => {
+      if (!match[0].startsWith(`--${type}-`) || match[0].endsWith('--line-height')) {
+        return
+      }
 
-            const name = match[0].replace(`--${type}-`, '')
+      const name = match[0].replace(`--${type}-`, '')
 
-            values[name.replace(/_/g, '.')] = type === 'font-size' ? [`var(${match})`, `var(${variables[index + 1]})`] : `var(${initialValues ? match : match[0]})`
-        })
+      values[name.replace(/_/g, '.')] = type === 'font-size' ? [`var(${match})`, `var(${variables[index + 1]})`] : `var(${initialValues ? match : match[0]})`
+    })
 
-        return values
-    }
+    return values
+  }
 
-    const fileContent = readFileSync(file).toString()
-    const values = parseFile(fileContent)
+  const fileContent = readFileSync(file).toString()
+  const values = parseFile(fileContent)
 
-    if (customPath && !Array.isArray(customPath)) {
-        const customFileContent = readFileSync(resolve(process.cwd(), customPath)).toString()
-        customValues = { ...customValues, ...parseFile(customFileContent) }
-    }
+  if (customPath && !Array.isArray(customPath)) {
+    const customFileContent = readFileSync(resolve(process.cwd(), customPath)).toString()
+    customValues = { ...customValues, ...parseFile(customFileContent) }
+  }
 
-    return { ...values, ...customValues }
+  return { ...values, ...customValues }
 }
 
 /**
@@ -82,11 +82,11 @@ export const tailwindParseVariables = (type, file, customValues = {}, customPath
  * @returns {Object}
  */
 export const tailwindVariablesFont = (type, variables = [], values = {}) => {
-    variables.forEach(({ value, initial }) => {
-        values[value] = [`var(--${type}-${value}, ${initial})`, `calc(var(--${type}-${value}) + 0.5rem)`]
-    })
+  variables.forEach(({ value, initial }) => {
+    values[value] = [`var(--${type}-${value}, ${initial})`, `calc(var(--${type}-${value}) + 0.5rem)`]
+  })
 
-    return values
+  return values
 }
 
 /**
@@ -95,15 +95,15 @@ export const tailwindVariablesFont = (type, variables = [], values = {}) => {
  * @returns {Object}
  */
 export const tailwindPropertyUtilities = (type, variables = []) => {
-    const result = {}
+  const result = {}
 
-    variables.forEach((name) => {
-        result[`.${type}-${name}`] = {
-            [type]: `var(--${type}-${name})`
-        }
-    })
+  variables.forEach((name) => {
+    result[`.${type}-${name}`] = {
+      [type]: `var(--${type}-${name})`,
+    }
+  })
 
-    return result
+  return result
 }
 
 /**
@@ -111,13 +111,13 @@ export const tailwindPropertyUtilities = (type, variables = []) => {
  * @returns {Object}
  */
 export const tailwindAnimations = (values) => {
-    const result = {}
+  const result = {}
 
-    values.forEach((value) => {
-        result[`.animation-${value}`] = {
-            'animation-name': value
-        }
-    })
+  values.forEach((value) => {
+    result[`.animation-${value}`] = {
+      'animation-name': value,
+    }
+  })
 
-    return result
+  return result
 }

package/plugin/utilities/divide-gap.js

@@ -1,20 +1,20 @@
-export default function divideGap ({ theme, e }) {
-    return [
-        ...Object.entries(theme('spacing')).map(([key, value]) => {
-            return {
-                [`.${e(`divide-gap-x-${key}`)}`]: {
-                    '& > :where(*:not(:first-child))': {
-                        paddingLeft: value,
-                        marginLeft: value
-                    }
-                },
-                [`.${e(`divide-gap-y-${key}`)}`]: {
-                    '& > :where(*:not(:first-child))': {
-                        paddingTop: value,
-                        marginTop: value
-                    }
-                }
-            }
-        })
-    ]
+export default function divideGap({ theme, e }) {
+  return [
+    ...Object.entries(theme('spacing')).map(([key, value]) => {
+      return {
+        [`.${e(`divide-gap-x-${key}`)}`]: {
+          '& > :where(*:not(:first-child))': {
+            paddingLeft: value,
+            marginLeft: value,
+          },
+        },
+        [`.${e(`divide-gap-y-${key}`)}`]: {
+          '& > :where(*:not(:first-child))': {
+            paddingTop: value,
+            marginTop: value,
+          },
+        },
+      }
+    }),
+  ]
 }

package/plugin/utilities/dot.js

@@ -1,12 +1,12 @@
 export default {
-    '.dot': {
-        display: 'inline-flex',
-        inlineSize: '0.5rem',
-        blockSize: '0.5rem',
-        borderRadius: 'var(--radius-full)',
-        backgroundColor: 'currentColor',
-        flexShrink: '0',
-        justifyContent: 'center',
-        alignItems: 'center'
-    }
+  '.dot': {
+    display: 'inline-flex',
+    inlineSize: '0.5rem',
+    blockSize: '0.5rem',
+    borderRadius: 'var(--radius-full)',
+    backgroundColor: 'currentColor',
+    flexShrink: '0',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 }

package/src/base/defaults.css

@@ -33,14 +33,14 @@
 }
 
 :where(hr) {
-  background-color: color-mix(in var(--default-color-space), currentColor 100%, transparent);
+  background-color: color-mix(in var(--default-color-space), currentcolor 100%, transparent);
   block-size: 1px;
   inline-size: 100%;
 }
 
 :where(code) {
   padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
-  background: var(--color-body-secondary);
+  background-color: var(--color-body-secondary);
   border-radius: var(--radius-sm);
   color: var(--color-accent);
 }

package/src/base/reset.css

@@ -31,7 +31,6 @@
 :where(option),
 :where(output),
 :where(p),
-:where(pre),
 :where(select),
 :where(summary),
 :where(table),
@@ -73,7 +72,10 @@
 }
 
 /* Improve consistency of default fonts in all browsers. */
-:where(code), :where(kbd), :where(samp), :where(pre) {
+:where(code),
+:where(kbd),
+:where(samp),
+:where(pre) {
   font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 1em;
 }

package/src/common.js

@@ -1,11 +1,11 @@
 export const nextRepaint = () => {
-    return new Promise((resolve) => {
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                resolve()
-            })
-        })
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        resolve()
+      })
     })
+  })
 }
 
 export const animationsFinished = async element => Promise.all(element.getAnimations().map(animation => animation.finished))

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

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --x-badge-border-width: 0px;
   --x-badge-border-radius: var(--radius-lg);
   --x-badge-font-size: var(--text-xs);

package/src/components/breadcrumb/default.css

@@ -1,6 +1,7 @@
 .x-breadcrumb {
   > :where(ul, ol) {
-    &, > li {
+    &,
+    > li {
       display: flex;
       align-items: center;
     }