UI Components Easy

Delivery — Package / Shipment Row

A reusable delivery shipment list row that packs a tracking number, origin-to-destination route, carrier badge, animated status pill, ETA, and a thin progress mini-bar into one tidy, scannable line. Each row expands to reveal a vertical tracking-history timeline with done, current, and failed states. The demo lists eight fictional packages across in-transit, out-for-delivery, delivered, and exception statuses, with status filters, a toast helper, and a mobile-first responsive layout.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

:root {
  --brand: #ff5a2c;
  --brand-d: #e0461d;
  --ink: #16181d;
  --ink-2: #3b3f4a;
  --muted: #71757f;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --line: rgba(22, 24, 29, 0.1);
  --ok: #1f9d62;
  --warn: #e89422;
  --danger: #d4493e;
  --track: #5b8def;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --sh-1: 0 1px 2px rgba(22, 24, 29, 0.05), 0 2px 8px rgba(22, 24, 29, 0.04);
  --sh-2: 0 6px 24px rgba(22, 24, 29, 0.1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 18px 64px;
}

/* ---------- Header ---------- */
.page-head { margin-bottom: 18px; }

.head-left {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.logo {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand), var(--brand-d));
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 90, 44, 0.35);
}

h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sub {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.chip:hover { border-color: rgba(22, 24, 29, 0.22); }
.chip:active { transform: scale(.97); }
.chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.chip .cnt {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(22, 24, 29, 0.08);
  color: var(--ink-2);
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
}
.chip.is-active .cnt { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ---------- List ---------- */
.ship-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ship {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow .18s, border-color .18s;
}
.ship:hover { box-shadow: var(--sh-2); }
.ship.is-open { border-color: rgba(91, 141, 239, 0.5); }

/* trigger row */
.ship-head {
  width: 100%;
  text-align: left;
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 14px;
  align-items: center;
}
.ship-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.carrier {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: -0.02em;
  flex: none;
}

.mid { min-width: 0; }

.row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.track-no {
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.route svg { color: var(--muted); flex: none; }
.route .city { font-weight: 600; }

/* status pill */
.pill {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill.transit { color: var(--track); background: rgba(91, 141, 239, 0.12); }
.pill.outfordelivery { color: var(--warn); background: rgba(232, 148, 34, 0.14); }
.pill.delivered { color: var(--ok); background: rgba(31, 157, 98, 0.12); }
.pill.failed { color: var(--danger); background: rgba(212, 73, 62, 0.12); }
.pill.delivered::before,
.pill.failed::before { animation: none; }
.pill.transit::before,
.pill.outfordelivery::before { animation: blip 1.6s ease-in-out infinite; }
@keyframes blip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.7); }
}

/* right column */
.right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}

.eta-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.eta-val {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.eta-val.delivered { color: var(--ok); }
.eta-val.failed { color: var(--danger); }

.chev {
  color: var(--muted);
  transition: transform .22s ease;
}
.ship.is-open .chev { transform: rotate(180deg); }

/* progress bar */
.bar-wrap {
  padding: 0 16px 14px;
  margin-top: -4px;
}
.bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(22, 24, 29, 0.08);
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  width: 0;
  background: var(--track);
  transition: width .9s cubic-bezier(.2,.7,.2,1);
}
.ship[data-status="delivered"] .bar > span { background: var(--ok); }
.ship[data-status="outfordelivery"] .bar > span { background: var(--warn); }
.ship[data-status="failed"] .bar > span {
  background: repeating-linear-gradient(45deg, var(--danger) 0 6px, #b53a31 6px 12px);
}

/* ---------- History panel ---------- */
.history {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.ship.is-open .history { grid-template-rows: 1fr; }
.history > .inner {
  overflow: hidden;
  min-height: 0;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 6px 16px 18px 16px;
  border-top: 1px solid var(--line);
}

.tl-item {
  position: relative;
  padding: 9px 0 9px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
}
.tl-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--muted);
  z-index: 1;
}
.tl-item::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 22px;
  bottom: -9px;
  width: 2px;
  background: var(--line);
}
.tl-item:last-child::after { display: none; }
.tl-item.done::before { background: var(--ok); border-color: var(--ok); }
.tl-item.now::before { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255, 90, 44, 0.18); }
.tl-item.fail::before { background: var(--danger); border-color: var(--danger); }

.tl-text { font-size: 0.85rem; font-weight: 600; color: var(--ink); flex: 1 1 auto; }
.tl-place { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.tl-time {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  flex: 1 1 100%;
}

.empty {
  text-align: center;
  color: var(--muted);
  font-weight: 500;
  padding: 40px 0;
}
.foot-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 22px;
}

/* ---------- Toast ---------- */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  width: max-content;
  max-width: 90vw;
}
.toast {
  background: var(--ink);
  color: #fff;
  font-size: 0.83rem;
  font-weight: 600;
  padding: 10px 15px;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastIn .25s ease;
}
.toast .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.toast.out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .wrap { padding: 20px 12px 56px; }
  h1 { font-size: 1.28rem; }
  .ship-head { grid-template-columns: 34px 1fr; row-gap: 8px; }
  .carrier { width: 34px; height: 34px; }
  .right {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 2px;
  }
  .right .eta { display: flex; flex-direction: column; }
  .chev { order: 3; }
  .route { font-size: 0.76rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

(function () {
  "use strict";

  // ---- Fictional shipment data ----
  var SHIPMENTS = [
    {
      id: "VF-7741-0Q",
      carrier: "QX", carrierColor: "#5b8def",
      from: "Lyon, FR", to: "Geneva, CH",
      status: "transit", progress: 58,
      etaLabel: "Arrives", eta: "Thu, 9:40 AM",
      history: [
        { t: "Label created", p: "Lyon hub", time: "Jun 14 · 08:12", s: "done" },
        { t: "Departed origin facility", p: "Lyon hub", time: "Jun 14 · 19:40", s: "done" },
        { t: "In transit to destination", p: "A40 corridor", time: "Jun 15 · 06:25", s: "now" },
        { t: "Out for delivery", p: "Geneva", time: "Pending", s: "pending" }
      ]
    },
    {
      id: "VF-3329-LM",
      carrier: "QX", carrierColor: "#ff5a2c",
      from: "Milan, IT", to: "Zürich, CH",
      status: "outfordelivery", progress: 88,
      etaLabel: "By", eta: "Today, 2:15 PM",
      history: [
        { t: "Departed origin facility", p: "Milan hub", time: "Jun 15 · 21:05", s: "done" },
        { t: "Arrived at delivery depot", p: "Zürich-West", time: "Jun 16 · 05:48", s: "done" },
        { t: "Out for delivery", p: "Driver: M. Keller", time: "Jun 16 · 08:30", s: "now" },
        { t: "Delivered", p: "Zürich", time: "Pending", s: "pending" }
      ]
    },
    {
      id: "VF-9012-PT",
      carrier: "BT", carrierColor: "#1f9d62",
      from: "Berlin, DE", to: "Vienna, AT",
      status: "delivered", progress: 100,
      etaLabel: "Delivered", eta: "Mon, 11:02 AM",
      history: [
        { t: "Departed origin facility", p: "Berlin hub", time: "Jun 12 · 18:20", s: "done" },
        { t: "Customs cleared", p: "Passau border", time: "Jun 13 · 04:10", s: "done" },
        { t: "Out for delivery", p: "Vienna", time: "Jun 14 · 09:15", s: "done" },
        { t: "Delivered — signed by R. Huber", p: "Vienna 1010", time: "Jun 14 · 11:02", s: "done" }
      ]
    },
    {
      id: "VF-5567-AX",
      carrier: "BT", carrierColor: "#d4493e",
      from: "Hamburg, DE", to: "Oslo, NO",
      status: "failed", progress: 72,
      etaLabel: "Exception", eta: "Address issue",
      history: [
        { t: "Departed origin facility", p: "Hamburg hub", time: "Jun 13 · 22:40", s: "done" },
        { t: "Arrived at delivery depot", p: "Oslo-Sør", time: "Jun 15 · 07:11", s: "done" },
        { t: "Delivery attempt failed", p: "Recipient unavailable", time: "Jun 16 · 13:50", s: "fail" },
        { t: "Awaiting new instructions", p: "Held at depot", time: "Pending", s: "pending" }
      ]
    },
    {
      id: "VF-1184-CK",
      carrier: "QX", carrierColor: "#5b8def",
      from: "Madrid, ES", to: "Lisbon, PT",
      status: "transit", progress: 34,
      etaLabel: "Arrives", eta: "Fri, 1:00 PM",
      history: [
        { t: "Label created", p: "Madrid hub", time: "Jun 16 · 07:00", s: "done" },
        { t: "Departed origin facility", p: "Madrid hub", time: "Jun 16 · 14:30", s: "now" },
        { t: "In transit to destination", p: "A-5 motorway", time: "Pending", s: "pending" },
        { t: "Out for delivery", p: "Lisbon", time: "Pending", s: "pending" }
      ]
    },
    {
      id: "VF-6620-WD",
      carrier: "BT", carrierColor: "#e89422",
      from: "Rotterdam, NL", to: "Antwerp, BE",
      status: "outfordelivery", progress: 91,
      etaLabel: "By", eta: "Today, 5:40 PM",
      history: [
        { t: "Arrived at delivery depot", p: "Antwerp-Noord", time: "Jun 16 · 06:00", s: "done" },
        { t: "Loaded on delivery van", p: "Route 12", time: "Jun 16 · 09:20", s: "done" },
        { t: "Out for delivery", p: "Driver: L. Peeters", time: "Jun 16 · 10:05", s: "now" },
        { t: "Delivered", p: "Antwerp", time: "Pending", s: "pending" }
      ]
    },
    {
      id: "VF-4408-RN",
      carrier: "QX", carrierColor: "#1f9d62",
      from: "Copenhagen, DK", to: "Malmö, SE",
      status: "delivered", progress: 100,
      etaLabel: "Delivered", eta: "Tue, 3:48 PM",
      history: [
        { t: "Departed origin facility", p: "Copenhagen hub", time: "Jun 13 · 11:00", s: "done" },
        { t: "Crossed Øresund bridge", p: "DK→SE", time: "Jun 13 · 13:25", s: "done" },
        { t: "Out for delivery", p: "Malmö", time: "Jun 13 · 14:40", s: "done" },
        { t: "Delivered — left at reception", p: "Malmö 211", time: "Jun 13 · 15:48", s: "done" }
      ]
    },
    {
      id: "VF-7793-JE",
      carrier: "BT", carrierColor: "#5b8def",
      from: "Warsaw, PL", to: "Prague, CZ",
      status: "transit", progress: 47,
      etaLabel: "Arrives", eta: "Sat, 10:20 AM",
      history: [
        { t: "Departed origin facility", p: "Warsaw hub", time: "Jun 15 · 20:10", s: "done" },
        { t: "Sorting at regional center", p: "Katowice", time: "Jun 16 · 03:30", s: "done" },
        { t: "In transit to destination", p: "D1 motorway", time: "Jun 16 · 09:00", s: "now" },
        { t: "Out for delivery", p: "Prague", time: "Pending", s: "pending" }
      ]
    }
  ];

  var STATUS_LABEL = {
    transit: "In transit",
    outfordelivery: "Out for delivery",
    delivered: "Delivered",
    failed: "Exception"
  };
  // mapping for filter buckets
  var FILTER_BUCKET = {
    transit: "transit",
    outfordelivery: "transit",
    delivered: "delivered",
    failed: "failed"
  };

  var ARROW_SVG = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>';
  var CHEV_SVG = '<svg class="chev" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>';

  var list = document.getElementById("shipList");
  var emptyState = document.getElementById("emptyState");
  var toastHost = document.getElementById("toastHost");

  function esc(s) {
    return String(s).replace(/[&<>"]/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c];
    });
  }

  function buildRow(d, i) {
    var li = document.createElement("li");
    li.className = "ship";
    li.dataset.status = d.status;
    li.dataset.bucket = FILTER_BUCKET[d.status];

    var etaClass = d.status === "delivered" ? "delivered" : d.status === "failed" ? "failed" : "";
    var panelId = "hist-" + i;

    var historyHtml = d.history.map(function (h) {
      var cls = h.s === "done" ? "done" : h.s === "now" ? "now" : h.s === "fail" ? "fail" : "";
      return (
        '<li class="tl-item ' + cls + '">' +
          '<span class="tl-text">' + esc(h.t) + '</span>' +
          '<span class="tl-place">' + esc(h.p) + '</span>' +
          '<span class="tl-time">' + esc(h.time) + '</span>' +
        "</li>"
      );
    }).join("");

    li.innerHTML =
      '<button class="ship-head" type="button" aria-expanded="false" aria-controls="' + panelId + '">' +
        '<span class="carrier" style="background:' + d.carrierColor + '" aria-hidden="true">' + esc(d.carrier) + '</span>' +
        '<span class="mid">' +
          '<span class="row-top">' +
            '<span class="track-no">' + esc(d.id) + '</span>' +
            '<span class="pill ' + d.status + '">' + STATUS_LABEL[d.status] + '</span>' +
          "</span>" +
          '<span class="route"><span class="city">' + esc(d.from) + '</span>' + ARROW_SVG + '<span class="city">' + esc(d.to) + '</span></span>' +
        "</span>" +
        '<span class="right">' +
          '<span class="eta"><span class="eta-label">' + esc(d.etaLabel) + '</span><span class="eta-val ' + etaClass + '">' + esc(d.eta) + '</span></span>' +
          CHEV_SVG +
        "</span>" +
      "</button>" +
      '<div class="bar-wrap"><div class="bar"><span data-progress="' + d.progress + '"></span></div></div>' +
      '<div class="history" id="' + panelId + '"><div class="inner">' +
        '<ul class="timeline">' + historyHtml + "</ul>" +
      "</div></div>";

    return li;
  }

  function render() {
    var frag = document.createDocumentFragment();
    SHIPMENTS.forEach(function (d, i) { frag.appendChild(buildRow(d, i)); });
    list.appendChild(frag);

    // animate progress bars in
    requestAnimationFrame(function () {
      list.querySelectorAll(".bar > span").forEach(function (el) {
        el.style.width = el.getAttribute("data-progress") + "%";
      });
    });
  }

  // ---- Expand / collapse ----
  list.addEventListener("click", function (e) {
    var btn = e.target.closest(".ship-head");
    if (!btn) return;
    var ship = btn.closest(".ship");
    var open = ship.classList.toggle("is-open");
    btn.setAttribute("aria-expanded", String(open));
    if (open) {
      var id = ship.querySelector(".track-no").textContent;
      toast("Tracking history for " + id);
    }
  });

  // keyboard: Enter/Space handled natively by <button>

  // ---- Filters ----
  var chips = document.querySelectorAll(".chip");
  function setCounts() {
    var counts = { all: SHIPMENTS.length, transit: 0, delivered: 0, failed: 0 };
    SHIPMENTS.forEach(function (d) { counts[FILTER_BUCKET[d.status]]++; });
    document.querySelectorAll(".cnt").forEach(function (el) {
      el.textContent = counts[el.getAttribute("data-cnt")];
    });
  }

  function applyFilter(filter) {
    var visible = 0;
    list.querySelectorAll(".ship").forEach(function (ship) {
      var show = filter === "all" || ship.dataset.bucket === filter;
      ship.hidden = !show;
      if (show) visible++;
    });
    emptyState.hidden = visible !== 0;
  }

  chips.forEach(function (chip) {
    chip.addEventListener("click", function () {
      chips.forEach(function (c) {
        c.classList.remove("is-active");
        c.setAttribute("aria-selected", "false");
      });
      chip.classList.add("is-active");
      chip.setAttribute("aria-selected", "true");
      applyFilter(chip.getAttribute("data-filter"));
    });
  });

  // ---- Toast helper ----
  var toastTimer;
  function toast(msg) {
    var t = document.createElement("div");
    t.className = "toast";
    t.innerHTML = '<span class="dot"></span><span></span>';
    t.lastChild.textContent = msg;
    toastHost.appendChild(t);
    clearTimeout(toastTimer);
    setTimeout(function () {
      t.classList.add("out");
      t.addEventListener("animationend", function () { t.remove(); });
    }, 2400);
  }

  // ---- Init ----
  render();
  setCounts();
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Shipment Tracker — Package Rows</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="wrap">
    <header class="page-head">
      <div class="head-left">
        <div class="logo" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/>
            <path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
          </svg>
        </div>
        <div>
          <h1>Active Shipments</h1>
          <p class="sub">Volta Freight · 8 packages in transit network</p>
        </div>
      </div>
      <div class="filters" role="tablist" aria-label="Filter shipments by status">
        <button class="chip is-active" role="tab" aria-selected="true" data-filter="all">All <span class="cnt" data-cnt="all">8</span></button>
        <button class="chip" role="tab" aria-selected="false" data-filter="transit">In transit <span class="cnt" data-cnt="transit">0</span></button>
        <button class="chip" role="tab" aria-selected="false" data-filter="delivered">Delivered <span class="cnt" data-cnt="delivered">0</span></button>
        <button class="chip" role="tab" aria-selected="false" data-filter="failed">Exception <span class="cnt" data-cnt="failed">0</span></button>
      </div>
    </header>

    <main>
      <ul class="ship-list" id="shipList" aria-label="Shipment list"></ul>
      <p class="empty" id="emptyState" hidden>No shipments match this filter.</p>
    </main>

    <p class="foot-note">Tap a row to reveal its tracking history.</p>
  </div>

  <div class="toast-host" id="toastHost" aria-live="polite" aria-atomic="true"></div>
  <script src="script.js"></script>
</body>
</html>

Package / Shipment Row

A compact, list-ready shipment row for delivery and logistics dashboards. Each row leads with a colored carrier badge, then stacks the tracking number, a live status pill, and the origin → destination route, while the right edge carries a clear ETA block. A thin progress mini-bar underneath fills proportionally to how far the parcel has traveled — blue while in transit, amber when out for delivery, green once delivered, and a striped red for exceptions.

Click or tap any row to expand a vertical tracking-history timeline. The timeline marks each scan event as completed, current (a pulsing brand dot), or failed, with place and timestamp on every entry. Status pills for in-transit and out-for-delivery breathe with a subtle blip animation so active shipments stand out at a glance.

The demo seeds eight fictional Volta Freight packages spanning every state, plus a filter bar that buckets shipments into in-transit, delivered, and exception groups with live counts and an empty state. Everything is vanilla JS — semantic buttons for keyboard access, aria-expanded/aria-controls wiring, a small toast() helper, and a layout that collapses gracefully down to a 360px driver screen.

Illustrative UI only — fictional brand, not a real delivery service.