lapikit 0.6.5 → 0.6.7

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

@@ -243,13 +243,14 @@
 		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;
 		user-select: none;
 		cursor: default;
+		font-size: var(--kit-chip-font);
 		border: 0;
 		transition:
 			background 150ms ease,
@@ -281,7 +282,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;
 	}
 
@@ -394,19 +395,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);
@@ -414,9 +415,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);
@@ -424,9 +425,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);
@@ -434,9 +435,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);
@@ -446,21 +447,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);
 	}
 
 	/** 

package/dist/components/dialog/dialog.svelte

@@ -100,7 +100,8 @@
 		[
 			componentStyle,
 			color ? `--kit-dialog-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-dialog-bg:${background && `var(--kit-color-${background})`}` : ''
+			background ? `--kit-dialog-bg:${background && `var(--kit-color-${background})`}` : '',
+			space ? `--kit-dialog-space:${space}` : ''
 		]
 			.filter(Boolean)
 			.join('; ')
@@ -127,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>
@@ -191,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 {
@@ -222,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);
@@ -234,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

@@ -192,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);
@@ -228,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

@@ -152,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

@@ -96,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);
 	}
 
 	/** 
@@ -175,7 +168,21 @@
 	 * @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):not(:last-child)) {
+		--kit-list-item-radius: 0;
 	}
 
 	/**
@@ -184,32 +191,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

@@ -102,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);
@@ -118,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']) {
@@ -168,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;
 	}
 
@@ -194,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

@@ -188,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);
@@ -206,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'] {
@@ -246,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

@@ -140,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);
@@ -176,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/textfield/textfield.svelte

@@ -321,21 +321,19 @@
 	* @link nothing...
 	*/
 	.kit-textfield[data-size='xs'] {
-		--kit-textfield-h: 28px;
-		--kit-textfield-px: 6px;
-		--kit-textfield-py: 10px;
-		--kit-textfield-gap: 8px;
-		--kit-textfield-font: 12px;
+		--kit-textfield-h: 24px;
+		--kit-textfield-p: 8px;
+		--kit-textfield-gap: var(--kit-space-compact);
+		--kit-textfield-font: 13px;
 	}
 	.kit-textfield[data-size='xs'] :global(.kit-icon[data-size='default']) {
 		--kit-icon-current-size: 0.875rem;
 	}
 	.kit-textfield[data-size='sm'] {
 		--kit-textfield-h: 32px;
-		--kit-textfield-px: 14px;
-		--kit-textfield-py: 12px;
-		--kit-textfield-gap: 6px;
-		--kit-textfield-font: 13px;
+		--kit-textfield-p: 10px;
+		--kit-textfield-gap: var(--kit-space-default);
+		--kit-textfield-font: 14px;
 	}
 	.kit-textfield[data-size='sm'] :global(.kit-icon[data-size='default']) {
 		--kit-icon-current-size: 1rem;
@@ -343,10 +341,9 @@
 
 	.kit-textfield[data-size='md'] {
 		--kit-textfield-h: 40px;
-		--kit-textfield-px: 14px;
-		--kit-textfield-py: 12px;
-		--kit-textfield-gap: 8px;
-		--kit-textfield-font: 14px;
+		--kit-textfield-p: 12px;
+		--kit-textfield-gap: var(--kit-space-default);
+		--kit-textfield-font: 16px;
 	}
 	.kit-textfield[data-size='md'] :global(.kit-icon[data-size='default']) {
 		--kit-icon-current-size: 1.125rem;
@@ -354,10 +351,9 @@
 
 	.kit-textfield[data-size='lg'] {
 		--kit-textfield-h: 48px;
-		--kit-textfield-px: 16px;
-		--kit-textfield-py: 14px;
-		--kit-textfield-gap: 10px;
-		--kit-textfield-font: 15px;
+		--kit-textfield-p: 14px;
+		--kit-textfield-gap: var(--kit-space-default);
+		--kit-textfield-font: 16px;
 	}
 	.kit-textfield[data-size='lg'] :global(.kit-icon[data-size='default']) {
 		--kit-icon-current-size: 1.25rem;
@@ -365,10 +361,9 @@
 
 	.kit-textfield[data-size='xl'] {
 		--kit-textfield-h: 56px;
-		--kit-textfield-px: 18px;
-		--kit-textfield-py: 16px;
-		--kit-textfield-gap: 12px;
-		--kit-textfield-font: 16px;
+		--kit-textfield-p: 16px;
+		--kit-textfield-gap: var(--kit-space-comfortable);
+		--kit-textfield-font: 17px;
 	}
 	.kit-textfield[data-size='xl'] :global(.kit-icon[data-size='default']) {
 		--kit-icon-current-size: 1.375rem;
@@ -406,21 +401,14 @@
 	 * density
 	 * @link ...
 	 */
-	.kit-textfield[data-density='none'] {
-		--kit-textfield-density-scale: 0;
-		--kit-textfield-density-h-scale: 0;
-	}
 	.kit-textfield[data-density='compact'] {
-		--kit-textfield-density-scale: 0.9;
-		--kit-textfield-density-h-scale: 0.92;
+		--kit-textfield-density-offset: var(--kit-density-compact);
 	}
 	.kit-textfield[data-density='default'] {
-		--kit-textfield-density-scale: 1;
-		--kit-textfield-density-h-scale: 1;
+		--kit-textfield-density-offset: var(--kit-density-default);
 	}
 	.kit-textfield[data-density='comfortable'] {
-		--kit-textfield-density-scale: 1.1;
-		--kit-textfield-density-h-scale: 1.15;
+		--kit-textfield-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 
@@ -474,8 +462,8 @@
 		gap: var(--kit-textfield-gap);
 		width: 100%;
 		min-width: 0;
-		min-height: calc(var(--kit-textfield-h) * var(--kit-textfield-density-h-scale));
-		padding: 0 calc(var(--kit-textfield-px) * var(--kit-textfield-density-scale));
+		min-height: calc(var(--kit-textfield-h) + var(--kit-textfield-density-offset) / 2);
+		padding: 0 calc(var(--kit-textfield-p) + var(--kit-textfield-density-offset) / 2);
 		border-radius: var(--kit-textfield-radius);
 		background: var(--kit-textfield-bg);
 		color: var(--kit-textfield-fg);
@@ -563,7 +551,7 @@
 
 	.kit-textfield__message {
 		grid-area: message;
-		padding-inline: var(--kit-textfield-px);
+		padding-inline: calc(var(--kit-textfield-p) + var(--kit-textfield-density-offset) / 2);
 		font-size: 12px;
 		opacity: 0;
 	}