lapikit 0.7.2 → 0.7.4

package/dist/components/card/modules/card-content.svelte

@@ -1,64 +1,38 @@
 <script lang="ts">
 	import type { CardContentProps } from '../card.types';
-	import { makeComponentProps } from '../../../html-mapped';
-	import { useClassName, useStyles } from '../../../utils';
+	import { useComponentAttrs } from '../../../utils';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		color,
 		...rest
 	}: CardContentProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card-content',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[componentStyle, color ? `--kit-card-content-fg:${color && `var(--kit-color-${color})`}` : '']
-			.filter(Boolean)
-			.join('; ')
+	let attrs = $derived(
+		useComponentAttrs('kit-card-content', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 </script>
 
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
-	{...restProps}
->
+<svelte:element this={is} bind:this={ref} class={attrs.class} style={attrs.style} {...attrs.rest}>
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-card-content {
-		color: var(--kit-card-content-fg, --kit-card-fg);
-		display: block;
-		line-height: 1.45;
-	}
+<style>:where(.kit-card-content) {
+  --kit-card-content-color: initial;
+}
+
+.kit-card-content {
+  color: var(--kit-card-content-color, currentColor);
+  display: block;
+  line-height: 1.45;
+}
 
-	.kit-card-content > :global(*) {
-		margin: 0;
-	}
-</style>
+.kit-card-content > :global(*) {
+  margin: 0;
+}</style>

package/dist/components/card/modules/card-media.svelte

@@ -1,52 +1,28 @@
 <script lang="ts">
 	import type { CardMediaProps } from '../card.types';
-	import { makeComponentProps } from '../../../html-mapped';
-	import { useClassName, useStyles } from '../../../utils';
+	import { useComponentAttrs } from '../../../utils';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		...rest
 	}: CardMediaProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card-media',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
+	let attrs = $derived(
+		useComponentAttrs('kit-card-media', { className, sClass, styleAttr, sStyle }, rest)
 	);
 </script>
 
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={componentStyle}
-	{...restProps}
->
+<svelte:element this={is} bind:this={ref} class={attrs.class} style={attrs.style} {...attrs.rest}>
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-card-media {
-		overflow: hidden;
-		border-radius: calc(var(--kit-card-radius) - 2px);
-	}
-</style>
+<style>.kit-card-media {
+  overflow: hidden;
+  border-radius: min(var(--kit-card-radius), max(var(--kit-card-radius) - var(--kit-card-padding), var(--kit-shape-xs)));
+}</style>

package/dist/components/card/modules/card-title.svelte

@@ -1,67 +1,41 @@
 <script lang="ts">
 	import type { CardTitleProps } from '../card.types';
-	import { makeComponentProps } from '../../../html-mapped';
-	import { useClassName, useStyles } from '../../../utils';
+	import { useComponentAttrs } from '../../../utils';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		color,
 		...rest
 	}: CardTitleProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card-title',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[componentStyle, color ? `--kit-card-title-fg:${color && `var(--kit-color-${color})`}` : '']
-			.filter(Boolean)
-			.join('; ')
+	let attrs = $derived(
+		useComponentAttrs('kit-card-title', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 </script>
 
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
-	{...restProps}
->
+<svelte:element this={is} bind:this={ref} class={attrs.class} style={attrs.style} {...attrs.rest}>
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-card-title {
-		display: flex;
-		align-items: center;
-		gap: var(--kit-card-gap);
-		color: var(--kit-card-title-fg, --kit-card-fg);
-		font-weight: 600;
-		line-height: 1.3;
-	}
-
-	.kit-card-title > :global(*) {
-		margin: 0;
-	}
-</style>
+<style>:where(.kit-card-title) {
+  --kit-card-title-color: initial;
+}
+
+.kit-card-title {
+  display: flex;
+  align-items: center;
+  gap: var(--kit-card-gap);
+  color: var(--kit-card-title-color, currentColor);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.kit-card-title > :global(*) {
+  margin: 0;
+}</style>