@groupteknology/vuno 2.0.0 → 4.0.0

package/dist/runtime/app/components/CopyButton/CopyButton.vue.d.ts

@@ -0,0 +1,18 @@
+import type { CopyButtonProps } from './CopyButton.types.js';
+declare const __VLS_export: import("vue").DefineComponent<CopyButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<CopyButtonProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    text: string;
+    disabled: boolean;
+    align: import("../Tooltip/Tooltip.types.js").TooltipAlignment;
+    size: import("../IconButton/IconButton.types.js").IconButtonSize;
+    ui: import("../../types/slots.js").ComponentUi<"copyButton">;
+    iconDescription: string;
+    autoAlign: boolean;
+    feedback: string;
+    feedbackTimeout: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/DataTable/DataTable.context.d.ts

@@ -0,0 +1,50 @@
+import { type ComputedRef, type InjectionKey, type Ref } from 'vue';
+import type { DataTableLegacySize, DataTableSize, TableToolbarSize } from './DataTable.types.js';
+/**
+ * Lo que el contenedor sabe y la tabla necesita: los `id` del título y la
+ * descripción, que son los que nombran el `<table>`.
+ *
+ * Vuno los reparte con un contexto por la misma razón: el `<table>` está
+ * dentro del contenedor pero no sabe si se le puso título, y sin esto la tabla
+ * se anunciaba sin nombre aunque la cabecera estuviera ahí arriba.
+ */
+export type TableContainerContext = {
+    descriptionId: ComputedRef<string | undefined>;
+    titleId: ComputedRef<string | undefined>;
+};
+/**
+ * Lo que la tabla decide y cada celda necesita para pintarse.
+ *
+ * En Vuno estas decisiones viven en clases del `<table>` y bajan por
+ * selectores de descendencia —`.vuno--data-table--xl td`—; aquí cada pieza
+ * resuelve su propio tema, así que las recibe. La alternativa era que quien
+ * escribe la tabla repitiera `size` en las veinte filas.
+ */
+export type TableContext = {
+    isSortable: Ref<boolean>;
+    size: Ref<DataTableSize>;
+    stickyHeader: Ref<boolean>;
+    useZebraStyles: Ref<boolean>;
+};
+/** La altura de la barra la heredan su búsqueda y su menú, como en Vuno. */
+export type TableToolbarContext = {
+    size: Ref<TableToolbarSize>;
+};
+export declare const tableContainerKey: InjectionKey<TableContainerContext>;
+export declare const tableKey: InjectionKey<TableContext>;
+export declare const tableToolbarKey: InjectionKey<TableToolbarContext>;
+/**
+ * Traduce los dos nombres heredados de la escala de alturas.
+ *
+ * `short` y `tall` eran los nombres de `sm` y `xl` en la primera versión de
+ * este paquete. Se traducen en un solo sitio para que el tema declare cinco
+ * alturas y no siete, y para que dos nombres del mismo píxel no puedan
+ * separarse al tocar uno.
+ */
+export declare function normalizeTableSize(size: DataTableLegacySize | DataTableSize | undefined): DataTableSize;
+/**
+ * La altura efectiva de una pieza: la suya si la declara, la de la tabla que
+ * la contiene si no, y `lg` cuando se usa suelta —Vuno también deja usar
+ * cada pieza fuera de un `DataTable`—.
+ */
+export declare function useTableSize(own?: () => DataTableLegacySize | DataTableSize | undefined): ComputedRef<DataTableSize>;

package/dist/runtime/app/components/DataTable/DataTable.context.js

@@ -0,0 +1,16 @@
+import { computed, inject } from "vue";
+export const tableContainerKey = Symbol("table-container");
+export const tableKey = Symbol("table");
+export const tableToolbarKey = Symbol("table-toolbar");
+export function normalizeTableSize(size) {
+  if (size === "short") return "sm";
+  if (size === "tall") return "xl";
+  return size ?? "lg";
+}
+export function useTableSize(own) {
+  const table = inject(tableKey, void 0);
+  return computed(() => {
+    const declared = own?.();
+    return declared ? normalizeTableSize(declared) : table?.size.value ?? "lg";
+  });
+}

package/dist/runtime/app/components/DataTable/DataTable.d.vue.ts

@@ -0,0 +1,51 @@
+import type { DataTableHeader, DataTableProps, DataTableRow } from './DataTable.types.js';
+type __VLS_Props = Omit<DataTableProps, 'expandedRows' | 'selectedRows' | 'sort'>;
+type __VLS_Slots = {
+    caption?: () => unknown;
+    cell?: (props: {
+        header: DataTableHeader;
+        row: DataTableRow;
+        value: unknown;
+    }) => unknown;
+    empty?: () => unknown;
+    expanded?: (props: {
+        row: DataTableRow;
+    }) => unknown;
+    header?: (props: {
+        header: DataTableHeader;
+    }) => unknown;
+    toolbar?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'expandedRows'?: string[];
+    'selectedRows'?: string[];
+    'sort'?: DataTableProps['sort'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expandedRows": (value: string[]) => any;
+    "update:selectedRows": (value: string[]) => any;
+    "update:sort": (value: import("./DataTable.types.js").DataTableSort | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:expandedRows"?: ((value: string[]) => any) | undefined;
+    "onUpdate:selectedRows"?: ((value: string[]) => any) | undefined;
+    "onUpdate:sort"?: ((value: import("./DataTable.types.js").DataTableSort | undefined) => any) | undefined;
+}>, {
+    description: string;
+    title: string;
+    size: import("./DataTable.types.js").DataTableLegacySize | import("./DataTable.types.js").DataTableSize;
+    ui: import("./DataTable.types.js").DataTableUi;
+    selectionMode: import("./DataTable.types.js").DataTableSelectionMode;
+    isSortable: boolean;
+    stickyHeader: boolean;
+    useStaticWidth: boolean;
+    useZebraStyles: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/DataTable/DataTable.theme.d.ts

@@ -0,0 +1,180 @@
+export declare const dataTableTheme: Record<"dataTable", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly row: "even:bg-(--vuno-layer-selected-01) even:hover:bg-(--vuno-layer-selected-hover-01) [&:not([data-parent-row])]:odd:[&>td]:border-b-(--vuno-layer-active-01) [&:not([data-parent-row])]:even:[&>td]:border-b-(--vuno-layer-active-01) [&:not([data-parent-row])]:odd:hover:[&>td]:border-b-(--vuno-layer-selected-hover-01) [&:not([data-parent-row])]:even:hover:[&>td]:border-b-(--vuno-layer-selected-hover-01)";
+        };
+        readonly selected: "true";
+        readonly zebra: "true";
+    }, {
+        readonly class: {
+            readonly header: "p-0 [&>div]:px-4";
+            readonly headerLabel: "leading-none";
+        };
+        readonly sortable: "true";
+    }, {
+        readonly class: {
+            readonly checkboxCell: "pt-4";
+        };
+        readonly radio: "true";
+        readonly size: "xl";
+    }];
+    readonly slots: {
+        readonly actionList: "flex h-12 items-center [&_button:disabled]:border-transparent [&_button:disabled]:bg-transparent [&_button:disabled]:text-(--vuno-text-on-color) [&_button:disabled]:opacity-50";
+        readonly batchActions: "pointer-events-none absolute inset-x-0 bottom-0 z-1 flex translate-y-full items-center justify-between bg-(--vuno-background-brand) opacity-0 transition duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none [&_button]:px-4 [&_button]:whitespace-nowrap [&_button:focus]:border-transparent [&_button:focus]:shadow-none [&_button:focus]:outline-solid [&_button:focus]:outline-2 [&_button:focus]:-outline-offset-2 [&_button:focus]:outline-(--vuno-layer-01) [&_button_[data-vuno-icon]]:static [&_button_[data-vuno-icon]]:ms-2";
+        readonly batchCancel: "before:absolute before:start-0 before:top-4 before:block before:h-4 before:w-px before:bg-(--vuno-text-on-color) before:opacity-100 before:transition-opacity before:duration-(--vuno-duration-fast-02) before:ease-(--vuno-easing-standard-productive) before:content-[''] motion-reduce:before:transition-none [:focus+&]:before:opacity-0 [:hover+&]:before:opacity-0";
+        readonly batchDivider: "ps-2";
+        readonly batchSummary: "sticky start-0 flex min-h-12 items-center bg-(--vuno-background-brand) px-4 text-(--vuno-text-on-color)";
+        readonly batchText: "text-sm leading-[1.125rem] tracking-normal";
+        readonly body: "bg-(--vuno-layer-01) text-sm leading-[1.125rem] tracking-normal";
+        readonly cell: "border-t border-b border-t-transparent border-b-(--vuno-border-subtle-01) px-4 text-start align-middle text-(--vuno-text-secondary) [tr[data-parent-row]:first-of-type>&]:border-t-(--vuno-border-subtle-00)";
+        readonly checkbox: "w-auto";
+        readonly checkboxCell: "min-w-10 ps-4 pe-1";
+        readonly childRow: "pt-4 pb-6";
+        readonly container: "relative w-full pt-0.5";
+        readonly content: "block overflow-x-auto focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus)";
+        readonly decorator: "flex items-center";
+        readonly description: "text-sm leading-[1.125rem] tracking-normal text-(--vuno-text-secondary) md:max-w-[50ch] lg:max-w-[80ch]";
+        readonly empty: "px-4 py-8 text-center text-sm text-(--vuno-text-secondary)";
+        readonly expandButton: "inline-flex h-[calc(100%+1px)] w-full cursor-pointer items-center justify-center px-2 focus:shadow-[inset_0_0_0_2px_var(--vuno-focus)] focus:outline-none";
+        readonly expandCell: "h-8 w-8 p-2 pe-0 align-middle";
+        readonly expandedCell: "border-b border-(--vuno-border-subtle-00) bg-(--vuno-layer-hover-01) ps-14 pe-4 hover:text-(--vuno-text-primary)";
+        readonly expandedRow: "";
+        readonly expandIcon: "size-4 rotate-90 text-(--vuno-layer-selected-inverse) transition-transform duration-(--vuno-duration-moderate-01) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none";
+        readonly head: "bg-(--vuno-layer-accent-01) text-sm leading-[1.125rem] font-semibold tracking-normal";
+        readonly header: "bg-(--vuno-layer-accent-01) px-4 text-start align-middle text-(--vuno-text-primary)";
+        readonly headerLabel: "text-start";
+        readonly innerContainer: "bg-(--vuno-layer-accent-01) [transform:translateZ(0)]";
+        readonly radioControl: "-me-0.5";
+        readonly row: "h-12 transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-hover-01) hover:[&>td]:border-b-(--vuno-layer-hover-01) hover:[&>td]:text-(--vuno-text-primary) motion-reduce:transition-none";
+        readonly sort: "group/sort flex min-h-full w-full cursor-pointer items-center justify-between bg-(--vuno-layer-accent-01) ps-4 text-start font-[inherit] leading-none text-(--vuno-text-primary) transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-selected-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) motion-reduce:transition-none";
+        readonly sortDescription: "sr-only";
+        readonly sortFlex: "flex min-h-12 w-full items-center justify-between";
+        readonly sortIcon: "mx-2 size-5 min-w-4 shrink-0";
+        readonly table: "w-full border-collapse border-spacing-0";
+        readonly title: "text-xl leading-7 text-(--vuno-text-primary)";
+        readonly titleBar: "bg-(--vuno-layer-01) px-4 pt-4 pb-6";
+        readonly toolbar: "relative z-1 flex h-12 min-h-12 w-full bg-(--vuno-layer-01)";
+        readonly toolbarAction: "flex size-12 cursor-pointer items-center justify-center bg-transparent transition-colors duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-field-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) aria-expanded:bg-(--vuno-layer-02) aria-expanded:hover:bg-(--vuno-layer-02) motion-reduce:transition-none";
+        readonly toolbarContent: "flex h-full w-full justify-end transition-[transform,clip-path] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) [[data-batch-active]~&]:translate-y-full [[data-batch-active]~&]:[clip-path:polygon(0_0,100%_0,100%_0,0_0)] motion-reduce:transition-none";
+        readonly toolbarMenu: "bg-(--vuno-layer-02)";
+        readonly toolbarSearch: "flex h-full items-center transition-[transform,clip-path] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) [[data-batch-active]~&]:translate-y-full [[data-batch-active]~&]:[clip-path:polygon(0_0,100%_0,100%_0,0_0)] motion-reduce:transition-none";
+        readonly toolbarSearchInput: "not-placeholder-shown:bg-(--vuno-field-hover-01)";
+        readonly toolbarSearchMagnifier: "hover:bg-(--vuno-field-hover-01)";
+    };
+    readonly variants: {
+        /** La barra de lote visible: recupera el puntero, la opacidad y el sitio. */
+        readonly batch: {
+            readonly false: {};
+            readonly true: {
+                readonly batchActions: "pointer-events-auto translate-y-0 opacity-100";
+            };
+        };
+        /**
+         * El icono de orden solo aparece al apuntar o enfocar mientras
+         * la columna no ordena; cuando ordena se queda fijo y la cabecera pasa
+         * al fondo de columna activa.
+         */
+        readonly direction: {
+            readonly ASC: {
+                readonly sort: "bg-(--vuno-layer-selected-hover-01)";
+            };
+            readonly DESC: {
+                readonly sort: "bg-(--vuno-layer-selected-hover-01)";
+            };
+            readonly NONE: {
+                readonly sortIcon: "opacity-0 group-hover/sort:opacity-100 group-focus/sort:opacity-100";
+            };
+        };
+        readonly expanded: {
+            readonly false: {};
+            readonly true: {
+                readonly expandIcon: "-rotate-90";
+                readonly row: "has-[+tr:hover]:bg-(--vuno-layer-hover-01) [&>td]:border-b-(--vuno-border-subtle-00) hover:[&>td]:border-b-(--vuno-border-subtle-00)";
+            };
+        };
+        readonly radio: {
+            readonly false: {};
+            readonly true: {
+                readonly checkboxCell: "w-12";
+            };
+        };
+        readonly selected: {
+            readonly false: {};
+            readonly true: {
+                readonly row: "bg-(--vuno-layer-selected-01) hover:bg-(--vuno-layer-selected-hover-01) [&>td]:border-b-(--vuno-layer-active-01) hover:[&>td]:border-b-(--vuno-layer-selected-hover-01) [&>td]:text-(--vuno-text-primary)";
+            };
+        };
+        readonly size: {
+            readonly xs: {
+                readonly cell: "py-0.5";
+                readonly checkboxCell: "pt-0 pb-0";
+                readonly expandCell: "size-6 p-0 ps-2";
+                readonly header: "h-6";
+                readonly headerLabel: "py-0.5";
+                readonly row: "h-6";
+                readonly sortFlex: "min-h-6";
+                readonly toolbar: "h-6 min-h-6";
+            };
+            readonly sm: {
+                readonly cell: "pt-[7px] pb-1.5";
+                readonly checkboxCell: "pt-[3px] pb-[3px]";
+                readonly expandCell: "size-8 p-0 ps-2";
+                readonly header: "h-8";
+                readonly headerLabel: "py-[7px]";
+                readonly row: "h-8";
+                readonly sortFlex: "min-h-8";
+                readonly toolbar: "h-8 min-h-8";
+            };
+            readonly md: {
+                readonly cell: "pt-[7px] pb-1.5";
+                readonly checkboxCell: "pt-[3px] pb-[3px]";
+                readonly expandCell: "size-10 py-1 ps-2 pe-0";
+                readonly header: "h-10";
+                readonly headerLabel: "py-[7px]";
+                readonly row: "h-10";
+                readonly sortFlex: "min-h-10";
+            };
+            readonly lg: {
+                readonly header: "h-12";
+                readonly row: "h-12";
+                readonly sortFlex: "min-h-12";
+                readonly toolbar: "h-12 min-h-12";
+            };
+            readonly xl: {
+                readonly cell: "py-4 align-top";
+                readonly checkboxCell: "pt-[13px]";
+                readonly expandButton: "w-8";
+                readonly expandCell: "h-16 pt-2.5 pb-[22px] align-top";
+                readonly header: "h-16 align-top";
+                readonly headerLabel: "py-4";
+                readonly row: "h-16";
+                readonly sortFlex: "min-h-16 items-start";
+                readonly sortIcon: "mt-[13px]";
+            };
+        };
+        readonly sortable: {
+            readonly false: {};
+            readonly true: {};
+        };
+        readonly static: {
+            readonly false: {};
+            readonly true: {
+                readonly container: "w-fit";
+                readonly table: "w-auto";
+            };
+        };
+        readonly sticky: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "max-h-75 overflow-y-auto";
+                readonly header: "sticky top-0 z-1 border-b border-b-(--vuno-layer-active-01)";
+            };
+        };
+        readonly zebra: {
+            readonly false: {};
+            readonly true: {
+                readonly row: "even:bg-(--vuno-layer-accent-01) [&:not([data-parent-row])]:odd:[&>td]:border-b-(--vuno-layer-01) [&:not([data-parent-row])]:even:[&>td]:border-b-(--vuno-layer-accent-01) [&:not([data-parent-row])]:odd:hover:[&>td]:border-b-(--vuno-layer-hover-01) [&:not([data-parent-row])]:even:hover:[&>td]:border-b-(--vuno-layer-hover-01)";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/DataTable/DataTable.theme.js

@@ -0,0 +1,175 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const dataTableTheme = defineTheme("dataTable", {
+  compoundVariants: [
+    /*
+     * La fila seleccionada gana a la cebra. La cebra pinta con `even:`, que
+     * es un selector con más especificidad que una clase suelta, así que sin
+     * esta combinación una fila par seleccionada seguía gris. Con el filete
+     * pasa igual: la cebra lo tiñe del color de su propia banda y aquí
+     * vuelve al de fila activa, que es lo que separa una selección de la
+     * siguiente.
+     */
+    { class: { row: "even:bg-(--vuno-layer-selected-01) even:hover:bg-(--vuno-layer-selected-hover-01) [&:not([data-parent-row])]:odd:[&>td]:border-b-(--vuno-layer-active-01) [&:not([data-parent-row])]:even:[&>td]:border-b-(--vuno-layer-active-01) [&:not([data-parent-row])]:odd:hover:[&>td]:border-b-(--vuno-layer-selected-hover-01) [&:not([data-parent-row])]:even:hover:[&>td]:border-b-(--vuno-layer-selected-hover-01)" }, selected: "true", zebra: "true" },
+    /*
+     * Vuno quita el relleno del `th` de una tabla ordenable: el botón de
+     * orden ocupa la celda entera. La cabecera que no ordena recupera el
+     * relleno en su etiqueta, y el selector de hijo directo es lo que
+     * distingue las dos: en la columna ordenable la etiqueta vive dentro del
+     * botón, no colgando del `th`. La caja de línea se iguala a la del
+     * botón, que va a `leading-none`: sin eso la etiqueta suelta conserva
+     * los 18 px del `thead` y la línea base baila entre columnas vecinas de
+     * la misma cabecera.
+     */
+    { class: { header: "p-0 [&>div]:px-4", headerLabel: "leading-none" }, sortable: "true" },
+    /*
+     * El radio es más alto que la marca de la casilla, así que en `xl` baja
+     * el paso completo de 16 px en vez de los 13 que alinean la casilla con
+     * la primera línea de la fila.
+     */
+    { class: { checkboxCell: "pt-4" }, radio: "true", size: "xl" }
+  ],
+  slots: {
+    /*
+     * Una acción bloqueada no es una caja gris sobre el azul de marca: la
+     * barra conserva su fondo y la etiqueta se apaga a la mitad. Es la
+     * anulación que el origen escribe para esta lista, y sin ella el
+     * deshabilitado genérico del botón abre un hueco gris en la barra.
+     */
+    actionList: "flex h-12 items-center [&_button:disabled]:border-transparent [&_button:disabled]:bg-transparent [&_button:disabled]:text-(--vuno-text-on-color) [&_button:disabled]:opacity-50",
+    /*
+     * Los botones de la barra no son los de una página: el relleno vuelve a
+     * ser simétrico, el icono deja de estar posicionado para fluir detrás de
+     * la etiqueta y el foco se dibuja con un contorno en color de capa,
+     * porque el doble trazo azul del botón no se distingue sobre el fondo de
+     * marca. Se declara por descendencia y no en cada botón para que alcance
+     * también a las acciones que llegan por el slot.
+     */
+    batchActions: "pointer-events-none absolute inset-x-0 bottom-0 z-1 flex translate-y-full items-center justify-between bg-(--vuno-background-brand) opacity-0 transition duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none [&_button]:px-4 [&_button]:whitespace-nowrap [&_button:focus]:border-transparent [&_button:focus]:shadow-none [&_button:focus]:outline-solid [&_button:focus]:outline-2 [&_button:focus]:-outline-offset-2 [&_button:focus]:outline-(--vuno-layer-01) [&_button_[data-vuno-icon]]:static [&_button_[data-vuno-icon]]:ms-2",
+    /*
+     * El filete que separa la salida del grupo de acciones. Se desvanece
+     * cuando la acción contigua recibe puntero o foco: así la línea no corta
+     * el estado del botón vecino.
+     */
+    batchCancel: "before:absolute before:start-0 before:top-4 before:block before:h-4 before:w-px before:bg-(--vuno-text-on-color) before:opacity-100 before:transition-opacity before:duration-(--vuno-duration-fast-02) before:ease-(--vuno-easing-standard-productive) before:content-[''] motion-reduce:before:transition-none [:focus+&]:before:opacity-0 [:hover+&]:before:opacity-0",
+    batchDivider: "ps-2",
+    batchSummary: "sticky start-0 flex min-h-12 items-center bg-(--vuno-background-brand) px-4 text-(--vuno-text-on-color)",
+    batchText: "text-sm leading-[1.125rem] tracking-normal",
+    body: "bg-(--vuno-layer-01) text-sm leading-[1.125rem] tracking-normal",
+    cell: "border-t border-b border-t-transparent border-b-(--vuno-border-subtle-01) px-4 text-start align-middle text-(--vuno-text-secondary) [tr[data-parent-row]:first-of-type>&]:border-t-(--vuno-border-subtle-00)",
+    checkbox: "w-auto",
+    checkboxCell: "min-w-10 ps-4 pe-1",
+    childRow: "pt-4 pb-6",
+    container: "relative w-full pt-0.5",
+    content: "block overflow-x-auto focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus)",
+    decorator: "flex items-center",
+    description: "text-sm leading-[1.125rem] tracking-normal text-(--vuno-text-secondary) md:max-w-[50ch] lg:max-w-[80ch]",
+    empty: "px-4 py-8 text-center text-sm text-(--vuno-text-secondary)",
+    expandButton: "inline-flex h-[calc(100%+1px)] w-full cursor-pointer items-center justify-center px-2 focus:shadow-[inset_0_0_0_2px_var(--vuno-focus)] focus:outline-none",
+    expandCell: "h-8 w-8 p-2 pe-0 align-middle",
+    expandedCell: "border-b border-(--vuno-border-subtle-00) bg-(--vuno-layer-hover-01) ps-14 pe-4 hover:text-(--vuno-text-primary)",
+    expandedRow: "",
+    expandIcon: "size-4 rotate-90 text-(--vuno-layer-selected-inverse) transition-transform duration-(--vuno-duration-moderate-01) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none",
+    head: "bg-(--vuno-layer-accent-01) text-sm leading-[1.125rem] font-semibold tracking-normal",
+    header: "bg-(--vuno-layer-accent-01) px-4 text-start align-middle text-(--vuno-text-primary)",
+    headerLabel: "text-start",
+    innerContainer: "bg-(--vuno-layer-accent-01) [transform:translateZ(0)]",
+    /* La columna del radio es 4 px más ancha que la de la casilla: el círculo se corre 2 px para quedar en el mismo eje. */
+    radioControl: "-me-0.5",
+    row: "h-12 transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-hover-01) hover:[&>td]:border-b-(--vuno-layer-hover-01) hover:[&>td]:text-(--vuno-text-primary) motion-reduce:transition-none",
+    sort: "group/sort flex min-h-full w-full cursor-pointer items-center justify-between bg-(--vuno-layer-accent-01) ps-4 text-start font-[inherit] leading-none text-(--vuno-text-primary) transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-selected-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) motion-reduce:transition-none",
+    sortDescription: "sr-only",
+    sortFlex: "flex min-h-12 w-full items-center justify-between",
+    sortIcon: "mx-2 size-5 min-w-4 shrink-0",
+    table: "w-full border-collapse border-spacing-0",
+    title: "text-xl leading-7 text-(--vuno-text-primary)",
+    titleBar: "bg-(--vuno-layer-01) px-4 pt-4 pb-6",
+    toolbar: "relative z-1 flex h-12 min-h-12 w-full bg-(--vuno-layer-01)",
+    toolbarAction: "flex size-12 cursor-pointer items-center justify-center bg-transparent transition-colors duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-field-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) aria-expanded:bg-(--vuno-layer-02) aria-expanded:hover:bg-(--vuno-layer-02) motion-reduce:transition-none",
+    /*
+     * Apartarse no basta: sin recortar la caja a altura cero, lo desplazado
+     * sigue pintado sobre la cabecera de la tabla y se ven dos barras a la
+     * vez. El recorte salta —de `none` a polígono no hay interpolación— y es
+     * el desplazamiento el que se anima.
+     */
+    toolbarContent: "flex h-full w-full justify-end transition-[transform,clip-path] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) [[data-batch-active]~&]:translate-y-full [[data-batch-active]~&]:[clip-path:polygon(0_0,100%_0,100%_0,0_0)] motion-reduce:transition-none",
+    /* El panel del menú de la barra sube un escalón de capa: se despega del `layer-01` de la propia barra. */
+    toolbarMenu: "bg-(--vuno-layer-02)",
+    toolbarSearch: "flex h-full items-center transition-[transform,clip-path] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) [[data-batch-active]~&]:translate-y-full [[data-batch-active]~&]:[clip-path:polygon(0_0,100%_0,100%_0,0_0)] motion-reduce:transition-none",
+    /* El filtro plegable se tiñe mientras conserva texto: es la señal de que la tabla está filtrada. */
+    toolbarSearchInput: "not-placeholder-shown:bg-(--vuno-field-hover-01)",
+    toolbarSearchMagnifier: "hover:bg-(--vuno-field-hover-01)"
+  },
+  variants: {
+    /** La barra de lote visible: recupera el puntero, la opacidad y el sitio. */
+    batch: {
+      false: {},
+      true: { batchActions: "pointer-events-auto translate-y-0 opacity-100" }
+    },
+    /**
+     * El icono de orden solo aparece al apuntar o enfocar mientras
+     * la columna no ordena; cuando ordena se queda fijo y la cabecera pasa
+     * al fondo de columna activa.
+     */
+    direction: {
+      ASC: { sort: "bg-(--vuno-layer-selected-hover-01)" },
+      DESC: { sort: "bg-(--vuno-layer-selected-hover-01)" },
+      NONE: { sortIcon: "opacity-0 group-hover/sort:opacity-100 group-focus/sort:opacity-100" }
+    },
+    expanded: {
+      false: {},
+      /*
+       * La fila abierta conserva su filete inferior —es lo que deja leer
+       * dónde acaba el dato y empieza el detalle—, también al apuntarla,
+       * donde el resto de filas lo funde con el fondo. Y se tiñe cuando el
+       * puntero está sobre la hija, que es como Vuno presenta las dos como
+       * una sola unidad.
+       */
+      true: { expandIcon: "-rotate-90", row: "has-[+tr:hover]:bg-(--vuno-layer-hover-01) [&>td]:border-b-(--vuno-border-subtle-00) hover:[&>td]:border-b-(--vuno-border-subtle-00)" }
+    },
+    radio: {
+      false: {},
+      true: { checkboxCell: "w-12" }
+    },
+    selected: {
+      false: {},
+      /* La divisoria sigue al relleno también bajo el puntero: la fila elegida se lee como un bloque. */
+      true: { row: "bg-(--vuno-layer-selected-01) hover:bg-(--vuno-layer-selected-hover-01) [&>td]:border-b-(--vuno-layer-active-01) hover:[&>td]:border-b-(--vuno-layer-selected-hover-01) [&>td]:text-(--vuno-text-primary)" }
+    },
+    /*
+     * La columna de elección no sigue el relleno de la celda: la marca es
+     * más baja que una línea de texto y necesita su propio reparto —0 en
+     * `xs`, 3 px en `sm` y `md`, 13 px arriba en `xl`— para quedar en el eje
+     * del dato. En `xl` el chevron se estrecha a 32 px, porque la celda pasa
+     * a medir 64, y el icono de orden baja los 13 px que lo alinean con la
+     * etiqueta, que allí se apoya arriba.
+     */
+    size: {
+      xs: { cell: "py-0.5", checkboxCell: "pt-0 pb-0", expandCell: "size-6 p-0 ps-2", header: "h-6", headerLabel: "py-0.5", row: "h-6", sortFlex: "min-h-6", toolbar: "h-6 min-h-6" },
+      sm: { cell: "pt-[7px] pb-1.5", checkboxCell: "pt-[3px] pb-[3px]", expandCell: "size-8 p-0 ps-2", header: "h-8", headerLabel: "py-[7px]", row: "h-8", sortFlex: "min-h-8", toolbar: "h-8 min-h-8" },
+      md: { cell: "pt-[7px] pb-1.5", checkboxCell: "pt-[3px] pb-[3px]", expandCell: "size-10 py-1 ps-2 pe-0", header: "h-10", headerLabel: "py-[7px]", row: "h-10", sortFlex: "min-h-10" },
+      lg: { header: "h-12", row: "h-12", sortFlex: "min-h-12", toolbar: "h-12 min-h-12" },
+      xl: { cell: "py-4 align-top", checkboxCell: "pt-[13px]", expandButton: "w-8", expandCell: "h-16 pt-2.5 pb-[22px] align-top", header: "h-16 align-top", headerLabel: "py-4", row: "h-16", sortFlex: "min-h-16 items-start", sortIcon: "mt-[13px]" }
+    },
+    sortable: {
+      false: {},
+      true: {}
+    },
+    static: {
+      false: {},
+      true: { container: "w-fit", table: "w-auto" }
+    },
+    sticky: {
+      false: {},
+      true: { content: "max-h-75 overflow-y-auto", header: "sticky top-0 z-1 border-b border-b-(--vuno-layer-active-01)" }
+    },
+    /*
+     * Con cebra las divisorias desaparecen: cada filete toma el color de su
+     * propia banda y es el cambio de banda —no una línea— lo que separa. La
+     * fila madre de una expansión queda fuera, que tiene su propio filete.
+     */
+    zebra: {
+      false: {},
+      true: { row: "even:bg-(--vuno-layer-accent-01) [&:not([data-parent-row])]:odd:[&>td]:border-b-(--vuno-layer-01) [&:not([data-parent-row])]:even:[&>td]:border-b-(--vuno-layer-accent-01) [&:not([data-parent-row])]:odd:hover:[&>td]:border-b-(--vuno-layer-hover-01) [&:not([data-parent-row])]:even:hover:[&>td]:border-b-(--vuno-layer-hover-01)" }
+    }
+  }
+});

package/dist/runtime/app/components/DataTable/DataTable.types.d.ts

@@ -0,0 +1,154 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * El contrato de toda la familia de tabla.
+ *
+ * Vive aquí y no repartido en veinte ficheros porque `DataTable` es el owner
+ * de la familia: las piezas `Table*` son sus partes públicas, comparten la
+ * clave de tema `dataTable` y se escriben siempre juntas. Un `.types.ts` por
+ * carpeta habría multiplicado por veinte los mismos tres alias.
+ */
+/** Alturas de fila de Vuno: 24, 32, 40, 48 y 64 px. */
+export type DataTableSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+/**
+ * Los nombres que Vuno daba a `sm` y `xl` antes de unificar la escala.
+ *
+ * Se siguen aceptando porque estaban en el contrato público de este paquete;
+ * `normalizeTableSize` los traduce antes de llegar al tema, así que no existen
+ * más allá de la prop.
+ *
+ * @deprecated Usa `sm` y `xl`.
+ */
+export type DataTableLegacySize = 'short' | 'tall';
+/** Los tres estados de orden de Vuno. El ciclo es `NONE → ASC → DESC → NONE`. */
+export type DataTableSortDirection = 'ASC' | 'DESC' | 'NONE';
+export type DataTableSort = {
+    direction: DataTableSortDirection;
+    key: string;
+};
+/** `none` no pinta columna de selección; `single` usa radio y `multiple`, casilla. */
+export type DataTableSelectionMode = 'multiple' | 'none' | 'single';
+/** El tamaño de la barra de herramientas: Vuno la limita a 24, 32 y 48 px. */
+export type TableToolbarSize = Extract<DataTableSize, 'lg' | 'sm' | 'xs'>;
+export type DataTableRow = {
+    id: string;
+    /** Saca la fila de la selección sin sacarla de la tabla. */
+    disabled?: boolean;
+} & Record<string, unknown>;
+export type DataTableHeader = {
+    header: string;
+    /** Habilita el botón de orden de esta columna. */
+    isSortable?: boolean;
+    key: string;
+    /** @deprecated Alias histórico de `isSortable`. */
+    sortable?: boolean;
+};
+/** Todo lo que la familia puede tematizar. */
+export type DataTableUi = ComponentUi<'dataTable'>;
+export type DataTableProps = {
+    /** Segunda línea de la cabecera del contenedor; acompaña a `title`. */
+    description?: string;
+    /** Filas abiertas. Con el slot `expanded` activa la columna de expansión. */
+    expandedRows?: string[];
+    headers: DataTableHeader[];
+    /**
+     * Aplica la geometría de columna ordenable a toda la tabla. No decide qué
+     * columnas ordenan —eso lo dice cada `header`—: Vuno quita el relleno del
+     * `th` para que el botón ocupe la celda entera.
+     */
+    isSortable?: boolean;
+    rows: DataTableRow[];
+    selectedRows?: string[];
+    selectionMode?: DataTableSelectionMode;
+    size?: DataTableLegacySize | DataTableSize;
+    sort?: DataTableSort;
+    stickyHeader?: boolean;
+    /** Título de la cabecera del contenedor; también nombra la tabla. */
+    title?: string;
+    ui?: DataTableUi;
+    /** Ajusta la tabla a su contenido en lugar de ocupar todo el ancho. */
+    useStaticWidth?: boolean;
+    useZebraStyles?: boolean;
+};
+export type TableContainerProps = {
+    description?: string;
+    stickyHeader?: boolean;
+    title?: string;
+    ui?: DataTableUi;
+    useStaticWidth?: boolean;
+};
+export type TableProps = {
+    isSortable?: boolean;
+    size?: DataTableLegacySize | DataTableSize;
+    stickyHeader?: boolean;
+    ui?: DataTableUi;
+    useStaticWidth?: boolean;
+    useZebraStyles?: boolean;
+};
+export type TableHeaderProps = {
+    id?: string;
+    colspan?: number;
+    isSortable?: boolean;
+    /** Marca la columna por la que la tabla está ordenada ahora mismo. */
+    isSortHeader?: boolean;
+    scope?: string;
+    sortDirection?: DataTableSortDirection;
+    ui?: DataTableUi;
+};
+export type TableSelectRowProps = {
+    id?: string;
+    name?: string;
+    /** Nombre accesible del control; sin él todas las filas se anuncian igual. */
+    ariaLabel?: string;
+    disabled?: boolean;
+    /** Radio en lugar de casilla, para selección simple. */
+    radio?: boolean;
+    ui?: DataTableUi;
+};
+export type TableSelectAllProps = {
+    id?: string;
+    name?: string;
+    ariaLabel?: string;
+    disabled?: boolean;
+    /** La selección alcanza a algunas filas, no a todas. */
+    indeterminate?: boolean;
+    ui?: DataTableUi;
+};
+export type TableExpandRowProps = {
+    ariaControls?: string;
+    ariaLabel?: string;
+    /** `id` del `th` de expansión, para que la celda declare su cabecera. */
+    expandHeader?: string;
+    isSelected?: boolean;
+    ui?: DataTableUi;
+};
+export type TableToolbarProps = {
+    ariaLabel?: string;
+    size?: TableToolbarSize;
+    ui?: DataTableUi;
+};
+export type TableToolbarSearchProps = {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    labelText?: string;
+    /** Mantiene el campo siempre abierto en vez de plegarlo tras el icono. */
+    persistent?: boolean;
+    placeholder?: string;
+    size?: TableToolbarSize;
+    ui?: DataTableUi;
+};
+export type TableBatchActionsProps = {
+    /**
+     * Si la barra de lote está fuera o dentro.
+     *
+     * Es una prop y no `totalSelected > 0` porque cancelar vacía la selección y
+     * **cierra** la barra, mientras que desmarcar la última fila a mano la deja
+     * abierta con el recuento a cero: son dos transiciones distintas que el
+     * recuento por sí solo no distingue.
+     */
+    shouldShowBatchActions?: boolean;
+    /** Total de filas de la tabla. Declararlo añade la acción de elegirlas todas. */
+    totalCount?: number;
+    totalSelected: number;
+    ui?: DataTableUi;
+};