winduum 1.2.1 → 2.0.0-next.10

package/src/components/carousel/index.js

@@ -47,21 +47,21 @@ export const getItemCount = (element, scrollWidth = element.scrollWidth - elemen
 /**
  * @param {HTMLElement | Element} element
  * @param {import("./").ObserveCarouselOptions} options
- * @returns void
+ * @returns IntersectionObserver
  */
 export const observeCarousel = (element, options = {}) => {
     options = {
-        visibleClass: 'visible',
+        visibleAttribute: 'visible',
         observerOptions: {},
         ...options
     }
 
     element._observer = new IntersectionObserver(entries => {
         entries.forEach(entry => {
-            entry.target.classList.toggle(options.visibleClass, entry.isIntersecting)
+            entry.target.toggleAttribute(options.visibleAttribute, entry.isIntersecting)
         })
 
-        const activeElement = [...element.children].find(children => children.classList.contains(options.visibleClass))
+        const activeElement = [...element.children].find(children => children.hasAttribute(options.visibleAttribute))
 
         if (activeElement) {
             element._activeIndex = [...element.children].indexOf(activeElement)
@@ -73,6 +73,8 @@ export const observeCarousel = (element, options = {}) => {
     })
 
     ;[...element.children].forEach(children => element._observer.observe(children))
+
+    return element._observer
 }
 
 /**
@@ -82,7 +84,7 @@ export const observeCarousel = (element, options = {}) => {
  */
 export const scrollCarousel = (element, options = {}) => {
     options.pagination = {
-        activeClass: 'active',
+        activeAttribute: 'data-active',
         ...options.pagination
     }
 
@@ -90,9 +92,9 @@ export const scrollCarousel = (element, options = {}) => {
     const activeItemMax = getItemCount(element)
 
     if (options?.pagination?.element) {
-        ;[...options.pagination.element.children].forEach(children => children.classList.remove(options.pagination.activeClass))
+        ;[...options.pagination.element.children].forEach(children => children.removeAttribute(options.pagination.activeAttribute))
 
-        options.pagination.element.children[activeItem - 1]?.classList.add(options.pagination.activeClass)
+        options.pagination.element.children[activeItem - 1]?.setAttribute(options.pagination.activeAttribute, '')
     }
 
     if (options.progressElement) {
@@ -129,7 +131,7 @@ export const paginationCarousel = (element, options = {}) => {
     ).join(''))
 
     ;[...options.element.children].forEach((children, i) => {
-        (i === 0) && children.classList.add(options.activeClass)
+        (i === 0) && children.setAttribute(options.activeAttribute, '')
         children.addEventListener('click', ({ currentTarget }) => {
             scrollTo(element, [...options.element.children].indexOf(currentTarget))
         })
@@ -173,7 +175,7 @@ export const autoplayCarousel = (element, options = {}) => {
  */
 export const dragCarousel = (element, options = {}) => {
     options = {
-        activeClass: 'grabbing',
+        activeAttribute: 'data-grabbing',
         ...options
     }
 
@@ -188,7 +190,7 @@ export const dragCarousel = (element, options = {}) => {
 
     const endGrabbing = () => {
         isDown = false
-        element.classList.remove(options.activeClass)
+        element.removeAttribute(options.activeAttribute)
 
         scrollTo(element, element._activeIndex)
 
@@ -215,7 +217,7 @@ export const dragCarousel = (element, options = {}) => {
 
         const x = e.pageX - element.offsetLeft
 
-        element.classList.add(options.activeClass)
+        element.setAttribute(options.activeAttribute, '')
         element.style.scrollSnapType = 'unset'
         element.scroll({ left: scrollLeft - ((x - startX) * 1.25), behavior: 'instant' })
         element.ondragstart = e => e.preventDefault()

package/src/components/check/default.css

@@ -0,0 +1,67 @@
+.x-check {
+  --x-check-outline-color: var(--color-accent);
+  --x-check-icon-color: var(--color-accent-foreground);
+
+  font-weight: var(--x-check-font-weight);
+  font-size: var(--x-check-font-size);
+  line-height: var(--x-check-line-height);
+  letter-spacing: var(--x-check-letter-spacing);
+  gap: var(--x-check-gap);
+  display: inline-flex;
+  text-wrap: pretty;
+
+  &:has([type="radio"]) {
+    --x-check-icon: var(--mask-radio);
+    --x-check-border-radius: 50%;
+  }
+
+  :where(input) {
+    inline-size: var(--x-check-size);
+    block-size: var(--x-check-size);
+    border-radius: var(--x-check-border-radius);
+    background-color:
+      color-mix(
+        in var(--x-check-background-color-space, srgb),
+        var(--x-check-background-color) var(--x-check-background-color-opacity, 0%),
+        var(--x-check-background-color-mix, transparent)
+      );
+    border:
+      var(--x-check-border-width) solid
+      color-mix(
+        in var(--x-check-border-color-space, srgb),
+        var(--x-check-border-color) var(--x-check-border-color-opacity, 20%),
+        var(--x-check-border-color-mix, transparent)
+      );
+    outline:
+      var(--x-check-outline-width) solid
+      color-mix(
+        in var(--x-check-outline-color-space, srgb),
+        var(--x-check-outline-color) var(--x-check-outline-color-opacity, 0%),
+        var(--x-check-outline-color-mix, transparent)
+      );
+    outline-offset: var(--x-check-outline-offset);
+    display: flex;
+    flex-shrink: 0;
+
+    &::before {
+      inline-size: var(--x-check-icon-size);
+      block-size: var(--x-check-icon-size);
+      color: var(--x-check-icon-color);
+      mask: var(--x-check-icon);
+      transition: inherit;
+      content: "";
+      background-color: currentColor;
+      opacity: 0%;
+      transform: scale(0);
+      will-change: transform;
+      margin: auto;
+    }
+
+    &:where(:required) {
+      + *::after {
+        color: var(--x-check-required-color, var(--color-error));
+        content: " *";
+      }
+    }
+  }
+}

package/src/{ui/switch → components/check}/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/check/interactive.css

@@ -0,0 +1,56 @@
+.x-check {
+  --x-check-hover-border-color: var(--color-accent);
+  --x-check-hover-background-color: var(--color-accent);
+  --x-check-checked-background-color: var(--color-accent);
+  --x-check-focus-border-color: var(--color-accent);
+
+  :where(input) {
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-duration: var(--default-transition-duration);
+
+    &:where(:hover, :focus-visible) {
+      --x-check-background-color: var(--x-check-hover-background-color);
+      --x-check-background-color-opacity: var(--x-check-hover-background-color-opacity, 10%);
+      --x-check-border-color: var(--x-check-hover-border-color);
+      --x-check-border-color-opacity: var(--x-check-hover-border-color-opacity, 75%);
+    }
+
+    &:focus {
+      --x-check-border-color: var(--x-check-focus-border-color);
+      --x-check-border-color-opacity: var(--x-check-focus-border-color-opacity, 75%);
+      --x-check-outline-color-opacity: var(--x-check-focus-outline-opacity, 20%);
+      --x-check-outline-offset: var(--x-check-focus-outline-offset);
+    }
+
+    &:disabled {
+      --x-check-background-color: var(--x-check-disabled-background-color, currentColor);
+      --x-check-background-color-mix: var(--x-check-disabled-background-color-mix, transparent);
+      --x-check-background-color-opacity: var(--x-check-disabled-background-color-opacity, 5%);
+      --x-check-border-color: var(--x-check-disabled-border-color, currentColor);
+      --x-check-border-color-mix: var(--x-check-disabled-border-color-mix, transparent);
+      --x-check-border-color-opacity: var(--x-check-disabled-border-color-opacity, 15%);
+
+      cursor: not-allowed;
+    }
+
+    &:where([type="checkbox"]):indeterminate {
+      --x-check-icon: var(--mask-indeterminate);
+    }
+
+    &:is(:checked, [type="checkbox"]:indeterminate) {
+      --x-check-background-color: var(--x-check-checked-background-color);
+      --x-check-background-color-opacity: 100%;
+      --x-check-border-color-opacity: 0%;
+
+      &:disabled {
+        opacity: var(--x-check-checked-disabled-opacity, 75%);
+      }
+
+      &::before {
+        opacity: 100%;
+        transform: scale(1);
+      }
+    }
+  }
+}

package/src/components/check/invalid.css

@@ -0,0 +1,9 @@
+.x-check {
+  &.invalid, :user-invalid, .validated & :invalid {
+    --x-check-border-color: var(--x-check-invalid-border-color, var(--color-error));
+    --x-check-outline-color: var(--x-check-invalid-outline-color, var(--color-error));
+    --x-check-background-color: var(--x-check-invalid-background-color, var(--color-error));
+    --x-check-background-color-opacity: var(--x-check-invalid-background-color-opacity, 15%);
+    --x-check-border-color-opacity: var(--x-check-invalid-border-color-opacity, 100%);
+  }
+}

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

@@ -0,0 +1,13 @@
+:root, :host {
+  --x-check-size: 1.25rem;
+  --x-check-icon-size: 1.125rem;
+  --x-check-icon: var(--mask-check);
+  --x-check-gap: var(--spacing-md);
+  --x-check-font-size: var(--font-size-sm);
+  --x-check-line-height: calc(1em + 0.25rem);
+  --x-check-border-radius: var(--radius-md);
+  --x-check-border-width: 1px;
+  --x-check-background-color: currentColor;
+  --x-check-border-color: currentColor;
+  --x-check-outline-width: 2px;
+}

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

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

package/src/components/color/default.css

@@ -0,0 +1,36 @@
+.x-color {
+  --x-color-outline-color: var(--color-accent);
+
+  display: inline-flex;
+
+  :where(input) {
+    inline-size: var(--x-color-size);
+    block-size: var(--x-color-size);
+    border-radius: var(--x-color-border-radius);
+    outline:
+      var(--x-color-outline-width, 1px) solid
+      color-mix(
+        in var(--x-color-outline-color-space, srgb),
+        var(--x-color-outline-color) var(--x-color-outline-color-opacity, 0%),
+        var(--x-color-outline-color-mix, transparent)
+      );
+    outline-offset: var(--x-color-outline-offset);
+    display: inline-grid;
+
+    &::before, &::after {
+      border: 1px solid transparent;
+      border-radius: inherit;
+      grid-area: 1/-1;
+      content: "";
+    }
+
+    &::before {
+      background-color: var(--x-color-primary);
+    }
+
+    &::after {
+      background-color: var(--x-color-secondary);
+      clip-path: polygon(100% 0, 100% 100%, 0 100%);
+    }
+  }
+}

package/src/components/color/index.css

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

package/src/components/color/interactive.css

@@ -0,0 +1,36 @@
+.x-color {
+  :where(input) {
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-duration: var(--default-transition-duration);
+
+    &:disabled {
+      cursor: not-allowed;
+
+      &::before, &::after {
+        opacity: var(--x-color-disabled-opacity, 50%);
+      }
+    }
+
+    &:enabled {
+      &:hover {
+        --x-color-outline-color-opacity: var(--x-color-hover-outline-color-opacity);
+        --x-color-outline-offset: var(--x-color-hover-outline-offset);
+      }
+
+      &:focus-visible {
+        --x-color-outline-color-opacity: var(--x-color-focus-outline-color-opacity, 50%);
+        --x-color-outline-offset: var(--x-color-focus-outline-offset, 3px);
+      }
+
+      &:checked {
+        --x-color-outline-color-opacity: var(--x-color-checked-outline-color-opacity, 100%);
+        --x-color-outline-offset: var(--x-color-focus-outline-offset, 3px);
+
+        &:focus-visible {
+          outline-style: dashed;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+:root, :host {
+  --x-color-primary: currentColor;
+  --x-color-secondary: transparent;
+  --x-color-size: 1.5rem;
+  --x-color-border-radius: var(--radius-full);
+  --x-color-outline-width: 1px;
+}

package/src/{ui/title → components/color}/readme.md

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

package/src/components/compare/default.css

@@ -1,6 +1,6 @@
-.c-compare {
-  --c-compare-position: 50%;
-  --c-compare-clip-path: polygon(0% 0, var(--c-compare-position) 0%, var(--c-compare-position) 100%, 0 100%);
+.x-compare {
+  --x-compare-position: 50%;
+  --x-compare-clip-path: polygon(0% 0, var(--x-compare-position) 0%, var(--x-compare-position) 100%, 0 100%);
 
   display: grid;
   overflow: hidden;
@@ -15,7 +15,7 @@
 
   &::before {
     background-color: var(--color-accent);
-    inset-inline-start: var(--c-compare-position);
+    inset-inline-start: var(--x-compare-position);
     inline-size: 1px;
     content: "";
   }
@@ -23,18 +23,17 @@
   > :where(input) {
     pointer-events: auto;
     cursor: grab;
-    opacity: 0;
+    opacity: 0%;
 
-    &:is(:focus-visible, :active) {
-      ~ .ui-btn {
-        --tw-bg-mix: var(--ui-btn-hover-bg-mix, var(--color-dark));
-        --tw-bg-opacity: 0.8;
-      }
+    &: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 ~ .ui-btn {
-      --ui-btn-outline-offset: 2px;
-      --tw-outline-opacity: 0.5;
+    &: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 {
@@ -42,13 +41,13 @@
     }
   }
 
-  > :where(.ui-btn) {
-    inset-inline-start: var(--c-compare-position);
-    margin-inline-start: calc(var(--ui-btn-width) / 2 * -1);
+  > :where(.x-button) {
+    inset-inline-start: var(--x-compare-position);
+    margin-inline-start: calc(var(--x-button-width) / 2 * -1);
     margin-block: auto;
   }
 
-  > :where(.ui-image) {
+  > :where(.x-image) {
     display: grid;
     z-index: 0;
 
@@ -58,7 +57,7 @@
       grid-area: 1/1;
 
       &:first-child {
-        clip-path: var(--c-compare-clip-path);
+        clip-path: var(--x-compare-clip-path);
         position: relative;
       }
     }

package/src/components/compare/index.js

@@ -5,8 +5,8 @@
  */
 export const setPosition = ({ currentTarget }, options = {}) => {
     const { selector, positionProperty } = {
-        selector: '.c-compare',
-        positionProperty: '--c-compare-position',
+        selector: '.x-compare',
+        positionProperty: '--x-compare-position',
         ...options
     }
 

package/src/components/control/color.css

@@ -0,0 +1,24 @@
+.x-control {
+  > :where(input) {
+    &::-webkit-color-swatch-wrapper {
+      inline-size: var(--x-control-color-swatch-width);
+      block-size: var(--x-control-color-swatch-height);
+      padding: 0;
+    }
+
+    &::-moz-color-swatch {
+      inline-size: var(--x-control-color-swatch-width);
+      block-size: var(--x-control-color-swatch-height);
+      border-radius: var(--x-control-color-swatch-border-radius);
+      margin: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border-radius: var(--x-control-color-swatch-border-radius);
+    }
+
+    &[type="color"] ~ label {
+      margin-inline-start: calc(var(--x-control-padding-inline) + var(--x-control-color-swatch-width));
+    }
+  }
+}

package/src/components/control/default.css

@@ -0,0 +1,74 @@
+.x-control {
+  display: grid;
+  block-size: var(--x-control-height);
+  font-family: var(--x-control-font-family);
+  font-weight: var(--x-control-font-weight);
+  font-size: var(--x-control-font-size);
+  letter-spacing: var(--x-control-letter-spacing);
+  color: var(--x-control-color);
+  border-radius: var(--x-control-border-radius);
+  background-color:
+    color-mix(
+      in var(--x-control-background-color-space, srgb),
+      var(--x-control-background-color) var(--x-control-background-color-opacity, 100%),
+      var(--x-control-background-color-mix, transparent)
+    );
+  border:
+    var(--x-control-border-width) solid
+    color-mix(
+      in var(--x-control-border-color-space, srgb),
+      var(--x-control-border-color) var(--x-control-border-color-opacity, 15%),
+      var(--x-control-border-color-mix, transparent)
+    );
+  outline:
+    var(--x-control-outline-width) solid
+    color-mix(
+      in var(--x-control-outline-color-space, srgb),
+      var(--x-control-outline-color, var(--color-accent)) var(--x-control-outline-color-opacity, 0%),
+      var(--x-control-outline-color-mix, transparent)
+    );
+  outline-offset: var(--x-control-outline-offset);
+  grid-template:
+    [x-control-start] calc(var(--x-control-padding-block) - var(--x-control-border-width))
+    [x-control-padding] 1fr
+    calc(var(--x-control-padding-block) - var(--x-control-border-width)) [x-control-end] /
+    [x-control-start] var(--x-control-padding-inline)
+    [x-control-padding] 1fr
+    var(--x-control-padding-inline) [x-control-end];
+
+  &:has(textarea) {
+    height: auto;
+  }
+
+  > :where(*) {
+    grid-area: x-control-padding;
+    align-self: center;
+  }
+
+  > :where(input, textarea, select) {
+    padding-block: var(--x-control-padding-block);
+    padding-inline: calc(var(--x-control-padding-inline) + var(--x-control-padding-inline-start, 0px)) calc(var(--x-control-padding-inline) + var(--x-control-padding-inline-end, 0px));
+    grid-area: x-control;
+    text-overflow: ellipsis;
+    overflow: clip;
+    align-self: stretch;
+    align-items: center;
+    border-radius: inherit;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  > :where(input, textarea) {
+    &::placeholder {
+      color: var(--x-control-placeholder-color);
+      opacity: var(--x-control-placeholder-opacity);
+    }
+  }
+
+  > :where(textarea) {
+    min-block-size: var(--x-control-height-textarea);
+    resize: vertical;
+  }
+}

package/src/components/control/file.css

@@ -0,0 +1,27 @@
+.x-control:where(:has([type="file"])) {
+  overflow: clip;
+
+  > :where([type="file"]) {
+    &::file-selector-button {
+      all: unset;
+      background-color:
+        color-mix(
+          in var(--x-control-file-background-color-space, srgb),
+          var(--x-control-file-background-color, currentColor) var(--x-control-file-background-color-opacity, 15%),
+          var(--x-control-file-background-color-mix, transparent)
+        );
+      block-size: calc(var(--x-control-height) - var(--x-control-border-width) * 2);
+      padding-inline: var(--x-control-padding-inline);
+      margin-inline: calc(var(--x-control-padding-inline) * -1) var(--x-control-padding-inline);
+      margin-block-start: calc(var(--x-control-padding-block) * -1);
+      border-start-end-radius: var(--x-control-border-radius);
+      border-end-end-radius: var(--x-control-border-radius);
+      transition: var(--transition-background);
+      cursor: pointer;
+    }
+
+    &:is(:hover, :focus) {
+      --x-control-file-background-color-opacity: 20%;
+    }
+  }
+}

package/src/components/control/floating-interactive.css

@@ -0,0 +1,13 @@
+.x-control:where(:has(:not([type="color"]) ~ label)) {
+  --x-control-label-focus-opacity: 50%;
+  --x-control-placeholder-color: transparent;
+
+  > :where(input, textarea, select) {
+    &:is(:focus, :not(:placeholder-shown)) {
+      ~ label {
+        transform: translateY(calc(var(--x-control-label-translate-y) * -1)) scale(var(--x-control-label-scale));
+        opacity: var(--x-control-label-focus-opacity);
+      }
+    }
+  }
+}