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

const props = withDefaults(
  defineProps<{
    label?: string;
    topCaption?: string;
    bottomCaption?: string;
    accent?: string;
    travel?: number;
  }>(),
  {
    label: "Download",
    topCaption: "Latest build",
    bottomCaption: "1.2 MB zip",
    accent: "#38BDF8",
    travel: 30,
  },
);

const TOP_BASE = 44;
const BOTTOM_BASE = 34;

const hovered = ref(false);
const focused = ref(false);
const pressed = ref(false);
const touching = ref(false);

const extended = computed(() => hovered.value || focused.value || pressed.value);
const pulled = computed(() => pressed.value && !touching.value);

const topTravel = computed(() => TOP_BASE + props.travel);
const bottomTravel = computed(() => BOTTOM_BASE + props.travel * 0.6);

const topY = computed(() => (extended.value ? -(pulled.value ? (topTravel.value * 2) / 3 : topTravel.value) : 0));
const bottomY = computed(() => (extended.value ? (pulled.value ? (bottomTravel.value * 2) / 3 : bottomTravel.value) : 0));

const uid = Math.random().toString(36).slice(2);
const topId = `stdb-top-${uid}`;
const bottomId = `stdb-bottom-${uid}`;

function onPointerEnter(event: PointerEvent) {
  if (event.pointerType !== "touch") hovered.value = true;
}
function onPointerLeave() {
  hovered.value = false;
  pressed.value = false;
  touching.value = false;
}
function onPointerDown(event: PointerEvent) {
  pressed.value = true;
  touching.value = event.pointerType === "touch";
}
function onPointerUp() {
  pressed.value = false;
}
function onPointerCancel() {
  pressed.value = false;
  touching.value = false;
}
function onFocus() {
  focused.value = true;
}
function onBlur() {
  focused.value = false;
  pressed.value = false;
}
</script>

<template>
  <div class="slide-tabs" :style="{ '--accent': accent }">
    <div class="slide-tabs__tab" :style="{ transform: `translate(-50%, calc(-50% + ${topY}px))` }">
      <span :id="topId" class="slide-tabs__caption">{{ topCaption }}</span>
    </div>
    <div class="slide-tabs__tab" :style="{ transform: `translate(-50%, calc(-50% + ${bottomY}px))` }">
      <span :id="bottomId" class="slide-tabs__caption">{{ bottomCaption }}</span>
    </div>
    <button
      type="button"
      class="slide-tabs__button"
      :class="{ 'slide-tabs__button--pressed': pressed }"
      :aria-describedby="`${topId} ${bottomId}`"
      @pointerenter="onPointerEnter"
      @pointerleave="onPointerLeave"
      @pointerdown="onPointerDown"
      @pointerup="onPointerUp"
      @pointercancel="onPointerCancel"
      @focus="onFocus"
      @blur="onBlur"
    >
      {{ label }}
    </button>
  </div>
</template>

<style scoped>
.slide-tabs {
  position: relative;
  display: inline-flex;
  width: 200px;
  height: 50px;
}
.slide-tabs__tab {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #111316;
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.6);
  transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.slide-tabs__caption {
  padding: 0 0.5rem;
  text-align: center;
  font: 500 12px/1.2 system-ui, sans-serif;
  color: rgb(255 255 255 / 0.8);
}
.slide-tabs__button {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 50px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font: 600 16px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background-image: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, black) 100%);
  box-shadow: 0 10px 22px -10px rgb(0 0 0 / 0.55);
  transition: filter 0.15s ease-out;
}
.slide-tabs__button--pressed {
  filter: brightness(0.88);
}
.slide-tabs__button:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.7);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .slide-tabs__tab {
    transition-duration: 0.01s;
  }
}
</style>

1f:Te2a,

{topCaption}

{bottomCaption}

20:Td53a,

<script lang="ts">
  let {
    label = "Download",
    topCaption = "Latest build",
    bottomCaption = "1.2 MB zip",
    accent = "#38BDF8",
    travel = 30,
  }: {
    label?: string;
    topCaption?: string;
    bottomCaption?: string;
    accent?: string;
    travel?: number;
  } = $props();

  const TOP_BASE = 44;
  const BOTTOM_BASE = 34;

  let hovered = $state(false);
  let focused = $state(false);
  let pressed = $state(false);
  let touching = $state(false);

  let extended = $derived(hovered || focused || pressed);
  let pulled = $derived(pressed && !touching);

  let topTravel = $derived(TOP_BASE + travel);
  let bottomTravel = $derived(BOTTOM_BASE + travel * 0.6);

  let topY = $derived(extended ? -(pulled ? (topTravel * 2) / 3 : topTravel) : 0);
  let bottomY = $derived(extended ? (pulled ? (bottomTravel * 2) / 3 : bottomTravel) : 0);

  const uid = Math.random().toString(36).slice(2);
  const topId = `stdb-top-${uid}`;
  const bottomId = `stdb-bottom-${uid}`;

  function onPointerEnter(event: PointerEvent) {
    if (event.pointerType !== "touch") hovered = true;
  }
  function onPointerLeave() {
    hovered = false;
    pressed = false;
    touching = false;
  }
  function onPointerDown(event: PointerEvent) {
    pressed = true;
    touching = event.pointerType === "touch";
  }
  function onPointerUp() {
    pressed = false;
  }
  function onPointerCancel() {
    pressed = false;
    touching = false;
  }
  function onFocus() {
    focused = true;
  }
  function onBlur() {
    focused = false;
    pressed = false;
  }
</script>

<div class="slide-tabs" style="--accent: {accent}">
  <div class="tab" style="transform: translate(-50%, calc(-50% + {topY}px))">
    <span id={topId} class="caption">{topCaption}</span>
  </div>
  <div class="tab" style="transform: translate(-50%, calc(-50% + {bottomY}px))">
    <span id={bottomId} class="caption">{bottomCaption}</span>
  </div>
  <button
    type="button"
    class="button"
    class:pressed
    aria-describedby="{topId} {bottomId}"
    onpointerenter={onPointerEnter}
    onpointerleave={onPointerLeave}
    onpointerdown={onPointerDown}
    onpointerup={onPointerUp}
    onpointercancel={onPointerCancel}
    onfocus={onFocus}
    onblur={onBlur}
  >
    {label}
  </button>
</div>

<style>
  .slide-tabs {
    position: relative;
    display: inline-flex;
    width: 200px;
    height: 50px;
  }
  .tab {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 180px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #111316;
    box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.6);
    transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .caption {
    padding: 0 0.5rem;
    text-align: center;
    font: 500 12px/1.2 system-ui, sans-serif;
    color: rgb(255 255 255 / 0.8);
  }
  .button {
    position: relative;
    z-index: 1;
    width: 200px;
    height: 50px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
    font: 600 16px/1 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background-image: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, black) 100%);
    box-shadow: 0 10px 22px -10px rgb(0 0 0 / 0.55);
    transition: filter 0.15s ease-out;
  }
  .button.pressed {
    filter: brightness(0.88);
  }
  .button:focus-visible {
    outline: 2px solid rgb(255 255 255 / 0.7);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .tab {
      transition-duration: 0.01s;
    }
  }
</style>

Nearby