winduum 1.2.1 → 2.0.0-next.10

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

@@ -1,7 +1,7 @@
 import { FlipOptions, Middleware, OffsetOptions, Placement, ShiftOptions } from "@floating-ui/dom";
 
 export interface ShowPopoverOptions {
-    visibleClass?: string
+    openAttribute?: string
     compute?: boolean
     placement?: Placement
     middleware?: Array<Middleware | null | undefined | false>
@@ -10,6 +10,10 @@ export interface ShowPopoverOptions {
     shift?: ShiftOptions
 }
 
+export interface HidePopoverOptions {
+    openAttribute?: string
+}
+
 export function showPopover(element: HTMLElement | Element, options?: ShowPopoverOptions): Promise<void>
 export function hidePopover(element: HTMLElement | Element): Promise<void>
 export function togglePopover(element: HTMLElement | Element, options?: ShowPopoverOptions): Promise<void>

package/src/components/popover/index.js

@@ -1,4 +1,4 @@
-import { animationsFinished } from '../../common.js'
+import { animationsFinished, nextRepaint } from '../../common.js'
 
 /**
  * @param {HTMLElement | Element} element
@@ -6,13 +6,11 @@ import { animationsFinished } from '../../common.js'
  * @param {import("./").ShowPopoverOptions} options
  * @returns Promise<void>
  */
-export const computePopover = async (element, popoverElement, options) => {
+export const computePopover = async (element, popoverElement, options = {}) => {
     const { computePosition, flip, shift, offset } = await import('@floating-ui/dom')
 
     popoverElement.classList.remove(popoverElement._placement)
 
-    popoverElement.style.minWidth = `${element.offsetWidth / 16}rem`
-
     await computePosition(element, popoverElement, {
         placement: options?.placement,
         middleware: options?.middleware ?? [offset(12 ?? options?.offset), flip(options?.flip), shift({ padding: 8, ...options?.shift })]
@@ -22,18 +20,19 @@ export const computePopover = async (element, popoverElement, options) => {
         })
 
         popoverElement._placement = placement
-        popoverElement.classList.add(popoverElement._placement, options?.visibleClass ?? 'in')
+        popoverElement.classList.add(popoverElement._placement)
     })
 }
 
 /**
  * @param {HTMLElement | Element} element - The HTML content to insert into the dialog.
+ * @param {import("./").HidePopoverOptions} options
  * @returns Promise<void>
  */
-export const hidePopover = async (element) => {
+export const hidePopover = async (element, options = { openAttribute: 'data-open' }) => {
     const popoverElement = document.getElementById(element.getAttribute('popovertarget'))
 
-    popoverElement.classList.remove('in')
+    popoverElement.removeAttribute(options?.openAttribute)
     await animationsFinished(popoverElement)
     popoverElement._cleanup && popoverElement._cleanup()
     popoverElement.hidePopover && popoverElement.hidePopover()
@@ -48,7 +47,7 @@ export const hidePopover = async (element) => {
  */
 export const showPopover = async (element, options) => {
     options = {
-        visibleClass: 'in',
+        openAttribute: 'data-open',
         compute: true,
         ...options
     }
@@ -64,8 +63,11 @@ export const showPopover = async (element, options) => {
 
     popoverElement.showPopover && popoverElement.showPopover()
 
+    await nextRepaint()
+
+    popoverElement.setAttribute(options?.openAttribute, '')
+
     if (!options.compute) {
-        popoverElement.classList.add(options.visibleClass)
         return
     }
 

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

@@ -0,0 +1,46 @@
+.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(--x-progress-bar-background-color, var(--color-accent));
+    transition: all var(--x-progress-transition-duration) var(--transition-timing-function-in-out);
+    border-radius: inherit;
+  }
+
+  &::-webkit-progress-bar {
+    background-color: transparent;
+    border-radius: inherit;
+  }
+
+  &::-webkit-progress-inner-element {
+    border-radius: inherit;
+  }
+
+  &::-webkit-progress-value {
+    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 {
+    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;
+    background-size: 150%;
+
+    &::-moz-progress-bar {
+      background-color: transparent;
+    }
+  }
+}

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

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

package/src/{ui → components}/progress/meter.css

@@ -1,4 +1,4 @@
-.ui-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

@@ -0,0 +1,33 @@
+# [Progress](https://winduum.dev/docs/components/progress.html)
+
+## Installation
+```shell
+npm i winduum
+```
+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/components/progress/index.css" layer(components);
+```
+
+or modular (you can use your own props or CSS)
+
+```css
+@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
+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/progress/assets/index.css" layer(components);
+```
+
+### Docs
+Visit [docs](https://winduum.dev/docs/components/progress.html) to learn more about usage examples.

package/src/components/progress/sm.css

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

package/src/components/range/default.css

@@ -0,0 +1,99 @@
+.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(--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(--x-range-thumb-size);
+  display: grid;
+
+  :where(input) {
+    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(--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(--x-range-track-block-size);
+      border-radius: var(--radius-full);
+      background: var(--x-range-track-background);
+    }
+
+    &::-webkit-slider-thumb {
+      inline-size: var(--x-range-thumb-size);
+      block-size: var(--x-range-thumb-size);
+      background-color: var(--x-range-thumb-background-color);
+      border-radius: var(--radius-full);
+      border: var(--x-range-thumb-border-width) solid var(--x-range-thumb-border-color);
+      outline:
+        var(--x-range-thumb-outline-width) solid
+        color-mix(
+          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(--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(--x-range-thumb-cursor, grab);
+      appearance: none;
+      pointer-events: auto;
+
+      &:active {
+        --x-range-thumb-cursor: grabbing;
+        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
+      }
+    }
+
+    &::-moz-range-thumb {
+      inline-size: var(--x-range-thumb-size);
+      block-size: var(--x-range-thumb-size);
+      background-color: var(--x-range-thumb-background-color);
+      border-radius: var(--radius-full);
+      border: var(--x-range-thumb-border-width) solid var(--x-range-thumb-border-color);
+      outline:
+        var(--x-range-thumb-outline-width) solid
+        color-mix(
+          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(--x-range-thumb-cursor, grab);
+      appearance: none;
+      pointer-events: auto;
+
+      &:active {
+        --x-range-thumb-cursor: grabbing;
+        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
+      }
+    }
+
+    &:focus-visible {
+      &::-webkit-slider-thumb {
+        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
+      }
+
+      &::-moz-range-thumb {
+        --x-range-thumb-outline-color-opacity: var(--x-range-thumb-focus-outline-opacity);
+      }
+    }
+  }
+}

package/src/{ui → 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/{ui → components}/range/index.js

@@ -4,7 +4,7 @@
  * @returns void
  */
 export const setTrackProperty = ({ element, value, max }, track = 'start') => {
-    element.style.setProperty('--ui-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: '.ui-range',
+        selector: '.x-range',
         track: 'start',
         ...options
     }

package/src/components/range/multi.css

@@ -0,0 +1,22 @@
+.x-range {
+  :where(input) {
+    &:not(:only-of-type) {
+      --x-range-track-background:
+        linear-gradient(
+          to right,
+          transparent 0%,
+          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%
+        );
+
+      pointer-events: none;
+
+      ~ input {
+        background: transparent;
+      }
+    }
+  }
+}

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

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

@@ -1,11 +1,11 @@
-.ui-range:where(.vertical) {
-  min-inline-size: var(--ui-range-thumb-size);
+.x-range:where(.vertical) {
+  min-inline-size: var(--x-range-thumb-size);
   container-type: size;
 
   :where(input) {
     transform: rotate(-90deg);
     width: 100cqh;
-    inset-block-start: 50%;
+    inset-block-start: calc(50% - 50cqw / 2);
     inset-inline-start: calc(50% * -1 + 50cqw);
   }
 }

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

@@ -1,41 +1,41 @@
-.ui-rating {
+.x-rating {
   display: flex;
   align-items: center;
 
   :where(input) {
-    color: var(--ui-rating-color);
+    inline-size: var(--x-rating-inline-size);
+    block-size: var(--x-rating-block-size);
+    color: var(--x-rating-color);
+    opacity: var(--x-rating-opacity);
     transition: var(--transition-opacity);
-    opacity: var(--c-rating-opacity);
     display: grid;
     box-sizing: content-box;
-    width: 1.25rem;
-    height: 1.25rem;
 
     &:not(:last-child) {
-      border-inline-end-width: var(--c-rating-gap);
+      border-inline-end-width: var(--x-rating-gap);
       border-inline-color: transparent;
     }
 
     &::before {
-      mask: var(--mask-star);
+      mask: var(--x-rating-icon);
       background-color: currentColor;
       content: "";
     }
   }
 
   &:has(:checked) input {
-    opacity: 1;
+    opacity: 100%;
 
     &:where(:checked ~ input) {
-      opacity: var(--c-rating-opacity);
+      opacity: var(--x-rating-opacity);
     }
   }
 
   &:hover input {
-    opacity: 1;
+    opacity: 100%;
 
     &:hover ~ input {
-      opacity: var(--c-rating-opacity);
+      opacity: var(--x-rating-opacity);
     }
   }
 }

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

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

package/src/components/rating/invalid.css

@@ -0,0 +1,5 @@
+.x-rating {
+  &.invalid, :user-invalid, .validated & :invalid {
+    --x-rating-color: var(--x-rating-invalid-color, var(--color-error));
+  }
+}

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

@@ -0,0 +1,8 @@
+:root, :host {
+  --x-rating-inline-size: 1.25rem;
+  --x-rating-block-size: 1.25rem;
+  --x-rating-color: var(--color-accent);
+  --x-rating-gap: 0.25rem;
+  --x-rating-opacity: 0.2;
+  --x-rating-icon: var(--mask-star);
+}

package/src/components/rating/readme.md

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

package/src/components/switch/default.css

@@ -0,0 +1,43 @@
+.x-switch {
+  font-weight: var(--x-switch-font-weight);
+  font-size: var(--x-switch-font-size);
+  line-height: var(--x-switch-line-height);
+  letter-spacing: var(--x-switch-letter-spacing);
+  gap: var(--x-switch-gap);
+  display: inline-flex;
+  text-wrap: pretty;
+
+  :where(input) {
+    inline-size: var(--x-switch-inline-size);
+    block-size: var(--x-switch-block-size);
+    padding: calc((var(--x-switch-block-size) - var(--x-switch-icon-size)) / 2);
+    border-radius: var(--x-switch-border-radius);
+    background-color:
+      color-mix(
+        in var(--x-switch-background-color-space, srgb),
+        var(--x-switch-background-color) var(--x-switch-background-color-opacity, 100%),
+        var(--x-switch-background-color-mix, transparent)
+      );
+    outline:
+      var(--x-switch-outline-width) solid
+      color-mix(
+        in var(--x-switch-outline-color-space, srgb),
+        var(--x-switch-outline-color) var(--x-switch-outline-color-opacity, 0%),
+        var(--x-switch-outline-color-mix, transparent)
+      );
+    outline-offset: var(--x-switch-outline-offset);
+    display: flex;
+    position: relative;
+    flex-shrink: 0;
+
+    &::before {
+      inline-size: var(--x-switch-icon-size);
+      block-size: var(--x-switch-icon-size);
+      background-color: var(--color-light);
+      transition: var(--transition-all);
+      border-radius: inherit;
+      margin-block: auto;
+      content: "";
+    }
+  }
+}

package/src/{ui/check → components/switch}/index.css

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