lapikit 0.6.3 → 0.6.4

package/dist/components/textfield/textfield.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 Icon from '../icon/icon.svelte';
 	import type { TextfieldProps } from './textfield.types.js';
@@ -34,7 +34,7 @@
 		readonly = false,
 		color,
 		background,
-		rounded,
+		rounded = 'md',
 		class: className = '',
 		style: styleAttr = '',
 		's-class': sClass,
@@ -43,29 +43,16 @@
 		id,
 		autocomplete,
 		inputmode,
+		elevation,
 		...rest
 	}: TextfieldProps = $props();
 
-	let safeVariant = $derived(
-		variant === 'filled' || variant === 'outline' || variant === 'text' ? 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-textfield',
@@ -83,18 +70,7 @@
 		})
 	);
 
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			background ? `--kit-textfield-bg:${background}` : '',
-			color ? `--kit-textfield-fg:${color}` : '',
-			typeof rounded === 'string' && rounded.includes('px')
-				? `--kit-textfield-radius:${rounded}`
-				: ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 
 	let counterValue = $state(0);
 	let displayMessage = $state(false);
@@ -148,14 +124,17 @@
 	class={componentClass}
 	style={mergedStyle}
 	{...restProps}
-	data-size={safeSize}
-	data-variant={safeVariant}
-	data-density={safeDensity}
+	data-size={size}
+	data-variant={variant}
+	data-density={density}
 	data-disabled={disabled}
 	data-readonly={readonly}
 	data-error={error}
 	data-hide-spin-buttons={type === 'number' && hideSpinButtons}
 	data-rounded={rounded}
+	data-with-message={(messageValue || messagePrefix || messageSuffix || counter) && true}
+	style:--kit-textfield-fg={color && `var(--kit-color-${color})`}
+	style:--kit-textfield-bg={background && `var(--kit-color-${background})`}
 >
 	{#if prepend}
 		<div class="kit-textfield__prepend">
@@ -164,11 +143,16 @@
 	{/if}
 
 	<div class="kit-textfield__control">
-		<div class="kit-textfield__field">
-			{#if safeVariant === 'outline' || safeVariant === 'filled'}
+		<div
+			class="kit-textfield__field"
+			data-elevation={elevationState.base}
+			data-elevation-hover={elevationState.hover}
+			data-elevation-active={elevationState.active}
+		>
+			{#if variant === 'outline' || variant === 'filled'}
 				<span class="outline"></span>
 			{/if}
-			{#if safeVariant === 'text'}
+			{#if variant === 'text'}
 				<span class="line"></span>
 			{/if}
 
@@ -234,29 +218,31 @@
 		</div>
 	{/if}
 
-	<div class="kit-textfield__message" data-visible={displayMessage}>
-		<div
-			class="kit-textfield__message-inner"
-			data-error={error || undefined}
-			id={messageValue ? `${id ?? name ?? 'textfield'}-message` : undefined}
-		>
-			{#if messagePrefix}
-				<div class="kit-textfield__message-prefix">{messagePrefix}</div>
-			{/if}
-			{#if messageValue}
-				<div class="kit-textfield__message-text">{messageValue}</div>
-			{/if}
-			{#if counter || messageSuffix}
-				<div class="kit-textfield__message-suffix">
-					{#if counter}
-						{counterValue}{max ? `/${max}` : ''}
-					{:else if messageSuffix}
-						{messageSuffix}
-					{/if}
-				</div>
-			{/if}
+	{#if messageValue || messagePrefix || messageSuffix || counter}
+		<div class="kit-textfield__message" data-visible={displayMessage}>
+			<div
+				class="kit-textfield__message-inner"
+				data-error={error || undefined}
+				id={messageValue ? `${id ?? name ?? 'textfield'}-message` : undefined}
+			>
+				{#if messagePrefix}
+					<div class="kit-textfield__message-prefix">{messagePrefix}</div>
+				{/if}
+				{#if messageValue}
+					<div class="kit-textfield__message-text">{messageValue}</div>
+				{/if}
+				{#if counter || messageSuffix}
+					<div class="kit-textfield__message-suffix">
+						{#if counter}
+							{counterValue}{max ? `/${max}` : ''}
+						{:else if messageSuffix}
+							{messageSuffix}
+						{/if}
+					</div>
+				{/if}
+			</div>
 		</div>
-	</div>
+	{/if}
 </div>
 
 <style>
@@ -284,151 +270,181 @@
 	}
 
 	.kit-textfield {
-		--kit-textfield-bg: var(--kit-surface-2);
-		--kit-textfield-fg: var(--kit-fg);
-		--kit-textfield-bd: color-mix(in oklab, var(--kit-textfield-fg), transparent 84%);
-		--kit-textfield-radius: 8px;
-		--kit-textfield-font-size: 14px;
-		--kit-textfield-gap-base: 8px;
-		--kit-textfield-px-base: 14px;
-		--kit-textfield-py-base: 12px;
-		--kit-textfield-message-offset-base: 8px;
-		--kit-textfield-density-gap-adjust: 0px;
-		--kit-textfield-density-px-adjust: 0px;
-		--kit-textfield-density-py-adjust: 0px;
-		--kit-textfield-density-message-adjust: 0px;
-		--kit-textfield-gap: calc(
-			var(--kit-textfield-gap-base) + var(--kit-textfield-density-gap-adjust)
-		);
-		--kit-textfield-px: calc(var(--kit-textfield-px-base) + var(--kit-textfield-density-px-adjust));
-		--kit-textfield-py: calc(var(--kit-textfield-py-base) + var(--kit-textfield-density-py-adjust));
-		--kit-textfield-message-offset: calc(
-			var(--kit-textfield-message-offset-base) + var(--kit-textfield-density-message-adjust)
-		);
-
 		display: grid;
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		align-items: start;
+		column-gap: var(--kit-textfield-gap);
+		width: 100%;
+		font-size: var(--kit-textfield-font);
+	}
+
+	.kit-textfield:not([data-with-message='true']) {
+		grid-template-areas: 'prepend control append';
+		grid-template-rows: auto;
+	}
+	.kit-textfield[data-with-message='true'] {
 		grid-template-areas:
 			'prepend control append'
 			'. message .';
-		grid-template-columns: auto minmax(0, 1fr) auto;
 		grid-template-rows: auto auto;
-		align-items: start;
-		column-gap: 16px;
-		width: 100%;
-		font-size: var(--kit-textfield-font-size);
 	}
 
-	.kit-textfield[data-size='xs'] {
-		--kit-textfield-font-size: 12px;
-		--kit-textfield-gap-base: 6px;
-		--kit-textfield-px-base: 10px;
-		--kit-textfield-py-base: 8px;
+	.kit-textfield[data-disabled='true'] {
+		opacity: 0.55;
+		pointer-events: none;
 	}
 
+	.kit-textfield[data-readonly='true'] input {
+		cursor: default;
+	}
+
+	.kit-textfield[data-hide-spin-buttons='true'] input[type='number'] {
+		appearance: textfield;
+		-moz-appearance: textfield;
+	}
+
+	.kit-textfield[data-hide-spin-buttons='true'] input[type='number']::-webkit-inner-spin-button,
+	.kit-textfield[data-hide-spin-buttons='true'] input[type='number']::-webkit-outer-spin-button {
+		appearance: none;
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	/**
+	* size
+	* @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[data-size='xs'] :global(.kit-icon[data-size='default']) {
+		--kit-icon-current-size: 0.875rem;
+	}
 	.kit-textfield[data-size='sm'] {
-		--kit-textfield-font-size: 13px;
-		--kit-textfield-gap-base: 6px;
-		--kit-textfield-px-base: 12px;
-		--kit-textfield-py-base: 10px;
+		--kit-textfield-h: 32px;
+		--kit-textfield-px: 14px;
+		--kit-textfield-py: 12px;
+		--kit-textfield-gap: 6px;
+		--kit-textfield-font: 13px;
+	}
+	.kit-textfield[data-size='sm'] :global(.kit-icon[data-size='default']) {
+		--kit-icon-current-size: 1rem;
 	}
 
 	.kit-textfield[data-size='md'] {
-		--kit-textfield-font-size: 14px;
-		--kit-textfield-gap-base: 8px;
-		--kit-textfield-px-base: 14px;
-		--kit-textfield-py-base: 12px;
+		--kit-textfield-h: 40px;
+		--kit-textfield-px: 14px;
+		--kit-textfield-py: 12px;
+		--kit-textfield-gap: 8px;
+		--kit-textfield-font: 14px;
+	}
+	.kit-textfield[data-size='md'] :global(.kit-icon[data-size='default']) {
+		--kit-icon-current-size: 1.125rem;
 	}
 
 	.kit-textfield[data-size='lg'] {
-		--kit-textfield-font-size: 15px;
-		--kit-textfield-gap-base: 10px;
-		--kit-textfield-px-base: 16px;
-		--kit-textfield-py-base: 14px;
+		--kit-textfield-h: 48px;
+		--kit-textfield-px: 16px;
+		--kit-textfield-py: 14px;
+		--kit-textfield-gap: 10px;
+		--kit-textfield-font: 15px;
+	}
+	.kit-textfield[data-size='lg'] :global(.kit-icon[data-size='default']) {
+		--kit-icon-current-size: 1.25rem;
 	}
 
 	.kit-textfield[data-size='xl'] {
-		--kit-textfield-font-size: 16px;
-		--kit-textfield-gap-base: 12px;
-		--kit-textfield-px-base: 18px;
-		--kit-textfield-py-base: 16px;
+		--kit-textfield-h: 56px;
+		--kit-textfield-px: 18px;
+		--kit-textfield-py: 16px;
+		--kit-textfield-gap: 12px;
+		--kit-textfield-font: 16px;
 	}
-
-	.kit-textfield[data-density='compact'] {
-		--kit-textfield-density-gap-adjust: -1px;
-		--kit-textfield-density-px-adjust: -2px;
-		--kit-textfield-density-py-adjust: -2px;
-		--kit-textfield-density-message-adjust: -2px;
+	.kit-textfield[data-size='xl'] :global(.kit-icon[data-size='default']) {
+		--kit-icon-current-size: 1.375rem;
 	}
 
-	.kit-textfield[data-density='comfortable'] {
-		--kit-textfield-density-gap-adjust: 1px;
-		--kit-textfield-density-px-adjust: 2px;
-		--kit-textfield-density-py-adjust: 2px;
-		--kit-textfield-density-message-adjust: 2px;
-	}
+	/** 
+	 * variant
+	 * @link no link
+	 */
+	.kit-textfield[data-variant='filled'] {
+		--kit-textfield-bg: var(--kit-color-surface-2);
+		--kit-textfield-fg: var(--kit-color-text);
 
-	.kit-textfield[data-variant='filled'] .kit-textfield__field {
-		background: var(--kit-textfield-bg);
+		--kit-textfield-hover-bg: color-mix(in oklab, var(---kit-textfield-bg), black 10%);
+		--kit-textfield-active-bg: color-mix(in oklab, var(--kit-textfield-bg), black 16%);
 	}
+	.kit-textfield[data-variant='outline'] {
+		--kit-textfield-bg: transparent;
+		--kit-textfield-fg: var(--kit-color-text);
+		--kit-textfield-bd: var(--kit-textfield-fg);
 
-	.kit-textfield[data-variant='outline'] .kit-textfield__field {
-		background: color-mix(in oklab, var(--kit-textfield-bg), transparent 90%);
+		--kit-textfield-hover-bg: color-mix(in oklab, var(--kit-textfield-fg), transparent 80%);
+		--kit-textfield-active-bg: color-mix(in oklab, var(--kit-textfield-fg), transparent 92%);
 	}
+	.kit-textfield[data-variant='text'] {
+		--kit-textfield-bg: transparent;
+		--kit-textfield-fg: var(--kit-color-text);
+		--kit-textfield-bd: var(--kit-textfield-fg);
 
-	.kit-textfield[data-variant='text'] .kit-textfield__field {
-		background: transparent;
-		border-radius: 0;
+		--kit-textfield-hover-bg: color-mix(in oklab, var(--kit-textfield-fg), transparent 80%);
+		--kit-textfield-active-bg: color-mix(in oklab, var(--kit-textfield-fg), transparent 92%);
 	}
 
-	.kit-textfield[data-disabled='true'] {
-		opacity: var(--kit-disabled-opacity, 0.55);
-		pointer-events: none;
+	/** 
+	 * density
+	 * @link ...
+	 */
+	.kit-textfield[data-density='none'] {
+		--kit-textfield-density-scale: 0;
+		--kit-textfield-density-h-scale: 0;
 	}
-
-	.kit-textfield[data-readonly='true'] input {
-		cursor: default;
+	.kit-textfield[data-density='compact'] {
+		--kit-textfield-density-scale: 0.9;
+		--kit-textfield-density-h-scale: 0.92;
 	}
-
-	.kit-textfield[data-hide-spin-buttons='true'] input[type='number'] {
-		appearance: textfield;
-		-moz-appearance: textfield;
+	.kit-textfield[data-density='default'] {
+		--kit-textfield-density-scale: 1;
+		--kit-textfield-density-h-scale: 1;
 	}
-
-	.kit-textfield[data-hide-spin-buttons='true'] input[type='number']::-webkit-inner-spin-button,
-	.kit-textfield[data-hide-spin-buttons='true'] input[type='number']::-webkit-outer-spin-button {
-		appearance: none;
-		-webkit-appearance: none;
-		margin: 0;
+	.kit-textfield[data-density='comfortable'] {
+		--kit-textfield-density-scale: 1.1;
+		--kit-textfield-density-h-scale: 1.15;
 	}
 
+	/** 
+	 * rounded
+	 * @link ...
+	 */
 	.kit-textfield[data-rounded='0'] {
-		--kit-textfield-radius: 0;
+		--kit-textfield-radius: var(--kit-shape-none);
 	}
-
 	.kit-textfield[data-rounded='xs'] {
-		--kit-textfield-radius: 2px;
+		--kit-textfield-radius: var(--kit-shape-xs);
 	}
-
 	.kit-textfield[data-rounded='sm'] {
-		--kit-textfield-radius: 4px;
+		--kit-textfield-radius: var(--kit-shape-sm);
 	}
-
 	.kit-textfield[data-rounded='md'] {
-		--kit-textfield-radius: 8px;
+		--kit-textfield-radius: var(--kit-shape-md);
 	}
-
 	.kit-textfield[data-rounded='lg'] {
-		--kit-textfield-radius: 16px;
+		--kit-textfield-radius: var(--kit-shape-lg);
 	}
-
 	.kit-textfield[data-rounded='xl'] {
-		--kit-textfield-radius: 99999px;
+		--kit-textfield-radius: var(--kit-shape-xl);
 	}
 
 	.kit-textfield__prepend,
 	.kit-textfield__append {
 		display: flex;
 		align-items: center;
+		height: 100%;
 	}
 
 	.kit-textfield__prepend {
@@ -452,9 +468,12 @@
 		gap: var(--kit-textfield-gap);
 		width: 100%;
 		min-width: 0;
-		padding: var(--kit-textfield-py) var(--kit-textfield-px);
+		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));
 		border-radius: var(--kit-textfield-radius);
+		background: var(--kit-textfield-bg);
 		color: var(--kit-textfield-fg);
+		font-size: var(--kit-textfield-font);
 	}
 
 	.kit-textfield__prepend-inner,
@@ -529,16 +548,15 @@
 	}
 
 	.kit-textfield[data-error='true'] .outline {
-		--outline-color: var(--kit-danger, hsl(5 80% 55%));
+		--outline-color: var(--kit-color-error);
 	}
 
 	.kit-textfield[data-error='true'] .line {
-		background: var(--kit-danger, hsl(5 80% 55%));
+		--kit-textfield-bd: var(--kit-color-error);
 	}
 
 	.kit-textfield__message {
 		grid-area: message;
-		padding-top: var(--kit-textfield-message-offset);
 		padding-inline: var(--kit-textfield-px);
 		font-size: 12px;
 		opacity: 0;
@@ -557,7 +575,7 @@
 	}
 
 	.kit-textfield__message-inner[data-error='true'] {
-		color: var(--kit-danger, hsl(5 80% 55%));
+		color: var(--kit-color-error);
 	}
 
 	.kit-textfield__message-prefix,
@@ -565,6 +583,11 @@
 		line-height: 1.2;
 	}
 
+	.kit-textfield__message-suffix {
+		align-items: end;
+		text-align: end;
+	}
+
 	.kit-textfield__message-text {
 		line-height: 1.2;
 		word-break: break-word;

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

@@ -1,4 +1,4 @@
-import type { Component, RoundedType, SizeType } from '../../@types';
+import type { Component, DensityType, ElevationProps, RoundedType, SizeType } from '../../@types';
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 export interface TextfieldProps extends Component {
@@ -10,14 +10,14 @@ export interface TextfieldProps extends Component {
     min?: number;
     max?: number;
     variant?: 'outline' | 'text' | 'filled';
-    density?: 'compact' | 'comfortable' | 'default';
+    density?: DensityType;
     error?: boolean;
     errorMessage?: string;
     disabled?: boolean;
     color?: string;
     background?: string;
     size?: SizeType;
-    rounded?: RoundedType | string;
+    rounded?: RoundedType;
     readonly?: boolean;
     hideSpinButtons?: boolean;
     persistentMessage?: boolean;
@@ -36,4 +36,5 @@ export interface TextfieldProps extends Component {
     id?: string;
     autocomplete?: HTMLInputAttributes['autocomplete'];
     inputmode?: HTMLInputAttributes['inputmode'];
+    elevation?: ElevationProps;
 }