lapikit 0.6.2 → 0.6.4

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

@@ -1,16 +1,18 @@
-import type { Component, RoundedType } from '../../@types';
-export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type DialogPosition = 'top' | 'center' | 'bottom';
-export type DialogDensity = 'compact' | 'comfortable' | 'default';
+import type { Component, DensityType, ElevationProps, RoundedType } from '../../@types';
+type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type DialogPosition = 'top' | 'center' | 'bottom' | 'top-left' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-right';
 export interface DialogProps extends Component {
     ref?: HTMLDialogElement | null;
     open?: boolean;
     persistent?: boolean;
     size?: DialogSize;
     position?: DialogPosition;
-    density?: DialogDensity;
+    density?: DensityType;
     rounded?: RoundedType;
     classContent?: string | string[] | undefined;
     color?: string;
     background?: string;
+    elevation?: ElevationProps;
+    space?: string;
 }
+export {};

package/dist/components/dropdown/dropdown.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { useClassName, useStyles, clickOutside } from '../../utils';
+	import { useClassName, useStyles, clickOutside, useElevation } from '../../utils';
 	import { makeComponentProps } from '../../html-mapped';
 	import { getPositions } from './dropdown.svelte.js';
 	import type { DropdownProps, ModelDropdownProps } from './dropdown.types.js';
@@ -9,29 +9,27 @@
 		ref = $bindable(),
 		children,
 		activator,
-		rounded,
+		rounded = 'md',
 		position = 'bottom',
 		closeOnClick = false,
 		openOnHover = false,
 		color,
 		background,
+		density = 'default',
 		class: className = '',
 		style: styleAttr = '',
 		's-class': sClass,
 		's-style': sStyle,
+		elevation,
 		...rest
 	}: DropdownProps = $props();
 
-	let safePosition = $derived(
-		position === 'top' || position === 'bottom' || position === 'left' || position === 'right'
-			? position
-			: 'bottom'
-	);
-
 	let { classProps, styleProps, restProps } = $derived(
 		makeComponentProps(rest as Record<string, unknown>)
 	);
 
+	let elevationState = $derived(useElevation(elevation));
+
 	let componentClass = $derived(
 		useClassName({
 			baseClass: 'kit-dropdown-content',
@@ -49,18 +47,7 @@
 		})
 	);
 
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			background ? `--kit-dropdown-bg:${background}` : '',
-			color ? `--kit-dropdown-fg:${color}` : '',
-			typeof rounded === 'string' && rounded.includes('px')
-				? `--kit-dropdown-radius:${rounded}`
-				: ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 
 	const positioner = getPositions();
 
@@ -83,7 +70,7 @@
 
 	const updatePosition = () => {
 		if (!contentRef || !activatorRef) return;
-		positioner.update(activatorRef, contentRef, safePosition, false, true);
+		positioner.update(activatorRef, contentRef, position, false, true);
 		axis = positioner.values;
 	};
 
@@ -170,14 +157,20 @@
 		style={`left:${axis.x}px; top:${axis.y}px; ${mergedStyle}`}
 		role="menu"
 		data-rounded={rounded}
-		data-position={axis.location ?? safePosition}
+		data-position={axis.location ?? position}
+		data-density={density}
 		onmouseover={() => handleMouseEvent('open', activatorRef)}
 		onmouseleave={() => handleMouseEvent('close', activatorRef)}
 		onclick={(event) => {
 			event.stopPropagation();
 			handleContentClick();
 		}}
+		data-elevation={elevationState.base}
+		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,43 +179,60 @@
 
 <style>
 	.kit-dropdown-content {
-		--kit-dropdown-bg: var(--kit-surface-1);
-		--kit-dropdown-fg: var(--kit-fg);
-		--kit-dropdown-radius: 12px;
-		--kit-dropdown-bd: color-mix(in oklab, var(--kit-fg), transparent 88%);
-		--kit-dropdown-shadow: 0 18px 40px -18px color-mix(in oklab, black 24%, transparent);
+		--kit-dropdown-bg: var(--kit-color-surface-3);
+		--kit-dropdown-fg: var(--kit-color-text);
 
 		position: fixed;
 		z-index: 1800;
 		min-width: 12rem;
 		max-width: min(22rem, calc(100vw - 1rem));
-		padding: 0.375rem;
-		border: 1px solid var(--kit-dropdown-bd);
+		padding: 0.375rem calc(0.375rem * var(--kit-dropdown-density-scale));
+		border: 0;
 		border-radius: var(--kit-dropdown-radius);
 		background: var(--kit-dropdown-bg);
 		color: var(--kit-dropdown-fg);
-		box-shadow: var(--kit-dropdown-shadow);
 		transform-origin: top left;
 		animation: kit-dropdown-enter 140ms ease;
 	}
 
+	/** 
+	 * rounded
+	 * @link ...
+	 */
 	.kit-dropdown-content[data-rounded='0'] {
-		--kit-dropdown-radius: 0;
+		--kit-dropdown-radius: var(--kit-shape-none);
 	}
 	.kit-dropdown-content[data-rounded='xs'] {
-		--kit-dropdown-radius: 2px;
+		--kit-dropdown-radius: var(--kit-shape-xs);
 	}
 	.kit-dropdown-content[data-rounded='sm'] {
-		--kit-dropdown-radius: 4px;
+		--kit-dropdown-radius: var(--kit-shape-sm);
 	}
 	.kit-dropdown-content[data-rounded='md'] {
-		--kit-dropdown-radius: 8px;
+		--kit-dropdown-radius: var(--kit-shape-md);
 	}
 	.kit-dropdown-content[data-rounded='lg'] {
-		--kit-dropdown-radius: 16px;
+		--kit-dropdown-radius: var(--kit-shape-lg);
 	}
 	.kit-dropdown-content[data-rounded='xl'] {
-		--kit-dropdown-radius: 99999px;
+		--kit-dropdown-radius: var(--kit-shape-xl);
+	}
+
+	/** 
+	 * 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-content[data-density='default'] {
+		--kit-dropdown-density-scale: 1;
+	}
+	.kit-dropdown-content[data-density='comfortable'] {
+		--kit-dropdown-density-scale: 1.15;
 	}
 
 	@keyframes kit-dropdown-enter {

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

@@ -1,4 +1,4 @@
-import type { Component, PropValue, RoundedType } from '../../@types/index';
+import type { Component, DensityType, ElevationProps, PropValue, RoundedType } from '../../@types/index';
 import type { Snippet } from 'svelte';
 export type PositionElement = {
     x: number;
@@ -13,15 +13,17 @@ export type ModelDropdownProps = {
 export type ModelDropdownHandleProps = (state: 'open' | 'close', element: HTMLElement | PointerEvent | null) => void;
 export interface DropdownProps extends Component {
     ref?: HTMLElement | null;
-    rounded?: RoundedType | string;
+    rounded?: RoundedType;
     position?: 'top' | 'bottom' | 'left' | 'right';
     openOnHover?: boolean;
     closeOnClick?: boolean;
     color?: string;
     background?: string;
+    density?: DensityType;
     activator?: Snippet<[
         ModelDropdownProps,
         (state: 'open' | 'close', element: HTMLElement | PointerEvent | null) => void
     ]>;
     [key: string]: PropValue | Record<string, PropValue> | unknown;
+    elevation?: ElevationProps;
 }

package/dist/components/icon/icon.svelte

@@ -47,14 +47,6 @@
 		})
 	);
 
-	let safeSize = $derived(
-		size === 'default' || size === undefined
-			? undefined
-			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
-				? size
-				: 'md'
-	);
-
 	let resolvedSrc = $derived(src ?? (icon?.includes('/') ? icon : undefined));
 	let resolvedName = $derived(name ?? (!icon?.includes('/') ? icon : undefined));
 	let hasChildren = $derived(!!children);
@@ -65,33 +57,18 @@
 			: componentClass
 	);
 
-	let safeLoading = $derived(loading === 'lazy' || loading === 'eager' ? loading : 'eager');
-	let safeDecoding = $derived(
-		decoding === 'async' || decoding === 'sync' || decoding === 'auto' ? decoding : 'async'
-	);
-	let safeColorMode = $derived(
-		colorMode === 'auto' || colorMode === 'none' || colorMode === 'mask' || colorMode === 'filter'
-			? colorMode
-			: 'auto'
-	);
-
 	let iconRole = $derived(!decorative && (label || alt) ? 'img' : undefined);
 	let iconAriaLabel = $derived(!decorative ? label || alt || undefined : undefined);
 	let iconAriaHidden = $derived(decorative ? true : undefined);
 	let imgAlt = $derived(decorative ? '' : alt || label || '');
 	let isSvgSrc = $derived(!!resolvedSrc && /\.svg($|\?)/i.test(resolvedSrc));
 	let useMaskMode = $derived(
-		!!resolvedSrc &&
-			(color ? safeColorMode === 'mask' || (safeColorMode === 'auto' && isSvgSrc) : false)
+		!!resolvedSrc && (color ? colorMode === 'mask' || (colorMode === 'auto' && isSvgSrc) : false)
 	);
 	let useFilterMode = $derived(
-		!!resolvedSrc && !!imgFilter && (safeColorMode === 'filter' || safeColorMode === 'auto')
-	);
-	let mergedStyle = $derived(
-		[componentStyle, color ? `color:${color}` : '', color ? `--kit-icon-color:${color}` : '']
-			.filter(Boolean)
-			.join('; ')
+		!!resolvedSrc && !!imgFilter && (colorMode === 'filter' || colorMode === 'auto')
 	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 </script>
 
 {#if hasContent}
@@ -100,10 +77,12 @@
 		bind:this={ref}
 		class={classWithIconName}
 		style={mergedStyle}
-		data-size={safeSize}
+		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}
@@ -119,8 +98,8 @@
 				<img
 					src={resolvedSrc}
 					alt={imgAlt}
-					loading={safeLoading}
-					decoding={safeDecoding}
+					{loading}
+					{decoding}
 					style={useFilterMode ? `filter:${imgFilter}` : undefined}
 				/>
 			{/if}
@@ -130,13 +109,6 @@
 
 <style>
 	.kit-icon {
-		--kit-icon-size-xs: 0.875rem;
-		--kit-icon-size-sm: 1rem;
-		--kit-icon-size-md: 1.125rem;
-		--kit-icon-size-lg: 1.25rem;
-		--kit-icon-size-xl: 1.375rem;
-		--kit-icon-current-size: var(--kit-icon-size-md);
-
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
@@ -146,22 +118,6 @@
 		vertical-align: middle;
 	}
 
-	.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);
-	}
-
 	.kit-icon :global(svg),
 	.kit-icon img,
 	.kit-icon .kit-icon__mask {
@@ -183,4 +139,24 @@
 		-webkit-mask-size: contain;
 		-webkit-mask-position: center;
 	}
+
+	/** 
+	 * size
+	 * @link https://lapikit.dev/docs/components/icon#size 
+	 */
+	.kit-icon[data-size='xs'] {
+		--kit-icon-current-size: 0.875rem;
+	}
+	.kit-icon[data-size='sm'] {
+		--kit-icon-current-size: 1rem;
+	}
+	.kit-icon[data-size='md'] {
+		--kit-icon-current-size: 1.125rem;
+	}
+	.kit-icon[data-size='lg'] {
+		--kit-icon-current-size: 1.25rem;
+	}
+	.kit-icon[data-size='xl'] {
+		--kit-icon-current-size: 1.375rem;
+	}
 </style>

package/dist/components/list/list.svelte

@@ -1,17 +1,7 @@
 <script lang="ts">
 	import { makeComponentProps } from '../../html-mapped';
 	import { useClassName, useStyles } from '../../utils';
-	import type { ListDensity, ListProps, ListVariant } from './list.types.js';
-
-	function resolveVariant(value: ListVariant | undefined): ListVariant {
-		return value === 'filled' || value === 'outline' || value === 'text' ? value : 'filled';
-	}
-
-	function resolveDensity(value: ListDensity | undefined): ListDensity {
-		return value === 'compact' || value === 'comfortable' || value === 'default'
-			? value
-			: 'default';
-	}
+	import type { ListProps } from './list.types.js';
 
 	let {
 		ref = $bindable(),
@@ -26,8 +16,8 @@
 		density = 'default',
 		rounded = 'md',
 		nav = false,
-		color = undefined,
-		background = undefined,
+		color,
+		background,
 		...rest
 	}: ListProps = $props();
 
@@ -52,24 +42,7 @@
 		})
 	);
 
-	let safeVariant = $derived(resolveVariant(variant));
-	let safeDensity = $derived(resolveDensity(density));
-	let safeSize = $derived(
-		size === 'default'
-			? 'md'
-			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
-				? size
-				: 'md'
-	);
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-list-fg:${color}` : '',
-			background ? `--kit-list-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 </script>
 
 <svelte:element
@@ -77,12 +50,14 @@
 	bind:this={ref}
 	class={componentClass}
 	style={mergedStyle}
-	data-size={safeSize}
-	data-variant={safeVariant}
-	data-density={safeDensity}
+	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,87 +65,145 @@
 
 <style>
 	.kit-list {
-		--kit-list-bg: var(--kit-surface-1);
-		--kit-list-fg: var(--kit-fg);
-		--kit-list-bd: var(--kit-border);
-		--kit-list-radius: 10px;
-		--kit-list-item-h-xs: 2.125rem;
-		--kit-list-item-h-sm: 2.375rem;
-		--kit-list-item-h-md: 2.75rem;
-		--kit-list-item-h-lg: 3.125rem;
-		--kit-list-item-h-xl: 3.5rem;
-		--kit-list-item-px-xs: 0.625rem;
-		--kit-list-item-px-sm: 0.75rem;
-		--kit-list-item-px-md: 0.875rem;
-		--kit-list-item-px-lg: 1rem;
-		--kit-list-item-px-xl: 1.125rem;
-		--kit-list-item-gap-xs: 0.5rem;
-		--kit-list-item-gap-sm: 0.5rem;
-		--kit-list-item-gap-md: 0.625rem;
-		--kit-list-item-gap-lg: 0.75rem;
-		--kit-list-item-gap-xl: 0.875rem;
-		--kit-list-item-font-xs: 0.75rem;
-		--kit-list-item-font-sm: 0.875rem;
-		--kit-list-item-font-md: 0.9375rem;
-		--kit-list-item-font-lg: 1rem;
-		--kit-list-item-font-xl: 1.0625rem;
-		--kit-list-item-h: var(--kit-list-item-h-md);
-		--kit-list-item-px: var(--kit-list-item-px-md);
-		--kit-list-item-gap: var(--kit-list-item-gap-md);
-		--kit-list-item-font: var(--kit-list-item-font-md);
-		--kit-list-density-offset: 0rem;
-
+		width: 100%;
 		display: flex;
+		position: relative;
 		flex-direction: column;
-		width: 100%;
-		padding: 0.25rem;
-		gap: 0.125rem;
-		color: var(--kit-list-fg);
-		background: transparent;
-		border-radius: var(--kit-list-radius);
+		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-nav='true'] {
-		padding: 0.5rem;
+	.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='none'] {
+		--kit-list-density-scale: 0;
+		--kit-list-density-h-scale: 0;
+	}
 	.kit-list[data-density='compact'] {
-		--kit-list-density-offset: -0.25rem;
+		--kit-list-density-scale: 0.9;
+		--kit-list-density-h-scale: 0.92;
+	}
+	.kit-list[data-density='default'] {
+		--kit-list-density-scale: 1;
+		--kit-list-density-h-scale: 1;
 	}
-
 	.kit-list[data-density='comfortable'] {
-		--kit-list-density-offset: 0.25rem;
+		--kit-list-density-scale: 1.1;
+		--kit-list-density-h-scale: 1.15;
 	}
 
-	.kit-list[data-rounded='0'] {
-		--kit-list-radius: 0;
+	/** 
+	 * rounded
+	 * @link ...
+	 */
+	.kit-list[data-rounded='0'] :global(.kit-list-item) {
+		--kit-list-item-radius: var(--kit-shape-none);
 	}
-
-	.kit-list[data-rounded='xs'] {
-		--kit-list-radius: 2px;
+	.kit-list[data-rounded='xs'] :global(.kit-list-item) {
+		--kit-list-item-radius: var(--kit-shape-xs);
 	}
-
-	.kit-list[data-rounded='sm'] {
-		--kit-list-radius: 6px;
+	.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'] :global(.kit-list-item) {
+		--kit-list-item-bg: var(--kit-color-surface-2);
+		--kit-list-item-fg: var(--kit-color-text);
 
-	.kit-list[data-rounded='md'] {
-		--kit-list-radius: 10px;
+		--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'] :global(.kit-list-item) {
+		--kit-list-item-bg: transparent;
+		--kit-list-item-fg: var(--kit-color-text);
+		--kit-list-item-bd: var(--kit-list-item-fg);
 
-	.kit-list[data-rounded='lg'] {
-		--kit-list-radius: 16px;
+		--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'] :global(.kit-list-item) {
+		--kit-list-item-bg: transparent;
+		--kit-list-item-fg: var(--kit-color-text);
 
-	.kit-list[data-rounded='xl'] {
-		--kit-list-radius: 9999px;
+		--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'] :global(.kit-list-item .outline),
+	.kit-list[data-variant='filled'] :global(.kit-list-item .outline) {
+		display: none;
 	}
 
-	.kit-list[data-variant='filled'] {
-		background: color-mix(in oklab, var(--kit-list-bg), transparent 12%);
+	/** 
+	 * nav
+	 * @link https://lapikit.dev/docs/components/list#nav 
+	 */
+	.kit-list[data-nav='true'] {
+		padding: 0.5rem;
 	}
 
-	.kit-list[data-variant='outline'] {
-		border: 1px solid var(--kit-list-bd);
+	/**
+	* size
+	* @link nothing...
+	*/
+	.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[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[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[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[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;
 	}
 </style>

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

@@ -1,7 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { Component, RoundedType, SizeType } from '../../@types';
+import type { Component, DensityType, RoundedType, SizeType } from '../../@types';
 export type ListVariant = 'filled' | 'outline' | 'text';
-export type ListDensity = 'compact' | 'comfortable' | 'default';
 export type ListElement = 'div' | 'nav' | 'ul';
 export type ListItemElement = 'div' | 'a' | 'button' | 'li';
 export interface ListProps extends Component {
@@ -9,8 +8,8 @@ export interface ListProps extends Component {
     is?: ListElement;
     size?: SizeType;
     variant?: ListVariant;
-    density?: ListDensity;
-    rounded?: RoundedType;
+    density?: DensityType;
+    rounded?: RoundedType | 'full';
     nav?: boolean;
     color?: string;
     background?: string;
@@ -23,7 +22,7 @@ export interface ListItemProps extends Component {
     prepend?: Snippet;
     color?: string;
     background?: string;
-    rounded?: RoundedType;
+    interactive?: boolean;
     active?: boolean;
     disabled?: boolean;
     noRipple?: boolean;