1f:Tdceb,

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    keyLabel?: string;
    accent?: string;
    travel?: number;
    watchKeyboard?: boolean;
    tone?: "light" | "dark";
  }>(),
  { keyLabel: "Alt", accent: "#38BDF8", travel: 2, watchKeyboard: true, tone: "light" },
);

const pressed = ref(false);

function normalizeKey(value: string): string {
  const key = value.trim().toLowerCase();
  if (key === "space" || key === "spacebar") return " ";
  return key;
}

function press() {
  pressed.value = true;
}
function release() {
  pressed.value = false;
}
function handleKeyDown(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") press();
}
function handleKeyUp(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") release();
}

let teardown: (() => void) | null = null;
let mounted = false;
function attachMirror() {
  if (teardown) {
    teardown();
    teardown = null;
  }
  if (!mounted || typeof window === "undefined") return;
  if (!props.watchKeyboard) return;
  const target = normalizeKey(props.keyLabel);
  const down = (event: KeyboardEvent) => {
    if (normalizeKey(event.key) === target) press();
  };
  const up = (event: KeyboardEvent) => {
    if (normalizeKey(event.key) === target) release();
  };
  window.addEventListener("keydown", down);
  window.addEventListener("keyup", up);
  teardown = () => {
    window.removeEventListener("keydown", down);
    window.removeEventListener("keyup", up);
  };
}
watch(
  () => [props.watchKeyboard, props.keyLabel],
  () => attachMirror(),
);
onMounted(() => {
  mounted = true;
  attachMirror();
});
onBeforeUnmount(() => {
  if (teardown) teardown();
});

const capStyle = computed(() => ({
  "--cap-accent": props.accent,
  "--cap-travel": `${props.travel}px`,
}));
</script>

<template>
  <button
    type="button"
    class="keycap"
    :class="{ 'keycap--dark': tone === 'dark', 'is-pressed': pressed }"
    :style="capStyle"
    @pointerdown="press"
    @pointerup="release"
    @pointerleave="release"
    @keydown="handleKeyDown"
    @keyup="handleKeyUp"
  >
    <span class="keycap__label">{{ keyLabel }}</span>
  </button>
</template>

<style scoped>
.keycap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  height: 2.5em;
  padding: 0 0.75em;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #dce0e6 0%, #f5f6f8 100%);
  color: #5c6572;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.9),
    inset 0 -2px 0 rgb(23 28 36 / 0.16),
    0 3px 0 rgb(23 28 36 / 0.3);
  font: 700 1rem/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition:
    transform 170ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 170ms ease-out,
    color 120ms ease;
}
.keycap:focus-visible {
  outline: 2px solid var(--cap-accent);
  outline-offset: 2px;
}
.keycap.is-pressed {
  transform: translateY(var(--cap-travel));
  color: var(--cap-accent);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.9),
    inset 0 -3px 0 rgb(23 28 36 / 0.3),
    0 0 0 rgb(23 28 36 / 0);
}
.keycap--dark {
  background: linear-gradient(180deg, #24272e 0%, #353a42 100%);
  color: #c9ced6;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    inset 0 -2px 0 rgb(0 0 0 / 0.55),
    0 3px 0 rgb(0 0 0 / 0.5);
}
.keycap--dark.is-pressed {
  color: var(--cap-accent);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    inset 0 -3px 0 rgb(0 0 0 / 0.7),
    0 0 0 rgb(0 0 0 / 0);
}
.keycap__label {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .keycap {
    transition: none;
  }
}
</style>

20:Td48, 21:Tc913,

<script lang="ts">
  let {
    keyLabel = "Alt",
    accent = "#38BDF8",
    travel = 2,
    watchKeyboard = true,
    tone = "light",
  }: { keyLabel?: string; accent?: string; travel?: number; watchKeyboard?: boolean; tone?: "light" | "dark" } = $props();

  let pressed = $state(false);

  function normalizeKey(value: string): string {
    const key = value.trim().toLowerCase();
    if (key === "space" || key === "spacebar") return " ";
    return key;
  }

  function press() {
    pressed = true;
  }
  function release() {
    pressed = false;
  }
  function handleKeyDown(event: KeyboardEvent) {
    if (event.key === " " || event.key === "Enter") press();
  }
  function handleKeyUp(event: KeyboardEvent) {
    if (event.key === " " || event.key === "Enter") release();
  }

  $effect(() => {
    if (!watchKeyboard) return;
    const target = normalizeKey(keyLabel);
    const down = (event: KeyboardEvent) => {
      if (normalizeKey(event.key) === target) press();
    };
    const up = (event: KeyboardEvent) => {
      if (normalizeKey(event.key) === target) release();
    };
    window.addEventListener("keydown", down);
    window.addEventListener("keyup", up);
    return () => {
      window.removeEventListener("keydown", down);
      window.removeEventListener("keyup", up);
    };
  });
</script>

<button
  type="button"
  class="keycap"
  class:dark={tone === "dark"}
  class:pressed
  style="--cap-accent: {accent}; --cap-travel: {travel}px"
  onpointerdown={press}
  onpointerup={release}
  onpointerleave={release}
  onkeydown={handleKeyDown}
  onkeyup={handleKeyUp}
>
  <span class="label">{keyLabel}</span>
</button>

<style>
  .keycap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4em;
    height: 2.5em;
    padding: 0 0.75em;
    border: 0;
    border-radius: 5px;
    background: linear-gradient(180deg, #dce0e6 0%, #f5f6f8 100%);
    color: #5c6572;
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.9),
      inset 0 -2px 0 rgb(23 28 36 / 0.16),
      0 3px 0 rgb(23 28 36 / 0.3);
    font: 700 1rem/1 system-ui, sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition:
      transform 170ms cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 170ms ease-out,
      color 120ms ease;
  }
  .keycap:focus-visible {
    outline: 2px solid var(--cap-accent);
    outline-offset: 2px;
  }
  .keycap.pressed {
    transform: translateY(var(--cap-travel));
    color: var(--cap-accent);
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.9),
      inset 0 -3px 0 rgb(23 28 36 / 0.3),
      0 0 0 rgb(23 28 36 / 0);
  }
  .keycap.dark {
    background: linear-gradient(180deg, #24272e 0%, #353a42 100%);
    color: #c9ced6;
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.14),
      inset 0 -2px 0 rgb(0 0 0 / 0.55),
      0 3px 0 rgb(0 0 0 / 0.5);
  }
  .keycap.dark.pressed {
    color: var(--cap-accent);
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.14),
      inset 0 -3px 0 rgb(0 0 0 / 0.7),
      0 0 0 rgb(0 0 0 / 0);
  }
  .label {
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (prefers-reduced-motion: reduce) {
    .keycap {
      transition: none;
    }
  }
</style>

Nearby