lapikit 0.1.13 → 0.1.14

package/dist/components/button/button.css

@@ -17,6 +17,7 @@
 	border-radius: var(--button-radius);
 	color: var(--button-color);
 	font-weight: 500;
+	text-decoration: none;
 }
 
 .kit-button,

package/dist/components/button/button.svelte

@@ -65,6 +65,7 @@
 	disabled={href ? undefined : disabled}
 	type={href ? undefined : type}
 	use:ripple={{
+		component: 'button',
 		disabled: noRipple || disabled
 	}}
 	style:--base={assets.color(background)}

package/dist/components/card/card.svelte

@@ -52,6 +52,7 @@
 	]}
 	disabled={href ? undefined : disabled}
 	use:ripple={{
+		component: 'card',
 		disabled: noRipple || disabled || !isClickable
 	}}
 	style:--base={assets.color(background)}

package/dist/components/chip/chip.css

@@ -17,6 +17,7 @@
 	border-radius: var(--chip-radius);
 	color: var(--chip-color);
 	font-weight: 500;
+	text-decoration: none;
 }
 
 .kit-chip:not(div):not(span) {

package/dist/components/chip/chip.svelte

@@ -76,6 +76,7 @@
 		disabled={href ? undefined : disabled}
 		type={href ? undefined : type}
 		use:ripple={{
+			component: 'chip',
 			disabled: noRipple || disabled || is === 'div' || is === 'span'
 		}}
 		style:--base={assets.color(background)}

package/dist/components/list/list.css

@@ -29,6 +29,7 @@
 	color: var(--list-item-color);
 	border-radius: var(--list-item-radius);
 	font-weight: 500;
+	text-decoration: none;
 }
 
 .kit-list-item:not(div) {

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

@@ -47,6 +47,7 @@
 		rest.class
 	]}
 	use:ripple={{
+		component: 'list-item',
 		disabled: noRipple || disabled || is === 'div'
 	}}
 	role={is === 'button' ? 'listitem' : undefined}

package/dist/internal/ripple.d.ts

@@ -1,4 +1,5 @@
 interface RippleOptions {
+    component?: string;
     center?: boolean;
     color?: string;
     duration?: number;

package/dist/internal/ripple.js

@@ -26,6 +26,9 @@ export function ripple(el, options = {}) {
         if (options.duration && options.duration < 0) {
             options.duration = undefined;
         }
+        if (options.component) {
+            rippleContainer.style.setProperty('--ripple-radius', `var(--${options.component}-radius)`);
+        }
         if (options.color) {
             rippleContainer.style.setProperty('--ripple-color', options.color);
         }

package/dist/style/animation.css

@@ -29,6 +29,7 @@
 	transition: 0.6s;
 	-webkit-animation: lapikit-ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
 	animation: lapikit-ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
+	border-radius: var(--ripple-radius);
 }
 
 .kit-ripple--center {
@@ -47,6 +48,7 @@
 	background: none;
 	pointer-events: none;
 	z-index: 999;
+	border-radius: var(--ripple-radius);
 }
 
 @keyframes lapikit-ripple {

package/dist/style/parser/color.js

@@ -38,7 +38,7 @@ export const colors = (config) => {
             }
             cssVariables += `}\n`;
             cssVariables += `.${inversed} {\n`;
-            cssVariables += `color-scheme: ${used};\n`;
+            cssVariables += `color-scheme: ${inversed};\n`;
             for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
                 cssVariables += `--kit-${colorName}: ${colorValue};\n`;
             }
@@ -56,7 +56,7 @@ export const colors = (config) => {
         }
         cssVariables += `}\n`;
         cssVariables += `.${inversed} {\n`;
-        cssVariables += `color-scheme: ${used};\n`;
+        cssVariables += `color-scheme: ${inversed};\n`;
         for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
             cssVariables += `--kit-${colorName}: ${colorValue};\n`;
         }

package/package.json

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