01Three separator styles

<main class="stage">
  <div class="sv is-demo">
    <nav class="sv__stack" aria-label="Breadcrumb">
      <ol class="sv__list sv__list--slash is-on">
        <li><a href="#">Home</a></li>
        <li><a href="#">Electronics</a></li>
        <li><a href="#">Laptops</a></li>
        <li><span class="sv__cur" aria-current="page">13-inch gaming</span></li>
      </ol>
      <ol class="sv__list sv__list--caret" aria-hidden="true">
        <li><a href="#" tabindex="-1">Home</a><span class="sv__sep" aria-hidden="true"><svg viewBox="0 0 256 256" width="12" height="12" aria-hidden="true"><g fill="currentColor"><path d="m176 128l-80 80V48Z" opacity=".2"/><path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z"/></g></svg></span></li>
        <li><a href="#" tabindex="-1">Electronics</a><span class="sv__sep" aria-hidden="true"><svg viewBox="0 0 256 256" width="12" height="12" aria-hidden="true"><g fill="currentColor"><path d="m176 128l-80 80V48Z" opacity=".2"/><path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z"/></g></svg></span></li>
        <li><a href="#" tabindex="-1">Laptops</a><span class="sv__sep" aria-hidden="true"><svg viewBox="0 0 256 256" width="12" height="12" aria-hidden="true"><g fill="currentColor"><path d="m176 128l-80 80V48Z" opacity=".2"/><path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z"/></g></svg></span></li>
        <li><span class="sv__cur">13-inch gaming</span></li>
      </ol>
      <ol class="sv__list sv__list--dot" aria-hidden="true">
        <li><a href="#" tabindex="-1">Home</a></li>
        <li><a href="#" tabindex="-1">Electronics</a></li>
        <li><a href="#" tabindex="-1">Laptops</a></li>
        <li><span class="sv__cur">13-inch gaming</span></li>
      </ol>
    </nav>
    <div class="sv__tabs" role="group" aria-label="Separator style">
      <span class="sv__ind" id="sv-ind" aria-hidden="true"></span>
      <button class="sv__pill sv__pill--slash" type="button" aria-pressed="true">Slash</button>
      <button class="sv__pill sv__pill--caret" type="button" aria-pressed="false">Chevron</button>
      <button class="sv__pill sv__pill--dot" type="button" aria-pressed="false">Middle dot</button>
    </div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-base;
$easing: $ease-spring;
$color: $subject-blue;

@include stage($stage-paper);

.sv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-5;
  user-select: none;
  -webkit-user-select: none;
}

// 세 벌을 같은 그리드 칸에 겹친다 — 절대배치가 아니라 그리드라 부모 높이가 유지된다
.sv__stack { display: grid; }

.sv__list {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: $sp-2;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  font-size: clamp(11px, 3.2vw, 14px);
  line-height: 20px;
  font-weight: 600;
}
.sv__list.is-on { opacity: 1; pointer-events: auto; }
.sv__list li { display: inline-flex; align-items: center; gap: $sp-2; }
.sv__list a { color: $color; text-decoration: none; border-radius: $r-xs; }
.sv__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sv__list a:focus-visible { outline: 2px solid $color; outline-offset: 2px; }
.sv__cur { color: $subject-ink; font-weight: 800; }

// 구분자는 의사요소·장식 span 으로만 그린다 — 읽기 프로그램에는 안 들린다
.sv__list--slash li:not(:last-child)::after {
  content: "/";
  display: inline-flex;
  justify-content: center;
  width: 12px;
  color: rgba($subject-ink, .4);
}
.sv__list--dot li:not(:last-child)::after {
  content: "\00B7";
  display: inline-flex;
  justify-content: center;
  width: 12px;
  color: rgba($subject-ink, .4);
}
.sv__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  color: rgba($subject-ink, .4);
}

.sv__tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: $sp-2;
  padding: $sp-1;
  border-radius: $r-pill;
  // 트랙을 먹색으로 — 라벨이 늘 크림이라 인디케이터가 미끄러지는 동안에도 글자가 사라지지 않는다
  background: $subject-ink;
}
// 알약 폭 84px + gap 8px = 한 칸 92px (BD19: 알약은 flex 0 0 auto 고정 폭)
.sv__ind {
  --step: 92px;
  --i: 0;
  position: absolute;
  left: $sp-1;
  top: $sp-1;
  width: 84px;
  height: 28px;
  border-radius: $r-pill;
  background: $subject-blue-deep;
  transform: translateX(calc(var(--step) * var(--i)));
  transition: transform $duration $easing;
}
.sv__pill {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: $r-pill;
  color: rgba($subject-cream, .62);
  font-family: inherit;
  font-size: 12px;
  line-height: 28px;
  font-weight: 700;
  cursor: pointer;
}
.sv__pill[aria-pressed="true"] { color: $subject-cream; }
.sv__pill:focus-visible { outline: 2px solid $subject-cream; outline-offset: 2px; }

// ── 자동 루프: 인디케이터가 한 칸씩만 미끄러진다(2→3→2→1→2). 한 칸씩이라 어느 프레임을 잘라도
//    "두 알약 사이" 로 읽힌다 — 두 칸을 한 번에 건너뛰면 중간 프레임이 엉뚱한 알약에 주차한 것처럼 보인다.
//    도착한 프레임에서 구분자 벌을 steps(1, end) 로 컷 교체한다.
.sv.is-demo .sv__ind {
  animation-name: sv-ind;
  animation-duration: $dur-loop;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
}
@keyframes sv-ind {
  0%, 5%    { transform: translateX(var(--step)); }
  18%, 31%  { transform: translateX(calc(var(--step) * 2)); }
  44%, 52%  { transform: translateX(var(--step)); }
  65%, 75%  { transform: translateX(0); }
  88%, 100% { transform: translateX(var(--step)); }
}

.sv.is-demo .sv__list,
.sv.is-demo .sv__pill {
  animation-duration: $dur-loop;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
.sv.is-demo .sv__list--slash { animation-name: sv-slash; }
.sv.is-demo .sv__list--caret { animation-name: sv-caret; }
.sv.is-demo .sv__list--dot   { animation-name: sv-dot; }
// 컷은 인디케이터가 **출발하는** 순간에 — 진짜 클릭도 상태가 먼저 바뀌고 인디케이터가 따라간다.
// 도착 순간에 컷하면 $ease-spring 이 일찍 멈춰 보여서 프레임 대부분이 "딴 알약에 주차" 로 읽힌다.
@keyframes sv-slash { 0% { opacity: 0; } 52% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes sv-caret { 0% { opacity: 1; } 5% { opacity: 0; } 31% { opacity: 1; } 52% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes sv-dot   { 0% { opacity: 0; } 5% { opacity: 1; } 31%, 100% { opacity: 0; } }

.sv.is-demo .sv__pill--slash { animation-name: sv-lab-slash; }
.sv.is-demo .sv__pill--caret { animation-name: sv-lab-caret; }
.sv.is-demo .sv__pill--dot   { animation-name: sv-lab-dot; }
// 두 상태 다 크림이라(진하기만 다르다) 인디케이터가 지나가는 동안에도 글자가 읽힌다
@keyframes sv-lab-slash { 0% { color: rgba($subject-cream, .62); } 52% { color: $subject-cream; } 75%, 100% { color: rgba($subject-cream, .62); } }
@keyframes sv-lab-caret { 0% { color: $subject-cream; } 5% { color: rgba($subject-cream, .62); } 31% { color: $subject-cream; } 52% { color: rgba($subject-cream, .62); } 75%, 100% { color: $subject-cream; } }
@keyframes sv-lab-dot   { 0% { color: rgba($subject-cream, .62); } 5% { color: $subject-cream; } 31%, 100% { color: rgba($subject-cream, .62); } }

@media (max-width: 340px) {
  .sv { gap: $sp-4; }
  .sv__tabs { gap: $sp-1; }
  .sv__ind { --step: 76px; width: 72px; }
  .sv__pill { width: 72px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv.is-demo .sv__ind,
  .sv.is-demo .sv__list,
  .sv.is-demo .sv__pill { animation: none !important; }
  .sv.is-demo .sv__list--slash { opacity: 1; }
  .sv.is-demo .sv__pill--slash { color: $subject-cream; }
  .sv__ind { transition: none; }
}

@charset "UTF-8";
html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.sv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  user-select: none;
  -webkit-user-select: none;
}

.sv__stack {
  display: grid;
}

.sv__list {
  grid-area: 1/1;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  font-size: clamp(11px, 3.2vw, 14px);
  line-height: 20px;
  font-weight: 600;
}

.sv__list.is-on {
  opacity: 1;
  pointer-events: auto;
}

.sv__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sv__list a {
  color: #2f6df6;
  text-decoration: none;
  border-radius: 4px;
}

.sv__list a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sv__list a:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
}

.sv__cur {
  color: #17141a;
  font-weight: 800;
}

.sv__list--slash li:not(:last-child)::after {
  content: "/";
  display: inline-flex;
  justify-content: center;
  width: 12px;
  color: rgba(23, 20, 26, 0.4);
}

.sv__list--dot li:not(:last-child)::after {
  content: "·";
  display: inline-flex;
  justify-content: center;
  width: 12px;
  color: rgba(23, 20, 26, 0.4);
}

.sv__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  color: rgba(23, 20, 26, 0.4);
}

.sv__tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  background: #17141a;
}

.sv__ind {
  --step: 92px;
  --i: 0;
  position: absolute;
  left: 4px;
  top: 4px;
  width: 84px;
  height: 28px;
  border-radius: 999px;
  background: #0a4fe8;
  transform: translateX(calc(var(--step) * var(--i)));
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sv__pill {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 999px;
  color: rgba(255, 247, 230, 0.62);
  font-family: inherit;
  font-size: 12px;
  line-height: 28px;
  font-weight: 700;
  cursor: pointer;
}

.sv__pill[aria-pressed=true] {
  color: #fff7e6;
}

.sv__pill:focus-visible {
  outline: 2px solid #fff7e6;
  outline-offset: 2px;
}

.sv.is-demo .sv__ind {
  animation-name: sv-ind;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}

@keyframes sv-ind {
  0%, 5% {
    transform: translateX(var(--step));
  }
  18%, 31% {
    transform: translateX(calc(var(--step) * 2));
  }
  44%, 52% {
    transform: translateX(var(--step));
  }
  65%, 75% {
    transform: translateX(0);
  }
  88%, 100% {
    transform: translateX(var(--step));
  }
}
.sv.is-demo .sv__list,
.sv.is-demo .sv__pill {
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.sv.is-demo .sv__list--slash {
  animation-name: sv-slash;
}

.sv.is-demo .sv__list--caret {
  animation-name: sv-caret;
}

.sv.is-demo .sv__list--dot {
  animation-name: sv-dot;
}

@keyframes sv-slash {
  0% {
    opacity: 0;
  }
  52% {
    opacity: 1;
  }
  75%, 100% {
    opacity: 0;
  }
}
@keyframes sv-caret {
  0% {
    opacity: 1;
  }
  5% {
    opacity: 0;
  }
  31% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  75%, 100% {
    opacity: 1;
  }
}
@keyframes sv-dot {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  31%, 100% {
    opacity: 0;
  }
}
.sv.is-demo .sv__pill--slash {
  animation-name: sv-lab-slash;
}

.sv.is-demo .sv__pill--caret {
  animation-name: sv-lab-caret;
}

.sv.is-demo .sv__pill--dot {
  animation-name: sv-lab-dot;
}

@keyframes sv-lab-slash {
  0% {
    color: rgba(255, 247, 230, 0.62);
  }
  52% {
    color: #fff7e6;
  }
  75%, 100% {
    color: rgba(255, 247, 230, 0.62);
  }
}
@keyframes sv-lab-caret {
  0% {
    color: #fff7e6;
  }
  5% {
    color: rgba(255, 247, 230, 0.62);
  }
  31% {
    color: #fff7e6;
  }
  52% {
    color: rgba(255, 247, 230, 0.62);
  }
  75%, 100% {
    color: #fff7e6;
  }
}
@keyframes sv-lab-dot {
  0% {
    color: rgba(255, 247, 230, 0.62);
  }
  5% {
    color: #fff7e6;
  }
  31%, 100% {
    color: rgba(255, 247, 230, 0.62);
  }
}
@media (max-width: 340px) {
  .sv {
    gap: 16px;
  }
  .sv__tabs {
    gap: 4px;
  }
  .sv__ind {
    --step: 76px;
    width: 72px;
  }
  .sv__pill {
    width: 72px;
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv.is-demo .sv__ind,
  .sv.is-demo .sv__list,
  .sv.is-demo .sv__pill {
    animation: none !important;
  }
  .sv.is-demo .sv__list--slash {
    opacity: 1;
  }
  .sv.is-demo .sv__pill--slash {
    color: #fff7e6;
  }
  .sv__ind {
    transition: none;
  }
}

// 실동작: 알약을 누르면 .is-demo 를 떼고 그 구분자로 고정한다. 좌우 화살표로도 옮긴다.
var root = document.querySelector('.sv');
var ind = document.getElementById('sv-ind');
var pills = [].slice.call(document.querySelectorAll('.sv__pill'));
var lists = [].slice.call(document.querySelectorAll('.sv__list'));
function pick(i) {
  root.classList.remove('is-demo');
  ind.style.setProperty('--i', i);
  pills.forEach(function (p, n) { p.setAttribute('aria-pressed', n === i ? 'true' : 'false'); });
  lists.forEach(function (l, n) {
    var on = n === i;
    l.classList.toggle('is-on', on);
    l.setAttribute('aria-hidden', on ? 'false' : 'true');
    [].forEach.call(l.querySelectorAll('a'), function (a) { a.tabIndex = on ? 0 : -1; });
  });
}
pills.forEach(function (p, i) {
  p.addEventListener('click', function () { pick(i); });
  p.addEventListener('keydown', function (e) {
    if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
    e.preventDefault();
    var n = (i + (e.key === 'ArrowRight' ? 1 : pills.length - 1)) % pills.length;
    pills[n].focus({ preventScroll: true });
    pick(n);
  });
});

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./SeparatorVariants.module.scss";

export type SeparatorVariantsProps = {
  trail?: string[];
  duration?: number;
  easing?: string;
  color?: string;
};

type KeyEvt = { key: string; preventDefault(): void };
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string; "--i"?: number };

const CaretRight = () => (
  <svg viewBox="0 0 256 256" width="12" height="12" aria-hidden="true"><g fill="currentColor"><path d="m176 128l-80 80V48Z" opacity=".2"/><path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z"/></g></svg>
);

const KINDS = ["slash", "caret", "dot"];
const LABELS = ["Slash", "Chevron", "Middle dot"];

export default function SeparatorVariants({
  trail = ["Home", "Electronics", "Laptops", "13-inch gaming"],
  duration = 300,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: SeparatorVariantsProps) {
  const [at, setAt] = useState(0);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color, "--i": at };

  function onKey(e: KeyEvt, i: number) {
    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
    e.preventDefault();
    setAt((i + (e.key === "ArrowRight" ? 1 : LABELS.length - 1)) % LABELS.length);
  }

  return (
    <div className={styles.sv} style={vars}>
      <nav className={styles.stack} aria-label="Breadcrumb">
        {KINDS.map((kind, n) => (
          <ol
            key={kind}
            className={[styles.list, styles[kind], n === at ? styles.on : ""].join(" ")}
            aria-hidden={n !== at}
          >
            {trail.map((label, i) => (
              <li key={label}>
                {i === trail.length - 1
                  ? <span className={styles.cur} aria-current={n === at ? "page" : undefined}>{label}</span>
                  : <a href="#" tabIndex={n === at ? 0 : -1}>{label}</a>}
                {kind === "caret" && i < trail.length - 1 && (
                  <span className={styles.sep} aria-hidden="true"><CaretRight /></span>
                )}
              </li>
            ))}
          </ol>
        ))}
      </nav>
      <div className={styles.tabs} role="group" aria-label="Separator style">
        <span className={styles.ind} aria-hidden="true" />
        {LABELS.map((label, i) => (
          <button
            key={label}
            type="button"
            className={styles.pill}
            aria-pressed={i === at}
            onClick={(): void => setAt(i)}
            onKeyDown={(e: KeyEvt): void => onKey(e, i)}
          >
            {label}
          </button>
        ))}
      </div>
    </div>
  );
}