lapikit 0.6.4 → 0.6.6

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,23 @@
 		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})`}` : '',
+			space ? `--kit-dialog-space:${space}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <dialog
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	data-size={size}
 	data-position={position}
 	data-persistent={persistent}
@@ -119,9 +128,6 @@
 		data-elevation-hover={elevationState.hover}
 		data-elevation-active={elevationState.active}
 		onclick={(event: MouseEvent) => event.stopPropagation()}
-		style:--kit-dialog-fg={color && `var(--kit-color-${color})`}
-		style:--kit-dialog-bg={background && `var(--kit-color-${background})`}
-		style:--kit-dialog-space={space}
 	>
 		{@render children?.()}
 	</div>
@@ -183,27 +189,27 @@
 	*/
 	.kit-dialog[data-size='xs'] {
 		--kit-dialog-max: 20rem;
-		--kit-dialog-px: 10px;
+		--kit-dialog-p: 12px;
 	}
 
 	.kit-dialog[data-size='sm'] {
 		--kit-dialog-max: 24rem;
-		--kit-dialog-px: 12px;
+		--kit-dialog-p: 14px;
 	}
 
 	.kit-dialog[data-size='md'] {
 		--kit-dialog-max: 32rem;
-		--kit-dialog-px: 16px;
+		--kit-dialog-p: 16px;
 	}
 
 	.kit-dialog[data-size='lg'] {
 		--kit-dialog-max: 42rem;
-		--kit-dialog-px: 20px;
+		--kit-dialog-p: 20px;
 	}
 
 	.kit-dialog[data-size='xl'] {
 		--kit-dialog-max: 56rem;
-		--kit-dialog-px: 24px;
+		--kit-dialog-p: 24px;
 	}
 
 	.kit-dialog__content {
@@ -214,7 +220,7 @@
 		width: min(100%, min(var(--kit-dialog-max), calc(100vw - 2rem)));
 		max-height: calc(100dvh - 2rem);
 		overflow: auto;
-		padding: calc(var(--kit-dialog-px) * var(--kit-dialog-density-scale));
+		padding: calc(var(--kit-dialog-p) + var(--kit-dialog-density-offset) / 2);
 		border: 0;
 		border-radius: var(--kit-dialog-radius);
 		background: var(--kit-dialog-bg);
@@ -226,17 +232,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-dialog__content[data-density='none'] {
-		--kit-dialog-density-scale: 0;
-	}
 	.kit-dialog__content[data-density='compact'] {
-		--kit-dialog-density-scale: 0.9;
+		--kit-dialog-density-offset: var(--kit-density-compact);
 	}
 	.kit-dialog__content[data-density='default'] {
-		--kit-dialog-density-scale: 1;
+		--kit-dialog-density-offset: var(--kit-density-default);
 	}
 	.kit-dialog__content[data-density='comfortable'] {
-		--kit-dialog-density-scale: 1.1;
+		--kit-dialog-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 

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?.()}
@@ -186,7 +192,7 @@
 		z-index: 1800;
 		min-width: 12rem;
 		max-width: min(22rem, calc(100vw - 1rem));
-		padding: 0.375rem calc(0.375rem * var(--kit-dropdown-density-scale));
+		padding: calc(var(--kit-space-default) + var(--kit-dropdown-density-offset) / 2);
 		border: 0;
 		border-radius: var(--kit-dropdown-radius);
 		background: var(--kit-dropdown-bg);
@@ -222,17 +228,14 @@
 	 * density
 	 * @link no url
 	 */
-	.kit-dropdown-content[data-density='none'] {
-		--kit-dropdown-density-scale: 0;
-	}
 	.kit-dropdown-content[data-density='compact'] {
-		--kit-dropdown-density-scale: 0.8;
+		--kit-dropdown-density-offset: var(--kit-density-compact);
 	}
 	.kit-dropdown-content[data-density='default'] {
-		--kit-dropdown-density-scale: 1;
+		--kit-dropdown-density-offset: var(--kit-density-default);
 	}
 	.kit-dropdown-content[data-density='comfortable'] {
-		--kit-dropdown-density-scale: 1.15;
+		--kit-dropdown-density-offset: var(--kit-density-comfortable);
 	}
 
 	@keyframes kit-dropdown-enter {

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}
@@ -145,18 +152,18 @@
 	 * @link https://lapikit.dev/docs/components/icon#size 
 	 */
 	.kit-icon[data-size='xs'] {
-		--kit-icon-current-size: 0.875rem;
+		--kit-icon-current-size: 12px;
 	}
 	.kit-icon[data-size='sm'] {
-		--kit-icon-current-size: 1rem;
+		--kit-icon-current-size: 14px;
 	}
 	.kit-icon[data-size='md'] {
-		--kit-icon-current-size: 1.125rem;
+		--kit-icon-current-size: 16px;
 	}
 	.kit-icon[data-size='lg'] {
-		--kit-icon-current-size: 1.25rem;
+		--kit-icon-current-size: 18px;
 	}
 	.kit-icon[data-size='xl'] {
-		--kit-icon-current-size: 1.375rem;
+		--kit-icon-current-size: 20px;
 	}
 </style>

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?.()}
@@ -90,21 +96,14 @@
 	 * density
 	 * @link https://lapikit.dev/docs/components/list#density 
 	 */
-	.kit-list[data-density='none'] {
-		--kit-list-density-scale: 0;
-		--kit-list-density-h-scale: 0;
-	}
 	.kit-list[data-density='compact'] {
-		--kit-list-density-scale: 0.9;
-		--kit-list-density-h-scale: 0.92;
+		--kit-list-density-offset: var(--kit-space-compact);
 	}
 	.kit-list[data-density='default'] {
-		--kit-list-density-scale: 1;
-		--kit-list-density-h-scale: 1;
+		--kit-list-density-offset: var(--kit-space-default);
 	}
 	.kit-list[data-density='comfortable'] {
-		--kit-list-density-scale: 1.1;
-		--kit-list-density-h-scale: 1.15;
+		--kit-list-density-offset: var(--kit-space-comfortable);
 	}
 
 	/** 
@@ -169,7 +168,22 @@
 	 * @link https://lapikit.dev/docs/components/list#nav 
 	 */
 	.kit-list[data-nav='true'] {
-		padding: 0.5rem;
+		padding: calc(var(--kit-space-default) + var(--kit-list-density-offset) / 2);
+	}
+	.kit-list[data-nav='true'] :global(.kit-list-item) {
+		border-radius: var(--kit-list-item-radius);
+	}
+	.kit-list:not([data-nav='true']) :global(.kit-list-item:first-child) {
+		border-top-left-radius: var(--kit-list-item-radius);
+		border-top-right-radius: var(--kit-list-item-radius);
+	}
+	.kit-list:not([data-nav='true']) :global(.kit-list-item:last-child) {
+		border-bottom-left-radius: var(--kit-list-item-radius);
+		border-bottom-right-radius: var(--kit-list-item-radius);
+	}
+	.kit-list:not([data-nav='true']) :global(.kit-list-item:not(:first-child)),
+	.kit-list:not([data-nav='true']) :global(.kit-list-item:not(:last-child)) {
+		--kit-list-item-radius: 0;
 	}
 
 	/**
@@ -178,32 +192,32 @@
 	*/
 	.kit-list[data-size='xs'] :global(.kit-list-item) {
 		--kit-list-item-h: 28px;
-		--kit-list-item-px: 10px;
-		--kit-list-item-gap: 4px;
-		--kit-list-item-font: 0.75rem;
+		--kit-list-item-p: 12px;
+		--kit-list-item-gap: var(--kit-space-compact);
+		--kit-list-item-font: var(--kit-font-xs);
 	}
 	.kit-list[data-size='sm'] :global(.kit-list-item) {
-		--kit-list-item-h: 32px;
-		--kit-list-item-px: 12px;
-		--kit-list-item-gap: 6px;
-		--kit-list-item-font: 0.875rem;
+		--kit-list-item-h: 36px;
+		--kit-list-item-p: 14px;
+		--kit-list-item-gap: var(--kit-space-default);
+		--kit-list-item-font: var(--kit-font-sm);
 	}
 	.kit-list[data-size='md'] :global(.kit-list-item) {
-		--kit-list-item-h: 40px;
-		--kit-list-item-px: 16px;
-		--kit-list-item-gap: 8px;
-		--kit-list-item-font: 1rem;
+		--kit-list-item-h: 44px;
+		--kit-list-item-p: 16px;
+		--kit-list-item-gap: var(--kit-space-default);
+		--kit-list-item-font: var(--kit-font-md);
 	}
 	.kit-list[data-size='lg'] :global(.kit-list-item) {
-		--kit-list-item-h: 48px;
-		--kit-list-item-px: 20px;
-		--kit-list-item-gap: 10px;
-		--kit-list-item-font: 1.125rem;
+		--kit-list-item-h: 52px;
+		--kit-list-item-p: 20px;
+		--kit-list-item-gap: var(--kit-space-default);
+		--kit-list-item-font: var(--kit-font-lg);
 	}
 	.kit-list[data-size='xl'] :global(.kit-list-item) {
-		--kit-list-item-h: 56px;
-		--kit-list-item-px: 24px;
-		--kit-list-item-gap: 12px;
-		--kit-list-item-font: 1.25rem;
+		--kit-list-item-h: 60px;
+		--kit-list-item-p: 24px;
+		--kit-list-item-gap: var(--kit-space-comfortable);
+		--kit-list-item-font: var(--kit-font-xl);
 	}
 </style>

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
@@ -96,13 +102,13 @@
 <style>
 	.kit-list-item {
 		width: 100%;
-		min-height: calc(var(--kit-list-item-h) * var(--kit-list-density-h-scale));
+		min-height: calc(var(--kit-list-item-h) + var(--kit-list-density-offset) / 2);
 		position: relative;
 		display: grid;
 		grid-template-columns: 1fr;
 		align-items: center;
 		gap: var(--kit-list-item-gap);
-		border-radius: var(--kit-list-item-radius);
+		/* border-radius: var(--kit-list-item-radius); */
 		border: 0;
 		background: var(--kit-list-item-bg);
 		color: var(--kit-list-item-fg);
@@ -112,15 +118,15 @@
 
 	.kit-list-item .kit-list-item__prepend,
 	.kit-list-item:not([data-prepend='true']) .kit-list-item__content {
-		margin-left: calc(var(--kit-list-item-px) * var(--kit-list-density-scale));
+		margin-left: calc(var(--kit-list-item-p) + var(--kit-list-density-offset) / 2);
 	}
 	.kit-list-item .kit-list-item__append,
 	.kit-list-item:not([data-append='true']) .kit-list-item__content {
-		margin-right: calc(var(--kit-list-item-px) * var(--kit-list-density-scale));
+		margin-right: calc(var(--kit-list-item-p) + var(--kit-list-density-offset) / 2);
 	}
 	.kit-list-item:not([data-prepend='true']):not([data-append='true']) .kit-list-item__content {
-		margin-left: calc(var(--kit-list-item-px) * var(--kit-list-density-scale));
-		margin-right: calc(var(--kit-list-item-px) * var(--kit-list-density-scale));
+		margin-left: calc(var(--kit-list-item-p) + var(--kit-list-density-offset) / 2);
+		margin-right: calc(var(--kit-list-item-p) + var(--kit-list-density-offset) / 2);
 	}
 
 	.kit-list-item[data-prepend='true']:not([data-append='true']) {
@@ -162,7 +168,7 @@
 	}
 
 	.kit-list-item[data-interactive='true'][data-disabled='false']:focus-visible {
-		outline: 2px solid var(--kit-focus);
+		outline: 2px solid var(--kit-color-focus);
 		outline-offset: 2px;
 	}
 
@@ -188,30 +194,4 @@
 	.kit-list-item .outline {
 		--outline-color: var(--kit-list-item-bd);
 	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-list-item[data-rounded='0'] {
-		--kit-list-item-radius: var(--kit-shape-none);
-	}
-	.kit-list-item[data-rounded='xs'] {
-		--kit-list-item-radius: var(--kit-shape-xs);
-	}
-	.kit-list-item[data-rounded='sm'] {
-		--kit-list-item-radius: var(--kit-shape-sm);
-	}
-	.kit-list-item[data-rounded='md'] {
-		--kit-list-item-radius: var(--kit-shape-md);
-	}
-	.kit-list-item[data-rounded='lg'] {
-		--kit-list-item-radius: var(--kit-shape-lg);
-	}
-	.kit-list-item[data-rounded='xl'] {
-		--kit-list-item-radius: var(--kit-shape-xl);
-	}
-	.kit-list-item[data-rounded='full'] {
-		--kit-list-item-radius: var(--kit-shape-full);
-	}
 </style>

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>
@@ -182,7 +188,7 @@
 		width: min(calc(100vw - 2rem), var(--kit-modal-max));
 		max-height: calc(100dvh - 2rem);
 		overflow: auto;
-		padding: calc(var(--kit-modal-px) * var(--kit-modal-density-scale));
+		padding: calc(var(--kit-modal-p) + var(--kit-modal-density-offset) / 2);
 		border: 0;
 		border-radius: var(--kit-modal-radius);
 		background: var(--kit-modal-bg);
@@ -200,27 +206,27 @@
 	*/
 	.kit-modal__content[data-size='xs'] {
 		--kit-modal-max: 20rem;
-		--kit-modal-px: 10px;
+		--kit-modal-p: 12px;
 	}
 
 	.kit-modal__content[data-size='sm'] {
 		--kit-modal-max: 24rem;
-		--kit-modal-px: 12px;
+		--kit-modal-p: 14px;
 	}
 
 	.kit-modal__content[data-size='md'] {
 		--kit-modal-max: 32rem;
-		--kit-modal-px: 16px;
+		--kit-modal-p: 16px;
 	}
 
 	.kit-modal__content[data-size='lg'] {
 		--kit-modal-max: 42rem;
-		--kit-modal-px: 20px;
+		--kit-modal-p: 20px;
 	}
 
 	.kit-modal__content[data-size='xl'] {
 		--kit-modal-max: 56rem;
-		--kit-modal-px: 24px;
+		--kit-modal-p: 24px;
 	}
 
 	.kit-modal__content[data-size='full'] {
@@ -240,17 +246,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-modal__content[data-density='none'] {
-		--kit-modal-density-scale: 0;
-	}
 	.kit-modal__content[data-density='compact'] {
-		--kit-modal-density-scale: 0.9;
+		--kit-modal-density-offset: var(--kit-space-compact);
 	}
 	.kit-modal__content[data-density='default'] {
-		--kit-modal-density-scale: 1;
+		--kit-modal-density-offset: var(--kit-space-default);
 	}
 	.kit-modal__content[data-density='comfortable'] {
-		--kit-modal-density-scale: 1.1;
+		--kit-modal-density-offset: var(--kit-space-comfortable);
 	}
 
 	/** 

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}
 	>
@@ -134,7 +140,7 @@
 		display: inline-block;
 		width: auto;
 		max-width: min(28rem, calc(100vw - 1rem));
-		padding: calc(1rem * var(--kit-popover-density-scale));
+		padding: calc(var(--kit-space-default) + var(--kit-popover-density-offset) / 2);
 		border: 0;
 		border-radius: var(--kit-popover-radius);
 		background: var(--kit-popover-bg);
@@ -170,16 +176,13 @@
 	 * density
 	 * @link no url
 	 */
-	.kit-popover-content[data-density='none'] {
-		--kit-popover-density-scale: 0;
-	}
 	.kit-popover-content[data-density='compact'] {
-		--kit-popover-density-scale: 0.8;
+		--kit-popover-density-offset: var(--kit-space-compact);
 	}
 	.kit-popover-content[data-density='default'] {
-		--kit-popover-density-scale: 1;
+		--kit-popover-density-offset: var(--kit-space-default);
 	}
 	.kit-popover-content[data-density='comfortable'] {
-		--kit-popover-density-scale: 1.15;
+		--kit-popover-density-offset: var(--kit-space-comfortable);
 	}
 </style>

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;