ホバーカード

<%# 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">
    <%= 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
      focusin->stimeo--hover-card#open
      focusout->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>

<%# Readout: what the component just reported. Purely visual — the component
    already announces what a screen reader needs, so this line is aria-hidden to
    keep it from being read twice. The value is a code fragment (API identifiers
    and values), so only the label is translated. %>
<p class="demo-readout" aria-hidden="true">
  <span><%= t("catalog.readout.events") %></span>
  <span class="demo-readout__value" data-readout>—</span>
</p>

/*
 * 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;
}

/* The theme-aware accent *text* token: the raw brand accent measures ~2.9:1 on the
   light canvas, under the 4.5:1 floor. It resolves back to the brand value in dark. */
.hover-card__trigger {
  color: var(--accent-700);
  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-700);
}

// 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();
});

// Every move of the open state is reported, with a `reason` saying what drove it
// — a trigger, Escape, a click outside, or a call from your own code. A real app
// subscribes to mirror the state elsewhere or to send an analytics event; this
// demo writes the event name and its reason into the readout so both are visible
// while you interact. `reason: "api"` is the one to watch for: a close you asked
// for comes back to your own listener.
// The page chrome uses some of these controllers too (the nav, the tab strip),
// so everything below is scoped to the demo itself.
const demoStage = document.querySelector(".demo-stage") ?? document;
const stateReadout = demoStage.querySelector("[data-readout]");
const stateRoot = demoStage.querySelector("[data-controller~='stimeo--hover-card']");

for (const name of ["open", "close"]) {
  stateRoot?.addEventListener(`stimeo--hover-card:${name}`, (event) => {
    const reason = event.detail?.reason;
    if (stateReadout) {
      stateReadout.textContent = reason
        ? `stimeo--hover-card:${name} · reason: ${reason}`
        : `stimeo--hover-card:${name}`;
    }
  });
}