winduum 2.2.28 → 3.0.0-next.2

package/src/components/tooltip/default.css

@@ -26,8 +26,8 @@
     pointer-events: none;
   }
 
-  &:where(.top),
-  &:where(.bottom) {
+  &:where(.tooltip-top),
+  &:where(.tooltip-bottom) {
     &::before {
       --tw-translate-x: -50%;
 
@@ -36,8 +36,8 @@
     }
   }
 
-  &:where(.left),
-  &:where(.right) {
+  &:where(.tooltip-left),
+  &:where(.tooltip-right) {
     &::before {
       --tw-translate-y: -50%;
 
@@ -46,28 +46,28 @@
     }
   }
 
-  &:where(.bottom) {
+  &:where(.tooltip-bottom) {
     &::before {
       inset-block-start: 100%;
       transform-origin: top;
     }
   }
 
-  &:where(.top) {
+  &:where(.tooltip-top) {
     &::before {
       inset-block-end: 100%;
       transform-origin: bottom;
     }
   }
 
-  &:where(.left) {
+  &:where(.tooltip-left) {
     &::before {
       inset-inline-end: 100%;
       transform-origin: right;
     }
   }
 
-  &:where(.right) {
+  &:where(.tooltip-right) {
     &::before {
       inset-inline-start: 100%;
       transform-origin: left;

package/src/supports.js

@@ -7,3 +7,13 @@ export const supportsTimelineTrigger = CSS.supports('timeline-trigger-name: --v'
  * @type {boolean}
  */
 export const supportsInterestFor = Object.prototype.hasOwnProperty.call(HTMLButtonElement.prototype, 'interestForElement')
+
+/**
+ * @type {boolean}
+ */
+export const supportsScrollInitialTarget = CSS.supports('scroll-initial-target', 'nearest')
+
+/**
+ * @type {boolean}
+ */
+export const supportsAnimationTimeline = CSS.supports('animation-timeline: scroll()')

package/tailwindcss/utilities/index.css

@@ -8,6 +8,7 @@
 @import "./grid-area.css";
 @import "./grid-cols-container.css";
 @import "./link.css";
+@import "./position.css";
 @import "./ripple.css";
 @import "./skeleton.css";
 @import "./spinner.css";

package/tailwindcss/utilities/position.css

@@ -0,0 +1,179 @@
+@utility bottom {
+  position-area: block-end center;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: top;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: bottom;
+    }
+  }
+}
+
+@utility bottom-start {
+  position-area: block-end span-inline-end;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: top left;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: bottom left;
+    }
+  }
+}
+
+@utility bottom-end {
+  position-area: block-end span-inline-start;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: top right;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: bottom right;
+    }
+  }
+}
+
+@utility top {
+  position-area: block-start center;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: bottom;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: top;
+    }
+  }
+}
+
+@utility top-start {
+  position-area: block-start span-inline-end;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: bottom left;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: top left;
+    }
+  }
+}
+
+@utility top-end {
+  position-area: block-start span-inline-start;
+  position-try-fallbacks: flip-block;
+
+  > * {
+    transform-origin: bottom right;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: top right;
+    }
+  }
+}
+
+@utility left {
+  position-area: inline-start center;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: right;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: left;
+    }
+  }
+}
+
+@utility left-start {
+  position-area: inline-start span-block-end;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: right top;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: left top;
+    }
+  }
+}
+
+@utility left-end {
+  position-area: inline-start span-block-start;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: right bottom;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: left bottom;
+    }
+  }
+}
+
+@utility right {
+  position-area: inline-end center;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: left;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: right;
+    }
+  }
+}
+
+@utility right-start {
+  position-area: inline-end span-block-end;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: left top;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: right top;
+    }
+  }
+}
+
+@utility right-end {
+  position-area: inline-end span-block-start;
+  position-try-fallbacks: flip-inline;
+
+  > * {
+    transform-origin: left bottom;
+  }
+
+  @container anchored(fallback: flip-block) {
+    > * {
+      transform-origin: right bottom;
+    }
+  }
+}

package/types/index.d.ts

@@ -93,34 +93,7 @@ declare module 'winduum/src/components/compare' {
 	export {};
 }
 
-declare module 'winduum/src/components/details' {
-	export interface DefaultOptions {
-		selector?: string
-		summarySelector?: string
-	}
-
-	export const defaultOptions: DefaultOptions
-	export function showDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-	export function closeDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-	export function toggleDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-
-	export {};
-}
-
 declare module 'winduum/src/components/dialog' {
-	export interface DefaultOptions {
-		remove?: boolean | null
-		closable?: boolean | null
-		modal?: boolean
-		openAttribute?: string
-		closedAttribute?: string
-		contentSelector?: string
-		scrollbarWidthProperty?: string | null
-	}
-
-	export const defaultOptions: DefaultOptions
-	export function showDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>
-	export function closeDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>
 
 	export {};
 }
@@ -223,25 +196,21 @@ declare module 'winduum/src/components/toaster' {
 }
 
 declare module 'winduum/src/components/popover' {
-	import type { FlipOptions, Middleware, OffsetOptions, Placement, ShiftOptions } from '@floating-ui/dom';
-	export interface ShowPopoverOptions {
-		anchorSelector: string,
-		openAttribute?: string
-		compute?: boolean
-		placement?: Placement
-		middleware?: Array<Middleware | null | undefined | false>
-		offset?: OffsetOptions
-		flip?: FlipOptions
-		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>
+	import type { ComputePositionConfig } from '@floating-ui/dom';
+	import type { Placement } from '@floating-ui/utils';
+  export function computePositionPopover(
+	referenceElement: HTMLElement,
+	floatingElement: HTMLElement & { $currentPlacement?: string },
+	placement: Placement,
+	options?: ComputePositionConfig | boolean
+  ): Promise<void>
+
+  export function autoUpdatePopover(
+	referenceElement: HTMLElement,
+	floatingElement: HTMLElement,
+	placement: Placement,
+	options?: ComputePositionConfig | boolean
+  ): Promise<() => void>
 
 	export {};
 }

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

@@ -1,9 +0,0 @@
-export interface DefaultOptions {
-    selector?: string
-    summarySelector?: string
-}
-
-export const defaultOptions: DefaultOptions
-export function showDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-export function closeDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
-export function toggleDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>

package/src/components/details/index.js

@@ -1,78 +0,0 @@
-/**
- * @type {import("./").DefaultOptions}
- */
-export const defaultOptions = {
-  selector: 'details',
-  summarySelector: 'summary',
-}
-
-/**
- * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./").DefaultOptions} options
- * @returns Promise<void>
- */
-export const showDetails = async (element, options = {}) => {
-  options = {
-    ...defaultOptions,
-    ...options,
-  }
-
-  const details = element.closest(options.selector)
-  const { down } = await import('slide-element')
-  const content = details.querySelector(options.summarySelector).nextElementSibling
-
-  details._isHiding = false
-  details.open = true
-
-  await down(content, {
-    display: '',
-  })
-}
-
-/**
- * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./").DefaultOptions} options
- * @returns Promise<void>
- */
-export const closeDetails = async (element, options = {}) => {
-  options = {
-    ...defaultOptions,
-    ...options,
-  }
-
-  const details = element.closest(options.selector)
-  const { up } = await import('slide-element')
-  const content = details.querySelector(options.summarySelector).nextElementSibling
-
-  details._isHiding = true
-
-  await up(content, {
-    display: '',
-  })
-
-  details._isHiding && (details.open = false)
-  details._isHiding = false
-}
-
-/**
- * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./").DefaultOptions} options
- * @returns Promise<void>
- */
-export const toggleDetails = async (element, options = {}) => {
-  options = {
-    ...defaultOptions,
-    ...options,
-  }
-
-  const details = element.closest(options.selector)
-
-  if (details._isHiding && !element.checked) return
-
-  if (element.checked ?? !details.open) {
-    await showDetails(element, options)
-  }
-  else {
-    await closeDetails(element, options)
-  }
-}

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

@@ -1,13 +0,0 @@
-export interface DefaultOptions {
-    remove?: boolean | null
-    closable?: boolean | null
-    modal?: boolean
-    openAttribute?: string
-    closedAttribute?: string
-    contentSelector?: string
-    scrollbarWidthProperty?: string | null
-}
-
-export const defaultOptions: DefaultOptions
-export function showDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>
-export function closeDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>