lapikit 0.4.13 → 0.4.14

package/dist/components/chip/chip.svelte

@@ -1,131 +1,501 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import { Icon } from '../index.js';
-	import type { ChipProps } from './types.js';
-
-	// external
-	import LoadingFill from '../../assets/icons/loading-fill.svelte';
-	import Close from '../../assets/icons/close-fill.svelte';
-	import { ripple } from '../../internal/core/animations/ripple.js';
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import { ripple } from '../../animations';
+	import type { ChipProps } from './chip.types.js';
 
 	let {
-		children,
-		load,
-		close,
-		append,
-		prepend,
 		ref = $bindable(),
-		open = $bindable(true),
 		is = 'div',
-		href,
-		dark,
-		light,
-		active,
+		children,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
 		variant = 'filled',
-		error,
-		info,
-		success,
-		warning,
 		density = 'default',
-		disabled,
-		size = 'md',
+		loading,
+		active = false,
+		size = 'default',
+		labelStyle = false,
+		disabled = false,
+		href,
+		input,
 		type,
-		background,
-		color,
+		checked,
+		value,
 		label,
-		loading,
-		rounded,
-		closable,
 		noRipple,
+		load,
+		append,
+		prepend,
 		readonly = false,
 		...rest
 	}: ChipProps = $props();
 
-	const assets = getAssets();
+	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 componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-chip',
+			className: `${className ?? ''} kit-chip--${safeVariant}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	const isInput = $derived(!!input);
+	const isDisabled = $derived(!!disabled);
+	const isReadonly = $derived(!!readonly);
+	const isLocked = $derived(isDisabled || isReadonly);
+
+	const hasOnClick = $derived(typeof restProps.onclick === 'function');
+	const hasOnKeyDown = $derived(typeof restProps.onkeydown === 'function');
+	const hasOnKeyUp = $derived(typeof restProps.onkeyup === 'function');
+	const hasOnPressHandler = $derived(hasOnClick || hasOnKeyDown || hasOnKeyUp);
+	const wantsActionTag = $derived(is === 'button' || is === 'a' || is === 'input');
 
-	$effect(() => {
-		const refProps = { ...rest };
-		if (refProps?.onclick && !readonly) is = 'button';
-	});
+	const tag = $derived(
+		(href && 'a') ||
+			(isInput && 'input') ||
+			(wantsActionTag && is) ||
+			(hasOnPressHandler && 'button') ||
+			'div'
+	);
+
+	const isInteractive = $derived(
+		(tag === 'button' || tag === 'a' || isInput || hasOnPressHandler) && !isLocked
+	);
+	const inputWrapperTag = $derived(type === 'checkbox' || type === 'radio' ? 'label' : 'div');
+	const resolvedHref = $derived(isLocked ? undefined : href);
+	const resolvedDisabled = $derived((tag === 'button' && isLocked) || undefined);
+
+	const resolvedType = $derived(tag !== 'button' ? type : (type ?? 'button'));
 </script>
 
-{#if !closable || (open && closable)}
+{#if isInput}
 	<svelte:element
-		this={href ? 'a' : is}
+		this={inputWrapperTag}
 		bind:this={ref}
-		{...rest}
-		href={href && !disabled ? href : undefined}
-		class={[
-			'kit-chip',
-			light && 'light',
-			dark && 'dark',
-			size && assets.className('chip', 'size', size),
-			variant && assets.className('chip', 'variant', variant),
-			density && assets.className('chip', 'density', density),
-			error && 'kit-chip--error',
-			info && 'kit-chip--info',
-			success && 'kit-chip--success',
-			warning && 'kit-chip--warning',
-			disabled && 'kit-chip--disabled',
-			active && 'kit-chip--active',
-			loading && 'kit-chip--loading',
-			readonly && 'kit-chip--readonly',
-			rest.class
-		]}
-		tabindex={href && disabled ? -1 : 0}
-		aria-disabled={href ? disabled : undefined}
-		aria-label={type !== 'button' ? label : undefined}
-		disabled={href ? undefined : disabled}
-		type={href ? undefined : type}
+		class={componentClass}
+		style={componentStyle}
+		data-size={safeSize}
+		data-variant={safeVariant}
+		data-loading={loading}
+		data-active={active}
+		data-disabled={isDisabled}
+		data-readonly={isReadonly}
+		data-density={safeDensity}
+		data-label-style={labelStyle}
+		data-interactive={isInteractive}
+		aria-busy={loading}
+		aria-disabled={isLocked || undefined}
 		use:ripple={{
 			component: 'chip',
-			disabled: noRipple || readonly || disabled || is === 'div' || is === 'span'
+			disabled: noRipple || isLocked
 		}}
-		style:--chip-background={assets.color(background)}
-		style:--chip-color={assets.color(color)}
-		style:--chip-shape={assets.shape(rounded)}
 	>
+		{#if safeVariant === 'outline'}
+			<span class="outline"></span>
+		{/if}
+		<input
+			{...restProps}
+			type={type || 'button'}
+			{checked}
+			{value}
+			aria-label={String(label || value)}
+			disabled={isLocked}
+		/>
 		{#if loading}
-			<div class="kit-chip-loading">
+			<span class="spinner">
 				{#if load}
 					{@render load?.()}
 				{:else}
-					<Icon class="kit-icon-load">
-						<LoadingFill />
-					</Icon>
+					...
 				{/if}
-			</div>
-		{/if}
-
-		{#if prepend}
-			<div class="kit-chip-prepend">
-				{@render prepend?.()}
-			</div>
+			</span>
 		{/if}
-		<div class="kit-chip-content">
-			{@render children?.()}
-		</div>
-		{#if append}
-			<div class="kit-chip-append">
-				{@render append?.()}
-			</div>
+	</svelte:element>
+{:else}
+	<svelte:element
+		this={tag}
+		bind:this={ref}
+		class={componentClass}
+		style={componentStyle}
+		{...restProps}
+		type={resolvedType}
+		href={resolvedHref}
+		data-size={safeSize}
+		data-variant={safeVariant}
+		data-loading={loading}
+		data-active={active}
+		data-disabled={isDisabled}
+		data-readonly={isReadonly}
+		data-density={safeDensity}
+		data-label-style={labelStyle}
+		data-interactive={isInteractive}
+		disabled={resolvedDisabled}
+		aria-busy={loading}
+		aria-disabled={((tag === 'a' || tag === 'div') && isLocked) || undefined}
+		tabindex={tag === 'a' && isLocked ? -1 : undefined}
+		use:ripple={{
+			component: 'chip',
+			disabled: noRipple || !isInteractive
+		}}
+	>
+		{#if safeVariant === 'outline'}
+			<span class="outline"></span>
 		{/if}
 
-		{#if closable && !readonly}
-			<button
-				class="kit-chip--close"
-				type="button"
-				aria-label="close"
-				onclick={() => (open = false)}
-			>
-				{#if close}
-					{@render close?.()}
+		<span class="kit-chip__inner">
+			{#if prepend}
+				<span class="kit-chip__prepend">
+					{@render prepend?.()}
+				</span>
+			{/if}
+			<span class="kit-chip__content">
+				{@render children?.()}
+			</span>
+			{#if append}
+				<span class="kit-chip__append">
+					{@render append?.()}
+				</span>
+			{/if}
+		</span>
+
+		{#if loading}
+			<span class="spinner">
+				{#if load}
+					{@render load?.()}
 				{:else}
-					<Icon>
-						<Close />
-					</Icon>
+					...
 				{/if}
-			</button>
+			</span>
 		{/if}
 	</svelte:element>
 {/if}
+
+<style>
+	input {
+		border: 0;
+		padding: 0;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+	}
+
+	button,
+	input,
+	select,
+	textarea {
+		font: inherit;
+		color: inherit;
+	}
+
+	button {
+		appearance: none;
+		background: none;
+		border: none;
+	}
+
+	.kit-chip {
+		--kit-chip-bg: var(--kit-surface-2);
+		--kit-chip-fg: var(--kit-fg);
+		--kit-chip-bd: var(--kit-border);
+		--kit-chip-bg--hover: color-mix(in oklab, var(--kit-chip-bg), var(--kit-chip-fg) 6%);
+		--kit-chip-bg--active: color-mix(in oklab, var(--kit-chip-bg), var(--kit-chip-fg) 10%);
+		--kit-chip-font: var(--kit-font);
+		--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;
+		--chip-density-scale: 1;
+		--chip-density-height-scale: 1;
+		--chip-radius: 99999px;
+		--kit-chip-gap: 0.35em;
+
+		position: relative;
+		display: inline-flex;
+		box-sizing: border-box;
+		align-items: center;
+		justify-content: center;
+		font-family: var(--kit-chip-font);
+		background: var(--chip-bg);
+		color: var(--chip-fg);
+		height: max(24px, calc(var(--chip-h) * var(--chip-density-height-scale)));
+		padding-inline: calc(var(--chip-px) * var(--chip-density-scale));
+		border-radius: var(--chip-radius);
+		text-decoration: none;
+		white-space: nowrap;
+		user-select: none;
+		cursor: default;
+		border: 0;
+		transition:
+			background 150ms ease,
+			transform 50ms ease;
+	}
+
+	.kit-chip[data-interactive='true'] {
+		cursor: pointer;
+	}
+
+	.kit-chip[data-interactive='true']:hover {
+		background: var(--chip-hover-bg);
+		color: var(--chip-hover-fg);
+		text-decoration: var(--chip-decoration);
+	}
+
+	.kit-chip[data-interactive='true']:active,
+	.kit-chip[data-active='true'] {
+		background: var(--chip-active-bg);
+		color: var(--chip-active-fg);
+		text-decoration: var(--chip-decoration);
+		transform: translateY(1px);
+	}
+
+	.kit-chip[data-active='true'][data-interactive='true']:hover {
+		background: var(--chip-hover-bg);
+		color: var(--chip-hover-fg);
+		text-decoration: var(--chip-decoration);
+	}
+
+	:is(.kit-chip:focus-visible, .kit-chip:has(> input:focus-visible)) {
+		outline: 2px solid var(--kit-focus);
+		outline-offset: 2px;
+	}
+
+	.kit-chip > input:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
+
+	.kit-chip > :is(input[type='checkbox'], input[type='radio']) {
+		appearance: none;
+		margin: 0;
+		cursor: pointer;
+	}
+
+	.kit-chip > :is(input[type='checkbox'], input[type='radio']):after {
+		--chip-content: attr(aria-label);
+		content: var(--chip-content);
+		cursor: pointer;
+	}
+
+	.kit-chip[data-variant='filled'] {
+		--chip-bg: var(--kit-accent);
+		--chip-fg: white;
+		--chip-hover-bg: color-mix(in oklab, var(--kit-accent), black 10%);
+		--chip-hover-fg: var(--chip-fg);
+		--chip-active-bg: color-mix(in oklab, var(--kit-accent), black 16%);
+		--chip-active-fg: var(--chip-fg);
+	}
+
+	.kit-chip[data-variant='outline'] {
+		--outline-color: var(--kit-accent);
+	}
+
+	.kit-chip[data-variant='outline'],
+	.kit-chip[data-variant='text'] {
+		--chip-bg: transparent;
+		--chip-fg: var(--kit-accent);
+		--chip-hover-bg: color-mix(in oklab, var(--kit-accent), transparent 80%);
+		--chip-hover-fg: var(--chip-fg);
+		--chip-active-bg: color-mix(in oklab, var(--kit-accent), transparent 92%);
+		--chip-active-fg: var(--chip-fg);
+	}
+
+	.kit-chip[data-variant='link'] {
+		--chip-bg: transparent;
+		--chip-fg: var(--kit-accent);
+		--chip-hover-fg: var(--chip-fg);
+		--chip-active-fg: var(--chip-fg);
+		--chip-decoration: underline;
+		height: inherit;
+		padding: 0;
+	}
+
+	.kit-chip[data-size='xs'] {
+		--chip-h: var(--kit-chip-h-xs);
+		--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'] {
+		--chip-h: var(--kit-chip-h-sm);
+		--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'] {
+		--chip-h: var(--kit-chip-h-md);
+		--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'] {
+		--chip-h: var(--kit-chip-h-lg);
+		--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'] {
+		--chip-h: var(--kit-chip-h-xl);
+		--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'] {
+		--chip-density-scale: 1;
+		--chip-density-height-scale: 1;
+	}
+
+	.kit-chip[data-density='compact'] {
+		--chip-density-scale: 0.92;
+		--chip-density-height-scale: 0.9;
+	}
+
+	.kit-chip[data-density='comfortable'] {
+		--chip-density-scale: 1.08;
+		--chip-density-height-scale: 1.08;
+	}
+
+	.kit-chip[data-label-style='true'] {
+		font-weight: 600;
+		letter-spacing: 0.01em;
+		text-transform: uppercase;
+	}
+
+	.kit-chip .outline {
+		pointer-events: none;
+	}
+
+	.kit-chip__inner {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--kit-chip-gap);
+		line-height: 1;
+	}
+
+	.kit-chip__content,
+	.kit-chip__prepend,
+	.kit-chip__append {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+	}
+
+	.kit-chip__content :global(.kit-icon),
+	.kit-chip__prepend :global(.kit-icon),
+	.kit-chip__append :global(.kit-icon) {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		vertical-align: middle;
+	}
+
+	.kit-chip__content :global(svg),
+	.kit-chip__prepend :global(svg),
+	.kit-chip__append :global(svg),
+	.kit-chip__content :global(img),
+	.kit-chip__prepend :global(img),
+	.kit-chip__append :global(img) {
+		display: block;
+	}
+
+	.kit-chip[data-loading='true'] .kit-chip__inner,
+	.kit-chip[data-loading='true'] input {
+		opacity: 0;
+	}
+
+	.kit-chip[data-loading='true'] {
+		pointer-events: none;
+		user-select: none;
+	}
+
+	.spinner {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.kit-chip[data-readonly='true'],
+	.kit-chip[data-disabled='true'] {
+		pointer-events: none;
+		user-select: none;
+		cursor: default;
+	}
+
+	.kit-chip[data-disabled='true'] {
+		background: color-mix(in oklab, var(--chip-bg), transparent 70%);
+		color: color-mix(in oklab, var(--chip-fg), transparent 45%);
+	}
+
+	.kit-chip[data-disabled='true'] :global(.kit-icon),
+	.kit-chip[data-readonly='true'] :global(.kit-icon) {
+		color: color-mix(in oklab, var(--chip-fg), transparent 45%) !important;
+		--kit-icon-color: color-mix(in oklab, var(--chip-fg), transparent 45%) !important;
+	}
+
+	.kit-chip[data-disabled='true'] :global(.kit-icon img),
+	.kit-chip[data-disabled='true'] :global(.kit-icon .kit-icon__mask) {
+		opacity: 0.7;
+		filter: grayscale(0.2);
+	}
+	.kit-chip[data-readonly='true'] > input,
+	.kit-chip[data-disabled='true'] > input {
+		cursor: default;
+	}
+</style>

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

@@ -1,4 +1,4 @@
-import type { ChipProps } from './types.js';
-declare const Chip: import("svelte").Component<ChipProps, {}, "ref" | "open">;
+import type { ChipProps } from './chip.types.ts';
+declare const Chip: import("svelte").Component<ChipProps, {}, "ref">;
 type Chip = ReturnType<typeof Chip>;
 export default Chip;

package/dist/{labs/components → components}/chip/chip.types.d.ts

@@ -1,4 +1,4 @@
-import type { Component, SizeType } from '../../utils/types/index.js';
+import type { Component, SizeType } from '../../utils/types';
 import type { Snippet } from 'svelte';
 export interface ChipProps extends Component {
     ref?: HTMLElement | null;