{{-- Панель форматування перекладу; працює всередині Alpine-компонента з методами translationToolbar --}}
<div class="flex flex-wrap items-center gap-1 border-b border-zinc-200 p-2 dark:border-zinc-700" role="toolbar" aria-label="Форматування перекладу">
    <button type="button" title="Підкреслення" aria-label="Підкреслення" :aria-pressed="active.underline" :class="{ 'bg-zinc-200 dark:bg-zinc-700': active.underline }" class="rounded px-2 py-1 underline hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="toggle('underline')">U</button>
    <button type="button" title="Закреслення" aria-label="Закреслення" :aria-pressed="active.strike" :class="{ 'bg-zinc-200 dark:bg-zinc-700': active.strike }" class="rounded px-2 py-1 line-through hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="toggle('strike')">S</button>
    <span class="mx-1 self-stretch border-l border-zinc-300 dark:border-zinc-700"></span>
    <label class="inline-flex items-center gap-2 rounded px-2 py-1 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800">
        <span>Колір тексту</span>
        <input type="color" x-model="color" aria-label="Колір тексту" class="h-7 w-8 cursor-pointer rounded border-0 bg-transparent p-0" @input="setColor()">
    </label>
    <button type="button" title="Скинути колір тексту" class="rounded px-2 py-1 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="clearColor()">Скинути колір</button>
    <span class="mx-1 self-stretch border-l border-zinc-300 dark:border-zinc-700"></span>
    <label class="inline-flex items-center gap-2 rounded px-2 py-1 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800">
        <span>Колір виділення</span>
        <input type="color" x-model="highlight" aria-label="Колір виділення" class="h-7 w-8 cursor-pointer rounded border-0 bg-transparent p-0" @input="setHighlight()">
    </label>
    <button type="button" title="Скинути виділення" class="rounded px-2 py-1 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800" @mousedown.prevent @click="clearHighlight()">Скинути виділення</button>
</div>