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

package/src/components/range/vertical.css

@@ -1,11 +1,11 @@
-.range:where(.vertical) {
-  min-inline-size: var(--range-thumb-size);
+.x-range:where(.vertical) {
+  min-inline-size: var(--x-range-thumb-size);
   container-type: size;
 
   :where(input) {
     transform: rotate(-90deg);
     width: 100cqh;
-    inset-block-start: 50%;
+    inset-block-start: calc(50% - 50cqw / 2);
     inset-inline-start: calc(50% * -1 + 50cqw);
   }
 }

package/src/components/rating/default.css

@@ -1,41 +1,41 @@
-.rating {
+.x-rating {
   display: flex;
   align-items: center;
 
   :where(input) {
-    color: var(--rating-color);
+    inline-size: var(--x-rating-inline-size);
+    block-size: var(--x-rating-block-size);
+    color: var(--x-rating-color);
+    opacity: var(--x-rating-opacity);
     transition: var(--transition-opacity);
-    opacity: var(--rating-opacity);
     display: grid;
     box-sizing: content-box;
-    width: 1.25rem;
-    height: 1.25rem;
 
     &:not(:last-child) {
-      border-inline-end-width: var(--rating-gap);
+      border-inline-end-width: var(--x-rating-gap);
       border-inline-color: transparent;
     }
 
     &::before {
-      mask: var(--mask-star);
+      mask: var(--x-rating-icon);
       background-color: currentColor;
       content: "";
     }
   }
 
   &:has(:checked) input {
-    opacity: 1;
+    opacity: 100%;
 
     &:where(:checked ~ input) {
-      opacity: var(--rating-opacity);
+      opacity: var(--x-rating-opacity);
     }
   }
 
   &:hover input {
-    opacity: 1;
+    opacity: 100%;
 
     &:hover ~ input {
-      opacity: var(--rating-opacity);
+      opacity: var(--x-rating-opacity);
     }
   }
 }

package/src/components/rating/index.css

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

package/src/components/rating/invalid.css

@@ -1,5 +1,5 @@
-.rating {
-  &.invalid, .validated & :where(input):invalid {
-    --rating-color: var(--color-error);
+.x-rating {
+  &.invalid, :user-invalid, .validated & :invalid {
+    --x-rating-color: var(--x-rating-invalid-color, var(--color-error));
   }
 }

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

@@ -0,0 +1,8 @@
+:root, :host {
+  --x-rating-inline-size: 1.25rem;
+  --x-rating-block-size: 1.25rem;
+  --x-rating-color: var(--color-accent);
+  --x-rating-gap: 0.25rem;
+  --x-rating-opacity: 0.2;
+  --x-rating-icon: var(--mask-star);
+}

package/src/components/rating/readme.md

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

package/src/components/switch/default.css

@@ -1,41 +1,38 @@
-.switch {
-  font-weight: var(--switch-font-weight);
-  font-size: var(--switch-font-size);
-  line-height: var(--switch-line-height);
-  letter-spacing: var(--switch-letter-spacing);
-  gap: var(--switch-gap);
+.x-switch {
+  font-weight: var(--x-switch-font-weight);
+  font-size: var(--x-switch-font-size);
+  line-height: var(--x-switch-line-height);
+  letter-spacing: var(--x-switch-letter-spacing);
+  gap: var(--x-switch-gap);
   display: inline-flex;
   text-wrap: pretty;
 
-  :where(a) {
-    color: var(--color-accent);
-    text-decoration: underline;
-  }
-
   :where(input) {
-    --tw-outline-opacity: 0;
-    --tw-outline-mix: transparent;
-
-    inline-size: var(--switch-width);
-    block-size: var(--switch-height);
-    padding: calc((var(--switch-height) - var(--switch-icon-size)) / 2);
-    border-radius: var(--switch-border-radius);
-    background-color: var(--switch-bg);
+    inline-size: var(--x-switch-inline-size);
+    block-size: var(--x-switch-block-size);
+    padding: calc((var(--x-switch-block-size) - var(--x-switch-icon-size)) / 2);
+    border-radius: var(--x-switch-border-radius);
+    background-color:
+      color-mix(
+        in var(--x-switch-background-color-space, srgb),
+        var(--x-switch-background-color) var(--x-switch-background-color-opacity, 100%),
+        var(--x-switch-background-color-mix, transparent)
+      );
     outline:
-      var(--switch-outline-width) solid
+      var(--x-switch-outline-width) solid
       color-mix(
-        in var(--default-color-space),
-        var(--switch-outline-color) calc(var(--tw-outline-opacity) * 100%),
-        var(--tw-outline-mix)
+        in var(--x-switch-outline-color-space, srgb),
+        var(--x-switch-outline-color) var(--x-switch-outline-color-opacity, 0%),
+        var(--x-switch-outline-color-mix, transparent)
       );
-    outline-offset: var(--switch-outline-offset);
+    outline-offset: var(--x-switch-outline-offset);
     display: flex;
     position: relative;
     flex-shrink: 0;
 
     &::before {
-      width: var(--switch-icon-size);
-      height: var(--switch-icon-size);
+      inline-size: var(--x-switch-icon-size);
+      block-size: var(--x-switch-icon-size);
       background-color: var(--color-light);
       transition: var(--transition-all);
       border-radius: inherit;

package/src/components/switch/index.css

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

package/src/components/switch/interactive.css

@@ -1,4 +1,4 @@
-.switch {
+.x-switch {
   :where(input) {
     transition-property: var(--default-transition-property);
     transition-timing-function: var(--transition-timing-function-in-out);
@@ -6,33 +6,37 @@
 
     &:where(:required) {
       & + *::after {
-        color: var(--color-error);
+        color: var(--x-switch-required-color, var(--color-error));
         content: " *";
       }
     }
 
     &:enabled:focus {
-      --switch-outline-offset: var(--switch-focus-outline-offset);
-      --tw-outline-opacity: 0.4;
+      --x-switch-outline-offset: var(--x-switch-focus-outline-offset);
+      --x-switch-outline-color-opacity: var(--x-switch-focus-outline-color-opacity, 40%);
     }
 
     &:disabled {
-      opacity: var(--switch-disabled-opacity);
+      --x-switch-background-color: var(--x-switch-disabled-background-color, currentColor);
+      --x-switch-background-color-opacity: var(--x-switch-disabled-background-color-opacity, 15%);
+      --x-switch-outline-color: var(--x-switch-disabled-outline-color, currentColor);
+      --x-switch-outline-color-opacity: var(--x-check-disabled-outline-color-opacity, 5%);
+
       cursor: not-allowed;
     }
 
     &:checked {
-      --switch-outline-color: var(--color-accent);
-      --switch-bg: var(--color-accent);
+      --x-switch-outline-color: var(--color-accent);
+      --x-switch-background-color: var(--color-accent);
 
       &::before {
-        margin-inline-start: calc(100% - var(--switch-icon-size));
+        margin-inline-start: calc(100% - var(--x-switch-icon-size));
       }
     }
 
     &:indeterminate {
       &::before {
-        margin-inline-start: calc(50% - var(--switch-icon-size) / 2);
+        margin-inline-start: calc(50% - var(--x-switch-icon-size) / 2);
       }
     }
   }

package/src/components/switch/invalid.css

@@ -1,6 +1,6 @@
-.switch {
-  &.invalid :where(input), .validated & :where(input):invalid {
-    --switch-outline-color: var(--color-error);
-    --switch-bg: var(--color-error);
+.x-switch {
+  &.invalid, :user-invalid, .validated & :invalid {
+    --x-switch-outline-color: var(--x-switch-invalid-outline-color, var(--color-error));
+    --x-switch-background-color: var(--x-switch-invalid-background-color, var(--color-error));
   }
 }

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

@@ -0,0 +1,17 @@
+:root, :host {
+  --x-switch-inline-size: 3rem;
+  --x-switch-block-size: 1.5rem;
+  --x-switch-icon-size: 1.125rem;
+  --x-switch-font-weight: var(--font-weight-normal);
+  --x-switch-font-size: var(--font-size-sm);
+  --x-switch-line-height: calc(1em + 0.25rem);
+  --x-switch-gap: 0.75rem;
+  --x-switch-border-radius: var(--radius-full);
+  --x-switch-background-color: currentColor;
+  --x-switch-outline-width: 2px;
+  --x-switch-outline-color: currentColor;
+
+  &.dark {
+    --x-switch-background-color: var(--color-body-tertiary);
+  }
+}

package/src/components/switch/readme.md

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

package/src/components/table/default.css

@@ -1,7 +1,7 @@
-.table {
-  max-width: 100%;
-  border-radius: var(--table-border-radius);
-  background-color: var(--color-body-primary);
+.x-table {
+  border-radius: var(--x-table-border-radius);
+  background-color: var(--x-table-background-color, var(--color-body-primary));
+  max-inline-size: 100%;
   overflow: auto;
 
   :where(table) {
@@ -11,22 +11,22 @@
   }
 
   :where(thead tr:not(:first-child), tbody tr, tfoot tr) {
-    border-block-start: var(--table-cell-border-block-width) solid var(--color-body-tertiary);
+    border-block-start: var(--x-table-cell-border-block-width) solid var(--x-table-border-color, var(--color-body-tertiary));
   }
 
   :where(td, th) {
-    padding: var(--table-cell-spacing-y) var(--table-cell-spacing-x);
-    height: var(--table-cell-height);
-    border-color: var(--color-body-tertiary);
-    border-inline-width: var(--table-cell-border-inline-width, 0);
+    padding: var(--x-table-cell-spacing-y) var(--x-table-cell-spacing-x);
+    block-size: var(--x-table-cell-block-size);
+    border-color: var(--x-table-border-color, var(--color-body-tertiary));
+    border-inline-width: var(--x-table-cell-border-inline-width, 0);
 
     &:first-child {
-      padding-inline-start: var(--table-px);
+      padding-inline-start: var(--x-table-padding-inline);
       border-inline-start: 0;
     }
 
     &:last-child {
-      padding-inline-end: var(--table-px);
+      padding-inline-end: var(--x-table-padding-inline);
       border-inline-end: 0;
     }
   }

package/src/components/table/index.css

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

package/src/components/table/interactive.css

@@ -1,14 +1,12 @@
-.table {
-  --table-outline-accent-color: var(--color-accent);
-
+.x-table {
   :where(tbody:first-child, tfoot:first-child) {
     :where(tr:first-child) {
       &, :where(th,td):where(:first-child) {
-        border-start-start-radius: var(--table-border-radius);
+        border-start-start-radius: var(--x-table-border-radius);
       }
 
       &, :where(th,td):where(:last-child) {
-        border-start-end-radius: var(--table-border-radius);
+        border-start-end-radius: var(--x-table-border-radius);
       }
     }
   }
@@ -16,26 +14,28 @@
   :where(tbody:last-child, tfoot:last-child) {
     :where(tr:last-child) {
       &, :where(th,td):where(:first-child) {
-        border-end-start-radius: var(--table-border-radius);
+        border-end-start-radius: var(--x-table-border-radius);
       }
 
       &, :where(th,td):where(:last-child) {
-        border-end-end-radius: var(--table-border-radius);
+        border-end-end-radius: var(--x-table-border-radius);
       }
     }
   }
 
   :where(tr, th, td):where([tabindex="0"]), :where(.outline) {
     transition: var(--transition-all);
-    outline: var(--table-outline-width) solid transparent;
-    outline-offset: calc(var(--table-outline-width) * -1);
+    outline: var(--x-table-outline-width, 1px) solid transparent;
+    outline-offset: calc(var(--x-table-outline-width, 1px) * -1);
 
     &:is(:hover, :focus-visible, .active) {
-      --tw-bg-opacity: var(--table-outline-bg-opacity);
-      --tw-bg-mix: transparent;
-
-      background-color: color-mix(in var(--default-color-space), var(--table-outline-accent-color) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-      outline-color: var(--table-outline-accent-color);
+      background-color:
+        color-mix(
+          in var(--x-table-outline-background-color-space, srgb),
+          var(--x-table-outline-accent-color, var(--color-accent)) var(--x-table-outline-background-color-opacity, 5%),
+          var(--x-table-outline-background-color-mix, transparent)
+        );
+      outline-color: var(--x-table-outline-accent-color, var(--color-accent));
     }
   }
 }

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

@@ -0,0 +1,8 @@
+:root, :host {
+  --x-table-border-radius: var(--radius);
+  --x-table-padding-inline: 1rem;
+  --x-table-cell-spacing-x: 0.625rem;
+  --x-table-cell-spacing-y: 0.875rem;
+  --x-table-cell-block-size: auto;
+  --x-table-cell-border-block-width: 1px;
+}

package/src/components/table/readme.md

@@ -14,10 +14,9 @@ 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/table/props/default.css";
 @import "winduum/src/components/table/default.css";
-@import "winduum/src/components/table/default-props.css";
 @import "winduum/src/components/table/interactive.css";
-@import "winduum/src/components/table/interactive-props.css";
 ```
 
 ### Local imports

package/src/components/tabs/default.css

@@ -1,8 +1,8 @@
-.tabs {
-  background-color: var(--color-body-secondary);
+.x-tabs {
+  background-color: var(--x-tabs-background-color, var(--color-body-secondary));
+  gap: var(--x-tabs-gap, var(--spacing-xs));
+  padding: var(--x-tabs-padding, var(--spacing-xs));
+  border-radius: var(--x-tabs-border-radius, var(--radius));
   display: flex;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs);
-  border-radius: var(--radius);
-  width: max-content;
+  inline-size: max-content;
 }