@softize/opus 12.5.0 → 12.5.1

package/CHANGELOG.md

@@ -7,6 +7,14 @@ Depois de qualquer bump, rode os gates (`typecheck` · `test` · `opus check` ·
 `opus copy --check` · `base copy check` · `manifest:check`) — eles apontam o que a
 mudança cobra do seu código.
 
+## 12.5.1 — 2026-08-24
+
+`Dock` passa a fazer o roving tabindex que uma `toolbar` promete: a barra tem um único ponto de
+entrada no Tab, e as setas andam entre as ações a partir dele. Antes as setas eram um caminho a
+mais e a barra continuava cobrando um Tab por ícone, que é justamente o que o padrão evita.
+
+A mudança é interna ao componente e não altera a API.
+
 ## 12.5.0 — 2026-08-24
 
 Cache vira porta do protocolo. `CacheAdapter` chega aos handlers como `ctx.cache`, com a superfície

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "12.5.0",
+  "version": "12.5.1",
   "description": "End-to-end action protocol for TypeScript. Single package with subpath exports (core + adapters).",
   "license": "MIT",
   "type": "module",

package/src/ui/components/patterns/dock.tsx

@@ -36,6 +36,18 @@ export interface DockProps {
 export function Dock({ position = 'bottom', label, className, children }: DockProps): React.ReactElement {
   const ref = React.useRef<HTMLDivElement>(null)
 
+  // Roving tabindex: uma toolbar tem UM ponto de entrada no Tab; dentro dela, as setas andam.
+  // Sem isto as setas seriam um caminho a mais, e a barra continuaria cobrando um Tab por ícone.
+  const roving = React.useCallback((focado?: HTMLElement) => {
+    const items = Array.from(ref.current?.querySelectorAll<HTMLButtonElement>('button') ?? [])
+    const entrada = items.find((item) => item === focado) ?? items.find((item) => !item.disabled)
+    for (const item of items) item.tabIndex = item === entrada ? 0 : -1
+  }, [])
+
+  React.useEffect(() => {
+    roving()
+  })
+
   // Navegação de toolbar: as setas andam entre as ações, e Home/End vão às pontas. Sem isso
   // uma barra com dez ícones cobra dez Tabs de quem navega por teclado.
   const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
@@ -54,7 +66,10 @@ export function Dock({ position = 'bottom', label, className, children }: DockPr
           : event.key === 'ArrowRight'
             ? (current + 1) % items.length
             : (current - 1 + items.length) % items.length
-    items[next]?.focus()
+    const alvo = items[next]
+    if (alvo === undefined) return
+    roving(alvo)
+    alvo.focus()
   }
 
   return (
@@ -65,6 +80,7 @@ export function Dock({ position = 'bottom', label, className, children }: DockPr
       aria-label={label}
       aria-orientation="horizontal"
       onKeyDown={onKeyDown}
+      onFocus={(event) => roving(event.target as HTMLElement)}
       className={cn(
         'absolute z-10 flex max-w-[calc(100%-1.5rem)] flex-row items-center gap-1.5 overflow-x-auto',
         'rounded-2xl border border-border bg-background/95 p-1.5 shadow-lg backdrop-blur',