続きを読む

<%# 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 library syncs aria-expanded / data-state and hides the 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">
    <%= t("components.read_more.demo.trigger") %>
  </button>
</div>

/*
 * Presentation-only styles for the read-more demo.
 * The visual truncation (line clamp) is applied only when data-state="collapsed".
 * The library toggles the toggle's visibility (hidden) based on overflow detection.
 */

.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;
}

.read-more__trigger::after {
  content: "";
}

.read-more__trigger[aria-expanded="true"]::before {
  content: "▲ ";
}

.read-more__trigger[aria-expanded="false"]::before {
  content: "▼ ";
}