lapikit 0.6.3 → 0.6.4

package/dist/components/appbar/appbar.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 type { AppbarProps } from './appbar.types.js';
 
@@ -12,31 +12,22 @@
 		's-class': sClass,
 		's-style': sStyle,
 		classContent,
+		size = 'md',
 		variant = 'filled',
 		rounded = 0,
 		background,
 		color,
 		density = 'default',
+		elevation,
 		...rest
 	}: AppbarProps = $props();
 
-	let safeVariant = $derived(
-		typeof variant === 'string' && (variant === 'outline' || variant === 'text')
-			? variant
-			: 'filled'
-	);
-
-	let safeDensity = $derived(
-		typeof density === 'string' &&
-			(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-appbar',
@@ -65,16 +56,7 @@
 		})
 	);
 
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			background ? `--kit-appbar-bg:${background}` : '',
-			color ? `--kit-appbar-fg:${color}` : '',
-			typeof rounded === 'string' && rounded.includes('px') ? `--kit-appbar-radius:${rounded}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 </script>
 
 <svelte:element
@@ -82,12 +64,18 @@
 	bind:this={ref}
 	class={componentClass}
 	style={mergedStyle}
-	{...restProps}
-	data-variant={safeVariant}
-	data-density={safeDensity}
+	data-size={size}
+	data-variant={variant}
+	data-density={density}
 	data-rounded={rounded}
+	data-elevation={elevationState.base}
+	data-elevation-hover={elevationState.hover}
+	data-elevation-active={elevationState.active}
+	style:--kit-appbar-fg={color && `var(--kit-color-${color})`}
+	style:--kit-appbar-bg={background && `var(--kit-color-${background})`}
+	{...restProps}
 >
-	{#if safeVariant === 'outline'}
+	{#if variant === 'outline'}
 		<span class="outline"></span>
 	{/if}
 
@@ -98,68 +86,133 @@
 
 <style>
 	.kit-appbar {
-		--kit-appbar-bg: var(--kit-surface-2);
-		--kit-appbar-fg: var(--kit-fg);
-		--kit-appbar-radius: 1rem;
-		--kit-appbar-size: 4rem;
-		--kit-appbar-padding-x: 1rem;
-		--kit-appbar-padding-wrapper: 0;
-		--kit-appbar-bd: color-mix(in oklab, var(--kit-appbar-fg), transparent 88%);
-
 		display: flex;
 		align-items: center;
 		box-sizing: border-box;
 		position: relative;
 		width: 100%;
-		min-height: var(--kit-appbar-size);
-		padding-inline: var(--kit-appbar-padding-x);
+		gap: var(--kit-appbar-gap);
+		min-height: calc(var(--kit-appbar-h) * var(--kit-appbar-density-h-scale));
+		padding: calc(var(--kit-appbar-px) * var(--kit-appbar-density-scale));
 		border-radius: var(--kit-appbar-radius);
 		color: var(--kit-appbar-fg);
 		background-color: var(--kit-appbar-bg);
 		overflow: hidden;
+		font-size: var(--kit-appbar-font);
+		transition:
+			background 140ms ease,
+			color 140ms ease,
+			box-shadow 140ms ease,
+			translate 140ms ease;
 	}
 
-	.kit-appbar[data-variant='text'] {
-		--kit-appbar-bd: transparent;
+	/** 
+	 * rounded
+	 * @link ...
+	 */
+	.kit-appbar[data-rounded='0'] {
+		--kit-appbar-radius: var(--kit-shape-none);
+	}
+	.kit-appbar[data-rounded='xs'] {
+		--kit-appbar-radius: var(--kit-shape-xs);
+	}
+	.kit-appbar[data-rounded='sm'] {
+		--kit-appbar-radius: var(--kit-shape-sm);
+	}
+	.kit-appbar[data-rounded='md'] {
+		--kit-appbar-radius: var(--kit-shape-md);
+	}
+	.kit-appbar[data-rounded='lg'] {
+		--kit-appbar-radius: var(--kit-shape-lg);
+	}
+	.kit-appbar[data-rounded='xl'] {
+		--kit-appbar-radius: var(--kit-shape-xl);
+	}
+	.kit-appbar[data-rounded='full'] {
+		--kit-appbar-radius: var(--kit-shape-full);
 	}
 
+	/** 
+	 * density
+	 * @link no links
+	 */
+	.kit-appbar[data-density='none'] {
+		--kit-appbar-density-scale: 0;
+		--kit-appbar-density-h-scale: 0;
+	}
 	.kit-appbar[data-density='compact'] {
-		--kit-appbar-size: 3.5rem;
-		--kit-appbar-padding-x: 0.75rem;
+		--kit-appbar-density-scale: 0.9;
+		--kit-appbar-density-h-scale: 0.92;
 	}
-
 	.kit-appbar[data-density='default'] {
-		--kit-appbar-size: 4rem;
-		--kit-appbar-padding-x: 1rem;
+		--kit-appbar-density-scale: 1;
+		--kit-appbar-density-h-scale: 1;
 	}
-
 	.kit-appbar[data-density='comfortable'] {
-		--kit-appbar-size: 4.5rem;
-		--kit-appbar-padding-x: 1.5rem;
+		--kit-appbar-density-scale: 1.1;
+		--kit-appbar-density-h-scale: 1.15;
 	}
 
-	.kit-appbar[data-rounded='0'] {
-		--kit-appbar-radius: 0;
-	}
+	/** 
+	 * variant
+	 * @link no links...
+	 */
+	.kit-appbar[data-variant='filled'] {
+		--kit-appbar-bg: var(--kit-color-surface-1);
+		--kit-appbar-fg: var(--kit-color-text);
 
-	.kit-appbar[data-rounded='xs'] {
-		--kit-appbar-radius: 2px;
+		--kit-appbar-hover-bg: color-mix(in oklab, var(--kit-appbar-bg), black 10%);
+		--kit-appbar-active-bg: color-mix(in oklab, var(--kit-appbar-bg), black 16%);
 	}
+	.kit-appbar[data-variant='outline'] {
+		--kit-appbar-bg: transparent;
+		--kit-appbar-fg: var(--kit-color-text);
+		--kit-appbar-bd: var(--kit-appbar-fg);
 
-	.kit-appbar[data-rounded='sm'] {
-		--kit-appbar-radius: 4px;
+		--kit-appbar-hover-bg: color-mix(in oklab, var(--kit-appbar-fg), transparent 80%);
+		--kit-appbar-active-bg: color-mix(in oklab, var(--kit-appbar-fg), transparent 92%);
 	}
+	.kit-appbar[data-variant='text'] {
+		--kit-appbar-bg: transparent;
+		--kit-appbar-fg: var(--kit-color-text);
 
-	.kit-appbar[data-rounded='md'] {
-		--kit-appbar-radius: 8px;
+		--kit-appbar-hover-bg: color-mix(in oklab, var(--kit-appbar-fg), transparent 80%);
+		--kit-appbar-active-bg: color-mix(in oklab, var(--kit-appbar-fg), transparent 92%);
 	}
 
-	.kit-appbar[data-rounded='lg'] {
-		--kit-appbar-radius: 16px;
+	/**
+	* size
+	* @link nothing...
+	*/
+	.kit-appbar[data-size='xs'] {
+		--kit-appbar-h: 28px;
+		--kit-appbar-px: 10px;
+		--kit-appbar-gap: 4px;
+		--kit-appbar-font: 0.75rem;
 	}
-
-	.kit-appbar[data-rounded='xl'] {
-		--kit-appbar-radius: 99999px;
+	.kit-appbar[data-size='sm'] {
+		--kit-appbar-h: 32px;
+		--kit-appbar-px: 12px;
+		--kit-appbar-gap: 6px;
+		--kit-appbar-font: 0.875rem;
+	}
+	.kit-appbar[data-size='md'] {
+		--kit-appbar-h: 40px;
+		--kit-appbar-px: 14px;
+		--kit-appbar-gap: 8px;
+		--kit-appbar-font: 1rem;
+	}
+	.kit-appbar[data-size='lg'] {
+		--kit-appbar-h: 48px;
+		--kit-appbar-px: 16px;
+		--kit-appbar-gap: 10px;
+		--kit-appbar-font: 1.125rem;
+	}
+	.kit-appbar[data-size='xl'] {
+		--kit-appbar-h: 56px;
+		--kit-appbar-px: 18px;
+		--kit-appbar-gap: 12px;
+		--kit-appbar-font: 1.25rem;
 	}
 
 	.kit-appbar__wrapper {
@@ -175,7 +228,5 @@
 
 	.kit-appbar .outline {
 		--outline-color: var(--kit-appbar-bd);
-
-		pointer-events: none;
 	}
 </style>

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

@@ -1,14 +1,14 @@
-import type { Component, RoundedType } from '../../@types';
-type Density = 'compact' | 'comfortable' | 'default';
+import type { Component, DensityType, ElevationProps, RoundedType } from '../../@types';
 type Variant = 'filled' | 'outline' | 'text';
 export interface AppbarProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'header' | 'nav';
     variant?: Variant;
-    rounded?: RoundedType | string;
-    density?: Density | Record<string, Density>;
+    rounded?: RoundedType | 'full';
+    density?: DensityType;
     color?: string;
     background?: string;
     classContent?: string | string[] | undefined;
+    elevation?: ElevationProps;
 }
 export {};

package/dist/components/aspect-ratio/aspect-ratio.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { useClassName, useStyles } from '../../utils';
 	import { makeComponentProps } from '../../html-mapped';
-	import type { AspectRatioFit, AspectRatioProps, AspectRatioValue } from './aspect-ratio.types.js';
+	import type { AspectRatioProps, AspectRatioValue } from './aspect-ratio.types.js';
 
 	const FALLBACK_RATIO = 16 / 9;
-	const FALLBACK_FIT: AspectRatioFit = 'cover';
 
 	function resolveRatio(value: AspectRatioValue | undefined): number {
 		if (typeof value === 'number') {
@@ -33,10 +32,6 @@
 		return Number.isFinite(asNumber) && asNumber > 0 ? asNumber : FALLBACK_RATIO;
 	}
 
-	function resolveFit(value: AspectRatioFit | undefined): AspectRatioFit {
-		return value === 'cover' || value === 'contain' || value === 'fill' ? value : FALLBACK_FIT;
-	}
-
 	let {
 		ref = $bindable(),
 		is = 'div',
@@ -74,12 +69,7 @@
 	);
 
 	let resolvedRatio = $derived(resolveRatio(ratio ?? aspectRatio));
-	let resolvedFit = $derived(resolveFit(fit));
-	let mergedStyle = $derived(
-		[componentStyle, `--kit-aspect-ratio: ${resolvedRatio}`, `--kit-aspect-fit: ${resolvedFit}`]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 </script>
 
 <svelte:element
@@ -88,6 +78,8 @@
 	class={componentClass}
 	style={mergedStyle}
 	data-inline={inline}
+	style:--kit-aspect-ratio={resolvedRatio}
+	style:--kit-aspect-fit={fit}
 	{...restProps}
 >
 	<div class="kit-aspect-ratio__inner">

package/dist/components/aspect-ratio/aspect-ratio.types.d.ts

@@ -1,6 +1,6 @@
 import type { Component } from '../../@types';
 export type AspectRatioValue = string | number;
-export type AspectRatioFit = 'cover' | 'contain' | 'fill';
+type AspectRatioFit = 'cover' | 'contain' | 'fill';
 export interface AspectRatioProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'span' | 'figure' | 'section' | 'article';
@@ -9,3 +9,4 @@ export interface AspectRatioProps extends Component {
     fit?: AspectRatioFit;
     inline?: boolean;
 }
+export {};

package/dist/components/avatar/avatar.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 type { AvatarProps } from './avatar.types.js';
 
@@ -13,6 +13,10 @@
 		label = undefined,
 		size = 'md',
 		density = 'default',
+		rounded = 'full',
+		elevation,
+		color,
+		background,
 		...rest
 	}: AvatarProps = $props();
 
@@ -37,20 +41,7 @@
 		})
 	);
 
-	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 elevationState = $derived(useElevation(elevation));
 	let contentType = $derived(label && label.trim().length > 0 ? 'label' : children);
 	let displayLabel = $derived(label?.trim() ?? '');
 </script>
@@ -60,10 +51,16 @@
 	bind:this={ref}
 	class={componentClass}
 	style={componentStyle}
-	{...restProps}
 	data-type={contentType}
-	data-size={contentType === 'label' ? safeSize : undefined}
-	data-density={contentType === 'label' ? safeDensity : undefined}
+	data-size={contentType === 'label' ? size : undefined}
+	data-density={contentType === 'label' ? density : undefined}
+	data-rounded={rounded}
+	data-elevation={elevationState.base}
+	data-elevation-hover={elevationState.hover}
+	data-elevation-active={elevationState.active}
+	style:--kit-avatar-fg={color && `var(--kit-color-${color})`}
+	style:--kit-avatar-bg={background && `var(--kit-color-${background})`}
+	{...restProps}
 >
 	{#if contentType === 'label'}
 		<span class="kit-avatar__label">{displayLabel}</span>
@@ -74,32 +71,25 @@
 
 <style>
 	.kit-avatar {
-		--kit-avatar-size-xs: 1.75rem;
-		--kit-avatar-size-sm: 2rem;
-		--kit-avatar-size-md: 2.25rem;
-		--kit-avatar-size-lg: 2.5rem;
-		--kit-avatar-size-xl: 2.75rem;
-		--kit-avatar-font-xs: 0.75rem;
-		--kit-avatar-font-sm: 0.8125rem;
-		--kit-avatar-font-md: 0.875rem;
-		--kit-avatar-font-lg: 1rem;
-		--kit-avatar-font-xl: 1.125rem;
-		--kit-avatar-size: var(--kit-avatar-size-md);
-		--kit-avatar-font-size: var(--kit-avatar-font-md);
-		--kit-avatar-density-scale: 1;
-
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: calc(var(--kit-avatar-size) * var(--kit-avatar-density-scale));
-		height: calc(var(--kit-avatar-size) * var(--kit-avatar-density-scale));
-		border-radius: 9999px;
+		width: calc(var(--kit-avatar-h) * var(--kit-avatar-density-h-scale));
+		height: calc(var(--kit-avatar-h) * var(--kit-avatar-density-h-scale));
+		padding: calc(var(--kit-avatar-px) * var(--kit-avatar-density-scale));
 		overflow: hidden;
-		background: var(--kit-surface-2);
-		color: var(--kit-fg);
+		background: var(--kit-color-surface-3);
+		color: var(--kit-color-text);
+		border-radius: var(--kit-avatar-radius);
+		border: 0;
 		font-weight: 600;
 		line-height: 1;
 		user-select: none;
+		transition:
+			background 140ms ease,
+			color 140ms ease,
+			box-shadow 140ms ease,
+			translate 140ms ease;
 	}
 
 	.kit-avatar[data-type='label'] {
@@ -107,49 +97,101 @@
 		text-transform: uppercase;
 	}
 
-	.kit-avatar[data-size='xs'] {
-		--kit-avatar-size: var(--kit-avatar-size-xs);
-		--kit-avatar-font-size: var(--kit-avatar-font-xs);
+	.kit-avatar__label {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		max-width: 100%;
+		padding-inline: 0.25rem;
 	}
-	.kit-avatar[data-size='sm'] {
-		--kit-avatar-size: var(--kit-avatar-size-sm);
-		--kit-avatar-font-size: var(--kit-avatar-font-sm);
+
+	.kit-avatar :global(img) {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
 	}
-	.kit-avatar[data-size='md'] {
-		--kit-avatar-size: var(--kit-avatar-size-md);
-		--kit-avatar-font-size: var(--kit-avatar-font-md);
+
+	/** 
+	 * rounded
+	 * @link ...
+	 */
+	.kit-avatar[data-rounded='0'] {
+		--kit-avatar-radius: var(--kit-shape-none);
 	}
-	.kit-avatar[data-size='lg'] {
-		--kit-avatar-size: var(--kit-avatar-size-lg);
-		--kit-avatar-font-size: var(--kit-avatar-font-lg);
+	.kit-avatar[data-rounded='xs'] {
+		--kit-avatar-radius: var(--kit-shape-xs);
 	}
-	.kit-avatar[data-size='xl'] {
-		--kit-avatar-size: var(--kit-avatar-size-xl);
-		--kit-avatar-font-size: var(--kit-avatar-font-xl);
+	.kit-avatar[data-rounded='sm'] {
+		--kit-avatar-radius: var(--kit-shape-sm);
+	}
+	.kit-avatar[data-rounded='md'] {
+		--kit-avatar-radius: var(--kit-shape-md);
+	}
+	.kit-avatar[data-rounded='lg'] {
+		--kit-avatar-radius: var(--kit-shape-lg);
+	}
+	.kit-avatar[data-rounded='xl'] {
+		--kit-avatar-radius: var(--kit-shape-xl);
 	}
 
+	.kit-avatar[data-rounded='full'] {
+		--kit-avatar-radius: var(--kit-shape-full);
+	}
+
+	/** 
+	 * density
+	 * @link ...
+	 */
+	.kit-avatar[data-density='none'] {
+		--kit-avatar-density-scale: 0;
+		--kit-avatar-density-h-scale: 0;
+	}
 	.kit-avatar[data-density='compact'] {
-		--kit-avatar-density-scale: 0.9;
+		--kit-avatar-density-scale: 0.8;
+		--kit-avatar-density-h-scale: 0.92;
 	}
 	.kit-avatar[data-density='default'] {
 		--kit-avatar-density-scale: 1;
+		--kit-avatar-density-h-scale: 1;
 	}
 	.kit-avatar[data-density='comfortable'] {
-		--kit-avatar-density-scale: 1.1;
+		--kit-list-density-scale: 1.1;
+		--kit-avatar-density-h-scale: 1.15;
 	}
 
-	.kit-avatar__label {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		max-width: 100%;
-		padding-inline: 0.25rem;
+	/**
+	* size
+	* @link nothing...
+	*/
+	.kit-avatar[data-size='xs'] {
+		--kit-avatar-h: 28px;
+		--kit-avatar-px: 10px;
+		--kit-avatar-gap: 4px;
+		--kit-avatar-font: 0.75rem;
 	}
-
-	.kit-avatar :global(img) {
-		display: block;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
+	.kit-avatar[data-size='sm'] {
+		--kit-avatar-h: 32px;
+		--kit-avatar-px: 12px;
+		--kit-avatar-gap: 6px;
+		--kit-avatar-font: 0.875rem;
+	}
+	.kit-avatar[data-size='md'] {
+		--kit-avatar-h: 40px;
+		--kit-avatar-px: 16px;
+		--kit-avatar-gap: 8px;
+		--kit-avatar-font: 1rem;
+	}
+	.kit-avatar[data-size='lg'] {
+		--kit-avatar-h: 48px;
+		--kit-avatar-px: 20px;
+		--kit-avatar-gap: 10px;
+		--kit-avatar-font: 1.125rem;
+	}
+	.kit-avatar[data-size='xl'] {
+		--kit-avatar-h: 56px;
+		--kit-avatar-px: 24px;
+		--kit-avatar-gap: 12px;
+		--kit-avatar-font: 1.25rem;
 	}
 </style>

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

@@ -1,9 +1,11 @@
-import type { Component } from '../../@types';
-export type AvatarSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type AvatarDensity = 'compact' | 'comfortable' | 'default';
+import type { Component, DensityType, ElevationProps, RoundedType, SizeType } from '../../@types';
 export interface AvatarProps extends Component {
     ref?: HTMLElement | null;
     label?: string;
-    size?: AvatarSize;
-    density?: AvatarDensity;
+    size?: SizeType;
+    density?: DensityType;
+    rounded?: RoundedType | 'full';
+    elevation?: ElevationProps;
+    color?: string;
+    background?: string;
 }