winduum 2.0.0-next.1 → 2.0.0-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.3",
   "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",

package/plugin/index.js

@@ -82,16 +82,16 @@ export const defaultConfig = {
     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,

package/plugin/utilities/dot.js

@@ -3,8 +3,8 @@ export default {
         display: 'inline-flex',
         width: '0.625rem',
         height: '0.625rem',
-        borderRadius: 'var(--rounded-full)',
-        backgroundColor: 'color-mix(in var(--default-color-space), var(--color-accent) 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/defaults.css

@@ -37,7 +37,7 @@
 :where(hr) {
   background-color: color-mix(in var(--default-color-space), currentColor 100%, transparent);
   block-size: 1px;
-  width: 100%;
+  inline-size: 100%;
 }
 
 :where(code) {

package/src/base/keyframes.css

@@ -7,7 +7,7 @@
 @keyframes ripple {
   to {
     transform: scale(2.5);
-    opacity: 0;
+    opacity: 0%;
   }
 }
 
@@ -23,12 +23,12 @@
 
 @keyframes fade-in {
   from {
-    opacity: 0
+    opacity: 0%;
   }
 }
 
 @keyframes fade-out {
   from {
-    opacity: 1
+    opacity: 100%;
   }
 }

package/src/components/badge/bordered.css

@@ -1,16 +1,6 @@
-.badge {
-  &:where(.bordered) {
-    --badge-border-color: var(--color-accent);
-    --badge-border-width: 1px;
-    --tw-border-opacity: 1;
-    --tw-border-mix: transparent;
-
-    border: var(--badge-border-width) solid color-mix(in var(--default-color-space), var(--badge-border-color) calc(var(--tw-border-opacity) * 100%), var(--tw-border-mix));
-    padding-inline: calc(var(--badge-px) - var(--badge-border-width));
-  }
-
-  &:is(.bordered) {
-    --badge-color: var(--color-accent);
-    --tw-bg-opacity: 0;
-  }
+.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

@@ -1,5 +1,5 @@
-.badge:is(.circle) {
-  --badge-px: var(--badge-py);
-  --badge-width: var(--badge-height);
-  --badge-border-radius: var(--radius-full);
+.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

@@ -1,22 +1,38 @@
-.badge {
-  --badge-bg: var(--color-accent);
-  --badge-color: var(--color-accent-foreground);
-  --tw-bg-opacity: 1;
-  --tw-text-opacity: 1;
-  --tw-bg-mix: transparent;
-  --tw-text-mix: transparent;
+.x-badge {
+  --x-badge-background-color: var(--color-accent);
+  --x-badge-border-color: var(--color-accent);
+  --x-badge-color: var(--color-accent-foreground);
 
-  width: var(--badge-width);
-  height: var(--badge-height);
-  padding: var(--badge-py) var(--badge-px);
-  border-radius: var(--badge-border-radius);
-  font-family: var(--badge-font-family);
-  font-weight: var(--badge-font-weight);
-  font-size: var(--badge-font-size);
-  letter-spacing: var(--badge-letter-spacing);
-  background-color: color-mix(in var(--default-color-space), var(--badge-bg) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-  color: color-mix(in var(--default-color-space), var(--badge-color) calc(var(--tw-text-opacity) * 100%), var(--tw-text-mix));
-  gap: var(--badge-gap);
+  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;

package/src/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

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

package/src/components/badge/muted.css

@@ -1,4 +1,4 @@
-.badge:is(.muted) {
-  --badge-color: var(--color-accent);
-  --tw-bg-opacity: 0.1;
+.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;
+}

package/src/components/badge/readme.md

@@ -1,4 +1,4 @@
-# [Badge](https://winduum.dev/docs/ui/badge.html)
+# [Badge](https://winduum.dev/docs/components/badge.html)
 
 ## Installation
 ```shell
@@ -8,20 +8,20 @@ Learn more how to set up Winduum [here](https://winduum.dev/docs/).
 Include CSS either globally or to your component _([you can't use TailwindCSS layers in per-component CSS](https://tailwindcss.com/docs/adding-custom-styles#layers-and-per-component-css))_
 
 ```css
-@import "winduum/src/ui/badge/index.css" layer(components);
+@import "winduum/src/components/badge/index.css" layer(components);
 ```
 
 or modular (you can use your own props or CSS)
 
 ```css
-@import "winduum/src/ui/badge/default.css" layer(components);
-@import "winduum/src/ui/badge/default-props.css" layer(components);
-@import "winduum/src/ui/badge/sm.css" layer(components);
-@import "winduum/src/ui/badge/lg.css" layer(components);
-@import "winduum/src/ui/badge/bordered.css" layer(components);
-@import "winduum/src/ui/badge/muted.css" layer(components);
-@import "winduum/src/ui/badge/square.css" layer(components);
-@import "winduum/src/ui/badge/circle.css" layer(components);
+@import "winduum/src/components/badge/props/default.css" layer(components);
+@import "winduum/src/components/badge/default.css" layer(components);
+@import "winduum/src/components/badge/sm.css" layer(components);
+@import "winduum/src/components/badge/lg.css" layer(components);
+@import "winduum/src/components/badge/bordered.css" layer(components);
+@import "winduum/src/components/badge/muted.css" layer(components);
+@import "winduum/src/components/badge/square.css" layer(components);
+@import "winduum/src/components/badge/circle.css" layer(components);
 
 ```
 
@@ -30,8 +30,8 @@ By default, imports are directly from `npm` so you can leverage updates.
 You can also copy and paste the code from this directory to your project and remap the imports to local.
 
 ```css
-@import "@/components/ui/badge/assets/index.css" layer(components);
+@import "@/components/badge/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/badge.html) to learn more about usage examples.
+Visit [docs](https://winduum.dev/docs/components/badge.html) to learn more about usage examples.

package/src/components/badge/sm.css

@@ -1,4 +1,4 @@
-.badge:is(.sm) {
-  --badge-height: 1.25rem;
-  --badge-font-size: 0.625rem;
+.x-badge:is(.sm) {
+  --x-badge-height: 1.25rem;
+  --x-badge-font-size: var(--font-size-xs);
 }

package/src/components/badge/square.css

@@ -1,4 +1,4 @@
-.badge:is(.square) {
-  --badge-px: var(--badge-py);
-  --badge-width: var(--badge-height);
+.x-badge:is(.square) {
+  --x-badge-padding-inline: var(--x-badge-padding-block);
+  --x-badge-width: var(--x-badge-height);
 }

package/src/components/breadcrumb/default.css

@@ -1,4 +1,4 @@
-.breadcrumb {
+.x-breadcrumb {
   > :where(ul, ol) {
     &, > li {
       display: flex;
@@ -7,13 +7,13 @@
 
     > li {
       &:not(:last-child)::after {
-        content: "";
-        mask: var(--breadcrumb-marker);
-        background-color: currentColor;
-        margin-inline: var(--breadcrumb-gap);
-        width: var(--breadcrumb-marker-size);
-        height: var(--breadcrumb-marker-size);
+        mask: var(--x-breadcrumb-marker);
+        background-color: var(--x-breadcrumb-background-color, currentColor);
+        margin-inline: var(--x-breadcrumb-gap);
+        inline-size: var(--x-breadcrumb-marker-size);
+        block-size: var(--x-breadcrumb-marker-size);
         flex-shrink: 0;
+        content: "";
       }
     }
   }

package/src/components/breadcrumb/index.css

@@ -1,2 +1,2 @@
+@import "props/default.css";
 @import "default.css";
-@import "default-props.css";

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

@@ -0,0 +1,5 @@
+:root, :host {
+  --x-breadcrumb-marker-size: 0.875rem;
+  --x-breadcrumb-marker: var(--mask-chevron-right);
+  --x-breadcrumb-gap: var(--spacing-xs);
+}

package/src/components/breadcrumb/readme.md

@@ -14,8 +14,8 @@ Include CSS either globally or to your component _([you can't use TailwindCSS la
 or modular (you can use your own props or CSS)
 
 ```css
+@import "winduum/src/components/breadcrumb/props/default.css" layer(components);
 @import "winduum/src/components/breadcrumb/default.css" layer(components);
-@import "winduum/src/components/breadcrumb/default-props.css" layer(components);
 ```
 
 ### Local imports

package/src/components/button/bordered.css

@@ -1,19 +1,19 @@
-.button:is(.bordered) {
-  --button-disabled-background-color-opacity: 0%;
-  --button-disabled-background-color-mix: transparent;
-  --button-disabled-border-color-opacity: 30%;
-  --button-disabled-color: var(--color-accent);
-  --button-active-background-color-opacity: 20%;
-  --button-active-background-color-mix: transparent;
-  --button-active-border-color-opacity: 30%;
-  --button-active-color: var(--color-accent);
-  --button-hover-background-color-opacity: 10%;
-  --button-hover-background-color-mix: transparent;
-  --button-hover-border-color-opacity: 30%;
-  --button-hover-color: var(--color-accent);
-  --button-focus-outline-offset: 0px;
-  --button-border-width: 1px;
-  --button-border-color-opacity: 30%;
-  --button-background-color-opacity: 0%;
-  --button-color: var(--color-accent);
+.x-button:is(.bordered) {
+  --x-button-disabled-background-color-opacity: 0%;
+  --x-button-disabled-background-color-mix: transparent;
+  --x-button-disabled-border-color-opacity: 30%;
+  --x-button-disabled-color: var(--color-accent);
+  --x-button-active-background-color-opacity: 20%;
+  --x-button-active-background-color-mix: transparent;
+  --x-button-active-border-color-opacity: 30%;
+  --x-button-active-color: var(--color-accent);
+  --x-button-hover-background-color-opacity: 10%;
+  --x-button-hover-background-color-mix: transparent;
+  --x-button-hover-border-color-opacity: 30%;
+  --x-button-hover-color: var(--color-accent);
+  --x-button-focus-outline-offset: 0px;
+  --x-button-border-width: 1px;
+  --x-button-border-color-opacity: 30%;
+  --x-button-background-color-opacity: 0%;
+  --x-button-color: var(--color-accent);
 }

package/src/components/button/circle.css

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

package/src/components/button/default.css

@@ -1,47 +1,47 @@
-.button {
-  --button-background-color: var(--color-accent);
-  --button-border-color: var(--color-accent);
-  --button-color: var(--color-accent-foreground);
+.x-button {
+  --x-button-background-color: var(--color-accent);
+  --x-button-border-color: var(--color-accent);
+  --x-button-color: var(--color-accent-foreground);
 
-  inline-size: var(--button-width);
-  block-size: var(--button-height);
-  padding: var(--button-padding-block) var(--button-padding-inline);
-  padding-inline: calc(var(--button-padding-inline) - var(--button-border-width));
-  border-radius: var(--button-border-radius);
-  font-family: var(--button-font-family);
-  font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  letter-spacing: var(--button-letter-spacing);
+  inline-size: var(--x-button-width);
+  block-size: var(--x-button-height);
+  padding: var(--x-button-padding-block) var(--x-button-padding-inline);
+  padding-inline: calc(var(--x-button-padding-inline) - var(--x-button-border-width));
+  border-radius: var(--x-button-border-radius);
+  font-family: var(--x-button-font-family);
+  font-size: var(--x-button-font-size);
+  font-weight: var(--x-button-font-weight);
+  letter-spacing: var(--x-button-letter-spacing);
   background-color:
     color-mix(
-      in var(--button-background-color-space, srgb),
-      var(--button-background-color) var(--button-background-color-opacity, 100%),
-      var(--button-background-color-mix, transparent)
+      in var(--x-button-background-color-space, srgb),
+      var(--x-button-background-color) var(--x-button-background-color-opacity, 100%),
+      var(--x-button-background-color-mix, transparent)
     );
   color:
     color-mix(
-      in var(--button-color-space, srgb),
-      var(--button-color) var(--button-color-opacity, 100%),
-      var(--button-color-mix, transparent)
+      in var(--x-button-color-space, srgb),
+      var(--x-button-color) var(--x-button-color-opacity, 100%),
+      var(--x-button-color-mix, transparent)
     );
   border:
-    var(--button-border-width)
+    var(--x-button-border-width)
     solid
     color-mix(
-      in var(--button-border-color-space, srgb),
-      var(--button-border-color) var(--button-border-color-opacity, 100%),
-      var(--button-border-color-mix, transparent)
+      in var(--x-button-border-color-space, srgb),
+      var(--x-button-border-color) var(--x-button-border-color-opacity, 100%),
+      var(--x-button-border-color-mix, transparent)
     );
   outline:
-    var(--button-outline-width)
+    var(--x-button-outline-width)
     solid
     color-mix(
-      in var(--button-outline-color-space, srgb),
-      var(--button-outline-color, transparent) var(--button-outline-color-opacity, 100%),
-      var(--button-outline-color-mix, transparent)
+      in var(--x-button-outline-color-space, srgb),
+      var(--x-button-outline-color, transparent) var(--x-button-outline-color-opacity, 100%),
+      var(--x-button-outline-color-mix, transparent)
     );
-  outline-offset: var(--button-outline-offset);
-  gap: var(--button-gap);
+  outline-offset: var(--x-button-outline-offset);
+  gap: var(--x-button-gap);
   user-select: none;
   overflow: clip;
   display: inline-flex;

package/src/components/button/fill.css

@@ -1,6 +1,6 @@
-.button:is(.fill) {
-  --button-hover-background-color-mix: var(--color-dark);
-  --button-hover-background-color-opacity: 100%;
-  --button-active-background-color-mix: var(--color-dark);
-  --button-active-background-color-opacity: 90%;
+.x-button:is(.fill) {
+  --x-button-hover-background-color-mix: var(--color-dark);
+  --x-button-hover-background-color-opacity: 100%;
+  --x-button-active-background-color-mix: var(--color-dark);
+  --x-button-active-background-color-opacity: 90%;
 }

package/src/components/button/ghosted.css

@@ -1,14 +1,14 @@
-.button:is(.ghosted) {
-  --button-disabled-background-color-opacity: 0%;
-  --button-disabled-background-color-mix: transparent;
-  --button-disabled-color: var(--color-accent);
-  --button-active-background-color-opacity: 20%;
-  --button-active-background-color-mix: transparent;
-  --button-active-color: var(--color-accent);
-  --button-hover-background-color-opacity: 10%;
-  --button-hover-background-color-mix: transparent;
-  --button-hover-color: var(--color-accent);
-  --button-focus-outline-offset: -2px;
-  --button-color: var(--color-accent);
-  --button-background-color-opacity: 0%;
+.x-button:is(.ghosted) {
+  --x-button-disabled-background-color-opacity: 0%;
+  --x-button-disabled-background-color-mix: transparent;
+  --x-button-disabled-color: var(--color-accent);
+  --x-button-active-background-color-opacity: 20%;
+  --x-button-active-background-color-mix: transparent;
+  --x-button-active-color: var(--color-accent);
+  --x-button-hover-background-color-opacity: 10%;
+  --x-button-hover-background-color-mix: transparent;
+  --x-button-hover-color: var(--color-accent);
+  --x-button-focus-outline-offset: -2px;
+  --x-button-color: var(--color-accent);
+  --x-button-background-color-opacity: 0%;
 }