ツリービュー

<%# Markup for the tree-view (tree view / single selection) demo.
    Nested role="tree" / "treeitem" / "group" express the hierarchy. Arrows move between
    visible items; ArrowRight / ArrowLeft expand/collapse and move between parent/child;
    Home/End, typeahead, and Enter/Space select a single item. The library handles roving,
    aria-expanded / aria-selected sync, and toggling each group's hidden. Across the whole
    tree only one treeitem is tabindex=0.
    The chevron is an optional pointer affordance wired to the toggle action. It stays
    tabindex="-1" (the tree remains a single Tab stop) and aria-hidden (the item itself
    already announces its expanded state); clicking it expands/collapses without selecting,
    because the tree never consumes events raised inside a nested control. The toggle action
    hands focus to the row afterwards, so focus never rests on this decorative button and
    the arrow keys keep working right after a click. %>
<ul class="tree-view" data-controller="stimeo--tree-view" role="tree"
    aria-label="<%= t('components.tree_view.demo.label') %>">
  <%# The hidden field carries the selected item's data-value into the form; both
      the field and the values are optional. An item without a data-value submits
      an empty string, so give one to every item that should be selectable. %>
  <input type="hidden" name="path" data-stimeo--tree-view-target="field" />
  <li
    class="tree-view__item"
    role="treeitem"
    aria-expanded="true"
    aria-selected="false"
    tabindex="0"
    data-value="app"
    data-stimeo--tree-view-target="item"
    data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#select">
    <button type="button" class="tree-view__chevron" tabindex="-1" aria-hidden="true"
            data-action="click->stimeo--tree-view#toggle"></button>
    <span class="tree-view__label">app</span>
    <ul class="tree-view__group" role="group" data-stimeo--tree-view-target="group">
      <li
        class="tree-view__item"
        role="treeitem"
        aria-expanded="false"
        aria-selected="false"
        tabindex="-1"
        data-value="app/controllers"
        data-stimeo--tree-view-target="item"
        data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#select">
        <button type="button" class="tree-view__chevron" tabindex="-1" aria-hidden="true"
                data-action="click->stimeo--tree-view#toggle"></button>
        <span class="tree-view__label">controllers</span>
        <ul class="tree-view__group" role="group" data-stimeo--tree-view-target="group" hidden>
          <li class="tree-view__item" role="treeitem" aria-selected="false"
              tabindex="-1" data-value="app/controllers/application_controller.rb"
              data-stimeo--tree-view-target="item"
              data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#select">
            <span class="tree-view__label">application_controller.rb</span>
          </li>
          <li class="tree-view__item" role="treeitem" aria-selected="false"
              tabindex="-1" data-value="app/controllers/components_controller.rb"
              data-stimeo--tree-view-target="item"
              data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#select">
            <span class="tree-view__label">components_controller.rb</span>
          </li>
        </ul>
      </li>
      <li class="tree-view__item" role="treeitem" aria-selected="false"
          tabindex="-1" data-value="app/application.rb"
          data-stimeo--tree-view-target="item"
          data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#select">
        <span class="tree-view__label">application.rb</span>
      </li>
    </ul>
  </li>
  <li class="tree-view__item" role="treeitem" aria-selected="false"
      tabindex="-1" data-value="README.md"
      data-stimeo--tree-view-target="item"
      data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#select">
    <span class="tree-view__label">README.md</span>
  </li>
  <li class="tree-view__item" role="treeitem" aria-selected="false"
      tabindex="-1" data-value="Gemfile"
      data-stimeo--tree-view-target="item"
      data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#select">
    <span class="tree-view__label">Gemfile</span>
  </li>
</ul>

<%# 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 tree-view demo.
 * The library drives expand/collapse via items' aria-expanded and groups' hidden,
 * selection via aria-selected, and roving via tabindex. Here we add the hierarchy
 * indentation and the selection / expansion look (the triangle marker, highlight).
 */

.tree-view {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 18rem;
  font-size: 0.9rem;
  color: var(--fg, var(--color-text));
}

.tree-view__group {
  margin: 0;
  padding-left: 1.1rem;
  list-style: none;
}

.tree-view__group[hidden] {
  display: none;
}

/* The chevron is absolutely positioned over the label's leading padding, so the
 * label keeps its full-row hit area and highlight. */
.tree-view__item {
  position: relative;
}

.tree-view__label {
  display: block;
  padding: 0.25rem 0.4rem 0.25rem 1.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

/* Expand/collapse trigger; only items with children carry one. The glyph follows
 * the item's aria-expanded, which the library keeps in sync. */
.tree-view__chevron {
  position: absolute;
  top: 0.25rem;
  left: 0.3rem;
  width: 1rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: 1.4;
  color: var(--color-text-muted);
  cursor: pointer;
}

.tree-view__chevron::before {
  content: "▸";
}

.tree-view__item[aria-expanded="true"] > .tree-view__chevron::before {
  content: "▾";
}

/* A theme-aware soft accent surface, not the raw `--vital-100`: this rule sets a
   background but lets the text inherit `--color-text`, which flips with the theme.
   A fixed light mint therefore paired light text on light in dark mode — measured
   1.02:1, i.e. the row the keyboard is on was effectively invisible. */
.tree-view__item[aria-selected="true"] > .tree-view__label {
  background: var(--color-primary-soft);
  font-weight: 600;
}

.tree-view__item:focus {
  outline: none;
}

.tree-view__item:focus-visible > .tree-view__label {
  outline: 2px solid var(--accent, var(--color-primary));
  outline-offset: -2px;
}

// 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
// the component reports a selection the page moved — the selected item removed,
// a morph or a script rewriting an item's `aria-selected` or the selected item's
// `data-value`, a selected item arriving ahead of it — as
// `stimeo--tree-view: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 fieldSources = demoStage.querySelectorAll("[data-stimeo--tree-view-target='field']");

// An input without a `name` is not a submitted control, so it is left out.
const submitted = () =>
  Array.from(demoStage.querySelectorAll("[data-stimeo--tree-view-target='field']"))
    .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--tree-view:reconcile", showSubmitted);
showSubmitted();