winduum 2.2.28 → 3.0.0-next.10

package/src/components/drawer/scroller.css

@@ -0,0 +1,32 @@
+.x-drawer-scroller {
+  display: flex;
+  width: inherit;
+  height: inherit;
+  overflow: auto clip;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: none;
+  scroll-snap-type: x mandatory;
+  scroll-timeline: --x-drawer-backdrop x;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::after {
+    content: "";
+    min-inline-size: 100dvw;
+    scroll-snap-align: end;
+    scroll-initial-target: nearest;
+  }
+
+  &:where(.snap-y) {
+    overflow: clip auto;
+    scroll-timeline: --x-drawer-backdrop y;
+
+    &::after {
+      min-block-size: 100dvh;
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 export interface ValidateFormOptions {
-    validateSelectors?: string
+    validateSelector?: string
     validateOptions?: ValidateFieldOptions
     validateField?: typeof validateField
     scrollOptions?: ScrollIntoViewOptions
@@ -7,23 +7,16 @@ export interface ValidateFormOptions {
 }
 
 export interface ValidateFieldOptions {
-    validate?: boolean
     validationMessage?: string
     selector?: string
-    ignoreMatch?: RegExp
     validitySelector?: string
-    infoParentSelector?: string
-    infoSelector?: string
     infoContent?: string
-    endParentSelector?: string
-    endSelector?: string
-    endContent?: string
-    validAttribute?: string
+    iconParentSelector?: string
+    iconSelector?: string
+    iconContent?: string
     validIcon?: string | null
-    invalidAttribute?: string
     invalidIcon?: string
-    activeAttribute?: string
 }
 
 export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
-export function validateField(element: HTMLElement | SubmitEvent, options?: ValidateFieldOptions): void
+export function validateField(element: HTMLElement, options?: ValidateFieldOptions): void

package/src/components/form/index.js

@@ -1,34 +1,30 @@
 /**
- * @param {Event | SubmitEvent} event
+ * @param {SubmitEvent & { target: HTMLFormElement }} event
  * @param {import("./").ValidateFormOptions} options
  * @returns void
  */
 export const validateForm = (event, options = {}) => {
   options = {
-    validateSelectors: '.x-control, .x-check, .x-switch, .x-rating, .x-color',
-    validateOptions: {
-      validate: true,
-    },
+    validateSelector: '.x-field',
+    validateOptions: {},
     validateField,
     submitterLoadingAttribute: 'data-loading',
     scrollOptions: { behavior: 'smooth', block: 'center' },
     ...options,
   }
 
-  if (options.validateOptions.validate) {
-    if (!event.target.checkValidity()) {
-      event.preventDefault()
-      event.stopImmediatePropagation()
+  if (!event.target.checkValidity()) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
 
-      event.target.querySelector(':invalid').scrollIntoView(options.scrollOptions)
-      event.target.querySelector(':invalid').focus()
-    }
-    else {
-      event?.submitter?.setAttribute(options.submitterLoadingAttribute, '')
-    }
+    event.target.querySelector(':invalid').scrollIntoView(options.scrollOptions)
+    event.target.querySelector(':invalid').focus()
+  }
+  else if (options.submitterLoadingAttribute) {
+    event?.submitter?.setAttribute(options.submitterLoadingAttribute, '')
   }
 
-  event.target.querySelectorAll(options.validateSelectors).forEach((element) => {
+  event.target.querySelectorAll(options.validateSelector).forEach((element) => {
     options.validateField(element, options.validateOptions)
   })
 }
@@ -40,73 +36,42 @@ export const validateForm = (event, options = {}) => {
  */
 export const validateField = (element, options = {}) => {
   options = {
-    validate: true,
-    selector: 'input:not([type="hidden"]), textarea, select',
-    ignoreMatch: /(data-novalidate|readonly)/,
-    validitySelector: '.validity',
-    infoParentSelector: '.x-field',
-    infoSelector: '.x-info',
-    infoContent: '<div class="x-info text-error validity"></div>',
-    endParentSelector: '.x-control',
-    endSelector: '.ms-auto',
-    endContent: '<div class="ms-auto"></div>',
-    validAttribute: 'data-valid',
+    selector: ':is(input:not([type="hidden"]), textarea, select):not([readonly], [data-novalidate])',
+    validitySelector: '[data-validity]',
+    infoContent: '<div class="x-info text-error" data-validity></div>',
+    iconParentSelector: '.x-control',
+    iconSelector: '.ms-auto',
+    iconContent: '<div class="ms-auto"></div>',
     validIcon: null,
-    invalidAttribute: 'data-invalid',
-    invalidIcon: '<svg class="text-error validity" aria-hidden="true"><use href="#icon-exclamation-circle"></use></svg>',
-    activeAttribute: 'data-active',
+    invalidIcon: '<svg class="text-error" data-validity aria-hidden="true"><use href="#heroicons-outline/exclamation-circle"></use></svg>',
     ...options,
   }
 
-  if (!element.querySelector(options.selector)) return
-
-  const validationElement = element.querySelector(options.selector)
-  const validationMessage = options.validationMessage ?? validationElement.dataset.validationMessage ?? validationElement.validationMessage
-  const infoParentElement = validationElement?.closest(options.infoParentSelector)
-  const endParentElement = validationElement.closest(options.endParentSelector)
-  const infoSelector = options.infoSelector + options.validitySelector
-  const endSelector = `${options.endSelector} ${options.validitySelector}`
-
-  const insertIcon = (icon) => {
-    if (!endParentElement || !icon) return
-
-    if (!element?.querySelector(options.endSelector)) {
-      element?.insertAdjacentHTML('beforeend', options.endContent)
-    }
+  const validationElements = [...element.querySelectorAll(options.selector)]
 
-    element.querySelector(options.endSelector).insertAdjacentHTML('afterbegin', icon)
-  }
+  if (!validationElements.length) return
 
-  if (validationElement.value !== '') {
-    element.setAttribute(options.activeAttribute, '')
-  }
-  else {
-    element.removeAttribute(options.activeAttribute)
-  }
+  element.querySelectorAll(options.validitySelector).forEach(el => el.remove())
 
-  if (!validationElement.outerHTML.match(options.ignoreMatch) && options.validate) {
-    element?.removeAttribute(options.validAttribute)
-    element?.removeAttribute(options.invalidAttribute)
+  const invalidElements = validationElements.filter(validationElement => !validationElement.checkValidity())
 
-    infoParentElement?.querySelector(infoSelector)?.remove()
-    endParentElement?.querySelector(endSelector)?.remove()
+  validationElements.forEach((validationElement) => {
+    const icon = invalidElements.includes(validationElement) ? options.invalidIcon : options.validIcon
+    const iconParentElement = validationElement.closest(options.iconParentSelector)
 
-    if (validationElement.checkValidity()) {
-      element.setAttribute(options.validAttribute, '')
+    if (!iconParentElement || !icon) return
 
-      insertIcon(options.validIcon)
+    if (!iconParentElement.querySelector(options.iconSelector)) {
+      iconParentElement.insertAdjacentHTML('beforeend', options.iconContent)
     }
-    else {
-      element.setAttribute(options.invalidAttribute, '')
 
-      insertIcon(options.invalidIcon)
+    iconParentElement.querySelector(options.iconSelector).insertAdjacentHTML('afterbegin', icon)
+  })
 
-      if (infoParentElement) {
-        infoParentElement.insertAdjacentHTML('beforeend', options.infoContent)
-        infoParentElement.querySelector(infoSelector).textContent = validationMessage
-      }
-    }
-  }
+  if (!invalidElements.length) return
+
+  element.insertAdjacentHTML('beforeend', options.infoContent)
+  element.lastElementChild.textContent = options.validationMessage ?? invalidElements[0].dataset.validationMessage ?? invalidElements[0].validationMessage
 }
 
 export default {

package/src/components/heading/lg.css

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

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

@@ -2,6 +2,6 @@
 :host {
   --x-heading-font-family: var(--font-primary);
   --x-heading-font-weight: var(--font-weight-semibold);
-  --x-heading-font-size: var(--text-xl);
+  --x-heading-font-size: var(--text-4xl);
   --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(--text-lg);
+  --x-heading-font-size: var(--text-3xl);
 }

package/src/components/index.css

@@ -3,6 +3,7 @@
 @import "./check/index.css";
 @import "./color/index.css";
 @import "./control/index.css";
+@import "./details/index.css";
 @import "./group/index.css";
 @import "./heading/index.css";
 @import "./image/index.css";

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

@@ -1,5 +1,6 @@
 :root,
 :host {
-  --x-label-font-size: var(--text-sm);
-  --x-label-line-height: calc(1em + 0.25rem);
+  --x-label-font-size: var(--text-2xs);
+  --x-label-line-height: calc(1em + 0.125rem);
+  --x-label-font-weight: var(--font-weight-medium);
 }

package/src/components/popover/content.css

@@ -2,103 +2,16 @@
   background-color: var(--x-popover-content-background-color);
   border-radius: var(--x-popover-content-border-radius);
   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(--ease-in-out);
-  transition-duration: var(--default-transition-duration);
-  transform:
-    translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
-    scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
+  color: var(--x-popover-content-color);
+  font-size: var(--x-popover-font-size);
+  transition: inherit;
   will-change: transform;
-  inline-size: max-content;
-  position: absolute;
 
-  &:where(.bottom),
-  & {
-    transform-origin: top;
+  @starting-style {
+    scale: var(--x-popover-content-starting-scale);
   }
 
-  &:where(.bottom-start) {
-    transform-origin: top left;
-  }
-
-  &:where(.bottom-end) {
-    inset-inline-end: 0;
-    transform-origin: top right;
-  }
-
-  &:where(.right) {
-    inset-block-start: 0;
-    inset-inline-start: 100%;
-    transform-origin: left;
-  }
-
-  &:where(.right-start) {
-    transform-origin: left top;
-  }
-
-  &:where(.right-end) {
-    inset-block: auto 0;
-    transform-origin: left bottom;
-  }
-
-  &:where(.left) {
-    inset-block-start: 0;
-    inset-inline-end: 100%;
-    transform-origin: right;
-  }
-
-  &:where(.left-start) {
-    transform-origin: right top;
-  }
-
-  &:where(.left-end) {
-    inset-block: auto 0;
-    transform-origin: right bottom;
-  }
-
-  &:where(.top) {
-    inset-block-end: 100%;
-    transform-origin: bottom;
-  }
-
-  &:where(.top-start) {
-    transform-origin: bottom left;
-  }
-
-  &:where(.top-end) {
-    inset-inline-end: 0;
-    transform-origin: bottom right;
-  }
-
-  &:where(.inline-center) {
-    --tw-translate-x: -50%;
-
-    inset-inline-start: 50%;
-  }
-
-  &:where(.block-center) {
-    --tw-translate-y: -50%;
-
-    inset-block-start: 50%;
-  }
-
-  &[popover]:not([data-open]) {
-    --tw-scale-x: var(--x-popover-content-scale-x);
-    --tw-scale-y: var(--x-popover-content-scale-y);
-
-    opacity: 0%;
-    pointer-events: none;
-  }
-
-  &:not([popover]) {
-    .trigger-focus:not(:focus, :focus-within) > &,
-    .trigger-hover:not(:hover) > & {
-      --tw-scale-x: var(--x-popover-content-scale-x);
-      --tw-scale-y: var(--x-popover-content-scale-y);
-
-      opacity: 0%;
-      visibility: hidden;
-    }
+  :where(.x-popover:not(:popover-open)) > & {
+    scale: var(--x-popover-content-starting-scale);
   }
 }

package/src/components/popover/default.css

@@ -1,4 +1,17 @@
 .x-popover {
-  position: relative;
-  display: inline-block;
-}
+  transition-property: var(--default-transition-property);
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: var(--default-transition-duration);
+  transition-behavior: allow-discrete;
+  position: fixed;
+  inset: auto;
+  container-type: anchored;
+
+  @starting-style {
+    opacity: var(--x-popover-starting-opacity);
+  }
+
+  &:not(:popover-open) {
+    opacity: var(--x-popover-starting-opacity);
+  }
+}

package/src/components/popover/index.css

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

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

@@ -1,20 +1,16 @@
-import { FlipOptions, Middleware, OffsetOptions, Placement, ShiftOptions } from "@floating-ui/dom";
+import type { ComputePositionConfig } from '@floating-ui/dom'
+import type { Placement } from '@floating-ui/utils'
 
-export interface ShowPopoverOptions {
-    anchorSelector: string,
-    openAttribute?: string
-    compute?: boolean
-    placement?: Placement
-    middleware?: Array<Middleware | null | undefined | false>
-    offset?: OffsetOptions
-    flip?: FlipOptions
-    shift?: ShiftOptions
-}
+export declare function computePositionPopover(
+  referenceElement: HTMLElement,
+  floatingElement: HTMLElement & { $currentPlacement?: string },
+  placement: Placement,
+  options?: ComputePositionConfig | boolean
+): Promise<void>
 
-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>
+export declare function autoUpdatePopover(
+  referenceElement: HTMLElement,
+  floatingElement: HTMLElement,
+  placement: Placement,
+  options?: ComputePositionConfig | boolean
+): Promise<() => void>

package/src/components/popover/index.js

@@ -1,93 +1,53 @@
-import { animationsFinished, nextRepaint } from '../../common.js'
+import { supportsAnchor } from '../../common.js'
 
 /**
- * @param {HTMLElement | Element} element
- * @param {HTMLElement | Element} popoverElement
- * @param {import("./").ShowPopoverOptions} options
- * @returns Promise<void>
+ * @param {HTMLElement} referenceElement
+ * @param {HTMLElement & { _currentPlacement?: import('@floating-ui/utils').Placement }} floatingElement
+ * @param {import('@floating-ui/utils').Placement} placement
+ * @param {import('@floating-ui/dom').ComputePositionConfig | boolean} [options={}]
+ * @returns {Promise<void>}
  */
-export const computePopover = async (element, popoverElement, options = {}) => {
-  const { computePosition, flip, shift, offset } = await import('@floating-ui/dom')
-
-  popoverElement.classList.remove(popoverElement._placement)
-
-  await computePosition(element, popoverElement, {
-    placement: options?.placement,
-    middleware: options?.middleware ?? [offset(options?.offset ?? 12), flip(options?.flip), shift({ padding: 8, ...options?.shift })],
+export const computePositionPopover = async (
+  referenceElement,
+  floatingElement,
+  placement,
+  options = {},
+) => {
+  const { computePosition, flip } = await import('@floating-ui/dom')
+
+  const autoUpdate = options === true
+  const middleware = autoUpdate ? [flip()] : []
+
+  floatingElement.classList.remove(floatingElement._currentPlacement ?? placement)
+  floatingElement.style.setProperty('--anchor-size', !supportsAnchor ? `${referenceElement.offsetWidth}px` : '')
+
+  await computePosition(referenceElement, floatingElement, {
+    middleware,
+    placement,
+    ...(autoUpdate ? {} : options),
   }).then(({ x, y, placement }) => {
-    Object.assign(popoverElement.style, {
-      inset: `${y}px auto auto ${x}px`,
-    })
-
-    popoverElement._placement = placement
-    popoverElement.classList.add(popoverElement._placement)
+    floatingElement.style.inset = !supportsAnchor ? `${y}px auto auto ${x}px` : ''
+    floatingElement.classList.add(placement)
+    floatingElement._currentPlacement = placement
   })
 }
 
 /**
- * @param {HTMLElement | Element} element - The HTML content to insert into the dialog.
- * @param {import("./").HidePopoverOptions} options
- * @returns Promise<void>
+ * @param {HTMLElement} referenceElement
+ * @param {HTMLElement} floatingElement
+ * @param {import('@floating-ui/utils').Placement} placement
+ * @param {import('@floating-ui/dom').ComputePositionConfig | boolean} [options={}]
+ * @returns {Promise<() => void>}
  */
-export const hidePopover = async (element, options = { openAttribute: 'data-open' }) => {
-  const popoverElement = document.getElementById(element.getAttribute('popovertarget'))
-
-  popoverElement.removeAttribute(options?.openAttribute)
-  await animationsFinished(popoverElement)
-  popoverElement._cleanup && popoverElement._cleanup()
-  popoverElement.hidePopover && popoverElement.hidePopover()
-
-  element.ariaExpanded = 'false'
-}
-
-/**
- * @param {HTMLElement | Element} element
- * @param {import("./").ShowPopoverOptions} options
- * @returns Promise<void>
- */
-export const showPopover = async (element, options) => {
-  options = {
-    openAttribute: 'data-open',
-    compute: true,
-    ...options,
-  }
-
+export const autoUpdatePopover = async (
+  referenceElement,
+  floatingElement,
+  placement,
+  options = {},
+) => {
   const { autoUpdate } = await import('@floating-ui/dom')
 
-  const popoverElement = document.getElementById(element.getAttribute('popovertarget'))
-
-  element.ariaExpanded = 'true'
-
-  if (!element.ariaHasPopup) (element.ariaHasPopup = 'dialog')
-  if (!popoverElement.role) (popoverElement.role = element.ariaHasPopup)
-
-  popoverElement.showPopover && popoverElement.showPopover()
-
-  await nextRepaint()
-
-  popoverElement.setAttribute(options?.openAttribute, '')
-
-  if (!options.compute) {
-    return
-  }
-
-  popoverElement._cleanup = autoUpdate(
-    element,
-    popoverElement,
-    async () => await computePopover(options.anchorSelector ? document.querySelector(options.anchorSelector) : element, popoverElement, options),
+  return autoUpdate(referenceElement, floatingElement, () =>
+    computePositionPopover(referenceElement, floatingElement, placement, options),
   )
 }
-
-/**
- * @param {HTMLElement | Element} element
- * @param {import("./").ShowPopoverOptions} options
- * @returns Promise<void>
- */
-export const togglePopover = async (element, options) => {
-  if (element.ariaExpanded !== 'true') {
-    await showPopover(element, options)
-  }
-  else {
-    await hidePopover(element)
-  }
-}

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

@@ -4,6 +4,5 @@
   --x-popover-content-border-radius: var(--radius-xl);
   --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;
+  --x-popover-content-starting-scale: 0.75;
 }

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

@@ -0,0 +1,4 @@
+:root,
+:host {
+  --x-popover-starting-opacity: 0;
+}

package/src/components/popover/readme.md

@@ -14,9 +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/props/default.css" layer(components);
 @import "winduum/src/components/popover/default.css" layer(components);
-@import "winduum/src/components/popover/content.css" layer(components);
 ```
 
 ### Local imports

package/src/components/popover/tooltip.css

@@ -0,0 +1,11 @@
+.x-popover {
+  &:is(.tooltip) {
+    --x-popover-content-background-color: var(--color-main);
+    --x-popover-content-color: var(--color-main-foreground);
+    --x-popover-content-border-radius: var(--radius-md);
+    --x-popover-content-padding-block: calc(var(--spacing) * 1);
+    --x-popover-content-padding-inline: calc(var(--spacing) * 2);
+    --x-popover-font-size: var(--text-sm);
+    --x-popover-content-starting-scale: 0.75;
+  }
+}

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

@@ -1,6 +1,6 @@
 interface ToggleTabOptions {
-    tabElements?: NodeListOf<Element>
-    tabPanelElements?: NodeListOf<Element>
+    tabElements?: NodeListOf<Element> | Element[]
+    tabPanelElements?: NodeListOf<Element> | Element[]
 }
 
 export function toggleTab(element: HTMLElement | Element, options?: ToggleTabOptions): void