winduum 1.2.1 → 2.0.0-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "1.2.1",
+  "version": "2.0.0-next.2",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -19,28 +19,28 @@
     "publish-next": "npm publish --tag next"
   },
   "devDependencies": {
-    "@floating-ui/dom": "^1.6.5",
+    "@floating-ui/dom": "^1.6.7",
     "@stylistic/stylelint-config": "^1.0.1",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.0.5",
     "autoprefixer": "^10.4.19",
     "css-has-pseudo": "^6.0.5",
-    "dts-buddy": "^0.4.7",
+    "dts-buddy": "^0.5.1",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "fast-glob": "^3.3.2",
-    "postcss": "^8.4.38",
-    "postcss-custom-media": "^10.0.6",
+    "postcss": "^8.4.39",
+    "postcss-custom-media": "^10.0.8",
     "postcss-import": "^16.1.0",
     "postcss-nesting": "^12.1.5",
     "slide-element": "^2.3.1",
-    "stylelint": "^16.6.1",
-    "stylelint-config-standard": "^36.0.0",
-    "tailwindcss": "^3.4.3",
+    "stylelint": "^16.7.0",
+    "stylelint-config-standard": "^36.0.1",
+    "tailwindcss": "^3.4.5",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.12",
-    "vue": "^3.4.27"
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vue": "^3.4.31"
   },
   "files": [
     "index.js",
@@ -96,9 +96,9 @@
       "default": "./src/components/popover/index.js",
       "types": "./src/components/popover/index.d.ts"
     },
-    "./src/ui/range": {
-      "default": "./src/ui/range/index.js",
-      "types": "./src/ui/range/index.d.ts"
+    "./src/components/range": {
+      "default": "./src/components/range/index.js",
+      "types": "./src/components/range/index.d.ts"
     },
     "./src/utilities/ripple": {
       "default": "./src/utilities/ripple/index.js",

package/plugin/index.js

@@ -1,6 +1,5 @@
 import plugin from 'tailwindcss/plugin'
 import flattenColorPalette from 'tailwindcss/src/util/flattenColorPalette'
-import FlexUtility from './utilities/flex.js'
 import DotUtility from './utilities/dot.js'
 import divideGap from './utilities/divide-gap.js'
 import { accentColor, textColor } from './utilities/color.js'
@@ -24,22 +23,75 @@ export const defaultConfig = {
     fontWeight: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
     ease: ['linear', 'in', 'out', 'in-out'],
     zIndex: ['10', '20', '30', '40', '50', '60'],
-    fontSize: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', '3xl', '4xl', '5xl', '6xl', '7xl', '7xl', '8xl', '9xl'],
+    fontSize: [
+        {
+            value: 'xs',
+            initial: '0.75rem'
+        },
+        {
+            value: 'sm',
+            initial: '0.875rem'
+        },
+        {
+            value: 'base',
+            initial: '1rem'
+        },
+        {
+            value: 'lg',
+            initial: '1.125rem'
+        },
+        {
+            value: 'xl',
+            initial: '1.25rem'
+        },
+        {
+            value: '2xl',
+            initial: '1.5rem'
+        },
+        {
+            value: '3xl',
+            initial: '1.875rem'
+        },
+        {
+            value: '4xl',
+            initial: '2.25rem'
+        },
+        {
+            value: '5xl',
+            initial: '3rem'
+        },
+        {
+            value: '6xl',
+            initial: '3.75rem'
+        },
+        {
+            value: '7xl',
+            initial: '4.5rem'
+        },
+        {
+            value: '8xl',
+            initial: '6rem'
+        },
+        {
+            value: '9xl',
+            initial: '8rem'
+        }
+    ],
     spacing: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'],
     borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', 'full'],
     animations: ['ripple', 'spin', 'move-indeterminate'],
     mask: ['check', 'radio', 'angle-up', 'angle-down'],
     screens: {
-        xs: '22.5em',
-        sm: '26em',
-        md: '48em',
-        lg: '60em',
-        xl: '76em',
-        '2xl': '82em',
-        '3xl': '88em',
-        '4xl': '100em',
-        xxl: '126em',
-        '2xxl': '158em'
+        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,
@@ -79,7 +131,6 @@ export const createPlugin = (userConfig = {}) => {
         addComponents(tailwindPropertyUtilities('mask', userConfig.mask))
         addComponents(divideGap({ theme, e }))
         addComponents({
-            ...FlexUtility,
             ...DotUtility
         })
     }, {
@@ -91,23 +142,23 @@ export const createPlugin = (userConfig = {}) => {
         theme: {
             extend: {
                 transitionProperty: {
-                    DEFAULT: 'var(--transition)'
+                    DEFAULT: 'var(--default-transition-property)'
                 },
                 transitionDuration: {
-                    DEFAULT: 'var(--duration)'
+                    DEFAULT: 'var(--default-transition-duration)'
                 },
-                transitionTimingFunction: tailwindVariables('ease', userConfig.ease),
+                transitionTimingFunction: tailwindVariables('transition-timing-function', userConfig.ease),
                 colors: tailwindColors(userConfig.colors, settings.colorMix, settings.rgb),
-                fontSize: tailwindVariablesFont('text', userConfig.fontSize),
-                fontFamily: tailwindVariables('font', userConfig.fontFamily),
-                fontWeight: tailwindVariables('font', userConfig.fontWeight),
-                zIndex: tailwindVariables('z', userConfig.zIndex, {
+                fontSize: tailwindVariablesFont('font-size', userConfig.fontSize),
+                fontFamily: tailwindVariables('font-family', userConfig.fontFamily),
+                fontWeight: tailwindVariables('font-weight', userConfig.fontWeight),
+                zIndex: tailwindVariables('z-index', userConfig.zIndex, {
                     0: 0,
                     auto: 'auto'
                 }),
                 spacing: tailwindVariables('spacing', userConfig.spacing),
-                borderRadius: tailwindVariables('rounded', userConfig.borderRadius, {
-                    DEFAULT: 'var(--rounded)'
+                borderRadius: tailwindVariables('radius', userConfig.borderRadius, {
+                    DEFAULT: 'var(--radius)'
                 }),
                 screens: userConfig.screens
             }

package/plugin/utilities/common.js

@@ -6,7 +6,7 @@
  */
 export const tailwindColors = (colors = [], colorMix = true, rgb = false) => {
     const result = {
-        current: 'color-mix(in var(--space), currentcolor calc(<alpha-value> * 100%), transparent)'
+        current: 'color-mix(in var(--default-color-space), currentcolor calc(<alpha-value> * 100%), transparent)'
     }
 
     colors.forEach(name => {
@@ -15,7 +15,7 @@ export const tailwindColors = (colors = [], colorMix = true, rgb = false) => {
         }
 
         result[name] = colorMix
-            ? `color-mix(in var(--space), var(--color-${name}) calc(<alpha-value> * 100%), transparent)`
+            ? `color-mix(in var(--default-color-space), var(--color-${name}) calc(<alpha-value> * 100%), transparent)`
             : `rgb(var(--color-${name}) / <alpha-value>)`
     })
 
@@ -43,8 +43,8 @@ export const tailwindVariables = (type, variables = [], values = {}) => {
  * @returns {Object}
  */
 export const tailwindVariablesFont = (type, variables = [], values = {}) => {
-    variables.forEach(name => {
-        values[name] = [`var(--${type}-${name})`, `calc(var(--${type}-${name}) + 0.5rem)`]
+    variables.forEach(({ value, initial }) => {
+        values[value] = [`var(--${type}-${value}, ${initial})`, `calc(var(--${type}-${value}) + 0.5rem)`]
     })
 
     return values

package/plugin/utilities/dot.js

@@ -1,11 +1,10 @@
 export default {
     '.dot': {
-        '--tw-bg-opacity': '1',
         display: 'inline-flex',
         width: '0.625rem',
         height: '0.625rem',
-        borderRadius: 'var(--rounded-full)',
-        backgroundColor: 'color-mix(in srgb, var(--color-accent) calc(var(--tw-bg-opacity) * 100%), transparent)',
+        borderRadius: 'var(--radius-full)',
+        backgroundColor: 'var(--color-accent)',
         flexShrink: '0',
         justifyContent: 'center',
         alignItems: 'center'

package/src/base/breakpoints.css

@@ -1,10 +1,10 @@
-@custom-media --media-xs (min-width: 22.5em);
-@custom-media --media-sm (min-width: 26em);
-@custom-media --media-md (min-width: 48em);
-@custom-media --media-lg (min-width: 60em);
-@custom-media --media-xl (min-width: 76em);
-@custom-media --media-2xl (min-width: 82em);
-@custom-media --media-3xl (min-width: 88em);
-@custom-media --media-4xl (min-width: 100em);
-@custom-media --media-xxl (min-width: 126em);
-@custom-media --media-2xxl (min-width: 158em);
+@custom-media --media-xs (min-width: 22.5rem);
+@custom-media --media-sm (min-width: 26rem);
+@custom-media --media-md (min-width: 46.5rem);
+@custom-media --media-lg (min-width: 60rem);
+@custom-media --media-xl (min-width: 76rem);
+@custom-media --media-2xl (min-width: 82rem);
+@custom-media --media-3xl (min-width: 88rem);
+@custom-media --media-4xl (min-width: 100rem);
+@custom-media --media-xxl (min-width: 126rem);
+@custom-media --media-2xxl (min-width: 158rem);

package/src/base/config/font.css

@@ -1,11 +1,24 @@
 :root, :host {
-  --font-default: 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(--font-default);
-  --font-secondary: var(--font-default);
-  --font-bold: 700;
-  --font-semibold: 600;
-  --font-medium: 500;
-  --font-normal: 400;
-  --font-light: 300;
-  --font-thin: 200;
+  --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-family-primary: var(--default-font-family);
+  --font-family-secondary: var(--default-font-family);
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --font-weight-light: 300;
+  --font-weight-thin: 200;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.75rem;
+  --font-size-7xl: 4.5rem;
+  --font-size-8xl: 6rem;
+  --font-size-9xl: 8rem;
 }

package/src/base/config/rounded.css

@@ -1,14 +1,14 @@
 :root, :host {
-  --rounded: var(--rounded-xl);
-  --rounded-xs: 0.125rem;
-  --rounded-sm: 0.25rem;
-  --rounded-md: 0.375rem;
-  --rounded-lg: 0.5rem;
-  --rounded-xl: 0.75rem;
-  --rounded-2xl: 1rem;
-  --rounded-3xl: 1.5rem;
-  --rounded-4xl: 2rem;
-  --rounded-5xl: 2.5rem;
-  --rounded-6xl: 3rem;
-  --rounded-full: 9999px;
+  --radius: var(--radius-xl);
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+  --radius-5xl: 2.5rem;
+  --radius-6xl: 3rem;
+  --radius-full: calc(infinity * 1px);
 }

package/src/base/config/transition.css

@@ -1,19 +1,19 @@
 :root, :host {
-  --transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset, visibility;
-  --transition-all: all var(--duration) var(--ease-in-out);
-  --transition-color: color var(--duration) var(--ease-in-out);
-  --transition-background: background var(--duration) var(--ease-in-out);
-  --transition-opacity: opacity var(--duration) var(--ease-in-out);
-  --transition-transform: transform var(--duration) var(--ease-in-out);
-  --transition-border: border-color var(--duration) var(--ease-in-out);
-  --transition-shadow: box-shadow var(--duration) var(--ease-in-out);
-  --duration: 150ms;
-  --ease-linear: linear;
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --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;
+  --transition-timing-function-linear: linear;
+  --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
+  --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
+  --transition-timing-function-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-all: all var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-color: color var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-background: background var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-opacity: opacity var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-transform: transform var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-border: border-color var(--default-transition-duration) var(--transition-timing-function-in-out);
+  --transition-shadow: box-shadow var(--default-transition-duration) var(--transition-timing-function-in-out);
 
   @media (prefers-reduced-motion) {
-    --duration: 0;
+    --default-transition-duration: 0;
   }
 }

package/src/base/config/z.css

@@ -1,7 +1,7 @@
 :root, :host {
-  --z-10: 10;
-  --z-20: 20;
-  --z-30: 30;
-  --z-40: 40;
-  --z-50: 50;
+  --z-index-10: 10;
+  --z-index-20: 20;
+  --z-index-30: 30;
+  --z-index-40: 40;
+  --z-index-50: 50;
 }

package/src/base/config.css

@@ -2,6 +2,5 @@
 @import "config/mask.css";
 @import "config/rounded.css";
 @import "config/spacing.css";
-@import "config/text.css";
 @import "config/transition.css";
 @import "config/z.css";

package/src/base/defaults.css

@@ -9,7 +9,7 @@
 }
 
 ::selection {
-  color: var(--color-light);
+  color: var(--color-primary-foreground);
   background-color: var(--color-primary);
 }
 
@@ -22,7 +22,7 @@
 :where([type="radio"]:enabled),
 :where(summary:not([aria-disabled="true"])),
 :where([role="button"]:not([aria-disabled="true"])) {
-  cursor: var(--cursor, pointer);
+  cursor: var(--cursor-pointer, pointer);
   user-select: none;
 }
 
@@ -35,31 +35,29 @@
 }
 
 :where(hr) {
-  --tw-border-opacity: 0.15;
-
-  border-block-start: 1px solid color-mix(in var(--space), currentColor calc(var(--tw-border-opacity) * 100%), transparent);
-  border-radius: var(--rounded);
+  background-color: color-mix(in var(--default-color-space), currentColor 100%, transparent);
+  block-size: 1px;
   width: 100%;
 }
 
 :where(code) {
   padding: var(--spacing-xs) var(--spacing-sm);
   background: var(--color-body-secondary);
-  border-radius: var(--rounded-sm);
+  border-radius: var(--radius-sm);
   color: var(--color-accent);
 }
 
 :where(kbd) {
   padding: var(--spacing-xs) var(--spacing-sm);
   background: var(--color-body-secondary);
-  border-radius: var(--rounded-sm);
+  border-radius: var(--radius-sm);
   border: 1px solid var(--color-body-tertiary);
 }
 
 :where(html) {
-  color-scheme: var(--scheme);
-  font-family: var(--font-primary);
-  font-weight: var(--font-normal);
+  color-scheme: var(--default-color-scheme);
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-normal);
   block-size: 100%;
   line-height: 1.5;
   text-size-adjust: 100%;

package/src/base/keyframes.css

@@ -7,7 +7,7 @@
 @keyframes ripple {
   to {
     transform: scale(2.5);
-    opacity: 0;
+    opacity: 0%;
   }
 }
 
@@ -20,3 +20,15 @@
     background-position: -200% 0;
   }
 }
+
+@keyframes fade-in {
+  from {
+    opacity: 0%;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 100%;
+  }
+}

package/src/base/reset.css

@@ -44,7 +44,8 @@
 :where(tr),
 :where(ul),
 :where(progress),
-:where(meter) {
+:where(meter),
+:where([popover]) {
   all: unset;
   display: revert;
 }
@@ -181,9 +182,3 @@ Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
 ::-webkit-details-marker {
   display: none;
 }
-
-/* Fix popover default colors */
-:where([popover]) {
-  background-color: inherit;
-  color: inherit;
-}

package/src/base/theme/dark-rgb.css

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

package/src/base/theme/dark.css

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

package/src/base/theme/default-rgb.css

@@ -1,6 +1,6 @@
 :root, :host {
-  --space: sRGB;
-  --scheme: light;
+  --default-color-space: sRGB;
+  --default-color-scheme: light;
   --color-current: rgb(var(--color-current-rgb));
   --color-current-foreground: rgb(var(--color-current-foreground-rgb));
   --color-accent: rgb(var(--color-accent-rgb));
@@ -10,13 +10,13 @@
   --color-main: var(--color-main-primary);
   --color-main-foreground: rgb(var(--color-main-foreground-rgb));
   --color-main-primary: rgb(var(--color-main-rgb));
-  --color-main-secondary: color-mix(in var(--space), var(--color-main) 75%, var(--color-main-foreground));
-  --color-main-tertiary: color-mix(in var(--space), var(--color-main) 50%, var(--color-main-foreground));
+  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 75%, var(--color-main-foreground));
+  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 50%, var(--color-main-foreground));
   --color-body: var(--color-body-primary);
   --color-body-foreground: rgb(var(--color-body-foreground-rgb));
   --color-body-primary: rgb(var(--color-body-rgb));
-  --color-body-secondary: color-mix(in var(--space), var(--color-body) 95%, var(--color-body-foreground));
-  --color-body-tertiary: color-mix(in var(--space), var(--color-body) 90%, var(--color-body-foreground));
+  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 95%, var(--color-body-foreground));
+  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 90%, var(--color-body-foreground));
   --color-light: rgb(var(--color-light-rgb));
   --color-light-foreground: rgb(var(--color-light-foreground-rgb));
   --color-dark: rgb(var(--color-dark-rgb));

package/src/base/theme/default.css

@@ -1,6 +1,6 @@
 :root, :host {
-  --space: sRGB;
-  --scheme: light;
+  --default-color-space: sRGB;
+  --default-color-scheme: light;
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);
   --color-primary: #3b82f6; /* color.blue.500 */
@@ -8,13 +8,13 @@
   --color-main: #171717; /* color.neutral.900 */
   --color-main-foreground: var(--color-body);
   --color-main-primary: var(--color-main);
-  --color-main-secondary: color-mix(in var(--space), var(--color-main) 75%, var(--color-main-foreground));
-  --color-main-tertiary: color-mix(in var(--space), var(--color-main) 50%, var(--color-main-foreground));
+  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 75%, var(--color-main-foreground));
+  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 50%, var(--color-main-foreground));
   --color-body: #fff; /* color.white */
   --color-body-foreground: var(--color-main);
   --color-body-primary: var(--color-body);
-  --color-body-secondary: color-mix(in var(--space), var(--color-body) 95%, var(--color-body-foreground));
-  --color-body-tertiary: color-mix(in var(--space), var(--color-body) 90%, var(--color-body-foreground));
+  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 95%, var(--color-body-foreground));
+  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 90%, var(--color-body-foreground));
   --color-light: #fff; /* color.white */
   --color-light-foreground: var(--color-dark);
   --color-dark: #171717; /* color.neutral.900 */

package/src/components/badge/bordered.css

@@ -0,0 +1,6 @@
+.x-badge:is(.bordered) {
+  --x-badge-border-width: 1px;
+  --x-badge-border-color-opacity: 100%;
+  --x-badge-background-color-opacity: 0%;
+  --x-badge-color: var(--color-accent);
+}

package/src/components/badge/circle.css

@@ -0,0 +1,5 @@
+.x-badge:is(.circle) {
+  --x-badge-padding-inline: var(--x-badge-padding-block);
+  --x-badge-width: var(--x-badge-height);
+  --x-badge-border-radius: var(--radius-full);
+}

package/src/components/badge/default.css

@@ -0,0 +1,42 @@
+.x-badge {
+  --x-badge-background-color: var(--color-accent);
+  --x-badge-border-color: var(--color-accent);
+  --x-badge-color: var(--color-accent-foreground);
+
+  inline-size: var(--x-badge-width);
+  block-size: var(--x-badge-height);
+  padding: var(--x-badge-padding-block) var(--x-badge-padding-inline);
+  padding-inline: calc(var(--x-badge-padding-inline) - var(--x-badge-border-width));
+  border-radius: var(--x-badge-border-radius);
+  font-family: var(--x-badge-font-family);
+  font-weight: var(--x-badge-font-weight);
+  font-size: var(--x-badge-font-size);
+  letter-spacing: var(--x-badge-letter-spacing);
+  background-color:
+    color-mix(
+      in var(--x-badge-background-color-space, srgb),
+      var(--x-badge-background-color) var(--x-badge-background-color-opacity, 100%),
+      var(--x-badge-background-color-mix, transparent)
+    );
+  color:
+    color-mix(
+      in var(--x-badge-color-space, srgb),
+      var(--x-badge-color) var(--x-badge-color-opacity, 100%),
+      var(--x-badge-color-mix, transparent)
+    );
+  border:
+    var(--x-badge-border-width)
+    solid
+    color-mix(
+      in var(--x-badge-border-color-space, srgb),
+      var(--x-badge-border-color) var(--x-badge-border-color-opacity, 100%),
+      var(--x-badge-border-color-mix, transparent)
+    );
+  gap: var(--x-badge-gap);
+  display: inline-flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  flex-shrink: 0;
+}

package/src/{ui → components}/badge/index.css

@@ -1,5 +1,5 @@
 @import "default.css";
-@import "default-props.css";
+@import "props/default.css";
 @import "sm.css";
 @import "lg.css";
 @import "bordered.css";

package/src/components/badge/lg.css

@@ -0,0 +1,3 @@
+.x-badge:is(.lg) {
+  --x-badge-height: 1.75rem;
+}

package/src/components/badge/muted.css

@@ -0,0 +1,4 @@
+.x-badge:is(.muted) {
+  --x-badge-color: var(--color-accent);
+  --x-badge-background-color-opacity: 10%;
+}

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

@@ -0,0 +1,9 @@
+:root, :host {
+  --x-badge-border-width: 0px;
+  --x-badge-border-radius: var(--radius-lg);
+  --x-badge-font-size: var(--font-size-xs);
+  --x-badge-gap: var(--spacing-xs);
+  --x-badge-height: 1.5rem;
+  --x-badge-padding-block: 0;
+  --x-badge-padding-inline: 0.5rem;
+}