You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.2 KiB
53 lines
1.2 KiB
<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>
|