winduum 2.0.9 → 2.1.0-next.1

package/src/components/badge/index.css

@@ -1,8 +1,8 @@
-@import "default.css";
-@import "props/default.css";
-@import "sm.css";
-@import "lg.css";
-@import "bordered.css";
-@import "muted.css";
-@import "square.css";
-@import "circle.css";
+@import "./default.css";
+@import "./props/default.css";
+@import "./sm.css";
+@import "./lg.css";
+@import "./bordered.css";
+@import "./muted.css";
+@import "./square.css";
+@import "./circle.css";

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

@@ -1,8 +1,8 @@
 :root, :host {
   --x-badge-border-width: 0px;
   --x-badge-border-radius: var(--radius-lg);
-  --x-badge-font-size: var(--font-size-xs);
-  --x-badge-gap: var(--spacing-1);
+  --x-badge-font-size: var(--text-xs);
+  --x-badge-gap: calc(var(--spacing) * 1);
   --x-badge-block-size: 1.5rem;
   --x-badge-padding-block: 0;
   --x-badge-padding-inline: 0.5rem;

package/src/components/badge/sm.css

@@ -1,4 +1,4 @@
 .x-badge:is(.sm) {
   --x-badge-block-size: 1.25rem;
-  --x-badge-font-size: var(--font-size-xs);
+  --x-badge-font-size: var(--text-xs);
 }

package/src/components/breadcrumb/index.css

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

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

@@ -1,5 +1,5 @@
 :root, :host {
   --x-breadcrumb-marker-size: 0.875rem;
   --x-breadcrumb-marker: var(--mask-chevron-right);
-  --x-breadcrumb-gap: var(--spacing-1);
+  --x-breadcrumb-gap: calc(var(--spacing) * 1);
 }

package/src/components/button/index.css

@@ -1,14 +1,14 @@
-@import "props/default.css";
-@import "props/interactive.css";
-@import "default.css";
-@import "interactive.css";
-@import "sm.css";
-@import "lg.css";
-@import "bordered.css";
-@import "ghosted.css";
-@import "muted.css";
-@import "raised.css";
-@import "fill.css";
-@import "square.css";
-@import "circle.css";
-@import "spinner.css";
+@import "./props/default.css";
+@import "./props/interactive.css";
+@import "./default.css";
+@import "./interactive.css";
+@import "./sm.css";
+@import "./lg.css";
+@import "./bordered.css";
+@import "./ghosted.css";
+@import "./muted.css";
+@import "./raised.css";
+@import "./fill.css";
+@import "./square.css";
+@import "./circle.css";
+@import "./spinner.css";

package/src/components/button/interactive.css

@@ -1,6 +1,6 @@
 .x-button {
   transition-property: var(--x-button-transition-property, var(--default-transition-property));
-  transition-timing-function: var(--x-button-timing-function, var(--transition-timing-function-in-out));
+  transition-timing-function: var(--x-button-timing-function, var(--ease-in-out));
   transition-duration: var(--x-button-transition-duration, var(--default-transition-duration));
 
   &:where(.accent-primary),

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

@@ -2,9 +2,9 @@
   --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-size: var(--text-sm);
   --x-button-font-weight: var(--font-weight-medium);
-  --x-button-gap: var(--spacing-2);
+  --x-button-gap: calc(var(--spacing) * 2);
   --x-button-block-size: 2.25rem;
   --x-button-padding-block: 0.375rem;
   --x-button-padding-inline: 0.75rem;

package/src/components/card/index.css

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

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

@@ -1,6 +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-6);
-  --x-card-padding-inline: var(--spacing-7);
+  --x-card-padding-block: calc(var(--spacing) * 6);
+  --x-card-padding-inline: calc(var(--spacing) * 7);
 }

package/src/components/carousel/index.css

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

package/src/components/check/index.css

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

package/src/components/check/interactive.css

@@ -6,7 +6,7 @@
 
   :where(input) {
     transition-property: var(--default-transition-property);
-    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-timing-function: var(--ease-in-out);
     transition-duration: var(--default-transition-duration);
 
     &:where(:hover, :focus-visible) {

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

@@ -2,8 +2,8 @@
   --x-check-size: 1.25rem;
   --x-check-icon-size: 1.125rem;
   --x-check-icon: var(--mask-check);
-  --x-check-gap: var(--spacing-3);
-  --x-check-font-size: var(--font-size-sm);
+  --x-check-gap: calc(var(--spacing) * 3);
+  --x-check-font-size: var(--text-sm);
   --x-check-line-height: calc(1em + 0.25rem);
   --x-check-border-radius: var(--radius-md);
   --x-check-border-width: 1px;

package/src/components/color/index.css

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

package/src/components/color/interactive.css

@@ -1,7 +1,7 @@
 .x-color {
   :where(input) {
     transition-property: var(--default-transition-property);
-    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-timing-function: var(--ease-in-out);
     transition-duration: var(--default-transition-duration);
 
     &:disabled {

package/src/components/compare/default.css

@@ -20,27 +20,6 @@
     content: "";
   }
 
-  > :where(input) {
-    pointer-events: auto;
-    cursor: grab;
-    opacity: 0%;
-
-    &:active ~ .x-button {
-      --x-button-background-color-mix: var(--x-button-active-background-color-mix, var(--color-dark));
-      --x-button-background-color-opacity: var(--x-button-active-background-color-opacity, 80%);
-    }
-
-    &:focus-visible ~ .x-button {
-      --x-button-outline-color: var(--x-button-focus-outline-color, var(--color-accent));
-      --x-button-outline-offset: var(--x-button-focus-outline-offset, 2px);
-      --x-button-outline-color-opacity: var(--x-button-focus-outline-opacity, 50%);
-    }
-
-    &:active {
-      cursor: grabbing;
-    }
-  }
-
   > .x-button {
     inset-inline-start: var(--x-compare-position);
     margin-inline-start: calc(var(--x-button-inline-size) / 2 * -1);
@@ -62,4 +41,25 @@
       }
     }
   }
+
+  > :where(input) {
+    pointer-events: auto;
+    cursor: grab;
+    opacity: 0%;
+
+    &:active ~ .x-button {
+      --x-button-background-color-mix: var(--x-button-active-background-color-mix, var(--color-dark));
+      --x-button-background-color-opacity: var(--x-button-active-background-color-opacity, 80%);
+    }
+
+    &:focus-visible ~ .x-button {
+      --x-button-outline-color: var(--x-button-focus-outline-color, var(--color-accent));
+      --x-button-outline-offset: var(--x-button-focus-outline-offset, 2px);
+      --x-button-outline-color-opacity: var(--x-button-focus-outline-opacity, 50%);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
 }

package/src/components/compare/index.css

@@ -1 +1 @@
-@import "default.css";
+@import "./default.css";

package/src/components/control/default.css

@@ -54,6 +54,7 @@
     align-self: stretch;
     align-items: center;
     border-radius: inherit;
+    background-color: inherit;
 
     &:disabled {
       cursor: not-allowed;

package/src/components/control/index.css

@@ -1,15 +1,15 @@
-@import "props/default.css";
-@import "props/color.css";
-@import "props/icon.css";
-@import "props/floating.css";
-@import "props/select.css";
-@import "default.css";
-@import "interactive.css";
-@import "invalid.css";
-@import "color.css";
-@import "icon.css";
-@import "file.css";
-@import "floating.css";
-@import "floating-interactive.css";
-@import "select.css";
-@import "select-multiple.css";
+@import "./props/default.css";
+@import "./props/color.css";
+@import "./props/icon.css";
+@import "./props/floating.css";
+@import "./props/select.css";
+@import "./default.css";
+@import "./interactive.css";
+@import "./invalid.css";
+@import "./color.css";
+@import "./icon.css";
+@import "./file.css";
+@import "./floating.css";
+@import "./floating-interactive.css";
+@import "./select.css";
+@import "./select-multiple.css";

package/src/components/control/interactive.css

@@ -1,6 +1,6 @@
 .x-control {
   transition-property: var(--default-transition-property);
-  transition-timing-function: var(--transition-timing-function-in-out);
+  transition-timing-function: var(--ease-in-out);
   transition-duration: var(--default-transition-duration);
 
   &:focus-within {

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

@@ -7,8 +7,8 @@
   --x-control-border-radius: var(--radius);
   --x-control-border-color: currentColor;
   --x-control-font-weight: var(--font-weight-medium);
-  --x-control-font-size: var(--font-size-base);
-  --x-control-background-color: transparent;
+  --x-control-font-size: var(--text-base);
+  --x-control-background-color: var(--color-body-primary);
   --x-control-color: currentColor;
   --x-control-outline-width: 3px;
   --x-control-placeholder-color: currentColor;

package/src/components/dialog/index.css

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

package/src/components/drawer/index.css

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

package/src/components/field/default.css

@@ -1,5 +1,5 @@
 .x-field {
-  gap: var(--x-field-gap, var(--spacing-2));
+  gap: var(--x-field-gap, calc(var(--spacing) * 2));
   display: flex;
   flex-direction: column;
 

package/src/components/field/index.css

@@ -1 +1 @@
-@import "default.css";
+@import "./default.css";

package/src/components/form/index.d.ts

@@ -1,6 +1,7 @@
 export interface ValidateFormOptions {
     validateSelectors?: string
     validateOptions?: ValidateFieldOptions
+    validateField?: typeof validateField
     scrollOptions?: ScrollIntoViewOptions
     submitterLoadingAttribute?: string
 }

package/src/components/form/index.js

@@ -9,6 +9,7 @@ export const validateForm = (event, options = {}) => {
         validateOptions: {
             validate: true
         },
+        validateField,
         submitterLoadingAttribute: 'data-loading',
         scrollOptions: { behavior: 'smooth', block: 'center' },
         ...options
@@ -27,7 +28,7 @@ export const validateForm = (event, options = {}) => {
     }
 
     event.target.querySelectorAll(options.validateSelectors).forEach((element) => {
-        validateField(element, options.validateOptions)
+        options.validateField(element, options.validateOptions)
     })
 }
 

package/src/components/group/index.css

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

package/src/components/heading/index.css

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

package/src/components/heading/lg.css

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

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

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

package/src/components/heading/sm.css

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

package/src/components/image/index.css

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

package/src/components/index.css

@@ -1,32 +1,32 @@
-@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";
-@import "drawer/index.css";
-@import "field/index.css";
-@import "carousel/index.css";
-@import "compare/index.css";
-@import "pagination/index.css";
-@import "popover/index.css";
-@import "table/index.css";
-@import "tabs/index.css";
-@import "tooltip/index.css";
-@import "toaster/index.css";
-@import "toast/index.css";
+@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";
+@import "./drawer/index.css";
+@import "./field/index.css";
+@import "./carousel/index.css";
+@import "./compare/index.css";
+@import "./pagination/index.css";
+@import "./popover/index.css";
+@import "./table/index.css";
+@import "./tabs/index.css";
+@import "./tooltip/index.css";
+@import "./toaster/index.css";
+@import "./toast/index.css";

package/src/components/info/index.css

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

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

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

package/src/components/label/index.css

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

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

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

package/src/components/link/index.css

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

package/src/components/link/interactive.css

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

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

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

package/src/components/notice/index.css

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

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

@@ -1,7 +1,7 @@
 :root, :host {
   --x-notice-padding-block: 1.25rem;
   --x-notice-padding-inline: 1.5rem;
-  --x-notice-font-size: var(--font-size-sm);
+  --x-notice-font-size: var(--text-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/pagination/default.css

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

package/src/components/pagination/index.css

@@ -1 +1 @@
-@import "default.css";
+@import "./default.css";

package/src/components/popover/content.css

@@ -4,7 +4,7 @@
   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-timing-function: var(--ease-in-out);
   transition-duration: var(--default-transition-duration);
   transform:
     translate(var(--tw-translate-x), var(--tw-translate-y))

package/src/components/popover/index.css

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

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

@@ -1,8 +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-2);
-  --x-popover-content-padding-inline: var(--spacing-2);
+  --x-popover-content-padding-block: calc(var(--spacing) * 2);
+  --x-popover-content-padding-inline: calc(var(--spacing) * 2);
   --x-popover-content-scale-y: 0.75;
   --x-popover-content-scale-x: 0.75;
 }

package/src/components/progress/default.css

@@ -13,7 +13,7 @@
 
   &::-moz-progress-bar {
     background-color: var(--x-progress-bar-background-color, var(--color-accent));
-    transition: all var(--x-progress-transition-duration, 0.3s) var(--transition-timing-function-in-out);
+    transition: all var(--x-progress-transition-duration, 0.3s) var(--ease-in-out);
     border-radius: inherit;
   }
 
@@ -28,12 +28,12 @@
 
   &::-webkit-progress-value {
     background-color: var(--x-progress-bar-background-color, var(--color-accent));
-    transition: all var(--x-progress-transition-duration, 0.3s) var(--transition-timing-function-in-out);
+    transition: all var(--x-progress-transition-duration, 0.3s) var(--ease-in-out);
     border-radius: inherit;
   }
 
   &:indeterminate {
-    animation: var(--x-progress-indeterminate-animation-duration, 1s) var(--x-progress-indeterminate-animation-timing-function, var(--transition-timing-function-linear)) infinite move-indeterminate;
+    animation: var(--x-progress-indeterminate-animation-duration, 1s) var(--x-progress-indeterminate-animation-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,6 +1,6 @@
-@import "props/default.css";
-@import "keyframes/default.css";
-@import "default.css";
-@import "meter.css";
-@import "sm.css";
-@import "lg.css";
+@import "./props/default.css";
+@import "./keyframes/default.css";
+@import "./default.css";
+@import "./meter.css";
+@import "./sm.css";
+@import "./lg.css";

package/src/components/range/index.css

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