Hover Card

<%# Markup for the hover_card demo.
    Hover/focus on the link opens a rich supplementary card after a delay. The card
    has no role="dialog" (it's purely supplementary), and its contents are assumed to
    be reachable from the trigger's target too. The open/close delay, the hoverable
    bridge, and Escape-to-dismiss are the library's. %>
<span class="hover-card" data-controller="stimeo--hover-card">
  <a
    class="hover-card__trigger"
    href="#jane"
    data-stimeo--hover-card-target="trigger"
    aria-expanded="false"
    aria-controls="hover-card-panel"
    data-action="
      mouseenter->stimeo--hover-card#open
      mouseleave->stimeo--hover-card#close
      focusin->stimeo--hover-card#open
      focusout->stimeo--hover-card#close
      keydown->stimeo--hover-card#onKeydown">
    <%= t("components.hover_card.demo.trigger") %>
  </a>

  <%# The card has no role="dialog" (supplementary display, not an interrupting dialog). %>
  <div
    class="hover-card__panel"
    id="hover-card-panel"
    data-stimeo--hover-card-target="card"
    data-action="
      mouseenter->stimeo--hover-card#open
      mouseleave->stimeo--hover-card#close"
    hidden>
    <p class="hover-card__name"><%= t("components.hover_card.demo.name") %></p>
    <p class="hover-card__role"><%= t("components.hover_card.demo.role") %></p>
    <a class="hover-card__link" href="#follow"><%= t("components.hover_card.demo.follow") %></a>
  </div>
</span>

/*
 * Presentation-only styles for the hover_card demo.
 * The library opens/closes the card by toggling its hidden attribute. Placement
 * is static — the consumer's CSS responsibility.
 */

.hover-card {
  position: relative;
  display: inline-block;
}

.hover-card__trigger {
  color: var(--accent, var(--color-primary));
  text-decoration: underline;
}

.hover-card__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 10;
  width: 18rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background: var(--surface, var(--surface-card));
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.12);
}

/* Setting display: flex overrides the hidden attribute's default display:none, so
   re-declare display:none while closed to honor the library's hidden toggle. */
.hover-card__panel[hidden] {
  display: none;
}

.hover-card__name {
  font-weight: 600;
}

.hover-card__role {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.hover-card__link {
  margin-top: 0.5rem;
  color: var(--accent, var(--color-primary));
}

// hover_card opt-in positioning demo (consumer-side JS).
//
// The core controller (stimeo--hover-card) only handles open/close, delay, and
// dismiss. Viewport-edge flip/shift is optionally connected via the opt-in
// stimeo-ui/positioning module. We watch the card's hidden and, while open, track
// the trigger's coordinates.
import { attachPositioning } from 'stimeo-ui/positioning';

document.querySelectorAll('[data-controller~="stimeo--hover-card"]').forEach((root) => {
  const trigger = root.querySelector('[data-stimeo--hover-card-target="trigger"]');
  const card = root.querySelector('[data-stimeo--hover-card-target="card"]');
  if (!trigger || !card) return;

  let detach = null;
  const sync = () => {
    if (!card.hidden && !detach) {
      detach = attachPositioning(trigger, card, {
        placement: 'bottom-start',
        offset: 8,
        padding: 8,
      });
    } else if (card.hidden && detach) {
      detach();
      detach = null;
      card.style.position = card.style.left = card.style.top = '';
    }
  };

  new MutationObserver(sync).observe(card, { attributes: true, attributeFilter: ['hidden'] });
  sync();
});