lapikit 0.6.4 → 0.6.5

package/dist/components/accordion/accordion.svelte

@@ -43,13 +43,23 @@
 			styleProps
 		})
 	);
+
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-accordion-item-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-accordion-item-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
 	class={componentClass}
-	style={componentStyle}
+	style={resolvedStyle}
 	data-text={text ? true : undefined}
 	data-spacer={spacer}
 	data-hide-icon={hideIcon}
@@ -57,8 +67,6 @@
 	data-variant={variant}
 	data-density={density}
 	data-rounded={rounded}
-	style:--kit-accordion-item-fg={color && `var(--kit-color-${color})`}
-	style:--kit-accordion-item-bg={background && `var(--kit-color-${background})`}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -46,8 +46,6 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
-
 	let safeOpen = $derived(!!open);
 	let model: AccordionItemModelProps = {
 		get open() {
@@ -61,21 +59,29 @@
 		if (readOnly || disabled || !toggle) return;
 		toggle(index);
 	}
+
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-accordion-item-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-accordion-item-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	data-disabled={disabled}
 	data-read-only={readOnly}
 	data-active={safeOpen}
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
 	data-elevation-active={elevationState.active}
-	style:--kit-accordion-item-fg={color && `var(--kit-color-${color})`}
-	style:--kit-accordion-item-bg={background && `var(--kit-color-${background})`}
 	{...restProps}
 >
 	<span class="outline"></span>

package/dist/components/alert/alert.svelte

@@ -43,7 +43,7 @@
 		})
 	);
 
-	let baseStyle = $derived(
+	let componentStyle = $derived(
 		useStyles({
 			styleAttr,
 			sStyle,
@@ -51,7 +51,15 @@
 		})
 	);
 
-	let mergedStyle = $derived([baseStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-alert-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-alert-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 {#if !closable || (closable && open)}
@@ -59,7 +67,7 @@
 		this={is}
 		bind:this={ref}
 		class={componentClass}
-		style={mergedStyle}
+		style={resolvedStyle}
 		role="alert"
 		data-size={size}
 		data-variant={variant}
@@ -73,8 +81,6 @@
 		data-elevation={elevationState.base}
 		data-elevation-hover={elevationState.hover}
 		data-elevation-active={elevationState.active}
-		style:--kit-alert-fg={color && `var(--kit-color-${color})`}
-		style:--kit-alert-bg={background && `var(--kit-color-${background})`}
 		{...restProps}
 	>
 		{#if variant === 'outline'}

package/dist/components/app/app.svelte

@@ -53,6 +53,11 @@
 
 		--kit-shadow-opacity: 30%;
 		--kit-shadow-ambiant-opacity: 15%;
+
+		--kit-disabled-opacity: 0.55;
+		--kit-font:
+			ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+			'Segoe UI Symbol', 'Noto Color Emoji';
 	}
 
 	.kit-application,
@@ -121,40 +126,74 @@
 		--kit-color-focus: hsl(35 90% 62%);
 	}
 
-	.kit-application {
-		color-scheme: light;
-
-		/* Hue vars — used by components for dynamic semantic color calculations */
-		--kit-h-neutral: 220;
-		--kit-h-success: 145;
-		--kit-h-warning: 35;
-		--kit-h-danger: 5;
-		--kit-h-info: 205;
-
-		--kit-bg: hsl(0 0% 100%);
-		--kit-fg: hsl(222 20% 10%);
-		--kit-muted: hsl(220 10% 45%);
-
-		--kit-surface-1: hsl(0 0% 100%);
-		--kit-surface-2: hsl(220 20% 98%);
-		--kit-surface-3: hsl(220 18% 94%);
-
-		--kit-border: hsl(220 16% 88%);
-
-		--kit-accent: hsl(220 90% 56%);
-
-		--kit-focus: hsl(35, 90%, 56%);
+	@media (prefers-color-scheme: light) {
+		:global([data-kit-theme='system']) {
+			color-scheme: light;
+
+			--kit-color-surface: hsl(0 0% 100%);
+			--kit-color-surface-1: hsl(240 15% 96.5%);
+			--kit-color-surface-2: hsl(240 10% 93%);
+			--kit-color-surface-3: hsl(0 0% 100%);
+
+			--kit-color-text: hsl(222 20% 10%);
+			--kit-color-text-muted: hsl(220 10% 40%);
+			--kit-color-text-subtle: hsl(220 8% 58%);
+			--kit-color-text-disabled: hsl(220 5% 76%);
+
+			--kit-color-fill: hsl(240 8% 93%);
+			--kit-color-fill-hover: hsl(240 4% 91%);
+			--kit-color-fill-active: hsl(240 4% 88%);
+
+			--kit-color-border: hsl(220 16% 88%);
+			--kit-color-shadow: hsl(240 3% 11%);
+
+			--kit-color-accent: hsl(220 90% 56%);
+			--kit-color-on-accent: hsl(0 0% 100%);
+			--kit-color-success: hsl(145 50% 38%);
+			--kit-color-on-success: hsl(0 0% 100%);
+			--kit-color-warning: hsl(35 80% 45%);
+			--kit-color-on-warning: hsl(222 20% 10%);
+			--kit-color-error: hsl(5 65% 48%);
+			--kit-color-on-error: hsl(0 0% 100%);
+			--kit-color-info: hsl(205 60% 42%);
+			--kit-color-on-info: hsl(0 0% 100%);
+			--kit-color-focus: hsl(35 90% 56%);
+		}
+	}
 
-		/* Layout */
-		--kit-radius-1: 8px;
-		--kit-radius-2: 12px;
-		--kit-space-1: 6px;
-		--kit-space-2: 10px;
-		--kit-space-3: 14px;
-		--kit-disabled-opacity: 0.55;
-		--kit-font:
-			ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-			'Segoe UI Symbol', 'Noto Color Emoji';
+	@media (prefers-color-scheme: dark) {
+		:global([data-kit-theme='system']) {
+			color-scheme: dark;
+
+			--kit-color-surface: hsl(240 3% 11%);
+			--kit-color-surface-1: hsl(240 2% 17.5%);
+			--kit-color-surface-2: hsl(240 1.5% 23%);
+			--kit-color-surface-3: hsl(240 1.5% 28%);
+
+			--kit-color-text: hsl(0 0% 100%);
+			--kit-color-text-muted: hsl(240 3% 56%);
+			--kit-color-text-subtle: hsl(240 2.5% 38%);
+			--kit-color-text-disabled: hsl(240 1.5% 25%);
+
+			--kit-color-fill: hsl(240 2.5% 24%);
+			--kit-color-fill-hover: hsl(240 2.5% 28%);
+			--kit-color-fill-active: hsl(240 2.5% 31%);
+
+			--kit-color-border: hsl(240 2% 26%);
+			--kit-color-shadow: hsl(240 3% 11%);
+
+			--kit-color-accent: hsl(220 85% 65%);
+			--kit-color-on-accent: hsl(240 3% 11%);
+			--kit-color-success: hsl(145 50% 50%);
+			--kit-color-on-success: hsl(240 3% 11%);
+			--kit-color-warning: hsl(35 85% 58%);
+			--kit-color-on-warning: hsl(240 3% 11%);
+			--kit-color-error: hsl(5 70% 60%);
+			--kit-color-on-error: hsl(240 3% 11%);
+			--kit-color-info: hsl(205 65% 58%);
+			--kit-color-on-info: hsl(240 3% 11%);
+			--kit-color-focus: hsl(35 90% 62%);
+		}
 	}
 
 	:global(.outline) {

package/dist/components/appbar/appbar.svelte

@@ -56,14 +56,22 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-appbar-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-appbar-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	data-size={size}
 	data-variant={variant}
 	data-density={density}
@@ -71,8 +79,6 @@
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
 	data-elevation-active={elevationState.active}
-	style:--kit-appbar-fg={color && `var(--kit-color-${color})`}
-	style:--kit-appbar-bg={background && `var(--kit-color-${background})`}
 	{...restProps}
 >
 	{#if variant === 'outline'}

package/dist/components/appbar/appbar.types.d.ts

@@ -1,4 +1,4 @@
-import type { Component, DensityType, ElevationProps, RoundedType } from '../../@types';
+import type { Component, DensityType, ElevationProps, RoundedType, SizeType } from '../../@types';
 type Variant = 'filled' | 'outline' | 'text';
 export interface AppbarProps extends Component {
     ref?: HTMLElement | null;
@@ -6,6 +6,7 @@ export interface AppbarProps extends Component {
     variant?: Variant;
     rounded?: RoundedType | 'full';
     density?: DensityType;
+    size?: SizeType;
     color?: string;
     background?: string;
     classContent?: string | string[] | undefined;

package/dist/components/aspect-ratio/aspect-ratio.svelte

@@ -69,14 +69,13 @@
 	);
 
 	let resolvedRatio = $derived(resolveRatio(ratio ?? aspectRatio));
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
+	style={componentStyle}
 	data-inline={inline}
 	style:--kit-aspect-ratio={resolvedRatio}
 	style:--kit-aspect-fit={fit}

package/dist/components/avatar/avatar.svelte

@@ -44,13 +44,23 @@
 	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}
@@ -58,8 +68,6 @@
 	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'}

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'}

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'}

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-space-compact);
 	}
 </style>

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'}

package/dist/components/dialog/dialog.svelte

@@ -53,8 +53,6 @@
 			: `${classContent ?? ''}`.trim()
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
-
 	$effect(() => {
 		if (!ref) return;
 
@@ -97,12 +95,22 @@
 		if (event.target !== ref || persistent) return;
 		open = false;
 	}
+
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-dialog-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-dialog-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <dialog
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	data-size={size}
 	data-position={position}
 	data-persistent={persistent}

package/dist/components/dropdown/dropdown.svelte

@@ -47,7 +47,15 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-dropdown-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-dropdown-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 
 	const positioner = getPositions();
 
@@ -154,7 +162,7 @@
 	<div
 		bind:this={contentRef}
 		class={componentClass}
-		style={`left:${axis.x}px; top:${axis.y}px; ${mergedStyle}`}
+		style={`left:${axis.x}px; top:${axis.y}px; ${resolvedStyle}`}
 		role="menu"
 		data-rounded={rounded}
 		data-position={axis.location ?? position}
@@ -169,8 +177,6 @@
 		data-elevation-hover={elevationState.hover}
 		data-elevation-active={elevationState.active}
 		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: handleClose }}
-		style:--kit-dropdown-fg={color && `var(--kit-color-${color})`}
-		style:--kit-dropdown-bg={background && `var(--kit-color-${background})`}
 		{...restProps}
 	>
 		{@render children?.()}

package/dist/components/icon/icon.svelte

@@ -47,6 +47,16 @@
 		})
 	);
 
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-icon-color:${color && `var(--kit-color-${color})`}` : '',
+			color ? `color:${color && `var(--kit-color-${color})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+
 	let resolvedSrc = $derived(src ?? (icon?.includes('/') ? icon : undefined));
 	let resolvedName = $derived(name ?? (!icon?.includes('/') ? icon : undefined));
 	let hasChildren = $derived(!!children);
@@ -68,7 +78,6 @@
 	let useFilterMode = $derived(
 		!!resolvedSrc && !!imgFilter && (colorMode === 'filter' || colorMode === 'auto')
 	);
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 </script>
 
 {#if hasContent}
@@ -76,13 +85,11 @@
 		this={is}
 		bind:this={ref}
 		class={classWithIconName}
-		style={mergedStyle}
+		style={resolvedStyle}
 		data-size={size}
 		role={iconRole}
 		aria-label={iconAriaLabel}
 		aria-hidden={iconAriaHidden}
-		style:--kit-icon-color={color && `var(--kit-color-${color})`}
-		style:color={color && `var(--kit-color-${color})`}
 		{...restProps}
 	>
 		{#if hasChildren}

package/dist/components/list/list.svelte

@@ -42,22 +42,28 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-list-item-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-list-item-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	data-size={size}
 	data-variant={variant}
 	data-density={density}
 	data-rounded={rounded}
 	data-nav={nav}
 	role={nav ? 'navigation' : is === 'ul' ? undefined : 'list'}
-	style:--kit-list-item-fg={color && `var(--kit-color-${color})`}
-	style:--kit-list-item-bg={background && `var(--kit-color-${background})`}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -49,14 +49,22 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-list-item-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-list-item-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={tag}
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	href={href && !disabled ? href : undefined}
 	data-active={active}
 	data-disabled={disabled}
@@ -67,8 +75,6 @@
 	data-append={append && true}
 	data-prepend={prepend && true}
 	data-interactive={isInteractive}
-	style:--kit-list-item-fg={color && `var(--kit-color-${color})`}
-	style:--kit-list-item-bg={background && `var(--kit-color-${background})`}
 	use:ripple={{
 		component: 'list-item',
 		disabled: noRipple || !isInteractive

package/dist/components/modal/modal.svelte

@@ -24,8 +24,8 @@
 		rounded = 'md',
 		density = 'default',
 		classContent = '',
-		color = undefined,
-		background = undefined,
+		color,
+		background,
 		closeWithEsc = true,
 		space,
 		elevation = '2',
@@ -61,8 +61,6 @@
 			: `${classContent ?? ''}`.trim()
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
-
 	$effect(() => {
 		if (open && !wasPushed) {
 			pushModal(modalId);
@@ -111,13 +109,24 @@
 	function handleClose() {
 		if (!persistent) open = false;
 	}
+
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-modal-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-modal-bg:${background && `var(--kit-color-${background})`}` : '',
+			space ? `--kit-modal-space:${space}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 {#if open}
 	<div
 		bind:this={ref}
 		class={componentClass}
-		style={mergedStyle}
+		style={resolvedStyle}
 		role="dialog"
 		aria-modal={!contain}
 		data-contain={contain}
@@ -137,9 +146,6 @@
 			data-elevation-hover={elevationState.hover}
 			data-elevation-active={elevationState.active}
 			onclick={(event: MouseEvent) => event.stopPropagation()}
-			style:--kit-modal-fg={color && `var(--kit-color-${color})`}
-			style:--kit-modal-bg={background && `var(--kit-color-${background})`}
-			style:--kit-modal-space={space}
 		>
 			{@render children?.()}
 		</div>

package/dist/components/popover/popover.svelte

@@ -45,8 +45,6 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
-
 	const positioner = getPositions();
 
 	let contentRef = $state<HTMLElement | null>(null);
@@ -97,6 +95,16 @@
 	$effect(() => {
 		ref = contentRef;
 	});
+
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-popover-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-popover-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
@@ -107,7 +115,7 @@
 	<div
 		bind:this={contentRef}
 		class={componentClass}
-		style={`left:${axis.x}px; top:${axis.y}px; ${mergedStyle}`}
+		style={`left:${axis.x}px; top:${axis.y}px; ${resolvedStyle}`}
 		role="dialog"
 		data-rounded={rounded}
 		data-position={axis.location ?? position}
@@ -115,8 +123,6 @@
 		data-elevation={elevationState.base}
 		data-elevation-hover={elevationState.hover}
 		data-elevation-active={elevationState.active}
-		style:--kit-modal-fg={color && `var(--kit-color-${color})`}
-		style:--kit-modal-bg={background && `var(--kit-color-${background})`}
 		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: () => (open = false) }}
 		{...restProps}
 	>

package/dist/components/popover/popover.types.d.ts

@@ -11,7 +11,7 @@ export type ModelPopoverProps = {
 export interface PopoverProps extends Component {
     ref?: HTMLElement | null;
     open?: boolean;
-    rounded?: RoundedType | string;
+    rounded?: RoundedType;
     position?: 'top' | 'bottom' | 'left' | 'right';
     color?: string;
     background?: string;

package/dist/components/separator/separator.svelte

@@ -41,7 +41,20 @@
 	const formatThickness = (value?: number | string) =>
 		typeof thickness === 'number' ? `${value}px` : value;
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-separator-fg:${color && `var(--kit-color-${color})`}` : '',
+			thickness && orientation === 'horizontal'
+				? `--kit-separator-top-width:${formatThickness(thickness)}`
+				: '',
+			thickness && orientation === 'vertical'
+				? `--kit-separator-right-width:${formatThickness(thickness)}`
+				: ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
@@ -49,14 +62,12 @@
 	bind:this={ref}
 	{...restProps}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	role="separator"
 	aria-orientation={orientation || 'horizontal'}
 	data-inset={inset || undefined}
 	data-orientation={orientation}
 	style:--kit-separator-color={color && `var(--kit-color-${color})`}
-	style:--kit-separator-top-width={orientation === 'horizontal' ? formatThickness(thickness) : ''}
-	style:--kit-separator-right-width={orientation === 'vertical' ? formatThickness(thickness) : ''}
 />
 
 <style>

package/dist/components/textfield/textfield.svelte

@@ -70,7 +70,15 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-textfield-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-textfield-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 
 	let counterValue = $state(0);
 	let displayMessage = $state(false);
@@ -122,7 +130,7 @@
 <div
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	{...restProps}
 	data-size={size}
 	data-variant={variant}
@@ -133,8 +141,6 @@
 	data-hide-spin-buttons={type === 'number' && hideSpinButtons}
 	data-rounded={rounded}
 	data-with-message={(messageValue || messagePrefix || messageSuffix || counter) && true}
-	style:--kit-textfield-fg={color && `var(--kit-color-${color})`}
-	style:--kit-textfield-bg={background && `var(--kit-color-${background})`}
 >
 	{#if prepend}
 		<div class="kit-textfield__prepend">

package/dist/components/toolbar/toolbar.svelte

@@ -57,14 +57,22 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-toolbar-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-toolbar-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	{...restProps}
 	role="toolbar"
 	data-variant={variant}
@@ -75,8 +83,6 @@
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
 	data-elevation-active={elevationState.active}
-	style:--kit-toolbar-fg={color && `var(--kit-color-${color})`}
-	style:--kit-toolbar-bg={background && `var(--kit-color-${background})`}
 >
 	{#if variant === 'outline'}
 		<span class="outline"></span>

package/dist/components/tooltip/tooltip.svelte

@@ -56,7 +56,15 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-tooltip-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-tooltip-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 
 	const positioner = getPositionsTooltip();
 
@@ -174,12 +182,10 @@
 		role="tooltip"
 		aria-label={label}
 		style={`transform: translate(${axis.x}px, ${axis.y}px); display:${open ? 'block' : 'none'}`}
-		style:--kit-tooltip-fg={color && `var(--kit-color-${color})`}
-		style:--kit-tooltip-bg={background && `var(--kit-color-${background})`}
 	>
 		<div
 			class={componentClass}
-			style={mergedStyle}
+			style={resolvedStyle}
 			data-density={density}
 			data-location={axis.location ?? location}
 			data-variant={variant}

package/package.json

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