@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/ToggletipButton/ToggletipButton.d.vue.ts

@@ -0,0 +1,16 @@
+import type { ToggletipButtonProps } from './ToggletipButton.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ToggletipButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToggletipButtonProps> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, 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/ToggletipButton/ToggletipButton.types.d.ts

@@ -0,0 +1,11 @@
+export type ToggletipButtonProps = {
+    /**
+     * Nombre accesible del botón.
+     *
+     * Es opcional con valor por defecto, como en Vuno —`'Show information'`—,
+     * porque el contenido habitual del botón es un icono y sin etiqueta el botón
+     * no tendría nombre. Pásala siempre que el toggletip explique algo concreto:
+     * «Mostrar información» no distingue entre dos ayudas de la misma pantalla.
+     */
+    label?: string;
+};

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

@@ -0,0 +1,35 @@
+<script setup>
+import { inject } from "vue";
+import { toggletipKey } from "#vuno/components/Toggletip/Toggletip.context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "ToggletipButton" });
+defineProps({
+  label: { type: String, required: false, default: "Mostrar informaci\xF3n" }
+});
+const context = inject(toggletipKey);
+if (!context) throw new Error("ToggletipButton debe usarse dentro de Toggletip.");
+function captureButton(target) {
+  context.setButton(target instanceof HTMLElement ? target : null);
+}
+</script>
+
+<template>
+    <button
+        :ref="captureButton"
+        :aria-controls="context.contentId"
+        :aria-describedby="context.open.value ? context.contentId : void 0"
+        :aria-expanded="context.open.value ? 'true' : 'false'"
+        :aria-label="label"
+        :class="context.ui.value.button"
+        type="button"
+        @click="context.toggle"
+        @keydown="context.onButtonKeydown"
+    >
+        <slot>
+            <Icon
+                :class="context.ui.value.icon"
+                name="carbon:information"
+            />
+        </slot>
+    </button>
+</template>

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

@@ -0,0 +1,16 @@
+import type { ToggletipButtonProps } from './ToggletipButton.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ToggletipButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToggletipButtonProps> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, 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/ToggletipContent/ToggletipContent.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Slots = {
+    default?: (props: {
+        close: (refocus?: boolean) => void;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/ToggletipContent/ToggletipContent.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { inject } from "vue";
+import { toggletipKey } from "#vuno/components/Toggletip/Toggletip.context";
+defineOptions({ name: "ToggletipContent" });
+defineSlots();
+const context = inject(toggletipKey);
+if (!context) throw new Error("ToggletipContent debe usarse dentro de Toggletip.");
+function captureContent(target) {
+  context.setContent(target instanceof HTMLElement ? target : null);
+}
+function captureCaret(target) {
+  context.setCaret(target instanceof HTMLElement ? target : null);
+}
+</script>
+
+<template>
+    <Teleport
+        v-if="context.open.value"
+        :to="context.portalTarget.value"
+    >
+        <div
+            :id="context.contentId"
+            :ref="captureContent"
+            :class="context.ui.value.content"
+            style="position: fixed; top: 0; left: 0"
+            @keydown="context.onContentKeydown"
+        >
+            <slot :close="context.close" />
+
+            <!--
+                La punta va después del contenido y no antes: queda fuera de la
+                caja por posición absoluta, así que su sitio en el DOM no cambia
+                nada visual y sí deja el contenido como primer hijo para quien lo
+                recorra.
+            -->
+            <div
+                :ref="captureCaret"
+                aria-hidden="true"
+                :class="context.ui.value.caret"
+            />
+        </div>
+    </Teleport>
+</template>

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

@@ -0,0 +1,14 @@
+type __VLS_Slots = {
+    default?: (props: {
+        close: (refocus?: boolean) => void;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/Tooltip/Tooltip.d.vue.ts

@@ -1,34 +1,24 @@
-import type { VunoPortalTarget } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * El aviso que aparece al posar el ratón o al llegar con el teclado.
- *
- * Las cuatro cosas fáciles de dejarse y difíciles de notar que faltan son
- * el retardo al abrir, cerrarlo con Escape, **abrirlo también al enfocar**
- * —si solo abre al posar el ratón, para quien navega con el teclado no
- * existe— y describir el disparador con `aria-describedby`, que es lo que
- * hace que un lector de pantalla lo lea en vez de dejarlo suelto en la
- * página. Las cuatro están abajo, cada una con su prueba.
- */
-type Props = {
-    /** Milisegundos antes de abrirse al posar el ratón. */
-    delay?: number;
-    disabled?: boolean;
-    /** Dónde montar el aviso. Por defecto, lo que provea el modal que envuelva. */
-    portal?: VunoPortalTarget;
-    side?: 'bottom' | 'left' | 'right' | 'top';
-    text?: string;
-    ui?: VunoUi<'tooltip'>;
-};
+import type { TooltipAlignment, TooltipProps } from './Tooltip.types.js';
 type __VLS_Slots = {
     default?: () => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
     text: string;
-    ui: VunoUi<"tooltip">;
+    description: string;
+    disabled: boolean;
+    align: TooltipAlignment;
+    label: string;
+    side: import("./Tooltip.types.js").TooltipSide;
+    dropShadow: boolean;
+    highContrast: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"tooltip">;
+    autoAlign: boolean;
+    closeOnActivation: boolean;
+    defaultOpen: boolean;
     delay: number;
-    portal: VunoPortalTarget;
-    side: "bottom" | "left" | "right" | "top";
+    enterDelayMs: number;
+    leaveDelayMs: number;
+    portal: import("../../types/base.js").PortalTarget;
 }, {}, {}, {}, 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/Tooltip/Tooltip.theme.d.ts

@@ -1,12 +1,78 @@
+/**
+ * La superficie del aviso, traducida a utilidades.
+ *
+ * Las medidas salen de `packages/styles/scss/components/tooltip/_tooltip.scss`:
+ * relleno de 16px por los cuatro lados —`$spacing-05` en bloque y en línea—,
+ * ancho máximo de 288px, radio de 2px, `overflow-wrap: break-word` y el estilo
+ * de texto `body-01` —14px sobre 20px de línea y 0.16px de interletrado—. La
+ * punta es la del `Popover`, 12×6 y medio cuerpo fuera de la caja, porque el
+ * aviso de Vuno no la redefine: solo el `icon-tooltip` la estrecha.
+ *
+ * El color entra por dos variables y no por combinaciones de variante: la
+ * superficie por `--tooltip-surface` y el texto por `--tooltip-text`. Así
+ * `highContrast` cambia dos valores y la punta se entera sola, que es lo que
+ * evita tener una punta por cada fondo.
+ *
+ * La superficie se apila en 6000, que es el nivel de las capas flotantes del
+ * sistema de origen. Con el paso 50 de Tailwind quedaba por debajo de la capa
+ * de carga y de la cabecera del propio Vuno, que ya usan 6000 y 8000.
+ *
+ * Cerrado no se desmonta, se esconde. El identificador del texto tiene que
+ * seguir en el documento porque `aria-labelledby` lo referencia también
+ * cerrado: si desapareciera, un botón solo con icono se quedaría sin nombre
+ * accesible mientras nadie lo apunta.
+ */
 export declare const tooltipTheme: Record<"tooltip", {
-    /**
-     * El área de texto. Comparte caja con el input, así que aquí solo queda el
-     * `<textarea>`: transparente, sin contorno propio y con su relleno vertical
-     * —el de la caja es horizontal, porque un control de una línea se centra y
-     * este no—.
-     */
     readonly slots: {
-        readonly arrow: "size-2 rotate-45 bg-vuno-surface-inverse";
-        readonly content: "z-50 max-w-xs rounded-sm bg-vuno-surface-inverse px-2 py-1 text-xs font-medium text-vuno-inverse shadow-sm select-none";
+        readonly caret: "pointer-events-none absolute bg-(--tooltip-surface)";
+        readonly content: "z-floating w-max max-w-72 rounded-[2px] bg-(--tooltip-surface) p-4 text-sm leading-5 font-normal tracking-[0.16px] break-words text-(--tooltip-text) before:absolute before:content-[''] [--tooltip-surface:var(--vuno-layer-01)] [--tooltip-text:var(--vuno-text-primary)]";
+    };
+    readonly variants: {
+        readonly dropShadow: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "drop-shadow-[0_2px_2px_rgb(0_0_0/0.2)]";
+            };
+        };
+        readonly highContrast: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "[--tooltip-surface:var(--vuno-background-inverse)] [--tooltip-text:var(--vuno-text-inverse)]";
+            };
+        };
+        readonly open: {
+            readonly false: {
+                readonly content: "hidden";
+            };
+            readonly true: {};
+        };
+        /**
+         * El lado **resuelto**, no el pedido: con volteo la punta cambia de cara.
+         *
+         * El mismo lado coloca el puente invisible del `::before`: una franja
+         * del grosor exacto de la separación —12 px— pegada al borde por el
+         * que el aviso mira al disparador y volcada hacia fuera. Sin ella,
+         * llevar el puntero del disparador al aviso cruza 12 px de tierra de
+         * nadie y el aviso solo aguanta por el retardo de cierre; con ella, el
+         * puntero nunca sale de la superficie.
+         */
+        readonly side: {
+            readonly bottom: {
+                readonly caret: "h-1.5 w-3 [clip-path:polygon(0%_100%,50%_0%,100%_100%)]";
+                readonly content: "before:inset-x-0 before:top-0 before:h-3 before:-translate-y-full";
+            };
+            readonly left: {
+                readonly caret: "h-3 w-1.5 [clip-path:polygon(0%_0%,100%_50%,0%_100%)]";
+                readonly content: "before:inset-y-0 before:end-0 before:w-3 before:translate-x-full";
+            };
+            readonly right: {
+                readonly caret: "h-3 w-1.5 [clip-path:polygon(0%_50%,100%_0%,100%_100%)]";
+                readonly content: "before:inset-y-0 before:start-0 before:w-3 before:-translate-x-full";
+            };
+            readonly top: {
+                readonly caret: "h-1.5 w-3 [clip-path:polygon(0%_0%,50%_100%,100%_0%)]";
+                readonly content: "before:inset-x-0 before:bottom-0 before:h-3 before:translate-y-full";
+            };
+        };
     };
 }>;

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

@@ -1,13 +1,39 @@
 import { defineTheme } from "#vuno/utils/theme";
 export const tooltipTheme = defineTheme("tooltip", {
-  /**
-   * El área de texto. Comparte caja con el input, así que aquí solo queda el
-   * `<textarea>`: transparente, sin contorno propio y con su relleno vertical
-   * —el de la caja es horizontal, porque un control de una línea se centra y
-   * este no—.
-   */
   slots: {
-    arrow: "size-2 rotate-45 bg-vuno-surface-inverse",
-    content: "z-50 max-w-xs rounded-sm bg-vuno-surface-inverse px-2 py-1 text-xs font-medium text-vuno-inverse shadow-sm select-none"
+    caret: "pointer-events-none absolute bg-(--tooltip-surface)",
+    content: "z-floating w-max max-w-72 rounded-[2px] bg-(--tooltip-surface) p-4 text-sm leading-5 font-normal tracking-[0.16px] break-words text-(--tooltip-text) before:absolute before:content-[''] [--tooltip-surface:var(--vuno-layer-01)] [--tooltip-text:var(--vuno-text-primary)]"
+  },
+  variants: {
+    /* `drop-shadow` y no `box-shadow`: sigue el recorte de la punta. */
+    dropShadow: {
+      false: {},
+      true: { content: "drop-shadow-[0_2px_2px_rgb(0_0_0/0.2)]" }
+    },
+    highContrast: {
+      false: {},
+      true: { content: "[--tooltip-surface:var(--vuno-background-inverse)] [--tooltip-text:var(--vuno-text-inverse)]" }
+    },
+    open: {
+      /* Escondido, no desmontado: la referencia ARIA sigue resolviendo. */
+      false: { content: "hidden" },
+      true: {}
+    },
+    /**
+     * El lado **resuelto**, no el pedido: con volteo la punta cambia de cara.
+     *
+     * El mismo lado coloca el puente invisible del `::before`: una franja
+     * del grosor exacto de la separación —12 px— pegada al borde por el
+     * que el aviso mira al disparador y volcada hacia fuera. Sin ella,
+     * llevar el puntero del disparador al aviso cruza 12 px de tierra de
+     * nadie y el aviso solo aguanta por el retardo de cierre; con ella, el
+     * puntero nunca sale de la superficie.
+     */
+    side: {
+      bottom: { caret: "h-1.5 w-3 [clip-path:polygon(0%_100%,50%_0%,100%_100%)]", content: "before:inset-x-0 before:top-0 before:h-3 before:-translate-y-full" },
+      left: { caret: "h-3 w-1.5 [clip-path:polygon(0%_0%,100%_50%,0%_100%)]", content: "before:inset-y-0 before:end-0 before:w-3 before:translate-x-full" },
+      right: { caret: "h-3 w-1.5 [clip-path:polygon(0%_50%,100%_0%,100%_100%)]", content: "before:inset-y-0 before:start-0 before:w-3 before:-translate-x-full" },
+      top: { caret: "h-1.5 w-3 [clip-path:polygon(0%_0%,50%_100%,100%_0%)]", content: "before:inset-x-0 before:bottom-0 before:h-3 before:translate-y-full" }
+    }
   }
 });

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

@@ -0,0 +1,86 @@
+import type { Placement, PortalTarget } from '#vuno/types/base';
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * Alineación del aviso respecto a su disparador.
+ *
+ * Vuno acepta además los nombres heredados —`top-left`, `right-bottom`…— y
+ * los traduce a los de Floating UI. Aquí no existen, igual que en `Popover`:
+ * `Placement` ya es el juego nuevo, así que un nombre antiguo falla al
+ * compilar en vez de traducirse en silencio.
+ */
+export type TooltipAlignment = Placement;
+/**
+ * Los cuatro lados sin ajuste fino sobre el eje.
+ *
+ * Es el subconjunto que consumen `Tag`, `CodeSnippet` e `IconSwitch`, donde el
+ * contrato de origen tampoco ofrece más. El aviso entero admite las doce.
+ */
+export type TooltipSide = Extract<Placement, 'bottom' | 'left' | 'right' | 'top'>;
+export type TooltipProps = {
+    /** Dónde se coloca respecto al disparador. Vuno: `align`, por defecto `top`. */
+    align?: TooltipAlignment;
+    /**
+     * Recoloca el aviso cuando la alineación pedida no cabe.
+     *
+     * No es prop declarada del `Tooltip` de React: llega al `Popover` por el
+     * resto de props. Aquí se declara para que exista en el tipo, y viene
+     * encendido por el mismo motivo que en `Popover`: la guía de diseño dice
+     * que las direcciones son automáticas por defecto.
+     */
+    autoAlign?: boolean;
+    /** Lo cierra cuando se activa el disparador con clic, Enter o Espacio. */
+    closeOnActivation?: boolean;
+    /** Abierto en el primer render. Vuno: `defaultOpen`. */
+    defaultOpen?: boolean;
+    /**
+     * Retardo de apertura al apuntar, en milisegundos.
+     *
+     * Alias de `enterDelayMs`, que es el nombre de Vuno y el que manda si se
+     * dan los dos. Existe porque `Slider` e `IconSwitch` ya lo usan y su
+     * contrato no se rompe por un cambio de nombre.
+     */
+    delay?: number;
+    /**
+     * Texto que **añade** información al nombre del disparador.
+     *
+     * Viaja por `aria-describedby`: el lector de pantalla lee primero lo que
+     * el disparador ya dice y después esto. Es la opción correcta cuando el
+     * aviso es secundario.
+     */
+    description?: string;
+    /**
+     * Apaga el aviso sin quitar el disparador.
+     *
+     * No es prop del sistema de origen —allí se deja de renderizar el `Tooltip`—, pero en
+     * plantilla envolver condicionalmente obliga a duplicar el hijo. Lo usan
+     * `Tag` y `Slider` para seguir el estado deshabilitado del control.
+     */
+    disabled?: boolean;
+    /** Sombra bajo la superficie. Vuno la trae apagada en el aviso. */
+    dropShadow?: boolean;
+    /** Retardo de apertura al apuntar, en milisegundos. Vuno: 100. */
+    enterDelayMs?: number;
+    /** Superficie invertida. Vuno la trae encendida en el aviso. */
+    highContrast?: boolean;
+    /**
+     * Texto que **sustituye** al nombre del disparador.
+     *
+     * Viaja por `aria-labelledby`, así que lo que el disparador tenga escrito
+     * dentro deja de anunciarse. Es la opción correcta para un botón solo con
+     * icono. Si se dan `label` y `description`, manda `label`.
+     */
+    label?: string;
+    /**
+     * Retardo de cierre al salir, en milisegundos. Vuno: 300.
+     *
+     * Es lo que permite cruzar el hueco entre el disparador y la superficie
+     * sin que el aviso se cierre por el camino.
+     */
+    leaveDelayMs?: number;
+    portal?: PortalTarget;
+    /** Alias estrecho de `align` para los cuatro lados. Manda `align` si se dan los dos. */
+    side?: TooltipSide;
+    /** Alias de `description`. Manda `description` si se dan los dos, y `label` sobre ambos. */
+    text?: string;
+    ui?: ComponentUi<'tooltip'>;
+};