winduum 1.2.1 → 2.0.0-next.10

package/src/components/control/floating.css

@@ -0,0 +1,36 @@
+.x-control:where(:has(:not([type="color"]) ~ label)) {
+  > :where(label) {
+    margin-inline: var(--x-control-padding-inline-start, 0) var(--x-control-padding-inline-end, 0);
+    transition: var(--transition-transform), var(--transition-color), var(--transition-opacity);
+    pointer-events: none;
+    transform-origin: 0 50%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: clip;
+    will-change: transform;
+  }
+
+  > :where(textarea) {
+    padding-block-start: calc(var(--x-control-padding-block) + var(--x-control-label-translate-y) * var(--x-control-label-scale));
+
+    + :where(label) {
+      align-self: start;
+    }
+  }
+
+  > :where(input, select) {
+    padding-block: calc(var(--x-control-padding-block) + var(--x-control-label-translate-y) * var(--x-control-label-scale)) calc(var(--x-control-padding-block) - var(--x-control-label-translate-y) * var(--x-control-label-scale));
+
+    &::-webkit-calendar-picker-indicator,
+    &::-webkit-search-cancel-button,
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      transform: translateY(calc(var(--x-control-label-translate-y) * var(--x-control-label-scale) * -1));
+    }
+  }
+
+  &:where(:has(:required)) :where(label)::after {
+    color: var(--x-control-required-color, var(--color-error));
+    content: " *";
+  }
+}

package/src/components/control/icon.css

@@ -0,0 +1,32 @@
+.x-control {
+  --x-control-start: calc(var(--x-control-icon-count-start, 1) * (var(--x-control-icon-size) + var(--x-control-icon-gap)) - var(--x-control-icon-gap));
+  --x-control-end: calc(var(--x-control-icon-count-end, 1) * (var(--x-control-icon-size) + var(--x-control-icon-gap)) - var(--x-control-icon-gap));
+
+  &:has(textarea) {
+    :where(.me-auto), :where(.ms-auto) {
+      align-self: start;
+    }
+  }
+
+  &:has(.me-auto) {
+    --x-control-padding-inline-start: calc(var(--x-control-start) + var(--x-control-padding-inline));
+  }
+
+  &:has(.ms-auto) {
+    --x-control-padding-inline-end: calc(var(--x-control-end) + var(--x-control-padding-inline));
+  }
+
+  &:has(.me-auto > *:nth-child(2)) {
+    --x-control-icon-count-start: 2;
+  }
+
+  &:has(.ms-auto > *:nth-child(2)) {
+    --x-control-icon-count-end: 2;
+  }
+
+  :where(.me-auto), :where(.ms-auto) {
+    gap: var(--x-control-icon-gap);
+    display: flex;
+    align-items: center;
+  }
+}

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

@@ -1,16 +1,15 @@
-@import "default-props.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 "interactive-props.css";
 @import "invalid.css";
-@import "color-props.css";
 @import "color.css";
 @import "icon.css";
-@import "icon-props.css";
 @import "file.css";
-@import "floating-props.css";
 @import "floating.css";
 @import "floating-interactive.css";
-@import "select-props.css";
 @import "select.css";
 @import "select-multiple.css";

package/src/components/control/interactive.css

@@ -0,0 +1,19 @@
+.x-control {
+  transition-property: var(--default-transition-property);
+  transition-timing-function: var(--transition-timing-function-in-out);
+  transition-duration: var(--default-transition-duration);
+
+  &:focus-within {
+    --x-control-border-color: var(--x-control-focus-border-color, var(--color-accent));
+    --x-control-border-color-opacity: var(--x-control-focus-border-color-opacity, 100%);
+    --x-control-outline-offset: var(--x-control-focus-outline-offset);
+    --x-control-outline-color-opacity: var(--x-control-focus-outline-color-opacity, 20%);
+  }
+
+  &.disabled, &:has(:where(input, textarea, select):disabled) {
+    --x-control-background-color: var(--x-control-disabled-background-color, currentColor);
+    --x-control-background-color-opacity: var(--x-control-disabled-background-color-opacity, 5%);
+    --x-control-border-color: var(--x-control-disabled-border-color, currentColor);
+    --x-control-border-color-opacity: var(--x-control-disabled-border-color-opacity);
+  }
+}

package/src/components/control/invalid.css

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

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

@@ -0,0 +1,5 @@
+:root, :host {
+  --x-control-color-swatch-width: 1.25rem;
+  --x-control-color-swatch-height: 1.25rem;
+  --x-control-color-swatch-border-radius: var(--radius-full);
+}

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

@@ -0,0 +1,16 @@
+:root, :host {
+  --x-control-height: 3rem;
+  --x-control-height-textarea: 8rem;
+  --x-control-padding-inline: 0.75rem;
+  --x-control-padding-block: 0.75rem;
+  --x-control-border-width: 1px;
+  --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-sm);
+  --x-control-background-color: transparent;
+  --x-control-color: currentColor;
+  --x-control-outline-width: 3px;
+  --x-control-placeholder-color: currentColor;
+  --x-control-placeholder-opacity: 50%;
+}

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

@@ -0,0 +1,4 @@
+:root, :host {
+  --x-control-label-translate-y: 0.625rem;
+  --x-control-label-scale: 0.8;
+}

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

@@ -0,0 +1,4 @@
+:root, :host {
+  --x-control-icon-size: 1.25rem;
+  --x-control-icon-gap: 0.375rem;
+}

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

@@ -0,0 +1,4 @@
+:root, :host {
+  --x-control-select-icon-size: 1.5rem;
+  --x-control-select-icon-margin-inline-end: -0.25rem;
+}

package/src/components/control/readme.md

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

package/src/{ui → components}/control/select-multiple.css

@@ -1,5 +1,5 @@
-.ui-control:has(select[multiple]) {
-  --ui-control-height: auto;
+.x-control:has(select[multiple]) {
+  --x-control-height: auto;
 
   select {
     overflow-y: auto;

package/src/components/control/select.css

@@ -0,0 +1,23 @@
+.x-control:has(select:not([multiple])) {
+  --x-control-padding-inline-end: calc(var(--x-control-end) + var(--x-control-padding-inline) + var(--x-control-select-icon-margin-inline-end));
+
+  &:has(.ms-auto) {
+    --x-control-icon-count-end: 2;
+  }
+
+  &::after {
+    inline-size: var(--x-control-select-icon-size);
+    block-size: var(--x-control-select-icon-size);
+    mask: var(--mask-angle-down);
+    margin-inline: auto var(--x-control-select-icon-margin-inline-end);
+    grid-area: x-control-padding;
+    background-color: currentColor;
+    pointer-events: none;
+    align-self: center;
+    content: "";
+  }
+
+  :where(.ms-auto) {
+    margin-inline-end: var(--x-control-select-icon-size);
+  }
+}

package/src/components/dialog/content.css

@@ -1,13 +1,13 @@
-.c-dialog-content {
-  background-color: var(--color-body-primary);
-  border-radius: var(--rounded-3xl);
-  padding: var(--c-dialog-content-py) var(--c-dialog-content-px);
-  inline-size: min(100%, var(--c-dialog-content-width));
+.x-dialog-content {
+  background-color: var(--x-dialog-content-background-color, var(--color-body-primary));
+  border-radius: var(--x-dialog-content-border-radius, var(--radius-3xl));
+  padding: var(--x-dialog-content-padding-block) var(--x-dialog-content-padding-inline);
+  inline-size: min(100%, var(--x-dialog-content-inline-size));
   transition: var(--transition-transform), var(--transition-opacity);
   margin: auto;
 
-  :where(dialog:not([open])) & {
+  :where(dialog[data-closed]) & {
     transform: translateY(-2rem);
-    opacity: 0;
+    opacity: 0%;
   }
 }

package/src/components/dialog/default.css

@@ -1,9 +1,12 @@
-.c-dialog {
-  --tw-bg-opacity: var(--c-dialog-bg-opacity);
-
-  z-index: var(--z-30);
-  padding: var(--c-dialog-py) var(--c-dialog-px);
-  background-color: color-mix(in var(--space), var(--c-dialog-bg) calc(var(--tw-bg-opacity) * 100%), transparent);
+.x-dialog {
+  z-index: var(--x-dialog-z-index, var(--z-index-30));
+  padding: var(--x-dialog-padding-block) var(--x-dialog-padding-inline);
+  background-color:
+    color-mix(
+      in var(--x-dialog-background-color-space, srgb),
+      var(--x-dialog-background-color) var(--x-dialog-background-color-opacity),
+      var(--x-dialog-background-color-mix, transparent)
+    );
   transition: var(--transition-background);
   display: flex;
   position: fixed;
@@ -12,18 +15,17 @@
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
 
-  &, &::backdrop {
-    visibility: hidden;
+  &::backdrop, &:not([open]) {
+    display: none;
   }
 
-  &:not([open]) {
+  &[data-closed] {
     background-color: transparent;
-    pointer-events: none;
   }
 }
 
-html:has(.c-dialog.visible) {
-  padding-inline-end: var(--c-dialog-scrollbar-width);
+html:has(.x-dialog[open]) {
+  padding-inline-end: var(--default-scrollbar-width);
   scrollbar-width: none;
 
   &::-webkit-scrollbar {

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.d.ts

@@ -1,26 +1,11 @@
 export interface DefaultOptions {
     remove?: boolean | null
     closable?: boolean | null
-    openClass?: string
+    openAttribute?: string
+    closedAttribute?: string
     scrollbarWidthProperty?: string
 }
 
-export interface InsertDialogOptions {
-    selector?: string | null
-    class?: string | null
-    append?: boolean | null
-    show?: DefaultOptions
-}
-
-export interface FetchDialogOptions {
-    url: string
-    insert?: InsertDialogOptions
-}
-
 export const defaultOptions: DefaultOptions
-export function dialogSelector(selector: string): HTMLDialogElement
-export function dismissDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
-export function showDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
-export function closeDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
-export function insertDialog(content: string, options?: InsertDialogOptions): Promise<void>
-export function fetchDialog({ url, insert }: FetchDialogOptions): Promise<void>
+export function showDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>
+export function closeDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>

package/src/components/dialog/index.js

@@ -1,48 +1,24 @@
-import { animationsFinished, nextRepaint } from '../../common.js'
+import { animationsFinished } from '../../common.js'
 
 /**
  * @type {import("./").DefaultOptions}
 */
 export const defaultOptions = {
-    openClass: 'visible',
-    scrollbarWidthProperty: '--c-dialog-scrollbar-width',
+    closedAttribute: 'data-closed',
+    openAttribute: 'data-open',
+    scrollbarWidthProperty: '--default-scrollbar-width',
+    closable: true,
     remove: false
 }
 
-/**
- * @param {string} selector.
- * @return HTMLDialogElement
- */
-export const dialogSelector = selector => document.querySelectorAll(selector)[document.querySelectorAll(selector).length - 1]
-
-/**
- * Dismisses a dialog.
- * @param {HTMLDialogElement} element - The dialog element to dismiss.
- * @param {import("./").DefaultOptions} options - The options for closing the dialog.
- * @returns Promise<void>
- */
-export const dismissDialog = async (element, options = defaultOptions) => {
-    await animationsFinished(element)
-    element.inert = true
-    element.classList.remove(options.openClass)
-    element.dispatchEvent(new CustomEvent('c-dialog:dismiss'))
-
-    options.remove && element.remove()
-
-    if (!document.querySelector('dialog[open]')) {
-        document.documentElement.style.removeProperty(options.scrollbarWidthProperty)
-    }
-}
-
 /**
  * Shows a dialog.
- * @param {HTMLDialogElement | import("./").DialogElement} element - The dialog element to show.
+ * @param {HTMLDialogElement | HTMLElement} element - The dialog element to show.
  * @param {import("./").DefaultOptions} options - The options for showing the dialog.
  * @returns Promise<void>
  */
 export const showDialog = async (element, options = {}) => {
     options = {
-        closable: true,
         ...defaultOptions,
         ...options
     }
@@ -50,11 +26,9 @@ export const showDialog = async (element, options = {}) => {
     document.documentElement.style.setProperty(options.scrollbarWidthProperty, `${window.innerWidth - document.body.clientWidth}px`)
 
     if (!element?._dialogHasEvents) {
-        element.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                e.preventDefault()
-                options.closable && closeDialog(element, options)
-            }
+        element.addEventListener('cancel', e => {
+            e.preventDefault()
+            options.closable && closeDialog(element, options)
         })
 
         element.addEventListener('click', ({ target }) => {
@@ -66,19 +40,21 @@ export const showDialog = async (element, options = {}) => {
         element._dialogHasEvents = true
     }
 
-    element.inert = false
-    element.classList.add(options.openClass)
+    element.setAttribute(options.closedAttribute, '')
+
+    element.showModal()
+    element.scroll(0, 0)
 
-    await nextRepaint()
+    element.removeAttribute(options.closedAttribute)
+    await animationsFinished(element.lastElementChild)
+    element.setAttribute(options.openAttribute, '')
 
-    window.HTMLDialogElement
-        ? element.showModal()
-        : element.setAttribute('open', '')
+    element.dispatchEvent(new CustomEvent('x-dialog:show'))
 }
 
 /**
  * Closes and dismisses a dialog.
- * @param {HTMLDialogElement} element - The dialog element to dismiss.
+ * @param {HTMLDialogElement | HTMLElement} element - The dialog element to dismiss.
  * @param {import("./").DefaultOptions} options - The options for closing the dialog.
  * @returns Promise<void>
  */
@@ -88,48 +64,13 @@ export const closeDialog = async (element, options = {}) => {
         ...options
     }
 
-    window.HTMLDialogElement
-        ? element.close()
-        : element.removeAttribute('open')
+    element.removeAttribute(options.openAttribute)
+    element.setAttribute(options.closedAttribute, '')
 
-    await dismissDialog(element, options)
-}
-
-/**
- * Inserts a dialog into the DOM.
- * @param {string} content - The HTML content to insert into the dialog.
- * @param {import("./").InsertDialogOptions} options - The options for inserting the dialog.
- * @returns Promise<void>
- */
-export const insertDialog = async (content, options = {}) => {
-    options = {
-        selector: 'dialog.inserted',
-        class: 'inserted',
-        append: false,
-        show: {
-            remove: true
-        },
-        ...options
-    }
+    await animationsFinished(element.lastElementChild)
 
-    const dialog = new DOMParser().parseFromString(content, 'text/html').body.firstElementChild
-    dialog.classList.add(options.class)
+    element.close()
 
-    if (!dialogSelector(options.selector) || options.append) {
-        document.body.insertAdjacentHTML('beforeend', dialog.outerHTML)
-    } else {
-        dialogSelector(options.selector).outerHTML = dialog.outerHTML
-    }
-
-    await showDialog(dialogSelector(options.selector), options.show)
-}
-
-/**
- * Fetches a dialog from a URL and inserts it into the DOM.
- * @param {import("./").FetchDialogOptions} options - The options for fetching and inserting the dialog.
- */
-export const fetchDialog = async ({ url, insert = {} }) => {
-    await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
-        .then(response => response.json())
-        .then(async ({ content }) => await insertDialog(content, insert))
+    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 @@
-.c-drawer-content {
-  width: var(--c-drawer-content-width);
-  height: var(--c-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 @@
-.c-drawer {
-  --tw-bg-opacity: 0;
-
-  z-index: var(--z-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(--c-drawer-bg-opacity) * 100%), transparent);
   scrollbar-width: none;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
@@ -17,7 +20,7 @@
 
   &::after {
     content: "";
-    min-width: 100vw;
+    min-inline-size: 100vw;
     scroll-snap-align: end;
   }
 

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('c-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('c-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);
 ```