@kapiuara/ui 0.1.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2026 Nicolás Arquiel
+
+Todos los derechos reservados.
+
+Esta licencia cubre el paquete `@kapiuara/ui`: su código fuente, los artefactos
+compilados que distribuye, su documentación y sus recursos.
+
+La obra es propiedad del titular del copyright. No se concede ninguna licencia
+ni derecho de uso, copia, modificación, fusión, publicación, distribución,
+sublicencia ni venta, total o parcial, por el solo hecho de que un paquete esté
+disponible públicamente en un registro.
+
+La publicación en npm existe únicamente para que el titular distribuya e instale
+la obra en sus propios sistemas. Cualquier otro uso requiere permiso escrito y
+previo del titular, que puede solicitarse a través de su cuenta de npm
+(`nicolas.arquiel`).
+
+EL SOFTWARE SE ENTREGA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O
+IMPLÍCITA, INCLUIDAS ENTRE OTRAS LAS GARANTÍAS DE COMERCIABILIDAD, APTITUD PARA
+UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN.

package/README.md

@@ -4,7 +4,7 @@ Design system extraído del v2 de `ucugestionfront`. React 19 + TypeScript + Vit
 CSS nativo propio scopeado bajo `.kapi` (tokens como custom properties). Sin Radix / Bootstrap /
 Tailwind / Mantine. Iconos: sólo `lucide-react`. Fuente: Nunito.
 
-> Paquete privado del monorepo `kapiuara`. Todavía no se publica: es `private: true` y no hay nada publicado en el scope `@kapiuara` de npm. Ver `BRANDING.md` en la raíz del repo.
+> Publicado en npm como `@kapiuara/ui` (`0.1.0`, público): `npm i @kapiuara/ui`. El repo sigue siendo privado y el tarball lleva sólo `dist`. Ver `BRANDING.md` en la raíz del repo.
 
 ## Comandos
 
@@ -66,6 +66,43 @@ demo/             # playground: index.html, main.tsx, App.tsx, catalog.tsx, view
 - `.kapi-row` ya existe (space-between); para filas con gap usá `.kapi-cluster`.
 - Para sumar un componente al playground: una sección en `demo/catalog.tsx`.
 
+## Accesibilidad: nombrar lo que se repite
+
+Los componentes que emiten un **landmark** traen un nombre por defecto. Si ponés **dos del mismo tipo
+en la misma página**, dejan de distinguirse para un lector de pantalla y hay que nombrarlos:
+
+| Componente                      | Landmark | Nombre por defecto     | Cómo se pisa                       |
+| ------------------------------- | -------- | ---------------------- | ---------------------------------- |
+| `KapiRail`                      | `nav`    | "Navegación principal" | `aria-label` o `labels.navigation` |
+| `KapiContextSlot`               | `aside`  | "Panel contextual"     | `aria-label` o `labels.region`     |
+| `KapiBreadcrumb`                | `nav`    | "Ubicación"            | `aria-label` o `labels.navigation` |
+| `KapiPagination`                | `nav`    | "Paginación"           | `aria-label` o `labels.nav`        |
+| `KapiTableFilter`               | `search` | "Filtro de la tabla"   | `aria-label` o `labels.region`     |
+| `KapiFacetedSearch`             | `search` | "Búsqueda"             | `aria-label` o `labels.region`     |
+| `KapiTable` (su filtro interno) | `search` | "Filtro de la tabla"   | `labels.region`                    |
+
+```tsx
+<KapiTable columns={columns} rows={alumnos} filterable labels={{ region: "Filtro de alumnos" }} />
+<KapiTable columns={columns} rows={cursos} filterable labels={{ region: "Filtro de cursos" }} />
+```
+
+Para texto que sólo tienen que leer los lectores de pantalla (la cabecera de una columna de acción,
+por ejemplo) está la clase `.kapi-sr-only`:
+
+```tsx
+{ key: "abrir", label: <span className="kapi-sr-only">Abrir</span>, width: 90, align: "right", render: … }
+```
+
+### Paradas de tabulación de las regiones con scroll
+
+`main.kapi-content` (el contenedor que scrollea de `KapiShell`) y `.kapi-tablewrap` llevan
+`tabIndex={0}`. Es deliberado: una región que scrollea y no tiene nada enfocable adentro deja a un
+teclado sin forma de recorrerla. El costo es **una parada de tabulación por página** en el `main`,
+que además sirve de destino de salto.
+
+El contraste de los tokens de texto se verifica en `visual/a11y.spec.ts` (axe en Chromium real); los
+tests DOM no pueden hacerlo porque jsdom no resuelve colores computados.
+
 ## Referencia de props
 
 El playground trae una vista **Referencia → Referencia de props** (`#/referencia/props/KapiButton`): elige un

package/dist/components/data/KapiTable.d.ts

@@ -88,9 +88,15 @@ export type KapiTableLabels = {
     prevPage: string;
     nextPage: string;
     expandRow: string;
+    /** Cabecera de la columna de expandir: no se ve, la leen los lectores de pantalla. */
+    expandColumn: string;
     columns: string;
     resizeColumn: string;
     filter: string;
+    /** Nombre accesible de la región `role="search"` del filtro. Dos tablas filtrables en la misma
+     *  página necesitan nombres distintos para que sus regiones se distingan. Se reenvía tal cual a
+     *  `KapiTableFilter`, que define el default. */
+    region: string;
     filterPlaceholder: string;
     filterColumn: string;
     filterAll: string;