winduum 3.0.0-next.1 → 3.0.0-next.2

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/polyfills/timelineTrigger.js

@@ -0,0 +1,54 @@
+const selector = '[class*="timeline-trigger-"]'
+
+const getThreshold = (style, property, fallback) => {
+  const value = parseFloat(style.getPropertyValue(property))
+
+  return Number.isNaN(value) ? fallback : value / 100
+}
+
+const observeElement = (element) => {
+  if (element._timelineTriggerObserver) return
+
+  const style = getComputedStyle(element)
+  const enter = getThreshold(style, '--tw-timeline-trigger-entry', 0.2)
+  const exit = getThreshold(style, '--tw-timeline-trigger-exit', 0)
+
+  element._timelineTriggerObserver = new IntersectionObserver(([entry]) => {
+    if (entry.isIntersecting && entry.intersectionRatio >= enter) {
+      element.setAttribute('data-enter', '')
+    }
+    else if (entry.intersectionRatio <= exit) {
+      element.removeAttribute('data-enter')
+    }
+  }, { threshold: [exit, enter] })
+
+  element._timelineTriggerObserver.observe(element)
+}
+
+const unobserveElement = (element) => {
+  element._timelineTriggerObserver?.disconnect()
+  delete element._timelineTriggerObserver
+}
+
+const observe = (node) => {
+  if (node.nodeType !== 1) return
+
+  if (node.matches(selector)) observeElement(node)
+
+  node.querySelectorAll(selector).forEach(observeElement)
+}
+
+const unobserve = (node) => {
+  if (node.nodeType !== 1) return
+
+  if (node.matches(selector)) unobserveElement(node)
+
+  node.querySelectorAll(selector).forEach(unobserveElement)
+}
+
+document.querySelectorAll(selector).forEach(observeElement)
+
+new MutationObserver(mutations => mutations.forEach(({ addedNodes, removedNodes }) => {
+  addedNodes.forEach(observe)
+  removedNodes.forEach(unobserve)
+})).observe(document.documentElement, { childList: true, subtree: true })

package/src/supports.js

@@ -0,0 +1,19 @@
+/**
+ * @type {boolean}
+ */
+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/theme/config/radius.css

@@ -1,4 +1,12 @@
 @theme {
-  --radius: var(--radius-xl);
+  --radius: 0.125rem;
+  --radius-xs: calc(var(--radius) * 1);
+  --radius-sm: calc(var(--radius) * 2);
+  --radius-md: calc(var(--radius) * 3);
+  --radius-lg: calc(var(--radius) * 4);
+  --radius-xl: calc(var(--radius) * 6);
+  --radius-2xl: calc(var(--radius) * 8);
+  --radius-3xl: calc(var(--radius) * 12);
+  --radius-4xl: calc(var(--radius) * 16);
   --radius-full: calc(infinity * 1px);
 }

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.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/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

package/types/index.d.ts.map

@@ -5,6 +5,8 @@
 		"PluginOptions",
 		"defaultConfig",
 		"createPlugin",
+		"supportsTimelineTrigger",
+		"supportsInterestFor",
 		"ObserveCarouselOptions",
 		"PaginationCarouselOptions",
 		"ScrollCarouselOptions",
@@ -23,6 +25,13 @@
 		"setPosition",
 		"setKeyboardStep",
 		"setMouseStep",
+		"DefaultOptions",
+		"defaultOptions",
+		"showDetails",
+		"closeDetails",
+		"toggleDetails",
+		"showDialog",
+		"closeDialog",
 		"ScrollDrawerOptions",
 		"showDrawer",
 		"closeDrawer",
@@ -41,8 +50,11 @@
 		"closeToast",
 		"showToast",
 		"closeToaster",
-		"computePositionPopover",
-		"autoUpdatePopover",
+		"ShowPopoverOptions",
+		"HidePopoverOptions",
+		"showPopover",
+		"hidePopover",
+		"togglePopover",
 		"SetTrackPropertyOptions",
 		"SetValueOptions",
 		"SetOutputOptions",
@@ -55,8 +67,11 @@
 	],
 	"sources": [
 		"../plugin/index.d.ts",
+		"../src/supports.js",
 		"../src/components/carousel/index.d.ts",
 		"../src/components/compare/index.d.ts",
+		"../src/components/details/index.d.ts",
+		"../src/components/dialog/index.d.ts",
 		"../src/components/drawer/index.d.ts",
 		"../src/components/form/index.d.ts",
 		"../src/components/tabs/index.d.ts",
@@ -79,8 +94,11 @@
 		null,
 		null,
 		null,
+		null,
+		null,
+		null,
 		null
 	],
-	"mappings": ";;kBAEiBA,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBjBC,aAAaA;;yBAEFC,YAAYA;;;;;;kBCxBnBC,sBAAsBA;;;;;;;;kBAQtBC,yBAAyBA;;;;;;kBAMzBC,qBAAqBA;;;;;;;;kBAQrBC,uBAAuBA;;;;;kBAKvBC,mBAAmBA;;;;iBAIpBC,UAAUA;iBACVC,UAAUA;iBACVC,QAAQA;iBACRC,YAAYA;iBACZC,eAAeA;iBACfC,cAAcA;iBACdC,kBAAkBA;iBAClBC,gBAAgBA;iBAChBC,YAAYA;;;;;;kBCvCXC,kBAAkBA;;;;;iBAKnBC,WAAWA;iBACXC,eAAeA;iBACfC,YAAYA;;;;;;;;;;;kBCPXC,mBAAmBA;;;;;;;;;;iBAUpBC,UAAUA;iBACVC,WAAWA;iBACXC,gBAAgBA;iBAChBC,sBAAsBA;iBACtBC,iBAAiBA;iBACjBC,YAAYA;;;;;;kBCfXC,mBAAmBA;;;;;;;;kBAQnBC,oBAAoBA;;;;;;;;;;;;;;;;;;;iBAmBrBC,YAAYA;iBACZC,aAAaA;;;;;;WC5BnBC,gBAAgBA;;;;;iBAKVC,SAASA;;;;;;kBCLRC,gBAAgBA;;;;;;;kBAOhBC,iBAAiBA;;;;;;iBAMlBC,UAAUA;iBACVC,SAASA;;;;;;kBCdRF,iBAAiBA;;;;;iBAKlBG,YAAYA;;;;;;;;kBCFJC,sBAAsBA;;;;;;;kBAOtBC,iBAAiBA;;;;;;;;;;;kBCVxBC,uBAAuBA;;;;;;;kBAOvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;;;kBCnBbC,eAAeA;;;;;;iBAMhBC,UAAUA;;;;;;iBCNVC,UAAUA",
+	"mappings": ";;kBAEiBA,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBjBC,aAAaA;;yBAEFC,YAAYA;;;;;;cCrBvBC,uBAAuBA;;cAKvBC,mBAAmBA;;;;;;kBCRfC,sBAAsBA;;;;;;;;kBAQtBC,yBAAyBA;;;;;;kBAMzBC,qBAAqBA;;;;;;;;kBAQrBC,uBAAuBA;;;;;kBAKvBC,mBAAmBA;;;;iBAIpBC,UAAUA;iBACVC,UAAUA;iBACVC,QAAQA;iBACRC,YAAYA;iBACZC,eAAeA;iBACfC,cAAcA;iBACdC,kBAAkBA;iBAClBC,gBAAgBA;iBAChBC,YAAYA;;;;;;kBCvCXC,kBAAkBA;;;;;iBAKnBC,WAAWA;iBACXC,eAAeA;iBACfC,YAAYA;;;;;;kBCPXC,cAAcA;;;;;cAKlBC,cAAcA;iBACXC,WAAWA;iBACXC,YAAYA;iBACZC,aAAaA;;;;;;kBCRZJ,cAAcA;;;;;;;;;;cAUlBC,cAAcA;iBACXI,UAAUA;iBACVC,WAAWA;;;;;;kBCZVC,mBAAmBA;;;;;;;;;;iBAUpBC,UAAUA;iBACVC,WAAWA;iBACXC,gBAAgBA;iBAChBC,sBAAsBA;iBACtBC,iBAAiBA;iBACjBC,YAAYA;;;;;;kBCfXC,mBAAmBA;;;;;;;;kBAQnBC,oBAAoBA;;;;;;;;;;;;;;;;;;;iBAmBrBC,YAAYA;iBACZC,aAAaA;;;;;;WC5BnBC,gBAAgBA;;;;;iBAKVC,SAASA;;;;;;kBCLRC,gBAAgBA;;;;;;;kBAOhBC,iBAAiBA;;;;;;iBAMlBC,UAAUA;iBACVC,SAASA;;;;;;kBCdRF,iBAAiBA;;;;;iBAKlBG,YAAYA;;;;;;;kBCHXC,kBAAkBA;;;;;;;;;;;kBAWlBC,kBAAkBA;;;;iBAInBC,WAAWA;iBACXC,WAAWA;iBACXC,aAAaA;;;;;;kBCnBZC,uBAAuBA;;;;;;;kBAOvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;;;kBCnBbC,eAAeA;;;;;;iBAMhBC,UAAUA;;;;;;iBCNVC,UAAUA",
 	"ignoreList": []
 }