@softize/opus 12.5.0 → 12.5.2

package/CHANGELOG.md

@@ -7,6 +7,24 @@ 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.2 — 2026-08-24
+
+`SidebarItem` aplica `className` sempre na linha, recolhida ou aberta. Antes a prop mudava de alvo
+conforme o rail — ia para o botão no modo recolhido e para a linha no aberto —, e o consumidor não
+tinha como saber o que estava estilizando.
+
+O controle de desdobrar também deixa de depender de `icon`. Um item com `onToggle` e sem ícone
+perdia o chevron em silêncio; agora ele ocupa sozinho o lugar do leading e fica visível, já que não
+há ícone para revezar com ele no hover.
+
+## 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.2",
   "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',

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

@@ -76,28 +76,31 @@ export function SidebarItem({ label, icon, badge, active = false, disabled = fal
   const { ref: labelRef, overflowing: labelCut } = useOverflowing<HTMLSpanElement>(label)
   if (collapsed) {
     const button = (
-      <button type="button" disabled={disabled} aria-current={active ? 'page' : undefined} onClick={onClick} className={cn('mx-auto grid size-9 place-items-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-40', 'outline-none focus-visible:ring-2 focus-visible:ring-ring/50', active ? 'bg-muted font-medium text-foreground' : 'text-foreground/80 hover:bg-muted/60', className)}>
+      <button type="button" disabled={disabled} aria-current={active ? 'page' : undefined} onClick={onClick} className={cn('mx-auto grid size-9 place-items-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-40', 'outline-none focus-visible:ring-2 focus-visible:ring-ring/50', active ? 'bg-muted font-medium text-foreground' : 'text-foreground/80 hover:bg-muted/60')}>
         {icon}
       </button>
     )
-    return <div {...dragProps}><Tooltip><TooltipTrigger asChild>{button}</TooltipTrigger><TooltipContent side="right">{label}{tooltipHint}</TooltipContent></Tooltip></div>
+    // `className` vai no MESMO elemento nos dois modos — a linha —, senão a prop mudaria de alvo
+    // conforme o rail estivesse recolhido, e o consumidor não teria como saber o que estilizou.
+    return <div data-slot="sidebar-item" className={className} {...dragProps}><Tooltip><TooltipTrigger asChild>{button}</TooltipTrigger><TooltipContent side="right">{label}{tooltipHint}</TooltipContent></Tooltip></div>
   }
 
   return (
     <div data-slot="sidebar-item" className={cn('group/sidebar-item relative flex items-center rounded-md transition-colors', disabled ? 'text-muted-foreground/50 opacity-40' : 'hover:bg-muted/60', active && 'bg-muted', dropPosition === 'inside' && 'bg-primary/5 ring-2 ring-inset ring-primary/60', className)} {...dragProps}>
       {(dropPosition === 'before' || dropPosition === 'after') && <span data-slot="sidebar-item-drop-indicator" className={cn('pointer-events-none absolute inset-x-1 z-20 h-0.5 rounded-full bg-primary before:absolute before:-left-1 before:top-1/2 before:size-2 before:-translate-y-1/2 before:rounded-full before:border-2 before:border-primary before:bg-background', dropPosition === 'before' ? '-top-px' : '-bottom-px')} />}
-      {icon !== undefined && (
+      {(icon !== undefined || onToggle !== undefined) && (
         <span data-slot="sidebar-item-leading" className="pointer-events-none absolute left-2.5 top-1/2 z-10 grid size-4 -translate-y-1/2 place-items-center">
-          <span className={cn('absolute inset-0 flex items-center justify-center transition-opacity', onToggle !== undefined && 'group-hover/sidebar-item:opacity-0 group-has-[[data-slot=sidebar-item-toggle]:focus-visible]/sidebar-item:opacity-0')}>{icon}</span>
+          {/* Sem ícone, o chevron não se esconde: ele é o único ocupante do lugar. */}
+          {icon !== undefined && <span className={cn('absolute inset-0 flex items-center justify-center transition-opacity', onToggle !== undefined && 'group-hover/sidebar-item:opacity-0 group-has-[[data-slot=sidebar-item-toggle]:focus-visible]/sidebar-item:opacity-0')}>{icon}</span>}
           {onToggle !== undefined && (
-            <button type="button" data-slot="sidebar-item-toggle" onClick={onToggle} aria-label={expanded ? `Fechar ${label}` : `Abrir ${label}`} aria-expanded={expanded} className="pointer-events-none absolute inset-0 grid place-items-center rounded-sm text-muted-foreground opacity-0 transition-[color,opacity] outline-none hover:text-foreground group-hover/sidebar-item:pointer-events-auto group-hover/sidebar-item:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/50">
+            <button type="button" data-slot="sidebar-item-toggle" onClick={onToggle} aria-label={expanded ? `Fechar ${label}` : `Abrir ${label}`} aria-expanded={expanded} className={cn('absolute inset-0 grid place-items-center rounded-sm text-muted-foreground transition-[color,opacity] outline-none hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/50', icon === undefined ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0 group-hover/sidebar-item:pointer-events-auto group-hover/sidebar-item:opacity-100')}>
               <ChevronRight className={cn('size-3 transition-transform', expanded && 'rotate-90')} />
             </button>
           )}
         </span>
       )}
       <button type="button" disabled={disabled} aria-current={active ? 'page' : undefined} onClick={onClick} className={cn('flex min-w-0 flex-1 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm disabled:pointer-events-none', 'outline-none focus-visible:ring-2 focus-visible:ring-ring/50', disabled ? 'text-muted-foreground/50' : active ? 'font-medium text-foreground' : 'text-foreground/80')}>
-        {icon !== undefined && <span data-slot="sidebar-item-leading-space" aria-hidden className="size-4 shrink-0" />}
+        {(icon !== undefined || onToggle !== undefined) && <span data-slot="sidebar-item-leading-space" aria-hidden className="size-4 shrink-0" />}
         <span ref={labelRef} data-slot="sidebar-item-label" className={cn('min-w-0 flex-1 overflow-hidden whitespace-nowrap group-has-[[data-slot=dot]]/sidebar-item:mr-[1.1875rem]', labelCut && 'truncate-fade')}>{label}</span>
         {badge !== undefined && <span data-slot="sidebar-item-badge" className={cn('shrink-0 transition-opacity has-[[data-slot=dot]]:absolute has-[[data-slot=dot]]:right-1 has-[[data-slot=dot]]:top-1/2 has-[[data-slot=dot]]:z-10 has-[[data-slot=dot]]:grid has-[[data-slot=dot]]:size-6 has-[[data-slot=dot]]:-translate-y-1/2 has-[[data-slot=dot]]:place-items-center', hasActions && 'group-hover/sidebar-item:has-[[data-slot=dot]]:opacity-0')}>{badge}</span>}
       </button>