@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,210 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useMessages, useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+import Table from "#vuno/components/Table/Table.vue";
+import TableBody from "#vuno/components/TableBody/TableBody.vue";
+import TableCell from "#vuno/components/TableCell/TableCell.vue";
+import TableContainer from "#vuno/components/TableContainer/TableContainer.vue";
+import TableExpandedRow from "#vuno/components/TableExpandedRow/TableExpandedRow.vue";
+import TableExpandHeader from "#vuno/components/TableExpandHeader/TableExpandHeader.vue";
+import TableExpandRow from "#vuno/components/TableExpandRow/TableExpandRow.vue";
+import TableHead from "#vuno/components/TableHead/TableHead.vue";
+import TableHeader from "#vuno/components/TableHeader/TableHeader.vue";
+import TableRow from "#vuno/components/TableRow/TableRow.vue";
+import TableSelectAll from "#vuno/components/TableSelectAll/TableSelectAll.vue";
+import TableSelectRow from "#vuno/components/TableSelectRow/TableSelectRow.vue";
+import { normalizeTableSize } from "./DataTable.context";
+defineOptions({ name: "DataTable" });
+const expandedRows = defineModel("expandedRows", { type: Array, ...{ default: () => [] } });
+const selectedRows = defineModel("selectedRows", { type: Array, ...{ default: () => [] } });
+const sort = defineModel("sort", { type: Object, ...{ default: void 0 } });
+const props = defineProps({
+  description: { type: String, required: false, default: void 0 },
+  headers: { type: Array, required: true },
+  isSortable: { type: Boolean, required: false, default: false },
+  rows: { type: Array, required: true },
+  selectionMode: { type: String, required: false, default: "none" },
+  size: { type: String, required: false, default: "lg" },
+  stickyHeader: { type: Boolean, required: false, default: false },
+  title: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 },
+  useStaticWidth: { type: Boolean, required: false, default: false },
+  useZebraStyles: { type: Boolean, required: false, default: false }
+});
+const slots = defineSlots();
+const messages = useMessages();
+const baseId = useId();
+const size = computed(() => normalizeTableSize(props.size));
+const selecting = computed(() => props.selectionMode !== "none");
+const radio = computed(() => props.selectionMode === "single");
+const expandable = computed(() => {
+  const probe = props.rows[0];
+  return probe ? filled(() => slots.expanded?.({ row: probe })) : Boolean(slots.expanded);
+});
+const columns = computed(() => props.headers.length + (selecting.value ? 1 : 0) + (expandable.value ? 1 : 0));
+const selectable = computed(() => props.rows.filter((row) => !row.disabled));
+const selectedCount = computed(() => selectable.value.filter((row) => selectedRows.value.includes(row.id)).length);
+const allSelected = computed(() => selectable.value.length > 0 && selectedCount.value === selectable.value.length);
+const someSelected = computed(() => selectedCount.value > 0 && !allSelected.value);
+const sortableTable = computed(() => props.isSortable || props.headers.some((header) => isSortable(header)));
+const ui = useTheme(
+  "dataTable",
+  () => props.ui,
+  () => ({ size: size.value })
+);
+function isSortable(header) {
+  return header.isSortable ?? header.sortable ?? false;
+}
+function rowName(row, index) {
+  const first = props.headers[0];
+  const value = first ? row[first.key] : void 0;
+  const text = value === null || value === void 0 ? "" : String(value).trim();
+  return text || `${messages.value.row} ${index + 1}`;
+}
+function expandedId(row) {
+  return `${baseId}-${row.id}`;
+}
+function isExpanded(row) {
+  return expandedRows.value.includes(row.id);
+}
+function setExpanded(id, expanded) {
+  expandedRows.value = expanded ? [...expandedRows.value, id] : expandedRows.value.filter((value) => value !== id);
+}
+function setSelected(id, selected) {
+  if (radio.value) return void (selectedRows.value = selected ? [id] : []);
+  selectedRows.value = selected ? [...selectedRows.value, id] : selectedRows.value.filter((value) => value !== id);
+}
+function setAllSelected(selected) {
+  selectedRows.value = selected ? selectable.value.map((row) => row.id) : [];
+}
+function onSort(key) {
+  const current = sort.value?.key === key ? sort.value.direction : "NONE";
+  const direction = current === "NONE" ? "ASC" : current === "ASC" ? "DESC" : "NONE";
+  sort.value = { direction, key };
+}
+function rowBindings(row, index) {
+  const isSelected = selectedRows.value.includes(row.id);
+  if (!expandable.value) return { isSelected };
+  return {
+    "onUpdate:expanded": (value) => setExpanded(row.id, value),
+    ariaControls: expandedId(row),
+    ariaLabel: `${isExpanded(row) ? "Contraer" : "Expandir"} ${rowName(row, index)}`,
+    expanded: isExpanded(row),
+    isSelected
+  };
+}
+</script>
+
+<template>
+    <TableContainer
+        :description="props.description"
+        :stickyHeader="props.stickyHeader"
+        :title="props.title"
+        :ui="props.ui"
+        :useStaticWidth="props.useStaticWidth"
+    >
+        <slot name="toolbar" />
+
+        <Table
+            :isSortable="sortableTable"
+            :size="size"
+            :stickyHeader="props.stickyHeader"
+            :ui="props.ui"
+            :useStaticWidth="props.useStaticWidth"
+            :useZebraStyles="props.useZebraStyles"
+        >
+            <caption v-if="$slots.caption">
+                <slot name="caption" />
+            </caption>
+
+            <TableHead>
+                <TableRow>
+                    <TableExpandHeader v-if="expandable" />
+
+                    <TableSelectAll
+                        v-if="selecting && !radio"
+                        :indeterminate="someSelected"
+                        :modelValue="allSelected"
+                        @update:model-value="setAllSelected"
+                    />
+                    <TableHeader v-else-if="selecting">
+                        <span class="sr-only">{{ messages.selectRow }}</span>
+                    </TableHeader>
+
+                    <TableHeader
+                        v-for="header in props.headers"
+                        :key="header.key"
+                        :isSortHeader="sort?.key === header.key"
+                        :isSortable="isSortable(header)"
+                        :sortDirection="sort?.direction"
+                        @sort="onSort(header.key)"
+                    >
+                        <slot
+                            :header="header"
+                            name="header"
+                        >
+                            {{ header.header }}
+                        </slot>
+                    </TableHeader>
+                </TableRow>
+            </TableHead>
+
+            <TableBody>
+                <template
+                    v-for="(row, index) in props.rows"
+                    :key="row.id"
+                >
+                    <component
+                        :is="expandable ? TableExpandRow : TableRow"
+                        v-bind="rowBindings(row, index)"
+                    >
+                        <TableSelectRow
+                            v-if="selecting"
+                            :ariaLabel="`${messages.selectRow} ${rowName(row, index)}`"
+                            :disabled="row.disabled"
+                            :modelValue="selectedRows.includes(row.id)"
+                            :name="radio ? baseId : void 0"
+                            :radio="radio"
+                            @update:model-value="setSelected(row.id, $event)"
+                        />
+
+                        <TableCell
+                            v-for="header in props.headers"
+                            :key="header.key"
+                        >
+                            <slot
+                                :header="header"
+                                name="cell"
+                                :row="row"
+                                :value="row[header.key]"
+                            >
+                                {{ row[header.key] }}
+                            </slot>
+                        </TableCell>
+                    </component>
+
+                    <TableExpandedRow
+                        v-if="expandable"
+                        :id="expandedId(row)"
+                        :colspan="columns"
+                    >
+                        <slot
+                            name="expanded"
+                            :row="row"
+                        />
+                    </TableExpandedRow>
+                </template>
+
+                <tr v-if="props.rows.length === 0">
+                    <td
+                        :class="ui.empty"
+                        :colspan="columns"
+                    >
+                        <slot name="empty">{{ messages.emptyTable }}</slot>
+                    </td>
+                </tr>
+            </TableBody>
+        </Table>
+    </TableContainer>
+</template>

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

@@ -0,0 +1,51 @@
+import type { DataTableHeader, DataTableProps, DataTableRow } from './DataTable.types.js';
+type __VLS_Props = Omit<DataTableProps, 'expandedRows' | 'selectedRows' | 'sort'>;
+type __VLS_Slots = {
+    caption?: () => unknown;
+    cell?: (props: {
+        header: DataTableHeader;
+        row: DataTableRow;
+        value: unknown;
+    }) => unknown;
+    empty?: () => unknown;
+    expanded?: (props: {
+        row: DataTableRow;
+    }) => unknown;
+    header?: (props: {
+        header: DataTableHeader;
+    }) => unknown;
+    toolbar?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'expandedRows'?: string[];
+    'selectedRows'?: string[];
+    'sort'?: DataTableProps['sort'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expandedRows": (value: string[]) => any;
+    "update:selectedRows": (value: string[]) => any;
+    "update:sort": (value: import("./DataTable.types.js").DataTableSort | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:expandedRows"?: ((value: string[]) => any) | undefined;
+    "onUpdate:selectedRows"?: ((value: string[]) => any) | undefined;
+    "onUpdate:sort"?: ((value: import("./DataTable.types.js").DataTableSort | undefined) => any) | undefined;
+}>, {
+    description: string;
+    title: string;
+    size: import("./DataTable.types.js").DataTableLegacySize | import("./DataTable.types.js").DataTableSize;
+    ui: import("./DataTable.types.js").DataTableUi;
+    selectionMode: import("./DataTable.types.js").DataTableSelectionMode;
+    isSortable: boolean;
+    stickyHeader: boolean;
+    useStaticWidth: boolean;
+    useZebraStyles: 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/DatePicker/DatePicker.d.vue.ts

@@ -0,0 +1,45 @@
+import type { DatePickerProps } from './DatePicker.types.js';
+type __VLS_Props = DatePickerProps;
+type __VLS_ModelProps = {
+    modelValue?: [string, string] | string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | [string, string] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | [string, string] | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("../../types/control.js").ControlSize;
+    invalid: boolean;
+    warn: boolean;
+    short: boolean;
+    placeholder: string;
+    name: string;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    pattern: string;
+    id: string;
+    ui: Partial<Record<"header" | "base" | "root" | "icon" | "field" | "message" | "helper" | "calendar" | "day" | "fields" | "grid" | "month" | "nav" | "navIcon" | "trigger" | "weekday", string>> & Partial<Record<"header" | "base" | "root" | "icon" | "field" | "message" | "helper" | "calendar" | "day" | "fields" | "grid" | "month" | "nav" | "navIcon" | "trigger" | "weekday", string>>;
+    required: boolean;
+    iconDescription: string;
+    invalidText: string;
+    warnText: string;
+    portal: import("../../types/base.js").PortalTarget;
+    allowInput: boolean;
+    closeOnSelect: boolean;
+    dateFormat: string;
+    datePickerType: import("./DatePicker.types.js").DatePickerType;
+    endInput: import("./DatePicker.types.js").DatePickerInputProps;
+    hideIcon: boolean;
+    locale: string;
+    maxDate: string;
+    minDate: string;
+    nextMonthAriaLabel: string;
+    prevMonthAriaLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,151 @@
+export declare const datePickerTheme: Record<"datePicker", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly field: "w-38";
+        };
+        readonly state: "invalid";
+        readonly type: "simple";
+    }, {
+        readonly class: {
+            readonly field: "w-38";
+        };
+        readonly state: "warn";
+        readonly type: "simple";
+    }, {
+        readonly class: {
+            readonly field: "w-[5.7rem]";
+        };
+        readonly short: "true";
+        readonly type: "simple";
+    }];
+    /**
+     * El campo de fecha y su calendario, con la geometría de Vuno.
+     *
+     * `base` y `root` no son slots propios: son los que lee la primitiva de
+     * campo —el `<input>` y su caja—, y aquí solo se retocan cuatro cosas. La
+     * tipografía del `<input>` es `code-02` entero —monoespaciada, 14 px y
+     * +0,32 px— y no la del tamaño de la caja: una fecha son cifras en columnas
+     * y con letra proporcional baila al escribir, y Vuno conserva el mismo paso
+     * de tipo en los tres tamaños, que solo cambian la altura. El relleno final
+     * vuelve a 16 px y la separación interna sube a 16 porque entre la cifra y
+     * el icono de calendario Vuno deja ese hueco limpio. Y el filete inferior
+     * desaparece cuando el campo está deshabilitado, que es lo que distingue de
+     * un vistazo un campo apagado de uno editable.
+     *
+     * El calendario mide 288 × 336 px, que es lo que ocupan siete columnas de
+     * 40 px más el relleno de 4 y la altura que Vuno clava: por eso las medidas
+     * del día y del navegador de mes son `size-10` y no un valor libre. La
+     * rejilla siempre trae seis semanas y suma 332, así que los 4 px restantes
+     * se reparten arriba y abajo con `justify-center`, como hace Vuno.
+     *
+     * La entrada del calendario es la caída de 20 px con opacidad de Vuno, y se
+     * escribe con `@starting-style` en vez de `transition-all`: la posición la
+     * escribe `useAnchor` en `left` y `top`, y una transición sobre todas las
+     * propiedades haría que el calendario entrara deslizándose desde la esquina
+     * de la página hasta el campo.
+     *
+     * El contorno del foco no se apaga con `outline-none`: se deja puesto en
+     * transparente y solo cambia de color. `outline-none` fija
+     * `--tw-outline-style: none` en el elemento, y esa variable la leen también
+     * las reglas de foco, así que el anillo no llegaba a dibujarse nunca.
+     */
+    readonly slots: {
+        readonly base: "font-mono text-sm tracking-[0.32px]";
+        readonly calendar: "z-[99999] flex h-84 w-72 translate-y-0 flex-col justify-center overflow-hidden bg-(--vuno-layer-01) px-1 pt-1 pb-2 opacity-100 shadow-[0_2px_6px_var(--vuno-shadow)] outline-none transition-[opacity,translate] duration-(--vuno-duration-fast-02) ease-[cubic-bezier(0,0,0.38,0.9)] motion-reduce:transition-none starting:-translate-y-5 starting:opacity-0";
+        readonly day: "relative flex size-10 cursor-pointer items-center justify-center text-sm leading-[1.125rem] tracking-[0.16px] text-(--vuno-text-primary) outline-solid outline-2 -outline-offset-2 outline-transparent transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-hover-01) focus:outline-(--vuno-button-primary) disabled:cursor-not-allowed disabled:text-(--vuno-text-disabled) disabled:hover:bg-transparent motion-reduce:transition-none data-outside:text-(--vuno-text-helper) data-range:bg-(--vuno-highlight) data-selected:bg-(--vuno-button-primary) data-selected:not-disabled:text-(--vuno-text-on-color) data-selected:focus:outline-solid data-selected:focus:outline-1 data-selected:focus:outline-offset-[-3px] data-selected:focus:outline-(--vuno-layer-02) data-today:font-semibold data-today:not-disabled:text-(--vuno-link-primary) data-today:after:absolute data-today:after:bottom-[7px] data-today:after:left-1/2 data-today:after:size-1 data-today:after:-translate-x-1/2 data-today:after:bg-current data-today:after:content-[''] data-selected:data-today:not-disabled:text-(--vuno-text-on-color) data-selected:data-today:outline-(--vuno-focus) data-selected:data-today:after:hidden";
+        readonly field: "flex min-w-0 flex-col";
+        readonly fields: "flex min-w-0";
+        readonly grid: "w-full table-fixed border-collapse";
+        readonly header: "flex items-center justify-between";
+        readonly helper: "mt-1 text-xs tracking-[0.32px] text-(--vuno-text-helper)";
+        readonly icon: "size-4 shrink-0 text-(--vuno-icon-primary) in-[:disabled]:text-(--vuno-icon-disabled)";
+        /**
+         * El mensaje de validación, que ocupa el sitio de la ayuda.
+         *
+         * Se pinta entero aquí y no encima de `helper` porque las dos clases
+         * llegarían al mismo elemento y el color lo decidiría el orden de la
+         * hoja generada. Va en texto primario: Vuno solo lo enrojece cuando el
+         * campo es inválido —y con `text-error`, que es el rojo de texto de los
+         * formularios, no el de los iconos de soporte— y deja el aviso en el
+         * color normal, porque un aviso no impide guardar.
+         */
+        readonly message: "mt-1 text-xs tracking-[0.32px] text-(--vuno-text-primary)";
+        readonly month: "flex-1 text-center text-sm font-semibold text-(--vuno-text-primary)";
+        readonly nav: "flex size-10 shrink-0 cursor-pointer items-center justify-center text-(--vuno-icon-primary) outline-solid outline-2 -outline-offset-2 outline-transparent transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-hover-01) focus-visible:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--vuno-icon-disabled) motion-reduce:transition-none";
+        readonly navIcon: "size-4";
+        readonly root: "has-disabled:border-transparent data-trailing:gap-4 data-trailing:pe-4";
+        /**
+         * El botón que abre el calendario, que en Vuno es el propio icono.
+         *
+         * Aquí es un control de verdad y no un `svg` con `click`, porque el
+         * contrato publica `iconDescription`: sin botón ese nombre accesible no
+         * tendría dónde ponerse ni habría forma de abrirlo con el teclado. Ocupa
+         * el alto del campo para que el blanco alrededor del icono también
+         * responda al puntero; el ancho lo pone el icono.
+         */
+        readonly trigger: "flex h-full shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 outline-solid outline-2 -outline-offset-2 outline-transparent focus-visible:outline-(--vuno-focus) disabled:cursor-not-allowed";
+        readonly weekday: "h-10 text-sm leading-[1.125rem] font-normal tracking-[0.16px] text-(--vuno-text-primary)";
+    };
+    readonly variants: {
+        /**
+         * Solo lectura: fondo transparente y filete apagado, como Vuno.
+         *
+         * Cuelga de la prop y no del atributo `readonly` del `<input>` porque
+         * ese atributo también lo pone `allowInput: false`, que no describe un
+         * campo de solo lectura sino uno que solo se rellena desde el
+         * calendario.
+         */
+        readonly readOnly: {
+            readonly false: {};
+            readonly true: {
+                readonly root: "border-(--vuno-border-subtle-00) bg-transparent";
+            };
+        };
+        /** El campo simple corto de Vuno, para un mes y año o una fecha breve. */
+        readonly short: {
+            readonly false: {};
+            readonly true: {};
+        };
+        /**
+         * El icono del final cambia de color, no de sitio: inválido y aviso
+         * sustituyen al calendario en la misma posición, como en Vuno, y por
+         * eso el estado es una variante del icono y no otro elemento.
+         *
+         * El fallo pesa lo mismo que en el resto de los campos: un recuadro de
+         * 2 px por los cuatro lados y no solo el filete inferior teñido. Cede
+         * ante el foco —`not-focus-within:`— porque el sistema de origen
+         * condiciona ese contorno con `:not(:focus)`: mientras se escribe, lo
+         * que hay que ver es dónde está el cursor. El aviso no toca la caja:
+         * allí solo cambia el icono.
+         */
+        readonly state: {
+            readonly invalid: {
+                readonly icon: "text-(--vuno-support-error)";
+                readonly message: "text-(--vuno-text-error)";
+                readonly root: "not-focus-within:outline-solid not-focus-within:outline-2 not-focus-within:-outline-offset-2 not-focus-within:outline-(--vuno-support-error)";
+            };
+            readonly normal: {};
+            readonly warn: {
+                readonly icon: "text-(--vuno-support-warning)";
+            };
+        };
+        /**
+         * Las anchuras de Vuno: 120 px el campo simple —152 cuando muestra
+         * mensaje, porque el icono le roba sitio al texto—, 288 el de una fecha,
+         * y el rango reparte esos mismos 288 en dos columnas separadas por un
+         * píxel, que es lo que Vuno consigue con un margen.
+         */
+        readonly type: {
+            readonly range: {
+                readonly field: "min-w-0";
+                readonly fields: "grid w-72 grid-cols-2 gap-px";
+            };
+            readonly simple: {
+                readonly field: "w-30";
+            };
+            readonly single: {
+                readonly field: "w-72";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,149 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const datePickerTheme = defineTheme("datePicker", {
+  compoundVariants: [
+    { class: { field: "w-38" }, state: "invalid", type: "simple" },
+    { class: { field: "w-38" }, state: "warn", type: "simple" },
+    { class: { field: "w-[5.7rem]" }, short: "true", type: "simple" }
+  ],
+  /**
+   * El campo de fecha y su calendario, con la geometría de Vuno.
+   *
+   * `base` y `root` no son slots propios: son los que lee la primitiva de
+   * campo —el `<input>` y su caja—, y aquí solo se retocan cuatro cosas. La
+   * tipografía del `<input>` es `code-02` entero —monoespaciada, 14 px y
+   * +0,32 px— y no la del tamaño de la caja: una fecha son cifras en columnas
+   * y con letra proporcional baila al escribir, y Vuno conserva el mismo paso
+   * de tipo en los tres tamaños, que solo cambian la altura. El relleno final
+   * vuelve a 16 px y la separación interna sube a 16 porque entre la cifra y
+   * el icono de calendario Vuno deja ese hueco limpio. Y el filete inferior
+   * desaparece cuando el campo está deshabilitado, que es lo que distingue de
+   * un vistazo un campo apagado de uno editable.
+   *
+   * El calendario mide 288 × 336 px, que es lo que ocupan siete columnas de
+   * 40 px más el relleno de 4 y la altura que Vuno clava: por eso las medidas
+   * del día y del navegador de mes son `size-10` y no un valor libre. La
+   * rejilla siempre trae seis semanas y suma 332, así que los 4 px restantes
+   * se reparten arriba y abajo con `justify-center`, como hace Vuno.
+   *
+   * La entrada del calendario es la caída de 20 px con opacidad de Vuno, y se
+   * escribe con `@starting-style` en vez de `transition-all`: la posición la
+   * escribe `useAnchor` en `left` y `top`, y una transición sobre todas las
+   * propiedades haría que el calendario entrara deslizándose desde la esquina
+   * de la página hasta el campo.
+   *
+   * El contorno del foco no se apaga con `outline-none`: se deja puesto en
+   * transparente y solo cambia de color. `outline-none` fija
+   * `--tw-outline-style: none` en el elemento, y esa variable la leen también
+   * las reglas de foco, así que el anillo no llegaba a dibujarse nunca.
+   */
+  slots: {
+    base: "font-mono text-sm tracking-[0.32px]",
+    /*
+     * El calendario abierto no pide una capa de la escala: el sistema de
+     * origen lo deja en 99999, por encima incluso de `dropdown`, para que
+     * se vea sobre cualquier cabecera o panel fijo del anfitrión. Se
+     * respeta ese valor; la variante estática del origen baja a 999 y
+     * aquí no existe.
+     */
+    calendar: "z-[99999] flex h-84 w-72 translate-y-0 flex-col justify-center overflow-hidden bg-(--vuno-layer-01) px-1 pt-1 pb-2 opacity-100 shadow-[0_2px_6px_var(--vuno-shadow)] outline-none transition-[opacity,translate] duration-(--vuno-duration-fast-02) ease-[cubic-bezier(0,0,0.38,0.9)] motion-reduce:transition-none starting:-translate-y-5 starting:opacity-0",
+    /*
+     * El día ya elegido que además es hoy pierde el punto y gana el aro de
+     * foco pegado por dentro: Vuno dibuja ese estado como una casilla azul
+     * limpia con contorno, no como una casilla con un punto encima.
+     *
+     * Bloqueado gana a elegido, pero solo en la cifra. En el sistema de
+     * origen la regla del día deshabilitado va después de la del elegido y
+     * declara **únicamente** color y cursor, así que el relleno azul —y el
+     * del intervalo— se quedan y lo que cambia es el número. Aquí esa
+     * precedencia no puede depender del orden de la hoja generada, porque
+     * las dos utilidades pesan igual: las de color del estado elegido se
+     * condicionan con `not-disabled:` y así solo pinta la del bloqueo. El
+     * relleno de hover se apaga en su propio modificador, que es lo que el
+     * origen hace y no un fondo transparente para todo el estado.
+     */
+    day: "relative flex size-10 cursor-pointer items-center justify-center text-sm leading-[1.125rem] tracking-[0.16px] text-(--vuno-text-primary) outline-solid outline-2 -outline-offset-2 outline-transparent transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-hover-01) focus:outline-(--vuno-button-primary) disabled:cursor-not-allowed disabled:text-(--vuno-text-disabled) disabled:hover:bg-transparent motion-reduce:transition-none data-outside:text-(--vuno-text-helper) data-range:bg-(--vuno-highlight) data-selected:bg-(--vuno-button-primary) data-selected:not-disabled:text-(--vuno-text-on-color) data-selected:focus:outline-solid data-selected:focus:outline-1 data-selected:focus:outline-offset-[-3px] data-selected:focus:outline-(--vuno-layer-02) data-today:font-semibold data-today:not-disabled:text-(--vuno-link-primary) data-today:after:absolute data-today:after:bottom-[7px] data-today:after:left-1/2 data-today:after:size-1 data-today:after:-translate-x-1/2 data-today:after:bg-current data-today:after:content-[''] data-selected:data-today:not-disabled:text-(--vuno-text-on-color) data-selected:data-today:outline-(--vuno-focus) data-selected:data-today:after:hidden",
+    field: "flex min-w-0 flex-col",
+    fields: "flex min-w-0",
+    grid: "w-full table-fixed border-collapse",
+    header: "flex items-center justify-between",
+    helper: "mt-1 text-xs tracking-[0.32px] text-(--vuno-text-helper)",
+    icon: "size-4 shrink-0 text-(--vuno-icon-primary) in-[:disabled]:text-(--vuno-icon-disabled)",
+    /**
+     * El mensaje de validación, que ocupa el sitio de la ayuda.
+     *
+     * Se pinta entero aquí y no encima de `helper` porque las dos clases
+     * llegarían al mismo elemento y el color lo decidiría el orden de la
+     * hoja generada. Va en texto primario: Vuno solo lo enrojece cuando el
+     * campo es inválido —y con `text-error`, que es el rojo de texto de los
+     * formularios, no el de los iconos de soporte— y deja el aviso en el
+     * color normal, porque un aviso no impide guardar.
+     */
+    message: "mt-1 text-xs tracking-[0.32px] text-(--vuno-text-primary)",
+    month: "flex-1 text-center text-sm font-semibold text-(--vuno-text-primary)",
+    nav: "flex size-10 shrink-0 cursor-pointer items-center justify-center text-(--vuno-icon-primary) outline-solid outline-2 -outline-offset-2 outline-transparent transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-hover-01) focus-visible:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--vuno-icon-disabled) motion-reduce:transition-none",
+    navIcon: "size-4",
+    root: "has-disabled:border-transparent data-trailing:gap-4 data-trailing:pe-4",
+    /**
+     * El botón que abre el calendario, que en Vuno es el propio icono.
+     *
+     * Aquí es un control de verdad y no un `svg` con `click`, porque el
+     * contrato publica `iconDescription`: sin botón ese nombre accesible no
+     * tendría dónde ponerse ni habría forma de abrirlo con el teclado. Ocupa
+     * el alto del campo para que el blanco alrededor del icono también
+     * responda al puntero; el ancho lo pone el icono.
+     */
+    trigger: "flex h-full shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 outline-solid outline-2 -outline-offset-2 outline-transparent focus-visible:outline-(--vuno-focus) disabled:cursor-not-allowed",
+    weekday: "h-10 text-sm leading-[1.125rem] font-normal tracking-[0.16px] text-(--vuno-text-primary)"
+  },
+  variants: {
+    /**
+     * Solo lectura: fondo transparente y filete apagado, como Vuno.
+     *
+     * Cuelga de la prop y no del atributo `readonly` del `<input>` porque
+     * ese atributo también lo pone `allowInput: false`, que no describe un
+     * campo de solo lectura sino uno que solo se rellena desde el
+     * calendario.
+     */
+    readOnly: {
+      false: {},
+      true: { root: "border-(--vuno-border-subtle-00) bg-transparent" }
+    },
+    /** El campo simple corto de Vuno, para un mes y año o una fecha breve. */
+    short: {
+      false: {},
+      true: {}
+    },
+    /**
+     * El icono del final cambia de color, no de sitio: inválido y aviso
+     * sustituyen al calendario en la misma posición, como en Vuno, y por
+     * eso el estado es una variante del icono y no otro elemento.
+     *
+     * El fallo pesa lo mismo que en el resto de los campos: un recuadro de
+     * 2 px por los cuatro lados y no solo el filete inferior teñido. Cede
+     * ante el foco —`not-focus-within:`— porque el sistema de origen
+     * condiciona ese contorno con `:not(:focus)`: mientras se escribe, lo
+     * que hay que ver es dónde está el cursor. El aviso no toca la caja:
+     * allí solo cambia el icono.
+     */
+    state: {
+      invalid: {
+        icon: "text-(--vuno-support-error)",
+        message: "text-(--vuno-text-error)",
+        root: "not-focus-within:outline-solid not-focus-within:outline-2 not-focus-within:-outline-offset-2 not-focus-within:outline-(--vuno-support-error)"
+      },
+      normal: {},
+      warn: { icon: "text-(--vuno-support-warning)" }
+    },
+    /**
+     * Las anchuras de Vuno: 120 px el campo simple —152 cuando muestra
+     * mensaje, porque el icono le roba sitio al texto—, 288 el de una fecha,
+     * y el rango reparte esos mismos 288 en dos columnas separadas por un
+     * píxel, que es lo que Vuno consigue con un margen.
+     */
+    type: {
+      range: { field: "min-w-0", fields: "grid w-72 grid-cols-2 gap-px" },
+      simple: { field: "w-30" },
+      single: { field: "w-72" }
+    }
+  }
+});