lapikit 0.6.4 → 0.6.6

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?.()}
@@ -109,6 +117,10 @@
 		border-bottom-right-radius: var(--kit-accordion-item-radius);
 	}
 
+	.kit-accordion:not([data-spacer='true']) :global(.kit-accordion-item:first-child:last-child) {
+		border-radius: var(--kit-accordion-item-radius);
+	}
+
 	.kit-accordion[data-hide-icon='true'] :global(.kit-accordion-item__indicator) {
 		display: none;
 	}
@@ -143,21 +155,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-accordion[data-density='none'] {
-		--kit-accordion-density-scale: 0;
-		--kit-accordion-density-h-scale: 0;
-	}
 	.kit-accordion[data-density='compact'] {
-		--kit-accordion-density-scale: 0.9;
-		--kit-accordion-density-h-scale: 0.92;
+		--kit-accordion-density-offset: var(--kit-density-compact);
 	}
 	.kit-accordion[data-density='default'] {
-		--kit-accordion-density-scale: 1;
-		--kit-accordion-density-h-scale: 1;
+		--kit-accordion-density-offset: var(--kit-density-default);
 	}
 	.kit-accordion[data-density='comfortable'] {
-		--kit-accordion-density-scale: 1.1;
-		--kit-accordion-density-h-scale: 1.15;
+		--kit-accordion-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 
@@ -218,33 +223,33 @@
 	* @link nothing...
 	*/
 	.kit-accordion[data-size='xs'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 28px;
-		--kit-accordion-item-px: 10px;
-		--kit-accordion-item-gap: 4px;
-		--kit-accordion-item-font: 0.75rem;
+		--kit-accordion-item-h: 32px;
+		--kit-accordion-item-p: 8px;
+		--kit-accordion-item-gap: var(--kit-space-compact);
+		--kit-accordion-item-font: var(--kit-font-xs);
 	}
 	.kit-accordion[data-size='sm'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 32px;
-		--kit-accordion-item-px: 12px;
-		--kit-accordion-item-gap: 6px;
-		--kit-accordion-item-font: 0.875rem;
+		--kit-accordion-item-h: 40px;
+		--kit-accordion-item-p: 10px;
+		--kit-accordion-item-gap: var(--kit-space-default);
+		--kit-accordion-item-font: var(--kit-font-sm);
 	}
 	.kit-accordion[data-size='md'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 40px;
-		--kit-accordion-item-px: 16px;
-		--kit-accordion-item-gap: 8px;
-		--kit-accordion-item-font: 1rem;
+		--kit-accordion-item-h: 48px;
+		--kit-accordion-item-p: 12px;
+		--kit-accordion-item-gap: var(--kit-space-default);
+		--kit-accordion-item-font: var(--kit-font-md);
 	}
 	.kit-accordion[data-size='lg'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 48px;
-		--kit-accordion-item-px: 20px;
-		--kit-accordion-item-gap: 10px;
-		--kit-accordion-item-font: 1.125rem;
+		--kit-accordion-item-h: 56px;
+		--kit-accordion-item-p: 16px;
+		--kit-accordion-item-gap: var(--kit-space-default);
+		--kit-accordion-item-font: var(--kit-font-lg);
 	}
 	.kit-accordion[data-size='xl'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 56px;
-		--kit-accordion-item-px: 24px;
-		--kit-accordion-item-gap: 12px;
-		--kit-accordion-item-font: 1.25rem;
+		--kit-accordion-item-h: 64px;
+		--kit-accordion-item-p: 20px;
+		--kit-accordion-item-gap: var(--kit-space-comfortable);
+		--kit-accordion-item-font: var(--kit-font-xl);
 	}
 </style>

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>
@@ -148,8 +154,8 @@
 		align-items: center;
 		justify-content: space-between;
 		gap: var(--kit-accordion-item-gap);
-		min-height: calc(var(--kit-accordion-item-h) * var(--kit-accordion-density-h-scale));
-		padding: calc(var(--kit-accordion-item-px) * var(--kit-accordion-density-scale));
+		min-height: calc(var(--kit-accordion-item-h) + var(--kit-accordion-density-offset) / 2);
+		padding: calc(var(--kit-accordion-item-p) + var(--kit-accordion-density-offset) / 2);
 		cursor: pointer;
 		text-align: left;
 		background: var(--kit-accordion-item-bg);
@@ -189,7 +195,7 @@
 	}
 
 	.kit-accordion-item__content-inner {
-		padding: calc(var(--kit-accordion-item-px) * var(--kit-accordion-density-scale));
+		padding: calc(var(--kit-accordion-item-p) + var(--kit-accordion-density-offset) / 2);
 	}
 
 	.kit-accordion-item__separator {
@@ -214,7 +220,7 @@
 	} */
 
 	.kit-accordion-item[data-disabled='false'][data-read-only='false'] > button:focus-visible {
-		outline: 2px solid var(--kit-focus);
+		outline: 2px solid var(--kit-color-focus);
 		outline-offset: 2px;
 	}
 

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'}
@@ -125,7 +131,8 @@
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
 		gap: var(--kit-alert-gap);
-		padding: calc(var(--kit-alert-px) * var(--kit-alert-density-scale));
+		min-height: calc(var(--kit-alert-item-h) + var(--kit-alert-density-offset) / 2);
+		padding: calc(var(--kit-alert-p) + var(--kit-alert-density-offset) / 2);
 		border-radius: var(--kit-alert-radius);
 		color: var(--kit-alert-fg);
 		background: var(--kit-alert-bg);
@@ -207,21 +214,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-alert[data-density='none'] {
-		--kit-alert-density-scale: 0;
-		--kit-alert-density-h-scale: 0;
-	}
 	.kit-alert[data-density='compact'] {
-		--kit-alert-density-scale: 0.9;
-		--kit-alert-density-h-scale: 0.92;
+		--kit-alert-density-offset: var(--kit-density-compact);
 	}
 	.kit-alert[data-density='default'] {
-		--kit-alert-density-scale: 1;
-		--kit-alert-density-h-scale: 1;
+		--kit-alert-density-offset: var(--kit-density-default);
 	}
 	.kit-alert[data-density='comfortable'] {
-		--kit-alert-density-scale: 1.1;
-		--kit-alert-density-h-scale: 1.15;
+		--kit-alert-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 
@@ -256,29 +256,34 @@
 	* @link nothing...
 	*/
 	.kit-alert[data-size='xs'] {
-		--kit-alert-px: 10px;
-		--kit-alert-gap: 4px;
-		--kit-alert-font: 0.75rem;
+		--kit-alert-h: 32px;
+		--kit-alert-p: 8px;
+		--kit-alert-gap: var(--kit-space-compact);
+		--kit-alert-font: var(--kit-font-xs);
 	}
 	.kit-alert[data-size='sm'] {
-		--kit-alert-px: 12px;
-		--kit-alert-gap: 6px;
-		--kit-alert-font: 0.875rem;
+		--kit-alert-h: 40px;
+		--kit-alert-p: 10px;
+		--kit-alert-gap: var(--kit-space-default);
+		--kit-alert-font: var(--kit-font-sm);
 	}
 	.kit-alert[data-size='md'] {
-		--kit-alert-px: 16px;
-		--kit-alert-gap: 8px;
-		--kit-alert-font: 1rem;
+		--kit-alert-h: 48px;
+		--kit-alert-p: 12px;
+		--kit-alert-gap: var(--kit-space-default);
+		--kit-alert-font: var(--kit-font-md);
 	}
 	.kit-alert[data-size='lg'] {
-		--kit-alert-px: 20px;
-		--kit-alert-gap: 10px;
-		--kit-alert-font: 1.125rem;
+		--kit-alert-h: 56px;
+		--kit-alert-p: 16px;
+		--kit-alert-gap: var(--kit-space-default);
+		--kit-alert-font: var(--kit-font-lg);
 	}
 	.kit-alert[data-size='xl'] {
-		--kit-alert-px: 24px;
-		--kit-alert-gap: 12px;
-		--kit-alert-font: 1.25rem;
+		--kit-alert-h: 64px;
+		--kit-alert-p: 20px;
+		--kit-alert-gap: var(--kit-space-comfortable);
+		--kit-alert-font: var(--kit-font-xl);
 	}
 
 	/**

package/dist/components/app/app.svelte

@@ -38,7 +38,7 @@
 </div>
 
 <style>
-	.kit-application {
+	:global(html) {
 		--kit-shape-none: 0;
 		--kit-shape-xs: 4px;
 		--kit-shape-sm: 6px;
@@ -47,15 +47,32 @@
 		--kit-shape-xl: 18px;
 		--kit-shape-full: 9999px;
 
-		--kit-space-compact: 6px;
-		--kit-space-default: 10px;
-		--kit-space-comfortable: 14px;
+		--kit-font-xs: 13px;
+		--kit-font-sm: 14px;
+		--kit-font-md: 15px;
+		--kit-font-lg: 16px;
+		--kit-font-xl: 17px;
+
+		--kit-space-compact: 2px;
+		--kit-space-default: 4px;
+		--kit-space-comfortable: 6px;
+
+		--kit-density-compact: -4px;
+		--kit-density-default: 0px;
+		--kit-density-comfortable: 4px;
 
 		--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-color-transparent: transparent;
 	}
 
-	.kit-application,
+	:global(html:not([data-kit-theme])),
 	:global([data-kit-theme='light']) {
 		color-scheme: light;
 		--kit-color-surface: hsl(0 0% 100%);
@@ -121,40 +138,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'}
@@ -92,8 +98,8 @@
 		position: relative;
 		width: 100%;
 		gap: var(--kit-appbar-gap);
-		min-height: calc(var(--kit-appbar-h) * var(--kit-appbar-density-h-scale));
-		padding: calc(var(--kit-appbar-px) * var(--kit-appbar-density-scale));
+		min-height: calc(var(--kit-appbar-h) + var(--kit-appbar-density-offset) / 2);
+		padding: calc(var(--kit-appbar-p) + var(--kit-appbar-density-offset) / 2);
 		border-radius: var(--kit-appbar-radius);
 		color: var(--kit-appbar-fg);
 		background-color: var(--kit-appbar-bg);
@@ -136,21 +142,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-appbar[data-density='none'] {
-		--kit-appbar-density-scale: 0;
-		--kit-appbar-density-h-scale: 0;
-	}
 	.kit-appbar[data-density='compact'] {
-		--kit-appbar-density-scale: 0.9;
-		--kit-appbar-density-h-scale: 0.92;
+		--kit-appbar-density-offset: var(--kit-density-compact);
 	}
 	.kit-appbar[data-density='default'] {
-		--kit-appbar-density-scale: 1;
-		--kit-appbar-density-h-scale: 1;
+		--kit-appbar-density-offset: var(--kit-density-compact);
 	}
 	.kit-appbar[data-density='comfortable'] {
-		--kit-appbar-density-scale: 1.1;
-		--kit-appbar-density-h-scale: 1.15;
+		--kit-appbar-density-offset: var(--kit-density-compact);
 	}
 
 	/** 
@@ -185,34 +184,34 @@
 	* @link nothing...
 	*/
 	.kit-appbar[data-size='xs'] {
-		--kit-appbar-h: 28px;
-		--kit-appbar-px: 10px;
-		--kit-appbar-gap: 4px;
-		--kit-appbar-font: 0.75rem;
+		--kit-appbar-h: 32px;
+		--kit-appbar-p: 8px;
+		--kit-appbar-gap: var(--kit-space-compact);
+		--kit-appbar-font: var(--kit-font-xs);
 	}
 	.kit-appbar[data-size='sm'] {
-		--kit-appbar-h: 32px;
-		--kit-appbar-px: 12px;
-		--kit-appbar-gap: 6px;
-		--kit-appbar-font: 0.875rem;
+		--kit-appbar-h: 40px;
+		--kit-appbar-p: 10px;
+		--kit-appbar-gap: var(--kit-space-default);
+		--kit-appbar-font: var(--kit-font-sm);
 	}
 	.kit-appbar[data-size='md'] {
-		--kit-appbar-h: 40px;
-		--kit-appbar-px: 14px;
-		--kit-appbar-gap: 8px;
-		--kit-appbar-font: 1rem;
+		--kit-appbar-h: 48px;
+		--kit-appbar-p: 12px;
+		--kit-appbar-gap: var(--kit-space-default);
+		--kit-appbar-font: var(--kit-font-md);
 	}
 	.kit-appbar[data-size='lg'] {
-		--kit-appbar-h: 48px;
-		--kit-appbar-px: 16px;
-		--kit-appbar-gap: 10px;
-		--kit-appbar-font: 1.125rem;
+		--kit-appbar-h: 56px;
+		--kit-appbar-p: 16px;
+		--kit-appbar-gap: var(--kit-space-default);
+		--kit-appbar-font: var(--kit-font-lg);
 	}
 	.kit-appbar[data-size='xl'] {
-		--kit-appbar-h: 56px;
-		--kit-appbar-px: 18px;
-		--kit-appbar-gap: 12px;
-		--kit-appbar-font: 1.25rem;
+		--kit-appbar-h: 64px;
+		--kit-appbar-p: 20px;
+		--kit-appbar-gap: var(--kit-space-comfortable);
+		--kit-appbar-font: var(--kit-font-xl);
 	}
 
 	.kit-appbar__wrapper {
@@ -221,7 +220,7 @@
 		display: flex;
 		align-items: center;
 		flex-direction: row;
-		gap: 0.75rem;
+		gap: var(--kit-appbar-gap);
 		width: 100%;
 		margin: 0 auto;
 	}

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}