winduum 3.0.0-next.3 → 3.0.0-next.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.5",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",

package/src/components/carousel/index.js

@@ -2,12 +2,21 @@
  * @param {HTMLElement} element
  * @param {object} options
  * @param {number} [options.direction=1]
- * @param {number} [options.distance]
- * @param {'left' | 'top'} [options.position='left']
+ * @param {boolean} [options.vertical=false]
  * @param {number} [options.ratio=0.85]
  * @returns void
  */
-export const scrollBy = (element, { direction = 1, distance, position = 'left', ratio = 0.85 }) => {
+export const scrollBy = (element, { direction = 1, vertical = false, ratio = 0.85 }) => {
+  const { distance, position } = vertical
+    ? {
+        distance: element.clientHeight * ratio,
+        position: 'top',
+      }
+    : {
+        distance: element.clientWidth * ratio,
+        position: 'left',
+      }
+
   element.scrollBy({
     [position]: (distance ?? element.clientWidth * ratio) * direction,
   })
@@ -18,15 +27,21 @@ export const scrollBy = (element, { direction = 1, distance, position = 'left',
  * @param {object} options
  * @param {HTMLButtonElement | null} [options.prevElement]
  * @param {HTMLButtonElement | null} [options.nextElement]
- * @param {boolean} [options.scrollStart]
- * @param {boolean} [options.scrollEnd]
- * @param {boolean} [options.scrollNone]
+ * @param {boolean} vertical
  * @returns void
  */
-export const toggleScrollState = (element, { prevElement, nextElement, scrollStart, scrollEnd, scrollNone }) => {
-  scrollStart ??= element.scrollLeft <= 0
-  scrollEnd ??= element.scrollLeft >= element.scrollWidth - element.clientWidth
-  scrollNone ??= !(element.scrollWidth - element.clientWidth)
+export const toggleScrollState = (element, { prevElement, nextElement, vertical = false }) => {
+  const { scrollStart, scrollEnd, scrollNone } = vertical
+    ? {
+        scrollStart: element.scrollTop <= 0,
+        scrollEnd: element.scrollTop >= element.scrollHeight - element.clientHeight,
+        scrollNone: !(element.scrollHeight - element.clientHeight),
+      }
+    : {
+        scrollStart: element.scrollLeft <= 0,
+        scrollEnd: element.scrollLeft >= element.scrollWidth - element.clientWidth,
+        scrollNone: !(element.scrollWidth - element.clientWidth),
+      }
 
   if (prevElement) prevElement.disabled = scrollStart
   if (nextElement) nextElement.disabled = scrollEnd

package/src/components/dialog/index.js

@@ -5,3 +5,7 @@ document.documentElement.addEventListener('click', ({ target }) => {
     target?.close()
   }
 })
+
+new ResizeObserver(() => {
+  document.documentElement.style.setProperty('--default-scrollbar-width', `${Math.max(0, window.innerWidth - document.body.clientWidth)}px`)
+}).observe(document.body)

package/src/components/drawer/index.js

@@ -82,8 +82,7 @@ export const drawerObserver = (element, placement) => {
   }, {
     root: element,
     threshold: [visibleThreshold, 1],
-  },
-  )
+  })
 }
 
 /**

package/src/components/form/index.js

@@ -1,5 +1,5 @@
 /**
- * @param {Event | SubmitEvent} event
+ * @param {SubmitEvent & { target: HTMLFormElement }} event
  * @param {import("./").ValidateFormOptions} options
  * @returns void
  */
@@ -23,7 +23,7 @@ export const validateForm = (event, options = {}) => {
       event.target.querySelector(':invalid').scrollIntoView(options.scrollOptions)
       event.target.querySelector(':invalid').focus()
     }
-    else {
+    else if (options.submitterLoadingAttribute) {
       event?.submitter?.setAttribute(options.submitterLoadingAttribute, '')
     }
   }
@@ -58,9 +58,10 @@ export const validateField = (element, options = {}) => {
     ...options,
   }
 
-  if (!element.querySelector(options.selector)) return
+  const validationElement = /** @type {HTMLInputElement} */ (element.querySelector(options.selector))
+
+  if (!validationElement) 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)

package/src/components/toast/default.css

@@ -9,6 +9,12 @@
   visibility: hidden;
   opacity: 0%;
 
+  :where(:root, :host):has(dialog[open]) & {
+    button {
+      display: none;
+    }
+  }
+
   .flex-col-reverse & {
     justify-content: flex-end;
   }

package/src/components/toast/index.js

@@ -9,6 +9,7 @@ export const closeToast = async (element, options = {}) => {
   options = {
     closedAttribute: 'data-closed',
     heightProperty: '--x-toast-block-size',
+    remove: true,
     ...options,
   }
 
@@ -31,7 +32,7 @@ export const closeToast = async (element, options = {}) => {
 export const showToast = async (element, options = {}) => {
   options = {
     openAttribute: 'data-open',
-    autoHide: null,
+    autoHide: 7500,
     heightProperty: '--x-toast-block-size',
     close: {},
     ...options,

package/src/components/toaster/index.js

@@ -10,3 +10,21 @@ export const closeToaster = (element, options = {}) => {
     closeToast(toast, options),
   )
 }
+
+/**
+ * @returns MutationObserver
+ */
+export const toasterObserver = () => {
+  return new MutationObserver((mutations) => {
+    for (const { target } of mutations) {
+      if (target.children.length > 0) {
+        if (!target.matches(':popover-open')) {
+          target?.showPopover?.()
+        }
+      }
+      else {
+        target?.hidePopover?.()
+      }
+    }
+  })
+}

package/tailwindcss/utilities/position.css

@@ -6,11 +6,13 @@
     transform-origin: top;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: bottom;
     }
   }
+   */
 }
 
 @utility bottom-start {
@@ -21,11 +23,13 @@
     transform-origin: top left;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: bottom left;
     }
   }
+   */
 }
 
 @utility bottom-end {
@@ -36,11 +40,13 @@
     transform-origin: top right;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: bottom right;
     }
   }
+ */
 }
 
 @utility top {
@@ -51,11 +57,13 @@
     transform-origin: bottom;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: top;
     }
   }
+   */
 }
 
 @utility top-start {
@@ -66,11 +74,13 @@
     transform-origin: bottom left;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: top left;
     }
   }
+   */
 }
 
 @utility top-end {
@@ -81,11 +91,13 @@
     transform-origin: bottom right;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: top right;
     }
   }
+   */
 }
 
 @utility left {
@@ -96,11 +108,13 @@
     transform-origin: right;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: left;
     }
   }
+   */
 }
 
 @utility left-start {
@@ -111,11 +125,13 @@
     transform-origin: right top;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: left top;
     }
   }
+   */
 }
 
 @utility left-end {
@@ -126,11 +142,13 @@
     transform-origin: right bottom;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: left bottom;
     }
   }
+   */
 }
 
 @utility right {
@@ -141,11 +159,13 @@
     transform-origin: left;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: right;
     }
   }
+   */
 }
 
 @utility right-start {
@@ -156,11 +176,13 @@
     transform-origin: left top;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: right top;
     }
   }
+   */
 }
 
 @utility right-end {
@@ -171,9 +193,11 @@
     transform-origin: left bottom;
   }
 
+  /*
   @container anchored(fallback: flip-block) {
     > * {
       transform-origin: right bottom;
     }
   }
+   */
 }