ツールバー

<%# Markup for the toolbar demo.
    Two toolbars share the same roving-tabindex behavior; only orientation-value differs,
    so the arrow axis follows it: Left/Right for horizontal, Up/Down for vertical (Home/End
    jump to the ends in both). Each caption is the toolbar's accessible name via
    aria-labelledby. Pressing/toggling each button is each element's responsibility. %>
<div class="toolbar-demo">
  <%# Horizontal: arrows Left/Right. %>
  <div class="toolbar-demo__group">
    <span class="toolbar-demo__caption" id="toolbar-demo-horizontal">
      <%= t("components.toolbar.demo.horizontal") %>
    </span>
    <div
      class="toolbar"
      data-controller="stimeo--toolbar"
      role="toolbar"
      aria-labelledby="toolbar-demo-horizontal"
      data-stimeo--toolbar-orientation-value="horizontal">
      <button type="button" class="toolbar__button" aria-pressed="false" tabindex="0"
        data-stimeo--toolbar-target="control" data-action="keydown->stimeo--toolbar#onKeydown">
        <%= t("components.toolbar.demo.bold") %>
      </button>
      <button type="button" class="toolbar__button" aria-pressed="false" tabindex="-1"
        data-stimeo--toolbar-target="control" data-action="keydown->stimeo--toolbar#onKeydown">
        <%= t("components.toolbar.demo.italic") %>
      </button>
      <button type="button" class="toolbar__button" aria-pressed="false" tabindex="-1"
        data-stimeo--toolbar-target="control" data-action="keydown->stimeo--toolbar#onKeydown">
        <%= t("components.toolbar.demo.underline") %>
      </button>
      <span class="toolbar__separator" role="separator" aria-orientation="vertical"></span>
      <button type="button" class="toolbar__button" tabindex="-1"
        data-stimeo--toolbar-target="control" data-action="keydown->stimeo--toolbar#onKeydown">
        <%= t("components.toolbar.demo.link") %>
      </button>
    </div>
  </div>

  <%# Vertical: same controls, arrows Up/Down. The separator is horizontal here. %>
  <div class="toolbar-demo__group">
    <span class="toolbar-demo__caption" id="toolbar-demo-vertical">
      <%= t("components.toolbar.demo.vertical") %>
    </span>
    <div
      class="toolbar toolbar--vertical"
      data-controller="stimeo--toolbar"
      role="toolbar"
      aria-labelledby="toolbar-demo-vertical"
      data-stimeo--toolbar-orientation-value="vertical">
      <button type="button" class="toolbar__button" aria-pressed="false" tabindex="0"
        data-stimeo--toolbar-target="control" data-action="keydown->stimeo--toolbar#onKeydown">
        <%= t("components.toolbar.demo.bold") %>
      </button>
      <button type="button" class="toolbar__button" aria-pressed="false" tabindex="-1"
        data-stimeo--toolbar-target="control" data-action="keydown->stimeo--toolbar#onKeydown">
        <%= t("components.toolbar.demo.italic") %>
      </button>
      <button type="button" class="toolbar__button" aria-pressed="false" tabindex="-1"
        data-stimeo--toolbar-target="control" data-action="keydown->stimeo--toolbar#onKeydown">
        <%= t("components.toolbar.demo.underline") %>
      </button>
      <span class="toolbar__separator" role="separator" aria-orientation="horizontal"></span>
      <button type="button" class="toolbar__button" tabindex="-1"
        data-stimeo--toolbar-target="control" data-action="keydown->stimeo--toolbar#onKeydown">
        <%= t("components.toolbar.demo.link") %>
      </button>
    </div>
  </div>
</div>

/*
 * Presentation-only styles for the toolbar demo.
 * The library toggles the controls' tabindex (active=0 / others=-1). The pressed-state
 * look is built by reacting to each button's aria-pressed.
 */

.toolbar-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}

.toolbar-demo__group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.toolbar-demo__caption {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  background: var(--surface, var(--surface-card));
}

.toolbar__button {
  min-width: 2.25rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: none;
  color: var(--fg, var(--color-text));
  font: inherit;
  cursor: pointer;
}

.toolbar__button:hover {
  background: var(--surface-subtle);
}

.toolbar__button:focus-visible {
  outline: 2px solid var(--accent, var(--color-primary));
  outline-offset: 1px;
}

.toolbar__button[aria-pressed="true"] {
  border-color: var(--accent, var(--color-primary));
  background: var(--vital-100);
  color: var(--accent, var(--color-primary));
  font-weight: 600;
}

.toolbar__separator {
  width: 1px;
  align-self: stretch;
  margin: 0.15rem 0.25rem;
  background: var(--surface-subtle);
}

/* Vertical toolbar: stack the controls and lay the separator across the column. */
.toolbar--vertical {
  flex-direction: column;
  align-items: stretch;
}

.toolbar--vertical .toolbar__separator {
  width: auto;
  height: 1px;
  margin: 0.25rem 0.15rem;
}

// Demo of each toolbar control's function (consumer-side JS).
//
// The core controller (stimeo--toolbar) only handles roving tabindex and arrow-key
// focus movement; what each button does (here, toggling aria-pressed) is the consumer's
// job. This shows the toolbar's "single tab stop + arrow movement" coexisting
// independently with each button's pressed state.
document.querySelectorAll('[data-controller~="stimeo--toolbar"]').forEach((toolbar) => {
  toolbar.querySelectorAll('[aria-pressed]').forEach((button) => {
    button.addEventListener('click', () => {
      const pressed = button.getAttribute('aria-pressed') === 'true';
      button.setAttribute('aria-pressed', pressed ? 'false' : 'true');
    });
  });
});