@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,112 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import { cn } from "#vuno/utils/theme";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+import PrimitiveNumberInput from "#vuno/primitives/PrimitiveNumberInput/PrimitiveNumberInput.vue";
+defineOptions({ name: "NumberInput" });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 },
+  helperText: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  invalidText: { type: String, required: false, default: void 0 },
+  labelText: { type: String, required: true },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 },
+  allowEmpty: { type: Boolean, required: false, default: true },
+  currency: { type: String, required: false, default: void 0 },
+  decimals: { type: Number, required: false, default: void 0 },
+  hideSteppers: { type: Boolean, required: false, default: false },
+  max: { type: Number, required: false, default: void 0 },
+  min: { type: Number, required: false, default: void 0 },
+  orientation: { type: String, required: false, default: "horizontal" },
+  placeholder: { type: String, required: false, default: void 0 },
+  readonly: { type: Boolean, required: false, default: false },
+  step: { type: Number, required: false, default: void 0 }
+});
+const invalid = computed(() => !props.readonly && props.invalid);
+const warn = computed(() => !props.readonly && !invalid.value && props.warn);
+const ui = useTheme(
+  "numberInput",
+  () => props.ui,
+  () => ({ invalid: String(invalid.value), warn: String(warn.value) })
+);
+const icons = useIcons();
+const fallbackId = useId();
+const controlId = computed(() => props.id ?? fallbackId);
+const messageId = `${fallbackId}-message`;
+const message = computed(() => invalid.value ? props.invalidText : warn.value ? props.warnText : props.helperText);
+const stateIcon = computed(() => invalid.value ? icons.value.notifyError : warn.value ? icons.value.notifyWarning : void 0);
+const messageTone = computed(() => {
+  if (invalid.value) return "text-(--vuno-text-error)";
+  if (warn.value) return "text-(--vuno-text-primary)";
+  return props.disabled ? "text-(--vuno-text-disabled)" : void 0;
+});
+const messageClass = computed(() => cn(ui.value.helper, "leading-4 tracking-[0.16px]", messageTone.value));
+const controlUi = computed(() => {
+  const resolved = { ...ui.value };
+  if (!props.hideSteppers) return resolved;
+  return { ...resolved, actions: cn(resolved.actions, "hidden") };
+});
+</script>
+
+<template>
+    <div :class="[ui.field, 'w-full min-w-0']">
+        <FormLabel
+            :disabled="props.disabled"
+            :for="controlId"
+            :hideLabel="props.hideLabel"
+            :invalid="invalid"
+        >
+            {{ props.labelText }}
+        </FormLabel>
+
+        <PrimitiveNumberInput
+            :id="controlId"
+            v-model="model"
+            :allowEmpty="props.allowEmpty"
+            :aria-describedby="message ? messageId : void 0"
+            :aria-invalid="invalid || void 0"
+            :currency="props.currency"
+            :decimals="props.decimals"
+            :disabled="props.disabled"
+            :max="props.max"
+            :min="props.min"
+            :name="props.name"
+            :orientation="props.orientation"
+            :placeholder="props.placeholder"
+            :readonly="props.readonly"
+            :required="props.required"
+            :size="props.size"
+            :step="props.step"
+            :ui="controlUi"
+        >
+            <template
+                v-if="stateIcon"
+                #status
+            >
+                <Icon
+                    :class="ui.stateIcon"
+                    :name="stateIcon"
+                />
+            </template>
+        </PrimitiveNumberInput>
+
+        <p
+            v-if="message"
+            :id="messageId"
+            aria-live="polite"
+            :class="messageClass"
+        >
+            {{ message }}
+        </p>
+    </div>
+</template>

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

@@ -0,0 +1,36 @@
+import type { NumberInputProps } from './NumberInput.types.js';
+type __VLS_Props = NumberInputProps;
+type __VLS_ModelProps = {
+    modelValue?: number | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("../../types/control.js").ControlSize;
+    invalid: boolean;
+    warn: boolean;
+    orientation: import("../../types/control.js").ControlOrientation;
+    placeholder: string;
+    name: string;
+    hideLabel: boolean;
+    helperText: string;
+    step: number;
+    readonly: boolean;
+    id: string;
+    ui: Partial<Record<"base" | "root" | "actions" | "field" | "helper" | "stateIcon" | "stepper" | "stepperIcon", string>> & Partial<Record<"base" | "root" | "actions" | "field" | "helper" | "stateIcon" | "stepper" | "stepperIcon", string>>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    max: number;
+    decimals: number;
+    currency: string;
+    allowEmpty: boolean;
+    min: number;
+    hideSteppers: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+import type { OrderedListProps } from './OrderedList.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<OrderedListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OrderedListProps> & Readonly<{}>, {
+    native: boolean;
+    nested: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"list">;
+    isExpressive: 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/OrderedList/OrderedList.types.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type OrderedListProps = {
+    /**
+     * Escala expresiva: `body-02` de 16 px en lugar de `body-01` de 14 px.
+     * Vuno la reserva para contenido editorial; en producto la productiva es
+     * casi siempre la correcta. Una lista dentro de otra expresiva la hereda.
+     */
+    isExpressive?: boolean;
+    /**
+     * Numera con el marcador del navegador en vez de con el contador de Vuno.
+     *
+     * Es la elección de alineación de la guía: el contador propio alinea los
+     * números a la izquierda —`1.` y `10.` empiezan en la misma columna— y el
+     * marcador nativo los alinea a la derecha, que es lo que conviene cuando la
+     * lista pasa de nueve elementos y el punto debe quedar en línea.
+     *
+     * Solo afecta al primer nivel: cualquier nivel anidado usa siempre el
+     * marcador nativo, con letras minúsculas.
+     */
+    native?: boolean;
+    /**
+     * Segundo nivel de la lista: sangría de 32 px y letras minúsculas en lugar
+     * de números.
+     *
+     * No hace falta declararla. Una lista dentro de otra lista lo detecta sola,
+     * a diferencia de React, que obliga a pasarla en cada nivel. Se conserva
+     * para el caso en que el anidamiento no sea de componente —un nivel
+     * renderizado aparte— y para mantener el contrato de Vuno.
+     */
+    nested?: boolean;
+    ui?: ComponentUi<'list'>;
+};

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

@@ -0,0 +1,31 @@
+<script setup>
+import { computed, inject, provide } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { listKey } from "#vuno/components/UnorderedList/UnorderedList.context";
+defineOptions({ name: "OrderedList" });
+const props = defineProps({
+  isExpressive: { type: Boolean, required: false, default: false },
+  native: { type: Boolean, required: false, default: false },
+  nested: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const parent = inject(listKey, void 0);
+const expressive = computed(() => props.isExpressive || Boolean(parent?.expressive.value));
+const nested = computed(() => props.nested || parent !== void 0);
+const marker = computed(() => nested.value || props.native ? "native" : "counter");
+provide(listKey, { expressive, marker, nested });
+const ui = useTheme(
+  "list",
+  () => props.ui,
+  () => ({ expressive: expressive.value ? "true" : "false", native: props.native ? "true" : "false", nested: nested.value ? "true" : "false" })
+);
+</script>
+
+<template>
+    <ol
+        :class="ui.ordered"
+        role="list"
+    >
+        <slot />
+    </ol>
+</template>

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

@@ -0,0 +1,19 @@
+import type { OrderedListProps } from './OrderedList.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<OrderedListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OrderedListProps> & Readonly<{}>, {
+    native: boolean;
+    nested: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"list">;
+    isExpressive: 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/OverflowMenu/OverflowMenu.d.vue.ts

@@ -0,0 +1,30 @@
+import type { OverflowMenuProps } from './OverflowMenu.types.js';
+type __VLS_Props = OverflowMenuProps;
+type __VLS_Slots = {
+    default?: () => 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;
+    size: import("../MenuButton/MenuButton.types.js").MenuButtonSize;
+    icon: string;
+    ui: import("../../types/slots.js").ComponentUi<"menu">;
+    iconDescription: string;
+    portal: import("../../types/base.js").PortalTarget;
+    menuAlignment: import("./OverflowMenu.types.js").OverflowMenuAlignment;
+}, {}, {}, {}, 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/OverflowMenu/OverflowMenu.types.d.ts

@@ -0,0 +1,29 @@
+import type { PortalTarget } from '#vuno/types/base';
+import type { ComponentUi } from '#vuno/types/slots';
+import type { MenuAlignment, MenuButtonSize } from '#vuno/components/MenuButton/MenuButton.types';
+/**
+ * Las cuatro esquinas. Vuno no ofrece aquí las alineaciones centradas: el
+ * disparador es cuadrado y centrar el panel sobre 40 px no alinea nada.
+ */
+export type OverflowMenuAlignment = Extract<MenuAlignment, 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start'>;
+export type OverflowMenuProps = {
+    disabled?: boolean;
+    /**
+     * El icono del disparador. Por defecto, el `actions` del tema.
+     *
+     * Es el `renderIcon` de Vuno, que admite cambiarlo y recomienda no
+     * hacerlo salvo necesidad del producto: los tres puntos son lo que enseña
+     * que ahí hay más acciones.
+     */
+    icon?: string;
+    /**
+     * Nombre accesible del disparador, que no tiene texto visible. Nombra
+     * también el panel, como el `label` de Vuno.
+     */
+    iconDescription?: string;
+    menuAlignment?: OverflowMenuAlignment;
+    portal?: PortalTarget;
+    /** El tamaño manda a la vez sobre el botón cuadrado y sobre las filas del menú. */
+    size?: MenuButtonSize;
+    ui?: ComponentUi<'menu'>;
+};

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

@@ -0,0 +1,57 @@
+<script setup>
+import { computed } from "vue";
+import { useIcons } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import Menu from "#vuno/components/Menu/Menu.vue";
+defineOptions({ name: "OverflowMenu" });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  icon: { type: String, required: false, default: void 0 },
+  iconDescription: { type: String, required: false, default: "M\xE1s opciones" },
+  menuAlignment: { type: String, required: false, default: "bottom-start" },
+  portal: { type: [String, Boolean], required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const icons = useIcons();
+const triggerUi = computed(() => ({
+  /*
+   * El disparador de los tres puntos es el único de la familia que sube a
+   * `fast-02`; el resto de botones entra en `fast-01`. Abierto se queda
+   * con el fondo de capa y la sombra del panel, y sin transición.
+   *
+   * El fondo de capa se repite con `hover:` porque el `ghost` declara el
+   * suyo con ese modificador y ganaría por especificidad: sin repetirlo,
+   * apuntar los tres puntos con el panel desplegado los devolvía a
+   * `background-hover` y el disparador dejaba de leerse como parte del panel.
+   */
+  base: ["duration-(--vuno-duration-fast-02)", open.value ? "bg-(--vuno-layer-01) shadow-[0_2px_6px_var(--vuno-shadow)] transition-none hover:bg-(--vuno-layer-01)" : ""],
+  /* `.vuno--overflow-menu__icon`: 16 px, los mismos que cualquier botón cuadrado. */
+  icon: "size-4"
+}));
+</script>
+
+<template>
+    <Menu
+        v-model:open="open"
+        :placement="props.menuAlignment"
+        :portal="props.portal"
+        :size="props.size"
+        :ui="props.ui"
+    >
+        <template #trigger>
+            <Button
+                :disabled="props.disabled"
+                :icon="props.icon ?? icons.actions"
+                :iconDescription="props.iconDescription"
+                kind="ghost"
+                :size="props.size"
+                :ui="triggerUi"
+            />
+        </template>
+
+        <slot />
+    </Menu>
+</template>

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

@@ -0,0 +1,30 @@
+import type { OverflowMenuProps } from './OverflowMenu.types.js';
+type __VLS_Props = OverflowMenuProps;
+type __VLS_Slots = {
+    default?: () => 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;
+    size: import("../MenuButton/MenuButton.types.js").MenuButtonSize;
+    icon: string;
+    ui: import("../../types/slots.js").ComponentUi<"menu">;
+    iconDescription: string;
+    portal: import("../../types/base.js").PortalTarget;
+    menuAlignment: import("./OverflowMenu.types.js").OverflowMenuAlignment;
+}, {}, {}, {}, 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/Pagination/Pagination.d.vue.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/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

@@ -0,0 +1,13 @@
+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;
+    pageSizes?: number[];
+    size?: PaginationSize;
+    totalItems: number;
+    ui?: ComponentUi<'pagination'>;
+};