lapikit 0.6.11 → 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/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/package.json

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