@ajuarezso/sui-design-system 0.25.1 → 0.26.0

package/docs/INDEX.md

@@ -57,7 +57,7 @@ Documentados: 116 de 116.
 | `sui-drawer-header` | Cabecera de un panel lateral (título, descripción, cerrar); hoy sin contenedor en SUI y sin uso en la app | sui-modal (con title y description: la cabecera de todos los modales de la app) · sui-modal-header (la cabecera suelta del modal) · sui-page-header (título de una página) |
 | `sui-dropdown-caption` | Texto gris de pie dentro de un menú flotante (una pista, la versión, cuándo se actualizó) | sui-content-divider (cabecera de un grupo de items) · sui-form-hint (ayuda debajo de un campo) · sui-empty-state (el menú no tiene resultados) |
 | `sui-dropdown-item` | Fila de un menú flotante o de una lista de opciones, con ícono, bandera, avatar o logo a la izquierda y badge o atajo a la derecha | sui-command-menu-item (fila del buscador ⌘K) · sui-filter-item (fila de un panel de filtros) · sui-sidebar (navegación lateral, con sus items) · sui-radio-label (opciones fijas a la vista en un formulario) |
-| `sui-dropdown-menu` | Menú flotante anclado a un botón (el kebab ⋮ de una card, un avatar) con acciones sobre eso; también es el overlay que usan por dentro los selects | sui-select (elegir un valor de un formulario) · sui-modal-sheet (más de 5 acciones o una lista larga en mobile) · sui-popover (explicar algo con una flecha, sin anclaje propio) · sui-tooltip (ayuda corta al pasar el mouse) · sui-command-menu-item (buscar y saltar con ⌘K en desktop) |
+| `sui-dropdown-menu` | Menú flotante anclado a un botón (el kebab ⋮ de una card, un avatar dentro de un botón) con acciones sobre eso; también es el overlay que usan por dentro los selects | sui-select (elegir un valor de un formulario) · sui-modal-sheet (más de 5 acciones o una lista larga en mobile) · sui-popover (explicar algo con una flecha, sin anclaje propio) · sui-tooltip (ayuda corta al pasar el mouse) · sui-command-menu-item (buscar y saltar con ⌘K en desktop) |
 | `sui-dropdown-search` | Buscador sin caja que va arriba del panel de un menú flotante para filtrar sus items | sui-input type="search" (buscador de una pantalla o una lista a la vista) · sui-command-menu-search (buscador del ⌘K) · sui-select (elegir de una lista corta, sin buscar) |
 | `sui-emoji` | Un emoji 3D animado (Fluent) para los momentos con emoción: estados vacíos, celebraciones, onboarding | sui-icon (ícono funcional, monocromo) · sui-empty-state (el estado vacío completo, que ya trae su emoji) |
 | `sui-empty-state` | Pantalla o lista sin nada que mostrar (o que no pudo cargar) con emoji animado, título, explicación y una acción opcional | sui-alert (un aviso dentro de una pantalla que sí tiene contenido) · sui-banner (aviso de toda la app) · skeleton (mientras carga, nunca un empty) |
@@ -82,10 +82,10 @@ Documentados: 116 de 116.
 | `sui-key-icon` | Un ícono dentro de un círculo, con fondo de color si el ícono dice un estado | sui-icon (el ícono suelto) · sui-avatar (cuando es una persona o un local) · sui-payment-icon (el círculo ya armado para un pago de servicio) |
 | `sui-link-button` | Acción que se lee como texto, sin caja | sui-button (acción con caja: la principal o la secundaria de un grupo) · sui-compact-button (solo ícono, sin texto) · sui-alert (sus acciones se pasan en actions[] y ya salen como link) |
 | `sui-logo` | El logo de Master Pedidos (la M y la palabra), dibujado en SVG y coloreable | sui-brand-logo (logos de OTRAS marcas: WhatsApp, Google, Apple…) · sui-avatar (el logo de un local, que es una foto) |
-| `sui-modal` | Diálogo que se abre encima de la pantalla y pide terminar o cerrar algo antes de seguir | sui-modal-sheet (hoja que sube desde abajo y deja ver lo de atrás, p. ej. un mapa) · sui-alert (aviso en la misma pantalla, sin interrumpir) · sui-toast (confirmación breve de una acción) · sui-popover (contenido chico anclado a un botón) · sui-drawer-header (panel lateral) |
+| `sui-modal` | Diálogo que se abre encima de la pantalla y pide terminar o cerrar algo antes de seguir | sui-modal-sheet (solo en el celular: hoja que sube desde abajo y deja ver lo de atrás, p. ej. un mapa) · sui-alert (aviso en la misma pantalla, sin interrumpir) · sui-toast (confirmación breve de una acción) · sui-popover (contenido chico anclado a un botón) · sui-drawer-header (panel lateral) |
 | `sui-modal-footer` | Pie de modal con la acción principal a la derecha, la secundaria a su izquierda y un slot izquierdo para un checkbox, un link o un texto | sui-button (botones sueltos fuera de un modal o una hoja) · sui-drawer-footer (pie de un panel lateral) · sui-notification-footer (pie del panel de notificaciones: ayuda de teclado y link a ajustes) |
 | `sui-modal-header` | Cabecera de modal con título, descripción, ícono opcional y la X de cerrar; sui-modal ya la dibuja sola | sui-modal (ya trae este header por title/description/iconVariant) · sui-drawer-header (cabecera de un panel lateral) · sui-page-header (título de una pantalla) |
-| `sui-modal-sheet` | Hoja que sube desde abajo, se arrastra entre alturas fijas y puede dejar usable lo de atrás (un mapa) | sui-modal (pide terminar algo antes de seguir, sin fondo usable) · sui-popover (contenido chico anclado a un botón) · sui-dropdown-menu (lista de acciones) |
+| `sui-modal-sheet` | Hoja del celular que sube desde abajo, se arrastra entre alturas fijas y puede dejar usable lo de atrás (un mapa); en tablet y computadora se usa sui-modal | sui-modal (pide terminar algo antes de seguir, sin fondo usable) · sui-popover (contenido chico anclado a un botón) · sui-dropdown-menu (lista de acciones) |
 | `sui-notification` | Fila de la bandeja de notificaciones, con quién, qué pasó, hace cuánto y si ya se leyó | sui-toast (aviso efímero, incluido el «notification» de esquina de la guía) · sui-alert (aviso que se queda en su contexto) · sui-banner (toda la app) |
 | `sui-notification-footer` | Pie del panel desplegable de notificaciones (web): ayuda de teclado a la izquierda y un link a los ajustes a la derecha | sui-link-button (un link suelto a los ajustes) · sui-drawer-footer (pie de un panel lateral) · sui-modal-footer (pie con botones) |
 | `sui-notification-tab-menu` | Cabecera con pestañas del panel desplegable de notificaciones (web), con conteo de no leídas y botón de filtro | sui-tab-chips (pestañas de la bandeja a pantalla completa, en mobile) · sui-tab-menu-horizontal (pestañas de una pantalla) · sui-segmented-control (cambiar de vista con 2–4 opciones) |

package/docs/TEXTOS.md

@@ -0,0 +1,85 @@
+# Textos de la librería en otro idioma
+
+Desde la 0.26.0, lo que la librería escribe por su cuenta —el `aria-label` de las
+X y las flechas, los textos solo para lector de pantalla, los placeholders y los
+botones por defecto— sale de un solo lugar: `SUI_TEXTOS`. Sin configurar nada,
+es el español de siempre. Una app en otro idioma los cambia con
+`provideSuiTextos`.
+
+## Uso
+
+```ts
+// app.config.ts — textos fijos
+import { provideSuiTextos } from '@ajuarezso/sui-design-system';
+
+providers: [
+  provideSuiTextos({
+    comun: { cerrar: 'Close', limpiar: 'Clear', buscar: 'Search…' },
+    input: { mostrarContrasena: 'Show password', ocultarContrasena: 'Hide password' },
+  }),
+]
+```
+
+Con una **función que lee un signal**, los textos cambian en vivo cuando cambia
+el idioma, sin recargar:
+
+```ts
+const idioma = signal<'es' | 'en'>('es');
+provideSuiTextos(() => (idioma() === 'en' ? SUI_EN : {}));
+```
+
+Si el i18n de la app vive en un servicio, se conecta con el token directo:
+
+```ts
+{
+  provide: SUI_TEXTOS,
+  useFactory: () => {
+    const i18n = inject(MiI18n);
+    return computed(() => mezclarSuiTextos(i18n.textosSui()));
+  },
+}
+```
+
+## Reglas
+
+- **Lo que no se pasa queda en español.** Se mezcla grupo por grupo:
+  `{ comun: { cerrar: 'Close' } }` cambia esa clave y deja el resto.
+- **El input del componente gana.** `ariaLabel`, `placeholder`, `cancelLabel`,
+  `backLabel`… siguen funcionando igual; el texto global es lo que se usa cuando
+  no se pasa nada. La tabla «Textos» del README de cada componente dice qué
+  clave usa y qué input la pisa.
+- **Variables entre llaves.** `'Página {n}'`, `'Paso {actual} de {total}'`,
+  `'Descargar {nombre}'`. La librería las rellena; un diccionario que ya usa
+  `{param}` las pasa tal cual.
+- **Funciona por subárbol.** `provideSuiTextos` también va en los `providers` de
+  un componente, si solo esa parte de la pantalla necesita otros textos.
+
+## Las claves
+
+La lista completa, con un comentario por clave, es la interfaz `SuiTextos`
+(`core/sui-textos.ts`, en los tipos del paquete). Los grupos:
+
+| grupo | qué cubre |
+|---|---|
+| `comun` | lo repetido: cerrar, limpiar, buscar, más opciones, progreso, pasos, verificado, flechas de scroll |
+| `input` | mostrar / ocultar contraseña |
+| `tabla` · `paginacion` | checkbox de filas, «No hay datos», botones y páginas |
+| `editorTexto` · `selectorColor` | barra del editor, partes del selector y nombres de color |
+| `contrasena` · `otp` · `calificacion` · `contador` · `deslizador` | campos especiales |
+| `archivo` · `imagen` | subida de archivos e imágenes, sus estados y errores |
+| `menuComandos` · `notificacion` · `filtro` · `navegacion` | menús, avisos, filtros, sidebar y migas |
+| `fecha` | navegación del calendario, placeholders, hora y estado |
+| `popover` · `varios` | botones del popover, descartar, administrar, responder, marcas |
+
+## Lo que todavía no cubre
+
+- **Las fechas del calendario** (`sui-datepicker`, `sui-date-selector`): nombres
+  de meses y días, los rangos predefinidos («Hoy», «Últimos 7 días») y el
+  «Rango: …» usan `date-fns` con el locale en español. Es un cambio de locale,
+  no de textos.
+- **`sui-store-card` y `sui-product-card`**: el texto es de negocio de
+  Master Pedidos (Abierto, Envío, Agotado, S/).
+- **`sui-app-store-badge`**: el texto alternativo de cada tienda; se pasa con
+  `ariaLabel`.
+- **`sui-logo`**: el nombre de la marca no se traduce.
+- **La coma decimal** de la nota de `sui-rating` («4,5 de 5»).

package/docs/sui-activity-feed/README.md

@@ -103,6 +103,18 @@ código del DS.
 | `reply` | `{ item: SuiActivityFeedItem; event: MouseEvent }` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `comun.descargar` | Descargar {nombre} | — |
+| `varios.responder` | Responder | `replyLabel` del comentario |
+| `comun.masOpciones` | Más opciones | — |
+<!-- textos:fin -->
+
 ```ts
 type SuiActivityFeedItem =
   | (Base & { type: 'default' })
@@ -130,8 +142,10 @@ interface SuiActivityTask { state: 'success' | 'warning' | 'pending' | 'error';
 - **Los tres puntos salen por defecto** (`showAction` es `true` si no lo pasas). Si no hay menú
   detrás, pon `showAction: false` en cada item o la persona toca algo que no hace nada.
 - `replyLabel` por defecto dice «Responder» (en español desde el 04-10-2026).
-- **`file.href` no hace nada.** El tipo dice que dispara la descarga, pero la plantilla no lo lee:
-  la descarga la haces tú en `(fileDownload)`.
+- **Con `file.href` el chip descarga solo** (desde 0.26.0): es un `<a download>` que baja el
+  archivo; si la URL es de otro origen (Storage), el navegador ignora `download` y lo abre en otra
+  pestaña. `(fileDownload)` sale igual, para registrar. Sin `href`, la descarga la haces tú en
+  `(fileDownload)`.
 - `timestamp` es un string: el feed no formatea ni actualiza «hace 4 min». Si la pantalla queda
   abierta, recalcúlalo tú.
 - Sin `avatar.src`, `initials` ni `icon`, el leading es la silueta gris genérica.
@@ -161,12 +175,13 @@ Historial vacío
 Descargar un archivo
 
 ```html
-<!-- ❌ mal: file.href no lo lee la plantilla; sin (fileDownload) el chip no baja nada -->
+<!-- ❌ mal: los archivos sin href y nadie escucha (fileDownload): el chip no baja nada -->
 <sui-activity-feed [items]="comprobantes()" />
 ```
 
 ```html
-<!-- ✅ bien -->
+<!-- ✅ bien: cada archivo con su href (el chip descarga solo), o (fileDownload) si hay que pedir la URL -->
+<sui-activity-feed [items]="comprobantesConUrl()" />
 <sui-activity-feed [items]="comprobantes()" (fileDownload)="descargar($event.file)" />
 ```
 

package/docs/sui-alert/README.md

@@ -186,6 +186,16 @@ X en la **tablet táctil**: hoy se prende solo con `max-width: 767px`, y el arre
 | `closed` | `void` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `comun.cerrar` | Cerrar | — |
+<!-- textos:fin -->
+
 `description` se pinta con `innerHTML`: acepta HTML y no se escapa.
 
 Signal pública: `dismissed` (`signal(false)`).

package/docs/sui-avatar-group/README.md

@@ -109,6 +109,16 @@ está en «no usar» — pendiente de decidir si la cabecera se queda en `lg` ta
 Outputs: ninguno.
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `comun.masN` | {n} más | — |
+<!-- textos:fin -->
+
 ```ts
 interface SuiAvatarGroupItem {
   src?: string;

package/docs/sui-banner/README.md

@@ -183,6 +183,16 @@ en la columna de la derecha, se usa.
 | `closed` | `void` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `comun.cerrar` | Cerrar | — |
+<!-- textos:fin -->
+
 Signal pública: `dismissed` (`signal(false)`). Slots: `[slot=icon]` (reemplaza el ícono del tipo)
 y `[slot=action]` (el link).
 

package/docs/sui-brand-logo/README.md

@@ -141,6 +141,16 @@ solo en `bp.celular()`.
 Outputs: ninguno.
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `varios.logoDe` | Logo de {marca} | `ariaLabel` |
+<!-- textos:fin -->
+
 ## Trampas
 
 - **Los SVG no vienen en el paquete npm.** Se piden a `/assets/brand/brand-logos/<marca>-<variant>.svg`:

package/docs/sui-breadcrumbs/README.md

@@ -101,6 +101,16 @@ En master-pedidos: sin `[size]`; se muestra con `@if (!bp.isMobile())`.
 | `navigate` | `SuiBreadcrumbEntry` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `navegacion.migas` | Ruta de navegación | — |
+<!-- textos:fin -->
+
 ```ts
 interface SuiBreadcrumbEntry {
   label?: string;

package/docs/sui-checkbox-card/README.md

@@ -152,7 +152,8 @@ Slot: `[slot=leading]` (solo para `card-provider`, `brand` y `company`). Impleme
   proyectas una imagen con padding o borde propios, ponle `box-sizing` tú.
 - `badge` con string sale **azul `light` `small`**.
 - **El host es el único control** (role checkbox, tab stop, Espacio y Enter): la casilla de la
-  derecha solo dibuja el estado, va oculta al lector y fuera del Tab (`[focusable]="false"`).
+  derecha solo dibuja el estado, va oculta al lector y fuera del Tab (`[focusable]="false"`,
+  `aria-hidden` e `inert`; sin `inert`, axe marca nested-interactive por su `tabindex="-1"`).
   Hasta el 04-10-2026 quedaba enfocable con `aria-hidden` y ahí Espacio no marcaba nada.
 
 ## Bien y mal

package/docs/sui-circular-progress-bar/README.md

@@ -134,6 +134,16 @@ En master-pedidos: no hay helper; `[size]="bp.celular() ? 64 : 56"` en una fila
 Outputs: ninguno.
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `comun.progreso` | Progreso | `ariaLabel` |
+<!-- textos:fin -->
+
 ## Trampas
 
 - **`size` es un número, no un texto**: `[size]="64"`, no `size="64"` (un string no tipa).

package/docs/sui-color-dot/README.md

@@ -113,6 +113,26 @@ el helper de botón y campo).
 | `clicked` | `void` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `selectorColor.color` | Color {hex} | `ariaLabel` |
+| `selectorColor.gris` | Gris | `ariaLabel` |
+| `selectorColor.azul` | Azul | `ariaLabel` |
+| `selectorColor.naranja` | Naranja | `ariaLabel` |
+| `selectorColor.rojo` | Rojo | `ariaLabel` |
+| `selectorColor.verde` | Verde | `ariaLabel` |
+| `selectorColor.amarillo` | Amarillo | `ariaLabel` |
+| `selectorColor.morado` | Morado | `ariaLabel` |
+| `selectorColor.celeste` | Celeste | `ariaLabel` |
+| `selectorColor.rosado` | Rosado | `ariaLabel` |
+| `selectorColor.turquesa` | Turquesa | `ariaLabel` |
+<!-- textos:fin -->
+
 Output: `(clicked)`, solo si no está `disabled`. El dot no cambia su propio `state`: la pantalla
 lo pasa a `selected`.
 

package/docs/sui-color-picker/README.md

@@ -108,21 +108,38 @@ que `bp.sizeControl()`, el helper de botón y campo).
 |---|---|---|
 | `colors` | `readonly SuiColorDotColor[]` | `SUI_COLOR_DOT_COLORS` |
 | `value` · model, `[(value)]` | `string \| null` | `null` |
-| `placeholder` | `string` | `'Elige un color'` |
-| `recommendedLabel` | `string` | `'Colores recomendados'` |
+| `placeholder` | `string \| null` | `null` |
+| `recommendedLabel` | `string \| null` | `null` |
 | `presetsOnly` | `boolean` | `false` |
 | `alpha` | `boolean` | `true` |
 | `eyedropper` | `boolean` | `true` |
 | `showFormatLabel` | `boolean` | `true` |
 | `disabled` | `boolean` | `false` |
 | `size` | `'medium' \| 'large'` | `'medium'` |
-| `ariaLabel` | `string` | `'Seleccionar color'` |
+| `ariaLabel` | `string \| null` | `null` |
 
 | output | payload |
 |---|---|
 | `change` | `string` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `selectorColor.saturacion` | Saturación y brillo | — |
+| `selectorColor.matiz` | Matiz | — |
+| `selectorColor.opacidad` | Opacidad | — |
+| `selectorColor.cuentagotas` | Cuentagotas | — |
+| `selectorColor.hexadecimal` | Valor hexadecimal | — |
+| `selectorColor.placeholder` | Elige un color | `placeholder` |
+| `selectorColor.recomendados` | Colores recomendados | `recommendedLabel` |
+| `selectorColor.nombre` | Seleccionar color | `ariaLabel` |
+<!-- textos:fin -->
+
 `SuiColorDotColor`: `'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal'`.
 
 ## Trampas

package/docs/sui-command-menu-footer/README.md

@@ -69,16 +69,29 @@ En master-pedidos: `@if (!bp.isMobile())` alrededor del pie, sin `[size]`.
 
 | input | tipo | default |
 |---|---|---|
-| `navigateLabel` | `string` | `'Navegar'` |
-| `selectLabel` | `string` | `'Seleccionar'` |
-| `helpText` | `string \| null` | `'¿No es lo que buscas? Prueba el'` |
-| `helpLink` | `SuiLinkConfig \| string \| null` | `'Centro de ayuda'` |
+| `navigateLabel` | `string \| null` | `null` |
+| `selectLabel` | `string \| null` | `null` |
+| `helpText` | `string \| null \| undefined` | `undefined` |
+| `helpLink` | `SuiLinkConfig \| string \| null \| undefined` | `undefined` |
 
 | output | payload |
 |---|---|
 | `helpClicked` | `MouseEvent` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `menuComandos.navegar` | Navegar | `navigateLabel` |
+| `menuComandos.seleccionar` | Seleccionar | `selectLabel` |
+| `menuComandos.ayuda` | ¿No es lo que buscas? Prueba el | `helpText` (`null` la oculta) |
+| `menuComandos.centroAyuda` | Centro de ayuda | `helpLink` (`null` lo oculta) |
+<!-- textos:fin -->
+
 `helpLink` como string dibuja un botón que solo emite `helpClicked`; como `SuiLinkConfig`
 (`{ label, href?, target?, rel? }`) dibuja un `<a>`, y un `href` interno navega dentro de la app.
 

package/docs/sui-command-menu-item/README.md

@@ -121,16 +121,24 @@ default de hoy mientras la computadora sigue pendiente). Con `description`: `siz
 | `buttonClicked` | `MouseEvent` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `menuComandos.abrir` | Abrir | — |
+<!-- textos:fin -->
+
 Slot: `[slot=brand]` (solo con `type="brand"`). `avatar` acepta un string (la URL) o
 `SuiAvatarConfig` (`{ src?, initials?, color? }`).
 
 ## Trampas
 
-- **`(clicked)` nunca sale.** El componente declara el output pero no lo conecta a ningún clic (el
-  host no escucha `click` y el template no llama a `onClick`; el spec no lo prueba). Escucha el
-  `(click)` nativo del host: `<sui-command-menu-item (click)="ir(r)" … />`.
-- **Enter y Espacio no hacen nada.** Tiene `role="button"` y `tabindex="0"`, así que se enfoca con
-  Tab, pero activarlo con teclado lo tiene que cablear quien lo usa (`(keydown.enter)`).
+- **Escucha `(clicked)` y nada más.** Sale con el clic, con Enter y con Espacio (desde 0.26.0;
+  antes no estaba conectado y nunca salía). No le sumes `(keydown.enter)` ni `(click)`: Enter ya
+  despacha un clic, y con los dos el handler corre dos veces.
 - **No hay estado «elegido»** para la navegación con flechas: el fondo `weak-50` sale con hover y
   con `:focus-visible`. Para mover la selección con ↑ ↓ hay que mover el foco entre filas.
 - `description` solo se ve en `medium`.
@@ -145,15 +153,15 @@ Slot: `[slot=brand]` (solo con `type="brand"`). `avatar` acepta un string (la UR
 Abrir el resultado
 
 ```html
-<!-- ❌ mal: (clicked) nunca sale; el componente no lo conecta a ningún clic -->
+<!-- ❌ mal: Enter ya despacha un clic; con (keydown.enter) además, ir() corre dos veces -->
 <sui-command-menu-item type="left-icon" icon="file-list-3-line" title="Pedidos"
-                       (clicked)="ir('/empresa/pedidos')" />
+                       (clicked)="ir('/empresa/pedidos')" (keydown.enter)="ir('/empresa/pedidos')" />
 ```
 
 ```html
-<!-- ✅ bien: el (click) nativo del host, y Enter cableado a mano -->
+<!-- ✅ bien: (clicked) cubre clic, Enter y Espacio -->
 <sui-command-menu-item type="left-icon" icon="file-list-3-line" title="Pedidos"
-                       (click)="ir('/empresa/pedidos')" (keydown.enter)="ir('/empresa/pedidos')" />
+                       (clicked)="ir('/empresa/pedidos')" />
 ```
 
 Resultado con segunda línea
@@ -191,7 +199,7 @@ Ir a una pantalla
   @for (p of pantallas(); track p.ruta) {
     <sui-command-menu-item type="left-icon" [icon]="p.icono" [title]="p.nombre"
                            [size]="bp.tactil() ? 'medium' : 'small'"
-                           (click)="ir(p.ruta)" (keydown.enter)="ir(p.ruta)" />
+                           (clicked)="ir(p.ruta)" />
   }
   @if (!bp.isMobile()) {
     <sui-command-menu-footer navigateLabel="Moverte" selectLabel="Abrir" [helpText]="null" />

package/docs/sui-command-menu-search/README.md

@@ -47,7 +47,7 @@ más oscuro) y con texto (lupa naranja, X para limpiar).
 
 ## Tamaño en mobile y en web
 
-No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20, hasta 600 px de ancho.
+No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20 (16 en ≤ 767 px, anti-zoom de iOS, desde 0.26.0), hasta 600 px de ancho.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
@@ -60,7 +60,7 @@ No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20, hasta
 
 ### Por dispositivo (D16)
 
-No aplica: no tiene input `size` (48 px de alto y texto 14 en todos los dispositivos), así que D16 no
+No aplica: no tiene input `size` (48 px de alto en todos los dispositivos; el texto sube a 16 solo por ancho, ≤ 767 px), así que D16 no
 lo mueve. Por dispositivo solo cambian dos cosas, y no con la misma señal:
 
 - **La X de limpiar se toca** (`sui-compact-button` `medium`, 20 px): va apagada en el celular **y en
@@ -79,7 +79,8 @@ En master-pedidos: `[shortcut]="!bp.isMobile()" [button]="!bp.tactil()"`, sin `[
 | input | tipo | default |
 |---|---|---|
 | `value` | `string` | `''` |
-| `placeholder` | `string` | `'Buscar o ir a…'` |
+| `placeholder` | `string \| null` | `null` |
+| `ariaLabel` | `string \| null` | `null` |
 | `shortcut` | `boolean` | `true` |
 | `button` | `boolean` | `true` |
 
@@ -89,6 +90,17 @@ En master-pedidos: `[shortcut]="!bp.isMobile()" [button]="!bp.tactil()"`, sin `[
 | `cleared` | `void` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `comun.limpiarBusqueda` | Limpiar búsqueda | — |
+| `menuComandos.placeholder` | Buscar o ir a… | `placeholder` |
+<!-- textos:fin -->
+
 `value` no es `model`, pero el par `value` + `valueChange` permite `[(value)]`. La X emite
 `valueChange('')` y `cleared`, y devuelve el foco al campo.
 
@@ -99,11 +111,9 @@ En master-pedidos: `[shortcut]="!bp.isMobile()" [button]="!bp.tactil()"`, sin `[
   del input `value`, no de lo escrito.
 - **El chip dice ⌘K, fijo.** En Windows el atajo es Ctrl+K y el chip no cambia; tampoco hay atajo
   real: el `keydown` global lo cablea quien arma el command menu.
-- **iOS hace zoom al enfocarlo**: el campo está en 14 px y la regla de la app pide 16 px en los
-  inputs de mobile (CLAUDE.md, «Responsive mobile»).
-- **El teclado no trae la lupa**: el `<input>` es `type="text"` sin `enterkeyhint="search"` (CLAUDE.md,
-  «La lupa del teclado»).
-- **El campo no tiene nombre accesible**: solo placeholder, sin `aria-label`.
+- **El nombre accesible es el placeholder** si no pasas `ariaLabel`.
+- Lleva `enterkeyhint="search"` y **no** `inputmode` (D14: `inputmode="search"` le quita la lupa al
+  teclado de Android). Texto en 16 en ≤ 767 px. Las dos cosas desde 0.26.0.
 - No tiene `disabled`.
 - El ícono de info del estado vacío es decorativo: no abre ayuda ni tiene `aria-label`.
 

package/docs/sui-compact-select/README.md

@@ -139,6 +139,8 @@ Implementa `ControlValueAccessor` (el valor es el `value` de la opción).
 - `type="icon"` **no muestra texto**: solo el ícono de la opción elegida.
   Pásale `ariaLabel` («Ordenar por»): es el nombre que lee el lector de pantalla (desde el
   04-10-2026; sin él usa el label de la opción elegida o el placeholder).
+- `type="country"` con **solo la bandera** (sin `value` ni `placeholder`) tampoco tiene texto:
+  pásale `ariaLabel` («País»). Si muestra el prefijo («+51») ya tiene nombre.
 - El menú mide al menos 200 px aunque el campo sea más angosto.
 - Las opciones miden 36 px en web hasta `medium`; 44 en `large` y en mobile (ver «Tamaño»).
 

package/docs/sui-content-card/README.md

@@ -132,7 +132,7 @@ En master-pedidos: `[size]="bp.tactil() ? 'large' : 'medium'"` (no hay helper pr
 | `companyLogoSrc` | `string \| null` | `null` |
 | `brand` | `SuiBrandLogoCompany \| null` | `null` |
 | `dismissible` | `boolean` | `true` |
-| `dismissAriaLabel` | `string` | `'Descartar'` |
+| `dismissAriaLabel` | `string \| null` | `null` |
 | `size` | `'medium' \| 'large'` | `'medium'` |
 | `disabled` | `boolean` | `false` |
 
@@ -141,6 +141,16 @@ En master-pedidos: `[size]="bp.tactil() ? 'large' : 'medium'"` (no hay helper pr
 | `dismiss` | `MouseEvent` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `varios.descartar` | Descartar | `dismissAriaLabel` |
+<!-- textos:fin -->
+
 ## Trampas
 
 - **`dismissible` arranca en `true`**: sin `[dismissible]="false"` aparece una X que no hace nada.

package/docs/sui-content-divider/README.md

@@ -111,6 +111,17 @@ En master-pedidos: no hay helper ni `[size]`; solo `type` y `text`.
 | `itemClick` | `{ item: SuiContentDividerItem; index: number; event: MouseEvent }` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `comun.accion` | Acción | `ariaLabel` |
+| `comun.accionN` | Acción {n} | `ariaLabel` de cada ítem |
+<!-- textos:fin -->
+
 Outputs: `(buttonClick)` en `icon-button` y `text-button`; `(itemClick)` con
 `{ item, index, event }` en los `-group`.
 

package/docs/sui-counter-input/README.md

@@ -139,14 +139,25 @@ En una fila o en un formulario `[size]="bp.tactil() ? 'xlarge' : 'medium'"`; jun
 | `step` | `number` | `1` |
 | `disabled` | `boolean` | `false` |
 | `ariaLabel` | `string \| null` | `null` |
-| `decrementLabel` | `string` | `'Disminuir'` |
-| `incrementLabel` | `string` | `'Aumentar'` |
+| `decrementLabel` | `string \| null` | `null` |
+| `incrementLabel` | `string \| null` | `null` |
 
 | output | payload |
 |---|---|
 | `valueChange` | `number` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `contador.disminuir` | Disminuir | `decrementLabel` |
+| `contador.aumentar` | Aumentar | `incrementLabel` |
+<!-- textos:fin -->
+
 `value` es un `input` y `valueChange` un `output`: `[(value)]` funciona. Implementa
 `ControlValueAccessor`.
 

package/docs/sui-date-selector/README.md

@@ -103,6 +103,17 @@ devuelve `bp.sizeControl()`, que también sirve).
 | `next` | `void` |
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `fecha.mesAnterior` | Mes anterior | — |
+| `fecha.mesSiguiente` | Mes siguiente | — |
+<!-- textos:fin -->
+
 ## Trampas
 
 - **`leftIcon` y `rightIcon` son booleanos**, no nombres de ícono: prenden o apagan las flechas.

package/docs/sui-datepicker/README.md

@@ -185,6 +185,20 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 Outputs: ninguno.
 <!-- api:fin -->
 
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `fecha.rangos` | Rangos predefinidos | — |
+| `fecha.eligePeriodo` | Elige el período | `placeholder` |
+| `fecha.eligeFecha` | Elige una fecha | `placeholder` |
+| `fecha.elegirPeriodo` | Elegir período | — |
+| `fecha.elegirFecha` | Elegir fecha | — |
+<!-- textos:fin -->
+
 Es `ControlValueAccessor`: con `mode="date"` el valor es `Date | null`; con `mode="range"`,
 `{ start, end }`.
 
@@ -218,6 +232,9 @@ interface DatepickerPreset { id: DatepickerPresetId; label: string; resolve: (ho
   anuncia con la fecha completa («martes 7 de octubre de 2026»), hoy lleva `aria-current="date"`,
   inicio y fin del rango salen seleccionados, y las flechas mueven el foco entre días (← → un
   día, ↑ ↓ una semana, Inicio/Fin a la punta de la semana). Las flechas no cambian de mes.
+  El pie (Cancelar/Aplicar) y la lista de rangos predefinidos son `div` (la lista con
+  `role="group"`), no `<footer>`/`<aside>`: esos crean landmarks de página y dos pickers en la
+  misma pantalla los duplicaban (09-10-2026).
 - Cierra con clic afuera y con Escape, y eso **descarta** la elección (como Cancelar).
 - Las piezas internas son `sui-date-selector`, `sui-day-label`, `sui-day-cell` y
   `sui-period-range`: no se arman a mano.