@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -1,11 +1,86 @@
-import type { VunoPlacement, VunoPortalTarget } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-export type VunoTooltipSide = Extract<VunoPlacement, 'bottom' | 'left' | 'right' | 'top'>;
-export type VunoTooltipProps = {
+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;
-    portal?: VunoPortalTarget;
-    side?: VunoTooltipSide;
+    /** 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?: VunoUi<'tooltip'>;
+    ui?: ComponentUi<'tooltip'>;
 };

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

@@ -1,138 +1,232 @@
 <script setup>
-import { cloneVNode, computed, nextTick, onBeforeUnmount, ref, useId } from "vue";
-import { useVunoAnchor } from "#vuno/composables/internal/useVunoAnchor";
-import { useVunoPortal } from "#vuno/composables/internal/useVunoPortal";
+import { cloneVNode, computed, nextTick, onBeforeUnmount, onMounted, 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 { firstElement } from "#vuno/utils/slots";
-defineOptions({ name: "VunoTooltip" });
+defineOptions({ name: "Tooltip" });
 const props = defineProps({
-  delay: { type: Number, required: false, default: 300 },
-  disabled: { type: Boolean, required: false },
+  align: { type: String, required: false, default: void 0 },
+  autoAlign: { type: Boolean, required: false, default: true },
+  closeOnActivation: { type: Boolean, required: false, default: false },
+  defaultOpen: { type: Boolean, required: false, default: false },
+  delay: { type: Number, required: false, default: void 0 },
+  description: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  dropShadow: { type: Boolean, required: false, default: false },
+  enterDelayMs: { type: Number, required: false, default: void 0 },
+  highContrast: { type: Boolean, required: false, default: true },
+  label: { type: String, required: false, default: void 0 },
+  leaveDelayMs: { type: Number, required: false, default: 300 },
   portal: { type: [String, Boolean], required: false, default: void 0 },
-  side: { type: String, required: false, default: "top" },
+  side: { type: String, required: false, default: void 0 },
   text: { type: String, required: false, default: void 0 },
   ui: { type: Object, required: false, default: void 0 }
 });
 const slots = defineSlots();
-const ui = useTheme("tooltip", () => props.ui);
-const portalTarget = useVunoPortal(() => props.portal);
+const CARET_HEIGHT = 6;
+const DISTANCE = 12;
+const portalTarget = usePortal(() => props.portal);
 const tooltipId = useId();
-const arrowEl = ref(null);
+const caretEl = ref(null);
 const contentEl = ref(null);
-const open = ref(false);
+const open = ref(props.defaultOpen);
+const placed = ref();
 const triggerEl = ref(null);
-const usable = computed(() => !props.disabled && Boolean(props.text));
+const alignment = computed(() => props.align ?? props.side ?? "top");
+const message = computed(() => props.label ?? props.description ?? props.text);
+const describing = computed(() => !props.label);
+const enterDelay = computed(() => props.enterDelayMs ?? props.delay ?? 100);
+const side = computed(() => (placed.value ?? alignment.value).split("-")[0]);
+const usable = computed(() => !props.disabled && Boolean(message.value));
+const ui = useTheme(
+  "tooltip",
+  () => props.ui,
+  () => ({
+    dropShadow: String(props.dropShadow),
+    highContrast: String(props.highContrast),
+    open: String(open.value),
+    side: side.value
+  })
+);
 const opposite = { bottom: "top", left: "right", right: "left", top: "bottom" };
-const { anchor, release } = useVunoAnchor({
-  onPlaced: (position) => pinArrow(position),
-  distance: 6,
-  arrowElement: () => arrowEl.value ?? void 0,
-  placement: () => props.side
+const { anchor, release } = useAnchor({
+  onPlaced: (position) => pinCaret(position),
+  distance: DISTANCE,
+  arrowElement: () => caretEl.value ?? void 0,
+  flip: () => props.autoAlign,
+  placement: () => alignment.value
 });
-function pinArrow(position) {
+function pinCaret(position) {
+  placed.value = position.placement;
   const point = position.middlewareData.arrow;
-  if (!arrowEl.value || !point) return;
-  const side = opposite[position.placement.split("-")[0]];
-  Object.assign(arrowEl.value.style, {
+  if (!caretEl.value || !point) return;
+  const offsets = {
     bottom: "",
     left: point.x === void 0 ? "" : `${point.x}px`,
     right: "",
-    /* Medio cuadrado fuera de la caja: la otra mitad la tapa el fondo. */
-    [side]: "-4px",
     top: point.y === void 0 ? "" : `${point.y}px`
-  });
+  };
+  offsets[opposite[side.value]] = `${-CARET_HEIGHT}px`;
+  Object.assign(caretEl.value.style, offsets);
 }
-const follow = () => anchor(triggerEl.value ?? void 0, contentEl.value ?? void 0);
 let timer;
 function cancelPending() {
   if (timer === void 0) return;
   clearTimeout(timer);
   timer = void 0;
 }
-async function show() {
-  cancelPending();
-  if (!usable.value || open.value) return;
-  open.value = true;
+async function apply(next) {
+  timer = void 0;
+  if (open.value === next) return;
+  open.value = next;
+  if (!next) {
+    placed.value = void 0;
+    return void release();
+  }
   await nextTick();
-  follow();
+  anchor(triggerEl.value ?? void 0, contentEl.value ?? void 0);
 }
-function showAfterDelay() {
+function setOpen(next, delay = 0) {
   cancelPending();
-  if (!usable.value) return;
-  if (props.delay <= 0) return void show();
-  timer = setTimeout(() => void show(), props.delay);
+  if (next && !usable.value) return;
+  if (delay <= 0) return void apply(next);
+  timer = setTimeout(() => void apply(next), delay);
 }
-function hide() {
-  cancelPending();
-  open.value = false;
-  release();
+watch(usable, (value) => {
+  if (!value) setOpen(false);
+});
+let dragging = false;
+let inside = false;
+let byPointer = false;
+const DRAG_STOP = ["pointercancel", "pointerup", "touchcancel", "touchend"];
+function startDrag() {
+  if (dragging) return;
+  dragging = true;
+  for (const type of DRAG_STOP) document.addEventListener(type, onDragStop);
+}
+function endDrag() {
+  if (!dragging) return;
+  dragging = false;
+  for (const type of DRAG_STOP) document.removeEventListener(type, onDragStop);
+}
+function onDragStop() {
+  endDrag();
+  if (!inside) setOpen(false, props.leaveDelayMs);
+}
+function onPointerenter(event) {
+  if (event.pointerType === "touch") return;
+  inside = true;
+  setOpen(true, enterDelay.value);
+}
+function onPointerleave() {
+  inside = false;
+  if (dragging) return;
+  setOpen(false, props.leaveDelayMs);
+}
+function onBlur() {
+  byPointer = false;
+  setOpen(false);
 }
-function onKeydown(event) {
+function onClick() {
+  if (props.closeOnActivation) setOpen(false);
+}
+function onFocus() {
+  if (!byPointer) setOpen(true);
+}
+function onTriggerKeydown(event) {
+  if (!props.closeOnActivation || !open.value) return;
+  if (event.key === "Enter" || event.key === " ") setOpen(false);
+}
+function onTriggerPointerdown(event) {
+  if (event.pointerType !== "touch") byPointer = true;
+  startDrag();
+}
+function onTriggerPointermove(event) {
+  if (event.buttons === 1) startDrag();
+  else endDrag();
+}
+function onDocumentKeydown(event) {
   if (event.key !== "Escape" || !open.value) return;
   event.preventDefault();
-  hide();
-}
-if (typeof document !== "undefined") {
-  document.addEventListener("keydown", onKeydown);
-  onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
+  event.stopPropagation();
+  setOpen(false);
 }
 const Trigger = () => {
   const node = firstElement(slots.default?.());
   if (!node) return null;
+  const own = node.props ?? {};
+  const reference = usable.value ? tooltipId : void 0;
   return cloneVNode(node, {
-    onBlur: hide,
-    /* Con el teclado no hay retardo que valga: al enfocar, ya. */
-    onFocus: () => void show(),
-    onPointerdown: hide,
-    /*
-     * En un táctil no hay «posar»: el navegador emite un `pointerenter`
-     * al tocar, y el aviso se abriría pegado al dedo y encima de lo que
-     * se acaba de pulsar.
-     */
-    onPointerenter: (event) => {
-      if (event.pointerType !== "touch") showAfterDelay();
-    },
-    onPointerleave: hide,
-    "aria-describedby": open.value ? tooltipId : void 0,
+    onBlur,
+    onClick,
+    onFocus,
+    onKeydown: onTriggerKeydown,
+    onPointerdown: onTriggerPointerdown,
+    onPointerenter,
+    onPointerleave,
+    onPointermove: onTriggerPointermove,
+    "aria-describedby": own["aria-describedby"] ?? (describing.value ? reference : void 0),
+    "aria-labelledby": own["aria-labelledby"] ?? (describing.value ? void 0 : reference),
     ref: (el) => {
       triggerEl.value = el?.$el ?? el;
     }
   });
 };
-onBeforeUnmount(hide);
+onMounted(() => {
+  document.addEventListener("keydown", onDocumentKeydown);
+  if (open.value) void nextTick(() => anchor(triggerEl.value ?? void 0, contentEl.value ?? void 0));
+});
+onBeforeUnmount(() => {
+  cancelPending();
+  endDrag();
+  release();
+  document.removeEventListener("keydown", onDocumentKeydown);
+});
 </script>
 
 <template>
     <Trigger />
 
+    <!--
+        El destino solo se usa abierto. Cerrado el texto se queda donde está
+        —escondido y sin ocupar sitio—, que es además lo que evita
+        teletransportar en servidor un nodo que allí nadie ve.
+    -->
     <Teleport
-        v-if="open"
+        :disabled="!open"
         :to="portalTarget"
     >
         <!--
+            No se desmonta al cerrar: `aria-labelledby` referencia este
+            identificador también cerrado, y un botón solo con icono se
+            quedaría sin nombre accesible mientras nadie lo apunta.
+
             No es alcanzable con el tabulador y no recibe el foco: un aviso que
             lo atrapara dejaría al teclado dentro de algo que se cierra solo.
         -->
         <div
+            v-if="usable"
             :id="tooltipId"
             ref="contentEl"
+            :aria-hidden="open ? 'false' : 'true'"
             :class="ui.content"
             role="tooltip"
-            style="position: fixed; top: 0; left: 0; width: max-content"
+            style="position: fixed; top: 0; left: 0"
+            @pointerenter="onPointerenter"
+            @pointerleave="onPointerleave"
         >
-            {{ props.text }}
+            {{ message }}
 
             <!--
-                Un cuadrado girado y no un polígono: así sirve igual por los
-                cuatro lados. Un triángulo habría que rotarlo según el lado
-                resuelto, y al rotarlo su caja deja de coincidir con lo que se
-                ve, que es de donde salen las flechas descolocadas.
+                Un triángulo recortado y no un cuadrado girado: girar deja la
+                caja del elemento sin coincidir con lo que se ve, y de ahí salen
+                las puntas descolocadas. El recorte cambia por lado resuelto.
             -->
             <div
-                ref="arrowEl"
+                ref="caretEl"
                 aria-hidden="true"
-                :class="ui.arrow"
-                style="position: absolute"
+                :class="ui.caret"
             />
         </div>
     </Teleport>

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

@@ -1,13 +1,24 @@
-import type { VunoTooltipProps } from './Tooltip.types.js';
+import type { TooltipAlignment, TooltipProps } from './Tooltip.types.js';
 type __VLS_Slots = {
     default?: () => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<VunoTooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoTooltipProps> & 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: import("../../types/slots.js").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: import("../../types/base.js").VunoPortalTarget;
-    side: import("./Tooltip.types.js").VunoTooltipSide;
+    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/TreeView/TreeView.d.vue.ts

@@ -0,0 +1,29 @@
+import type { TreeViewEvent, TreeViewItem, TreeViewProps, TreeViewValue } from './TreeView.types.js';
+type __VLS_Props = TreeViewProps;
+type __VLS_ModelProps = {
+    'active'?: TreeViewValue | undefined;
+    'selected'?: TreeViewValue[];
+    'expanded'?: TreeViewValue[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: TreeViewItem, event: TreeViewEvent) => any;
+    toggle: (item: TreeViewItem, expanded: boolean, event: TreeViewEvent) => any;
+    "update:expanded": (value: TreeViewValue[]) => any;
+    "update:selected": (value: TreeViewValue[]) => any;
+    "update:active": (value: TreeViewValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((item: TreeViewItem, event: TreeViewEvent) => any) | undefined;
+    onToggle?: ((item: TreeViewItem, expanded: boolean, event: TreeViewEvent) => any) | undefined;
+    "onUpdate:expanded"?: ((value: TreeViewValue[]) => any) | undefined;
+    "onUpdate:selected"?: ((value: TreeViewValue[]) => any) | undefined;
+    "onUpdate:active"?: ((value: TreeViewValue | undefined) => any) | undefined;
+}>, {
+    size: import("./TreeView.types.js").TreeViewSize;
+    hideLabel: boolean;
+    id: string;
+    ui: import("../../types/slots.js").ComponentUi<"treeView">;
+    multiselect: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,99 @@
+export declare const treeViewTheme: Record<"treeView", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly nodeLabel: "py-[7px]";
+        };
+        readonly leaf: "true";
+        readonly size: "sm";
+    }, {
+        readonly class: {
+            readonly nodeLabel: "py-0";
+        };
+        readonly leaf: "true";
+        readonly size: "xs";
+    }, {
+        readonly class: {
+            readonly toggle: "me-0";
+        };
+        readonly leaf: "false";
+        readonly withIcon: "true";
+    }, {
+        readonly class: {
+            readonly nodeLabel: "hover:bg-(--vuno-layer-selected-hover-01)";
+        };
+        readonly disabled: "false";
+        readonly selected: "true";
+    }];
+    readonly slots: {
+        readonly details: "flex min-w-0 items-center";
+        readonly group: "m-0 list-none p-0";
+        readonly icon: "mx-2 size-4 min-h-4 min-w-4 shrink-0 text-(--vuno-icon-secondary)";
+        readonly node: "group m-0 block list-none bg-(--vuno-layer-01) text-(--vuno-text-secondary) no-underline outline-none";
+        readonly nodeLabel: "group/label relative box-border flex w-full flex-1 items-center pe-4 text-sm leading-[1.125rem] tracking-[0.16px]";
+        readonly nodeLink: "m-0 flex list-none flex-col bg-(--vuno-layer-01)";
+        readonly root: "m-0 list-none overflow-hidden p-0";
+        readonly text: "block overflow-hidden ps-1 leading-[1.2] text-ellipsis whitespace-nowrap";
+        readonly toggle: "flex size-6 shrink-0 items-center border-0 -ms-1 me-1 ps-1";
+        readonly toggleIcon: "size-4 shrink-0 -rotate-90 text-(--vuno-icon-secondary) transition-transform duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none";
+    };
+    readonly variants: {
+        /** El nodo en curso lleva una barra de 4 px, no un fondo. */
+        readonly active: {
+            readonly false: {};
+            readonly true: {
+                readonly nodeLabel: "before:absolute before:inset-y-0 before:start-0 before:w-1 before:bg-(--vuno-interactive) before:content-['']";
+            };
+        };
+        readonly disabled: {
+            readonly false: {
+                readonly details: "group-hover/label:text-(--vuno-text-primary)";
+                readonly icon: "group-hover/label:text-(--vuno-icon-primary)";
+                readonly node: "hover:cursor-pointer";
+                readonly nodeLabel: "hover:bg-(--vuno-layer-hover-01) hover:text-(--vuno-text-primary) [.group:focus>&]:outline-solid [.group:focus>&]:outline-2 [.group:focus>&]:-outline-offset-2 [.group:focus>&]:outline-(--vuno-focus)";
+                readonly toggle: "hover:cursor-pointer";
+                readonly toggleIcon: "group-hover/label:text-(--vuno-icon-primary)";
+            };
+            readonly true: {
+                readonly icon: "text-(--vuno-icon-disabled)";
+                readonly node: "cursor-not-allowed bg-(--vuno-field-01) text-(--vuno-text-disabled)";
+                readonly nodeLabel: "text-(--vuno-text-disabled)";
+                readonly toggle: "cursor-not-allowed";
+                readonly toggleIcon: "text-(--vuno-icon-disabled)";
+            };
+        };
+        readonly expanded: {
+            readonly false: {};
+            readonly true: {
+                readonly toggleIcon: "rotate-0";
+            };
+        };
+        readonly leaf: {
+            readonly false: {
+                readonly icon: "ms-1";
+            };
+            readonly true: {
+                readonly node: "flex";
+            };
+        };
+        readonly selected: {
+            readonly false: {};
+            readonly true: {
+                readonly icon: "text-(--vuno-icon-primary)";
+                readonly nodeLabel: "bg-(--vuno-layer-selected-01) text-(--vuno-text-primary)";
+                readonly toggleIcon: "text-(--vuno-icon-primary)";
+            };
+        };
+        readonly size: {
+            readonly xs: {
+                readonly nodeLabel: "min-h-6";
+            };
+            readonly sm: {
+                readonly nodeLabel: "min-h-8";
+            };
+        };
+        readonly withIcon: {
+            readonly false: {};
+            readonly true: {};
+        };
+    };
+}>;