winduum 2.0.10 → 2.1.0-next.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "2.0.10",
+  "version": "2.1.0-next.1",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -19,26 +19,27 @@
     "publish-next": "npm publish --tag next"
   },
   "devDependencies": {
-    "@floating-ui/dom": "^1.6.12",
+    "@floating-ui/dom": "^1.6.13",
     "@stylistic/stylelint-config": "^2.0.0",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
     "dts-buddy": "^0.5.4",
-    "eslint": "^9.16.0",
-    "fast-glob": "^3.3.2",
+    "eslint": "^9.18.0",
+    "fast-glob": "^3.3.3",
     "neostandard": "^0.12.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "postcss-custom-media": "^11.0.5",
     "postcss-import": "^16.1.0",
     "postcss-nesting": "^13.0.1",
     "slide-element": "^2.3.1",
-    "stylelint": "^16.11.0",
-    "stylelint-config-standard": "^36.0.1",
-    "tailwindcss": "^3.4.16",
+    "stylelint": "^16.13.2",
+    "stylelint-config-standard": "^37.0.0",
+    "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5",
-    "vite": "^6.0.3",
+    "vite": "^6.0.11",
     "vue": "^3.5.13"
   },
   "files": [

package/src/base/defaults.css

@@ -39,14 +39,14 @@
 }
 
 :where(code) {
-  padding: var(--spacing-1) var(--spacing-2);
+  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
   background: var(--color-body-secondary);
   border-radius: var(--radius-sm);
   color: var(--color-accent);
 }
 
 :where(kbd) {
-  padding: var(--spacing-1) var(--spacing-2);
+  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
   background: var(--color-body-secondary);
   border-radius: var(--radius-sm);
   border: 1px solid var(--color-body-tertiary);
@@ -54,7 +54,7 @@
 
 :where(html) {
   color-scheme: var(--default-color-scheme);
-  font-family: var(--font-family-primary);
+  font-family: var(--font-primary);
   font-weight: var(--font-weight-normal);
   block-size: 100%;
   line-height: 1.5;

package/src/base/index.css

@@ -1,5 +1,5 @@
-@import "reset.css";
-@import "defaults.css";
-@import "breakpoints.css";
-@import "keyframes.css";
-@import "transitions.css";
+@import "./reset.css";
+@import "./defaults.css";
+@import "./breakpoints.css";
+@import "./keyframes.css";
+@import "./transitions.css";

package/src/components/badge/index.css

@@ -1,8 +1,8 @@
-@import "default.css";
-@import "props/default.css";
-@import "sm.css";
-@import "lg.css";
-@import "bordered.css";
-@import "muted.css";
-@import "square.css";
-@import "circle.css";
+@import "./default.css";
+@import "./props/default.css";
+@import "./sm.css";
+@import "./lg.css";
+@import "./bordered.css";
+@import "./muted.css";
+@import "./square.css";
+@import "./circle.css";

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

@@ -1,8 +1,8 @@
 :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-1);
+  --x-badge-font-size: var(--text-xs);
+  --x-badge-gap: calc(var(--spacing) * 1);
   --x-badge-block-size: 1.5rem;
   --x-badge-padding-block: 0;
   --x-badge-padding-inline: 0.5rem;

package/src/components/badge/sm.css

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

package/src/components/breadcrumb/index.css

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

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

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

package/src/components/button/index.css

@@ -1,14 +1,14 @@
-@import "props/default.css";
-@import "props/interactive.css";
-@import "default.css";
-@import "interactive.css";
-@import "sm.css";
-@import "lg.css";
-@import "bordered.css";
-@import "ghosted.css";
-@import "muted.css";
-@import "raised.css";
-@import "fill.css";
-@import "square.css";
-@import "circle.css";
-@import "spinner.css";
+@import "./props/default.css";
+@import "./props/interactive.css";
+@import "./default.css";
+@import "./interactive.css";
+@import "./sm.css";
+@import "./lg.css";
+@import "./bordered.css";
+@import "./ghosted.css";
+@import "./muted.css";
+@import "./raised.css";
+@import "./fill.css";
+@import "./square.css";
+@import "./circle.css";
+@import "./spinner.css";

package/src/components/button/interactive.css

@@ -1,6 +1,6 @@
 .x-button {
   transition-property: var(--x-button-transition-property, var(--default-transition-property));
-  transition-timing-function: var(--x-button-timing-function, var(--transition-timing-function-in-out));
+  transition-timing-function: var(--x-button-timing-function, var(--ease-in-out));
   transition-duration: var(--x-button-transition-duration, var(--default-transition-duration));
 
   &:where(.accent-primary),

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

@@ -2,9 +2,9 @@
   --x-button-outline-width: 2px;
   --x-button-border-width: 0px;
   --x-button-border-radius: var(--radius);
-  --x-button-font-size: var(--font-size-sm);
+  --x-button-font-size: var(--text-sm);
   --x-button-font-weight: var(--font-weight-medium);
-  --x-button-gap: var(--spacing-2);
+  --x-button-gap: calc(var(--spacing) * 2);
   --x-button-block-size: 2.25rem;
   --x-button-padding-block: 0.375rem;
   --x-button-padding-inline: 0.75rem;

package/src/components/card/index.css

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

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

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

package/src/components/carousel/index.css

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

package/src/components/check/index.css

@@ -1,4 +1,4 @@
-@import "props/default.css";
-@import "default.css";
-@import "interactive.css";
-@import "invalid.css";
+@import "./props/default.css";
+@import "./default.css";
+@import "./interactive.css";
+@import "./invalid.css";

package/src/components/check/interactive.css

@@ -6,7 +6,7 @@
 
   :where(input) {
     transition-property: var(--default-transition-property);
-    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-timing-function: var(--ease-in-out);
     transition-duration: var(--default-transition-duration);
 
     &:where(:hover, :focus-visible) {

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

@@ -2,8 +2,8 @@
   --x-check-size: 1.25rem;
   --x-check-icon-size: 1.125rem;
   --x-check-icon: var(--mask-check);
-  --x-check-gap: var(--spacing-3);
-  --x-check-font-size: var(--font-size-sm);
+  --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;

package/src/components/color/index.css

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

package/src/components/color/interactive.css

@@ -1,7 +1,7 @@
 .x-color {
   :where(input) {
     transition-property: var(--default-transition-property);
-    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-timing-function: var(--ease-in-out);
     transition-duration: var(--default-transition-duration);
 
     &:disabled {

package/src/components/compare/index.css

@@ -1 +1 @@
-@import "default.css";
+@import "./default.css";

package/src/components/control/index.css

@@ -1,15 +1,15 @@
-@import "props/default.css";
-@import "props/color.css";
-@import "props/icon.css";
-@import "props/floating.css";
-@import "props/select.css";
-@import "default.css";
-@import "interactive.css";
-@import "invalid.css";
-@import "color.css";
-@import "icon.css";
-@import "file.css";
-@import "floating.css";
-@import "floating-interactive.css";
-@import "select.css";
-@import "select-multiple.css";
+@import "./props/default.css";
+@import "./props/color.css";
+@import "./props/icon.css";
+@import "./props/floating.css";
+@import "./props/select.css";
+@import "./default.css";
+@import "./interactive.css";
+@import "./invalid.css";
+@import "./color.css";
+@import "./icon.css";
+@import "./file.css";
+@import "./floating.css";
+@import "./floating-interactive.css";
+@import "./select.css";
+@import "./select-multiple.css";

package/src/components/control/interactive.css

@@ -1,6 +1,6 @@
 .x-control {
   transition-property: var(--default-transition-property);
-  transition-timing-function: var(--transition-timing-function-in-out);
+  transition-timing-function: var(--ease-in-out);
   transition-duration: var(--default-transition-duration);
 
   &:focus-within {

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

@@ -7,7 +7,7 @@
   --x-control-border-radius: var(--radius);
   --x-control-border-color: currentColor;
   --x-control-font-weight: var(--font-weight-medium);
-  --x-control-font-size: var(--font-size-base);
+  --x-control-font-size: var(--text-base);
   --x-control-background-color: var(--color-body-primary);
   --x-control-color: currentColor;
   --x-control-outline-width: 3px;

package/src/components/dialog/index.css

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

package/src/components/drawer/index.css

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

package/src/components/field/default.css

@@ -1,5 +1,5 @@
 .x-field {
-  gap: var(--x-field-gap, var(--spacing-2));
+  gap: var(--x-field-gap, calc(var(--spacing) * 2));
   display: flex;
   flex-direction: column;
 

package/src/components/field/index.css

@@ -1 +1 @@
-@import "default.css";
+@import "./default.css";

package/src/components/group/index.css

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

package/src/components/heading/index.css

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

package/src/components/heading/lg.css

@@ -1,3 +1,3 @@
 .x-heading:is(.lg) {
-  --x-heading-font-size: var(--font-size-3xl);
+  --x-heading-font-size: var(--text-3xl);
 }

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

@@ -1,6 +1,6 @@
 :root, :host {
-  --x-heading-font-family: var(--font-family-primary);
+  --x-heading-font-family: var(--font-primary);
   --x-heading-font-weight: var(--font-weight-semibold);
-  --x-heading-font-size: var(--font-size-xl);
+  --x-heading-font-size: var(--text-xl);
   --x-heading-line-height: calc(1em + 0.375rem);
 }

package/src/components/heading/sm.css

@@ -1,3 +1,3 @@
 .x-heading:is(.sm) {
-  --x-heading-font-size: var(--font-size-lg);
+  --x-heading-font-size: var(--text-lg);
 }

package/src/components/image/index.css

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

package/src/components/index.css

@@ -1,32 +1,32 @@
-@import "badge/index.css";
-@import "button/index.css";
-@import "check/index.css";
-@import "color/index.css";
-@import "control/index.css";
-@import "group/index.css";
-@import "heading/index.css";
-@import "image/index.css";
-@import "info/index.css";
-@import "label/index.css";
-@import "link/index.css";
-@import "notice/index.css";
-@import "progress/index.css";
-@import "range/index.css";
-@import "rating/index.css";
-@import "switch/index.css";
-@import "text/index.css";
-@import "title/index.css";
-@import "breadcrumb/index.css";
-@import "card/index.css";
-@import "dialog/index.css";
-@import "drawer/index.css";
-@import "field/index.css";
-@import "carousel/index.css";
-@import "compare/index.css";
-@import "pagination/index.css";
-@import "popover/index.css";
-@import "table/index.css";
-@import "tabs/index.css";
-@import "tooltip/index.css";
-@import "toaster/index.css";
-@import "toast/index.css";
+@import "./badge/index.css";
+@import "./button/index.css";
+@import "./check/index.css";
+@import "./color/index.css";
+@import "./control/index.css";
+@import "./group/index.css";
+@import "./heading/index.css";
+@import "./image/index.css";
+@import "./info/index.css";
+@import "./label/index.css";
+@import "./link/index.css";
+@import "./notice/index.css";
+@import "./progress/index.css";
+@import "./range/index.css";
+@import "./rating/index.css";
+@import "./switch/index.css";
+@import "./text/index.css";
+@import "./title/index.css";
+@import "./breadcrumb/index.css";
+@import "./card/index.css";
+@import "./dialog/index.css";
+@import "./drawer/index.css";
+@import "./field/index.css";
+@import "./carousel/index.css";
+@import "./compare/index.css";
+@import "./pagination/index.css";
+@import "./popover/index.css";
+@import "./table/index.css";
+@import "./tabs/index.css";
+@import "./tooltip/index.css";
+@import "./toaster/index.css";
+@import "./toast/index.css";

package/src/components/info/index.css

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

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

@@ -1,4 +1,4 @@
 :root, :host {
-  --x-info-font-size: var(--font-size-xs);
+  --x-info-font-size: var(--text-xs);
   --x-info-line-height: calc(1em + 0.25rem);
 }

package/src/components/label/index.css

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

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

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

package/src/components/link/index.css

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

package/src/components/link/interactive.css

@@ -1,6 +1,6 @@
 .x-link {
   &:where(:any-link, button:enabled, [role="button"]) {
-    transition: all var(--default-transition-duration) var(--transition-timing-function-in-out);
+    transition: all var(--default-transition-duration) var(--ease-in-out);
 
     &:is(:hover, :focus-visible) {
       color: var(--x-link-hover-color, var(--color-accent));

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

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

package/src/components/notice/index.css

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

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

@@ -1,7 +1,7 @@
 :root, :host {
   --x-notice-padding-block: 1.25rem;
   --x-notice-padding-inline: 1.5rem;
-  --x-notice-font-size: var(--font-size-sm);
+  --x-notice-font-size: var(--text-sm);
   --x-notice-border-radius: var(--radius);
   --x-notice-outline-width: 1px;
   --x-notice-outline-offset: calc(var(--x-notice-outline-width, 1px) * -1);

package/src/components/pagination/default.css

@@ -1,5 +1,5 @@
 .x-pagination {
-  gap: var(--x-pagination-gap, var(--spacing-1));
+  gap: var(--x-pagination-gap, calc(var(--spacing) * 1));
   display: flex;
   align-items: center;
 }

package/src/components/pagination/index.css

@@ -1 +1 @@
-@import "default.css";
+@import "./default.css";

package/src/components/popover/content.css

@@ -4,7 +4,7 @@
   padding: var(--x-popover-content-padding-block) var(--x-popover-content-padding-inline);
   z-index: var(--x-popover-content-z-index, var(--z-index-10));
   transition-property: var(--default-transition-property);
-  transition-timing-function: var(--transition-timing-function-in-out);
+  transition-timing-function: var(--ease-in-out);
   transition-duration: var(--default-transition-duration);
   transform:
     translate(var(--tw-translate-x), var(--tw-translate-y))

package/src/components/popover/index.css

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

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

@@ -1,8 +1,8 @@
 :root, :host {
   --x-popover-content-background-color: var(--color-body-primary);
   --x-popover-content-border-radius: var(--radius);
-  --x-popover-content-padding-block: var(--spacing-2);
-  --x-popover-content-padding-inline: var(--spacing-2);
+  --x-popover-content-padding-block: calc(var(--spacing) * 2);
+  --x-popover-content-padding-inline: calc(var(--spacing) * 2);
   --x-popover-content-scale-y: 0.75;
   --x-popover-content-scale-x: 0.75;
 }

package/src/components/progress/default.css

@@ -13,7 +13,7 @@
 
   &::-moz-progress-bar {
     background-color: var(--x-progress-bar-background-color, var(--color-accent));
-    transition: all var(--x-progress-transition-duration, 0.3s) var(--transition-timing-function-in-out);
+    transition: all var(--x-progress-transition-duration, 0.3s) var(--ease-in-out);
     border-radius: inherit;
   }
 
@@ -28,12 +28,12 @@
 
   &::-webkit-progress-value {
     background-color: var(--x-progress-bar-background-color, var(--color-accent));
-    transition: all var(--x-progress-transition-duration, 0.3s) var(--transition-timing-function-in-out);
+    transition: all var(--x-progress-transition-duration, 0.3s) var(--ease-in-out);
     border-radius: inherit;
   }
 
   &:indeterminate {
-    animation: var(--x-progress-indeterminate-animation-duration, 1s) var(--x-progress-indeterminate-animation-timing-function, var(--transition-timing-function-linear)) infinite move-indeterminate;
+    animation: var(--x-progress-indeterminate-animation-duration, 1s) var(--x-progress-indeterminate-animation-timing-function, linear) infinite move-indeterminate;
     background-image: linear-gradient(to right, var(--color-accent) 33.33%, transparent 0%);
     background-position: top left;
     background-repeat: no-repeat;

package/src/components/progress/index.css

@@ -1,6 +1,6 @@
-@import "props/default.css";
-@import "keyframes/default.css";
-@import "default.css";
-@import "meter.css";
-@import "sm.css";
-@import "lg.css";
+@import "./props/default.css";
+@import "./keyframes/default.css";
+@import "./default.css";
+@import "./meter.css";
+@import "./sm.css";
+@import "./lg.css";

package/src/components/range/index.css

@@ -1,4 +1,4 @@
-@import "props/default.css";
-@import "default.css";
-@import "multi.css";
-@import "vertical.css";
+@import "./props/default.css";
+@import "./default.css";
+@import "./multi.css";
+@import "./vertical.css";

package/src/components/rating/index.css

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