<script setup lang="ts">
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    keys?: string;
    size?: "sm" | "md" | "lg";
    tone?: "muted" | "solid";
    accent?: string;
  }>(),
  { keys: "⌘ K", size: "md", tone: "muted", accent: "#FF4D8D" },
);

function foregroundFor(hex: string): string {
  const clean = hex.replace("#", "");
  const r = parseInt(clean.slice(0, 2), 16) || 0;
  const g = parseInt(clean.slice(2, 4), 16) || 0;
  const b = parseInt(clean.slice(4, 6), 16) || 0;
  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return luminance > 0.62 ? "#171310" : "#FFFFFF";
}

const tokens = computed(() => props.keys.trim().split(/\s+/).filter(Boolean).slice(0, 6));
const foreground = computed(() => foregroundFor(props.accent));
const spoken = computed(() => (tokens.value.length > 0 ? tokens.value.join(" plus ") : "not set"));
</script>

<template>
  <span
    class="skc-root"
    :data-size="size"
    :data-tone="tone"
    role="img"
    :aria-label="`Keyboard shortcut: ${spoken}`"
    :style="{ '--skc-accent': accent, '--skc-fg': foreground }"
  >
    <span
      v-for="(token, index) in tokens"
      :key="index"
      class="skc-key"
      aria-hidden="true"
      :style="{ animationDelay: index * 40 + 'ms' }"
      >{{ token }}</span
    >
  </span>
</template>

<style scoped>
.skc-root {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.skc-root[data-size="sm"] {
  gap: 1px;
}
.skc-root[data-size="lg"] {
  gap: 3px;
}
.skc-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: -0.02em;
  border-radius: 5px;
  animation: skc-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.skc-root[data-size="sm"] .skc-key {
  height: 18px;
  min-width: 18px;
  padding: 0 6px;
  font-size: 10px;
  border-radius: 4px;
}
.skc-root[data-size="md"] .skc-key {
  height: 20px;
  min-width: 20px;
  padding: 0 7px;
  font-size: 11px;
  border-radius: 5px;
}
.skc-root[data-size="lg"] .skc-key {
  height: 24px;
  min-width: 24px;
  padding: 0 9px;
  font-size: 13px;
  border-radius: 6px;
}
.skc-root[data-tone="muted"] .skc-key {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  color: color-mix(in srgb, currentColor 88%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 12%, transparent),
    inset 0 -1px 0 color-mix(in srgb, black 22%, transparent);
}
.skc-root[data-tone="solid"] .skc-key {
  background: var(--skc-accent);
  color: var(--skc-fg, #fff);
  border: 1px solid color-mix(in srgb, var(--skc-accent) 55%, black);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--skc-accent) 45%, white),
    inset 0 -1px 0 color-mix(in srgb, var(--skc-accent) 40%, black);
}
@keyframes skc-in {
  from {
    opacity: 0;
    transform: scale(0.72) translateY(3px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .skc-key {
    animation: none;
  }
}
</style>

20:Tc8f, {#each tokens as token, index (index)} {/each} 21:Tcba7,

<script lang="ts">
  let {
    keys = "⌘ K",
    size = "md",
    tone = "muted",
    accent = "#FF4D8D",
  }: {
    keys?: string;
    size?: "sm" | "md" | "lg";
    tone?: "muted" | "solid";
    accent?: string;
  } = $props();

  function foregroundFor(hex: string): string {
    const clean = hex.replace("#", "");
    const r = parseInt(clean.slice(0, 2), 16) || 0;
    const g = parseInt(clean.slice(2, 4), 16) || 0;
    const b = parseInt(clean.slice(4, 6), 16) || 0;
    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    return luminance > 0.62 ? "#171310" : "#FFFFFF";
  }

  let tokens = $derived(keys.trim().split(/\s+/).filter(Boolean).slice(0, 6));
  let foreground = $derived(foregroundFor(accent));
  let spoken = $derived(tokens.length > 0 ? tokens.join(" plus ") : "not set");
</script>

<span
  class="skc-root"
  data-size={size}
  data-tone={tone}
  role="img"
  aria-label={`Keyboard shortcut: ${spoken}`}
  style="--skc-accent: {accent}; --skc-fg: {foreground}"
>
  {#each tokens as token, index (index)}
    <span class="skc-key" aria-hidden="true" style="animation-delay: {index * 40}ms">{token}</span>
  {/each}
</span>

<style>
  .skc-root {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    user-select: none;
    line-height: 1;
  }
  .skc-root[data-size="sm"] {
    gap: 1px;
  }
  .skc-root[data-size="lg"] {
    gap: 3px;
  }
  .skc-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-weight: 600;
    letter-spacing: -0.02em;
    border-radius: 5px;
    animation: skc-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .skc-root[data-size="sm"] .skc-key {
    height: 18px;
    min-width: 18px;
    padding: 0 6px;
    font-size: 10px;
    border-radius: 4px;
  }
  .skc-root[data-size="md"] .skc-key {
    height: 20px;
    min-width: 20px;
    padding: 0 7px;
    font-size: 11px;
    border-radius: 5px;
  }
  .skc-root[data-size="lg"] .skc-key {
    height: 24px;
    min-width: 24px;
    padding: 0 9px;
    font-size: 13px;
    border-radius: 6px;
  }
  .skc-root[data-tone="muted"] .skc-key {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    color: color-mix(in srgb, currentColor 88%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, white 12%, transparent),
      inset 0 -1px 0 color-mix(in srgb, black 22%, transparent);
  }
  .skc-root[data-tone="solid"] .skc-key {
    background: var(--skc-accent);
    color: var(--skc-fg, #fff);
    border: 1px solid color-mix(in srgb, var(--skc-accent) 55%, black);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--skc-accent) 45%, white),
      inset 0 -1px 0 color-mix(in srgb, var(--skc-accent) 40%, black);
  }
  @keyframes skc-in {
    from {
      opacity: 0;
      transform: scale(0.72) translateY(3px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .skc-key {
      animation: none;
    }
  }
</style>

Nearby