winduum 2.2.0-next.2 → 2.2.0-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "2.2.0-next.2",
+  "version": "2.2.0-next.3",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -22,24 +22,24 @@
     "@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.18.0",
+    "@tailwindcss/vite": "^4.1.4",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "autoprefixer": "^10.4.21",
+    "dts-buddy": "^0.6.1",
+    "eslint": "^9.25.1",
     "fast-glob": "^3.3.3",
-    "neostandard": "^0.12.0",
-    "postcss": "^8.5.1",
+    "neostandard": "^0.12.1",
+    "postcss": "^8.5.3",
     "postcss-custom-media": "^11.0.5",
     "postcss-import": "^16.1.0",
     "postcss-nesting": "^13.0.1",
     "slide-element": "^2.3.1",
-    "stylelint": "^16.13.2",
-    "stylelint-config-standard": "^37.0.0",
-    "tailwindcss": "^4.0.0",
+    "stylelint": "^16.19.1",
+    "stylelint-config-standard": "^38.0.0",
+    "tailwindcss": "^4.1.4",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5",
-    "vite": "^6.0.11",
+    "vite": "^6.3.4",
     "vue": "^3.5.13"
   },
   "files": [

package/src/components/breadcrumb/default.css

@@ -7,7 +7,7 @@
 
     > li {
       &:not(:last-child)::after {
-        mask: var(--x-breadcrumb-marker);
+        mask: var(--x-breadcrumb-marker-mask);
         background-color: var(--x-breadcrumb-marker-background-color, currentColor);
         margin-inline: var(--x-breadcrumb-gap);
         inline-size: var(--x-breadcrumb-marker-size);

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-marker-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>');
   --x-breadcrumb-gap: calc(var(--spacing) * 1);
 }

package/src/components/check/default.css

@@ -11,8 +11,8 @@
   text-wrap: pretty;
 
   &:has([type="radio"]) {
-    --x-check-icon: var(--mask-radio);
-    --x-check-border-radius: 50%;
+    --x-check-icon-mask: var(--x-check-radio-icon-mask);
+    --x-check-border-radius: var(--x-check-radio-border-radius, 50%);
   }
 
   :where(input) {
@@ -47,7 +47,7 @@
       inline-size: var(--x-check-icon-size);
       block-size: var(--x-check-icon-size);
       color: var(--x-check-icon-color);
-      mask: var(--x-check-icon);
+      mask: var(--x-check-icon-mask);
       transition: inherit;
       content: "";
       background-color: currentColor;

package/src/components/check/interactive.css

@@ -35,7 +35,7 @@
     }
 
     &:where([type="checkbox"]):indeterminate {
-      --x-check-icon: var(--mask-indeterminate);
+      --x-check-icon-mask: var(--x-check-indeterminate-icon-mask);
     }
 
     &:is(:checked, [type="checkbox"]:indeterminate) {

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

@@ -1,7 +1,5 @@
 :root, :host {
   --x-check-size: 1.25rem;
-  --x-check-icon-size: 1.125rem;
-  --x-check-icon: var(--mask-check);
   --x-check-gap: calc(var(--spacing) * 3);
   --x-check-font-size: var(--text-sm);
   --x-check-line-height: calc(1em + 0.25rem);
@@ -10,4 +8,8 @@
   --x-check-background-color: currentColor;
   --x-check-border-color: currentColor;
   --x-check-outline-width: 2px;
+  --x-check-icon-size: 1.125rem;
+  --x-check-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>');
+  --x-check-radio-icon-mask: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>');
+  --x-check-indeterminate-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" stroke-width="2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');
 }

package/src/components/control/file.css

@@ -10,14 +10,14 @@
           var(--x-control-file-background-color, currentColor) var(--x-control-file-background-color-opacity, 15%),
           var(--x-control-file-background-color-mix, transparent)
         );
-      block-size: calc(var(--x-control-block-size) - var(--x-control-border-width) * 2);
+      block-size: var(--x-control-block-size);
       padding-inline: var(--x-control-padding-inline);
       margin-inline: calc(var(--x-control-padding-inline) * -1) var(--x-control-padding-inline);
       margin-block-start: calc(var(--x-control-padding-block) * -1);
       border-start-end-radius: var(--x-control-border-radius);
       border-end-end-radius: var(--x-control-border-radius);
       transition: var(--transition-background);
-      cursor: pointer;
+      cursor: var(--cursor-pointer, pointer);
     }
 
     &:is(:hover, :focus) {

package/src/components/control/index.css

@@ -3,6 +3,7 @@
 @import "./props/icon.css";
 @import "./props/floating.css";
 @import "./props/select.css";
+@import "./props/select-picker.css";
 @import "./default.css";
 @import "./interactive.css";
 @import "./invalid.css";
@@ -13,3 +14,4 @@
 @import "./floating-interactive.css";
 @import "./select.css";
 @import "./select-multiple.css";
+@import "./select-picker.css";

package/src/components/control/props/select-picker.css

@@ -0,0 +1,18 @@
+:root, :host {
+  --x-control-select-picker-border-width: 1px;
+  --x-control-select-picker-border-radius: var(--radius-lg);
+  --x-control-select-picker-border-color: currentColor;
+  --x-control-select-picker-background-color: var(--color-body-primary);
+  --x-control-select-picker-margin-block: 0.25rem;
+  --x-control-select-picker-padding-block: 0.25rem;
+  --x-control-select-picker-padding-inline: 0.25rem;
+  --x-control-select-picker-gap: 0.125rem;
+  --x-control-select-picker-scrollbar-color: currentColor var(--color-body-primary);
+  --x-control-select-option-padding-block: 0.5rem;
+  --x-control-select-option-padding-inline: 0.5rem;
+  --x-control-select-option-font-size: var(--text-sm);
+  --x-control-select-option-font-weight: var(--font-weight-semibold);
+  --x-control-select-option-line-height: calc(1em + 0.125rem);
+  --x-control-select-option-border-radius: var(--radius-md);
+  --x-control-select-option-hocus-background-color: var(--color-body-secondary);
+}

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

@@ -1,4 +1,5 @@
 :root, :host {
-  --x-control-select-icon-size: 1.5rem;
+  --x-control-select-icon-size: 1.25rem;
+  --x-control-select-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>');
   --x-control-select-icon-margin-inline-end: -0.25rem;
 }

package/src/components/control/select-picker.css

@@ -0,0 +1,94 @@
+.x-control:has(select:not([multiple])) {
+  &::after {
+    will-change: transform;
+    transition: var(--transition-transform);
+  }
+
+  &:has(select:open) {
+    &::after {
+      transform: rotate(180deg);
+    }
+  }
+
+  select {
+    &, &::picker(select) {
+      appearance: base-select;
+    }
+
+    &::picker-icon {
+      display: none;
+    }
+
+    &::picker(select) {
+      border-radius: var(--x-control-select-picker-border-radius);
+      border:
+        var(--x-control-select-picker-border-width) solid
+        color-mix(
+          in var(--x-control-select-picker-border-color-space, srgb),
+          var(--x-control-select-picker-border-color) var(--x-control-select-picker-border-color-opacity, 15%),
+          var(--x-control-select-picker-border-color-mix, transparent)
+        );
+      background-color: var(--x-control-select-picker-background-color);
+      margin-block: var(--x-control-select-picker-margin-block);
+      padding-block: var(--x-control-select-picker-padding-block);
+      padding-inline: var(--x-control-select-picker-padding-inline);
+      gap: var(--x-control-select-picker-gap);
+      display: flex;
+      flex-direction: column;
+      cursor: auto;
+      transform-origin: top center;
+      scrollbar-width: thin;
+      scrollbar-color: var(--x-control-select-picker-scrollbar-color);
+      will-change: transform, opacity;
+      transition:
+        opacity var(--default-transition-duration) var(--ease-in-out),
+        transform var(--default-transition-duration) var(--ease-out),
+        display var(--default-transition-duration) allow-discrete,
+        overlay var(--default-transition-duration) allow-discrete;
+    }
+
+    &:not(:open)::picker(select) {
+      opacity: 0%;
+      transform: scale(0.9);
+      display: revert;
+    }
+
+    &:open::picker(select) {
+      opacity: 100%;
+      transform: scale(1);
+
+      @starting-style {
+        opacity: 0%;
+        transform: scale(0.95);
+      }
+    }
+
+    option {
+      padding-block: var(--x-control-select-option-padding-block);
+      padding-inline: var(--x-control-select-option-padding-inline);
+      font-size: var(--x-control-select-option-font-size);
+      font-weight: var(--x-control-select-option-font-weight);
+      line-height: var(--x-control-select-option-line-height);
+      border-radius: var(--x-control-select-option-border-radius);
+      transition: var(--transition-background), var(--transition-color);
+
+      &::checkmark {
+        display: none;
+      }
+
+      &:hover, &:focus-visible {
+        background-color: var(--x-control-select-option-hocus-background-color);
+      }
+
+      &:checked {
+        color: var(--x-control-select-option-checked-color, var(--color-accent));
+        background-color:
+          color-mix(
+            in var(--x-control-select-option-checked-background-color-space, srgb),
+            var(--x-control-select-option-checked-background-color, var(--color-accent)) var(--x-control-select-option-checked-background-color-opacity, 10%),
+            var(--x-control-select-option-checked-background-color-mix, transparent)
+          );
+      }
+    }
+  }
+}

package/src/components/control/select.css

@@ -8,7 +8,7 @@
   &::after {
     inline-size: var(--x-control-select-icon-size);
     block-size: var(--x-control-select-icon-size);
-    mask: var(--x-control-select-icon-mask, var(--mask-angle-down));
+    mask: var(--x-control-select-icon-mask);
     margin-inline: auto var(--x-control-select-icon-margin-inline-end);
     grid-area: x-control-padding;
     background-color: currentColor;
@@ -20,4 +20,8 @@
   :where(.ms-auto) {
     margin-inline-end: var(--x-control-select-icon-size);
   }
+
+  :where(select, option) {
+    cursor: var(--cursor-pointer, pointer);
+  }
 }

package/src/components/rating/default.css

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

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

@@ -3,5 +3,5 @@
   --x-rating-block-size: 1.25rem;
   --x-rating-gap: 0.25rem;
   --x-rating-opacity: 0.2;
-  --x-rating-icon: var(--mask-star);
+  --x-rating-icon-mask: url('data:image/svg+xml, <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /></svg>');
 }

package/src/tailwind.css

@@ -1,2 +1,3 @@
 @import "tailwindcss/utilities.css";
+
 @source "../playground/**"

package/src/test.css

@@ -4,8 +4,11 @@
 @import "./theme/dark.css" layer(theme);
 @import "./base/reset.css" layer(base);
 @import "./base/defaults.css" layer(base);
-@import "./components/index.css" layer(components);
-@import "./utilities/index.css" layer(utilities);
+@import "./components/index.css" layer(utilities);
+@import "./utilities/container/props/default.css" layer(theme);
+@import "./utilities/ripple/keyframes/default.css";
+@import "./utilities/skeleton/props/default.css" layer(theme);
+@import "./utilities/spinner/keyframes/ring.css";
 @import "../tailwindcss/utilities/index.css";
 @import "tailwindcss/utilities" layer(utilities);
 @import "../tailwindcss/variants/dark.css";

package/src/theme/config/index.css

@@ -1,5 +1,4 @@
 @import "./font.css";
-@import "./mask.css";
 @import "./radius.css";
 @import "./spacing.css";
 @import "./transition.css";

package/src/utilities/divider.css

@@ -12,6 +12,7 @@
   &::before, &::after {
     content: "";
     flex-grow: 1;
+    border: 0;
     border-block-start:
       1px solid color-mix(
         in var(--divider-border-block-color-space, srgb),
@@ -22,7 +23,7 @@
 
   &:where(.flex-col) {
     &::before, &::after {
-      border-block-start: 0;
+      border: 0;
       border-inline-start:
         1px solid color-mix(
           in var(--divider-border-inline-color-space, srgb),

package/tailwindcss/theme/config/index.css

@@ -1,6 +1,5 @@
 @import "./breakpoint.css";
 @import "./font.css";
-@import "./mask.css";
 @import "./radius.css";
 @import "./transition.css";
 @import "./z.css";

package/tailwindcss/utilities/divider.css

@@ -10,6 +10,7 @@
   &::before, &::after {
     content: "";
     flex-grow: 1;
+    border: 0;
     border-block-start:
       1px solid color-mix(
         in var(--divider-border-block-color-space, srgb),
@@ -19,11 +20,11 @@
   }
 }
 
-@utility divder-vertical {
+@utility divider-vertical {
   flex-direction: column;
 
   &::before, &::after {
-    border-block-start: 0;
+    border: 0;
     border-inline-start:
       1px solid color-mix(
         in var(--divider-border-inline-color-space, srgb),

package/src/theme/config/mask.css

@@ -1,8 +0,0 @@
-:root, :host {
-  --mask-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>') no-repeat 50% 50% / contain;
-  --mask-radio: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>') no-repeat 50% 50% / contain;
-  --mask-angle-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>') no-repeat 50% 50% / contain;
-  --mask-chevron-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>') no-repeat 50% 50% / contain;
-  --mask-indeterminate: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" stroke-width="2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>') no-repeat 50% 50% / contain;
-  --mask-star: url('data:image/svg+xml, <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /></svg>') no-repeat 50% 50% / contain;
-}

package/tailwindcss/theme/config/mask.css

@@ -1,8 +0,0 @@
-@theme {
-  --mask-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>') no-repeat 50% 50% / contain;
-  --mask-radio: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>') no-repeat 50% 50% / contain;
-  --mask-angle-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>') no-repeat 50% 50% / contain;
-  --mask-chevron-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>') no-repeat 50% 50% / contain;
-  --mask-indeterminate: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" stroke-width="2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>') no-repeat 50% 50% / contain;
-  --mask-star: url('data:image/svg+xml, <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /></svg>') no-repeat 50% 50% / contain;
-}