winduum 1.2.1 → 2.0.0-next.10

package/src/components/field/default.css

@@ -1,17 +1,17 @@
-.c-field {
-  gap: var(--spacing-sm);
+.x-field {
+  gap: var(--x-field-gap, var(--spacing-sm));
   display: flex;
   flex-direction: column;
 
   .validated &:has(:invalid) {
-    :where(.ui-info[hidden]) {
-      display: flex;
+    :where(.x-info[hidden]) {
+      display: revert;
     }
   }
 
-  &:has([required]) :where(.ui-label) {
+  &:has([required]) :where(.x-label) {
     &::after {
-      color: var(--color-error);
+      color: var(--x-field-required-color, var(--color-error));
       content: " *";
     }
   }

package/src/components/form/index.js

@@ -5,7 +5,7 @@
  */
 export const validateForm = (event, options = {}) => {
     options = {
-        validateSelectors: '.ui-control, .ui-check, .ui-switch, .ui-rating, .ui-color',
+        validateSelectors: '.x-control, .x-check, .x-switch, .x-rating, .x-color',
         validateOptions: {},
         submitterLoadingClass: 'loading',
         ...options
@@ -37,10 +37,10 @@ export const validateField = (element, options = {}) => {
         selector: 'input:not([type="hidden"]), textarea, select',
         ignoreMatch: /(data-novalidate|readonly)/,
         validitySelector: '.validity',
-        infoParentSelector: '.c-field',
-        infoSelector: '.ui-info',
-        infoContent: '<div class="ui-info text-error validity"></div>',
-        endParentSelector: '.ui-control',
+        infoParentSelector: '.x-field',
+        infoSelector: '.x-info',
+        infoContent: '<div class="x-info text-error validity"></div>',
+        endParentSelector: '.x-control',
         endSelector: '.ms-auto',
         endContent: '<div class="ms-auto"></div>',
         validClass: 'valid',

package/src/components/group/default.css

@@ -0,0 +1,42 @@
+.x-group {
+  display: flex;
+  border-radius: var(--radius);
+
+  &:has(.x-control) {
+    > :where(.x-button) {
+      min-inline-size: var(--x-control-height);
+      height: auto;
+    }
+
+    > :is(.x-button) {
+      --x-button-border-width: var(--x-control-border-width);
+    }
+  }
+
+  > :where(*) {
+    border-radius: inherit;
+
+    &:is(.x-control) {
+      --x-control-border-color-mix: var(--color-body-primary);
+    }
+
+    &:is(.x-button) {
+      --x-button-focus-outline-offset: 0;
+    }
+
+    &:focus-within {
+      z-index: 1;
+    }
+
+    &:where(:not(:first-child)) {
+      margin-inline-start: calc(var(--x-control-border-width) * -1);
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+    &:where(:not(:last-child)) {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+}

package/src/{ui → components}/group/readme.md

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

package/src/{ui → components}/group/vertical.css

@@ -1,11 +1,11 @@
-.ui-group:where(.vertical) {
+.x-group:where(.vertical) {
   flex-direction: column;
 
   > :where(*) {
     border-radius: inherit;
 
     &:where(:not(:first-child)) {
-      margin-block-start: calc(var(--ui-control-border-width) * -1);
+      margin-block-start: calc(var(--x-control-border-width) * -1);
       border-start-start-radius: 0;
       border-start-end-radius: 0;
       margin-inline-start: 0;

package/src/components/heading/default.css

@@ -0,0 +1,8 @@
+.x-heading {
+  font-family: var(--x-heading-font-family);
+  font-weight: var(--x-heading-font-weight);
+  font-size: var(--x-heading-font-size);
+  line-height: var(--x-heading-line-height);
+  letter-spacing: var(--x-heading-letter-spacing);
+  text-wrap: balance;
+}

package/src/{ui → components}/heading/index.css

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

package/src/components/heading/lg.css

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

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

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

package/src/{ui/check → components/heading}/readme.md

@@ -1,4 +1,4 @@
-# [Check](https://winduum.dev/docs/ui/check.html)
+# [Heading](https://winduum.dev/docs/components/heading.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/heading/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/heading/props/default.css" layer(components);
+@import "winduum/src/components/heading/default.css" layer(components);
+@import "winduum/src/components/heading/sm.css" layer(components);
+@import "winduum/src/components/heading/lg.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/heading/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/heading.html) to learn more about usage examples.

package/src/components/heading/sm.css

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

package/src/{ui → components}/image/avatar.css

@@ -1,5 +1,5 @@
-.ui-image:where(.avatar) {
-  border-radius: var(--rounded-full);
+.x-image:where(.avatar) {
+  border-radius: var(--radius-full);
   background-color: var(--color-accent);
   color: var(--color-accent-foreground);
   container-type: inline-size;
@@ -7,7 +7,7 @@
   align-items: center;
 
   :where(span) {
-    font-weight: var(--font-medium);
+    font-weight: var(--font-weight-medium);
     font-size: 50cqi;
   }
 }

package/src/{ui → components}/image/default.css

@@ -1,4 +1,4 @@
-.ui-image {
+.x-image {
   position: relative;
   display: inline-flex;
   border-radius: inherit;
@@ -13,7 +13,7 @@
 
   > :where(img, video, iframe, object, svg) {
     border-radius: inherit;
-    min-width: 100%;
+    min-inline-size: 100%;
     height: auto;
     object-fit: contain;
   }

package/src/{ui/notice → components/image}/readme.md

@@ -1,4 +1,4 @@
-# [Notice](https://winduum.dev/docs/ui/notice.html)
+# [Image](https://winduum.dev/docs/components/image.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/image/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/image/default.css" layer(components);
+@import "winduum/src/components/image/avatar.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/image/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/image.html) to learn more about usage examples.

package/src/components/index.css

@@ -1,3 +1,21 @@
+@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";

package/src/components/info/default.css

@@ -0,0 +1,8 @@
+.x-info {
+  font-family: var(--x-info-font-family);
+  font-weight: var(--x-info-font-weight);
+  font-size: var(--x-info-font-size);
+  line-height: var(--x-info-line-height);
+  letter-spacing: var(--x-info-letter-spacing);
+  text-wrap: pretty;
+}

package/src/components/info/index.css

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

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

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

package/src/{ui/rating → components/info}/readme.md

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

package/src/components/label/default.css

@@ -0,0 +1,8 @@
+.x-label {
+  font-family: var(--x-label-font-family);
+  font-weight: var(--x-label-font-weight);
+  font-size: var(--x-label-font-size);
+  line-height: var(--x-label-line-height);
+  letter-spacing: var(--x-label-letter-spacing);
+  text-wrap: pretty;
+}

package/src/components/label/index.css

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

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

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

package/src/{ui → components}/label/readme.md

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

package/src/components/link/default.css

@@ -0,0 +1,8 @@
+.x-link {
+  font-family: var(--x-link-font-family);
+  font-weight: var(--x-link-font-weight);
+  font-size: var(--x-link-font-size);
+  line-height: var(--x-link-line-height);
+  letter-spacing: var(--x-link-letter-spacing);
+  text-wrap: pretty;
+}

package/src/components/link/index.css

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

package/src/components/link/interactive.css

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

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

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

package/src/{ui → 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

@@ -0,0 +1,21 @@
+.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(--x-notice-outline-width) solid
+    color-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(--x-notice-outline-offset);
+  text-wrap: pretty;
+}

package/src/components/notice/index.css

@@ -0,0 +1,2 @@
+@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/{ui/image → components/notice}/readme.md

@@ -1,4 +1,4 @@
-# [Image](https://winduum.dev/docs/ui/image.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/image/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/image/default.css" layer(components);
-@import "winduum/src/ui/image/avatar.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/image/assets/index.css" layer(components);
+@import "@/components/notice/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/image.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 @@
-.c-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,16 +1,16 @@
-.c-popover-content {
+.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));
-  transition-property: var(--transition);
-  transition-timing-function: var(--ease-in-out);
-  transition-duration: var(--duration);
+    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(--c-popover-content-bg);
-  border-radius: var(--c-popover-content-border-radius);
-  padding: var(--c-popover-content-py) var(--c-popover-content-px);
-  z-index: var(--z-10);
-  width: max-content;
+  inline-size: max-content;
   position: absolute;
 
   &:where(.bottom), & {
@@ -86,22 +86,21 @@
     inset-block-start: 50%;
   }
 
-  &[popover]:not(.in) {
-    --tw-scale-x: var(--c-popover-content-scale-x);
-    --tw-scale-y: var(--c-popover-content-scale-y);
+  &[popover]:not([data-open]) {
+    --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(--c-popover-content-scale-x);
-      --tw-scale-y: var(--c-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 @@
-.c-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";