カレンダー

<%# Markup for the calendar (APG Date Picker Dialog) demo.
    stimeo--calendar provides the displayed month label via Intl.DateTimeFormat,
    date navigation via roving focus, month transitions, 42-cell sync, and min/max
    boundary limits. %>
<div
  class="calendar-demo demo-card"
  data-controller="stimeo--calendar"
  data-stimeo--calendar-month-value="<%= Time.current.strftime("%Y-%m") %>"
  data-stimeo--calendar-selected-value="<%= Time.current.strftime("%Y-%m-%d") %>"
  data-stimeo--calendar-min-value="<%= (Time.current - 1.month).beginning_of_month.strftime(
    "%Y-%m-%d"
  ) %>"
  data-stimeo--calendar-max-value="<%= (Time.current + 2.months).end_of_month.strftime(
    "%Y-%m-%d"
  ) %>"
  data-stimeo--calendar-week-start-value="0"
>
  <%# The hidden fields carry the selected day and the painted month into the
      form, so a server can serve the days it is showing. Both are optional. %>
  <input type="hidden" name="on" data-stimeo--calendar-target="field" />
  <input type="hidden" name="month" data-stimeo--calendar-target="monthField" />
  
  <div class="calendar-demo__header">
    <button
      class="calendar-demo__btn"
      type="button"
      data-action="click->stimeo--calendar#prev"
      aria-label="<%= t("components.calendar.demo.prev_month") %>"
    >
      <svg
        class="calendar-demo__icon"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <polyline points="15 18 9 12 15 6"></polyline>
      </svg>
    </button>
    <span
      class="calendar-demo__label"
      data-stimeo--calendar-target="label"
    ></span>
    <button
      class="calendar-demo__btn"
      type="button"
      data-action="click->stimeo--calendar#next"
      aria-label="<%= t("components.calendar.demo.next_month") %>"
    >
      <svg
        class="calendar-demo__icon"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <polyline points="9 18 15 12 9 6"></polyline>
      </svg>
    </button>
  </div>

  <table class="calendar-demo__table" role="grid">
    <thead>
      <tr role="row">
        <th
          scope="col"
          aria-label="<%= t("components.calendar.demo.sunday") %>"
        >
          <%= t("components.calendar.demo.sunday")[0] %>
        </th>
        <th
          scope="col"
          aria-label="<%= t("components.calendar.demo.monday") %>"
        >
          <%= t("components.calendar.demo.monday")[0] %>
        </th>
        <th
          scope="col"
          aria-label="<%= t("components.calendar.demo.tuesday") %>"
        >
          <%= t("components.calendar.demo.tuesday")[0] %>
        </th>
        <th
          scope="col"
          aria-label="<%= t("components.calendar.demo.wednesday") %>"
        >
          <%= t("components.calendar.demo.wednesday")[0] %>
        </th>
        <th
          scope="col"
          aria-label="<%= t("components.calendar.demo.thursday") %>"
        >
          <%= t("components.calendar.demo.thursday")[0] %>
        </th>
        <th
          scope="col"
          aria-label="<%= t("components.calendar.demo.friday") %>"
        >
          <%= t("components.calendar.demo.friday")[0] %>
        </th>
        <th
          scope="col"
          aria-label="<%= t("components.calendar.demo.saturday") %>"
        >
          <%= t("components.calendar.demo.saturday")[0] %>
        </th>
      </tr>
    </thead>
    <tbody
      data-stimeo--calendar-target="grid"
      data-action="
        keydown->stimeo--calendar#onKeydown
        click->stimeo--calendar#select
      "
    >
      <% 6.times do %>
        <tr role="row">
          <% 7.times do %>
            <td
              role="gridcell"
              class="calendar-demo__cell"
              data-stimeo--calendar-target="day"
              tabindex="-1"
            ></td>
          <% end %>
        </tr>
      <% end %>
    </tbody>
  </table>
</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.field") %></span>
  <span class="demo-readout__value" data-readout
        data-empty-text="<%= t("catalog.readout.empty") %>">—</span>
</p>

/*
 * Presentation-only styles for the calendar demo.
 * Selected = aria-selected, disabled = aria-disabled, outside the month =
 * data-outside, today = data-today (all set by the library).
 */

/* Card surface (background / border / radius / padding / shadow) comes from the shared
   .demo-card primitive (base/demo-primitives.css); only layout-specific bits stay here. */
.calendar-demo {
  display: inline-block;
  font-family: inherit;
  user-select: none;
}

.calendar-demo__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.calendar-demo__label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--fg);
}

.calendar-demo__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  font-size: 1.15rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calendar-demo__btn:hover {
  background: var(--surface-subtle);
  border-color: var(--border-strong);
}

.calendar-demo__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.calendar-demo__table {
  border-collapse: collapse;
  width: 100%;
}

.calendar-demo__table th {
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.5rem 0;
  text-align: center;
  width: 2.5rem;
}

.calendar-demo__cell {
  text-align: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 0.875rem;
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Background for roving focus (tabindex="0") or on hover. */
.calendar-demo__cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.calendar-demo__cell:hover:not([aria-disabled="true"]) {
  background: var(--surface-subtle);
}

/* Outside the displayed month. */
.calendar-demo__cell[data-outside="true"] {
  color: var(--color-text-subtle);
}

/* Today. */
.calendar-demo__cell[data-today="true"] {
  font-weight: bold;
  border: 1px solid var(--accent);
}

/* Selected state. */
.calendar-demo__cell[aria-selected="true"] {
  background: var(--accent) !important;
  color: var(--white) !important;
  font-weight: bold;
}

/* Out of range (disabled). */
.calendar-demo__cell[aria-disabled="true"] {
  color: var(--slate-300) !important;
  cursor: not-allowed;
  background: transparent !important;
}

/* Styles for the navigation icons. */
.calendar-demo__icon {
  width: 1.15rem;
  height: 1.15rem;
  stroke-width: 2.25;
}

// The hidden field mirrors the value, and for a move the user made it emits the
// native `change` a form already listens to — so `stimeo--auto-submit`, form
// validation, or any `change` handler on the `<form>` reacts without knowing what
// this component is. A refresh that follows a morph or a repair is silent, and
// a selection the page moved — `selected` rewritten, or a bound that withholds
// the selected day or gives it back — is reported as `stimeo--calendar:reconcile`.
// This demo reads both events, so the readout follows the user's moves and the
// page's.
// 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 fieldReadout = demoStage.querySelector("[data-readout]");
const fieldSelector = [
  "[data-stimeo--calendar-target='field']",
  "[data-stimeo--calendar-target='monthField']",
].join(", ");
const fieldSources = demoStage.querySelectorAll(fieldSelector);

// An input without a `name` is not a submitted control, so it is left out.
const submitted = () =>
  Array.from(demoStage.querySelectorAll(fieldSelector))
    .filter((input) => input.name)
    .map((input) => `${input.name}=${input.value}`)
    .join(" & ") || fieldReadout?.dataset.emptyText || "";

const showSubmitted = () => {
  if (fieldReadout) fieldReadout.textContent = submitted();
};

for (const source of fieldSources) source.addEventListener("change", showSubmitted);
demoStage.addEventListener("stimeo--calendar:reconcile", showSubmitted);
showSubmitted();