続きを読む

<%# Markup for the read-more demo.
    The body is visually truncated with a CSS line clamp, and a toggle switches to the
    full text. The toggle carries both wordings: the library shows the half that belongs
    to the current state and hides the other. It also syncs aria-expanded / data-state and
    hides the whole toggle when there is no overflow (so no needless button appears).
    The clamp itself lives in demo.css. %>
<div class="read-more" data-controller="stimeo--read-more">
  <p
    class="read-more__content"
    id="read-more-demo-content"
    data-state="collapsed"
    data-stimeo--read-more-target="content">
    <%= t("components.read_more.demo.body") %>
  </p>
  <button
    class="read-more__trigger"
    type="button"
    aria-expanded="false"
    aria-controls="read-more-demo-content"
    hidden
    data-stimeo--read-more-target="trigger"
    data-action="click->stimeo--read-more#toggle">
    <span data-stimeo--read-more-target="collapsedLabel">
      <%= t("components.read_more.demo.trigger") %>
    </span>
    <span data-stimeo--read-more-target="expandedLabel" hidden>
      <%= t("components.read_more.demo.trigger_expanded") %>
    </span>
  </button>
</div>

<%# 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 read-more demo.
 * The visual truncation (line clamp) is applied only when data-state="collapsed".
 * The library toggles the trigger's visibility (hidden) based on overflow detection, and
 * swaps the two label halves inside it, so neither the trigger's wording nor which half
 * shows is styled here.
 */

.read-more {
  max-width: 32rem;
}

.read-more__content {
  margin: 0 0 0.5rem;
  line-height: 1.6;
}

/* Clamp to 3 lines while collapsed. Line-based, so it follows text zoom (WCAG 1.4.4). */
.read-more__content[data-state="collapsed"] {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.read-more__content[data-state="expanded"] {
  -webkit-line-clamp: none;
  line-clamp: none;
}

.read-more__trigger {
  padding: 0.25rem 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent-700);
  cursor: pointer;
}

// 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--read-more']");

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