lapikit 0.7.3 → 0.7.4

package/dist/components/icon/icon.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import { useClassName, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
+	import { useComponentAttrs } from '../../utils';
 	import type { IconProps } from './icon.types.js';
 
 	let {
 		ref = $bindable(),
 		is = 'i',
 		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		name = undefined,
@@ -26,46 +25,15 @@
 		...rest
 	}: IconProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-icon',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-icon-color:${color && `var(--kit-color-${color})`}` : '',
-			color ? `color:${color && `var(--kit-color-${color})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
+	let attrs = $derived(
+		useComponentAttrs('kit-icon', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 
 	let resolvedSrc = $derived(src ?? (icon?.includes('/') ? icon : undefined));
 	let resolvedName = $derived(name ?? (!icon?.includes('/') ? icon : undefined));
 	let hasChildren = $derived(!!children);
 	let hasContent = $derived(hasChildren || !!resolvedSrc || !!resolvedName);
-	let classWithIconName = $derived(
-		!hasChildren && !resolvedSrc && resolvedName
-			? `${componentClass} ${resolvedName}`.trim()
-			: componentClass
-	);
+	let iconClass = $derived(!hasChildren && !resolvedSrc ? resolvedName : undefined);
 
 	let iconRole = $derived(!decorative && (label || alt) ? 'img' : undefined);
 	let iconAriaLabel = $derived(!decorative ? label || alt || undefined : undefined);
@@ -84,13 +52,13 @@
 	<svelte:element
 		this={is}
 		bind:this={ref}
-		class={classWithIconName}
-		style={resolvedStyle}
+		class={[attrs.class, iconClass]}
+		style={attrs.style}
 		data-size={size}
 		role={iconRole}
 		aria-label={iconAriaLabel}
 		aria-hidden={iconAriaHidden}
-		{...restProps}
+		{...attrs.rest}
 	>
 		{#if hasChildren}
 			{@render children?.()}
@@ -114,62 +82,65 @@
 	</svelte:element>
 {/if}
 
-<style>
-	.kit-icon {
-		--kit-icon-size-xs: 12px;
-		--kit-icon-size-sm: 14px;
-		--kit-icon-size-md: 16px;
-		--kit-icon-size-lg: 18px;
-		--kit-icon-size-xl: 20px;
+<style>:where(.kit-icon) {
+  --kit-icon-size-xs: 0.75rem;
+  --kit-icon-size-sm: 0.875rem;
+  --kit-icon-size-md: 1rem;
+  --kit-icon-size-lg: 1.125rem;
+  --kit-icon-size-xl: 1.25rem;
+}
+
+.kit-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kit-icon-color, currentColor);
+  font-size: var(--kit-icon-current-size, var(--kit-icon-size-md));
+  line-height: 1;
+  text-indent: 0;
+  vertical-align: middle;
+}
+.kit-icon :global(svg),
+.kit-icon img,
+.kit-icon .kit-icon__mask {
+  display: block;
+  flex-shrink: 0;
+  width: var(--kit-icon-current-size, var(--kit-icon-size-md));
+  height: var(--kit-icon-current-size, var(--kit-icon-size-md));
+}
+.kit-icon .kit-icon__mask {
+  display: inline-block;
+  background-color: var(--kit-icon-color, currentColor);
+  mask-image: var(--kit-icon-mask-image);
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  mask-position: center;
+  -webkit-mask-image: var(--kit-icon-mask-image);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  -webkit-mask-position: center;
+}
+
+/**
+ * size
+ * @link https://lapikit.dev/docs/components/icon#size
+ */
+:where(.kit-icon[data-size=xs]) {
+  --kit-icon-current-size: var(--kit-icon-size-xs);
+}
 
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		text-indent: 0;
-		line-height: 1;
-		font-size: var(--kit-icon-current-size, var(--kit-icon-size-md));
-		vertical-align: middle;
-	}
+:where(.kit-icon[data-size=sm]) {
+  --kit-icon-current-size: var(--kit-icon-size-sm);
+}
 
-	.kit-icon :global(svg),
-	.kit-icon img,
-	.kit-icon .kit-icon__mask {
-		width: var(--kit-icon-current-size, var(--kit-icon-size-md));
-		height: var(--kit-icon-current-size, var(--kit-icon-size-md));
-		flex-shrink: 0;
-		display: block;
-	}
+:where(.kit-icon[data-size=md]) {
+  --kit-icon-current-size: var(--kit-icon-size-md);
+}
 
-	.kit-icon .kit-icon__mask {
-		display: inline-block;
-		background-color: var(--kit-icon-color, currentColor);
-		mask-image: var(--kit-icon-mask-image);
-		mask-repeat: no-repeat;
-		mask-size: contain;
-		mask-position: center;
-		-webkit-mask-image: var(--kit-icon-mask-image);
-		-webkit-mask-repeat: no-repeat;
-		-webkit-mask-size: contain;
-		-webkit-mask-position: center;
-	}
+:where(.kit-icon[data-size=lg]) {
+  --kit-icon-current-size: var(--kit-icon-size-lg);
+}
 
-	/** 
-	 * size
-	 * @link https://lapikit.dev/docs/components/icon#size 
-	 */
-	.kit-icon[data-size='xs'] {
-		--kit-icon-current-size: var(--kit-icon-size-xs);
-	}
-	.kit-icon[data-size='sm'] {
-		--kit-icon-current-size: var(--kit-icon-size-sm);
-	}
-	.kit-icon[data-size='md'] {
-		--kit-icon-current-size: var(--kit-icon-size-md);
-	}
-	.kit-icon[data-size='lg'] {
-		--kit-icon-current-size: var(--kit-icon-size-lg);
-	}
-	.kit-icon[data-size='xl'] {
-		--kit-icon-current-size: var(--kit-icon-size-xl);
-	}
-</style>
+:where(.kit-icon[data-size=xl]) {
+  --kit-icon-current-size: var(--kit-icon-size-xl);
+}</style>

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

@@ -1,6 +1,7 @@
 import type { Component, SizeType } from '../../@types';
 export interface IconProps extends Component {
     ref?: HTMLElement | null;
+    is?: 'i' | 'span';
     name?: string;
     src?: string;
     icon?: string;
@@ -10,7 +11,7 @@ export interface IconProps extends Component {
     decorative?: boolean;
     loading?: 'eager' | 'lazy';
     decoding?: 'sync' | 'async' | 'auto';
-    color?: string;
+    color?: string | false;
     colorMode?: 'auto' | 'none' | 'mask' | 'filter';
     imgFilter?: string;
 }

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export type { ModelDropdownProps, ModelDropdownHandleProps } from './dropdown/dropdown.types';
 export type { ModelAccordionItemProps } from './accordion/accordion.types';
 export type { ModelPopoverProps } from './popover/popover.types';
+export type { FieldControlProps } from './field/field.types';
 export { default as KitApp } from './app/app.svelte';
 export { default as KitAppbar } from './appbar/appbar.svelte';
 export { default as KitBtn } from './btn/btn.svelte';
@@ -16,6 +17,7 @@ export { default as KitAvatar } from './avatar/avatar.svelte';
 export { default as KitDropdown } from './dropdown/dropdown.svelte';
 export { default as KitPopover } from './popover/popover.svelte';
 export { default as KitTooltip } from './tooltip/tooltip.svelte';
+export { default as KitField } from './field/field.svelte';
 export { default as KitTextfield } from './textfield/textfield.svelte';
 export { default as KitToolbar } from './toolbar/toolbar.svelte';
 export { default as KitList } from './list/list.svelte';

package/dist/components/index.js

@@ -14,6 +14,7 @@ export { default as KitAvatar } from './avatar/avatar.svelte';
 export { default as KitDropdown } from './dropdown/dropdown.svelte';
 export { default as KitPopover } from './popover/popover.svelte';
 export { default as KitTooltip } from './tooltip/tooltip.svelte';
+export { default as KitField } from './field/field.svelte';
 export { default as KitTextfield } from './textfield/textfield.svelte';
 export { default as KitToolbar } from './toolbar/toolbar.svelte';
 export { default as KitList } from './list/list.svelte';

package/dist/components/list/list.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import { makeComponentProps } from '../../html-mapped';
-	import { useClassName, useStyles } from '../../utils';
+	import { useComponentAttrs } from '../../utils';
 	import type { ListProps } from './list.types.js';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
 		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		size = 'md',
@@ -17,212 +16,212 @@
 		rounded = 'md',
 		nav = false,
 		color,
-		background,
 		...rest
 	}: ListProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-list',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	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('; ')
+	let attrs = $derived(
+		useComponentAttrs('kit-list', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
+	class={attrs.class}
+	style={attrs.style}
 	data-size={size}
 	data-variant={variant}
 	data-density={density}
 	data-rounded={rounded}
 	data-nav={nav}
 	role={nav ? 'navigation' : is === 'ul' ? undefined : 'list'}
-	{...restProps}
+	{...attrs.rest}
 >
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-list {
-		width: 100%;
-		display: flex;
-		position: relative;
-		flex-direction: column;
-		gap: 0;
-		border: 0;
-		box-sizing: border-box;
-		transition:
-			background 140ms ease,
-			color 140ms ease,
-			box-shadow 140ms ease,
-			translate 140ms ease;
-	}
-
-	.kit-list[data-variant='text']
-		:global(.kit-list-item[data-interactive='true'][data-active='true'][data-disabled='false']),
-	.kit-list[data-variant='text']
-		:global(.kit-list-item[data-interactive='true'][data-disabled='false']:active) {
-		background: var(--kit-list-item-active-bg);
-	}
-
-	/** 
-	 * density
-	 * @link https://lapikit.dev/docs/components/list#density 
-	 */
-	.kit-list[data-density='compact'] {
-		--kit-list-density-offset: var(--kit-space-compact);
-	}
-	.kit-list[data-density='default'] {
-		--kit-list-density-offset: var(--kit-space-default);
-	}
-	.kit-list[data-density='comfortable'] {
-		--kit-list-density-offset: var(--kit-space-comfortable);
-	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-list[data-rounded='0'] :global(.kit-list-item) {
-		--kit-list-item-radius: var(--kit-shape-none);
-	}
-	.kit-list[data-rounded='xs'] :global(.kit-list-item) {
-		--kit-list-item-radius: var(--kit-shape-xs);
-	}
-	.kit-list[data-rounded='sm'] :global(.kit-list-item) {
-		--kit-list-item-radius: var(--kit-shape-sm);
-	}
-	.kit-list[data-rounded='md'] :global(.kit-list-item) {
-		--kit-list-item-radius: var(--kit-shape-md);
-	}
-	.kit-list[data-rounded='lg'] :global(.kit-list-item) {
-		--kit-list-item-radius: var(--kit-shape-lg);
-	}
-	.kit-list[data-rounded='xl'] :global(.kit-list-item) {
-		--kit-list-item-radius: var(--kit-shape-xl);
-	}
-	.kit-list[data-rounded='full'] :global(.kit-list-item) {
-		--kit-list-item-radius: var(--kit-shape-full);
-	}
-
-	/** 
-	 * variant
-	 * @link https://lapikit.dev/docs/components/list#variants
-	 */
-	.kit-list[data-variant='filled'] {
-		--kit-list-item-bg: var(--kit-color-surface-2);
-		--kit-list-item-fg: var(--kit-color-text);
-
-		--kit-list-item-hover-bg: color-mix(in oklab, var(---kit-list-item-bg), black 10%);
-		--kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-bg), black 16%);
-	}
-	.kit-list[data-variant='outline'] {
-		--kit-list-item-bg: transparent;
-		--kit-list-item-fg: var(--kit-color-text);
-		--kit-list-item-bd: var(--kit-list-item-fg);
-
-		--kit-list-item-hover-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 80%);
-		--kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 92%);
-	}
-	.kit-list[data-variant='text'] {
-		--kit-list-item-bg: transparent;
-		--kit-list-item-fg: var(--kit-color-text);
-
-		--kit-list-item-hover-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 80%);
-		--kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 92%);
-	}
-	.kit-list[data-variant='outline'] :global(.kit-list-item::before) {
-		content: '';
-		position: absolute;
-		inset: 0;
-		border: 1px solid var(--kit-list-item-bd);
-		border-radius: inherit;
-		box-sizing: border-box;
-		z-index: 1;
-		pointer-events: none;
-	}
-
-	/** 
-	 * nav
-	 * @link https://lapikit.dev/docs/components/list#nav 
-	 */
-	.kit-list[data-nav='true'] {
-		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;
-	}
-
-	/**
-	* size
-	* @link nothing...
-	*/
-	.kit-list[data-size='xs'] :global(.kit-list-item) {
-		--kit-list-item-h: 28px;
-		--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: 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: 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: 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: 60px;
-		--kit-list-item-p: 24px;
-		--kit-list-item-gap: var(--kit-space-comfortable);
-		--kit-list-item-font: var(--kit-font-xl);
-	}
-</style>
+<style>:where(.kit-list) {
+  --kit-list-color: initial;
+  --kit-list-on-color: initial;
+  --kit-list-item-radius: var(--kit-list-radius);
+}
+
+.kit-list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  box-sizing: border-box;
+  width: 100%;
+  border: 0;
+}
+.kit-list[data-nav=true] {
+  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-start-start-radius: var(--kit-list-item-radius);
+  border-start-end-radius: var(--kit-list-item-radius);
+}
+.kit-list:not([data-nav=true]) :global(.kit-list-item:last-child) {
+  border-end-start-radius: var(--kit-list-item-radius);
+  border-end-end-radius: var(--kit-list-item-radius);
+}
+.kit-list:not([data-nav=true]) :global(.kit-list-item:not(:first-child, :last-child)) {
+  --kit-list-item-radius: 0;
+}
+.kit-list:is([data-variant=outline], [data-variant=surface]) :global(.kit-list-item::before) {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  border: var(--kit-outline-weight) solid var(--kit-list-item-border);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+/**
+ * size: read by the items
+ * @link https://lapikit.dev/docs/components/list#size
+ */
+:where(.kit-list[data-size=xs]) {
+  --kit-list-item-h: 1.875rem;
+  --kit-list-item-p: 0.875rem;
+  --kit-list-item-gap: 0.25rem;
+  --kit-list-item-font: var(--kit-font-xs);
+}
+
+:where(.kit-list[data-size=sm]) {
+  --kit-list-item-h: 2.375rem;
+  --kit-list-item-p: 1rem;
+  --kit-list-item-gap: 0.375rem;
+  --kit-list-item-font: var(--kit-font-sm);
+}
+
+:where(.kit-list[data-size=md]) {
+  --kit-list-item-h: 2.875rem;
+  --kit-list-item-p: 1.125rem;
+  --kit-list-item-gap: 0.5rem;
+  --kit-list-item-font: var(--kit-font-md);
+}
+
+:where(.kit-list[data-size=lg]) {
+  --kit-list-item-h: 3.375rem;
+  --kit-list-item-p: 1.375rem;
+  --kit-list-item-gap: 0.5rem;
+  --kit-list-item-font: var(--kit-font-lg);
+}
+
+:where(.kit-list[data-size=xl]) {
+  --kit-list-item-h: 3.875rem;
+  --kit-list-item-p: 1.625rem;
+  --kit-list-item-gap: 0.625rem;
+  --kit-list-item-font: var(--kit-font-xl);
+}
+
+/**
+ * variant: applied on the items, (0,1,0) to win over the base of the item whatever the order of the styles
+ * @link https://lapikit.dev/docs/components/list#variants
+ */
+:where(.kit-list[data-variant=tonal]) :global(.kit-list-item) {
+  --kit-list-item-bg: color-mix(in oklab, var(--kit-list-item-ink) 16%, transparent);
+  --kit-list-item-fg: var(--kit-list-item-ink);
+  --kit-list-item-border: transparent;
+  --kit-list-item-active: color-mix(in oklab, var(--kit-list-item-ink) 28%, transparent);
+  --kit-list-item-active-fg: var(--kit-list-item-ink);
+}
+
+:where(.kit-list[data-variant=outline]) :global(.kit-list-item) {
+  --kit-list-item-bg: transparent;
+  --kit-list-item-fg: var(--kit-list-item-ink);
+  --kit-list-item-border: var(--kit-list-item-color, var(--kit-color-border));
+  --kit-list-item-active: color-mix(in oklab, var(--kit-list-item-ink) 14%, transparent);
+  --kit-list-item-active-fg: var(--kit-list-item-ink);
+}
+
+:where(.kit-list[data-variant=surface]) :global(.kit-list-item) {
+  --kit-list-item-bg: color-mix(in oklab, var(--kit-list-item-ink) 8%, transparent);
+  --kit-list-item-fg: var(--kit-list-item-ink);
+  --kit-list-item-border: color-mix(in oklab, var(--kit-list-item-ink) 35%, transparent);
+  --kit-list-item-active: color-mix(in oklab, var(--kit-list-item-ink) 18%, transparent);
+  --kit-list-item-active-fg: var(--kit-list-item-ink);
+}
+
+:where(.kit-list[data-variant=text]) :global(.kit-list-item) {
+  --kit-list-item-bg: transparent;
+  --kit-list-item-fg: var(--kit-list-item-ink);
+  --kit-list-item-border: transparent;
+  --kit-list-item-active: color-mix(in oklab, var(--kit-list-item-ink) 14%, transparent);
+  --kit-list-item-active-fg: var(--kit-list-item-ink);
+}
+
+:where(.kit-list[data-variant=plain]) :global(.kit-list-item) {
+  --kit-list-item-bg: transparent;
+  --kit-list-item-fg: var(--kit-list-item-ink);
+  --kit-list-item-border: transparent;
+  --kit-list-item-hover: transparent;
+  --kit-list-item-pressed: transparent;
+  --kit-list-item-hover-fg: color-mix(in oklab, var(--kit-list-item-fg) 72%, transparent);
+  --kit-list-item-pressed-fg: color-mix(in oklab, var(--kit-list-item-fg) 56%, transparent);
+  --kit-list-item-active: transparent;
+  --kit-list-item-active-fg: var(--kit-list-item-color, var(--kit-color-accent));
+}
+
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-list[data-rounded="0"]) {
+  --kit-list-radius: var(--kit-shape-none);
+}
+
+:where(.kit-list[data-rounded=xs]) {
+  --kit-list-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-list[data-rounded=sm]) {
+  --kit-list-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-list[data-rounded=md]) {
+  --kit-list-radius: var(--kit-shape-md);
+}
+
+:where(.kit-list[data-rounded=lg]) {
+  --kit-list-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-list[data-rounded=xl]) {
+  --kit-list-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-list[data-rounded=full]) {
+  --kit-list-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/list#density
+ */
+:where(.kit-list[data-density=dense]) {
+  --kit-list-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-list[data-density=compact]) {
+  --kit-list-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-list[data-density=default]) {
+  --kit-list-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-list[data-density=comfortable]) {
+  --kit-list-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-list[data-density=spacious]) {
+  --kit-list-density-offset: var(--kit-density-spacious);
+}</style>