Popover.

<div class="ui-sample ui-popover" data-popover="true"><button class="btn btn--secondary" type="button" data-popover-trigger="true" aria-expanded="false" aria-controls="popover-0">Fuente</button><aside id="popover-0" hidden=""><strong>INE · Encuesta Nacional de Empleo</strong><p>mayo a julio de 2026 · 16 regiones</p><a href="#fuente">Abrir publicación</a></aside></div>

<div class="ui-sample ui-popover border border-slate-300 bg-white p-4 text-slate-950" data-popover="true"><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" data-popover-trigger="true" aria-expanded="false" aria-controls="popover-0">Fuente</button><aside class="grid gap-3" id="popover-0" hidden=""><strong>INE · Encuesta Nacional de Empleo</strong><p>mayo a julio de 2026 · 16 regiones</p><a class="underline underline-offset-4" href="#fuente">Abrir publicación</a></aside></div>

import type { MouseEventHandler } from "react";

export interface PopoverProps {
  /** Texto del botón que abre y cierra el panel. */
  triggerLabel?: string;
  /** Id del panel, referido por `aria-controls`. Usa uno distinto por popover en la página. */
  id?: string;
  /** Panel visible; el botón refleja el estado en `aria-expanded`. */
  open?: boolean;
  /** Título del panel. */
  title?: string;
  /** Texto breve bajo el título. */
  description?: string;
  /** Texto del enlace del panel; sin él o sin `href` no se muestra. */
  linkLabel?: string;
  /** Destino del enlace del panel. */
  href?: string;
  /** Se llama al pulsar el botón; recibe el evento para abrir o cerrar el panel. */
  onToggle?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Botón que abre un panel breve junto a él con información complementaria y un enlace, como la fuente de un dato.
 *
 * Con `open={false}` el panel queda en el DOM con `hidden`; la página alterna el estado con `onToggle` o con un script que lea `data-popover-trigger`. Sin título, texto ni enlace no se renderiza nada.
 *
 * @example <Popover id="fuente-empleo" title="INE · Encuesta Nacional de Empleo" description="mayo a julio de 2026 · 16 regiones" href="#fuente" />
 * @example <Popover id="fuente-empleo" open onToggle={alternar} />
 */
export function Popover({
  triggerLabel = "Fuente",
  id = "popover-0",
  open = false,
  title = "INE · Encuesta Nacional de Empleo",
  description = "mayo a julio de 2026 · 16 regiones",
  linkLabel = "Abrir publicación",
  href = "#fuente",
  onToggle,
  className,
}: PopoverProps) {
  const enlace = linkLabel && href ? <a href={href}>{linkLabel}</a> : null;
  if (!title && !description && !enlace) return null;
  return (
    <div className={["ui-popover", className].filter(Boolean).join(" ")} data-popover>
      <button className="btn btn--secondary" type="button" data-popover-trigger aria-expanded={open} aria-controls={id} onClick={onToggle}>{triggerLabel}</button>
      <aside id={id} hidden={!open}>
        {title ? <strong>{title}</strong> : null}
        {description ? <p>{description}</p> : null}
        {enlace}
      </aside>
    </div>
  );
}