@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -1,129 +1,102 @@
 <script setup>
 import { computed } from "vue";
 import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
-import { getPageCount, getPageItems } from "#vuno/utils/pagination";
 import Button from "#vuno/components/Button/Button.vue";
-defineOptions({ name: "VunoPagination" });
+import Select from "#vuno/components/Select/Select.vue";
+defineOptions({ name: "Pagination" });
 const props = defineProps({
+  backwardText: { type: String, required: false, default: void 0 },
+  forwardText: { type: String, required: false, default: void 0 },
+  itemsPerPageText: { type: String, required: false, default: void 0 },
   page: { type: Number, required: false, default: 1 },
   pageSize: { type: Number, required: false, default: 10 },
-  siblings: { type: Number, required: false, default: 1 },
+  pageSizes: { type: Array, required: false, default: () => [10, 20, 30, 40, 50] },
   size: { type: String, required: false, default: "md" },
-  total: { type: Number, required: false, default: 0 },
+  totalItems: { type: Number, required: true },
   ui: { type: Object, required: false, default: void 0 }
 });
-const emit = defineEmits(["update:page"]);
+const emit = defineEmits(["change", "update:page", "update:pageSize"]);
 const icons = useIcons();
 const messages = useMessages();
-const ui = useTheme("pagination", () => props.ui);
-const pageCount = computed(() => getPageCount(props.total, props.pageSize));
-const items = computed(() => getPageItems(props.page, pageCount.value, props.siblings));
-const isFirst = computed(() => props.page <= 1);
-const isLast = computed(() => props.page >= pageCount.value);
-function goTo(page) {
-  if (page < 1 || page > pageCount.value || page === props.page) return;
+const ui = useTheme(
+  "pagination",
+  () => props.ui,
+  () => ({ size: props.size })
+);
+const pageCount = computed(() => Math.max(1, Math.ceil(props.totalItems / props.pageSize)));
+const start = computed(() => props.totalItems === 0 ? 0 : (props.page - 1) * props.pageSize + 1);
+const end = computed(() => Math.min(props.page * props.pageSize, props.totalItems));
+const pageOptions = computed(() => props.pageSizes.map((value) => ({ label: String(value), value })));
+const currentPageOptions = computed(() => Array.from({ length: pageCount.value }, (_, index) => ({ label: String(index + 1), value: index + 1 })));
+function changePage(value) {
+  const page = Number(value);
+  if (page < 1 || page > pageCount.value) return;
   emit("update:page", page);
+  emit("change", { page, pageSize: props.pageSize });
+}
+function changeSize(value) {
+  const pageSize = Number(value);
+  emit("update:pageSize", pageSize);
+  emit("update:page", 1);
+  emit("change", { page: 1, pageSize });
 }
 </script>
 
 <template>
-    <!--
-        Nada que pintar con una sola página: un paginador que solo puede llevar
-        a donde ya estás es ruido, y además ocupa sitio en la barra.
-    -->
-    <!--
-        Con nombre, que un `<nav>` es una región del documento: sin él, quien
-        salta de región en región oye «navegación» y no sabe si es el menú, la
-        miga o esto. Va antes de `$attrs`, así que un proyecto que pase el suyo
-        lo pisa —que es lo que hay que poder hacer cuando en la misma pantalla
-        hay dos tablas—.
-    -->
     <nav
-        v-if="pageCount > 1"
         :aria-label="messages.paginationLabel"
-        :class="ui.root"
+        :class="ui.bar"
     >
-        <ul :class="ui.list">
-            <li>
-                <Button
-                    :aria-label="messages.paginationFirst"
-                    color="neutral"
-                    :disabled="isFirst"
-                    :icon="icons.paginationFirst"
-                    :size="props.size"
-                    variant="ghost"
-                    @click="goTo(1)"
-                />
-            </li>
+        <div :class="ui.left">
+            <Select
+                :hideLabel="false"
+                :inline="true"
+                :items="pageOptions"
+                :labelText="props.itemsPerPageText ?? messages.pageSize"
+                :modelValue="props.pageSize"
+                :size="props.size"
+                :ui="{ title: ui.selectorLabel, wrapper: ui.selector }"
+                @update:model-value="changeSize"
+            />
 
-            <li>
-                <Button
-                    :aria-label="messages.paginationPrevious"
-                    color="neutral"
-                    :disabled="isFirst"
-                    :icon="icons.paginationPrevious"
-                    :size="props.size"
-                    variant="ghost"
-                    @click="goTo(props.page - 1)"
-                />
-            </li>
+            <span :class="ui.range">{{ start }}–{{ end }} {{ messages.of }} {{ props.totalItems }}</span>
+        </div>
 
-            <li
-                v-for="(item, index) in items"
-                :key="item === 'gap' ? `gap-${index}` : item"
-            >
-                <!--
-                    El salto no es un botón ni lleva texto para el lector: decir
-                    «puntos suspensivos» entre dos números no informa de nada, y
-                    el recorrido a saltos ya se entiende por los números que hay.
-                -->
-                <span
-                    v-if="item === 'gap'"
-                    aria-hidden="true"
-                    :class="ui.gap"
-                    >…</span
-                >
+        <div :class="ui.right">
+            <Select
+                :hideLabel="true"
+                :inline="true"
+                :items="currentPageOptions"
+                :labelText="`${messages.page} ${messages.of} ${pageCount} ${messages.pages}`"
+                :modelValue="props.page"
+                :size="props.size"
+                :ui="{ title: 'sr-only', wrapper: ui.pageSelector }"
+                @update:model-value="changePage"
+            />
 
-                <!--
-                    La etiqueta del lector dice «Página 3» y no solo «3», que
-                    fuera de la fila no significaría nada. `aria-current` es lo
-                    que distingue la actual, no el color.
-                -->
-                <Button
-                    v-else
-                    :aria-current="item === props.page ? 'page' : void 0"
-                    :aria-label="`${messages.page} ${item}`"
-                    :color="item === props.page ? 'primary' : 'neutral'"
-                    :label="String(item)"
-                    :size="props.size"
-                    :variant="item === props.page ? 'solid' : 'ghost'"
-                    @click="goTo(item)"
-                />
-            </li>
+            <span :class="ui.page">{{ messages.of }} {{ pageCount }} {{ messages.pages }}</span>
 
-            <li>
+            <div :class="ui.controls">
                 <Button
-                    :aria-label="messages.paginationNext"
-                    color="neutral"
-                    :disabled="isLast"
-                    :icon="icons.paginationNext"
+                    :disabled="props.page <= 1"
+                    :icon="icons.paginationPrevious"
+                    :iconDescription="props.backwardText ?? messages.paginationPrevious"
+                    kind="ghost"
                     :size="props.size"
-                    variant="ghost"
-                    @click="goTo(props.page + 1)"
+                    :ui="{ base: ui.control }"
+                    @click="changePage(props.page - 1)"
                 />
-            </li>
 
-            <li>
                 <Button
-                    :aria-label="messages.paginationLast"
-                    color="neutral"
-                    :disabled="isLast"
-                    :icon="icons.paginationLast"
+                    :disabled="props.page >= pageCount"
+                    :icon="icons.paginationNext"
+                    :iconDescription="props.forwardText ?? messages.paginationNext"
+                    kind="ghost"
                     :size="props.size"
-                    variant="ghost"
-                    @click="goTo(pageCount)"
+                    :ui="{ base: ui.control }"
+                    @click="changePage(props.page + 1)"
                 />
-            </li>
-        </ul>
+            </div>
+        </div>
     </nav>
 </template>

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

@@ -1,33 +1,27 @@
-import type { VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * El paginador.
- *
- * Qué números se enseñan y dónde van los saltos lo decide `getPageItems`,
- * que es lógica pura y vive en `utils/` con sus pruebas: es la parte que se
- * equivoca en los extremos y en el caso de pocas páginas, y ahí un test
- * vale más que mirar la pantalla.
- */
-type Props = {
-    page?: number;
-    pageSize?: number;
-    /** Cuántas páginas se enseñan a cada lado de la actual. */
-    siblings?: number;
-    size?: VunoSize;
-    total?: number;
-    ui?: VunoUi<'pagination'>;
-};
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { PaginationProps } from './Pagination.types.js';
+declare const __VLS_export: import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: {
+        page: number;
+        pageSize: number;
+    }) => any;
     "update:page": (page: number) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "update:pageSize": (pageSize: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
+    onChange?: ((value: {
+        page: number;
+        pageSize: number;
+    }) => any) | undefined;
     "onUpdate:page"?: ((page: number) => any) | undefined;
+    "onUpdate:pageSize"?: ((pageSize: number) => any) | undefined;
 }>, {
+    size: import("./Pagination.types.js").PaginationSize;
     page: number;
-    size: VunoSize;
     pageSize: number;
-    total: number;
-    ui: VunoUi<"pagination">;
-    siblings: number;
+    ui: import("../../types/slots.js").ComponentUi<"pagination">;
+    backwardText: string;
+    forwardText: string;
+    itemsPerPageText: string;
+    pageSizes: number[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,15 @@
+import type { PaginationNavProps } from './PaginationNav.types.js';
+declare const __VLS_export: import("vue").DefineComponent<PaginationNavProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (page: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationNavProps> & Readonly<{
+    "onUpdate:page"?: ((page: number) => any) | undefined;
+}>, {
+    size: "lg" | "md" | "sm";
+    page: number;
+    pageSize: number;
+    ui: import("../../types/slots.js").ComponentUi<"pagination">;
+    totalItems: number;
+    siblings: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,10 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/** El valor por defecto de `size` es `lg`, el del sistema de origen. */
+export type PaginationNavProps = {
+    page?: number;
+    pageSize?: number;
+    siblings?: number;
+    size?: 'lg' | 'md' | 'sm';
+    totalItems?: number;
+    ui?: ComponentUi<'pagination'>;
+};

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

@@ -0,0 +1,116 @@
+<script setup>
+import { computed } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { getPageCount, getPageItems } from "#vuno/utils/pagination";
+import Button from "#vuno/components/Button/Button.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "PaginationNav" });
+const props = defineProps({
+  page: { type: Number, required: false, default: 1 },
+  pageSize: { type: Number, required: false, default: 10 },
+  siblings: { type: Number, required: false, default: 1 },
+  size: { type: String, required: false, default: "lg" },
+  totalItems: { type: Number, required: false, default: 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["update:page"]);
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme(
+  "pagination",
+  () => props.ui,
+  () => ({ size: props.size })
+);
+const pageCount = computed(() => getPageCount(props.totalItems, props.pageSize));
+const items = computed(() => getPageItems(props.page, pageCount.value, props.siblings));
+function goTo(page) {
+  if (page >= 1 && page <= pageCount.value && page !== props.page) emit("update:page", page);
+}
+function hiddenPages(index) {
+  const before = items.value.slice(0, index).filter((item) => item !== "gap").at(-1);
+  const after = items.value.slice(index + 1).find((item) => item !== "gap");
+  const from = before === void 0 ? 1 : before + 1;
+  const to = after === void 0 ? pageCount.value : after - 1;
+  return Array.from({ length: Math.max(to - from + 1, 0) }, (_, offset) => from + offset);
+}
+function onOverflow(event) {
+  const select = event.target;
+  const page = Number(select.value);
+  select.value = "";
+  goTo(page);
+}
+</script>
+
+<template>
+    <nav
+        v-if="pageCount > 1"
+        :aria-label="messages.paginationLabel"
+        :class="ui.root"
+    >
+        <ul :class="ui.list">
+            <li>
+                <Button
+                    :disabled="props.page <= 1"
+                    :icon="icons.paginationPrevious"
+                    :iconDescription="messages.paginationPrevious"
+                    kind="ghost"
+                    :size="props.size"
+                    :ui="{ base: ui.control }"
+                    @click="goTo(props.page - 1)"
+                />
+            </li>
+            <li
+                v-for="(item, index) in items"
+                :key="item === 'gap' ? `gap-${index}` : item"
+            >
+                <div
+                    v-if="item === 'gap'"
+                    :class="ui.gap"
+                >
+                    <select
+                        :aria-label="messages.page"
+                        :class="ui.overflowSelect"
+                        @change="onOverflow"
+                    >
+                        <option
+                            hidden
+                            value=""
+                        />
+                        <option
+                            v-for="hidden in hiddenPages(index)"
+                            :key="hidden"
+                            :value="hidden"
+                        >
+                            {{ hidden }}
+                        </option>
+                    </select>
+                    <Icon
+                        :class="ui.overflowIcon"
+                        name="carbon:overflow-menu-horizontal"
+                    />
+                </div>
+                <Button
+                    v-else
+                    :aria-current="item === props.page ? 'page' : void 0"
+                    :aria-label="`${messages.page} ${item}`"
+                    kind="ghost"
+                    :label="String(item)"
+                    :size="props.size"
+                    :ui="{ base: ui.navPage }"
+                    @click="goTo(item)"
+                />
+            </li>
+            <li>
+                <Button
+                    :disabled="props.page >= pageCount"
+                    :icon="icons.paginationNext"
+                    :iconDescription="messages.paginationNext"
+                    kind="ghost"
+                    :size="props.size"
+                    :ui="{ base: ui.control }"
+                    @click="goTo(props.page + 1)"
+                />
+            </li>
+        </ul>
+    </nav>
+</template>

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

@@ -0,0 +1,15 @@
+import type { PaginationNavProps } from './PaginationNav.types.js';
+declare const __VLS_export: import("vue").DefineComponent<PaginationNavProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (page: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationNavProps> & Readonly<{
+    "onUpdate:page"?: ((page: number) => any) | undefined;
+}>, {
+    size: "lg" | "md" | "sm";
+    page: number;
+    pageSize: number;
+    ui: import("../../types/slots.js").ComponentUi<"pagination">;
+    totalItems: number;
+    siblings: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,41 @@
+import type { PopoverAlignment, PopoverProps } from './Popover.types.js';
+type __VLS_Props = PopoverProps;
+type __VLS_Slots = {
+    content?: (props: {
+        open: boolean;
+        close: () => void;
+    }) => unknown;
+    default?: (props: {
+        open: boolean;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+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;
+}>, {
+    disabled: boolean;
+    align: PopoverAlignment;
+    caret: boolean;
+    backgroundToken: import("./Popover.types.js").PopoverBackgroundToken;
+    border: boolean;
+    dropShadow: boolean;
+    highContrast: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"popover">;
+    autoAlign: boolean;
+    portal: import("../../types/base.js").PortalTarget;
+    distance: number;
+    isTabTip: boolean;
+}, {}, {}, {}, 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/Popover/Popover.theme.d.ts

@@ -0,0 +1,113 @@
+/**
+ * La superficie flotante de Vuno, traducida a utilidades.
+ *
+ * Las medidas salen de `packages/styles/scss/components/popover/_popover.scss`:
+ * ancho máximo 368px, radio 2px, sombra `drop-shadow(0 2px 2px rgb(0 0 0/.2))`,
+ * borde de 1px por dentro y punta de 12×6 —girada a 6×12 en los lados—. El
+ * relleno de 16px viene de la guía de estilo del sitio, que es donde Vuno lo
+ * fija; en React lo pone cada componente que monta encima.
+ *
+ * El color no se repite por variante: la superficie entra por
+ * `--popover-surface` y el filo de la punta por `--popover-caret-edge`, así
+ * que `highContrast` y `backgroundToken` cambian una variable y la punta se
+ * entera sola. Sin eso harían falta combinaciones de punta por cada fondo.
+ *
+ * No hay `overflow` ni alto máximo a propósito. El sistema de origen tampoco los pone —su
+ * guía dice que el desplazamiento no suele hacer falta— y aquí además
+ * recortarían la punta, que vive medio cuerpo fuera de la caja.
+ */
+export declare const popoverTheme: Record<"popover", {
+    readonly compoundVariants: [{
+        readonly border: "true";
+        readonly class: {
+            readonly caretFill: "top-px left-[0.5px] w-[calc(0.75rem-1px)]";
+        };
+        readonly side: "bottom";
+    }, {
+        readonly border: "true";
+        readonly class: {
+            readonly caretFill: "-top-px left-[0.5px] w-[calc(0.75rem-1px)]";
+        };
+        readonly side: "top";
+    }, {
+        readonly border: "true";
+        readonly class: {
+            readonly caretFill: "left-px";
+        };
+        readonly side: "right";
+    }, {
+        readonly border: "true";
+        readonly class: {
+            readonly caretFill: "-left-px";
+        };
+        readonly side: "left";
+    }, {
+        readonly class: {
+            readonly trigger: "bg-(--vuno-layer-01) shadow-[0_2px_2px_rgb(0_0_0/0.2)] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-(--vuno-layer-01) after:content-[''] focus-visible:after:hidden";
+        };
+        readonly open: "true";
+        readonly tabTip: "true";
+    }];
+    readonly slots: {
+        readonly caret: "pointer-events-none absolute bg-(--popover-caret-edge)";
+        readonly caretFill: "absolute inset-0 bg-(--popover-surface)";
+        readonly content: "z-floating w-max max-w-[min(23rem,calc(100dvw-2rem))] rounded-[2px] bg-(--popover-surface) p-4 text-sm text-(--vuno-text-primary) [--popover-caret-edge:var(--popover-surface)] [--popover-edge:var(--vuno-border-subtle-00)] [--popover-surface:var(--vuno-layer-01)]";
+        readonly trigger: "";
+    };
+    readonly variants: {
+        readonly background: {
+            readonly background: {
+                readonly content: "[--popover-surface:var(--vuno-background)]";
+            };
+            readonly layer: {};
+        };
+        readonly border: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "outline-solid outline-1 -outline-offset-1 outline-(--popover-edge) [--popover-caret-edge:var(--popover-edge)]";
+            };
+        };
+        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: "text-(--vuno-text-inverse) [--popover-surface:var(--vuno-background-inverse)]";
+            };
+        };
+        readonly open: {
+            readonly false: {};
+            readonly true: {};
+        };
+        /** 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 caretFill: "[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 caretFill: "[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 caretFill: "[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%)]";
+                readonly caretFill: "[clip-path:polygon(0%_0%,50%_100%,100%_0%)]";
+            };
+        };
+        readonly tabTip: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "rounded-none";
+                readonly trigger: "relative inline-flex size-8 items-center justify-center text-(--vuno-icon-primary) hover:bg-(--vuno-layer-hover-01) focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--vuno-focus)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,68 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const popoverTheme = defineTheme("popover", {
+  compoundVariants: [
+    /*
+     * Con borde, el relleno de la punta se mete 1px para dejar ver el filo.
+     * Los desplazamientos son los de `_popover.scss`, incluido el medio
+     * píxel horizontal que centra el triángulo ya estrechado.
+     */
+    { border: "true", class: { caretFill: "top-px left-[0.5px] w-[calc(0.75rem-1px)]" }, side: "bottom" },
+    { border: "true", class: { caretFill: "-top-px left-[0.5px] w-[calc(0.75rem-1px)]" }, side: "top" },
+    { border: "true", class: { caretFill: "left-px" }, side: "right" },
+    { border: "true", class: { caretFill: "-left-px" }, side: "left" },
+    /*
+     * Abierto, la pestaña se funde con la superficie: mismo fondo, la
+     * misma sombra y una franja de 2px que borra la costura. La franja se
+     * esconde para no partir el anillo de foco, y con `focus-visible` y no
+     * con `focus` porque ese es el estado en el que la pestaña dibuja el
+     * anillo: con `focus` también desaparecía tras un clic de ratón, que
+     * no lo dibuja, y la pestaña se separaba del panel sin nada a cambio.
+     */
+    {
+      class: { trigger: "bg-(--vuno-layer-01) shadow-[0_2px_2px_rgb(0_0_0/0.2)] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-(--vuno-layer-01) after:content-[''] focus-visible:after:hidden" },
+      open: "true",
+      tabTip: "true"
+    }
+  ],
+  slots: {
+    caret: "pointer-events-none absolute bg-(--popover-caret-edge)",
+    caretFill: "absolute inset-0 bg-(--popover-surface)",
+    content: "z-floating w-max max-w-[min(23rem,calc(100dvw-2rem))] rounded-[2px] bg-(--popover-surface) p-4 text-sm text-(--vuno-text-primary) [--popover-caret-edge:var(--popover-surface)] [--popover-edge:var(--vuno-border-subtle-00)] [--popover-surface:var(--vuno-layer-01)]",
+    trigger: ""
+  },
+  variants: {
+    background: {
+      background: { content: "[--popover-surface:var(--vuno-background)]" },
+      layer: {}
+    },
+    border: {
+      false: {},
+      /* Contorno por dentro: un borde real desplazaría el contenido 1px. */
+      true: { content: "outline-solid outline-1 -outline-offset-1 outline-(--popover-edge) [--popover-caret-edge:var(--popover-edge)]" }
+    },
+    dropShadow: {
+      false: {},
+      /* `drop-shadow` y no `box-shadow`: sigue el recorte de la punta. */
+      true: { content: "drop-shadow-[0_2px_2px_rgb(0_0_0/0.2)]" }
+    },
+    highContrast: {
+      false: {},
+      true: { content: "text-(--vuno-text-inverse) [--popover-surface:var(--vuno-background-inverse)]" }
+    },
+    open: {
+      false: {},
+      true: {}
+    },
+    /** 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%)]", caretFill: "[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%)]", caretFill: "[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%)]", caretFill: "[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%)]", caretFill: "[clip-path:polygon(0%_0%,50%_100%,100%_0%)]" }
+    },
+    tabTip: {
+      false: {},
+      true: { content: "rounded-none", trigger: "relative inline-flex size-8 items-center justify-center text-(--vuno-icon-primary) hover:bg-(--vuno-layer-hover-01) focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--vuno-focus)" }
+    }
+  }
+});