lapikit 0.6.10 → 0.6.12

package/dist/animations/ripple.js

@@ -10,41 +10,49 @@ function getCoords(e) {
     return { x: e.clientX, y: e.clientY };
 }
 export function ripple(el, options = {}) {
-    const rippleContainer = document.createElement('div');
+    // created on first interaction, removed once every ripple has faded out
+    let rippleContainer;
     const activeRipples = new Set();
-    addClasses();
-    setOptions(options);
     function isAriaDisabled() {
         return el.getAttribute('aria-disabled') === 'true';
     }
-    function addClasses(center) {
-        const shouldBeCentered = center || options.center;
-        if (!rippleContainer.classList.contains('kit-ripple--effect')) {
-            rippleContainer.classList.add('kit-ripple--effect');
+    function applyOptions(container) {
+        if (options.component) {
+            container.style.setProperty('--system-ripple-radius', `var(--kit-${options.component}-radius)`);
         }
-        if (!shouldBeCentered && rippleContainer.classList.contains('kit-ripple--center')) {
-            rippleContainer.classList.remove('kit-ripple--center');
+        if (options.color) {
+            container.style.setProperty('--system-ripple-color', options.color);
         }
-        if (shouldBeCentered) {
-            rippleContainer.classList.add('kit-ripple--center');
+        const duration = resolveDuration(options);
+        if (duration) {
+            container.style.setProperty('--system-animation-ripple-duration', `${duration}ms`);
         }
     }
-    function setOptions(newOptions) {
-        if (newOptions.disabled || isAriaDisabled()) {
-            rippleContainer.remove();
+    function mountContainer(center) {
+        if (!rippleContainer) {
+            rippleContainer = document.createElement('div');
+            rippleContainer.classList.add('kit-ripple--effect');
+            applyOptions(rippleContainer);
         }
-        else {
+        rippleContainer.classList.toggle('kit-ripple--center', !!(center || options.center));
+        if (!rippleContainer.isConnected) {
             el.appendChild(rippleContainer);
         }
-        if (newOptions.component) {
-            rippleContainer.style.setProperty('--system-ripple-radius', `var(--kit-${newOptions.component}-radius)`);
-        }
-        if (newOptions.color) {
-            rippleContainer.style.setProperty('--system-ripple-color', newOptions.color);
+        return rippleContainer;
+    }
+    function unmountContainer() {
+        rippleContainer?.remove();
+        rippleContainer = undefined;
+    }
+    function setOptions(newOptions) {
+        options = newOptions;
+        if (newOptions.disabled || isAriaDisabled()) {
+            activeRipples.forEach((cleanup) => cleanup());
+            activeRipples.clear();
+            unmountContainer();
         }
-        const duration = resolveDuration(newOptions);
-        if (duration) {
-            rippleContainer.style.setProperty('--system-animation-ripple-duration', `${duration}ms`);
+        else if (rippleContainer) {
+            applyOptions(rippleContainer);
         }
     }
     function createRipple(e, center) {
@@ -60,7 +68,7 @@ export function ripple(el, options = {}) {
             createRipple(click, true);
             return;
         }
-        addClasses(center);
+        const container = mountContainer(center);
         const rect = el.getBoundingClientRect();
         const { x: clientX, y: clientY } = getCoords(e);
         const x = clientX - rect.left > el.offsetWidth / 2 ? 0 : el.offsetWidth;
@@ -71,7 +79,7 @@ export function ripple(el, options = {}) {
         ripple.style.left = `${clientX - rect.left - radius}px`;
         ripple.style.top = `${clientY - rect.top - radius}px`;
         ripple.style.width = ripple.style.height = `${radius * 2}px`;
-        rippleContainer.appendChild(ripple);
+        container.appendChild(ripple);
         let timeoutId;
         function cleanup() {
             if (timeoutId) {
@@ -80,12 +88,18 @@ export function ripple(el, options = {}) {
             cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
             ripple.remove();
         }
+        function release() {
+            activeRipples.delete(cleanup);
+            if (activeRipples.size === 0) {
+                unmountContainer();
+            }
+        }
         function removeRipple() {
             ripple.style.opacity = '0';
             cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
             timeoutId = setTimeout(() => {
                 ripple.remove();
-                activeRipples.delete(cleanup);
+                release();
             }, resolveDuration(options) || 1000);
         }
         activeRipples.add(cleanup);
@@ -99,10 +113,9 @@ export function ripple(el, options = {}) {
             });
             activeRipples.forEach((cleanup) => cleanup());
             activeRipples.clear();
-            rippleContainer.remove();
+            unmountContainer();
         },
         update(newOptions) {
-            options = newOptions;
             setOptions(newOptions);
         }
     };

package/dist/components/dropdown/dropdown.svelte

@@ -63,10 +63,6 @@
 	let activatorRef = $state<HTMLElement | PointerEvent | null>(null);
 	let open = $state(false);
 	let axis = $state(positioner.values);
-	let innerHeight = $state(0);
-	let innerWidth = $state(0);
-	let scrollX = $state(0);
-	let scrollY = $state(0);
 	let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
 
 	const clearHoverTimeout = () => {
@@ -131,18 +127,17 @@
 	});
 
 	$effect(() => {
-		if (
-			open &&
-			contentRef &&
-			activatorRef &&
-			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
-		) {
-			updatePosition();
-		}
-	});
+		if (!open) return;
 
-	$effect(() => {
-		if (scrollX || scrollY) open = false;
+		const close = () => (open = false);
+
+		window.addEventListener('scroll', close, { passive: true });
+		window.addEventListener('resize', updatePosition);
+
+		return () => {
+			window.removeEventListener('scroll', close);
+			window.removeEventListener('resize', updatePosition);
+		};
 	});
 
 	$effect(() => {
@@ -154,8 +149,6 @@
 	});
 </script>
 
-<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
-
 {@render activator?.(model, (state, element) => handleMouseEvent(state, element))}
 
 {#if open}

package/dist/components/list/list.svelte

@@ -158,9 +158,15 @@
 		--kit-list-item-hover-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 80%);
 		--kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 92%);
 	}
-	.kit-list[data-variant='text'] :global(.kit-list-item .outline),
-	.kit-list[data-variant='filled'] :global(.kit-list-item .outline) {
-		display: none;
+	.kit-list[data-variant='outline'] :global(.kit-list-item::before) {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border: 1px solid var(--kit-list-item-bd);
+		border-radius: inherit;
+		box-sizing: border-box;
+		z-index: 1;
+		pointer-events: none;
 	}
 
 	/** 

package/dist/components/list/modules/list-item.svelte

@@ -81,7 +81,6 @@
 	}}
 	{...restProps}
 >
-	<span class="outline"></span>
 	{#if prepend}
 		<span class="kit-list-item__prepend">
 			{@render prepend?.()}
@@ -189,8 +188,4 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-
-	.kit-list-item .outline {
-		--outline-color: var(--kit-list-item-bd);
-	}
 </style>

package/dist/components/popover/popover.svelte

@@ -50,10 +50,6 @@
 	let contentRef = $state<HTMLElement | null>(null);
 	let activatorRef = $state<HTMLElement | null>(null);
 	let axis = $state(positioner.values);
-	let innerHeight = $state(0);
-	let innerWidth = $state(0);
-	let scrollX = $state(0);
-	let scrollY = $state(0);
 
 	const handleToggle = (element: HTMLElement | null) => {
 		if (element === null) return;
@@ -78,18 +74,17 @@
 	});
 
 	$effect(() => {
-		if (
-			open &&
-			contentRef &&
-			activatorRef &&
-			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
-		) {
-			updatePosition();
-		}
-	});
+		if (!open) return;
 
-	$effect(() => {
-		if (scrollX || scrollY) open = false;
+		const close = () => (open = false);
+
+		window.addEventListener('scroll', close, { passive: true });
+		window.addEventListener('resize', updatePosition);
+
+		return () => {
+			window.removeEventListener('scroll', close);
+			window.removeEventListener('resize', updatePosition);
+		};
 	});
 
 	$effect(() => {
@@ -107,8 +102,6 @@
 	);
 </script>
 
-<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
-
 {@render activator?.(model)}
 
 {#if open}

package/dist/components/tooltip/tooltip.svelte

@@ -72,10 +72,6 @@
 	let tooltipRef = $state<HTMLElement | null>(null);
 	let axis = $state(positioner.values);
 	let timer = $state<ReturnType<typeof setTimeout> | null>(null);
-	let innerHeight = $state(0);
-	let innerWidth = $state(0);
-	let scrollX = $state(0);
-	let scrollY = $state(0);
 	const tooltipId = `kit-tooltip-${Math.random().toString(36).slice(2, 10)}`;
 
 	const clearTimer = () => {
@@ -138,14 +134,15 @@
 	});
 
 	$effect(() => {
-		if (
-			open &&
-			triggerRef &&
-			tooltipRef &&
-			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
-		) {
-			updatePosition();
-		}
+		if (!open) return;
+
+		window.addEventListener('scroll', updatePosition, { passive: true });
+		window.addEventListener('resize', updatePosition);
+
+		return () => {
+			window.removeEventListener('scroll', updatePosition);
+			window.removeEventListener('resize', updatePosition);
+		};
 	});
 
 	$effect(() => {
@@ -157,8 +154,6 @@
 	});
 </script>
 
-<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
-
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <span
 	bind:this={triggerRef}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.6.10",
+	"version": "0.6.12",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"