ツールバー

<%# Markup for the toolbar demo.
    Focusable controls are laid out in a role="toolbar" + aria-label container. The
    library handles roving tabindex (only the active one is tabindex=0) and focus movement
    via arrows / Home / End. Pressing/toggling each button is each element's responsibility. %>
<div
  class="toolbar"
  data-controller="stimeo--toolbar"
  role="toolbar"
  aria-label="<%= t("components.toolbar.demo.label") %>"
  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>

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

// 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');
    });
  });
});