winduum 3.0.0-next.1 → 3.0.0-next.10

package/tailwindcss/utilities/animation-timeline.css

@@ -0,0 +1,51 @@
+@utility timeline-scope-* {
+  timeline-scope: --value([*]) y;
+}
+
+@utility scroll-timeline-y-* {
+  scroll-timeline: --value([*]) y;
+}
+
+@utility scroll-timeline-x-* {
+  scroll-timeline: --value([*]) x;
+}
+
+@utility scroll-timeline-block {
+  scroll-timeline: --value([*]) block;
+}
+
+@utility view-timeline-y-* {
+  view-timeline: --value([*]) y;
+}
+
+@utility view-timeline-x-* {
+  view-timeline: --value([*]) x;
+}
+
+@utility view-timeline-block {
+  view-timeline: --value([*]) block;
+}
+
+@utility animation-timeline-scroll {
+  animation-timeline: scroll();
+}
+
+@utility animation-timeline-scroll-y {
+  animation-timeline: scroll(y);
+}
+
+@utility animation-timeline-scroll-x {
+  animation-timeline: scroll(x);
+}
+
+@utility animation-timeline-view {
+  animation-timeline: view();
+}
+
+@utility animation-timeline-* {
+  animation-timeline: --value("auto", "none", [ *]);
+}
+
+@utility animation-range-* {
+  animation-range: --value([*]);
+}

package/tailwindcss/utilities/animation-trigger-fallback.css

@@ -0,0 +1,18 @@
+@utility animation-trigger-enter {
+  @supports not (timeline-trigger-name: --v) {
+    animation-play-state: paused;
+
+    @media (scripting: none) {
+      animation: none;
+    }
+
+    &:is([data-enter]),
+    :is([data-enter]) & {
+      animation-play-state: running;
+    }
+  }
+
+  @media (prefers-reduced-motion), print {
+    animation: none;
+  }
+}

package/tailwindcss/utilities/animation-trigger.css

@@ -0,0 +1,33 @@
+@utility timeline-trigger-enter {
+  timeline-trigger: --enter view() entry var(--tw-timeline-trigger-entry, 20%) exit var(--tw-timeline-trigger-exit, 0%);
+  trigger-scope: --enter;
+}
+
+@utility timeline-trigger-* {
+  timeline-trigger: --value([*]) view() entry var(--tw-timeline-trigger-entry, 20%) exit var(--tw-timeline-trigger-exit, 0%);
+  trigger-scope: --value([*]);
+}
+
+@utility animation-trigger-enter {
+  animation-duration: var(--tw-animation-duration, 1.75s);
+  animation-timing-function: var(--tw-animation-timing-function, var(--ease-emphasized));
+  animation-fill-mode: var(--tw-animation-fill-mode, both);
+  animation-trigger: --enter var(--tw-animation-trigger-action, play-once);
+  animation-name: enter;
+
+  @media (prefers-reduced-motion) {
+    animation: none;
+  }
+}
+
+@utility animation-trigger-* {
+  animation-duration: var(--tw-animation-duration, 1.75s);
+  animation-timing-function: var(--tw-animation-timing-function, var(--ease-emphasized));
+  animation-fill-mode: var(--tw-animation-fill-mode, both);
+  animation-trigger: --modifier([*]) var(--tw-animation-trigger-action, play-once);
+  animation-name: --value([*]);
+
+  @media (prefers-reduced-motion) {
+    animation: none;
+  }
+}

package/tailwindcss/utilities/animation.css

@@ -1,3 +1,91 @@
 @utility animation-* {
   animation-name: --value(--animation-*, [family-name]);
 }
+
+@utility from-translate-y-* {
+  --tw-animation-from-translate-y: --value([length]);
+  --tw-animation-from-translate-y: calc(var(--spacing) * --value(number, [number]));
+}
+
+@utility to-translate-y-* {
+  --tw-animation-to-translate-y: --value([length]);
+  --tw-animation-to-translate-y: calc(var(--spacing) * --value(number, [number]));
+}
+
+@utility -from-translate-y-* {
+  --tw-animation-from-translate-y: calc(--value([length]) * -1);
+  --tw-animation-from-translate-y: calc(var(--spacing) * --value(number, [number]) * -1);
+}
+
+@utility -to-translate-y-* {
+  --tw-animation-to-translate-y: calc(--value([length]) * -1);
+  --tw-animation-to-translate-y: calc(var(--spacing) * --value(number, [number]) * -1);
+}
+
+@utility from-translate-x-* {
+  --tw-animation-from-translate-x: --value([length]);
+  --tw-animation-from-translate-x: calc(var(--spacing) * --value(number, [number]));
+}
+
+@utility to-translate-x-* {
+  --tw-animation-to-translate-x: --value([length]);
+  --tw-animation-to-translate-x: calc(var(--spacing) * --value(number, [number]));
+}
+
+@utility -from-translate-x-* {
+  --tw-animation-from-translate-x: calc(--value([length]) * -1);
+  --tw-animation-from-translate-x: calc(var(--spacing) * --value(number, [number]) * -1);
+}
+
+@utility -to-translate-x-* {
+  --tw-animation-to-translate-x: calc(--value([length]) * -1);
+  --tw-animation-to-translate-x: calc(var(--spacing) * --value(number, [number]) * -1);
+}
+
+@utility from-opacity-* {
+  --tw-animation-from-opacity: --value(percentage, [percentage]);
+  --tw-animation-from-opacity: calc(--value(integer) * 1%);
+}
+
+@utility to-opacity-* {
+  --tw-animation-to-opacity: --value(percentage, [percentage]);
+  --tw-animation-to-opacity: calc(--value(integer) * 1%);
+}
+
+@utility -from-opacity-* {
+  --tw-animation-from-opacity: calc(--value([percentage]) * -1);
+  --tw-animation-from-opacity: calc(--value(integer) * -1 * 1%);
+}
+
+@utility -to-opacity-* {
+  --tw-animation-to-opacity: calc(--value([percentage]) * -1);
+  --tw-animation-to-opacity: calc(--value(integer) * -1 * 1%);
+}
+
+@utility from-scale-* {
+  --tw-animation-from-scale: --value(percentage, [percentage]);
+  --tw-animation-from-scale: calc(--value(integer) * 1%);
+}
+
+@utility to-scale-* {
+  --tw-animation-to-scale: --value(percentage, [percentage]);
+  --tw-animation-to-scale: calc(--value(integer) * 1%);
+}
+
+@utility -from-scale-* {
+  --tw-animation-from-scale: calc(--value([percentage]) * -1);
+  --tw-animation-from-scale: calc(--value(integer) * -1 * 1%);
+}
+
+@utility -to-scale-* {
+  --tw-animation-to-scale: calc(--value([percentage]) * -1);
+  --tw-animation-to-scale: calc(--value(integer) * -1 * 1%);
+}
+
+@utility from-rotate-* {
+  --tw-animation-from-rotate: --value([*]);
+}
+
+@utility to-rotate-* {
+  --tw-animation-to-rotate: --value([*]);
+}

package/tailwindcss/utilities/grid-area.css

@@ -0,0 +1,7 @@
+@utility grid-area-* {
+  grid-area: --value(number, [*]);
+}
+
+@utility grid-area-full {
+  grid-area: 1/-1;
+}

package/tailwindcss/utilities/index.css

@@ -1,8 +1,11 @@
 @import "./accent.css";
 @import "./animation.css";
+@import "./animation-timeline.css";
+@import "./animation-trigger.css";
 @import "./divide-gap.css";
 @import "./divider.css";
 @import "./dot.css";
+@import "./grid-area.css";
 @import "./grid-cols-container.css";
 @import "./link.css";
 @import "./position.css";

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;
     }
   }
+   */
 }

package/tailwindcss/variants/index.css

@@ -1,3 +1,4 @@
 @import "./dark.css";
-@import "./interest.css";
 @import "./hocus.css";
+@import "./interest.css";
+@import "./scroll-state.css";

package/tailwindcss/variants/scroll-state.css

@@ -0,0 +1,245 @@
+@variant scrollable-none {
+  @container scroll-state(scrollable: none) {
+    @slot;
+  }
+}
+
+@variant scrollable-top {
+  @container scroll-state(scrollable: top) {
+    @slot;
+  }
+}
+
+@variant scrollable-right {
+  @container scroll-state(scrollable: right) {
+    @slot;
+  }
+}
+
+@variant scrollable-bottom {
+  @container scroll-state(scrollable: bottom) {
+    @slot;
+  }
+}
+
+@variant scrollable-left {
+  @container scroll-state(scrollable: left) {
+    @slot;
+  }
+}
+
+@variant scrollable-x {
+  @container scroll-state(scrollable: x) {
+    @slot;
+  }
+}
+
+@variant scrollable-y {
+  @container scroll-state(scrollable: y) {
+    @slot;
+  }
+}
+
+@variant scrollable-block-start {
+  @container scroll-state(scrollable: block-start) {
+    @slot;
+  }
+}
+
+@variant scrollable-block-end {
+  @container scroll-state(scrollable: block-end) {
+    @slot;
+  }
+}
+
+@variant scrollable-inline-start {
+  @container scroll-state(scrollable: inline-start) {
+    @slot;
+  }
+}
+
+@variant scrollable-inline-end {
+  @container scroll-state(scrollable: inline-end) {
+    @slot;
+  }
+}
+
+@variant scrollable-block {
+  @container scroll-state(scrollable: block) {
+    @slot;
+  }
+}
+
+@variant scrollable-inline {
+  @container scroll-state(scrollable: inline) {
+    @slot;
+  }
+}
+
+@variant scrolled-none {
+  @container scroll-state(scrolled: none) {
+    @slot;
+  }
+}
+
+@variant scrolled-top {
+  @container scroll-state(scrolled: top) {
+    @slot;
+  }
+}
+
+@variant scrolled-right {
+  @container scroll-state(scrolled: right) {
+    @slot;
+  }
+}
+
+@variant scrolled-bottom {
+  @container scroll-state(scrolled: bottom) {
+    @slot;
+  }
+}
+
+@variant scrolled-left {
+  @container scroll-state(scrolled: left) {
+    @slot;
+  }
+}
+
+@variant scrolled-x {
+  @container scroll-state(scrolled: x) {
+    @slot;
+  }
+}
+
+@variant scrolled-y {
+  @container scroll-state(scrolled: y) {
+    @slot;
+  }
+}
+
+@variant scrolled-block-start {
+  @container scroll-state(scrolled: block-start) {
+    @slot;
+  }
+}
+
+@variant scrolled-block-end {
+  @container scroll-state(scrolled: block-end) {
+    @slot;
+  }
+}
+
+@variant scrolled-inline-start {
+  @container scroll-state(scrolled: inline-start) {
+    @slot;
+  }
+}
+
+@variant scrolled-inline-end {
+  @container scroll-state(scrolled: inline-end) {
+    @slot;
+  }
+}
+
+@variant scrolled-block {
+  @container scroll-state(scrolled: block) {
+    @slot;
+  }
+}
+
+@variant scrolled-inline {
+  @container scroll-state(scrolled: inline) {
+    @slot;
+  }
+}
+
+@variant snapped-none {
+  @container scroll-state(snapped: none) {
+    @slot;
+  }
+}
+
+@variant snapped-x {
+  @container scroll-state(snapped: x) {
+    @slot;
+  }
+}
+
+@variant snapped-y {
+  @container scroll-state(snapped: y) {
+    @slot;
+  }
+}
+
+@variant snapped-block {
+  @container scroll-state(snapped: block) {
+    @slot;
+  }
+}
+
+@variant snapped-inline {
+  @container scroll-state(snapped: inline) {
+    @slot;
+  }
+}
+
+@variant snapped-both {
+  @container scroll-state(snapped: both) {
+    @slot;
+  }
+}
+
+@variant stuck-none {
+  @container scroll-state(stuck: none) {
+    @slot;
+  }
+}
+
+@variant stuck-top {
+  @container scroll-state(stuck: top) {
+    @slot;
+  }
+}
+
+@variant stuck-right {
+  @container scroll-state(stuck: right) {
+    @slot;
+  }
+}
+
+@variant stuck-bottom {
+  @container scroll-state(stuck: bottom) {
+    @slot;
+  }
+}
+
+@variant stuck-left {
+  @container scroll-state(stuck: left) {
+    @slot;
+  }
+}
+
+@variant stuck-block-start {
+  @container scroll-state(stuck: block-start) {
+    @slot;
+  }
+}
+
+@variant stuck-block-end {
+  @container scroll-state(stuck: block-end) {
+    @slot;
+  }
+}
+
+@variant stuck-inline-start {
+  @container scroll-state(stuck: inline-start) {
+    @slot;
+  }
+}
+
+@variant stuck-inline-end {
+  @container scroll-state(stuck: inline-end) {
+    @slot;
+  }
+}

package/types/index.d.ts

@@ -27,6 +27,14 @@ declare module 'winduum' {
 	export {};
 }
 
+declare module 'winduum/supports' {
+	export const supportsTimelineTrigger: boolean;
+
+	export const supportsInterestFor: boolean;
+
+	export {};
+}
+
 declare module 'winduum/src/components/carousel' {
 	export interface ObserveCarouselOptions {
 		visibleAttribute?: string
@@ -113,7 +121,7 @@ declare module 'winduum/src/components/drawer' {
 
 declare module 'winduum/src/components/form' {
 	export interface ValidateFormOptions {
-		validateSelectors?: string
+		validateSelector?: string
 		validateOptions?: ValidateFieldOptions
 		validateField?: typeof validateField
 		scrollOptions?: ScrollIntoViewOptions
@@ -121,26 +129,19 @@ declare module 'winduum/src/components/form' {
 	}
 
 	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
 
 	export {};
 }