ツリービュー

<%# 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') %>">
  <li
    class="tree-view__item"
    role="treeitem"
    aria-expanded="true"
    aria-selected="false"
    tabindex="0"
    data-stimeo--tree-view-target="item"
    data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#onClick">
    <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-stimeo--tree-view-target="item"
        data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#onClick">
        <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-stimeo--tree-view-target="item"
              data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#onClick">
            <span class="tree-view__label">application_controller.rb</span>
          </li>
          <li class="tree-view__item" role="treeitem" aria-selected="false" tabindex="-1"
              data-stimeo--tree-view-target="item"
              data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#onClick">
            <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-stimeo--tree-view-target="item"
          data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#onClick">
        <span class="tree-view__label">application.rb</span>
      </li>
    </ul>
  </li>
  <li class="tree-view__item" role="treeitem" aria-selected="false" tabindex="-1"
      data-stimeo--tree-view-target="item"
      data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#onClick">
    <span class="tree-view__label">README.md</span>
  </li>
  <li class="tree-view__item" role="treeitem" aria-selected="false" tabindex="-1"
      data-stimeo--tree-view-target="item"
      data-action="keydown->stimeo--tree-view#onKeydown click->stimeo--tree-view#onClick">
    <span class="tree-view__label">Gemfile</span>
  </li>
</ul>

/*
 * 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;
}