Componente: @nimbus-ds/icon-button (v4.4.1)

Contexto

Documentando IconButton en nimbus-doc surgieron tres mejoras para alinear el componente con el diseño (Figma) y con la API del resto del design system.

1. El stroke azul de foco queda fijo tras un click (apariencia default)

• Actual: al hacer click con el mouse en un IconButton (apariencia default), aparece el borde azul de foco (primary-interactive) y permanece hasta que el botón pierde el foco. El borde se aplica en :focus.
• Esperado: el anillo/borde de foco debería mostrarse solo en navegación por teclado, usando :focus-visible. Con mouse no debería quedar el stroke azul pegado después de accionar el botón.

2. Exponer transparent como apariencia de primera clase

• Actual: para lograr el botón transparente (sin fondo ni borde en reposo, y superficie recién en hover/active) hay que pasar backgroundColor y borderColor como objetos por estado:

  <IconButton
    source={<EditIcon />}
    backgroundColor={{ xs: "transparent", active: "neutral-surfaceHighlight" }}
    borderColor={{ xs: "transparent", hover: "neutral-interactiveHover", active: "neutral-interactivePressed", focus: "primary-interactive" }}
  />

  Es verboso y fácil de implementar de forma inconsistente entre consumidores.

• Esperado: exponer transparent como valor de appearance (junto a default y ai-generative) que encapsule ese comportamiento, para no depender de objetos manuales.

3. Tamaños nombrados: medium / large

• Actual: size es un string CSS libre (default "2.75rem"), sin escala definida. Habilita valores arbitrarios (ej. 16px / 20px) que rompen el área táctil mínima.
• Esperado: exponer tamaños nombrados —medium (2rem / 32px) y large (2.75rem / 44px)— como en Button, manteniendo la escala del design system y evitando valores fuera de rango. Se puede conservar size libre como escape hatch, pero con la escala nombrada como API principal.

Impacto

Consistencia visual con Figma, API alineada al resto de los componentes y menos workarounds en los consumidores.