svelte-kit-vice/src/uix/eidos/components/kbd/kbd.svelte

<script lang="ts">
	import './kbd.css';
	/**
	 * Eidos `<Kbd>` — keyboard shortcut visual.
	 *
	 *   <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>
	 *   <Kbd variant="outline" size="sm">Esc</Kbd>
	 *
	 * Renders `<kbd>` with a small chrome (border, background, inner
	 * padding) so the key looks like a physical cap.
	 */
	import { ActiveEidos } from '$uix/eidos';
	import type { KbdProps } from './types';

	let {
		variant,
		size,
		as = 'kbd',
		tagStyle,
		class: className,
		children,
		...restProps
	}: KbdProps = $props();

	const eidos = ActiveEidos.require();

	const resolvedVariant = $derived(eidos.resolve(variant) ?? 'surface');

	function pushVar(decls: string[], name: string, value: string | undefined): void {
		if (!value) return;
		decls.push(`${name}: ${value};`);
	}

	const inlineStyle = $derived.by(() => {
		const decls: string[] = [];
		const sizeKey = eidos.resolve(size);
		if (sizeKey) pushVar(decls, '--_kbd-font-size', `var(--font-size-${sizeKey})`);
		const inline = decls.join(' ');
		return [inline, tagStyle].filter(Boolean).join(' ');
	});
</script>

<svelte:element
	this={as}
	{...restProps}
	class={className}
	data-kbd=""
	data-variant={resolvedVariant}
	style={inlineStyle}
>
	{@render children?.()}
</svelte:element>