winduum 2.0.0-next.1 → 2.0.0-next.2

package/src/components/button/lg.css

@@ -1,4 +1,4 @@
-.button:is(.lg) {
-  --button-height: 3rem;
-  --button-padding-inline: 1.75rem;
+.x-button:is(.lg) {
+  --x-button-height: 3rem;
+  --x-button-padding-inline: 1.75rem;
 }

package/src/components/button/muted.css

@@ -1,14 +1,14 @@
-.button:is(.muted) {
-  --button-disabled-background-color-opacity: 5%;
-  --button-disabled-background-color-mix: transparent;
-  --button-disabled-color: var(--color-accent);
-  --button-active-background-color-opacity: 30%;
-  --button-active-background-color-mix: transparent;
-  --button-active-color: var(--color-accent);
-  --button-hover-background-color-opacity: 20%;
-  --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: 10%;
+.x-button:is(.muted) {
+  --x-button-disabled-background-color-opacity: 5%;
+  --x-button-disabled-background-color-mix: transparent;
+  --x-button-disabled-color: var(--color-accent);
+  --x-button-active-background-color-opacity: 30%;
+  --x-button-active-background-color-mix: transparent;
+  --x-button-active-color: var(--color-accent);
+  --x-button-hover-background-color-opacity: 20%;
+  --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: 10%;
 }

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

@@ -1,11 +1,11 @@
 :root, :host {
-  --button-outline-width: 2px;
-  --button-border-width: 0px;
-  --button-border-radius: var(--radius);
-  --button-font-size: var(--font-size-sm);
-  --button-font-weight: var(--font-weight-medium);
-  --button-gap: var(--spacing-sm);
-  --button-height: 2.25rem;
-  --button-padding-block: 0.375rem;
-  --button-padding-inline: 0.75rem;
+  --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-weight: var(--font-weight-medium);
+  --x-button-gap: var(--spacing-sm);
+  --x-button-height: 2.25rem;
+  --x-button-padding-block: 0.375rem;
+  --x-button-padding-inline: 0.75rem;
 }

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

@@ -1,9 +1,9 @@
 :root, :host {
-  --button-hover-background-color-mix: var(--color-dark);
-  --button-hover-background-color-opacity: 80%;
-  --button-focus-outline-offset: 2px;
-  --button-focus-outline-color-opacity: 50%;
-  --button-active-background-color-mix: var(--color-dark);
-  --button-active-background-color-opacity: 90%;
-  --button-disabled-background-color-opacity: 75%;
+  --x-button-hover-background-color-mix: var(--color-dark);
+  --x-button-hover-background-color-opacity: 80%;
+  --x-button-focus-outline-offset: 2px;
+  --x-button-focus-outline-color-opacity: 50%;
+  --x-button-active-background-color-mix: var(--color-dark);
+  --x-button-active-background-color-opacity: 90%;
+  --x-button-disabled-background-color-opacity: 75%;
 }

package/src/components/button/raised.css

@@ -1,6 +1,6 @@
-.button:is(.raised) {
-  --button-border-width: 1px;
-  --button-border-color-opacity: 75%;
-  --button-border-color: var(--button-background-color);
-  --button-border-color-mix: var(--button-color);
+.x-button:is(.raised) {
+  --x-button-border-width: 1px;
+  --x-button-border-color-opacity: 75%;
+  --x-button-border-color: var(--x-button-background-color);
+  --x-button-border-color-mix: var(--x-button-color);
 }

package/src/components/button/readme.md

@@ -14,10 +14,10 @@ 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/button/default.css" layer(components);
 @import "winduum/src/button/props/default.css" layer(components);
-@import "winduum/src/button/interactive.css" layer(components);
 @import "winduum/src/button/props/interactive.css" layer(components);
+@import "winduum/src/button/default.css" layer(components);
+@import "winduum/src/button/interactive.css" layer(components);
 @import "winduum/src/button/sm.css" layer(components);
 @import "winduum/src/button/lg.css" layer(components);
 @import "winduum/src/button/bordered.css" layer(components);

package/src/components/button/sm.css

@@ -1,4 +1,4 @@
-.button:is(.sm) {
-  --button-height: 2rem;
-  --button-padding-inline: 1rem;
+.x-button:is(.sm) {
+  --x-button-height: 2rem;
+  --x-button-padding-inline: 1rem;
 }

package/src/components/button/square.css

@@ -1,5 +1,5 @@
-.button:is(.square) {
-  --button-padding-block: 0;
-  --button-padding-inline: 0;
-  --button-width: var(--button-height);
+.x-button:is(.square) {
+  --x-button-padding-block: 0;
+  --x-button-padding-inline: 0;
+  --x-button-width: var(--x-button-height);
 }

package/src/components/card/default.css

@@ -1,9 +1,7 @@
-.card {
-  --card-p: var(--card-py) var(--card-px);
-
-  background-color: var(--color-body-primary);
-  border-radius: var(--radius-2xl);
-  padding: var(--card-p);
+.x-card {
+  background-color: var(--x-card-background-color);
+  border-radius: var(--x-card-border-radius);
+  padding: var(--x-card-padding-block) var(--x-card-padding-inline);
   display: flex;
   flex-direction: column;
 }

package/src/components/card/index.css

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

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

@@ -0,0 +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-2xl);
+  --x-card-padding-inline: var(--spacing-3xl);
+}

package/src/components/card/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/card/props/default.css" layer(components);
 @import "winduum/src/components/card/default.css" layer(components);
-@import "winduum/src/components/card/default-props.css" layer(components);
 ```
 
 ### Local imports

package/src/components/carousel/content.css

@@ -1,10 +1,9 @@
-.carousel-content {
+.x-carousel-content {
   display: flex;
   overflow: auto;
   user-select: none;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
-  overscroll-behavior-x: none;
   position: relative;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
@@ -22,6 +21,7 @@
     }
   }
 
+  /* TODO grabbing */
   &:is(.grabbing) {
     &, & * {
       cursor: grabbing;

package/src/components/carousel/default.css

@@ -1,3 +1,3 @@
-.carousel {
+.x-carousel {
   inline-size: 100%;
 }

package/src/components/check/default.css

@@ -1,64 +1,57 @@
-.check {
-  --check-outline-color: var(--color-accent);
-  --check-icon-color: var(--color-accent-foreground);
+.x-check {
+  --x-check-outline-color: var(--color-accent);
+  --x-check-icon-color: var(--color-accent-foreground);
 
-  font-weight: var(--check-font-weight);
-  font-size: var(--check-font-size);
-  line-height: var(--check-line-height);
-  letter-spacing: var(--check-letter-spacing);
-  gap: var(--check-gap);
+  font-weight: var(--x-check-font-weight);
+  font-size: var(--x-check-font-size);
+  line-height: var(--x-check-line-height);
+  letter-spacing: var(--x-check-letter-spacing);
+  gap: var(--x-check-gap);
   display: inline-flex;
   text-wrap: pretty;
 
   &:has([type="radio"]) {
-    --check-icon: var(--mask-radio);
-    --check-border-radius: 50%;
-  }
-
-  :where(a) {
-    color: var(--color-accent);
-    text-decoration: underline;
+    --x-check-icon: var(--mask-radio);
+    --x-check-border-radius: 50%;
   }
 
   :where(input) {
-    --tw-border-opacity: 0.2;
-    --tw-border-mix: transparent;
-    --tw-outline-opacity: 0;
-    --tw-outline-mix: transparent;
-    --tw-bg-opacity: 0;
-    --tw-bg-mix: transparent;
-
-    width: var(--check-size);
-    height: var(--check-size);
-    border-radius: var(--check-border-radius);
-    background-color: color-mix(in var(--default-color-space), var(--check-bg) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
+    inline-size: var(--x-check-size);
+    block-size: var(--x-check-size);
+    border-radius: var(--x-check-border-radius);
+    background-color:
+      color-mix(
+        in var(--x-check-background-color-space, srgb),
+        var(--x-check-background-color) var(--x-check-background-color-opacity, 0%),
+        var(--x-check-background-color-mix, transparent)
+      );
     border:
-      var(--check-border-width) solid
+      var(--x-check-border-width) solid
       color-mix(
-        in var(--default-color-space),
-        var(--check-border-color) calc(var(--tw-border-opacity) * 100%),
-        var(--tw-border-mix)
+        in var(--x-check-border-color-space, srgb),
+        var(--x-check-border-color) var(--x-check-border-color-opacity, 20%),
+        var(--x-check-border-color-mix, transparent)
       );
     outline:
-      var(--check-outline-width) solid
+      var(--x-check-outline-width) solid
       color-mix(
-        in var(--default-color-space),
-        var(--check-outline-color) calc(var(--tw-outline-opacity) * 100%),
-        var(--tw-outline-mix)
+        in var(--x-check-outline-color-space, srgb),
+        var(--x-check-outline-color) var(--x-check-outline-color-opacity, 0%),
+        var(--x-check-outline-color-mix, transparent)
       );
-    outline-offset: var(--check-outline-offset);
+    outline-offset: var(--x-check-outline-offset);
     display: flex;
     flex-shrink: 0;
 
     &::before {
-      width: var(--check-icon-size);
-      height: var(--check-icon-size);
-      color: var(--check-icon-color);
-      mask: var(--check-icon);
+      width: var(--x-check-icon-size);
+      height: var(--x-check-icon-size);
+      color: var(--x-check-icon-color);
+      mask: var(--x-check-icon);
       transition: inherit;
       content: "";
       background-color: currentColor;
-      opacity: 0;
+      opacity: 0%;
       transform: scale(0);
       will-change: transform;
       margin: auto;
@@ -66,7 +59,7 @@
 
     &:where(:required) {
       + *::after {
-        color: var(--color-error);
+        color: var(--x-check-required-color, var(--color-error));
         content: " *";
       }
     }

package/src/components/check/index.css

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

package/src/components/check/interactive.css

@@ -1,48 +1,54 @@
-.check {
-  --check-hover-border-color: var(--color-accent);
-  --check-hover-bg: var(--color-accent);
-  --check-checked-bg: var(--color-accent);
-  --check-focus-border-color: var(--color-accent);
+.x-check {
+  --x-check-hover-border-color: var(--color-accent);
+  --x-check-hover-background-color: var(--color-accent);
+  --x-check-checked-background-color: var(--color-accent);
+  --x-check-focus-border-color: var(--color-accent);
 
   :where(input) {
     transition-property: var(--default-transition-property);
     transition-timing-function: var(--transition-timing-function-in-out);
     transition-duration: var(--default-transition-duration);
 
-    &:enabled {
-      &:is(:hover, :focus-visible) {
-        --check-border-color: var(--check-hover-border-color);
-        --check-bg: var(--check-hover-bg);
-        --tw-border-opacity: var(--check-hover-border-opacity, 0.75);
-        --tw-bg-opacity: var(--check-hover-bg-opacity, 0.1);
-      }
+    &:where(:hover, :focus-visible) {
+      --x-check-background-color: var(--x-check-hover-background-color);
+      --x-check-background-color-opacity: var(--x-check-hover-background-color-opacity, 10%);
+      --x-check-border-color: var(--x-check-hover-border-color);
+      --x-check-border-color-opacity: var(--x-check-hover-border-color-opacity, 75%);
+    }
 
-      &:focus {
-        --check-border-color: var(--check-focus-border-color);
-        --check-outline-offset: var(--check-focus-outline-offset);
-        --tw-border-opacity: var(--check-focus-border-opacity, 0.75);
-        --tw-outline-opacity: var(--check-focus-outline-opacity, 0.2);
-      }
+    &:focus {
+      --x-check-border-color: var(--x-check-focus-border-color);
+      --x-check-border-color-opacity: var(--x-check-focus-border-color-opacity, 75%);
+      --x-check-outline-color-opacity: var(--x-check-focus-outline-opacity, 20%);
+      --x-check-outline-offset: var(--x-check-focus-outline-offset);
     }
 
     &:disabled {
-      --tw-bg-opacity: var(--check-disabled-bg-opacity, 0.15);
+      --x-check-background-color: var(--x-check-disabled-background-color, currentColor);
+      --x-check-background-color-mix: var(--x-check-disabled-background-color-mix, transparent);
+      --x-check-background-color-opacity: var(--x-check-disabled-background-color-opacity, 5%);
+      --x-check-border-color: var(--x-check-disabled-border-color, currentColor);
+      --x-check-border-color-mix: var(--x-check-disabled-border-color-mix, transparent);
+      --x-check-border-color-opacity: var(--x-check-disabled-border-color-opacity, 15%);
 
       cursor: not-allowed;
-      opacity: var(--check-disabled-opacity);
     }
 
     &:where([type="checkbox"]):indeterminate {
-      --check-icon: var(--mask-indeterminate);
+      --x-check-icon: var(--mask-indeterminate);
     }
 
     &:is(:checked, [type="checkbox"]:indeterminate) {
-      --check-bg: var(--check-checked-bg);
-      --tw-bg-opacity: 1;
-      --tw-border-opacity: 0;
+      --x-check-background-color: var(--x-check-checked-background-color);
+      --x-check-background-color-opacity: 100%;
+      --x-check-border-color-opacity: 0%;
+
+      &:disabled {
+        opacity: var(--x-check-checked-disabled-opacity, 75%);
+      }
 
       &::before {
-        opacity: 1;
+        opacity: 100%;
         transform: scale(1);
       }
     }

package/src/components/check/invalid.css

@@ -1,8 +1,9 @@
-.check {
-  &.invalid, .validated & :where(input):invalid {
-    --check-border-color: var(--color-error);
-    --check-outline-color: var(--color-error);
-    --check-bg: var(--color-error);
-    --tw-border-opacity: 1;
+.x-check {
+  &.invalid, :user-invalid, .validated & :invalid {
+    --x-check-border-color: var(--x-check-invalid-border-color, var(--color-error));
+    --x-check-outline-color: var(--x-check-invalid-outline-color, var(--color-error));
+    --x-check-background-color: var(--x-check-invalid-background-color, var(--color-error));
+    --x-check-background-color-opacity: var(--x-check-invalid-background-color-opacity, 15%);
+    --x-check-border-color-opacity: var(--x-check-invalid-border-color-opacity, 100%);
   }
 }

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

@@ -0,0 +1,13 @@
+:root, :host {
+  --x-check-size: 1.25rem;
+  --x-check-icon-size: 1.125rem;
+  --x-check-icon: var(--mask-check);
+  --x-check-gap: var(--spacing-md);
+  --x-check-font-size: var(--font-size-sm);
+  --x-check-line-height: calc(1em + 0.25rem);
+  --x-check-border-radius: var(--radius-md);
+  --x-check-border-width: 1px;
+  --x-check-background-color: currentColor;
+  --x-check-border-color: currentColor;
+  --x-check-outline-width: 2px;
+}

package/src/components/check/readme.md

@@ -1,4 +1,4 @@
-# [Check](https://winduum.dev/docs/ui/check.html)
+# [Check](https://winduum.dev/docs/components/check.html)
 
 ## Installation
 ```shell
@@ -8,17 +8,16 @@ 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/check/index.css" layer(components);
+@import "winduum/src/components/check/index.css" layer(components);
 ```
 
 or modular (you can use your own props or CSS)
 
 ```css
-@import "winduum/src/ui/check/default-props.css" layer(components);
-@import "winduum/src/ui/check/default.css" layer(components);
-@import "winduum/src/ui/check/interactive-props.css" layer(components);
-@import "winduum/src/ui/check/interactive.css" layer(components);
-@import "winduum/src/ui/check/invalid.css" layer(components);
+@import "winduum/src/components/check/props/default.css" layer(components);
+@import "winduum/src/components/check/default.css" layer(components);
+@import "winduum/src/components/check/interactive.css" layer(components);
+@import "winduum/src/components/check/invalid.css" layer(components);
 ```
 
 ### Local imports
@@ -26,8 +25,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/check/assets/index.css" layer(components);
+@import "@/components/check/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/check.html) to learn more about usage examples.
+Visit [docs](https://winduum.dev/docs/components/check.html) to learn more about usage examples.

package/src/components/color/default.css

@@ -1,31 +1,20 @@
-.color {
+.x-color {
+  --x-color-outline-color: var(--color-accent);
+
   display: inline-flex;
 
   :where(input) {
-    --tw-border-opacity: 0.1;
-    --tw-border-mix: transparent;
-    --tw-outline-opacity: 0;
-    --tw-outline-mix: transparent;
-
-    width: var(--color-size);
-    height: var(--color-size);
-    padding: var(--color-p);
-    border-radius: var(--color-border-radius);
-    border:
-      var(--color-border-width) solid
-      color-mix(
-        in var(--default-color-space),
-        var(--color-border-color) calc(var(--tw-border-opacity) * 100%),
-        var(--tw-border-mix)
-      );
+    inline-size: var(--x-color-size);
+    block-size: var(--x-color-size);
+    border-radius: var(--x-color-border-radius);
     outline:
-      var(--color-outline-width) solid
+      var(--x-color-outline-width, 1px) solid
       color-mix(
-        in var(--default-color-space),
-        var(--color-outline-color) calc(var(--tw-outline-opacity) * 100%),
-        var(--tw-outline-mix)
+        in var(--x-color-outline-color-space, srgb),
+        var(--x-color-outline-color) var(--x-color-outline-color-opacity, 0%),
+        var(--x-color-outline-color-mix, transparent)
       );
-    outline-offset: var(--check-outline-offset);
+    outline-offset: var(--x-color-outline-offset);
     display: inline-grid;
 
     &::before, &::after {
@@ -36,12 +25,11 @@
     }
 
     &::before {
-      background-color: var(--color-primary);
-      border-color: inherit;
+      background-color: var(--x-color-primary);
     }
 
     &::after {
-      background-color: var(--color-secondary);
+      background-color: var(--x-color-secondary);
       clip-path: polygon(100% 0, 100% 100%, 0 100%);
     }
   }

package/src/components/color/index.css

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

package/src/components/color/interactive.css

@@ -1,30 +1,36 @@
-.color {
+.x-color {
   :where(input) {
     transition-property: var(--default-transition-property);
     transition-timing-function: var(--transition-timing-function-in-out);
     transition-duration: var(--default-transition-duration);
 
-    &:where(:disabled) {
+    &:disabled {
       cursor: not-allowed;
 
       &::before, &::after {
-        opacity: var(--color-disabled-opacity);
+        opacity: var(--x-color-disabled-opacity, 50%);
       }
     }
 
-    &:where(:enabled) {
-      &:is(:hover) {
-        --tw-border-opacity: 0.3;
+    &:enabled {
+      &:hover {
+        --x-color-outline-color-opacity: var(--x-color-hover-outline-color-opacity);
+        --x-color-outline-offset: var(--x-color-hover-outline-offset);
       }
 
-      &:is(:focus-visible) {
-        --tw-border-opacity: 1;
-        --tw-outline-opacity: 0.2;
+      &:focus-visible {
+        --x-color-outline-color-opacity: var(--x-color-focus-outline-color-opacity, 50%);
+        --x-color-outline-offset: var(--x-color-focus-outline-offset, 3px);
       }
-    }
 
-    &:is(:checked) {
-      --tw-border-opacity: 1;
+      &:checked {
+        --x-color-outline-color-opacity: var(--x-color-checked-outline-color-opacity, 100%);
+        --x-color-outline-offset: var(--x-color-focus-outline-offset, 3px);
+
+        &:focus-visible {
+          outline-style: dashed;
+        }
+      }
     }
   }
 }

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

@@ -0,0 +1,7 @@
+:root, :host {
+  --x-color-primary: currentColor;
+  --x-color-secondary: transparent;
+  --x-color-size: 1.5rem;
+  --x-color-border-radius: var(--radius-full);
+  --x-color-outline-width: 1px;
+}

package/src/components/color/readme.md

@@ -1,4 +1,4 @@
-# [Color](https://winduum.dev/docs/ui/color.html)
+# [Color](https://winduum.dev/docs/components/color.html)
 
 ## Installation
 ```shell
@@ -8,16 +8,15 @@ 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/color/index.css" layer(components);
+@import "winduum/src/components/color/index.css" layer(components);
 ```
 
 or modular (you can use your own props or CSS)
 
 ```css
-@import "winduum/src/ui/color/default-props.css" layer(components);
-@import "winduum/src/ui/color/default.css" layer(components);
-@import "winduum/src/ui/color/interactive-props.css" layer(components);
-@import "winduum/src/ui/color/interactive.css" layer(components);
+@import "winduum/src/components/color/props/default.css" layer(components);
+@import "winduum/src/components/color/default.css" layer(components);
+@import "winduum/src/components/color/interactive.css" layer(components);
 
 ```
 
@@ -26,8 +25,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/color/assets/index.css" layer(components);
+@import "@/components/color/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/color.html) to learn more about usage examples.
+Visit [docs](https://winduum.dev/docs/components/color.html) to learn more about usage examples.