Rule sweep list

Build "Rule sweep list" for my site using the Enrichr Library element at https://enrichr.dev/elements/rule-sweep-list.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/rule-sweep-list.json (markup, CSS, JavaScript, parameters).
Requirements: vanilla JavaScript and CSS, no new dependencies; keep the behaviour of the source unchanged; respect prefers-reduced-motion; work on touch screens; keep it accessible.

Settings:
- items: Work, Studio, Journal, Contact
- speed: 450
- color: #ffffff
- line: #c6f26b

Verify: reduced motion shows no movement, it works at 375px wide, there are no console errors, and scrolling stays smooth.

<ul class="ef-rule"></ul>

.ef-rule { list-style: none; margin: 0; padding: 0; }
.ef-rule__row { position: relative; display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; font-size: clamp(1.3rem, 3.4vw, 2.2rem); font-weight: 600; cursor: pointer; outline: none; }
.ef-rule__row::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: 0.22; }
.ef-rule__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ef-line, currentColor); transform: scaleX(0); transform-origin: right center; transition: transform var(--ef-dur, 450ms) cubic-bezier(0.7, 0, 0.2, 1); }
.ef-rule__row:hover::after, .ef-rule__row:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.ef-rule__n { font-size: 0.5em; opacity: 0.6; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ef-rule__row::after { transition: none; } }

// Rule sweep list: a line sweeps across a row on hover or keyboard focus, and exits the other side.
// mount(root, { items (comma separated), color, line (colour of the sweep), speed (ms) })
function mount(root, o) {
  var ul = root.querySelector(".ef-rule");
  var opts = {};
  function render() {
    ul.textContent = "";
    ul.style.color = opts.color;
    ul.style.setProperty("--ef-line", opts.line);
    ul.style.setProperty("--ef-dur", opts.speed + "ms");
    opts.items.split(",").map(function (s) { return s.trim(); }).filter(Boolean).forEach(function (label, i) {
      var li = document.createElement("li");
      li.className = "ef-rule__row";
      li.tabIndex = 0;
      var n = document.createElement("span");
      n.className = "ef-rule__n";
      n.textContent = String(i + 1).padStart(2, "0");
      var t = document.createElement("span");
      t.textContent = label;
      li.appendChild(n);
      li.appendChild(t);
      ul.appendChild(li);
    });
  }
  function update(next) {
    opts = Object.assign({ items: "Work, Studio, Journal, Contact", color: "#ffffff", line: "#c6f26b", speed: 450 }, opts, next || {});
    render();
  }
  update(o);
  return { update: update, destroy: function () {} };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"items":"Work, Studio, Journal, Contact","speed":450,"color":"#ffffff","line":"#c6f26b"});