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

package/src/components/dialog/index.css

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

package/src/components/dialog/index.js

@@ -6,7 +6,7 @@ import { animationsFinished } from '../../common.js'
 export const defaultOptions = {
     openClass: 'open',
     overflowClass: 'overflow-auto',
-    scrollbarWidthProperty: '--scrollbar-width',
+    scrollbarWidthProperty: '--default-scrollbar-width',
     remove: false
 }
 
@@ -48,7 +48,7 @@ export const showDialog = async (element, options = {}) => {
     element.classList.add(options.openClass)
     await animationsFinished(element.lastElementChild)
     element.classList.add(options.overflowClass)
-    element.dispatchEvent(new CustomEvent('dialog:show'))
+    element.dispatchEvent(new CustomEvent('x-dialog:show'))
 }
 
 /**
@@ -71,6 +71,6 @@ export const closeDialog = async (element, options = {}) => {
         ? element.close()
         : element.removeAttribute('open')
 
-    element.dispatchEvent(new CustomEvent('dialog:close'))
+    element.dispatchEvent(new CustomEvent('x-dialog:close'))
     options.remove && element.remove()
 }

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

@@ -0,0 +1,5 @@
+:root, :host {
+  --x-dialog-content-padding-block: 2rem;
+  --x-dialog-content-padding-inline: 1.5rem;
+  --x-dialog-content-inline-size: 35rem;
+}

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

@@ -0,0 +1,6 @@
+:root, :host {
+  --x-dialog-padding-block: 2rem;
+  --x-dialog-padding-inline: 1.5rem;
+  --x-dialog-background-color: var(--color-dark);
+  --x-dialog-background-color-opacity: 80%;
+}

package/src/components/dialog/readme.md

@@ -14,9 +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/dialog/default-props.css" layer(components);
+@import "winduum/src/components/dialog/props/default.css" layer(components);
+@import "winduum/src/components/dialog/props/content.css" layer(components);
 @import "winduum/src/components/dialog/default.css" layer(components);
-@import "winduum/src/components/dialog/content-props.css" layer(components);
 @import "winduum/src/components/dialog/content.css" layer(components);
 ```
 

package/src/components/drawer/content.css

@@ -1,7 +1,7 @@
-.drawer-content {
-  width: var(--drawer-content-width);
-  height: var(--drawer-content-height);
+.x-drawer-content {
+  inline-size: var(--x-drawer-content-inline-size);
+  block-size: var(--x-drawer-content-block-size);
+  background-color: var(--x-drawer-content-background-color);
   flex-shrink: 0;
   scroll-snap-align: end;
-  background-color: var(--color-body-primary);
 }

package/src/components/drawer/default.css

@@ -1,12 +1,15 @@
-.drawer {
-  --tw-bg-opacity: 0;
-
-  z-index: var(--z-index-30);
+.x-drawer {
+  z-index: var(--x-drawer-z-index, var(--z-index-30));
+  background-color:
+    color-mix(
+      in var(--x-drawer-background-color-space, srgb),
+      var(--color-dark) calc(var(--background-color-opacity, 0) * var(--x-drawer-background-color-opacity)),
+      var(--x-drawer-background-color-mix, transparent)
+    );
   position: fixed;
   inset: 0;
   display: flex;
   overflow: auto hidden;
-  background-color: color-mix(in sRGB, var(--color-dark) calc(var(--tw-bg-opacity) * var(--drawer-bg-opacity) * 100%), transparent);
   scrollbar-width: none;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;

package/src/components/drawer/index.css

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

package/src/components/drawer/index.js

@@ -26,7 +26,7 @@ export const closeDrawer = (element, distance = element.scrollWidth, direction =
 export const scrollDrawer = (element, options = {}) => {
     options = {
         snapClass: 'snap-x snap-mandatory',
-        opacityProperty: '--tw-bg-opacity',
+        opacityProperty: '--background-color-opacity',
         opacityRatio: 1,
         scrollOpen: 0,
         scrollClose: element.scrollWidth - element.clientWidth,
@@ -43,12 +43,12 @@ export const scrollDrawer = (element, options = {}) => {
     if (options.scrollDirection === options.scrollOpen) {
         element.classList.add(...options.snapClass.split(/\s/))
         element.inert = false
-        element.dispatchEvent(new CustomEvent('drawer:open'))
+        element.dispatchEvent(new CustomEvent('x-drawer:open'))
     }
 
     if ((options.scrollDirection === options.scrollClose) && !element.inert) {
         element.classList.remove(...options.snapClass.split(/\s/))
         element.inert = true
-        element.dispatchEvent(new CustomEvent('drawer:close'))
+        element.dispatchEvent(new CustomEvent('x-drawer:close'))
     }
 }

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

@@ -0,0 +1,7 @@
+:root, :host {
+  --x-drawer-content-background-color: var(--color-body-primary);
+  --x-drawer-content-padding-block: 2rem;
+  --x-drawer-content-padding-inline: 1.5rem;
+  --x-drawer-content-inline-size: calc(100vw - 4rem);
+  --x-drawer-content-block-size: 100%;
+}

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

@@ -0,0 +1,3 @@
+:root, :host {
+  --x-drawer-background-color-opacity: 75%;
+}

package/src/components/drawer/readme.md

@@ -14,9 +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/drawer/default-props.css" layer(components);
+@import "winduum/src/components/drawer/props/default.css" layer(components);
+@import "winduum/src/components/drawer/props/content.css" layer(components);
 @import "winduum/src/components/drawer/default.css" layer(components);
-@import "winduum/src/components/drawer/content-props.css" layer(components);
 @import "winduum/src/components/drawer/content.css" layer(components);
 ```
 

package/src/components/field/default.css

@@ -1,17 +1,17 @@
-.field {
-  gap: var(--spacing-sm);
+.x-field {
+  gap: var(--x-field-gap, var(--spacing-sm));
   display: flex;
   flex-direction: column;
 
   .validated &:has(:invalid) {
-    :where(.info[hidden]) {
-      display: flex;
+    :where(.x-info[hidden]) {
+      display: revert;
     }
   }
 
-  &:has([required]) :where(.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: '.control, .check, .switch, .rating, .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: '.field',
-        infoSelector: '.info',
-        infoContent: '<div class="ui-info text-error validity"></div>',
-        endParentSelector: '.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

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

package/src/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/components/group/vertical.css

@@ -1,11 +1,11 @@
-.group:where(.vertical) {
+.x-group:where(.vertical) {
   flex-direction: column;
 
   > :where(*) {
     border-radius: inherit;
 
     &:where(:not(:first-child)) {
-      margin-block-start: calc(var(--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

@@ -1,8 +1,8 @@
-.heading {
-  font-family: var(--heading-font-family);
-  font-weight: var(--heading-font-weight);
-  font-size: var(--heading-font-size);
-  line-height: var(--heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+.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/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

@@ -1,3 +1,3 @@
-.heading:is(.lg) {
-  --heading-font-size: var(--font-size-3xl);
+.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/components/heading/readme.md

@@ -1,4 +1,4 @@
-# [Heading](https://winduum.dev/docs/ui/heading.html)
+# [Heading](https://winduum.dev/docs/components/heading.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/heading/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/heading/default-props.css" layer(components);
-@import "winduum/src/ui/heading/default.css" layer(components);
-@import "winduum/src/ui/heading/sm.css" layer(components);
-@import "winduum/src/ui/heading/lg.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
@@ -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/heading/assets/index.css" layer(components);
+@import "@/components/heading/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/heading.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

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

package/src/components/image/avatar.css

@@ -1,4 +1,4 @@
-.image:where(.avatar) {
+.x-image:where(.avatar) {
   border-radius: var(--radius-full);
   background-color: var(--color-accent);
   color: var(--color-accent-foreground);

package/src/components/image/default.css

@@ -1,4 +1,4 @@
-.image {
+.x-image {
   position: relative;
   display: inline-flex;
   border-radius: inherit;

package/src/components/image/readme.md

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

package/src/components/index.css

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

package/src/components/info/default.css

@@ -1,8 +1,8 @@
-.info {
-  font-family: var(--info-font-family);
-  font-weight: var(--info-font-weight);
-  font-size: var(--info-font-size);
-  line-height: var(--info-line-height);
-  letter-spacing: var(--info-letter-spacing);
+.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

@@ -1,2 +1,2 @@
-@import "default-props.css";
+@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/components/info/readme.md

@@ -1,4 +1,4 @@
-# [Info](https://winduum.dev/docs/ui/info.html)
+# [Info](https://winduum.dev/docs/components/info.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/info/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/info/default-props.css" layer(components);
-@import "winduum/src/ui/info/default.css" layer(components);
+@import "winduum/src/components/info/props/default.css" layer(components);
+@import "winduum/src/components/info/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/info/assets/index.css" layer(components);
+@import "@/components/info/assets/index.css" layer(components);
 ```
 
 ### Docs
-Visit [docs](https://winduum.dev/docs/ui/info.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

@@ -1,8 +1,8 @@
-.label {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight);
-  font-size: var(--label-font-size);
-  line-height: var(--label-line-height);
-  letter-spacing: var(--label-letter-spacing);
+.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

@@ -1,2 +1,2 @@
-@import "default-props.css";
+@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/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

@@ -1,8 +1,8 @@
-.link {
-  font-family: var(--link-font-family);
-  font-weight: var(--link-font-weight);
-  font-size: var(--link-font-size);
-  line-height: var(--link-line-height);
-  letter-spacing: var(--link-letter-spacing);
+.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

@@ -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/link/interactive.css

@@ -1,16 +1,9 @@
-.link {
-  --tw-text-opacity: var(--link-hover-color-opacity);
-
+.x-link {
   &:where(:any-link, button:enabled, [role="button"]) {
     transition: all var(--default-transition-duration) var(--transition-timing-function-in-out);
 
-    &:hover {
-      color: color-mix(in var(--default-color-space), var(--link-hover-color) calc(var(--tw-text-opacity) * 100%), var(--link-hover-color-mix));
-    }
-
-    &:focus-visible {
-      outline: 2px dotted currentColor;
-      outline-offset: 2px;
+    &: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);
+}