@groupteknology/vuno 2.0.0 → 4.0.0

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/internal/slots";
-defineOptions({ name: "VunoTooltip" });
+import { firstElement } from "#vuno/utils/slots";
+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,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/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: {};
+        };
+    };
+}>;

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

@@ -0,0 +1,82 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const treeViewTheme = defineTheme("treeView", {
+  compoundVariants: [
+    /* La hoja centra su texto con relleno vertical —(32 − 18) / 2—, no con `align-items`. */
+    { class: { nodeLabel: "py-[7px]" }, leaf: "true", size: "sm" },
+    { class: { nodeLabel: "py-0" }, leaf: "true", size: "xs" },
+    /* Con icono, el chevron y el icono se pegan: el hueco lo pone el icono. */
+    { class: { toggle: "me-0" }, leaf: "false", withIcon: "true" },
+    /* Vuno solo oscurece al apuntar lo que de verdad se puede elegir. */
+    { class: { nodeLabel: "hover:bg-(--vuno-layer-selected-hover-01)" }, disabled: "false", selected: "true" }
+  ],
+  slots: {
+    details: "flex min-w-0 items-center",
+    group: "m-0 list-none p-0",
+    icon: "mx-2 size-4 min-h-4 min-w-4 shrink-0 text-(--vuno-icon-secondary)",
+    node: "group m-0 block list-none bg-(--vuno-layer-01) text-(--vuno-text-secondary) no-underline outline-none",
+    nodeLabel: "group/label relative box-border flex w-full flex-1 items-center pe-4 text-sm leading-[1.125rem] tracking-[0.16px]",
+    /* El `li` de un nodo enlace: solo envuelve, el `treeitem` es el ancla. */
+    nodeLink: "m-0 flex list-none flex-col bg-(--vuno-layer-01)",
+    root: "m-0 list-none overflow-hidden p-0",
+    text: "block overflow-hidden ps-1 leading-[1.2] text-ellipsis whitespace-nowrap",
+    toggle: "flex size-6 shrink-0 items-center border-0 -ms-1 me-1 ps-1",
+    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"
+  },
+  variants: {
+    /** El nodo en curso lleva una barra de 4 px, no un fondo. */
+    active: {
+      false: {},
+      true: { nodeLabel: "before:absolute before:inset-y-0 before:start-0 before:w-1 before:bg-(--vuno-interactive) before:content-['']" }
+    },
+    disabled: {
+      false: {
+        details: "group-hover/label:text-(--vuno-text-primary)",
+        icon: "group-hover/label:text-(--vuno-icon-primary)",
+        node: "hover:cursor-pointer",
+        /*
+         * El contorno es del rótulo del nodo con foco y de ninguno
+         * más. Tiene que ser hijo directo: `group-focus` compila a
+         * descendencia y, como aquí un `treeitem` anida otros, una rama
+         * enfocada encendía también el contorno de todos sus hijos
+         * visibles y no se sabía dónde estaba el foco.
+         */
+        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)",
+        toggle: "hover:cursor-pointer",
+        toggleIcon: "group-hover/label:text-(--vuno-icon-primary)"
+      },
+      true: {
+        icon: "text-(--vuno-icon-disabled)",
+        node: "cursor-not-allowed bg-(--vuno-field-01) text-(--vuno-text-disabled)",
+        nodeLabel: "text-(--vuno-text-disabled)",
+        toggle: "cursor-not-allowed",
+        toggleIcon: "text-(--vuno-icon-disabled)"
+      }
+    },
+    expanded: {
+      false: {},
+      true: { toggleIcon: "rotate-0" }
+    },
+    /*
+     * Una hoja estira su rótulo con `flex`; una rama no, porque debajo
+     * cuelga su propia lista. Y el icono de una rama se acerca al chevron.
+     */
+    leaf: {
+      /* Los 4 px que compensan el margen final del chevron. */
+      false: { icon: "ms-1" },
+      true: { node: "flex" }
+    },
+    selected: {
+      false: {},
+      true: {
+        icon: "text-(--vuno-icon-primary)",
+        nodeLabel: "bg-(--vuno-layer-selected-01) text-(--vuno-text-primary)",
+        toggleIcon: "text-(--vuno-icon-primary)"
+      }
+    },
+    size: {
+      xs: { nodeLabel: "min-h-6" },
+      sm: { nodeLabel: "min-h-8" }
+    },
+    withIcon: { false: {}, true: {} }
+  }
+});

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

@@ -0,0 +1,48 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/** Vuno identifica cada nodo con una cadena o un número, nunca con el objeto. */
+export type TreeViewValue = number | string;
+export type TreeViewItem = {
+    children?: TreeViewItem[];
+    disabled?: boolean;
+    /** Convierte el nodo en un enlace: el `role="treeitem"` pasa al ancla. */
+    href?: string;
+    icon?: string;
+    label: string;
+    value: TreeViewValue;
+};
+export type TreeViewSize = 'sm' | 'xs';
+/**
+ * Un elemento ya situado en el árbol.
+ *
+ * Vuno compone `TreeView` con `TreeNode` y reparte por contexto la
+ * profundidad, lo expandido y lo elegido. Aquí el árbol llega como datos, así
+ * que ese mismo reparto se calcula una vez y baja resuelto: cada nodo recibe su
+ * profundidad, sus identificadores de DOM y su estado, y no tiene que
+ * deducirlos ni preguntar hacia arriba.
+ */
+export type TreeViewNode = {
+    id: string;
+    children: TreeViewNode[];
+    /** Cero en la raíz, igual que el `DepthContext` de Vuno. */
+    depth: number;
+    disabled: boolean;
+    expanded: boolean;
+    item: TreeViewItem;
+    /** Clave interna: distingue `1` de `'1'` sin perder el tipo del valor. */
+    key: string;
+    labelId: string;
+    parentKey?: string;
+    subtreeId: string;
+};
+/** Los eventos que en Vuno seleccionan o expanden un nodo. */
+export type TreeViewEvent = KeyboardEvent | MouseEvent;
+export type TreeViewProps = {
+    id?: string;
+    /** Oculta el rótulo visible y lo conserva como `aria-label` del árbol. */
+    hideLabel?: boolean;
+    items: TreeViewItem[];
+    label: string;
+    multiselect?: boolean;
+    size?: TreeViewSize;
+    ui?: ComponentUi<'treeView'>;
+};