@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,65 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const toggleTheme = defineTheme("toggle", {
+  slots: {
+    appearance: "inline-grid cursor-pointer grid-cols-[max-content_max-content] items-center gap-x-2",
+    check: "pointer-events-none invisible absolute top-1.5 end-[5px] h-[5px] w-[6px] fill-(--vuno-support-success) peer-checked:visible",
+    field: "relative inline-flex",
+    labelText: "mb-4 block text-xs leading-4 font-normal tracking-[0.32px] text-(--vuno-text-secondary)",
+    root: "inline-block select-none",
+    switch: "peer h-6 w-12 shrink-0 cursor-pointer appearance-none rounded-full bg-(--vuno-toggle-off) transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) checked:bg-(--vuno-support-success) focus:outline-solid focus:outline-2 focus:outline-offset-1 focus:outline-(--vuno-focus) motion-reduce:transition-none forced-colors:[outline:1px_solid_transparent] forced-colors:checked:bg-[Highlight] forced-colors:focus:outline-solid forced-colors:focus:outline-1 forced-colors:focus:outline-[Highlight]",
+    text: "text-sm leading-5 tracking-[0.16px] text-(--vuno-text-primary)",
+    /**
+     * El desplazamiento se invierte en RTL porque `translate` es físico y la
+     * posición inicial del pulgar es lógica, igual que en Vuno.
+     */
+    thumb: "pointer-events-none absolute top-[3px] start-[3px] size-[1.125rem] rounded-full bg-(--vuno-icon-on-color) transition-transform duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) peer-checked:translate-x-6 motion-reduce:transition-none rtl:peer-checked:-translate-x-6 forced-colors:[outline:1px_solid_transparent]"
+  },
+  variants: {
+    /**
+     * Vuno apaga la pastilla con `$button-disabled` en los dos estados, así
+     * que el color marcado también se reescribe. El estado deshabilitado
+     * queda expresamente fuera del contraste WCAG.
+     */
+    disabled: {
+      false: {},
+      true: {
+        appearance: "cursor-not-allowed",
+        check: "fill-(--vuno-button-disabled)",
+        labelText: "text-(--vuno-text-disabled)",
+        switch: "cursor-not-allowed bg-(--vuno-button-disabled) checked:bg-(--vuno-button-disabled)",
+        text: "text-(--vuno-text-disabled)",
+        thumb: "bg-(--vuno-icon-on-color-disabled)"
+      }
+    },
+    /**
+     * `vuno--visually-hidden`, que es lo que hace `sr-only`: el rótulo sigue en
+     * el árbol de accesibilidad y conserva la relación con el control.
+     */
+    hideLabel: {
+      false: {},
+      true: { labelText: "sr-only" }
+    },
+    /**
+     * Solo lectura invierte la pastilla: fondo transparente, borde de 1 px y
+     * pulgar en `$icon-primary`. El pulgar no cambia de sitio porque aquí
+     * está posicionado contra `field` y no contra el control, así que el borde
+     * no desplaza su origen.
+     */
+    readonly: {
+      false: {},
+      true: {
+        appearance: "cursor-default",
+        switch: "cursor-default border border-(--vuno-icon-disabled) bg-transparent checked:bg-transparent",
+        text: "cursor-text select-text",
+        thumb: "bg-(--vuno-icon-primary)"
+      }
+    },
+    size: {
+      sm: {
+        switch: "h-4 w-8",
+        thumb: "size-[0.625rem] peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4"
+      },
+      md: {}
+    }
+  }
+});

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

@@ -0,0 +1,42 @@
+import type { ControlProps } from '#vuno/types/control';
+/** Slots tematizables del toggle. */
+export type ToggleSlot = 'appearance' | 'check' | 'field' | 'labelText' | 'root' | 'switch' | 'text' | 'thumb';
+/**
+ * Vuno publica dos tamaños de toggle —24 px y 16 px de alto— y no el tercer
+ * paso de `ControlSize`, así que `lg` se retira del contrato en lugar de
+ * anunciar una capacidad que el componente no tiene.
+ */
+export type ToggleSize = 'md' | 'sm';
+/** Lo que viaja con `change`, además del evento nativo que lo originó. */
+export type ToggleChange = {
+    id: string;
+    checked: boolean;
+};
+/**
+ * El contrato de Vuno `Toggle`.
+ *
+ * `labelText` es opcional porque el toggle pequeño se usa en línea —dentro de
+ * una fila de tabla, por ejemplo— sin rótulo ni texto de estado visibles. Sin
+ * `labelText`, el nombre accesible lo aporta quien lo consume con `aria-label`
+ * o `aria-labelledby`, igual que en Vuno.
+ */
+export type ToggleProps = Omit<ControlProps<ToggleSlot>, 'size'> & {
+    /**
+     * Oculta el rótulo superior y, si `labelText` existe, lo usa como texto
+     * lateral en lugar de `labelA` y `labelB`. Es el comportamiento de Vuno:
+     * el rótulo sigue siendo el nombre accesible y deja de duplicarse.
+     */
+    hideLabel?: boolean;
+    /** Texto de estado en la posición «apagado». */
+    labelA?: string;
+    /** Texto de estado en la posición «encendido». */
+    labelB?: string;
+    labelText?: string;
+    /**
+     * Impide el cambio sin sacar el control del recorrido de foco. No desarma
+     * `disabled`: con las dos, el control sigue deshabilitado y solo el aspecto
+     * de solo lectura predomina.
+     */
+    readonly?: boolean;
+    size?: ToggleSize;
+};

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

@@ -0,0 +1,108 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "Toggle", inheritAttrs: false });
+const model = defineModel({ type: Boolean, skipCheck: true, ...{ default: void 0 } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  labelA: { type: String, required: false, default: "Apagado" },
+  labelB: { type: String, required: false, default: "Encendido" },
+  labelText: { type: String, required: false, default: void 0 },
+  readonly: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" }
+});
+const emit = defineEmits(["change"]);
+const fallbackId = useId();
+const controlId = computed(() => props.id ?? fallbackId);
+const checked = computed(() => model.value === true);
+const sideLabel = computed(() => props.hideLabel ? props.labelText : checked.value ? props.labelB : props.labelA);
+const showCheck = computed(() => props.size === "sm" && !props.readonly);
+const ui = useTheme(
+  "toggle",
+  () => props.ui,
+  () => ({
+    disabled: String(props.disabled),
+    hideLabel: String(props.hideLabel),
+    readonly: String(props.readonly),
+    size: props.size
+  })
+);
+function commit(next, event) {
+  model.value = next;
+  emit("change", { id: controlId.value, checked: next, event });
+}
+function onChange(event) {
+  if (props.readonly) return;
+  commit(event.target.checked, event);
+}
+function onClick(event) {
+  if (props.readonly) event.preventDefault();
+}
+function onEnter(event) {
+  if (props.readonly) return;
+  event.preventDefault();
+  commit(!checked.value, event);
+}
+</script>
+
+<template>
+    <label
+        :class="ui.root"
+        :for="controlId"
+    >
+        <span
+            v-if="props.labelText"
+            :class="ui.labelText"
+        >
+            {{ props.labelText }}
+        </span>
+
+        <span :class="ui.appearance">
+            <span :class="ui.field">
+                <input
+                    v-bind="$attrs"
+                    :id="controlId"
+                    :aria-readonly="props.readonly || void 0"
+                    :checked="checked"
+                    :class="ui.switch"
+                    :disabled="props.disabled"
+                    :name="props.name"
+                    :required="props.required"
+                    role="switch"
+                    type="checkbox"
+                    @change="onChange"
+                    @click="onClick"
+                    @keydown.enter="onEnter"
+                />
+
+                <span
+                    aria-hidden="true"
+                    :class="ui.thumb"
+                />
+
+                <svg
+                    v-if="showCheck"
+                    aria-hidden="true"
+                    :class="ui.check"
+                    focusable="false"
+                    viewBox="0 0 6 5"
+                >
+                    <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
+                </svg>
+            </span>
+
+            <span
+                v-if="sideLabel"
+                aria-hidden="true"
+                :class="ui.text"
+            >
+                {{ sideLabel }}
+            </span>
+        </span>
+    </label>
+</template>

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

@@ -0,0 +1,31 @@
+import type { ToggleChange, ToggleProps } from './Toggle.types.js';
+type __VLS_Props = ToggleProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (payload: ToggleChange & {
+        event: Event;
+    }) => any;
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((payload: ToggleChange & {
+        event: Event;
+    }) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("./Toggle.types.js").ToggleSize;
+    name: string;
+    hideLabel: boolean;
+    labelText: string;
+    readonly: boolean;
+    id: string;
+    ui: Partial<Record<import("./Toggle.types.js").ToggleSlot, string>>;
+    required: boolean;
+    labelA: string;
+    labelB: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,27 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+import type { ResolvedSlots } from '#vuno/types/slots';
+/**
+ * Lo que `Toggletip` comparte con sus tres piezas.
+ *
+ * El estado ARIA, el tema resuelto y el teclado viven en el contenedor porque
+ * son lo único que el botón y el contenido tienen que ver igual: el botón
+ * anuncia `expanded`, `controls` y `describedby` sobre el mismo identificador
+ * que el contenido lleva, y el recorrido del tabulador necesita conocer los dos
+ * elementos a la vez.
+ */
+export type ToggletipContext = {
+    /** Tabular desde el botón entra en el contenido; si está vacío, sigue por la página. */
+    onButtonKeydown: (event: KeyboardEvent) => void;
+    /** Dentro no atrapa: sale al botón por arriba y a la página por abajo. */
+    onContentKeydown: (event: KeyboardEvent) => void;
+    contentId: string;
+    open: ComputedRef<boolean>;
+    portalTarget: ComputedRef<string>;
+    ui: ComputedRef<ResolvedSlots<'toggletip'>>;
+    close: (refocus?: boolean) => void;
+    setButton: (element: HTMLElement | null) => void;
+    setCaret: (element: HTMLElement | null) => void;
+    setContent: (element: HTMLElement | null) => void;
+    toggle: () => void;
+};
+export declare const toggletipKey: InjectionKey<ToggletipContext>;

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

@@ -0,0 +1 @@
+export const toggletipKey = Symbol("toggletip");

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

@@ -0,0 +1,29 @@
+import type { ToggletipProps } from './Toggletip.types.js';
+type __VLS_Props = ToggletipProps;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    align: import("../../types/base.js").Placement;
+    ui: import("../../types/slots.js").ComponentUi<"toggletip">;
+    autoAlign: boolean;
+    defaultOpen: boolean;
+    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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,62 @@
+/**
+ * El toggletip de Vuno, traducido a utilidades.
+ *
+ * Las medidas salen de `packages/styles/scss/components/toggletip/_toggletip.scss`
+ * y de lo que `Toggletip` fija al montar su `Popover`: `caret`,
+ * `dropShadow={false}` y `highContrast`. De ahí la superficie inversa sin
+ * sombra, el radio de 2px —`--vuno-popover-border-radius`— y la punta de 12×6.
+ *
+ * El contenido es una **rejilla** con `row-gap` de 16px, no una pila con
+ * márgenes: así la barra de acciones se separa del texto sin conocer lo que
+ * tiene encima, que es lo que permite componer varios párrafos sin sumar
+ * márgenes colapsados.
+ *
+ * Los tokens de enlace y de foco se redeclaran en la superficie porque el fondo
+ * es inverso: un `link-primary` azul sobre `background-inverse` no alcanza el
+ * contraste. Vuno hace exactamente esto —`link-text-color`,
+ * `link-hover-text-color`, `link-visited-text-color` y `button-focus-color`
+ * apuntando a sus variantes inverse— y quien monte encima una superficie clara
+ * debe devolverlos a su valor original, igual que `_slug.scss` hace con la
+ * llamada de la etiqueta de IA.
+ *
+ * El color de la punta entra por `--toggletip-caret-surface` y no por una clase
+ * suelta: quien vista la superficie con otro fondo cambia una variable y la
+ * punta se entera, sin tener que reescribir la geometría del triángulo.
+ *
+ * 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.
+ */
+export declare const toggletipTheme: Record<"toggletip", {
+    readonly slots: {
+        readonly actions: "flex items-center justify-between gap-x-4";
+        readonly button: "inline-flex min-h-6 min-w-6 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-(--vuno-icon-secondary) outline-none hover:text-(--vuno-icon-primary) focus:outline-1 focus:outline-(--vuno-focus) contrast-more:focus:outline-dotted";
+        readonly caret: "pointer-events-none absolute bg-(--toggletip-caret-surface)";
+        readonly content: "z-floating grid w-max max-w-72 gap-y-4 rounded-[2px] bg-(--toggletip-surface) p-4 text-[0.875rem]/[1.25rem] tracking-[0.16px] text-(--vuno-text-inverse) outline-none [--vuno-focus:var(--vuno-focus-inverse)] [--vuno-link-primary:var(--vuno-link-inverse)] [--vuno-link-primary-hover:var(--vuno-link-inverse-hover)] [--vuno-link-visited:var(--vuno-link-inverse-visited)] [--toggletip-caret-surface:var(--toggletip-surface)] [--toggletip-surface:var(--vuno-background-inverse)]";
+        readonly icon: "size-4";
+        readonly root: "inline-flex";
+    };
+    readonly variants: {
+        readonly open: {
+            readonly false: {};
+            readonly true: {
+                readonly button: "text-(--vuno-icon-primary)";
+            };
+        };
+        /** El lado **resuelto**, no el pedido: con volteo la punta cambia de cara. */
+        readonly side: {
+            readonly bottom: {
+                readonly caret: "h-1.5 w-3 [clip-path:polygon(0%_100%,50%_0%,100%_100%)]";
+            };
+            readonly left: {
+                readonly caret: "h-3 w-1.5 [clip-path:polygon(0%_0%,100%_50%,0%_100%)]";
+            };
+            readonly right: {
+                readonly caret: "h-3 w-1.5 [clip-path:polygon(0%_50%,100%_0%,100%_100%)]";
+            };
+            readonly top: {
+                readonly caret: "h-1.5 w-3 [clip-path:polygon(0%_0%,50%_100%,100%_0%)]";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,45 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const toggletipTheme = defineTheme("toggletip", {
+  slots: {
+    /* `space-between` y 16px de separación: los dos valores de `.vuno--toggletip-actions`. */
+    actions: "flex items-center justify-between gap-x-4",
+    /*
+     * `button-reset` de Vuno más `flex`. No lleva fondo al posar el ratón:
+     * lo único que cambia es el relleno del icono, de secundario a primario,
+     * y eso mismo ocurre mientras el toggletip está abierto.
+     *
+     * Vuno deja el botón del tamaño del icono —16px— y eso queda por
+     * debajo del objetivo mínimo de 24px de WCAG 2.2 (2.5.8). Aquí se le
+     * cuelga ese mínimo con `min-h-6`/`min-w-6`, que no cambia el grafismo y
+     * sí la superficie pulsable. Quien monte encima lo neutraliza con
+     * `min-h-0`/`min-w-0`.
+     *
+     * El foco es el trazo de borde del sistema de origen: 1 px por fuera y
+     * en `:focus`, no en `:focus-visible`. Va con el ratón también porque
+     * abrir el toggletip deja el foco en el botón y el trazo es lo único
+     * que lo dice; y va por fuera porque hacia dentro, en una caja de
+     * 24 px, se comería el icono en vez de rodearlo. Con contraste
+     * reforzado pasa a punteado, que es lo que lo distingue del borde.
+     */
+    button: "inline-flex min-h-6 min-w-6 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-(--vuno-icon-secondary) outline-none hover:text-(--vuno-icon-primary) focus:outline-1 focus:outline-(--vuno-focus) contrast-more:focus:outline-dotted",
+    /* La punta se recorta con `clip-path`; el lado resuelto le da la forma. */
+    caret: "pointer-events-none absolute bg-(--toggletip-caret-surface)",
+    content: "z-floating grid w-max max-w-72 gap-y-4 rounded-[2px] bg-(--toggletip-surface) p-4 text-[0.875rem]/[1.25rem] tracking-[0.16px] text-(--vuno-text-inverse) outline-none [--vuno-focus:var(--vuno-focus-inverse)] [--vuno-link-primary:var(--vuno-link-inverse)] [--vuno-link-primary-hover:var(--vuno-link-inverse-hover)] [--vuno-link-visited:var(--vuno-link-inverse-visited)] [--toggletip-caret-surface:var(--toggletip-surface)] [--toggletip-surface:var(--vuno-background-inverse)]",
+    icon: "size-4",
+    root: "inline-flex"
+  },
+  variants: {
+    /* Espeja `.vuno--toggletip--open`: el icono se queda en primario. */
+    open: {
+      false: {},
+      true: { button: "text-(--vuno-icon-primary)" }
+    },
+    /** El lado **resuelto**, no el pedido: con volteo la punta cambia de cara. */
+    side: {
+      bottom: { caret: "h-1.5 w-3 [clip-path:polygon(0%_100%,50%_0%,100%_100%)]" },
+      left: { caret: "h-3 w-1.5 [clip-path:polygon(0%_0%,100%_50%,0%_100%)]" },
+      right: { caret: "h-3 w-1.5 [clip-path:polygon(0%_50%,100%_0%,100%_100%)]" },
+      top: { caret: "h-1.5 w-3 [clip-path:polygon(0%_0%,50%_100%,100%_0%)]" }
+    }
+  }
+});

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

@@ -0,0 +1,25 @@
+import type { Placement, PortalTarget } from '#vuno/types/base';
+import type { ComponentUi } from '#vuno/types/slots';
+export type ToggletipProps = {
+    /**
+     * Ubicación preferida de la superficie respecto al botón.
+     *
+     * Vuno acepta además los nombres heredados —`bottom-left`, `top-right`…— y
+     * los traduce en silencio. Aquí no existen: `Placement` ya es el juego nuevo,
+     * así que un nombre antiguo falla al compilar.
+     */
+    align?: Placement;
+    /**
+     * Recoloca la superficie cuando la alineación pedida no cabe.
+     *
+     * En React viene apagado porque allí sigue marcado como experimental. La guía
+     * de diseño dice lo contrario y `AILabel` ya abre con volteo, así que el
+     * valor por defecto sigue a la guía; quien necesite una dirección fija lo
+     * apaga.
+     */
+    autoAlign?: boolean;
+    /** Abre el toggletip en el primer montaje en cliente, sin intervención. */
+    defaultOpen?: boolean;
+    portal?: PortalTarget;
+    ui?: ComponentUi<'toggletip'>;
+};

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

@@ -0,0 +1,163 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, useId, watch } from "vue";
+import { useAnchor } from "#vuno/composables/internal/useAnchor";
+import { usePortal } from "#vuno/composables/internal/usePortal";
+import { useTheme } from "#vuno/composables/useTheme";
+import { toggletipKey } from "./Toggletip.context";
+defineOptions({ name: "Toggletip" });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  align: { type: String, required: false, default: "bottom" },
+  autoAlign: { type: Boolean, required: false, default: true },
+  defaultOpen: { type: Boolean, required: false, default: false },
+  portal: { type: [String, Boolean], required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const OFFSET = 13;
+const CARET_HEIGHT = 6;
+const TABBABLE = "a[href], audio[controls], button, embed, iframe, input, object, select, summary, textarea, video[controls], [tabindex], [contenteditable]";
+const button = ref(null);
+const caretEl = ref(null);
+const content = ref(null);
+const placed = ref(props.align);
+const contentId = useId();
+const portalTarget = usePortal(() => props.portal);
+const side = computed(() => placed.value.split("-")[0]);
+const ui = useTheme(
+  "toggletip",
+  () => props.ui,
+  () => ({ open: String(open.value), side: side.value })
+);
+const { anchor, release } = useAnchor({
+  onPlaced: (position) => pinCaret(position),
+  arrowElement: () => caretEl.value ?? void 0,
+  distance: () => OFFSET,
+  flip: () => props.autoAlign,
+  placement: () => props.align
+});
+const opposite = { bottom: "top", left: "right", right: "left", top: "bottom" };
+function pinCaret(position) {
+  placed.value = position.placement;
+  const point = position.middlewareData.arrow;
+  if (!caretEl.value || !point) return;
+  const offsets = {
+    bottom: "",
+    left: point.x === void 0 ? "" : `${point.x}px`,
+    right: "",
+    top: point.y === void 0 ? "" : `${point.y}px`
+  };
+  offsets[opposite[side.value]] = `${-CARET_HEIGHT}px`;
+  Object.assign(caretEl.value.style, offsets);
+}
+function show() {
+  if (open.value) return;
+  open.value = true;
+}
+function close(refocus = false) {
+  if (!open.value) return;
+  open.value = false;
+  release();
+  if (refocus) void nextTick(() => button.value?.focus());
+}
+function toggle() {
+  if (open.value) close(true);
+  else show();
+}
+function setButton(element) {
+  button.value = element;
+}
+function setCaret(element) {
+  caretEl.value = element;
+}
+function setContent(element) {
+  content.value = element;
+  if (element && open.value) anchor(button.value ?? void 0, element);
+}
+function tabbables(root) {
+  return [...root.querySelectorAll(TABBABLE)].filter((element) => !element.hasAttribute("disabled") && element.getAttribute("tabindex") !== "-1" && element.getAttribute("aria-hidden") !== "true");
+}
+async function leave() {
+  const from = button.value;
+  close();
+  await nextTick();
+  if (!from) return;
+  const stops = tabbables(document);
+  stops[stops.indexOf(from) + 1]?.focus();
+}
+function onButtonKeydown(event) {
+  if (event.key !== "Tab" || event.shiftKey || !open.value) return;
+  const first = content.value ? tabbables(content.value)[0] : void 0;
+  if (!first) return void leave();
+  event.preventDefault();
+  first.focus();
+}
+function onContentKeydown(event) {
+  if (event.key !== "Tab" || !content.value) return;
+  const stops = tabbables(content.value);
+  const index = stops.indexOf(document.activeElement);
+  if (event.shiftKey) {
+    if (index > 0) return;
+    event.preventDefault();
+    button.value?.focus();
+    return;
+  }
+  if (index !== stops.length - 1) return;
+  event.preventDefault();
+  void leave();
+}
+function contains(target) {
+  return Boolean(target && (button.value?.contains(target) || content.value?.contains(target)));
+}
+function onPointerDown(event) {
+  if (open.value && !contains(event.target)) close();
+}
+function onFocusIn(event) {
+  if (open.value && !contains(event.target)) close();
+}
+function onKeydown(event) {
+  if (event.key !== "Escape" || !open.value) return;
+  event.preventDefault();
+  event.stopPropagation();
+  close(true);
+}
+const closeOnWindowBlur = () => close();
+provide(toggletipKey, {
+  onButtonKeydown,
+  onContentKeydown,
+  close,
+  contentId,
+  open: computed(() => open.value),
+  portalTarget,
+  setButton,
+  setCaret,
+  setContent,
+  toggle,
+  ui
+});
+watch(open, async (value) => {
+  if (!value) {
+    release();
+    return;
+  }
+  await nextTick();
+  anchor(button.value ?? void 0, content.value ?? void 0);
+});
+onMounted(() => {
+  document.addEventListener("focusin", onFocusIn);
+  document.addEventListener("pointerdown", onPointerDown, true);
+  window.addEventListener("blur", closeOnWindowBlur);
+  window.addEventListener("keydown", onKeydown);
+  if (props.defaultOpen) show();
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("focusin", onFocusIn);
+  document.removeEventListener("pointerdown", onPointerDown, true);
+  window.removeEventListener("blur", closeOnWindowBlur);
+  window.removeEventListener("keydown", onKeydown);
+  release();
+});
+</script>
+
+<template>
+    <span :class="ui.root"><slot /></span>
+</template>

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

@@ -0,0 +1,29 @@
+import type { ToggletipProps } from './Toggletip.types.js';
+type __VLS_Props = ToggletipProps;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    align: import("../../types/base.js").Placement;
+    ui: import("../../types/slots.js").ComponentUi<"toggletip">;
+    autoAlign: boolean;
+    defaultOpen: boolean;
+    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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/ToggletipActions/ToggletipActions.d.vue.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/ToggletipActions/ToggletipActions.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { inject } from "vue";
+import { toggletipKey } from "#vuno/components/Toggletip/Toggletip.context";
+defineOptions({ name: "ToggletipActions" });
+const context = inject(toggletipKey);
+if (!context) throw new Error("ToggletipActions debe usarse dentro de Toggletip.");
+</script>
+
+<template>
+    <div :class="context.ui.value.actions"><slot /></div>
+</template>