Ink Fill

export function inkFill(el) {
  const _reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
  const _duration = _reducedMotion ? 0.01 : 0.4

  const text = el.textContent ?? ''
  el.setAttribute('aria-label', text)
  el.style.position = 'relative'
  const fill = document.createElement('span')
  fill.textContent = text
  fill.className = 'k-ink-fill'
  fill.setAttribute('aria-hidden', 'true')
  el.append(fill)
  fill.style.clipPath = 'inset(0 100% 0 0)'
  const easing = 'linear(0.0000,0.0987,0.1899,0.2740,0.3513,0.4224,0.4874,0.5467,0.6008,0.6499,0.6943,0.7343,0.7703,0.8025,0.8311,0.8566,0.8790,0.8987,0.9159,0.9308,0.9437,0.9546,0.9639,0.9717,0.9781,0.9834,0.9877,0.9910,0.9937,0.9957,0.9972,0.9982,0.9990,0.9994,0.9997,0.9999,1.0000,1.0000,1.0000,1.0000)'
  let current = null
  const animateTo = (rightInset) => {
    const from = getComputedStyle(fill).clipPath
    current?.cancel()
    current = fill.animate([{ clipPath: from }, { clipPath: `inset(0 ${rightInset}% 0 0)` }], {
      duration: _duration * 1000,
      easing,
      fill: 'forwards',
    })
  }
  const enter = () => animateTo(0)
  const leave = () => animateTo(100)
  const ons = [['pointerenter', enter], ['pointerleave', leave], ['focus', enter], ['blur', leave]]
  ons.forEach(([e, fn]) => el.addEventListener(e, fn))
  return () => {
    current?.cancel()
    ons.forEach(([e, fn]) => el.removeEventListener(e, fn))
    fill.remove()
    el.style.position = ''
  }
}

/* CSS */
.k-ink-fill {
  position: absolute;
  inset: 0;
  color: var(--accent);
}