lapikit 0.6.4 → 0.6.6

package/dist/components/avatar/avatar.svelte

@@ -44,22 +44,30 @@
 	let elevationState = $derived(useElevation(elevation));
 	let contentType = $derived(label && label.trim().length > 0 ? 'label' : children);
 	let displayLabel = $derived(label?.trim() ?? '');
+
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-avatar-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-avatar-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={'div'}
 	bind:this={ref}
 	class={componentClass}
-	style={componentStyle}
+	style={resolvedStyle}
 	data-type={contentType}
-	data-size={contentType === 'label' ? size : undefined}
-	data-density={contentType === 'label' ? density : undefined}
+	data-size={size}
+	data-density={density}
 	data-rounded={rounded}
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
 	data-elevation-active={elevationState.active}
-	style:--kit-avatar-fg={color && `var(--kit-color-${color})`}
-	style:--kit-avatar-bg={background && `var(--kit-color-${background})`}
 	{...restProps}
 >
 	{#if contentType === 'label'}
@@ -74,9 +82,8 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: calc(var(--kit-avatar-h) * var(--kit-avatar-density-h-scale));
-		height: calc(var(--kit-avatar-h) * var(--kit-avatar-density-h-scale));
-		padding: calc(var(--kit-avatar-px) * var(--kit-avatar-density-scale));
+		width: calc(var(--kit-avatar-h) + var(--kit-avatar-density-offset) / 2);
+		height: calc(var(--kit-avatar-h) + var(--kit-avatar-density-offset) / 2);
 		overflow: hidden;
 		background: var(--kit-color-surface-3);
 		color: var(--kit-color-text);
@@ -143,21 +150,14 @@
 	 * density
 	 * @link ...
 	 */
-	.kit-avatar[data-density='none'] {
-		--kit-avatar-density-scale: 0;
-		--kit-avatar-density-h-scale: 0;
-	}
 	.kit-avatar[data-density='compact'] {
-		--kit-avatar-density-scale: 0.8;
-		--kit-avatar-density-h-scale: 0.92;
+		--kit-avatar-density-offset: var(--kit-density-compact);
 	}
 	.kit-avatar[data-density='default'] {
-		--kit-avatar-density-scale: 1;
-		--kit-avatar-density-h-scale: 1;
+		--kit-avatar-density-offset: var(--kit-density-default);
 	}
 	.kit-avatar[data-density='comfortable'] {
-		--kit-list-density-scale: 1.1;
-		--kit-avatar-density-h-scale: 1.15;
+		--kit-avatar-density-offset: var(--kit-density-comfortable);
 	}
 
 	/**
@@ -165,33 +165,28 @@
 	* @link nothing...
 	*/
 	.kit-avatar[data-size='xs'] {
-		--kit-avatar-h: 28px;
-		--kit-avatar-px: 10px;
-		--kit-avatar-gap: 4px;
-		--kit-avatar-font: 0.75rem;
+		--kit-avatar-h: 32px;
+		--kit-avatar-gap: var(--kit-space-compact);
+		--kit-avatar-font: var(--kit-font-xs);
 	}
 	.kit-avatar[data-size='sm'] {
-		--kit-avatar-h: 32px;
-		--kit-avatar-px: 12px;
-		--kit-avatar-gap: 6px;
-		--kit-avatar-font: 0.875rem;
+		--kit-avatar-h: 40px;
+		--kit-avatar-gap: var(--kit-space-default);
+		--kit-avatar-font: var(--kit-font-sm);
 	}
 	.kit-avatar[data-size='md'] {
-		--kit-avatar-h: 40px;
-		--kit-avatar-px: 16px;
-		--kit-avatar-gap: 8px;
-		--kit-avatar-font: 1rem;
+		--kit-avatar-h: 48px;
+		--kit-avatar-gap: var(--kit-space-default);
+		--kit-avatar-font: var(--kit-font-md);
 	}
 	.kit-avatar[data-size='lg'] {
-		--kit-avatar-h: 48px;
-		--kit-avatar-px: 20px;
-		--kit-avatar-gap: 10px;
-		--kit-avatar-font: 1.125rem;
+		--kit-avatar-h: 56px;
+		--kit-avatar-gap: var(--kit-space-default);
+		--kit-avatar-font: var(--kit-font-lg);
 	}
 	.kit-avatar[data-size='xl'] {
-		--kit-avatar-h: 56px;
-		--kit-avatar-px: 24px;
-		--kit-avatar-gap: 12px;
-		--kit-avatar-font: 1.25rem;
+		--kit-avatar-h: 64px;
+		--kit-avatar-gap: var(--kit-space-comfortable);
+		--kit-avatar-font: var(--kit-font-xl);
 	}
 </style>

package/dist/components/btn/btn.svelte

@@ -72,6 +72,16 @@
 		if (tag !== 'button') return type;
 		return type ?? 'button';
 	});
+
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-btn-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-btn-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 {#if isInput}
@@ -79,7 +89,7 @@
 		this={inputWrapperTag}
 		bind:this={ref}
 		class={componentClass}
-		style={componentStyle}
+		style={resolvedStyle}
 		data-size={size}
 		data-variant={variant}
 		data-loading={loading}
@@ -99,8 +109,6 @@
 			component: 'btn',
 			disabled: noRipple || disabled
 		}}
-		style:--kit-btn-fg={color && `var(--kit-color-${color})`}
-		style:--kit-btn-bg={background && `var(--kit-color-${background})`}
 	>
 		{#if variant === 'outline'}
 			<span class="outline"></span>
@@ -122,7 +130,7 @@
 		this={tag}
 		bind:this={ref}
 		class={componentClass}
-		style={componentStyle}
+		style={resolvedStyle}
 		type={resolvedType()}
 		href={resolvedHref}
 		data-size={size}
@@ -145,8 +153,6 @@
 			component: 'btn',
 			disabled: noRipple || disabled
 		}}
-		style:--kit-btn-fg={color && `var(--kit-color-${color})`}
-		style:--kit-btn-bg={background && `var(--kit-color-${background})`}
 		{...restProps}
 	>
 		{#if variant === 'outline'}
@@ -214,8 +220,8 @@
 		font-family: var(--kit-font);
 		background: var(--kit-btn-bg);
 		color: var(--kit-btn-fg);
-		height: calc(var(--kit-btn-h) * var(--kit-btn-density-h-scale));
-		padding-inline: calc(var(--kit-btn-px) * var(--kit-btn-density-scale));
+		height: calc(var(--kit-btn-h) + var(--kit-btn-density-offset) / 2);
+		padding-inline: calc(var(--kit-btn-p) + var(--kit-btn-density-offset) / 2);
 		border-radius: var(--kit-btn-radius);
 		text-decoration: none;
 		white-space: nowrap;
@@ -260,7 +266,7 @@
 	}
 
 	:is(.kit-btn:focus-visible, .kit-btn:has(> input:focus-visible)) {
-		outline: 2px solid var(--kit-focus);
+		outline: 2px solid var(--kit-color-focus);
 		outline-offset: 2px;
 	}
 
@@ -345,8 +351,8 @@
 	}
 
 	.kit-btn[data-icon='true'] {
-		width: max(28px, calc(var(--kit-btn-h) * var(--kit-btn-density-h-scale)));
-		min-width: max(28px, calc(var(--kit-btn-h) * var(--kit-btn-density-h-scale)));
+		width: max(28px, calc(var(--kit-btn-h) + var(--kit-btn-density-offset) / 2));
+		min-width: max(28px, calc(var(--kit-btn-h) + var(--kit-btn-density-offset) / 2));
 		padding-inline: 0;
 	}
 
@@ -382,19 +388,19 @@
 	* @link nothing...
 	*/
 	.kit-btn[data-size='xs'] {
-		--kit-btn-h: 28px;
-		--kit-btn-px: 10px;
-		--kit-btn-gap: 4px;
-		--kit-btn-font: 0.75rem;
+		--kit-btn-h: 24px;
+		--kit-btn-p: 8px;
+		--kit-btn-gap: var(--kit-space-compact);
+		--kit-btn-font: 12px;
 	}
 	.kit-btn[data-size='xs'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-xs);
 	}
 	.kit-btn[data-size='sm'] {
 		--kit-btn-h: 32px;
-		--kit-btn-px: 12px;
-		--kit-btn-gap: 6px;
-		--kit-btn-font: 0.875rem;
+		--kit-btn-p: 12px;
+		--kit-btn-gap: var(--kit-space-default);
+		--kit-btn-font: 13px;
 	}
 	.kit-btn[data-size='sm'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-sm);
@@ -402,9 +408,9 @@
 
 	.kit-btn[data-size='md'] {
 		--kit-btn-h: 40px;
-		--kit-btn-px: 16px;
-		--kit-btn-gap: 8px;
-		--kit-btn-font: 1rem;
+		--kit-btn-p: 16px;
+		--kit-btn-gap: var(--kit-space-default);
+		--kit-btn-font: 14px;
 	}
 	.kit-btn[data-size='md'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-md);
@@ -412,9 +418,9 @@
 
 	.kit-btn[data-size='lg'] {
 		--kit-btn-h: 48px;
-		--kit-btn-px: 20px;
-		--kit-btn-gap: 10px;
-		--kit-btn-font: 1.125rem;
+		--kit-btn-p: 20px;
+		--kit-btn-gap: var(--kit-space-default);
+		--kit-btn-font: 16px;
 	}
 	.kit-btn[data-size='lg'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-lg);
@@ -422,9 +428,9 @@
 
 	.kit-btn[data-size='xl'] {
 		--kit-btn-h: 56px;
-		--kit-btn-px: 24px;
-		--kit-btn-gap: 12px;
-		--kit-btn-font: 1.25rem;
+		--kit-btn-p: 24px;
+		--kit-btn-gap: var(--kit-space-comfortable);
+		--kit-btn-font: 17px;
 	}
 	.kit-btn[data-size='xl'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-xl);
@@ -434,21 +440,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-btn[data-density='none'] {
-		--kit-btn-density-scale: 0;
-		--kit-btn-density-h-scale: 0;
-	}
 	.kit-btn[data-density='compact'] {
-		--kit-btn-density-scale: 0.9;
-		--kit-btn-density-h-scale: 0.92;
+		--kit-btn-density-offset: var(--kit-density-compact);
 	}
 	.kit-btn[data-density='default'] {
-		--kit-btn-density-scale: 1;
-		--kit-btn-density-h-scale: 1;
+		--kit-btn-density-offset: var(--kit-density-default);
 	}
 	.kit-btn[data-density='comfortable'] {
-		--kit-btn-density-scale: 1.1;
-		--kit-btn-density-h-scale: 1.15;
+		--kit-btn-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 

package/dist/components/card/card.svelte

@@ -55,13 +55,23 @@
 			styleProps
 		})
 	);
+
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-card-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-card-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={tag}
 	bind:this={ref}
 	class={componentClass}
-	style={componentStyle}
+	style={resolvedStyle}
 	href={resolvedHref}
 	type={resolvedType}
 	disabled={resolvedDisabled}
@@ -80,8 +90,6 @@
 		component: 'card',
 		disabled: noRipple || disabled || !isInteractive
 	}}
-	style:--kit-card-fg={color && `var(--kit-color-${color})`}
-	style:--kit-card-bg={background && `var(--kit-color-${background})`}
 	{...restProps}
 >
 	{#if variant === 'outline'}
@@ -102,7 +110,7 @@
 		border-radius: var(--kit-card-radius);
 		border: 0;
 		box-sizing: border-box;
-		padding: calc(10px * var(--kit-card-density-scale));
+		padding: calc(10px + var(--kit-card-density-offset) / 2);
 		transition:
 			background 140ms ease,
 			color 140ms ease,
@@ -149,20 +157,17 @@
 	 * density
 	 * @link https://lapikit.dev/docs/components/card#density 
 	 */
-	.kit-card[data-density='none'] {
-		--kit-card-density-scale: 0;
-	}
 	.kit-card[data-density='compact'] {
 		--kit-card-gap: var(--kit-space-compact);
-		--kit-card-density-scale: 0.8;
+		--kit-card-density-offset: var(--kit-density-compact);
 	}
 	.kit-card[data-density='default'] {
 		--kit-card-gap: var(--kit-space-default);
-		--kit-card-density-scale: 1;
+		--kit-card-density-offset: var(--kit-density-default);
 	}
 	.kit-card[data-density='comfortable'] {
 		--kit-card-gap: var(--kit-space-comfortable);
-		--kit-card-density-scale: 1.15;
+		--kit-card-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 
@@ -217,7 +222,7 @@
 	}
 
 	.kit-card[data-interactive='true'][data-disabled='false']:focus-visible {
-		outline: 2px solid var(--kit-focus);
+		outline: 2px solid var(--kit-color-focus);
 		outline-offset: 2px;
 	}
 

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

@@ -48,6 +48,6 @@
 	.kit-card-actions {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--kit-space-1);
+		gap: var(--kit-card-gap);
 	}
 </style>

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

@@ -11,6 +11,7 @@
 		style: styleAttr = '',
 		's-class': sClass,
 		's-style': sStyle,
+		color,
 		...rest
 	}: CardContentProps = $props();
 
@@ -32,13 +33,19 @@
 			styleProps
 		})
 	);
+
+	let resolvedStyle = $derived(
+		[componentStyle, color ? `--kit-card-content-fg:${color && `var(--kit-color-${color})`}` : '']
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
 	class={componentClass}
-	style={componentStyle}
+	style={resolvedStyle}
 	{...restProps}
 >
 	{@render children?.()}
@@ -46,6 +53,7 @@
 
 <style>
 	.kit-card-content {
+		color: var(--kit-card-content-fg, --kit-card-fg);
 		display: block;
 		line-height: 1.45;
 	}

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

@@ -11,6 +11,7 @@
 		style: styleAttr = '',
 		's-class': sClass,
 		's-style': sStyle,
+		color,
 		...rest
 	}: CardTitleProps = $props();
 
@@ -32,13 +33,19 @@
 			styleProps
 		})
 	);
+
+	let resolvedStyle = $derived(
+		[componentStyle, color ? `--kit-card-title-fg:${color && `var(--kit-color-${color})`}` : '']
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
 	class={componentClass}
-	style={componentStyle}
+	style={resolvedStyle}
 	{...restProps}
 >
 	{@render children?.()}
@@ -49,7 +56,7 @@
 		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;
 	}

package/dist/components/chip/chip.svelte

@@ -87,6 +87,16 @@
 	const resolvedDisabled = $derived((tag === 'button' && isLocked) || undefined);
 
 	const resolvedType = $derived(tag !== 'button' ? type : (type ?? 'button'));
+
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-chip-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-chip-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 {#if isInput}
@@ -94,7 +104,7 @@
 		this={inputWrapperTag}
 		bind:this={ref}
 		class={componentClass}
-		style={componentStyle}
+		style={resolvedStyle}
 		data-size={size}
 		data-variant={variant}
 		data-rounded={rounded}
@@ -114,8 +124,6 @@
 			component: 'chip',
 			disabled: noRipple || isLocked
 		}}
-		style:--kit-chip-fg={color && `var(--kit-color-${color})`}
-		style:--kit-chip-bg={background && `var(--kit-color-${background})`}
 	>
 		{#if variant === 'outline'}
 			<span class="outline"></span>
@@ -143,7 +151,7 @@
 		this={tag}
 		bind:this={ref}
 		class={componentClass}
-		style={componentStyle}
+		style={resolvedStyle}
 		type={resolvedType}
 		href={resolvedHref}
 		data-size={size}
@@ -167,8 +175,8 @@
 			component: 'chip',
 			disabled: noRipple || !isInteractive
 		}}
-		style:--kit-chip-fg={color && `var(--kit-color-${color})`}
-		style:--kit-chip-bg={background && `var(--kit-color-${background})`}
+		// style:--kit-chip-fg={color && `var(--kit-color-${color})`}
+		// style:--kit-chip-bg={background && `var(--kit-color-${background})`}
 		{...restProps}
 	>
 		{#if variant === 'outline'}
@@ -235,8 +243,8 @@
 		font-family: var(--kit-font);
 		background: var(--kit-chip-bg);
 		color: var(--kit-chip-fg);
-		height: calc(var(--kit-chip-h) * var(--kit-chip-density-h-scale));
-		padding-inline: calc(var(--kit-chip-px) * var(--kit-chip-density-scale));
+		height: calc(var(--kit-chip-h) + var(--kit-chip-density-offset) / 2);
+		padding-inline: calc(var(--kit-chip-p) + var(--kit-chip-density-offset) / 2);
 		border-radius: var(--kit-chip-radius);
 		text-decoration: none;
 		white-space: nowrap;
@@ -273,7 +281,7 @@
 	}
 
 	:is(.kit-chip:focus-visible, .kit-chip:has(> input:focus-visible)) {
-		outline: 2px solid var(--kit-focus);
+		outline: 2px solid var(--kit-color-focus);
 		outline-offset: 2px;
 	}
 
@@ -386,19 +394,19 @@
 	* @link nothing...
 	*/
 	.kit-chip[data-size='xs'] {
-		--kit-chip-h: 24px;
-		--kit-chip-px: 8px;
-		--kit-chip-gap: 4px;
-		--kit-chip-font: 0.75rem;
+		--kit-chip-h: 20px;
+		--kit-chip-p: 8px;
+		--kit-chip-gap: var(--kit-space-compact);
+		--kit-chip-font: 11px;
 	}
 	.kit-chip[data-size='xs'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-xs);
 	}
 	.kit-chip[data-size='sm'] {
-		--kit-chip-h: 28px;
-		--kit-chip-px: 10px;
-		--kit-chip-gap: 6px;
-		--kit-chip-font: 0.875rem;
+		--kit-chip-h: 24px;
+		--kit-chip-p: 10px;
+		--kit-chip-gap: var(--kit-space-default);
+		--kit-chip-font: 12px;
 	}
 	.kit-chip[data-size='sm'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-sm);
@@ -406,9 +414,9 @@
 
 	.kit-chip[data-size='md'] {
 		--kit-chip-h: 32px;
-		--kit-chip-px: 12px;
-		--kit-chip-gap: 8px;
-		--kit-chip-font: 1rem;
+		--kit-chip-p: 12px;
+		--kit-chip-gap: var(--kit-space-default);
+		--kit-chip-font: 13px;
 	}
 	.kit-chip[data-size='md'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-md);
@@ -416,9 +424,9 @@
 
 	.kit-chip[data-size='lg'] {
 		--kit-chip-h: 36px;
-		--kit-chip-px: 14px;
-		--kit-chip-gap: 10px;
-		--kit-chip-font: 1.125rem;
+		--kit-chip-p: 14px;
+		--kit-chip-gap: var(--kit-space-default);
+		--kit-chip-font: 14px;
 	}
 	.kit-chip[data-size='lg'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-lg);
@@ -426,9 +434,9 @@
 
 	.kit-chip[data-size='xl'] {
 		--kit-chip-h: 40px;
-		--kit-chip-px: 16px;
-		--kit-chip-gap: 12px;
-		--kit-chip-font: 1.25rem;
+		--kit-chip-p: 16px;
+		--kit-chip-gap: var(--kit-space-comfortable);
+		--kit-chip-font: 15px;
 	}
 	.kit-chip[data-size='xl'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-xl);
@@ -438,21 +446,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-chip[data-density='none'] {
-		--kit-chip-density-scale: 0;
-		--kit-chip-density-h-scale: 0;
-	}
 	.kit-chip[data-density='compact'] {
-		--kit-chip-density-scale: 0.9;
-		--kit-chip-density-h-scale: 0.92;
+		--kit-chip-density-offset: var(--kit-density-compact);
 	}
 	.kit-chip[data-density='default'] {
-		--kit-chip-density-scale: 1;
-		--kit-chip-density-h-scale: 1;
+		--kit-chip-density-offset: var(--kit-density-default);
 	}
 	.kit-chip[data-density='comfortable'] {
-		--kit-chip-density-scale: 1.1;
-		--kit-chip-density-h-scale: 1.15;
+		--kit-chip-density-offset: var(--kit-density-comfortable);
 	}
 
 	/**