lapikit 0.1.12 → 0.1.14

package/dist/components/accordion/accordion.css

@@ -49,9 +49,9 @@
 	border-radius: var(--shape, var(--accordion-radius, var(--kit-radius-md)));
 	color: var(--on, var(--accordion-color, var(--kit-on-container)));
 	background-color: var(--base, var(--accordion-background, var(--kit-container)));
-	transition:
+	/* transition:
 		color 0.5s,
-		background-color 0.5s;
+		background-color 0.5s; */
 }
 
 .kit-accordion .kit-accordion-item > button,

package/dist/components/alert/alert.css

@@ -15,9 +15,9 @@
 	color: var(--alert-color);
 	background-color: var(--alert-background);
 	border-radius: var(--alert-radius);
-	transition:
+	/* transition:
 		color 0.5s,
-		background-color 0.5s;
+		background-color 0.5s; */
 }
 
 .kit-alert .kit-alert--underlay {

package/dist/components/appbar/appbar.css

@@ -15,10 +15,10 @@
 	color: var(--appbar-color);
 	background-color: var(--appbar-background);
 	border-color: var(--appbar-background);
-	transition:
+	/* transition:
 		color 0.5s,
 		border-color 0.5s,
-		background-color 0.5s;
+		background-color 0.5s; */
 }
 
 /* wrapper */

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

@@ -11,9 +11,9 @@
 	flex-direction: column;
 	text-align: start;
 	overflow: hidden;
-	transition:
+	/* transition:
 		color 0.5s,
-		background-color 0.5s;
+		background-color 0.5s; */
 	padding-top: var(--card-spacing-x);
 	padding-bottom: var(--card-spacing-x);
 	padding-right: var(--card-spacing-y);

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

@@ -11,9 +11,9 @@
 	width: auto;
 	opacity: 1;
 	transition-property: opacity, transform;
-	transition:
+	/* transition:
 		color 0.5s,
-		background-color 0.5s;
+		background-color 0.5s; */
 
 	/* theme */
 	background-color: var(--dropdown-background);

package/dist/components/icon/icon.css

@@ -4,7 +4,7 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	transition: color 0.5s;
+	/* transition: color 0.5s; */
 	text-indent: 0;
 	font-size: calc(
 		var(--icon-multiplier-parent-size, var(--icon-multiplier-size)) * var(--kit-spacing)

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/components/popover/popover.css

@@ -11,9 +11,9 @@
 	width: auto;
 	opacity: 1;
 	transition-property: opacity, transform;
-	transition:
+	/* transition:
 		color 0.5s,
-		background-color 0.5s;
+		background-color 0.5s; */
 
 	/* theme */
 	background-color: var(--popover-background);

package/dist/components/separator/separator.css

@@ -9,7 +9,7 @@
 	opacity: var(--separator-opacity);
 	transition: inherit;
 	border-color: var(--separator-color);
-	transition: border-color 0.5s;
+	/* transition: border-color 0.5s; */
 	border-style: solid;
 }
 

package/dist/components/toolbar/toolbar.css

@@ -7,10 +7,10 @@
 	align-items: center;
 	min-width: max-content;
 	border-style: solid;
-	transition:
+	/* transition:
 		color 0.5s,
 		border-color 0.5s,
-		background-color 0.5s;
+		background-color 0.5s; */
 
 	border-width: 1px;
 	border-style: solid;

package/dist/components/tooltip/tooltip.css

@@ -19,10 +19,10 @@
 	width: auto;
 	pointer-events: none;
 	overflow-wrap: break-word;
-	transition:
+	/* transition:
 		color 0.5s,
 		border-color 0.5s,
-		background-color 0.5s;
+		background-color 0.5s; */
 	box-shadow: 0px 16px 29px -10px color-mix(in oklab, var(--kit-scrim) 60%, transparent);
 }
 

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.12",
+	"version": "0.1.14",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"