ラジオグループ

<%# Markup for the radio-group (APG Radio Group) demo.
    A custom card-style radio. Single selection is shown via aria-checked and the single
    tab stop via roving tabindex. Arrows move the selection (focus = selection). The
    selected value is reflected into a hidden field; the look is the consumer's CSS. %>
<div class="radio-group-demo" role="radiogroup" aria-labelledby="rg-label"
     data-controller="stimeo--radio-group">
  <span class="radio-group-demo__legend" id="rg-label">
    <%= t("components.radio_group.demo.legend") %>
  </span>

  <div class="radio-group-demo__options">
    <div class="radio-group-demo__option" role="radio" aria-checked="true" tabindex="0"
         data-value="basic" data-stimeo--radio-group-target="radio"
         data-action="click->stimeo--radio-group#select
                      keydown->stimeo--radio-group#onKeydown">
      <span class="radio-group-demo__name"><%= t("components.radio_group.demo.basic") %></span>
      <span class="radio-group-demo__desc"><%= t("components.radio_group.demo.basic_desc") %></span>
    </div>
    <div class="radio-group-demo__option" role="radio" aria-checked="false" tabindex="-1"
         data-value="pro" data-stimeo--radio-group-target="radio"
         data-action="click->stimeo--radio-group#select
                      keydown->stimeo--radio-group#onKeydown">
      <span class="radio-group-demo__name"><%= t("components.radio_group.demo.pro") %></span>
      <span class="radio-group-demo__desc"><%= t("components.radio_group.demo.pro_desc") %></span>
    </div>
    <div class="radio-group-demo__option" role="radio" aria-checked="false" tabindex="-1"
         data-value="max" data-stimeo--radio-group-target="radio"
         data-action="click->stimeo--radio-group#select
                      keydown->stimeo--radio-group#onKeydown">
      <span class="radio-group-demo__name"><%= t("components.radio_group.demo.max") %></span>
      <span class="radio-group-demo__desc"><%= t("components.radio_group.demo.max_desc") %></span>
    </div>
  </div>

  <input type="hidden" name="plan" value="basic" data-stimeo--radio-group-target="field" />

  <p class="radio-group-demo__status" aria-live="polite">
    <%= t("components.radio_group.demo.selected") %>
    <span data-radio-value><%= t("components.radio_group.demo.basic") %></span>
  </p>
</div>

/*
 * Presentation-only styles for the radio-group demo.
 * Selection is expressed via [role="radio"][aria-checked="true"] and focus via :focus-visible.
 */

.radio-group-demo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 26rem;
}

.radio-group-demo__legend {
  font-weight: 600;
}

.radio-group-demo__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.radio-group-demo__option {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.625rem 0.875rem;
  background: var(--bg);
  border: 1px solid var(--border-interactive);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.radio-group-demo__option[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--color-primary-soft);
}

.radio-group-demo__option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.radio-group-demo__name {
  font-weight: 600;
}

.radio-group-demo__desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.radio-group-demo__status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

// Demo script that subscribes to the radio-group change event and shows the selected plan name.
// The name is read from the localized text inside the card.
document.addEventListener('stimeo--radio-group:change', function (event) {
  const out = document.querySelector('[data-radio-value]');
  const name = event.detail.radio.querySelector('.radio-group-demo__name');
  if (out && name) out.textContent = name.textContent.trim();
});