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

package/src/components/link/readme.md

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

package/src/components/notice/default.css

@@ -1,25 +1,21 @@
-.notice {
-  --tw-bg-opacity: 0.1;
-  --tw-bg-mix: transparent;
-  --tw-outline-opacity: 0.1;
-  --tw-outline-mix: transparent;
-
-  padding: var(--notice-py) var(--notice-px);
-  font-size: var(--notice-font-size);
-  border-radius: var(--notice-border-radius);
-  background-color: color-mix(in var(--default-color-space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-  color: var(--color-accent);
+.x-notice {
+  padding: var(--x-notice-padding-block) var(--x-notice-padding-inline);
+  font-size: var(--x-notice-font-size);
+  border-radius: var(--x-notice-border-radius);
+  background-color:
+    color-mix(
+      in var(--x-notice-background-color-space, srgb),
+      var(--x-notice-background-color, var(--color-accent)) var(--x-notice-background-color-opacity, 10%),
+      var(--x-notice-background-color-mix, transparent)
+    );
+  color: var(--x-notice-color, var(--color-accent));
   outline:
-    var(--notice-outline-width) solid
+    var(--x-notice-outline-width) solid
     color-mix(
-      in var(--default-color-space),
-      var(--color-accent) calc(var(--tw-outline-opacity) * 100%),
-      var(--tw-outline-mix)
+      in var(--x-notice-outline-color-space, srgb),
+      var(--x-notice-outline-color, var(--color-accent)) var(--x-notice-outline-color-opacity, 10%),
+      var(--x-notice-outline-color-mix, transparent)
     );
-  outline-offset: var(--notice-outline-offset);
+  outline-offset: var(--x-notice-outline-offset);
   text-wrap: pretty;
-
-  :where(hr) {
-    --tw-border-opacity: 0.2;
-  }
 }

package/src/components/notice/index.css

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

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

@@ -0,0 +1,8 @@
+:root, :host {
+  --x-notice-padding-block: 1.25rem;
+  --x-notice-padding-inline: 1.5rem;
+  --x-notice-font-size: var(--font-size-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/notice/readme.md

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

package/src/components/pagination/default.css

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

package/src/components/popover/content.css

@@ -1,15 +1,15 @@
-.popover-content {
-  transform:
-      translate(var(--tw-translate-x), var(--tw-translate-y))
-      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.x-popover-content {
+  background-color: var(--x-popover-content-background-color);
+  border-radius: var(--x-popover-content-border-radius);
+  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-duration: var(--default-transition-duration);
+  transform:
+    translate(var(--tw-translate-x), var(--tw-translate-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   will-change: transform;
-  background-color: var(--popover-content-bg);
-  border-radius: var(--popover-content-border-radius);
-  padding: var(--popover-content-py) var(--popover-content-px);
-  z-index: var(--z-index-10);
   width: max-content;
   position: absolute;
 
@@ -87,21 +87,20 @@
   }
 
   &[popover]:not(.in) {
-    --tw-scale-x: var(--popover-content-scale-x);
-    --tw-scale-y: var(--popover-content-scale-y);
+    --tw-scale-x: var(--x-popover-content-scale-x);
+    --tw-scale-y: var(--x-popover-content-scale-y);
 
-    opacity: 0;
+    opacity: 0%;
     pointer-events: none;
   }
 
   &:not([popover]) {
     .focus:not(:focus, :focus-within) > &, .hover:not(:hover) > & {
-      --tw-scale-x: var(--popover-content-scale-x);
-      --tw-scale-y: var(--popover-content-scale-y);
+      --tw-scale-x: var(--x-popover-content-scale-x);
+      --tw-scale-y: var(--x-popover-content-scale-y);
 
-      opacity: 0;
+      opacity: 0%;
       visibility: hidden;
     }
   }
 }
-

package/src/components/popover/default.css

@@ -1,4 +1,4 @@
-.popover {
+.x-popover {
   position: relative;
   display: inline-block;
 }

package/src/components/popover/index.css

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

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

@@ -0,0 +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-sm);
+  --x-popover-content-padding-inline: var(--spacing-sm);
+  --x-popover-content-scale-y: 0.75;
+  --x-popover-content-scale-x: 0.75;
+}

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

package/src/components/progress/default.css

@@ -1,19 +1,20 @@
-.progress {
-  --tw-bg-opacity: 0.1;
-  --tw-bg-mix: var(--color-body);
-  --default-transition-duration: 0.3s;
-
-  inline-size: 100%;
-  block-size: var(--progress-height);
-  border-radius: var(--progress-border-radius);
-  background-color: color-mix(in var(--default-color-space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
+.x-progress {
+  inline-size: var(--x-progress-inline-size, 100%);
+  block-size: var(--x-progress-block-size);
+  border-radius: var(--x-progress-border-radius);
+  background-color:
+    color-mix(
+      in var(--x-progress-background-color-space, srgb),
+      var(--x-progress-background-color, var(--color-accent)) var(--x-progress-background-color-opacity, 10%),
+      var(--x-progress-background-color-mix, var(--color-body))
+    );
   position: relative;
   overflow: clip;
 
   &::-moz-progress-bar {
-    background-color: var(--color-accent);
+    background-color: var(--x-progress-bar-background-color, var(--color-accent));
+    transition: all var(--x-progress-transition-duration) var(--transition-timing-function-in-out);
     border-radius: inherit;
-    transition: all var(--default-transition-duration) var(--transition-timing-function-in-out);
   }
 
   &::-webkit-progress-bar {
@@ -26,15 +27,13 @@
   }
 
   &::-webkit-progress-value {
-    background-color: var(--color-accent);
-    border-radius: inherit;
+    background-color: var(--x-progress-bar-background-color, var(--color-accent));
     transition: all var(--default-transition-duration) var(--transition-timing-function-in-out);
+    border-radius: inherit;
   }
 
   &:indeterminate {
-    --default-transition-duration: 1s;
-
-    animation: var(--default-transition-duration) var(--transition-timing-function-linear) infinite move-indeterminate;
+    animation: var(--x-progress-indeterminate-transition-duration) var(--transition-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,4 +1,4 @@
-@import "default-props.css";
+@import "props/default.css";
 @import "default.css";
 @import "meter.css";
 @import "sm.css";

package/src/components/progress/lg.css

@@ -1,3 +1,3 @@
-.progress:is(.lg) {
-  --progress-height: 1.5rem;
+.x-progress:is(.lg) {
+  --x-progress-block-size: 1.5rem;
 }

package/src/components/progress/meter.css

@@ -1,4 +1,4 @@
-.progress {
+.x-progress {
   &::-webkit-meter-bar {
     border: 0;
     background: transparent;
@@ -12,32 +12,32 @@
   }
 
   &::-webkit-meter-optimum-value {
-    background: var(--color-success);
+    background: var(--x-progress-meter-success-background, var(--color-success));
     border-radius: inherit;
   }
 
   &::-webkit-meter-suboptimum-value {
-    background: var(--color-warning);
+    background: var(--x-progress-meter-warning-background, var(--color-warning));
     border-radius: inherit;
   }
 
   &::-webkit-meter-even-less-good-value {
-    background: var(--color-error);
+    background: var(--x-progress-meter-error-background, var(--color-error));
     border-radius: inherit;
   }
 
   &:-moz-meter-optimum::-moz-meter-bar {
-    background: var(--color-success);
+    background: var(--x-progress-meter-success-background, var(--color-success));
     border-radius: inherit;
   }
 
   &:-moz-meter-sub-optimum::-moz-meter-bar {
-    background: var(--color-warning);
+    background: var(--x-progress-meter-warning-background, var(--color-warning));
     border-radius: inherit;
   }
 
   &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-    background: var(--color-error);
+    background: var(--x-progress-meter-error-background, var(--color-error));
     border-radius: inherit;
   }
 }

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

@@ -0,0 +1,6 @@
+:root, :host {
+  --x-progress-block-size: 1rem;
+  --x-progress-border-radius: var(--radius-full);
+  --x-progress-transition-duration: 0.3s;
+  --x-progress-indeterminate-transition-duration: 1s;
+}

package/src/components/progress/readme.md

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

package/src/components/progress/sm.css

@@ -1,3 +1,3 @@
-.progress:is(.sm) {
-  --progress-height: 0.5rem;
+.x-progress:is(.sm) {
+  --x-progress-block-size: 0.5rem;
 }

package/src/components/range/default.css

@@ -1,100 +1,98 @@
-.range {
-  --range-thumb-bg: var(--color-accent);
-  --range-thumb-border-color: var(--range-thumb-bg);
-  --range-track-bg: var(--color-accent);
-  --range-track:
+.x-range {
+  --x-range-thumb-background-color: var(--color-accent);
+  --x-range-thumb-border-color: var(--x-range-thumb-background-color);
+  --x-range-track-background-color: var(--color-accent);
+  --x-range-track-background:
     linear-gradient(
       to right,
-      var(--range-track-bg) 0%,
-      var(--range-track-bg) var(--range-track-start),
-      transparent var(--range-track-start),
-      transparent var(--range-track-end)
+      var(--x-range-track-background-color) 0%,
+      var(--x-range-track-background-color) var(--x-range-track-start),
+      transparent var(--x-range-track-start),
+      transparent var(--x-range-track-end)
     );
 
-  min-block-size: var(--range-thumb-size);
+  min-block-size: var(--x-range-thumb-size);
   display: grid;
 
   :where(input) {
-    --tw-bg-opacity: 0.1;
-    --tw-bg-mix: var(--color-body);
-
-    block-size: var(--range-track-height);
-    background-color: color-mix(in var(--default-color-space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
+    block-size: var(--x-range-track-block-size);
+    background-color:
+      color-mix(
+        in var(--x-range-background-color-space, srgb),
+        var(--x-range-background-color, var(--color-accent)) var(--x-range-background-color-opacity, 10%),
+        var(--x-range-background-color-mix, var(--color-body))
+      );
     position: relative;
     grid-area: 1/1;
 
     &::-webkit-slider-runnable-track {
-      block-size: var(--range-track-height);
-      border-radius: var(--radius-full);
-      background: var(--range-track);
+      block-size: var(--x-range-track-block-size);
+      border-radius: var(--x-range-track-border-radius, var(--radius-full));
+      background: var(--x-range-track-background);
     }
 
     &::-moz-range-track {
-      block-size: var(--range-track-height);
+      block-size: var(--x-range-track-block-size);
       border-radius: var(--radius-full);
-      background: var(--range-track);
+      background: var(--x-range-track-background);
     }
 
     &::-webkit-slider-thumb {
-      --tw-outline-opacity: var(--range-thumb-outline-opacity);
-
-      width: var(--range-thumb-size);
-      height: var(--range-thumb-size);
-      background-color: var(--range-thumb-bg);
+      width: var(--x-range-thumb-size);
+      height: var(--x-range-thumb-size);
+      background-color: var(--x-range-thumb-background-color);
       border-radius: var(--radius-full);
-      border: var(--range-thumb-border-width) solid var(--range-thumb-border-color);
+      border: var(--x-range-thumb-border-width) solid var(--x-range-thumb-border-color);
       outline:
-        var(--range-thumb-outline-width) solid
+        var(--x-range-thumb-outline-width) solid
         color-mix(
-          in var(--default-color-space),
-          var(--range-thumb-bg) calc(var(--tw-outline-opacity) * 100%),
-          transparent
+          in var(--x-range-thumb-outline-color-space, srgb),
+          var(--x-range-thumb-outline-color, var(--x-range-thumb-background-color)) var(--x-range-thumb-outline-color-opacity, 0%),
+          var(--x-range-thumb-outline-color-mix, transparent)
         );
-      margin-block-start: calc((var(--range-thumb-size) - var(--range-track-height)) / 2 * -1);
+      margin-block-start: calc((var(--x-range-thumb-size) - var(--x-range-track-block-size)) / 2 * -1);
       transition: outline-color var(--default-transition-duration), outline-offset var(--default-transition-duration);
-      cursor: var(--range-thumb-cursor, grab);
+      cursor: var(--x-range-thumb-cursor, grab);
       appearance: none;
       pointer-events: auto;
 
       &:active {
-        --range-thumb-cursor: grabbing;
-        --tw-outline-opacity: var(--range-thumb-focus-outline-opacity);
+        --x-range-thumb-cursor: grabbing;
+        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
       }
     }
 
     &::-moz-range-thumb {
-      --tw-outline-opacity: var(--range-thumb-outline-opacity);
-
-      width: var(--range-thumb-size);
-      height: var(--range-thumb-size);
-      background-color: var(--range-thumb-bg);
+      width: var(--x-range-thumb-size);
+      height: var(--x-range-thumb-size);
+      background-color: var(--x-range-thumb-background-color);
       border-radius: var(--radius-full);
-      border: var(--range-thumb-border-width) solid var(--range-thumb-border-color);
+      border: var(--x-range-thumb-border-width) solid var(--x-range-thumb-border-color);
       outline:
-        var(--range-thumb-outline-width) solid
+        var(--x-range-thumb-outline-width) solid
         color-mix(
-          in var(--default-color-space),
-          var(--range-thumb-bg) calc(var(--tw-outline-opacity) * 100%),
-          transparent
+          in var(--x-range-thumb-outline-color-space, srgb),
+          var(--x-range-thumb-outline-color, var(--x-range-thumb-background-color)) var(--x-range-thumb-outline-color-opacity, 0%),
+          var(--x-range-thumb-outline-color-mix, transparent)
         );
       transition: outline-color var(--default-transition-duration), outline-offset var(--default-transition-duration);
-      cursor: var(--range-thumb-cursor, grab);
+      cursor: var(--x-range-thumb-cursor, grab);
       appearance: none;
       pointer-events: auto;
 
       &:active {
-        --range-thumb-cursor: grabbing;
-        --tw-outline-opacity: var(--range-thumb-focus-outline-opacity);
+        --x-range-thumb-cursor: grabbing;
+        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
       }
     }
 
     &:focus-visible {
       &::-webkit-slider-thumb {
-        --tw-outline-opacity: var(--range-thumb-focus-outline-opacity);
+        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
       }
 
       &::-moz-range-thumb {
-        --tw-outline-opacity: var(--range-thumb-focus-outline-opacity);
+        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
       }
     }
   }

package/src/components/range/index.css

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

package/src/components/range/index.js

@@ -4,7 +4,7 @@
  * @returns void
  */
 export const setTrackProperty = ({ element, value, max }, track = 'start') => {
-    element.style.setProperty('--range-track-' + track, `${((value) / max * 100).toString()}%`)
+    element.style.setProperty('--x-range-track-' + track, `${((value) / max * 100).toString()}%`)
 }
 
 /**
@@ -14,7 +14,7 @@ export const setTrackProperty = ({ element, value, max }, track = 'start') => {
  */
 export const setValue = (element, options = {}) => {
     const { selector, track } = {
-        selector: '.range',
+        selector: '.x-range',
         track: 'start',
         ...options
     }

package/src/components/range/multi.css

@@ -1,14 +1,14 @@
-.range {
+.x-range {
   :where(input) {
     &:not(:only-of-type) {
-      --range-track:
+      --x-range-track-background:
         linear-gradient(
           to right,
           transparent 0%,
-          transparent var(--range-track-start),
-          var(--range-track-bg) var(--range-track-start),
-          var(--range-track-bg) var(--range-track-end),
-          transparent var(--range-track-end),
+          transparent var(--x-range-track-start),
+          var(--x-range-track-background-color) var(--x-range-track-start),
+          var(--x-range-track-background-color) var(--x-range-track-end),
+          transparent var(--x-range-track-end),
           transparent 100%
         );
 

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

@@ -0,0 +1,9 @@
+:root, :host {
+  --x-range-track-block-size: 0.375rem;
+  --x-range-thumb-size: 1.125rem;
+  --x-range-thumb-border-width: 0;
+  --x-range-thumb-outline-width: 2px;
+  --x-range-thumb-focus-outline-opacity: 50%;
+  --x-range-track-start: 0%;
+  --x-range-track-end: 100%;
+}

package/src/components/range/readme.md

@@ -1,4 +1,4 @@
-# [Range](https://winduum.dev/docs/ui/range.html)
+# [Range](https://winduum.dev/docs/components/range.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/range/index.css" layer(components);
+@import "winduum/src/components/range/index.css" layer(components);
 ```
 
 or modular (you can use your own props or CSS)
 
 ```css
-@import "winduum/src/ui/range/default.css" layer(components);
-@import "winduum/src/ui/range/default-props.css" layer(components);
-@import "winduum/src/ui/range/multi.css" layer(components);
-@import "winduum/src/ui/range/vertical.css" layer(components);
+@import "winduum/src/components/range/default.css" layer(components);
+@import "winduum/src/components/range/default-props.css" layer(components);
+@import "winduum/src/components/range/multi.css" layer(components);
+@import "winduum/src/components/range/vertical.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/range/assets/index.css" layer(components);
+@import "@/components/range/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/range.html) to learn more about Javascript API and see usage examples.
+Visit [docs](https://winduum.dev/docs/components/range.html) to learn more about Javascript API and see usage examples.