lapikit 0.6.3 → 0.6.4

package/dist/components/chip/chip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useClassName, useStyles } from '../../utils';
+	import { useClassName, useElevation, useStyles } from '../../utils';
 	import { makeComponentProps } from '../../html-mapped';
 	import { ripple } from '../../animations';
 	import type { ChipProps } from './chip.types.js';
@@ -14,9 +14,10 @@
 		's-style': sStyle,
 		variant = 'filled',
 		density = 'default',
+		rounded = 'full',
 		loading,
 		active = false,
-		size = 'default',
+		size = 'md',
 		labelStyle = false,
 		disabled = false,
 		href,
@@ -30,31 +31,18 @@
 		append,
 		prepend,
 		readonly = false,
+		elevation,
+		background,
+		color,
 		...rest
 	}: ChipProps = $props();
 
-	let safeVariant = $derived(
-		variant === 'filled' || variant === 'outline' || variant === 'text' || variant === 'link'
-			? variant
-			: 'filled'
-	);
-	let safeSize = $derived(
-		size === 'default'
-			? 'md'
-			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
-				? size
-				: 'md'
-	);
-	let safeDensity = $derived(
-		density === 'compact' || density === 'comfortable' || density === 'default'
-			? density
-			: 'default'
-	);
-
 	let { classProps, styleProps, restProps } = $derived(
 		makeComponentProps(rest as Record<string, unknown>)
 	);
 
+	let elevationState = $derived(useElevation(elevation));
+
 	let componentClass = $derived(
 		useClassName({
 			baseClass: 'kit-chip',
@@ -107,23 +95,29 @@
 		bind:this={ref}
 		class={componentClass}
 		style={componentStyle}
-		data-size={safeSize}
-		data-variant={safeVariant}
+		data-size={size}
+		data-variant={variant}
+		data-rounded={rounded}
 		data-loading={loading}
 		data-active={active}
 		data-disabled={isDisabled}
 		data-readonly={isReadonly}
-		data-density={safeDensity}
+		data-density={density}
 		data-label-style={labelStyle}
 		data-interactive={isInteractive}
 		aria-busy={loading}
 		aria-disabled={isLocked || undefined}
+		data-elevation={elevationState.base}
+		data-elevation-hover={elevationState.hover}
+		data-elevation-active={elevationState.active}
 		use:ripple={{
 			component: 'chip',
 			disabled: noRipple || isLocked
 		}}
+		style:--kit-chip-fg={color && `var(--kit-color-${color})`}
+		style:--kit-chip-bg={background && `var(--kit-color-${background})`}
 	>
-		{#if safeVariant === 'outline'}
+		{#if variant === 'outline'}
 			<span class="outline"></span>
 		{/if}
 		<input
@@ -150,28 +144,34 @@
 		bind:this={ref}
 		class={componentClass}
 		style={componentStyle}
-		{...restProps}
 		type={resolvedType}
 		href={resolvedHref}
-		data-size={safeSize}
-		data-variant={safeVariant}
+		data-size={size}
+		data-variant={variant}
+		data-rounded={rounded}
 		data-loading={loading}
 		data-active={active}
 		data-disabled={isDisabled}
 		data-readonly={isReadonly}
-		data-density={safeDensity}
+		data-density={density}
 		data-label-style={labelStyle}
 		data-interactive={isInteractive}
 		disabled={resolvedDisabled}
 		aria-busy={loading}
+		data-elevation={elevationState.base}
+		data-elevation-hover={elevationState.hover}
+		data-elevation-active={elevationState.active}
 		aria-disabled={((tag === 'a' || tag === 'div') && isLocked) || undefined}
 		tabindex={tag === 'a' && isLocked ? -1 : undefined}
 		use:ripple={{
 			component: 'chip',
 			disabled: noRipple || !isInteractive
 		}}
+		style:--kit-chip-fg={color && `var(--kit-color-${color})`}
+		style:--kit-chip-bg={background && `var(--kit-color-${background})`}
+		{...restProps}
 	>
-		{#if safeVariant === 'outline'}
+		{#if variant === 'outline'}
 			<span class="outline"></span>
 		{/if}
 
@@ -227,26 +227,6 @@
 	}
 
 	.kit-chip {
-		--kit-chip-bg: var(--kit-surface-2);
-		--kit-chip-fg: var(--kit-fg);
-		--kit-chip-bd: var(--kit-border);
-		--kit-chip-hover-bg: color-mix(in oklab, var(--kit-chip-bg), var(--kit-chip-fg) 6%);
-		--kit-chip-active-bg: color-mix(in oklab, var(--kit-chip-bg), var(--kit-chip-fg) 10%);
-		--kit-chip-h-xs: 24px;
-		--kit-chip-h-sm: 28px;
-		--kit-chip-h-md: 32px;
-		--kit-chip-h-lg: 36px;
-		--kit-chip-h-xl: 40px;
-		--kit-chip-px-xs: 8px;
-		--kit-chip-px-sm: 10px;
-		--kit-chip-px-md: 12px;
-		--kit-chip-px-lg: 14px;
-		--kit-chip-px-xl: 16px;
-		--kit-chip-density-scale: 1;
-		--kit-chip-density-h-scale: 1;
-		--kit-chip-radius: 99999px;
-		--kit-chip-gap: 0.35em;
-
 		position: relative;
 		display: inline-flex;
 		box-sizing: border-box;
@@ -255,7 +235,7 @@
 		font-family: var(--kit-font);
 		background: var(--kit-chip-bg);
 		color: var(--kit-chip-fg);
-		height: max(24px, calc(var(--kit-chip-h) * var(--kit-chip-density-h-scale)));
+		height: calc(var(--kit-chip-h) * var(--kit-chip-density-h-scale));
 		padding-inline: calc(var(--kit-chip-px) * var(--kit-chip-density-scale));
 		border-radius: var(--kit-chip-radius);
 		text-decoration: none;
@@ -313,96 +293,6 @@
 		cursor: pointer;
 	}
 
-	.kit-chip[data-variant='filled'] {
-		--kit-chip-bg: var(--kit-accent);
-		--kit-chip-fg: white;
-		--kit-chip-hover-bg: color-mix(in oklab, var(--kit-chip-bg), black 10%);
-		--kit-chip-active-bg: color-mix(in oklab, var(--kit-chip-bg), black 16%);
-	}
-
-	.kit-chip[data-variant='outline'] {
-		--outline-color: var(--kit-accent);
-		--kit-chip-bg: transparent;
-		--kit-chip-fg: var(--kit-accent);
-		--kit-chip-hover-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 80%);
-		--kit-chip-active-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 92%);
-	}
-
-	.kit-chip[data-variant='text'] {
-		--kit-chip-bg: transparent;
-		--kit-chip-fg: var(--kit-accent);
-		--kit-chip-hover-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 80%);
-		--kit-chip-active-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 92%);
-	}
-
-	.kit-chip[data-variant='link'] {
-		--kit-chip-bg: transparent;
-		--kit-chip-fg: var(--kit-accent);
-		--kit-chip-decoration: underline;
-		height: inherit;
-		padding: 0;
-	}
-
-	.kit-chip[data-size='xs'] {
-		--kit-chip-h: var(--kit-chip-h-xs);
-		--kit-chip-px: var(--kit-chip-px-xs);
-		font-size: 12px;
-	}
-	.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: var(--kit-chip-h-sm);
-		--kit-chip-px: var(--kit-chip-px-sm);
-		font-size: 13px;
-	}
-	.kit-chip[data-size='sm'] :global(.kit-icon:not([data-size])) {
-		--kit-icon-current-size: var(--kit-icon-size-sm);
-	}
-
-	.kit-chip[data-size='md'] {
-		--kit-chip-h: var(--kit-chip-h-md);
-		--kit-chip-px: var(--kit-chip-px-md);
-		font-size: 14px;
-	}
-	.kit-chip[data-size='md'] :global(.kit-icon:not([data-size])) {
-		--kit-icon-current-size: var(--kit-icon-size-md);
-	}
-
-	.kit-chip[data-size='lg'] {
-		--kit-chip-h: var(--kit-chip-h-lg);
-		--kit-chip-px: var(--kit-chip-px-lg);
-		font-size: 15px;
-	}
-	.kit-chip[data-size='lg'] :global(.kit-icon:not([data-size])) {
-		--kit-icon-current-size: var(--kit-icon-size-lg);
-	}
-
-	.kit-chip[data-size='xl'] {
-		--kit-chip-h: var(--kit-chip-h-xl);
-		--kit-chip-px: var(--kit-chip-px-xl);
-		font-size: 16px;
-	}
-	.kit-chip[data-size='xl'] :global(.kit-icon:not([data-size])) {
-		--kit-icon-current-size: var(--kit-icon-size-xl);
-	}
-
-	.kit-chip[data-density='default'] {
-		--kit-chip-density-scale: 1;
-		--kit-chip-density-h-scale: 1;
-	}
-
-	.kit-chip[data-density='compact'] {
-		--kit-chip-density-scale: 0.92;
-		--kit-chip-density-h-scale: 0.9;
-	}
-
-	.kit-chip[data-density='comfortable'] {
-		--kit-chip-density-scale: 1.08;
-		--kit-chip-density-h-scale: 1.08;
-	}
-
 	.kit-chip[data-label-style='true'] {
 		font-weight: 600;
 		letter-spacing: 0.01em;
@@ -424,6 +314,7 @@
 		align-items: center;
 		justify-content: center;
 		line-height: 1;
+		font-weight: normal;
 	}
 
 	.kit-chip__content :global(.kit-icon),
@@ -489,4 +380,135 @@
 	.kit-chip[data-disabled='true'] > input {
 		cursor: default;
 	}
+
+	/**
+	* size
+	* @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[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[data-size='sm'] :global(.kit-icon:not([data-size])) {
+		--kit-icon-current-size: var(--kit-icon-size-sm);
+	}
+
+	.kit-chip[data-size='md'] {
+		--kit-chip-h: 32px;
+		--kit-chip-px: 12px;
+		--kit-chip-gap: 8px;
+		--kit-chip-font: 1rem;
+	}
+	.kit-chip[data-size='md'] :global(.kit-icon:not([data-size])) {
+		--kit-icon-current-size: var(--kit-icon-size-md);
+	}
+
+	.kit-chip[data-size='lg'] {
+		--kit-chip-h: 36px;
+		--kit-chip-px: 14px;
+		--kit-chip-gap: 10px;
+		--kit-chip-font: 1.125rem;
+	}
+	.kit-chip[data-size='lg'] :global(.kit-icon:not([data-size])) {
+		--kit-icon-current-size: var(--kit-icon-size-lg);
+	}
+
+	.kit-chip[data-size='xl'] {
+		--kit-chip-h: 40px;
+		--kit-chip-px: 16px;
+		--kit-chip-gap: 12px;
+		--kit-chip-font: 1.25rem;
+	}
+	.kit-chip[data-size='xl'] :global(.kit-icon:not([data-size])) {
+		--kit-icon-current-size: var(--kit-icon-size-xl);
+	}
+
+	/** 
+	 * 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[data-density='default'] {
+		--kit-chip-density-scale: 1;
+		--kit-chip-density-h-scale: 1;
+	}
+	.kit-chip[data-density='comfortable'] {
+		--kit-chip-density-scale: 1.1;
+		--kit-chip-density-h-scale: 1.15;
+	}
+
+	/** 
+	 * rounded
+	 * @link ...
+	 */
+	.kit-chip[data-rounded='0'] {
+		--kit-chip-radius: var(--kit-shape-none);
+	}
+	.kit-chip[data-rounded='xs'] {
+		--kit-chip-radius: var(--kit-shape-xs);
+	}
+	.kit-chip[data-rounded='sm'] {
+		--kit-chip-radius: var(--kit-shape-sm);
+	}
+	.kit-chip[data-rounded='md'] {
+		--kit-chip-radius: var(--kit-shape-md);
+	}
+	.kit-chip[data-rounded='lg'] {
+		--kit-chip-radius: var(--kit-shape-lg);
+	}
+	.kit-chip[data-rounded='xl'] {
+		--kit-chip-radius: var(--kit-shape-xl);
+	}
+	.kit-chip[data-rounded='full'] {
+		--kit-chip-radius: var(--kit-shape-full);
+	}
+
+	/** 
+	 * variant
+	 * @link no links...
+	 */
+	.kit-chip[data-variant='filled'] {
+		--kit-chip-bg: var(--kit-color-surface-2);
+		--kit-chip-fg: var(--kit-color-text);
+
+		--kit-chip-hover-bg: color-mix(in oklab, var(--kit-chip-bg), black 10%);
+		--kit-chip-active-bg: color-mix(in oklab, var(--kit-chip-bg), black 16%);
+	}
+	.kit-chip[data-variant='outline'] {
+		--kit-chip-bg: transparent;
+		--kit-chip-fg: var(--kit-color-text);
+		--kit-chip-bd: var(--kit-chip-fg);
+
+		--kit-chip-hover-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 80%);
+		--kit-chip-active-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 92%);
+	}
+	.kit-chip[data-variant='text'] {
+		--kit-chip-bg: transparent;
+		--kit-chip-fg: var(--kit-color-text);
+
+		--kit-chip-hover-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 80%);
+		--kit-chip-active-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 92%);
+	}
+
+	.kit-chip .outline {
+		--outline-color: var(--kit-chip-bd);
+	}
 </style>

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

@@ -1,12 +1,13 @@
-import type { Component, SizeType } from '../../@types';
+import type { Component, DensityType, ElevationProps, RoundedType, SizeType } from '../../@types';
 import type { Snippet } from 'svelte';
 export interface ChipProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'a' | 'input' | 'button';
     input?: boolean;
     href?: string;
-    variant?: 'outline' | 'text' | 'filled' | 'link';
-    density?: 'compact' | 'comfortable' | 'default';
+    variant?: 'outline' | 'text' | 'filled';
+    density?: DensityType;
+    rounded?: RoundedType | 'full';
     active?: boolean;
     loading?: boolean;
     disabled?: boolean;
@@ -21,4 +22,7 @@ export interface ChipProps extends Component {
     load?: Snippet;
     append?: Snippet;
     prepend?: Snippet;
+    elevation?: ElevationProps;
+    background?: string;
+    color?: string;
 }

package/dist/components/dialog/dialog.svelte

@@ -1,23 +1,7 @@
 <script lang="ts">
 	import { makeComponentProps } from '../../html-mapped';
-	import { useClassName, useStyles, disabledScroll } from '../../utils';
-	import type { DialogDensity, DialogPosition, DialogProps, DialogSize } from './dialog.types.js';
-
-	function resolveSize(value: DialogSize | undefined): DialogSize {
-		return value === 'xs' || value === 'sm' || value === 'md' || value === 'lg' || value === 'xl'
-			? value
-			: 'md';
-	}
-
-	function resolvePosition(value: DialogPosition | undefined): DialogPosition {
-		return value === 'top' || value === 'center' || value === 'bottom' ? value : 'center';
-	}
-
-	function resolveDensity(value: DialogDensity | undefined): DialogDensity {
-		return value === 'compact' || value === 'comfortable' || value === 'default'
-			? value
-			: 'default';
-	}
+	import { useClassName, useStyles, disabledScroll, useElevation } from '../../utils';
+	import type { DialogProps } from './dialog.types.js';
 
 	let {
 		ref = $bindable(),
@@ -33,8 +17,10 @@
 		density = 'default',
 		rounded = 'md',
 		classContent = '',
-		color = undefined,
-		background = undefined,
+		color,
+		background,
+		elevation = '2',
+		space,
 		...rest
 	}: DialogProps = $props();
 
@@ -42,6 +28,8 @@
 		makeComponentProps(rest as Record<string, unknown>)
 	);
 
+	let elevationState = $derived(useElevation(elevation));
+
 	let componentClass = $derived(
 		useClassName({
 			baseClass: 'kit-dialog',
@@ -65,18 +53,7 @@
 			: `${classContent ?? ''}`.trim()
 	);
 
-	let safeSize = $derived(resolveSize(size));
-	let safePosition = $derived(resolvePosition(position));
-	let safeDensity = $derived(resolveDensity(density));
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-dialog-fg:${color}` : '',
-			background ? `--kit-dialog-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 
 	$effect(() => {
 		if (!ref) return;
@@ -126,8 +103,8 @@
 	bind:this={ref}
 	class={componentClass}
 	style={mergedStyle}
-	data-size={safeSize}
-	data-position={safePosition}
+	data-size={size}
+	data-position={position}
 	data-persistent={persistent}
 	onclose={handleClose}
 	oncancel={handleCancel}
@@ -136,9 +113,15 @@
 	<div
 		{...restProps}
 		class={['kit-dialog__content', contentClass]}
-		data-density={safeDensity}
+		data-density={density}
 		data-rounded={rounded}
+		data-elevation={elevationState.base}
+		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>
@@ -146,14 +129,6 @@
 
 <style>
 	.kit-dialog {
-		--kit-dialog-bg: var(--kit-surface-1);
-		--kit-dialog-fg: var(--kit-fg);
-		--kit-dialog-bd: var(--kit-border);
-		--kit-dialog-radius: 12px;
-		--kit-dialog-px: 1rem;
-		--kit-dialog-py: 1rem;
-		--kit-dialog-max: min(32rem, calc(100vw - 2rem));
-
 		border: 0;
 		padding: 0;
 		margin: auto;
@@ -165,97 +140,125 @@
 	}
 
 	.kit-dialog::backdrop {
-		background: rgb(15 23 42 / 0.42);
+		background: color-mix(in oklab, var(--kit-color-shadow), transparent 70%);
 		backdrop-filter: blur(2px);
 	}
 
-	.kit-dialog[data-position='top'] {
-		margin-top: 1rem;
+	/**
+	* position
+	* @link nothing...
+	*/
+	.kit-dialog[data-position='top'],
+	.kit-dialog[data-position='top-left'],
+	.kit-dialog[data-position='top-right'] {
+		margin-top: var(--kit-dialog-space, 1rem);
 		margin-bottom: auto;
 	}
-
-	.kit-dialog[data-position='center'] {
+	.kit-dialog[data-position='center'],
+	.kit-dialog[data-position='center-left'],
+	.kit-dialog[data-position='center-right'] {
 		margin-top: auto;
 		margin-bottom: auto;
 	}
-
-	.kit-dialog[data-position='bottom'] {
+	.kit-dialog[data-position='bottom'],
+	.kit-dialog[data-position='bottom-left'],
+	.kit-dialog[data-position='bottom-right'] {
 		margin-top: auto;
-		margin-bottom: 1rem;
+		margin-bottom: var(--kit-dialog-space, 1rem);
+	}
+	.kit-dialog[data-position='top-left'] .kit-dialog__content,
+	.kit-dialog[data-position='center-left'] .kit-dialog__content,
+	.kit-dialog[data-position='bottom-left'] .kit-dialog__content {
+		margin-left: var(--kit-dialog-space, 1rem);
+	}
+	.kit-dialog[data-position='top-right'] .kit-dialog__content,
+	.kit-dialog[data-position='center-right'] .kit-dialog__content,
+	.kit-dialog[data-position='bottom-right'] .kit-dialog__content {
+		margin-right: var(--kit-dialog-space, 1rem);
 	}
 
+	/**
+	* size
+	* @link nothing...
+	*/
 	.kit-dialog[data-size='xs'] {
-		--kit-dialog-max: min(20rem, calc(100vw - 2rem));
+		--kit-dialog-max: 20rem;
+		--kit-dialog-px: 10px;
 	}
 
 	.kit-dialog[data-size='sm'] {
-		--kit-dialog-max: min(24rem, calc(100vw - 2rem));
+		--kit-dialog-max: 24rem;
+		--kit-dialog-px: 12px;
 	}
 
 	.kit-dialog[data-size='md'] {
-		--kit-dialog-max: min(32rem, calc(100vw - 2rem));
+		--kit-dialog-max: 32rem;
+		--kit-dialog-px: 16px;
 	}
 
 	.kit-dialog[data-size='lg'] {
-		--kit-dialog-max: min(42rem, calc(100vw - 2rem));
+		--kit-dialog-max: 42rem;
+		--kit-dialog-px: 20px;
 	}
 
 	.kit-dialog[data-size='xl'] {
-		--kit-dialog-max: min(56rem, calc(100vw - 2rem));
+		--kit-dialog-max: 56rem;
+		--kit-dialog-px: 24px;
 	}
 
 	.kit-dialog__content {
+		--kit-dialog-fg: var(--kit-color-text);
+		--kit-dialog-bg: var(--kit-color-surface-1);
+
 		box-sizing: border-box;
-		width: min(100%, var(--kit-dialog-max));
+		width: min(100%, min(var(--kit-dialog-max), calc(100vw - 2rem)));
 		max-height: calc(100dvh - 2rem);
 		overflow: auto;
-		padding: var(--kit-dialog-py) var(--kit-dialog-px);
-		border: 1px solid var(--kit-dialog-bd);
+		padding: calc(var(--kit-dialog-px) * var(--kit-dialog-density-scale));
+		border: 0;
 		border-radius: var(--kit-dialog-radius);
 		background: var(--kit-dialog-bg);
 		color: var(--kit-dialog-fg);
 		margin: 0 auto;
-		box-shadow:
-			0 20px 50px rgb(15 23 42 / 0.18),
-			0 4px 16px rgb(15 23 42 / 0.1);
 	}
 
+	/** 
+	 * density
+	 * @link no links
+	 */
+	.kit-dialog__content[data-density='none'] {
+		--kit-dialog-density-scale: 0;
+	}
 	.kit-dialog__content[data-density='compact'] {
-		--kit-dialog-px: 0.75rem;
-		--kit-dialog-py: 0.75rem;
+		--kit-dialog-density-scale: 0.9;
 	}
-
 	.kit-dialog__content[data-density='default'] {
-		--kit-dialog-px: 1rem;
-		--kit-dialog-py: 1rem;
+		--kit-dialog-density-scale: 1;
 	}
-
 	.kit-dialog__content[data-density='comfortable'] {
-		--kit-dialog-px: 1.25rem;
-		--kit-dialog-py: 1.25rem;
+		--kit-dialog-density-scale: 1.1;
 	}
 
+	/** 
+	 * rounded
+	 * @link ...
+	 */
 	.kit-dialog__content[data-rounded='0'] {
-		--kit-dialog-radius: 0;
+		--kit-dialog-radius: var(--kit-shape-none);
 	}
-
 	.kit-dialog__content[data-rounded='xs'] {
-		--kit-dialog-radius: 2px;
+		--kit-dialog-radius: var(--kit-shape-xs);
 	}
-
 	.kit-dialog__content[data-rounded='sm'] {
-		--kit-dialog-radius: 6px;
+		--kit-dialog-radius: var(--kit-shape-sm);
 	}
-
 	.kit-dialog__content[data-rounded='md'] {
-		--kit-dialog-radius: 12px;
+		--kit-dialog-radius: var(--kit-shape-md);
 	}
-
 	.kit-dialog__content[data-rounded='lg'] {
-		--kit-dialog-radius: 18px;
+		--kit-dialog-radius: var(--kit-shape-lg);
 	}
-
 	.kit-dialog__content[data-rounded='xl'] {
-		--kit-dialog-radius: 9999px;
+		--kit-dialog-radius: var(--kit-shape-xl);
 	}
 </style>