@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -1,13 +1,48 @@
 export declare const paginationTheme: Record<"pagination", {
-    /**
-     * Casi sin clases a propósito: los números son botones, así que el color,
-     * el tamaño y el foco salen de `baseButton`. Lo único propio es el hueco de
-     * la elipsis, que mide lo mismo que un botón para que la fila no dé saltos
-     * al cambiar de página.
-     */
     readonly slots: {
-        readonly gap: "flex size-8 shrink-0 items-center justify-center text-vuno-muted select-none";
-        readonly list: "flex items-center gap-1";
+        readonly bar: "@container flex w-[calc(100%-1px)] min-w-0 items-stretch border-t border-(--vuno-border-subtle-00) bg-(--vuno-layer-01)";
+        /** Una flecha: el salto a la página anterior y a la siguiente. */
+        readonly control: "focus:border-transparent focus:shadow-none focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus)";
+        readonly controls: "flex shrink-0 border-s border-(--vuno-border-subtle-00) [&>*+*]:border-s-(--vuno-border-subtle-00)";
+        readonly gap: "relative flex shrink-0 items-center justify-center";
+        readonly left: "flex min-w-0 flex-1 items-stretch";
+        readonly list: "flex items-center";
+        /**
+         * Una página de la navegación. El sistema de origen no rellena la
+         * actual: la marca con el número en `text-primary` a peso 600 y una
+         * barra de 16×4 px centrada debajo, que nace con ancho cero y crece.
+         */
+        readonly navPage: string;
+        readonly overflowIcon: "pointer-events-none absolute start-1/2 top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 text-(--vuno-icon-primary)";
+        readonly overflowSelect: "size-full cursor-pointer appearance-none border-0 bg-transparent text-center outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus)";
+        readonly page: "hidden items-center px-4 text-sm/[1.125rem] tracking-[0.16px] whitespace-nowrap text-(--vuno-text-primary) tabular-nums @[42rem]:flex";
+        readonly pageSelector: "hidden w-20 shrink-0 border-s border-(--vuno-border-subtle-00) @[42rem]:flex";
+        readonly range: "flex min-w-0 items-center px-4 text-sm/[1.125rem] tracking-[0.16px] whitespace-nowrap text-(--vuno-text-secondary) tabular-nums @[42rem]:border-s @[42rem]:border-(--vuno-border-subtle-00)";
+        readonly right: "ms-auto flex shrink-0 items-stretch";
         readonly root: "flex items-center";
+        readonly selector: "hidden shrink-0 px-4 @[42rem]:flex @[42rem]:w-auto @[42rem]:min-w-44";
+        readonly selectorLabel: "text-sm/[1.125rem] tracking-[0.16px] whitespace-nowrap text-(--vuno-text-primary)";
+    };
+    readonly variants: {
+        readonly size: {
+            readonly sm: {
+                readonly bar: "min-h-8";
+                readonly gap: "size-8";
+                readonly navPage: "min-w-8";
+                readonly overflowSelect: "max-h-8";
+            };
+            readonly md: {
+                readonly bar: "min-h-10";
+                readonly gap: "size-10";
+                readonly navPage: "min-w-10";
+                readonly overflowSelect: "max-h-10";
+            };
+            readonly lg: {
+                readonly bar: "min-h-12";
+                readonly gap: "size-12";
+                readonly navPage: "min-w-12";
+                readonly overflowSelect: "max-h-12";
+            };
+        };
     };
 }>;

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

@@ -1,14 +1,43 @@
 import { defineTheme } from "#vuno/utils/theme";
+const focusOutline = "focus:border-transparent focus:shadow-none focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus)";
 export const paginationTheme = defineTheme("pagination", {
-  /**
-   * Casi sin clases a propósito: los números son botones, así que el color,
-   * el tamaño y el foco salen de `baseButton`. Lo único propio es el hueco de
-   * la elipsis, que mide lo mismo que un botón para que la fila no dé saltos
-   * al cambiar de página.
-   */
   slots: {
-    gap: "flex size-8 shrink-0 items-center justify-center text-vuno-muted select-none",
-    list: "flex items-center gap-1",
-    root: "flex items-center"
+    /* Un píxel menos de ancho: es el que no debe solapar el borde de la tabla de encima. */
+    bar: "@container flex w-[calc(100%-1px)] min-w-0 items-stretch border-t border-(--vuno-border-subtle-00) bg-(--vuno-layer-01)",
+    /** Una flecha: el salto a la página anterior y a la siguiente. */
+    control: focusOutline,
+    /* El filete es de cada flecha, así que también se dibuja entre las dos. */
+    controls: "flex shrink-0 border-s border-(--vuno-border-subtle-00) [&>*+*]:border-s-(--vuno-border-subtle-00)",
+    /* El salto de la navegación: un selector real con el icono encima. */
+    gap: "relative flex shrink-0 items-center justify-center",
+    left: "flex min-w-0 flex-1 items-stretch",
+    list: "flex items-center",
+    /**
+     * Una página de la navegación. El sistema de origen no rellena la
+     * actual: la marca con el número en `text-primary` a peso 600 y una
+     * barra de 16×4 px centrada debajo, que nace con ancho cero y crece.
+     */
+    navPage: "justify-center text-center text-(--vuno-text-primary) hover:text-(--vuno-text-primary) active:text-(--vuno-text-primary) " + focusOutline + " after:absolute after:start-1/2 after:bottom-0 after:h-1 after:w-0 after:bg-(--vuno-border-interactive) after:opacity-0 after:transition-[width] after:duration-(--vuno-duration-fast-02) after:ease-(--vuno-easing-standard-productive) after:content-[''] motion-reduce:after:transition-none aria-[current=page]:font-semibold aria-[current=page]:after:start-[calc(50%-0.5rem)] aria-[current=page]:after:w-4 aria-[current=page]:after:opacity-100",
+    overflowIcon: "pointer-events-none absolute start-1/2 top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 text-(--vuno-icon-primary)",
+    overflowSelect: "size-full cursor-pointer appearance-none border-0 bg-transparent text-center outline-none focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus)",
+    page: "hidden items-center px-4 text-sm/[1.125rem] tracking-[0.16px] whitespace-nowrap text-(--vuno-text-primary) tabular-nums @[42rem]:flex",
+    pageSelector: "hidden w-20 shrink-0 border-s border-(--vuno-border-subtle-00) @[42rem]:flex",
+    range: "flex min-w-0 items-center px-4 text-sm/[1.125rem] tracking-[0.16px] whitespace-nowrap text-(--vuno-text-secondary) tabular-nums @[42rem]:border-s @[42rem]:border-(--vuno-border-subtle-00)",
+    right: "ms-auto flex shrink-0 items-stretch",
+    root: "flex items-center",
+    selector: "hidden shrink-0 px-4 @[42rem]:flex @[42rem]:w-auto @[42rem]:min-w-44",
+    /*
+     * «Filas por página» no es el rótulo de un campo sino una parte de la
+     * frase: va en `body-compact-01` y en `text-primary`, como el valor que
+     * lo sigue, y no en el `label-01` secundario de un formulario.
+     */
+    selectorLabel: "text-sm/[1.125rem] tracking-[0.16px] whitespace-nowrap text-(--vuno-text-primary)"
+  },
+  variants: {
+    size: {
+      sm: { bar: "min-h-8", gap: "size-8", navPage: "min-w-8", overflowSelect: "max-h-8" },
+      md: { bar: "min-h-10", gap: "size-10", navPage: "min-w-10", overflowSelect: "max-h-10" },
+      lg: { bar: "min-h-12", gap: "size-12", navPage: "min-w-12", overflowSelect: "max-h-12" }
+    }
   }
 });

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

@@ -1,11 +1,13 @@
-import type { VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-export type VunoPaginationSize = Extract<VunoSize, 'lg' | 'md' | 'sm' | 'xl' | 'xs'>;
-export type VunoPaginationProps = {
+import type { ComponentUi } from '#vuno/types/slots';
+export type PaginationSize = 'lg' | 'md' | 'sm';
+export type PaginationProps = {
+    backwardText?: string;
+    forwardText?: string;
+    itemsPerPageText?: string;
     page?: number;
     pageSize?: number;
-    siblings?: number;
-    size?: VunoPaginationSize;
-    total?: number;
-    ui?: VunoUi<'pagination'>;
+    pageSizes?: number[];
+    size?: PaginationSize;
+    totalItems: number;
+    ui?: ComponentUi<'pagination'>;
 };

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

@@ -1,133 +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";
-import Text from "#vuno/components/Text/Text.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.
-                -->
-                <Text
-                    v-if="item === 'gap'"
-                    aria-hidden="true"
-                    :class="ui.gap"
-                    tag="span"
-                    tone="inherit"
-                    variant="inherit"
-                    >…</Text
-                >
+        <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,15 +1,27 @@
-import type { VunoPaginationProps } from './Pagination.types.js';
-declare const __VLS_export: import("vue").DefineComponent<VunoPaginationProps, {}, {}, {}, {}, 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<VunoPaginationProps> & 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").VunoPaginationSize;
+    size: import("./Pagination.types.js").PaginationSize;
     page: number;
     pageSize: number;
-    total: number;
-    ui: import("../../types/slots.js").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;
+    };
+};