Source Panel

Displays supporting sources.

html

<details class="sp" style="--accent:#A8E6C1;" open>
  <summary class="sp__summary">Sources (3)</summary>
  <ul class="sp__list">
    <li class="sp__item">
      <span class="sp__dot" aria-hidden="true"></span>
      <span class="sp__title">Quarterly infrastructure report</span>
      <span class="sp__domain">internal-reports.example</span>
    </li>
    <li class="sp__item">
      <span class="sp__dot" aria-hidden="true"></span>
      <span class="sp__title">API rate limit changelog</span>
      <span class="sp__domain">docs.example.com</span>
    </li>
    <li class="sp__item">
      <span class="sp__dot" aria-hidden="true"></span>
      <span class="sp__title">Support ticket #4821</span>
      <span class="sp__domain">support.example.com</span>
    </li>
  </ul>
</details>
<style>
.sp { font: 14px/1.5 system-ui, sans-serif; max-width: 420px; border: 1.5px solid #24143026; border-radius: 10px;
  padding: 4px 14px; background: #FAF7F2; color: #241430; }
.sp__summary { cursor: pointer; padding: 10px 0; font-weight: 600; list-style: none; }
.sp__summary::-webkit-details-marker { display: none; }
.sp__summary::before { content: "▸"; display: inline-block; margin-right: 6px; color: var(--accent); }
.sp[open] .sp__summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .sp__summary::before { transition: transform .15s ease; }
}
.sp__list { list-style: none; margin: 0; padding: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.sp__item { display: flex; align-items: baseline; gap: 8px; }
.sp__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); align-self: center; }
.sp__title { flex: 1; min-width: 0; }
.sp__domain { flex: none; font-size: 12px; color: #24143080; }
</style>

tailwind

<details class="sp-tw max-w-md rounded-[10px] border-[1.5px] border-[#24143026] px-3.5 bg-[#FAF7F2] text-[#241430] font-sans" style="--accent:#A8E6C1;" open>
  <summary class="sp-tw__summary cursor-pointer py-2.5 font-semibold list-none">Sources (3)</summary>
  <ul class="list-none m-0 p-0 pb-2.5 flex flex-col gap-2">
    <li class="flex items-baseline gap-2">
      <span aria-hidden="true" class="flex-none w-1.5 h-1.5 rounded-full self-center" style="background:#A8E6C1"></span>
      <span class="flex-1 min-w-0">Quarterly infrastructure report</span>
      <span class="flex-none text-xs text-[#241430]/50">internal-reports.example</span>
    </li>
    <li class="flex items-baseline gap-2">
      <span aria-hidden="true" class="flex-none w-1.5 h-1.5 rounded-full self-center" style="background:#A8E6C1"></span>
      <span class="flex-1 min-w-0">API rate limit changelog</span>
      <span class="flex-none text-xs text-[#241430]/50">docs.example.com</span>
    </li>
    <li class="flex items-baseline gap-2">
      <span aria-hidden="true" class="flex-none w-1.5 h-1.5 rounded-full self-center" style="background:#A8E6C1"></span>
      <span class="flex-1 min-w-0">Support ticket #4821</span>
      <span class="flex-none text-xs text-[#241430]/50">support.example.com</span>
    </li>
  </ul>
</details>
<style>
.sp-tw__summary::-webkit-details-marker { display: none; }
.sp-tw__summary::before { content: "▸"; display: inline-block; margin-right: 6px; color: var(--accent); }
.sp-tw[open] .sp-tw__summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .sp-tw__summary::before { transition: transform .15s ease; }
}
</style>

react

export function SourcePanel({
  primarySourceTitle = "Quarterly infrastructure report",
  accent = "#A8E6C1",
  collapsed = false,
  showDomains = true,
}) {
  const sources = [
    { title: primarySourceTitle, domain: "internal-reports.example" },
    { title: "API rate limit changelog", domain: "docs.example.com" },
    { title: "Support ticket #4821", domain: "support.example.com" },
  ];
  return (
    <details open={!collapsed} style={{ maxWidth: 420, border: "1.5px solid #24143026", borderRadius: 10,
      padding: "4px 14px", background: "#FAF7F2", color: "#241430", fontFamily: "system-ui, sans-serif", fontSize: 14 }}>
      <summary style={{ cursor: "pointer", padding: "10px 0", fontWeight: 600, listStyle: "none" }}>
        Sources (3)
      </summary>
      <ul style={{ listStyle: "none", margin: 0, padding: "0 0 10px", display: "flex", flexDirection: "column", gap: 8 }}>
        {sources.map((s) => (
          <li key={s.title} style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <span aria-hidden="true" style={{ flex: "none", width: 6, height: 6, borderRadius: "50%", background: accent, alignSelf: "center" }} />
            <span style={{ flex: 1, minWidth: 0 }}>{s.title}</span>
            {showDomains && <span style={{ flex: "none", fontSize: 12, color: "#24143080" }}>{s.domain}</span>}
          </li>
        ))}
      </ul>
    </details>
  );
}