@groupteknology/vuno 2.0.0 → 3.0.0

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

@@ -1,49 +1,17 @@
-import type { VunoRadius } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-import type { VunoTableDefinition, VunoTableFailure, VunoTableQuery, VunoTableRow } from '#vuno/types/table';
-declare const __VLS_export: <TRow extends VunoTableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
-        data: TRow[];
-        definition: VunoTableDefinition<TRow>;
-        /**
-         * Fallo de la consulta. Sin esto, un error se pintaría como «no hay
-         * resultados» y la tabla afirmaría que no hay nada cuando en realidad
-         * no se pudo saber.
-         */
-        failure?: VunoTableFailure;
-        loading?: boolean;
-        /** La curvatura. Sin valor, la que traiga el tema. */
-        radius?: VunoRadius;
-        /** Total de filas en servidor, no las de la página actual. */
-        total?: number;
-        ui?: VunoUi<"table">;
-    } & {
-        /**
-             * Estado de consulta. El consumidor lo observa y devuelve `data` y `total`.
-             *
-             * Es obligatorio a propósito: la tabla no trae datos por sí misma, así que
-             * un estado interno avanzaría de página sin que nadie pidiera la siguiente
-             * —el pie diría «11-20» mientras se siguen viendo las filas 1-10—. Dónde
-             * vive ese estado lo decide `useTableQuery`: un `ref` normal o la
-             * query string.
-             */
-        query: VunoTableQuery;
-        /** Claves de las filas seleccionadas, no las filas: con paginación en servidor las de otras páginas no están cargadas. */
+import type { VunoTableSort } from '#vuno/types/table';
+import type { VunoTableProps } from './Table.types.js';
+declare const __VLS_export: <TRow extends import("#vuno/types/table").VunoTableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(VunoTableProps<TRow> & {
         selection?: (number | string)[];
+        sort?: null | VunoTableSort;
     }) & {
         onRowClick?: ((row: TRow) => any) | undefined;
-        "onUpdate:query"?: ((value: VunoTableQuery) => any) | undefined;
         "onUpdate:selection"?: ((value: (string | number)[]) => any) | undefined;
+        "onUpdate:sort"?: ((value: VunoTableSort | null) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
-    expose: (exposed: import("vue").ShallowUnwrapRef<{
-        clearFilters: () => void;
-        clearQuery: () => void;
-        clearSearch: () => void;
-        clearSelection: () => void;
-        goToPage: (page: number) => void;
-    }>) => void;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {
         [key: `cell-${string}`]: (props: {
@@ -51,23 +19,8 @@ declare const __VLS_export: <TRow extends VunoTableRow>(__VLS_props: NonNullable
             value: unknown;
         }) => unknown;
         empty?: () => unknown;
-        'empty-actions'?: () => unknown;
-        'no-matches'?: (props: {
-            clear: () => void;
-        }) => unknown;
-        'no-matches-actions'?: (props: {
-            clear: () => void;
-        }) => unknown;
-        selection?: (props: {
-            count: number;
-            keys: (number | string)[];
-            clear: () => void;
-        }) => unknown;
-        toolbar?: (props: {
-            query: VunoTableQuery;
-        }) => unknown;
     };
-    emit: ((evt: "rowClick", row: TRow) => void) & (((event: "update:query", value: VunoTableQuery) => void) & ((event: "update:selection", value: (string | number)[]) => void));
+    emit: ((evt: "rowClick", row: TRow) => void) & (((event: "update:selection", value: (string | number)[]) => void) & ((event: "update:sort", value: VunoTableSort | null) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/runtime/app/components/Table/internal/CellBoolean/CellBoolean.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
 import Icon from "#vuno/components/Icon/Icon.vue";
+import Text from "#vuno/components/Text/Text.vue";
 defineOptions({ name: "VunoCellBoolean" });
 const props = defineProps({
   column: { type: null, required: true },
@@ -16,10 +17,13 @@ const ui = useTheme("cellBoolean", void 0, () => ({ value: props.value ? "true"
 </script>
 
 <template>
-    <span
+    <Text
         v-if="label"
         :class="ui.label"
-        >{{ label }}</span
+        tag="span"
+        tone="inherit"
+        variant="inherit"
+        >{{ label }}</Text
     >
 
     <template v-else>
@@ -27,6 +31,12 @@ const ui = useTheme("cellBoolean", void 0, () => ({ value: props.value ? "true"
             :class="ui.icon"
             :name="props.value ? icons.booleanTrue : icons.booleanFalse"
         />
-        <span class="sr-only">{{ accessibleLabel }}</span>
+        <Text
+            class="sr-only"
+            tag="span"
+            tone="inherit"
+            variant="inherit"
+            >{{ accessibleLabel }}</Text
+        >
     </template>
 </template>

package/dist/runtime/app/components/Table/internal/CellCurrency/CellCurrency.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useLocale, useTheme } from "#vuno/composables/useTheme";
 import { formatCurrency } from "#vuno/utils/format";
+import Text from "#vuno/components/Text/Text.vue";
 defineOptions({ name: "VunoCellCurrency" });
 const props = defineProps({
   column: { type: null, required: true },
@@ -12,5 +13,11 @@ const ui = useTheme("cellCurrency");
 </script>
 
 <template>
-    <span :class="ui.base">{{ formatCurrency(props.value, locale, props.column.currency, props.column.decimals) }}</span>
+    <Text
+        :class="ui.base"
+        tag="span"
+        tone="inherit"
+        variant="inherit"
+        >{{ formatCurrency(props.value, locale, props.column.currency, props.column.decimals) }}</Text
+    >
 </template>

package/dist/runtime/app/components/Table/internal/CellDate/CellDate.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { useLocale, useTheme } from "#vuno/composables/useTheme";
 import { formatDate } from "#vuno/utils/format";
+import Text from "#vuno/components/Text/Text.vue";
 defineOptions({ name: "VunoCellDate" });
 const props = defineProps({
   column: { type: null, required: true },
@@ -17,5 +18,11 @@ const options = computed(() => ({
 </script>
 
 <template>
-    <span :class="ui.base">{{ formatDate(props.value, locale, options) }}</span>
+    <Text
+        :class="ui.base"
+        tag="span"
+        tone="inherit"
+        variant="inherit"
+        >{{ formatDate(props.value, locale, options) }}</Text
+    >
 </template>

package/dist/runtime/app/components/Table/internal/CellNumber/CellNumber.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useLocale, useTheme } from "#vuno/composables/useTheme";
 import { formatNumber } from "#vuno/utils/format";
+import Text from "#vuno/components/Text/Text.vue";
 defineOptions({ name: "VunoCellNumber" });
 const props = defineProps({
   column: { type: null, required: true },
@@ -13,5 +14,11 @@ const ui = useTheme("cellNumber");
 
 <template>
     <!-- `tabular-nums` alinea las cifras en columna; sin ello los dígitos bailan. -->
-    <span :class="ui.base">{{ formatNumber(props.value, locale, props.column.decimals) }}</span>
+    <Text
+        :class="ui.base"
+        tag="span"
+        tone="inherit"
+        variant="inherit"
+        >{{ formatNumber(props.value, locale, props.column.decimals) }}</Text
+    >
 </template>

package/dist/runtime/app/components/Table/internal/CellText/CellText.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { useTheme } from "#vuno/composables/useTheme";
+import Text from "#vuno/components/Text/Text.vue";
 defineOptions({ name: "VunoCellText" });
 const props = defineProps({
   column: { type: null, required: true },
@@ -12,5 +13,11 @@ const ui = useTheme("cellText", void 0, () => ({ truncate: props.column.truncate
 </script>
 
 <template>
-    <span :class="ui.base">{{ text }}</span>
+    <Text
+        :class="ui.base"
+        tag="span"
+        tone="inherit"
+        variant="inherit"
+        >{{ text }}</Text
+    >
 </template>

package/dist/runtime/app/components/Table/internal/TableCell/TableCell.d.vue.ts

@@ -1,5 +1,5 @@
-import type { VunoTableColumn, VunoTableRow } from '#vuno/types/table';
-declare const __VLS_export: <TRow extends VunoTableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+import type { VunoTableColumn } from '#vuno/types/table';
+declare const __VLS_export: <TRow extends import("#vuno/types/table").VunoTableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
         column: VunoTableColumn<TRow>;
         row: TRow;

package/dist/runtime/app/components/Table/internal/TableCell/TableCell.vue.d.ts

@@ -1,5 +1,5 @@
-import type { VunoTableColumn, VunoTableRow } from '#vuno/types/table';
-declare const __VLS_export: <TRow extends VunoTableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+import type { VunoTableColumn } from '#vuno/types/table';
+declare const __VLS_export: <TRow extends import("#vuno/types/table").VunoTableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
         column: VunoTableColumn<TRow>;
         row: TRow;

package/dist/runtime/app/components/Table/internal/column.d.ts

@@ -1,4 +1,13 @@
 import type { VunoTableColumn, VunoTableRow } from '#vuno/types/table';
+export type VunoTableRenderColumn<TRow extends VunoTableRow> = {
+    cellClass: string;
+    column: VunoTableColumn<TRow>;
+    headerClass: string;
+    key: string;
+    label: string;
+    sortable: boolean;
+};
+export declare function resolveColumns<TRow extends VunoTableRow>(columns: VunoTableColumn<TRow>[]): VunoTableRenderColumn<TRow>[];
 /**
  * El valor que muestra una columna.
  *

package/dist/runtime/app/components/Table/internal/column.js

@@ -1,5 +1,20 @@
+export function resolveColumns(columns) {
+  return columns.map((column) => ({
+    cellClass: [alignClass(column.align), column.class].filter(Boolean).join(" "),
+    column,
+    headerClass: [alignClass(column.align), column.width].filter(Boolean).join(" "),
+    key: column.key,
+    label: column.type === "actions" ? column.label ?? "" : column.label ?? column.key,
+    sortable: column.sortable ?? false
+  }));
+}
 import { getPath } from "#vuno/utils/path";
 export function resolveColumnValue(column, row) {
   if (column.value) return column.value(row);
   return getPath(row, column.key);
 }
+function alignClass(align) {
+  if (align === "end") return "text-end";
+  if (align === "center") return "text-center";
+  return "";
+}

package/dist/runtime/app/components/Table/internal/useVunoTableSelection.d.ts

@@ -1,6 +1,6 @@
 import { type ComputedRef, type Ref } from 'vue';
 import type { VunoTableDefinition, VunoTableRow } from '#vuno/types/table';
-import type { VunoTableRenderColumn } from './useVunoTable.js';
+import { type VunoTableRenderColumn } from './column.js';
 type VunoTableSelectionOptions<TRow extends VunoTableRow> = {
     columns: ComputedRef<VunoTableRenderColumn<TRow>[]>;
     selection: Ref<(number | string)[]>;

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

@@ -1,26 +1,6 @@
-import type { VunoSize } from '#vuno/types/base';
 import type { VunoTabItem } from '#vuno/types/page';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * Las pestañas, escritas a mano sobre el patrón de ARIA.
- *
- * No hacía falta una librería: aquí no hay nada que colocar, solo marcado y
- * teclado. Lo que sí hay que hacer bien —y lo que la versión anterior no
- * hacía— es el **tabindex móvil**: una sola pestaña está en el recorrido del
- * tabulador, la activa, y dentro de la lista se anda con las flechas. Es lo
- * que distingue una lista de pestañas de una fila de botones, donde el
- * tabulador para en cada una.
- *
- * La activación es **manual**: las flechas mueven el foco y la selección
- * espera a `Enter` o al espacio. Es una decisión explícita del contrato:
- * cambiarla alteraría cómo se cargan los paneles costosos.
- */
-type Props = {
-    items: VunoTabItem[];
-    size?: VunoSize;
-    ui?: VunoUi<'tabs'>;
-};
-type __VLS_Props = Props;
+import type { VunoTabsProps } from './Tabs.types.js';
+type __VLS_Props = VunoTabsProps;
 type __VLS_Slots = {
     /** El contenido de cada pestaña; recibe su item. */
     content?: (props: {
@@ -36,8 +16,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
-    size: VunoSize;
-    ui: VunoUi<"tabs">;
+    size: import("./Tabs.types.js").VunoTabsSize;
+    variant: import("#vuno/types/page").VunoTabsVariant;
+    ui: import("../../types/slots.js").VunoUi<"tabs">;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,14 +1,11 @@
 export declare const tabsTheme: Record<"tabs", {
-    /**
-     * Pestañas con subrayado en la activa. El `-mb-px` hace que ese subrayado
-     * se coma la línea de la lista en vez de quedar encima de ella.
-     */
     readonly slots: {
         readonly content: "w-full";
         readonly icon: "size-4 shrink-0";
-        readonly list: "flex items-center gap-1 border-b border-vuno-border";
+        readonly indicator: "pointer-events-none absolute left-0 z-0 w-(--vuno-tabs-indicator-width) translate-x-(--vuno-tabs-indicator-start) opacity-0 transition-[width,translate,opacity] duration-200 ease-out motion-reduce:transition-none data-[ready=true]:opacity-100";
+        readonly list: "relative flex w-fit max-w-full items-center overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
         readonly root: "flex w-full flex-col";
-        readonly trigger: "-mb-px flex cursor-pointer items-center gap-1.5 border-b-2 border-transparent px-3 py-2 font-medium text-vuno-muted transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) data-[state=active]:border-vuno-primary data-[state=active]:text-vuno-primary";
+        readonly trigger: "relative z-1 flex shrink-0 cursor-pointer items-center gap-1.5 font-medium transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)";
     };
     readonly variants: {
         readonly size: {
@@ -28,5 +25,17 @@ export declare const tabsTheme: Record<"tabs", {
                 readonly trigger: "text-base";
             };
         };
+        readonly variant: {
+            readonly segmented: {
+                readonly indicator: "inset-y-0.5 rounded-md bg-vuno-surface-2 ring-1 ring-vuno-border";
+                readonly list: "rounded-lg border border-vuno-border bg-vuno-surface-1 p-0.5";
+                readonly trigger: "rounded-md px-2.5 py-1.5 text-vuno-muted data-[state=active]:text-vuno-body";
+            };
+            readonly underline: {
+                readonly indicator: "bottom-0 h-0.5 bg-vuno-primary";
+                readonly list: "gap-1 border-b border-vuno-border";
+                readonly trigger: "-mb-px border-b-2 border-transparent px-3 py-2 text-vuno-muted data-[state=active]:font-semibold data-[state=active]:text-vuno-body";
+            };
+        };
     };
 }>;

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

@@ -1,15 +1,12 @@
 import { defineTheme } from "#vuno/utils/theme";
 export const tabsTheme = defineTheme("tabs", {
-  /**
-   * Pestañas con subrayado en la activa. El `-mb-px` hace que ese subrayado
-   * se coma la línea de la lista en vez de quedar encima de ella.
-   */
   slots: {
     content: "w-full",
     icon: "size-4 shrink-0",
-    list: "flex items-center gap-1 border-b border-vuno-border",
+    indicator: "pointer-events-none absolute left-0 z-0 w-(--vuno-tabs-indicator-width) translate-x-(--vuno-tabs-indicator-start) opacity-0 transition-[width,translate,opacity] duration-200 ease-out motion-reduce:transition-none data-[ready=true]:opacity-100",
+    list: "relative flex w-fit max-w-full items-center overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
     root: "flex w-full flex-col",
-    trigger: "-mb-px flex cursor-pointer items-center gap-1.5 border-b-2 border-transparent px-3 py-2 font-medium text-vuno-muted transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) data-[state=active]:border-vuno-primary data-[state=active]:text-vuno-primary"
+    trigger: "relative z-1 flex shrink-0 cursor-pointer items-center gap-1.5 font-medium transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)"
   },
   variants: {
     size: {
@@ -18,6 +15,18 @@ export const tabsTheme = defineTheme("tabs", {
       md: { trigger: "text-sm" },
       lg: { trigger: "text-base" },
       xl: { trigger: "text-base" }
+    },
+    variant: {
+      segmented: {
+        indicator: "inset-y-0.5 rounded-md bg-vuno-surface-2 ring-1 ring-vuno-border",
+        list: "rounded-lg border border-vuno-border bg-vuno-surface-1 p-0.5",
+        trigger: "rounded-md px-2.5 py-1.5 text-vuno-muted data-[state=active]:text-vuno-body"
+      },
+      underline: {
+        indicator: "bottom-0 h-0.5 bg-vuno-primary",
+        list: "gap-1 border-b border-vuno-border",
+        trigger: "-mb-px border-b-2 border-transparent px-3 py-2 text-vuno-muted data-[state=active]:font-semibold data-[state=active]:text-vuno-body"
+      }
     }
   }
 });

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

@@ -0,0 +1,10 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoTabItem, VunoTabsVariant } from '#vuno/types/page';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoTabsSize = Extract<VunoSize, 'lg' | 'md' | 'sm' | 'xl' | 'xs'>;
+export type VunoTabsProps = {
+    items: VunoTabItem[];
+    size?: VunoTabsSize;
+    ui?: VunoUi<'tabs'>;
+    variant?: VunoTabsVariant;
+};

package/dist/runtime/app/components/Tabs/Tabs.vue

@@ -1,38 +1,79 @@
 <script setup>
-import { computed, inject, useId, useTemplateRef } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, resolveComponent, useId, useTemplateRef, watch } from "vue";
+import { useRoute } from "#imports";
+import { useVunoDirection } from "#vuno/composables/internal/useVunoDirection";
 import { useTheme } from "#vuno/composables/useTheme";
-import { vunoDirectionInjectionKey } from "#vuno/internal/keys";
 import Badge from "#vuno/components/Badge/Badge.vue";
 import Icon from "#vuno/components/Icon/Icon.vue";
+import Text from "#vuno/components/Text/Text.vue";
 defineOptions({ name: "VunoTabs" });
 const model = defineModel({ type: null, ...{ default: void 0 } });
 const props = defineProps({
   items: { type: Array, required: true },
   size: { type: String, required: false, default: "md" },
-  ui: { type: Object, required: false, default: void 0 }
+  ui: { type: Object, required: false, default: void 0 },
+  variant: { type: String, required: false, default: "segmented" }
 });
 defineSlots();
+const route = useRoute();
+const NuxtLink = resolveComponent("NuxtLink");
 const ui = useTheme(
   "tabs",
   () => props.ui,
-  () => ({ size: props.size })
+  () => ({ size: props.size, variant: props.variant })
 );
 const uid = useId().replaceAll(/[^\w-]/g, "");
+const indicatorReady = ref(false);
+const indicatorStyle = ref();
 const list = useTemplateRef("list");
+const triggers = ref([]);
+let resizeObserver;
 const active = computed(() => {
-  const current = props.items.find((item) => item.value === model.value);
-  return current?.value ?? props.items[0]?.value;
+  const currentRoute = props.items.find((item) => item.to === route.path);
+  if (currentRoute) return currentRoute.value;
+  const localItems = props.items.filter((item) => !item.to);
+  const current = localItems.find((item) => item.value === model.value);
+  return current?.value ?? localItems[0]?.value;
 });
+const tabStop = computed(() => active.value ?? props.items[0]?.value);
 const safe = (value) => value.replaceAll(/[^\w-]/g, "");
 const tabId = (value) => `${uid}-tab-${safe(value)}`;
 const panelId = (value) => `${uid}-panel-${safe(value)}`;
+function captureTrigger(index, element) {
+  const target = element instanceof HTMLElement ? element : element?.$el;
+  triggers.value[index] = target instanceof HTMLElement ? target : null;
+}
+const triggerRef = (index) => (element) => captureTrigger(index, element);
+async function syncIndicator() {
+  await nextTick();
+  const index = props.items.findIndex((item) => item.value === active.value);
+  const trigger = triggers.value[index];
+  if (!trigger) {
+    indicatorReady.value = false;
+    indicatorStyle.value = void 0;
+    return;
+  }
+  indicatorStyle.value = {
+    "--vuno-tabs-indicator-start": `${trigger.offsetLeft}px`,
+    "--vuno-tabs-indicator-width": `${trigger.offsetWidth}px`
+  };
+  indicatorReady.value = true;
+}
+function observeLayout() {
+  resizeObserver?.disconnect();
+  if (!resizeObserver) return;
+  if (list.value) resizeObserver.observe(list.value);
+  for (const trigger of triggers.value) {
+    if (trigger) resizeObserver.observe(trigger);
+  }
+}
 function focusTab(index) {
   const total = props.items.length;
   if (total === 0) return;
   const item = props.items[(index + total) % total];
   if (item) list.value?.querySelector(`#${tabId(item.value)}`)?.focus();
 }
-const direction = inject(vunoDirectionInjectionKey, () => "ltr");
+const direction = useVunoDirection();
 function onKeydown(event, index) {
   const forward = direction() === "rtl" ? -1 : 1;
   const keys = {
@@ -46,28 +87,54 @@ function onKeydown(event, index) {
   event.preventDefault();
   handler();
 }
+watch(
+  [active, () => props.items, () => props.size, () => props.variant],
+  () => {
+    void syncIndicator().then(observeLayout);
+  },
+  { deep: true, flush: "post" }
+);
+onMounted(() => {
+  if (typeof ResizeObserver !== "undefined") resizeObserver = new ResizeObserver(() => void syncIndicator());
+  void syncIndicator().then(observeLayout);
+});
+onBeforeUnmount(() => resizeObserver?.disconnect());
 </script>
 
 <template>
-    <div :class="ui.root">
+    <div
+        :class="ui.root"
+        :data-variant="props.variant"
+    >
         <div
             ref="list"
             aria-orientation="horizontal"
             :class="ui.list"
             role="tablist"
         >
-            <button
+            <div
+                aria-hidden="true"
+                :class="ui.indicator"
+                :data-ready="indicatorReady"
+                :style="indicatorStyle"
+            />
+
+            <component
+                :is="item.to ? NuxtLink : 'button'"
                 v-for="(item, index) in props.items"
                 :id="tabId(item.value)"
                 :key="item.value"
-                :aria-controls="panelId(item.value)"
+                :ref="triggerRef(index)"
+                :aria-controls="item.to ? void 0 : panelId(item.value)"
+                :aria-current="item.to && item.value === active ? 'page' : void 0"
                 :aria-selected="item.value === active"
                 :class="ui.trigger"
                 :data-state="item.value === active ? 'active' : 'inactive'"
                 role="tab"
-                :tabindex="item.value === active ? 0 : -1"
-                type="button"
-                @click="model = item.value"
+                :tabindex="item.value === tabStop ? 0 : -1"
+                :to="item.to"
+                :type="item.to ? void 0 : 'button'"
+                @click="item.to || (model = item.value)"
                 @keydown="onKeydown($event, index)"
             >
                 <Icon
@@ -76,7 +143,14 @@ function onKeydown(event, index) {
                     :name="item.icon"
                 />
 
-                <span class="truncate">{{ item.label }}</span>
+                <Text
+                    class="truncate"
+                    tag="span"
+                    tone="inherit"
+                    variant="inherit"
+                >
+                    {{ item.label }}
+                </Text>
 
                 <!--
                     El contador de errores va aquí y no al lado del formulario:
@@ -89,7 +163,7 @@ function onKeydown(event, index) {
                     :label="item.badge.label"
                     size="xs"
                 />
-            </button>
+            </component>
         </div>
 
         <!--
@@ -100,7 +174,7 @@ function onKeydown(event, index) {
             justo lo que hace falta.
         -->
         <div
-            v-for="item in props.items"
+            v-for="item in props.items.filter((candidate) => !candidate.to)"
             :id="panelId(item.value)"
             :key="item.value"
             :aria-labelledby="tabId(item.value)"
@@ -108,7 +182,7 @@ function onKeydown(event, index) {
             :data-state="item.value === active ? 'active' : 'inactive'"
             :hidden="item.value !== active"
             role="tabpanel"
-            tabindex="0"
+            :tabindex="item.value === active ? 0 : void 0"
         >
             <slot
                 :item="item"

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

@@ -1,26 +1,6 @@
-import type { VunoSize } from '#vuno/types/base';
 import type { VunoTabItem } from '#vuno/types/page';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * Las pestañas, escritas a mano sobre el patrón de ARIA.
- *
- * No hacía falta una librería: aquí no hay nada que colocar, solo marcado y
- * teclado. Lo que sí hay que hacer bien —y lo que la versión anterior no
- * hacía— es el **tabindex móvil**: una sola pestaña está en el recorrido del
- * tabulador, la activa, y dentro de la lista se anda con las flechas. Es lo
- * que distingue una lista de pestañas de una fila de botones, donde el
- * tabulador para en cada una.
- *
- * La activación es **manual**: las flechas mueven el foco y la selección
- * espera a `Enter` o al espacio. Es una decisión explícita del contrato:
- * cambiarla alteraría cómo se cargan los paneles costosos.
- */
-type Props = {
-    items: VunoTabItem[];
-    size?: VunoSize;
-    ui?: VunoUi<'tabs'>;
-};
-type __VLS_Props = Props;
+import type { VunoTabsProps } from './Tabs.types.js';
+type __VLS_Props = VunoTabsProps;
 type __VLS_Slots = {
     /** El contenido de cada pestaña; recibe su item. */
     content?: (props: {
@@ -36,8 +16,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
-    size: VunoSize;
-    ui: VunoUi<"tabs">;
+    size: import("./Tabs.types.js").VunoTabsSize;
+    variant: import("#vuno/types/page").VunoTabsVariant;
+    ui: import("../../types/slots.js").VunoUi<"tabs">;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;