@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -0,0 +1,99 @@
+export declare const structuredListTheme: Record<"structuredList", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly cell: "pb-2";
+        };
+        readonly head: "true";
+    }, {
+        readonly class: {
+            readonly cell: "px-4";
+        };
+        readonly selection: "true";
+    }, {
+        readonly class: {
+            readonly cell: "p-2";
+        };
+        readonly condensed: "true";
+    }, {
+        readonly class: {
+            readonly cell: "ps-0 pe-4 first:ps-0";
+        };
+        readonly flush: "true";
+    }, {
+        readonly class: {
+            readonly row: "hover:border-(--vuno-layer-selected-hover-01) hover:bg-(--vuno-layer-selected-hover-01)";
+        };
+        readonly selectable: "true";
+        readonly selected: "true";
+    }, {
+        readonly class: {
+            readonly cell: "text-(--vuno-text-disabled)";
+        };
+        readonly disabled: "true";
+    }];
+    readonly slots: {
+        readonly body: "table-row-group align-middle";
+        readonly cell: "relative table-cell max-w-[36rem] px-2 pt-4 pb-6 text-sm leading-5 tracking-[0.16px] text-(--vuno-text-secondary) transition-colors duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) first:ps-4 motion-reduce:transition-none";
+        readonly head: "table-header-group align-middle";
+        /**
+         * **Sin color propio.** En el original el indicador no declara `fill`, así
+         * que toma el de su celda: gris `text-secondary` en una fila sin
+         * elegir y `text-primary` al apuntarla o al elegirla. Fijarlo aquí
+         * pintaba las veinte filas con el peso de la elegida y borraba el
+         * aclarado como señal.
+         */
+        readonly icon: "mt-0.5 size-4 shrink-0 align-top";
+        readonly iconCell: "w-8 ps-4 pe-0";
+        readonly input: "sr-only";
+        readonly row: "group/row table-row border-t border-(--vuno-border-subtle-00) transition-colors duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) last:border-b motion-reduce:transition-none";
+        readonly wrapper: "table w-full border-collapse overflow-x-auto bg-transparent";
+    };
+    readonly variants: {
+        readonly condensed: {
+            readonly false: {};
+            readonly true: {};
+        };
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly icon: "text-(--vuno-icon-disabled)";
+                readonly row: "cursor-not-allowed";
+            };
+        };
+        readonly flush: {
+            readonly false: {};
+            readonly true: {};
+        };
+        readonly head: {
+            readonly false: {};
+            readonly true: {
+                readonly cell: "h-10 align-top text-sm leading-[1.125rem] font-semibold tracking-[0.16px] text-(--vuno-text-primary)";
+                readonly row: "border-none";
+            };
+        };
+        readonly noWrap: {
+            readonly false: {};
+            readonly true: {
+                readonly cell: "whitespace-nowrap";
+            };
+        };
+        readonly selectable: {
+            readonly false: {};
+            readonly true: {
+                readonly cell: "group-hover/row:text-(--vuno-text-primary)";
+                readonly row: "cursor-pointer border-b hover:border-(--vuno-layer-hover-01) hover:bg-(--vuno-layer-hover-01) has-[input:focus-visible]:outline-solid has-[input:focus-visible]:outline-2 has-[input:focus-visible]:-outline-offset-2 has-[input:focus-visible]:outline-(--vuno-focus)";
+            };
+        };
+        readonly selected: {
+            readonly false: {};
+            readonly true: {
+                readonly cell: "text-(--vuno-text-primary)";
+                readonly row: "border-(--vuno-layer-selected-01) bg-(--vuno-layer-selected-01)";
+            };
+        };
+        readonly selection: {
+            readonly false: {};
+            readonly true: {};
+        };
+    };
+}>;

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

@@ -0,0 +1,42 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const structuredListTheme = defineTheme("structuredList", {
+  compoundVariants: [
+    { class: { cell: "pb-2" }, head: "true" },
+    { class: { cell: "px-4" }, selection: "true" },
+    { class: { cell: "p-2" }, condensed: "true" },
+    { class: { cell: "ps-0 pe-4 first:ps-0" }, flush: "true" },
+    /* La pestaña Style distingue el puntero sobre una fila ya elegida; el SCSS todavía no. */
+    { class: { row: "hover:border-(--vuno-layer-selected-hover-01) hover:bg-(--vuno-layer-selected-hover-01)" }, selectable: "true", selected: "true" },
+    { class: { cell: "text-(--vuno-text-disabled)" }, disabled: "true" }
+  ],
+  slots: {
+    body: "table-row-group align-middle",
+    cell: "relative table-cell max-w-[36rem] px-2 pt-4 pb-6 text-sm leading-5 tracking-[0.16px] text-(--vuno-text-secondary) transition-colors duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) first:ps-4 motion-reduce:transition-none",
+    head: "table-header-group align-middle",
+    /**
+     * **Sin color propio.** En el original el indicador no declara `fill`, así
+     * que toma el de su celda: gris `text-secondary` en una fila sin
+     * elegir y `text-primary` al apuntarla o al elegirla. Fijarlo aquí
+     * pintaba las veinte filas con el peso de la elegida y borraba el
+     * aclarado como señal.
+     */
+    icon: "mt-0.5 size-4 shrink-0 align-top",
+    /* La columna del indicador mide 32 px: 16 de inicio más los 16 del icono. */
+    iconCell: "w-8 ps-4 pe-0",
+    /* El radio se oculta pero no se retira: sigue siendo la parada de tabulación y el grupo que recorren las flechas. */
+    input: "sr-only",
+    row: "group/row table-row border-t border-(--vuno-border-subtle-00) transition-colors duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) last:border-b motion-reduce:transition-none",
+    wrapper: "table w-full border-collapse overflow-x-auto bg-transparent"
+  },
+  variants: {
+    condensed: { false: {}, true: {} },
+    /* Vuno no implementa este estado en código, pero su especificación visual lo documenta. */
+    disabled: { false: {}, true: { icon: "text-(--vuno-icon-disabled)", row: "cursor-not-allowed" } },
+    flush: { false: {}, true: {} },
+    head: { false: {}, true: { cell: "h-10 align-top text-sm leading-[1.125rem] font-semibold tracking-[0.16px] text-(--vuno-text-primary)", row: "border-none" } },
+    noWrap: { false: {}, true: { cell: "whitespace-nowrap" } },
+    selectable: { false: {}, true: { cell: "group-hover/row:text-(--vuno-text-primary)", row: "cursor-pointer border-b hover:border-(--vuno-layer-hover-01) hover:bg-(--vuno-layer-hover-01) has-[input:focus-visible]:outline-solid has-[input:focus-visible]:outline-2 has-[input:focus-visible]:-outline-offset-2 has-[input:focus-visible]:outline-(--vuno-focus)" } },
+    selected: { false: {}, true: { cell: "text-(--vuno-text-primary)", row: "border-(--vuno-layer-selected-01) bg-(--vuno-layer-selected-01)" } },
+    selection: { false: {}, true: {} }
+  }
+});

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

@@ -0,0 +1,30 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * El override `ui` de toda la familia. Las seis piezas resuelven la misma clave
+ * de tema, así que comparten un tipo en lugar de repetirlo seis veces.
+ */
+export type StructuredListUi = ComponentUi<'structuredList'>;
+export type StructuredListWrapperProps = {
+    /**
+     * Nombre accesible de la lista. `role="table"` sin nombre se anuncia solo
+     * por su contenido, así que una lista que convive con otras necesita uno.
+     */
+    ariaLabel?: string;
+    /**
+     * Reduce la fila de 60 a 36 px dejando el relleno en 8 px por lado. Es la
+     * única alternativa de altura que Vuno define.
+     */
+    isCondensed?: boolean;
+    /**
+     * Alinea el texto con el borde de inicio en lugar de sangrarlo 16 px
+     * («flush» frente a «hang»). Vuno no lo ofrece con selección: se ignora
+     * cuando `selection` está activo, porque el indicador ocupa ese margen.
+     */
+    isFlush?: boolean;
+    /**
+     * Convierte las filas del cuerpo en un grupo de radios: una sola elección,
+     * con indicador propio y fila entera pulsable.
+     */
+    selection?: boolean;
+    ui?: StructuredListUi;
+};

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

@@ -0,0 +1,49 @@
+<script setup>
+import { computed, provide, toRef, useId, useTemplateRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { structuredListKey, structuredListVariants } from "./StructuredListWrapper.context";
+defineOptions({ name: "StructuredListWrapper" });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  ariaLabel: { type: String, required: false, default: void 0 },
+  isCondensed: { type: Boolean, required: false, default: false },
+  isFlush: { type: Boolean, required: false, default: false },
+  selection: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const root = useTemplateRef("root");
+const flush = computed(() => props.isFlush && !props.selection);
+const context = {
+  name: useId(),
+  condensed: toRef(props, "isCondensed"),
+  flush,
+  selected: model,
+  selection: toRef(props, "selection"),
+  select: (value) => {
+    model.value = value;
+    focusOption(value);
+  }
+};
+function focusOption(value) {
+  const options = [...root.value?.querySelectorAll('input[type="radio"]') ?? []];
+  options.find((option) => option.value === value)?.focus();
+}
+provide(structuredListKey, context);
+const ui = useTheme(
+  "structuredList",
+  () => props.ui,
+  () => structuredListVariants(context)
+);
+</script>
+
+<template>
+    <div
+        ref="root"
+        :aria-label="props.ariaLabel"
+        :class="ui.wrapper"
+        role="table"
+    >
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,28 @@
+import type { StructuredListWrapperProps } from './StructuredListWrapper.types.js';
+type __VLS_Props = StructuredListWrapperProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    selection: boolean;
+    isFlush: boolean;
+    ui: import("./StructuredListWrapper.types.js").StructuredListUi;
+    ariaLabel: string;
+    isCondensed: 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/Switch/Switch.d.vue.ts

@@ -0,0 +1,19 @@
+import type { SwitchProps } from './Switch.types.js';
+type __VLS_Slots = {
+    default?: (props: {
+        icon: string;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{}>, {
+    text: string;
+    disabled: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"contentSwitcher">;
+}, {}, {}, {}, 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/Switch/Switch.types.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * Vuno admite también un número: el nombre identifica la opción en el evento
+ * y no llega al DOM, así que no tiene que ser una cadena.
+ */
+export type SwitchName = number | string;
+/**
+ * Lo que Vuno entrega en `onChange`: qué opción quedó activa, en qué posición
+ * y con qué rótulo. `text` puede faltar porque la etiqueta admite venir del
+ * slot, y entonces el consumidor ya sabe qué hay dentro.
+ */
+export type SwitchChange = {
+    name: SwitchName;
+    index: number;
+    text?: string;
+};
+export type SwitchProps = {
+    name: SwitchName;
+    disabled?: boolean;
+    /** El rótulo visible. El slot lo sustituye cuando trae contenido propio. */
+    text?: string;
+    ui?: ComponentUi<'contentSwitcher'>;
+};

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

@@ -0,0 +1,43 @@
+<script setup>
+import { computed, inject } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+import { contentSwitcherKey } from "#vuno/components/ContentSwitcher/ContentSwitcher.context";
+defineOptions({ name: "Switch" });
+const props = defineProps({
+  name: { type: [Number, String], required: true },
+  disabled: { type: Boolean, required: false, default: false },
+  text: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const slots = defineSlots();
+const context = inject(contentSwitcherKey);
+if (!context) throw new Error("[Switch] debe usarse dentro de ContentSwitcher.");
+const index = context.register();
+const ui = useTheme(
+  "contentSwitcher",
+  () => props.ui,
+  () => ({ lowContrast: String(context.lowContrast.value), size: context.size.value })
+);
+const selected = computed(() => context.selectedIndex.value === index);
+const title = computed(() => filled(() => slots.default?.({ icon: ui.value.icon })) ? void 0 : props.text);
+</script>
+
+<template>
+    <button
+        :aria-selected="selected"
+        :class="ui.switch"
+        :disabled="props.disabled"
+        role="tab"
+        :tabindex="selected ? 0 : -1"
+        type="button"
+        @click="context.select({ index, name: props.name, text: props.text })"
+    >
+        <span
+            :class="ui.label"
+            :title="title"
+        >
+            <slot :icon="ui.icon">{{ props.text }}</slot>
+        </span>
+    </button>
+</template>

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

@@ -0,0 +1,19 @@
+import type { SwitchProps } from './Switch.types.js';
+type __VLS_Slots = {
+    default?: (props: {
+        icon: string;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{}>, {
+    text: string;
+    disabled: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"contentSwitcher">;
+}, {}, {}, {}, 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/Switcher/Switcher.context.d.ts

@@ -0,0 +1,13 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Lo que un `SwitcherItem` necesita de su lista.
+ *
+ * El recorrido con flechas lo resuelve la lista y no cada elemento: es la
+ * única que conoce el orden y qué separadores hay que saltar. Cada elemento
+ * solo pide moverse en una dirección desde su posición.
+ */
+export type SwitcherContext = {
+    expanded: ComputedRef<boolean>;
+    move: (from: HTMLElement, direction: -1 | 1) => void;
+};
+export declare const switcherKey: InjectionKey<SwitcherContext>;

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

@@ -0,0 +1 @@
+export const switcherKey = Symbol("switcher");

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

@@ -0,0 +1,25 @@
+import type { ShellUi } from '#vuno/components/Header/Header.types';
+type __VLS_Props = {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    expanded?: boolean;
+    ui?: ShellUi;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    expanded: boolean;
+    ui: 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/Switcher/Switcher.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { computed, provide, useTemplateRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { switcherKey } from "./Switcher.context";
+defineOptions({ name: "Switcher" });
+const props = defineProps({
+  ariaLabel: { type: String, required: false, default: "Cambiar producto" },
+  ariaLabelledBy: { type: String, required: false, default: void 0 },
+  expanded: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const list = useTemplateRef("list");
+const ui = useTheme("header", () => props.ui);
+function move(from, direction) {
+  const links = [...list.value?.querySelectorAll("[data-switcher-link]") ?? []];
+  const index = links.indexOf(from);
+  if (index === -1 || links.length === 0) return;
+  links[(index + direction + links.length) % links.length]?.focus();
+}
+provide(switcherKey, { expanded: computed(() => props.expanded), move });
+</script>
+
+<template>
+    <ul
+        ref="list"
+        :aria-label="props.ariaLabelledBy ? void 0 : props.ariaLabel"
+        :aria-labelledby="props.ariaLabelledBy"
+        :class="ui.switcher"
+    >
+        <slot />
+    </ul>
+</template>

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

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

@@ -0,0 +1,9 @@
+import type { ShellUi } from '#vuno/components/Header/Header.types';
+type __VLS_Props = {
+    ui?: ShellUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: ShellUi;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,14 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "SwitcherDivider" });
+const props = defineProps({
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme("header", () => props.ui);
+</script>
+
+<template>
+    <li>
+        <hr :class="ui.switcherDivider" />
+    </li>
+</template>

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

@@ -0,0 +1,9 @@
+import type { ShellUi } from '#vuno/components/Header/Header.types';
+type __VLS_Props = {
+    ui?: ShellUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: ShellUi;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,34 @@
+import type { ShellLinkProps, ShellUi } from '#vuno/components/Header/Header.types';
+type __VLS_Props = ShellLinkProps & {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    isSelected?: boolean;
+    rel?: string;
+    tabIndex?: number;
+    target?: string;
+    ui?: ShellUi;
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    to: import("vue-router").RouteLocationRaw;
+    ui: ShellUi;
+    ariaLabel: string;
+    href: string;
+    as: import("vue").Component | string;
+    rel: string;
+    target: string;
+    isSelected: boolean;
+    ariaLabelledBy: string;
+    tabIndex: number;
+}, {}, {}, {}, 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/SwitcherItem/SwitcherItem.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { computed, inject, useAttrs, useTemplateRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { switcherKey } from "#vuno/components/Switcher/Switcher.context";
+import { NuxtLink } from "#components";
+defineOptions({ name: "SwitcherItem", inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: void 0 },
+  href: { type: String, required: false, default: void 0 },
+  to: { type: null, required: false, default: void 0 },
+  ariaLabel: { type: String, required: false, default: void 0 },
+  ariaLabelledBy: { type: String, required: false, default: void 0 },
+  isSelected: { type: Boolean, required: false, default: false },
+  rel: { type: String, required: false, default: void 0 },
+  tabIndex: { type: Number, required: false, default: void 0 },
+  target: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const switcher = inject(switcherKey, void 0);
+const link = useTemplateRef("link");
+const tabindex = computed(() => props.tabIndex ?? (switcher?.expanded.value ? 0 : -1));
+const attrs = useAttrs();
+const root = computed(() => props.as ?? (props.to === void 0 ? "a" : NuxtLink));
+const ui = useTheme(
+  "header",
+  () => props.ui,
+  () => ({ selected: props.isSelected ? "true" : "false" })
+);
+const linkAttributes = computed(() => {
+  const contract = {
+    "aria-current": props.isSelected ? "page" : void 0,
+    "aria-label": props.ariaLabelledBy ? void 0 : props.ariaLabel,
+    "aria-labelledby": props.ariaLabelledBy,
+    href: props.to === void 0 ? props.href : void 0,
+    rel: props.rel ?? (props.target === "_blank" ? "noopener" : void 0),
+    tabindex: tabindex.value,
+    target: props.target,
+    to: props.to
+  };
+  for (const [key, value] of Object.entries(contract)) if (value === void 0) delete contract[key];
+  return { ...attrs, ...contract };
+});
+function onKeydown(event) {
+  const direction = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+  if (direction === 0) return;
+  const element = link.value?.$el ?? link.value;
+  if (!element) return;
+  event.preventDefault();
+  switcher?.move(element, direction);
+}
+</script>
+
+<template>
+    <li :class="ui.switcherItem">
+        <component
+            :is="root"
+            ref="link"
+            v-bind="linkAttributes"
+            :class="ui.switcherItemLink"
+            data-switcher-link
+            @keydown="onKeydown"
+        >
+            <slot />
+        </component>
+    </li>
+</template>

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

@@ -0,0 +1,34 @@
+import type { ShellLinkProps, ShellUi } from '#vuno/components/Header/Header.types';
+type __VLS_Props = ShellLinkProps & {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    isSelected?: boolean;
+    rel?: string;
+    tabIndex?: number;
+    target?: string;
+    ui?: ShellUi;
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    to: import("vue-router").RouteLocationRaw;
+    ui: ShellUi;
+    ariaLabel: string;
+    href: string;
+    as: import("vue").Component | string;
+    rel: string;
+    target: string;
+    isSelected: boolean;
+    ariaLabelledBy: string;
+    tabIndex: number;
+}, {}, {}, {}, 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;
+    };
+};