@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,21 @@
+import type { FormLabelProps } from './FormLabel.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FormLabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormLabelProps> & Readonly<{}>, {
+    disabled: boolean;
+    invalid: boolean;
+    hideLabel: boolean;
+    noMargin: boolean;
+    ui: import("../../types/control.js").ControlUi<"label">;
+    for: string;
+}, {}, {}, {}, 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/FormLabel/FormLabel.theme.d.ts

@@ -0,0 +1,42 @@
+/**
+ * `vuno--label`: tipografía `label-01` —12 px, interlineado 1 rem—, peso 400,
+ * texto secundario, `inline-block`, alineación a la línea base y margen
+ * inferior `$spacing-03`.
+ *
+ * El interletrado es la única medida que no se copia: +0.16 px en vez de los
+ * +0.32 px del escalón de 12 px. Esos 0.32 px son +0.027 em pensados para abrir
+ * IBM Plex Sans a tamaño pequeño, y Inter ya lleva incorporada esa apertura
+ * óptica; con el valor original el rótulo se lee espaciado, casi versalita,
+ * frente al valor del campo que tiene justo debajo. El paso pequeño sigue más
+ * abierto que el de 14 px, así que la proporción entre escalones se mantiene.
+ *
+ * El selector de ancestro reproduce `fieldset[disabled] .vuno--label`: una
+ * etiqueta dentro de un `FormGroup` deshabilitado se apaga sin que el control
+ * que la usa tenga que propagar el estado.
+ */
+export declare const formLabelTheme: Record<"formLabel", {
+    readonly slots: {
+        readonly label: "mb-2 inline-block align-baseline text-xs leading-4 font-normal tracking-[0.16px] text-(--vuno-text-secondary) [fieldset:disabled_&]:text-(--vuno-text-disabled)";
+    };
+    readonly variants: {
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly label: "text-(--vuno-text-disabled)";
+            };
+        };
+        readonly hideLabel: {
+            readonly false: {};
+            readonly true: {
+                readonly label: "sr-only";
+            };
+        };
+        /** `vuno--label--no-margin`, el modificador del `FormLabel` suelto. */
+        readonly noMargin: {
+            readonly false: {};
+            readonly true: {
+                readonly label: "mb-0";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,24 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const formLabelTheme = defineTheme("formLabel", {
+  slots: { label: "mb-2 inline-block align-baseline text-xs leading-4 font-normal tracking-[0.16px] text-(--vuno-text-secondary) [fieldset:disabled_&]:text-(--vuno-text-disabled)" },
+  variants: {
+    disabled: {
+      false: {},
+      true: { label: "text-(--vuno-text-disabled)" }
+    },
+    /*
+     * Vuno oculta el rótulo con `vuno--visually-hidden`, que es lo que
+     * hace `sr-only`: sigue en el árbol de accesibilidad y conserva la
+     * relación con el control.
+     */
+    hideLabel: {
+      false: {},
+      true: { label: "sr-only" }
+    },
+    /** `vuno--label--no-margin`, el modificador del `FormLabel` suelto. */
+    noMargin: {
+      false: {},
+      true: { label: "mb-0" }
+    }
+  }
+});

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

@@ -0,0 +1 @@
+export type { FormLabelProps } from '#vuno/types/form';

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

@@ -0,0 +1,28 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "FormLabel" });
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  for: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  noMargin: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme(
+  "formLabel",
+  () => props.ui,
+  () => ({ disabled: props.disabled ? "true" : "false", hideLabel: props.hideLabel ? "true" : "false", noMargin: props.noMargin ? "true" : "false" })
+);
+</script>
+
+<template>
+    <label
+        :class="ui.label"
+        :data-disabled="props.disabled || void 0"
+        :data-invalid="props.invalid || void 0"
+        :for="props.for"
+    >
+        <slot />
+    </label>
+</template>

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

@@ -0,0 +1,21 @@
+import type { FormLabelProps } from './FormLabel.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FormLabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormLabelProps> & Readonly<{}>, {
+    disabled: boolean;
+    invalid: boolean;
+    hideLabel: boolean;
+    noMargin: boolean;
+    ui: import("../../types/control.js").ControlUi<"label">;
+    for: string;
+}, {}, {}, {}, 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/Grid/Grid.context.d.ts

@@ -0,0 +1,11 @@
+import type { InjectionKey } from 'vue';
+/**
+ * Marca que ya hay una retícula por encima. La segunda y sucesivas se pintan
+ * como `subgrid`: comparten las líneas de la columna que las contiene en vez de
+ * abrir una retícula nueva, y anulan su canal para no sumarlo dos veces.
+ *
+ * Es lo que en Vuno hace `GridSettings`, que `CSSGrid` provee siempre con
+ * `subgrid` activo. Solo hay un dato y es constante durante la vida del
+ * componente, así que viaja como booleano y no como `Ref`.
+ */
+export declare const gridKey: InjectionKey<boolean>;

package/dist/runtime/app/components/Grid/Grid.context.js

@@ -0,0 +1 @@
+export const gridKey = Symbol("vuno-grid");

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

@@ -0,0 +1,19 @@
+import type { GridProps } from './Grid.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<GridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GridProps> & Readonly<{}>, {
+    mode: import("./Grid.types.js").GridMode;
+    align: import("./Grid.types.js").GridAlign;
+    fullWidth: boolean;
+    as: import("vue").Component | string;
+    withRowGap: 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/Grid/Grid.types.d.ts

@@ -0,0 +1,39 @@
+import type { Component } from 'vue';
+/** Alineación de la retícula dentro de su contenedor. Vuno la centra. */
+export type GridAlign = 'center' | 'end' | 'start';
+/**
+ * Modo de canal. En Vuno son dos banderas sueltas —`condensed` y `narrow`—
+ * que se excluyen entre sí, y su propio `Subgrid` ya las expresa como una
+ * variante tipada. Aquí solo existe la variante: son tres estados de una misma
+ * decisión y dos booleanos permitirían escribir la combinación imposible.
+ *
+ * - `wide`: canal de 32 px repartido a los dos lados de cada columna.
+ * - `narrow`: el canal inicial desaparece y el contenido cuelga 16 px hacia él.
+ * - `condensed`: canal de 1 px, para retículas fluidas sin aire entre celdas.
+ */
+export type GridMode = 'condensed' | 'narrow' | 'wide';
+export type GridProps = {
+    /**
+     * Vuno centra la retícula y solo ofrece anclarla a un extremo. `start` y
+     * `end` retiran el margen automático de ese lado; no afectan al contenido.
+     */
+    align?: GridAlign;
+    /**
+     * Raíz alternativa. Una retícula suele ser el contenedor de una región con
+     * nombre —`main`, `section`, `article`—, y forzar un `div` obligaría a
+     * envolverla solo para recuperar la semántica.
+     */
+    as?: Component | string;
+    /** Retira el ancho máximo de 1584 px y deja la retícula fluir. */
+    fullWidth?: boolean;
+    mode?: GridMode;
+    /**
+     * Separación vertical entre filas igual al canal vigente: 32 px en `wide`,
+     * 16 px en `narrow` y 1 px en `condensed`.
+     *
+     * No está activada de serie porque en Vuno la separación vertical es
+     * decisión del contenido: una celda que ya trae su propio relleno la
+     * duplicaría.
+     */
+    withRowGap?: boolean;
+};

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

@@ -0,0 +1,29 @@
+<script setup>
+import { computed, inject, provide } from "vue";
+import { gridKey } from "./Grid.context";
+defineOptions({ name: "Grid" });
+const props = defineProps({
+  align: { type: String, required: false, default: "center" },
+  as: { type: null, required: false, default: "div" },
+  fullWidth: { type: Boolean, required: false, default: false },
+  mode: { type: String, required: false, default: "wide" },
+  withRowGap: { type: Boolean, required: false, default: false }
+});
+defineSlots();
+const nested = inject(gridKey, false);
+provide(gridKey, true);
+const attributes = computed(() => nested ? { "data-mode": props.mode, "data-row-gap": props.withRowGap || void 0, "data-vuno-subgrid": "" } : { "data-align": props.align, "data-full-width": props.fullWidth || void 0, "data-mode": props.mode, "data-row-gap": props.withRowGap || void 0, "data-vuno-grid": "" });
+</script>
+
+<template>
+    <component
+        :is="props.as"
+        v-bind="attributes"
+    >
+        <slot />
+    </component>
+</template>
+
+<style scoped>
+[data-vuno-grid]{--vuno-grid-gutter:2rem;--vuno-grid-gutter-start:calc(var(--vuno-grid-gutter)/2);--vuno-grid-gutter-end:calc(var(--vuno-grid-gutter)/2);--vuno-grid-column-hang:calc(var(--vuno-grid-gutter)/2);--vuno-grid-columns:4;--vuno-grid-margin:0;display:grid;grid-template-columns:repeat(var(--vuno-grid-columns),minmax(0,1fr));inline-size:100%;margin-inline:auto;max-inline-size:99rem;padding-inline:var(--vuno-grid-margin)}[data-vuno-grid][data-full-width]{max-inline-size:100%}[data-vuno-grid][data-align=start]{margin-inline-start:0}[data-vuno-grid][data-align=end]{margin-inline-end:0}[data-vuno-grid][data-mode=narrow]{--vuno-grid-gutter-start:0rem}[data-vuno-grid][data-mode=condensed]{--vuno-grid-gutter:1px;--vuno-grid-column-hang:calc(1rem - 0.5px)}[data-vuno-grid][data-row-gap]{row-gap:var(--vuno-grid-gutter)}[data-vuno-grid][data-mode=narrow][data-row-gap]{row-gap:calc(var(--vuno-grid-gutter)/2)}@media (min-width:42rem){[data-vuno-grid]{--vuno-grid-columns:8;--vuno-grid-margin:1rem}}@media (min-width:66rem){[data-vuno-grid]{--vuno-grid-columns:16}}@media (min-width:99rem){[data-vuno-grid]{--vuno-grid-margin:1.5rem}}[data-vuno-subgrid]{display:grid;grid-template-columns:repeat(var(--vuno-grid-columns),minmax(0,1fr));margin-inline:calc(var(--vuno-grid-mode-start)*-1) calc(var(--vuno-grid-mode-end)*-1)}[data-vuno-subgrid][data-mode=wide]{--vuno-grid-gutter-start:1rem;--vuno-grid-gutter-end:1rem;--vuno-grid-column-hang:0}[data-vuno-subgrid][data-mode=narrow]{--vuno-grid-gutter-start:0rem;--vuno-grid-gutter-end:1rem;--vuno-grid-column-hang:1rem}[data-vuno-subgrid][data-mode=condensed]{--vuno-grid-gutter:1px;--vuno-grid-gutter-start:0.5px;--vuno-grid-gutter-end:0.5px;--vuno-grid-column-hang:calc(1rem - 0.5px)}[data-vuno-subgrid][data-row-gap]{row-gap:2rem}[data-vuno-subgrid][data-mode=narrow][data-row-gap]{row-gap:1rem}[data-vuno-subgrid][data-mode=condensed][data-row-gap]{row-gap:1px}
+</style>

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

@@ -0,0 +1,19 @@
+import type { GridProps } from './Grid.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<GridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GridProps> & Readonly<{}>, {
+    mode: import("./Grid.types.js").GridMode;
+    align: import("./Grid.types.js").GridAlign;
+    fullWidth: boolean;
+    as: import("vue").Component | string;
+    withRowGap: 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/Header/Header.d.vue.ts

@@ -0,0 +1,18 @@
+import type { HeaderProps } from './Header.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<HeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderProps> & Readonly<{}>, {
+    ui: import("./Header.types.js").ShellUi;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+}, {}, {}, {}, 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/Header/Header.theme.d.ts

@@ -0,0 +1,105 @@
+export declare const headerTheme: Record<"header", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly menuItem: "after:bottom-[-2px] after:start-[-2px] after:h-[3px] after:w-[calc(100%+4px)]";
+        };
+        readonly current: "true";
+        readonly placement: "bar";
+    }, {
+        readonly class: {
+            readonly menuItem: "after:top-[-2px] after:start-[-2px] after:h-[calc(100%+4px)] after:w-[3px] focus:after:w-[5px] bg-(--vuno-layer-selected-01) hover:bg-(--vuno-layer-selected-hover-01)";
+        };
+        readonly current: "true";
+        readonly placement: "menu";
+    }];
+    readonly slots: {
+        readonly name: "flex h-full items-center border-2 border-transparent ps-4 pe-8 text-sm leading-5 font-semibold tracking-[0.1px] text-(--vuno-text-primary) no-underline transition-[border-color] duration-(--vuno-duration-fast-02) outline-none select-none focus:border-(--vuno-focus) max-[41.98rem]:px-4";
+        readonly action: "inline-flex size-12 shrink-0 items-center justify-center border border-transparent bg-transparent p-0 text-(--vuno-icon-secondary) transition-colors duration-(--vuno-duration-fast-02) outline-none hover:bg-(--vuno-background-hover) hover:text-(--vuno-icon-primary) focus:border-(--vuno-focus) focus:shadow-none active:bg-(--vuno-background-active) active:text-(--vuno-icon-primary)";
+        /** `.vuno--content`: relleno de 2 rem y color de texto primario. */
+        readonly content: "p-8 text-(--vuno-text-primary)";
+        readonly globalBar: "flex h-full flex-1 justify-end";
+        readonly menu: "m-0 hidden list-none p-0";
+        readonly menuArrow: "ms-2 size-4 shrink-0 text-(--vuno-icon-secondary) transition-transform duration-(--vuno-duration-fast-02)";
+        readonly menuBar: "m-0 flex h-full list-none p-0";
+        readonly menuItem: "relative flex h-full items-center border-2 border-transparent bg-(--vuno-background) px-4 text-sm leading-[1.125rem] font-normal tracking-normal text-(--vuno-text-secondary) no-underline transition-colors duration-(--vuno-duration-fast-02) outline-none select-none hover:bg-(--vuno-background-hover) hover:text-(--vuno-text-primary) focus:border-(--vuno-focus) active:bg-(--vuno-background-active) active:text-(--vuno-text-primary)";
+        /** El rótulo se recorta con puntos suspensivos, no con el `overflow` del enlace. */
+        readonly menuItemText: "overflow-hidden text-ellipsis whitespace-nowrap";
+        readonly menuTitle: "relative flex h-full items-center border-2 border-transparent bg-(--vuno-background) px-4 text-sm leading-[1.125rem] font-normal tracking-normal text-(--vuno-text-secondary) no-underline transition-colors duration-(--vuno-duration-fast-02) outline-none select-none hover:bg-(--vuno-background-hover) hover:text-(--vuno-text-primary) focus:border-(--vuno-focus) active:bg-(--vuno-background-active) active:text-(--vuno-text-primary) aria-expanded:bg-(--vuno-layer-01) aria-expanded:text-(--vuno-text-secondary)";
+        readonly menuTrigger: "flex items-center justify-center text-(--vuno-icon-primary) hover:text-(--vuno-icon-primary)";
+        readonly namePrefix: "font-normal";
+        readonly navigation: "relative hidden h-full ps-4 before:absolute before:top-1/2 before:start-0 before:block before:h-6 before:w-px before:-translate-y-1/2 before:bg-(--vuno-border-subtle-00) before:content-[''] min-[66rem]:block";
+        /** El ancho entra y sale con la curva de salida productiva, la misma que la navegación lateral. */
+        readonly panel: "fixed end-0 top-12 bottom-0 z-header w-0 overflow-hidden border-none bg-(--vuno-layer-01) text-(--vuno-text-secondary) transition-[width] duration-(--vuno-duration-fast-02) ease-[cubic-bezier(0.2,0,1,0.9)] will-change-[width]";
+        /**
+         * Los 48 px que la cabecera fija le quita al contenido se devuelven por
+         * dos caminos, como en la hoja original: con la cabecera de hermana
+         * directa y con la cabecera envuelta en un contenedor, que es el montaje
+         * corriente cuando `HeaderContainer` reparte el estado del shell.
+         */
+        readonly root: "fixed inset-x-0 top-0 z-header flex h-12 items-center border-b border-(--vuno-border-subtle-00) bg-(--vuno-background) [&~[data-vuno-content]]:mt-12 [div:has(&)~[data-vuno-content]]:mt-12";
+        /**
+         * Visible solo con foco: Vuno lo recorta a 1 px en vez de ocultarlo.
+         *
+         * El margen de −1 px sigue puesto con foco, como en la hoja original: es
+         * lo que deja el borde de 4 px pegado al borde de la ventana en vez de
+         * separado un píxel.
+         */
+        readonly skipToContent: "absolute m-[-1px] h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap [clip:rect(0,0,0,0)] focus:start-0 focus:top-0 focus:z-[9999] focus:flex focus:h-12 focus:w-auto focus:items-center focus:border-4 focus:border-(--vuno-focus) focus:bg-(--vuno-background) focus:px-4 focus:py-0 focus:text-(--vuno-text-secondary) focus:no-underline focus:outline-none focus:[clip:auto]";
+        readonly submenu: "relative";
+        readonly switcher: "m-0 flex list-none flex-col items-center justify-center p-0 text-(--vuno-text-secondary)";
+        readonly switcherDivider: "mx-4 my-2 block h-px w-56 border-none bg-(--vuno-border-subtle-00)";
+        readonly switcherItem: "h-8 w-full first:mt-4";
+        readonly switcherItemLink: "block h-8 px-4 py-1.5 text-sm leading-[1.125rem] font-semibold tracking-[0.16px] text-(--vuno-text-secondary) no-underline hover:bg-(--vuno-layer-hover-01) hover:text-(--vuno-text-primary) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) active:bg-(--vuno-layer-active-01) active:text-(--vuno-text-primary)";
+    };
+    readonly variants: {
+        /** `--header__action--active`: la acción abre un panel y se funde con él. */
+        readonly active: {
+            readonly false: {};
+            readonly true: {
+                readonly action: "border-x-(--vuno-border-subtle-00) border-b-transparent bg-(--vuno-layer-01) text-(--vuno-icon-primary)";
+            };
+        };
+        /**
+         * El botón de menú desaparece a partir de `lg` salvo que sea colapsable.
+         * Cuando lo es, Vuno acerca 8 px el nombre del producto que le sigue.
+         */
+        readonly collapsible: {
+            readonly false: {
+                readonly menuTrigger: "min-[66rem]:hidden";
+            };
+            readonly true: {
+                readonly menuTrigger: "[&~[data-header-name]]:ps-2";
+            };
+        };
+        readonly current: {
+            readonly false: {};
+            readonly true: {
+                readonly menuItem: "text-(--vuno-text-primary) after:absolute after:block after:bg-(--vuno-border-interactive) after:content-[''] focus:border-(--vuno-focus) focus:after:border-0";
+                readonly menuTitle: "text-(--vuno-text-primary) after:absolute after:block after:bg-(--vuno-border-interactive) after:content-[''] focus:border-(--vuno-focus) focus:after:border-0 after:bottom-[-2px] after:start-[-2px] after:h-[3px] after:w-[calc(100%+4px)]";
+            };
+        };
+        readonly expanded: {
+            readonly false: {};
+            readonly true: {
+                readonly menu: "absolute bottom-0 start-0 z-[calc(var(--vuno-z-header)_+_1)] m-0 flex w-50 translate-y-full flex-col bg-(--vuno-layer-01) p-0 shadow-[0_4px_8px_0_rgb(0_0_0/50%)]";
+                readonly menuArrow: "rotate-180";
+                readonly menuTitle: "z-[calc(var(--vuno-z-header)_+_2)]";
+                readonly panel: "w-64 overflow-y-auto border-x border-(--vuno-border-subtle-00)";
+            };
+        };
+        /** En la barra la marca va abajo y ocupa el ancho; dentro del submenú, al inicio. */
+        readonly placement: {
+            readonly bar: {};
+            readonly menu: {
+                readonly menuItem: "h-12 bg-(--vuno-layer-01) hover:bg-(--vuno-layer-hover-01) active:bg-(--vuno-layer-active-01)";
+            };
+        };
+        /** El destino del `Switcher` en el que ya se está. */
+        readonly selected: {
+            readonly false: {};
+            readonly true: {
+                readonly switcherItemLink: "bg-(--vuno-layer-selected-01) text-(--vuno-text-primary) hover:bg-(--vuno-layer-selected-01) hover:text-(--vuno-text-primary)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,89 @@
+import { defineTheme } from "#vuno/utils/theme";
+const menuItemBase = "relative flex h-full items-center border-2 border-transparent bg-(--vuno-background) px-4 text-sm leading-[1.125rem] font-normal tracking-normal text-(--vuno-text-secondary) no-underline transition-colors duration-(--vuno-duration-fast-02) outline-none select-none hover:bg-(--vuno-background-hover) hover:text-(--vuno-text-primary) focus:border-(--vuno-focus) active:bg-(--vuno-background-active) active:text-(--vuno-text-primary)";
+const barMarker = "after:bottom-[-2px] after:start-[-2px] after:h-[3px] after:w-[calc(100%+4px)]";
+const menuMarker = "after:top-[-2px] after:start-[-2px] after:h-[calc(100%+4px)] after:w-[3px] focus:after:w-[5px]";
+const currentMarker = "text-(--vuno-text-primary) after:absolute after:block after:bg-(--vuno-border-interactive) after:content-[''] focus:border-(--vuno-focus) focus:after:border-0";
+export const headerTheme = defineTheme("header", {
+  compoundVariants: [
+    /* La marca solo existe cuando hay página actual, y su forma depende del sitio. */
+    { class: { menuItem: barMarker }, current: "true", placement: "bar" },
+    { class: { menuItem: `${menuMarker} bg-(--vuno-layer-selected-01) hover:bg-(--vuno-layer-selected-hover-01)` }, current: "true", placement: "menu" }
+  ],
+  slots: {
+    name: "flex h-full items-center border-2 border-transparent ps-4 pe-8 text-sm leading-5 font-semibold tracking-[0.1px] text-(--vuno-text-primary) no-underline transition-[border-color] duration-(--vuno-duration-fast-02) outline-none select-none focus:border-(--vuno-focus) max-[41.98rem]:px-4",
+    action: "inline-flex size-12 shrink-0 items-center justify-center border border-transparent bg-transparent p-0 text-(--vuno-icon-secondary) transition-colors duration-(--vuno-duration-fast-02) outline-none hover:bg-(--vuno-background-hover) hover:text-(--vuno-icon-primary) focus:border-(--vuno-focus) focus:shadow-none active:bg-(--vuno-background-active) active:text-(--vuno-icon-primary)",
+    /** `.vuno--content`: relleno de 2 rem y color de texto primario. */
+    content: "p-8 text-(--vuno-text-primary)",
+    globalBar: "flex h-full flex-1 justify-end",
+    menu: "m-0 hidden list-none p-0",
+    menuArrow: "ms-2 size-4 shrink-0 text-(--vuno-icon-secondary) transition-transform duration-(--vuno-duration-fast-02)",
+    menuBar: "m-0 flex h-full list-none p-0",
+    menuItem: menuItemBase,
+    /** El rótulo se recorta con puntos suspensivos, no con el `overflow` del enlace. */
+    menuItemText: "overflow-hidden text-ellipsis whitespace-nowrap",
+    menuTitle: `${menuItemBase} aria-expanded:bg-(--vuno-layer-01) aria-expanded:text-(--vuno-text-secondary)`,
+    menuTrigger: "flex items-center justify-center text-(--vuno-icon-primary) hover:text-(--vuno-icon-primary)",
+    namePrefix: "font-normal",
+    navigation: "relative hidden h-full ps-4 before:absolute before:top-1/2 before:start-0 before:block before:h-6 before:w-px before:-translate-y-1/2 before:bg-(--vuno-border-subtle-00) before:content-[''] min-[66rem]:block",
+    /** El ancho entra y sale con la curva de salida productiva, la misma que la navegación lateral. */
+    panel: "fixed end-0 top-12 bottom-0 z-header w-0 overflow-hidden border-none bg-(--vuno-layer-01) text-(--vuno-text-secondary) transition-[width] duration-(--vuno-duration-fast-02) ease-[cubic-bezier(0.2,0,1,0.9)] will-change-[width]",
+    /**
+     * Los 48 px que la cabecera fija le quita al contenido se devuelven por
+     * dos caminos, como en la hoja original: con la cabecera de hermana
+     * directa y con la cabecera envuelta en un contenedor, que es el montaje
+     * corriente cuando `HeaderContainer` reparte el estado del shell.
+     */
+    root: "fixed inset-x-0 top-0 z-header flex h-12 items-center border-b border-(--vuno-border-subtle-00) bg-(--vuno-background) [&~[data-vuno-content]]:mt-12 [div:has(&)~[data-vuno-content]]:mt-12",
+    /**
+     * Visible solo con foco: Vuno lo recorta a 1 px en vez de ocultarlo.
+     *
+     * El margen de −1 px sigue puesto con foco, como en la hoja original: es
+     * lo que deja el borde de 4 px pegado al borde de la ventana en vez de
+     * separado un píxel.
+     */
+    skipToContent: "absolute m-[-1px] h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap [clip:rect(0,0,0,0)] focus:start-0 focus:top-0 focus:z-[9999] focus:flex focus:h-12 focus:w-auto focus:items-center focus:border-4 focus:border-(--vuno-focus) focus:bg-(--vuno-background) focus:px-4 focus:py-0 focus:text-(--vuno-text-secondary) focus:no-underline focus:outline-none focus:[clip:auto]",
+    submenu: "relative",
+    switcher: "m-0 flex list-none flex-col items-center justify-center p-0 text-(--vuno-text-secondary)",
+    switcherDivider: "mx-4 my-2 block h-px w-56 border-none bg-(--vuno-border-subtle-00)",
+    switcherItem: "h-8 w-full first:mt-4",
+    switcherItemLink: "block h-8 px-4 py-1.5 text-sm leading-[1.125rem] font-semibold tracking-[0.16px] text-(--vuno-text-secondary) no-underline hover:bg-(--vuno-layer-hover-01) hover:text-(--vuno-text-primary) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) active:bg-(--vuno-layer-active-01) active:text-(--vuno-text-primary)"
+  },
+  variants: {
+    /** `--header__action--active`: la acción abre un panel y se funde con él. */
+    active: {
+      false: {},
+      true: { action: "border-x-(--vuno-border-subtle-00) border-b-transparent bg-(--vuno-layer-01) text-(--vuno-icon-primary)" }
+    },
+    /**
+     * El botón de menú desaparece a partir de `lg` salvo que sea colapsable.
+     * Cuando lo es, Vuno acerca 8 px el nombre del producto que le sigue.
+     */
+    collapsible: {
+      false: { menuTrigger: "min-[66rem]:hidden" },
+      true: { menuTrigger: "[&~[data-header-name]]:ps-2" }
+    },
+    current: {
+      false: {},
+      true: { menuItem: currentMarker, menuTitle: `${currentMarker} ${barMarker}` }
+    },
+    expanded: {
+      false: {},
+      true: {
+        menu: "absolute bottom-0 start-0 z-[calc(var(--vuno-z-header)_+_1)] m-0 flex w-50 translate-y-full flex-col bg-(--vuno-layer-01) p-0 shadow-[0_4px_8px_0_rgb(0_0_0/50%)]",
+        menuArrow: "rotate-180",
+        menuTitle: "z-[calc(var(--vuno-z-header)_+_2)]",
+        panel: "w-64 overflow-y-auto border-x border-(--vuno-border-subtle-00)"
+      }
+    },
+    /** En la barra la marca va abajo y ocupa el ancho; dentro del submenú, al inicio. */
+    placement: {
+      bar: {},
+      menu: { menuItem: "h-12 bg-(--vuno-layer-01) hover:bg-(--vuno-layer-hover-01) active:bg-(--vuno-layer-active-01)" }
+    },
+    /** El destino del `Switcher` en el que ya se está. */
+    selected: {
+      false: {},
+      true: { switcherItemLink: "bg-(--vuno-layer-selected-01) text-(--vuno-text-primary) hover:bg-(--vuno-layer-selected-01) hover:text-(--vuno-text-primary)" }
+    }
+  }
+});

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

@@ -0,0 +1,23 @@
+import type { Component } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * El destino de un enlace del shell.
+ *
+ * Vuno resuelve esto con un `Link` propio del UI Shell que solo elige la
+ * raíz; aquí basta el mismo reparto: `to` enruta con `NuxtLink`, `href`
+ * produce un `<a>` y `as` permite sustituir la raíz por el enlace del
+ * enrutador que use el proyecto.
+ */
+export type ShellLinkProps = {
+    as?: Component | string;
+    href?: string;
+    to?: RouteLocationRaw;
+};
+/** Slots del tema del shell: cabecera, panel, switcher, contenido y salto. */
+export type ShellUi = ComponentUi<'header'>;
+export type HeaderProps = {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ui?: ShellUi;
+};

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

@@ -0,0 +1,20 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "Header" });
+const props = defineProps({
+  ariaLabel: { type: String, required: false, default: "Cabecera" },
+  ariaLabelledBy: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme("header", () => props.ui);
+</script>
+
+<template>
+    <header
+        :aria-label="props.ariaLabelledBy ? void 0 : props.ariaLabel"
+        :aria-labelledby="props.ariaLabelledBy"
+        :class="ui.root"
+    >
+        <slot />
+    </header>
+</template>

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

@@ -0,0 +1,18 @@
+import type { HeaderProps } from './Header.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<HeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderProps> & Readonly<{}>, {
+    ui: import("./Header.types.js").ShellUi;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+}, {}, {}, {}, 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/HeaderContainer/HeaderContainer.context.d.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey, Ref } from 'vue';
+export type HeaderContainerContext = {
+    expanded: Ref<boolean>;
+    collapse: () => void;
+    toggle: () => void;
+};
+export declare const headerContainerKey: InjectionKey<HeaderContainerContext>;

package/dist/runtime/app/components/HeaderContainer/HeaderContainer.context.js

@@ -0,0 +1 @@
+export const headerContainerKey = Symbol("header-container");

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

@@ -0,0 +1,24 @@
+type __VLS_ModelProps = {
+    'expanded'?: boolean;
+};
+declare var __VLS_1: {
+    collapse: () => void;
+    expanded: boolean;
+    toggle: () => void;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/HeaderContainer/HeaderContainer.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { onBeforeUnmount, onMounted, provide } from "vue";
+import { headerContainerKey } from "./HeaderContainer.context";
+defineOptions({ name: "HeaderContainer" });
+const expanded = defineModel("expanded", { type: Boolean, ...{ default: false } });
+const collapse = () => {
+  expanded.value = false;
+};
+const toggle = () => {
+  expanded.value = !expanded.value;
+};
+provide(headerContainerKey, { collapse, expanded, toggle });
+function onKeydown(event) {
+  if (event.key === "Escape") collapse();
+}
+onMounted(() => window.addEventListener("keydown", onKeydown));
+onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+</script>
+
+<template>
+    <slot
+        :collapse="collapse"
+        :expanded="expanded"
+        :toggle="toggle"
+    />
+</template>