winduum 2.0.0-next.2 → 2.0.0-next.20

package/src/components/drawer/index.js

@@ -1,10 +1,12 @@
+import { nextRepaint } from '../../common.js'
+
 /**
  * @param {HTMLElement | Element} element
  * @param {number} distance
  * @param {'top' | 'left'} direction
  * @returns void
  */
-export const showDrawer = (element, distance = 0, direction = 'left') => {
+export const showDrawer = async (element, distance = 0, direction = 'left') => {
     element.scroll({ [direction]: distance })
 }
 
@@ -20,6 +22,17 @@ export const closeDrawer = (element, distance = element.scrollWidth, direction =
 
 /**
  * @param {HTMLElement | Element} element
+ * @param {number} distance
+ * @param {'top' | 'left'} direction
+ * @returns void
+ */
+export const scrollInitDrawer = async (element, distance = element.scrollWidth, direction = 'left') => {
+    element.scroll({ [direction]: distance, behavior: 'instant' })
+    await nextRepaint()
+}
+
+/**
+ * @param {HTMLDialogElement | Element} element
  * @param {import("./").ScrollDrawerOptions} options
  * @returns void
  */
@@ -49,6 +62,7 @@ export const scrollDrawer = (element, options = {}) => {
     if ((options.scrollDirection === options.scrollClose) && !element.inert) {
         element.classList.remove(...options.snapClass.split(/\s/))
         element.inert = true
+        element.close && element.close()
         element.dispatchEvent(new CustomEvent('x-drawer:close'))
     }
 }

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

@@ -2,6 +2,6 @@
   --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-inline-size: 100%;
   --x-drawer-content-block-size: 100%;
 }

package/src/components/field/default.css

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
 
-  .validated &:has(:invalid) {
+  &:has(:user-invalid) {
     :where(.x-info[hidden]) {
       display: revert;
     }

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

@@ -1,7 +1,7 @@
 export interface ValidateFormOptions {
     validateSelectors?: string
     validateOptions?: ValidateFieldOptions
-    submitterLoadingClass?: string
+    submitterLoadingAttribute?: string
 }
 
 export interface ValidateFieldOptions {
@@ -15,11 +15,11 @@ export interface ValidateFieldOptions {
     endParentSelector?: string
     endSelector?: string
     endContent?: string
-    validClass?: string
+    validAttribute?: string
     validIcon?: string | null
-    invalidClass?: string
+    invalidAttribute?: string
     invalidIcon?: string
-    activeClass?: string
+    activeAttribute?: string
 }
 
 export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void

package/src/components/form/index.js

@@ -7,7 +7,7 @@ export const validateForm = (event, options = {}) => {
     options = {
         validateSelectors: '.x-control, .x-check, .x-switch, .x-rating, .x-color',
         validateOptions: {},
-        submitterLoadingClass: 'loading',
+        submitterLoadingAttribute: 'data-loading',
         ...options
     }
 
@@ -18,7 +18,7 @@ export const validateForm = (event, options = {}) => {
         event.target.querySelector(':invalid').scrollIntoView({ behavior: 'smooth', block: 'center' })
         event.target.querySelector(':invalid').focus()
     } else {
-        event?.submitter?.classList.add(options.submitterLoadingClass)
+        event?.submitter?.setAttribute(options.submitterLoadingAttribute, '')
     }
 
     event.target.querySelectorAll(options.validateSelectors).forEach(element => {
@@ -43,11 +43,11 @@ export const validateField = (element, options = {}) => {
         endParentSelector: '.x-control',
         endSelector: '.ms-auto',
         endContent: '<div class="ms-auto"></div>',
-        validClass: 'valid',
+        validAttribute: 'data-valid',
         validIcon: null,
-        invalidClass: 'invalid',
+        invalidAttribute: 'data-invalid',
         invalidIcon: '<svg class="text-error validity" aria-hidden="true"><use href="#icon-exclamation-circle"></use></svg>',
-        activeClass: 'active',
+        activeAttribute: 'data-active',
         ...options
     }
 
@@ -71,23 +71,24 @@ export const validateField = (element, options = {}) => {
     }
 
     if (validationElement.value !== '') {
-        element.classList.add(options.activeClass)
+        element.setAttribute(options.activeAttribute, '')
     } else {
-        element.classList.remove(options.activeClass)
+        element.removeAttribute(options.activeAttribute)
     }
 
     if (!validationElement.outerHTML.match(options.ignoreMatch) && options.validate) {
-        element?.classList?.remove(options.validClass, options.invalidClass)
+        element?.removeAttribute(options.validAttribute)
+        element?.removeAttribute(options.invalidAttribute)
 
         infoParentElement?.querySelector(infoSelector)?.remove()
         endParentElement?.querySelector(endSelector)?.remove()
 
         if (validationElement.checkValidity()) {
-            element.classList.add(options.validClass)
+            element.setAttribute(options.validAttribute, '')
 
             insertIcon(options.validIcon)
         } else {
-            element.classList.add(options.invalidClass)
+            element.setAttribute(options.invalidAttribute, '')
 
             insertIcon(options.invalidIcon)
 

package/src/components/group/default.css

@@ -4,7 +4,7 @@
 
   &:has(.x-control) {
     > :where(.x-button) {
-      min-width: var(--x-control-height);
+      min-inline-size: var(--x-control-block-size);
       height: auto;
     }
 

package/src/components/image/default.css

@@ -13,7 +13,7 @@
 
   > :where(img, video, iframe, object, svg) {
     border-radius: inherit;
-    min-width: 100%;
+    min-inline-size: 100%;
     height: auto;
     object-fit: contain;
   }

package/src/components/popover/content.css

@@ -10,7 +10,7 @@
     translate(var(--tw-translate-x), var(--tw-translate-y))
     scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   will-change: transform;
-  width: max-content;
+  inline-size: max-content;
   position: absolute;
 
   &:where(.bottom), & {
@@ -86,7 +86,7 @@
     inset-block-start: 50%;
   }
 
-  &[popover]:not(.in) {
+  &[popover]:not([data-open]) {
     --tw-scale-x: var(--x-popover-content-scale-x);
     --tw-scale-y: var(--x-popover-content-scale-y);
 

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/range/default.css

@@ -38,8 +38,8 @@
     }
 
     &::-webkit-slider-thumb {
-      width: var(--x-range-thumb-size);
-      height: var(--x-range-thumb-size);
+      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);
@@ -63,8 +63,8 @@
     }
 
     &::-moz-range-thumb {
-      width: var(--x-range-thumb-size);
-      height: var(--x-range-thumb-size);
+      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);

package/src/components/rating/default.css

@@ -1,6 +1,14 @@
 .x-rating {
+  --x-rating-color: var(--color-accent);
+
   display: flex;
   align-items: center;
+  border-radius: var(--radius-full);
+
+  &:focus-within {
+    outline: 2px dotted var(--color-accent);
+    outline-offset: 3px;
+  }
 
   :where(input) {
     inline-size: var(--x-rating-inline-size);

package/src/components/rating/invalid.css

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

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

@@ -1,7 +1,6 @@
 :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/switch/invalid.css

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

package/src/components/tabs/index.css

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

package/src/components/tabs/list.css

@@ -0,0 +1,8 @@
+.x-tabs-list {
+  background-color: var(--x-tabs-list-background-color, var(--color-body-secondary));
+  gap: var(--x-tabs-list-gap, var(--spacing-xs));
+  padding: var(--x-tabs-list-padding, var(--spacing-xs));
+  border-radius: var(--x-tabs-list-border-radius, var(--radius));
+  display: flex;
+  inline-size: max-content;
+}

package/src/components/tabs/readme.md

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

package/src/components/text/default.css

@@ -170,8 +170,8 @@
       list-style-type: "";
 
       &::before {
-        width: var(--x-text-list-marker-size);
-        height: var(--x-text-list-marker-size);
+        inline-size: var(--x-text-list-marker-size);
+        block-size: var(--x-text-list-marker-size);
         inset-inline-start: var(--x-text-list-marker-inset-inline-start, -0.75em);
         inset-block-start: var(--x-text-list-marker-inset-block-start, 0.5lh);
         border:

package/src/components/toast/content.css

@@ -15,9 +15,4 @@
   align-items: center;
   display: flex;
   height: fit-content;
-
-  .x-text {
-    --x-text-font-size: var(--font-size-sm);
-    --x-text-line-height: calc(1em + 0.375rem);
-  }
 }

package/src/components/toast/default.css

@@ -13,16 +13,16 @@
     justify-content: flex-end;
   }
 
-  &.in {
+  &[data-open] {
     margin-block: var(--x-toaster-margin-block);
   }
 
-  &.in:where(:nth-last-child(-n+3)) {
+  &[data-open]:where(:nth-last-child(-n+3)) {
     visibility: visible;
     opacity: 100%;
   }
 
-  &.out {
+  &[data-closed] {
     visibility: hidden;
     opacity: 0%;
     height: 0;

package/src/components/toaster/default.css

@@ -9,4 +9,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
+
+  &:not(:has(> *)) {
+    display: none;
+  }
 }

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

@@ -1,30 +1,15 @@
 export interface ShowToastOptions {
-    visibleClass?: string
+    openAttribute?: string
     autoHide?: number | null
     heightProperty?: string
     close?: CloseToastOptions
 }
 
 export interface CloseToastOptions {
-    hiddenClass?: string
+    closedAttribute?: string
     heightProperty?: string
 }
 
-export interface InsertToasterOptions {
-    classes?: string
-}
-
-export interface InsertToastOptions {
-    classes?: string
-    title?: string
-    text?: string
-    start?: string
-    end?: string
-    show?: ShowToastOptions
-}
-
 export function closeToast(element: HTMLElement, options?: CloseToastOptions): Promise<void>
 export function showToast(element: HTMLElement, options?: ShowToastOptions): Promise<void>
-export function insertToaster(element: HTMLElement, options?: InsertToasterOptions): Promise<void>
-export function insertToast(element: HTMLElement, options?: InsertToastOptions): Promise<void>
 export function closeToaster(element: HTMLElement, options?: CloseToastOptions): Promise<void>

package/src/components/toaster/index.js

@@ -7,24 +7,20 @@ import { animationsFinished, nextRepaint } from '../../common.js'
  */
 export const closeToast = async (element, options = {}) => {
     options = {
-        hiddenClass: 'out',
+        closedAttribute: 'data-closed',
         heightProperty: '--x-toast-block-size',
         ...options
     }
 
-    const toaster = element.parentElement
-
     element.style.setProperty(options.heightProperty, `${element.offsetHeight}px`)
 
     await nextRepaint()
 
-    element.classList.add(options.hiddenClass)
+    element.setAttribute(options.closedAttribute, '')
 
     await animationsFinished(element)
 
     element.remove()
-
-    if (toaster.children.length < 1) toaster.remove()
 }
 
 /**
@@ -34,7 +30,7 @@ export const closeToast = async (element, options = {}) => {
  */
 export const showToast = async (element, options = {}) => {
     options = {
-        visibleClass: 'in',
+        openAttribute: 'data-open',
         autoHide: null,
         heightProperty: '--x-toast-block-size',
         close: {},
@@ -47,61 +43,13 @@ export const showToast = async (element, options = {}) => {
     await animationsFinished(element)
 
     element.style.height = ''
-    element.classList.add(options.visibleClass)
+    element.setAttribute(options.openAttribute, '')
 
     if (options.autoHide) {
         setTimeout(() => closeToast(element, options.close), options.autoHide * ((element.parentElement.children.length + 1) / 2))
     }
 }
 
-/**
- * @param {HTMLElement} element
- * @param {import('./').InsertToasterOptions} options
- * @returns Promise<void>
- */
-export const insertToaster = async (element, options = {}) => {
-    options = {
-        classes: '',
-        ...options
-    }
-
-    if (!document.querySelector('.x-toaster')) {
-        element.insertAdjacentHTML('beforeend', `<ol class="x-toaster ${options.classes}"></ol>`)
-    }
-}
-
-/**
- * @param {HTMLElement} element
- * @param {import('./').InsertToastOptions} options
- * @returns Promise<void>
- */
-export const insertToast = async (element, options = {}) => {
-    options = {
-        classes: '',
-        title: '',
-        text: '',
-        start: '',
-        end: '',
-        show: {},
-        ...options
-    }
-
-    element.insertAdjacentHTML('beforeend', `
-        <li class="x-toast ${options.classes}" role="status" aria-live="assertive" aria-atomic="true">
-            <div class="x-toast-content">
-               ${options.start}
-                <div class="flex-col">
-                    <div class="x-title">${options.title}</div>           
-                    <div class="x-text">${options.text}</div>
-                </div>
-                ${options.end}
-            </div>
-        </li>
-    `)
-
-    await showToast(element.children[element.children.length - 1], options.show)
-}
-
 /**
  * @param {HTMLElement} element
  * @param {import('./').CloseToastOptions} options

package/src/tailwind.css

@@ -1,2 +1,5 @@
-@import "base/tailwind.css";
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";
+@import "tailwindcss/variants.css";
 @import "utilities/index.css" layer(components);

package/src/test.css

@@ -0,0 +1,7 @@
+@import "base/index.css";
+@import "components/index.css" layer(components);
+@import "utilities/index.css" layer(components);
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";
+@import "tailwindcss/variants.css";

package/src/utilities/animation.css

@@ -0,0 +1,4 @@
+@utility animation {
+  animation-duration: var(--default-animation-duration, var(--default-transition-duration, 150ms));
+  animation-fill-mode: both;
+}

package/src/utilities/dot.css

@@ -0,0 +1,10 @@
+@utility dot {
+  display: inline-flex;
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: var(--radius-full);
+  background-color: currentColor;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+}

package/src/utilities/view-transition.css

@@ -0,0 +1,3 @@
+.view-transition-main {
+  view-transition-name: main;
+}

package/tailwind.config.js

@@ -16,5 +16,8 @@ export default {
         }),
         containerQueries,
         animate
-    ]
+    ],
+    future: {
+        hoverOnlyWhenSupported: true
+    }
 }