@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,20 @@
+import type { ContainedListItemProps } from './ContainedListItem.types.js';
+type __VLS_Slots = {
+    action?: () => unknown;
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ContainedListItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainedListItemProps> & Readonly<{}>, {
+    disabled: boolean;
+    icon: string;
+    to: import("vue-router").RouteLocationRaw;
+    ui: import("../../types/slots.js").ComponentUi<"containedList">;
+    href: 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/ContainedListItem/ContainedListItem.types.d.ts

@@ -0,0 +1,20 @@
+import type { RouteLocationRaw } from 'vue-router';
+import type { ComponentUi } from '#vuno/types/slots';
+export type ContainedListItemProps = {
+    /**
+     * Solo tiene efecto cuando la fila es accionable. Vuno no atenúa una fila
+     * de lectura: sin activación que impedir, «deshabilitada» no significa nada
+     * y el texto seguiría siendo el contenido de la lista.
+     */
+    disabled?: boolean;
+    /** Destino externo. Convierte la fila en un enlace, igual que `to`. */
+    href?: string;
+    /**
+     * Icono decorativo delante del texto. Es descriptivo, no interactivo: queda
+     * oculto para el lector de pantalla y no añade una parada de tabulación.
+     */
+    icon?: string;
+    /** Destino interno resuelto por `NuxtLink`. */
+    to?: RouteLocationRaw;
+    ui?: ComponentUi<'containedList'>;
+};

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

@@ -0,0 +1,90 @@
+<script setup>
+import { computed, defineComponent, h, inject, useAttrs } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+import { containedListKey } from "#vuno/components/ContainedList/ContainedList.context";
+import { NuxtLink } from "#components";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "ContainedListItem", inheritAttrs: false });
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  href: { type: String, required: false, default: void 0 },
+  icon: { type: String, required: false, default: void 0 },
+  to: { type: null, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const slots = defineSlots();
+const attrs = useAttrs();
+const list = inject(containedListKey, void 0);
+const NativeButton = defineComponent({
+  name: "ContainedListItemButton",
+  inheritAttrs: false,
+  setup(_, { attrs: nativeAttrs, slots: nativeSlots }) {
+    return () => h("button", nativeAttrs, nativeSlots.default?.());
+  }
+});
+const hasAction = computed(() => filled(slots.action));
+const isButton = computed(() => !props.to && !props.href && Boolean(attrs.onClick));
+const clickable = computed(() => isButton.value || Boolean(props.to) || Boolean(props.href));
+const contentTag = computed(() => props.to ? NuxtLink : props.href ? "a" : isButton.value ? NativeButton : "div");
+const rootAttributes = computed(() => Object.fromEntries(Object.entries(attrs).filter(([name]) => name !== "onClick")));
+const contentAttributes = computed(() => {
+  const disabledLink = clickable.value && !isButton.value && props.disabled;
+  const contract = {
+    onClick: attrs.onClick,
+    "aria-disabled": disabledLink ? "true" : void 0,
+    disabled: isButton.value ? props.disabled : void 0,
+    href: props.href,
+    tabindex: disabledLink ? -1 : void 0,
+    to: props.to,
+    type: isButton.value ? "button" : void 0
+  };
+  for (const [key, value] of Object.entries(contract)) if (value === void 0) delete contract[key];
+  return contract;
+});
+const ui = useTheme(
+  "containedList",
+  () => props.ui,
+  () => ({
+    clickable: String(clickable.value),
+    disabled: String(props.disabled),
+    inset: String(list?.inset.value ?? false),
+    kind: list?.kind.value ?? "on-page",
+    size: list?.size.value ?? "lg",
+    withAction: String(hasAction.value),
+    withIcon: String(Boolean(props.icon))
+  })
+);
+function blockDisabledLink(event) {
+  if (isButton.value || !clickable.value || !props.disabled) return;
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+</script>
+
+<template>
+    <li
+        v-bind="rootAttributes"
+        :class="ui.item"
+    >
+        <component
+            :is="contentTag"
+            v-bind="contentAttributes"
+            :class="ui.content"
+            @click.capture="blockDisabledLink"
+        >
+            <Icon
+                v-if="props.icon"
+                :class="ui.icon"
+                :name="props.icon"
+            />
+            <div :class="ui.text"><slot /></div>
+        </component>
+        <div
+            v-if="hasAction"
+            :class="ui.action"
+        >
+            <slot name="action" />
+        </div>
+    </li>
+</template>

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

@@ -0,0 +1,20 @@
+import type { ContainedListItemProps } from './ContainedListItem.types.js';
+type __VLS_Slots = {
+    action?: () => unknown;
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ContainedListItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainedListItemProps> & Readonly<{}>, {
+    disabled: boolean;
+    icon: string;
+    to: import("vue-router").RouteLocationRaw;
+    ui: import("../../types/slots.js").ComponentUi<"containedList">;
+    href: 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/Content/Content.d.vue.ts

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

@@ -0,0 +1,21 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "Content" });
+const props = defineProps({
+  id: { type: String, required: false, default: "main-content" },
+  as: { type: String, required: false, default: "main" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme("header", () => props.ui);
+</script>
+
+<template>
+    <component
+        :is="props.as"
+        :id="props.id"
+        :class="ui.content"
+        data-vuno-content
+    >
+        <slot />
+    </component>
+</template>

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

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

@@ -0,0 +1,18 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+import type { SwitchChange } from '#vuno/components/Switch/Switch.types';
+import type { ContentSwitcherSelectionMode, ContentSwitcherSize } from './ContentSwitcher.types.js';
+/**
+ * Vuno clona cada hijo para inyectarle `index`, `selected` y los manejadores.
+ * En Vue el hijo se apunta él mismo al montarse —`register` le devuelve su
+ * posición— y lee del contexto lo que decide su aspecto: el tamaño y el
+ * contraste viven en el contenedor, no en cada opción.
+ */
+export type ContentSwitcherContext = {
+    lowContrast: ComputedRef<boolean>;
+    selectedIndex: ComputedRef<number>;
+    selectionMode: ComputedRef<ContentSwitcherSelectionMode>;
+    size: ComputedRef<ContentSwitcherSize>;
+    register: () => number;
+    select: (change: SwitchChange) => void;
+};
+export declare const contentSwitcherKey: InjectionKey<ContentSwitcherContext>;

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

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

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

@@ -0,0 +1,32 @@
+import type { SwitchChange } from '#vuno/components/Switch/Switch.types';
+import type { ContentSwitcherProps } from './ContentSwitcher.types.js';
+type __VLS_Props = ContentSwitcherProps;
+type __VLS_ModelProps = {
+    'selectedIndex'?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (change: SwitchChange) => any;
+    "update:selectedIndex": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((change: SwitchChange) => any) | undefined;
+    "onUpdate:selectedIndex"?: ((value: number) => any) | undefined;
+}>, {
+    size: import("./ContentSwitcher.types.js").ContentSwitcherSize;
+    lowContrast: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"contentSwitcher">;
+    ariaLabel: string;
+    selectionMode: import("./ContentSwitcher.types.js").ContentSwitcherSelectionMode;
+}, {}, {}, {}, 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/ContentSwitcher/ContentSwitcher.theme.d.ts

@@ -0,0 +1,51 @@
+export declare const contentSwitcherTheme: Record<"contentSwitcher", {
+    readonly slots: {
+        /** Solo lo usa `IconSwitch`: aquí el color del icono no hereda del texto. */
+        readonly icon: "size-4 shrink-0 text-(--vuno-icon-primary) group-aria-selected:text-(--vuno-icon-inverse) group-disabled:text-(--vuno-icon-disabled)";
+        readonly label: "z-[1] max-w-full overflow-hidden text-ellipsis whitespace-nowrap";
+        readonly root: "flex h-10 w-full rounded-[4px] outline-solid outline-1 -outline-offset-1 outline-(--vuno-border-inverse) has-[button:disabled]:outline-(--vuno-border-disabled) [&:not(:has([role=tab]:not([data-icon-only])))]:w-fit";
+        readonly switch: string;
+    };
+    readonly variants: {
+        /**
+         * Vuno cambia aquí los tres tokens propios del componente y sube el
+         * peso de la etiqueta seleccionada a `heading-compact-01`: sobre un
+         * fondo claro el contraste ya no distingue la pastilla y lo hace la
+         * tipografía.
+         *
+         * El icono también se oscurece al apuntarlo, y solo aquí: en bajo
+         * contraste parte de `icon-secondary`, así que sin ese paso una opción
+         * con icono y sin etiqueta no devuelve nada al puntero —el fondo apenas
+         * cambia y no hay texto que se aclare—.
+         */
+        readonly lowContrast: {
+            readonly false: {};
+            readonly true: {
+                readonly icon: "text-(--vuno-icon-secondary) group-hover:text-(--vuno-icon-primary) group-aria-selected:text-(--vuno-icon-primary) group-disabled:text-(--vuno-icon-disabled)";
+                readonly root: "bg-(--vuno-content-switcher-background) outline-(--vuno-border-strong-01)";
+                readonly switch: string;
+            };
+        };
+        /**
+         * El botón solo con icono es cuadrado y se declara aquí en píxeles en vez
+         * de con `aspect-square`: el lado saldría entonces de una altura que el
+         * contenedor calcula a partir del ancho de sus hijos, y ese ancho es el
+         * que se está pidiendo.
+         */
+        readonly size: {
+            readonly sm: {
+                readonly root: "h-8";
+                readonly switch: "data-[icon-only]:size-8";
+            };
+            readonly md: {
+                readonly root: "h-10";
+                readonly switch: "data-[icon-only]:size-10";
+            };
+            readonly lg: {
+                readonly icon: "size-5";
+                readonly root: "h-12";
+                readonly switch: "px-[14px] data-[icon-only]:size-12";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,43 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const contentSwitcherTheme = defineTheme("contentSwitcher", {
+  slots: {
+    /** Solo lo usa `IconSwitch`: aquí el color del icono no hereda del texto. */
+    icon: "size-4 shrink-0 text-(--vuno-icon-primary) group-aria-selected:text-(--vuno-icon-inverse) group-disabled:text-(--vuno-icon-disabled)",
+    label: "z-[1] max-w-full overflow-hidden text-ellipsis whitespace-nowrap",
+    root: "flex h-10 w-full rounded-[4px] outline-solid outline-1 -outline-offset-1 outline-(--vuno-border-inverse) has-[button:disabled]:outline-(--vuno-border-disabled) [&:not(:has([role=tab]:not([data-icon-only])))]:w-fit",
+    switch: "group relative m-0 inline-flex w-full min-w-0 cursor-pointer items-center overflow-hidden border-y border-(--vuno-border-inverse) bg-transparent px-4 py-2 text-start font-normal text-sm leading-[1.125rem] tracking-[0.16px] whitespace-nowrap text-(--vuno-text-secondary) no-underline outline-none before:absolute before:inset-y-0 before:start-0 before:z-[2] before:my-auto before:block before:h-4 before:w-px before:bg-(--vuno-border-subtle-00) before:content-[''] first:rounded-s-[4px] first:before:bg-transparent last:rounded-e-[4px] hover:bg-(--vuno-layer-hover-01) hover:text-(--vuno-text-primary) hover:before:bg-transparent [:hover+&]:before:bg-transparent active:bg-(--vuno-layer-hover-01) active:text-(--vuno-text-primary) focus:rounded-[4px] focus:border-transparent focus:bg-(--vuno-focus-inset) focus:text-(--vuno-text-primary) focus:shadow-[inset_0_0_0_2px_var(--vuno-focus)] focus:before:bg-transparent focus:hover:bg-(--vuno-layer-hover-01) [:focus+&]:before:bg-transparent aria-selected:rounded-[4px] aria-selected:border-transparent aria-selected:bg-(--vuno-layer-selected-inverse) aria-selected:text-(--vuno-text-inverse) aria-selected:before:bg-transparent [[aria-selected=true]+&]:before:bg-transparent aria-selected:hover:bg-(--vuno-layer-selected-inverse) aria-selected:hover:text-(--vuno-text-inverse) aria-selected:active:bg-(--vuno-layer-selected-inverse) aria-selected:focus:bg-(--vuno-layer-selected-inverse) aria-selected:focus:text-(--vuno-text-inverse) aria-selected:focus:shadow-[inset_0_0_0_2px_var(--vuno-focus),inset_0_0_0_3px_var(--vuno-focus-inset)] disabled:cursor-not-allowed disabled:border-(--vuno-border-disabled) disabled:bg-transparent disabled:text-(--vuno-text-disabled) disabled:before:bg-(--vuno-border-disabled) disabled:first:before:bg-transparent disabled:hover:bg-transparent disabled:hover:text-(--vuno-text-disabled) disabled:aria-selected:border-transparent disabled:aria-selected:bg-(--vuno-button-disabled) disabled:aria-selected:text-(--vuno-text-disabled) data-[icon-only]:justify-center data-[icon-only]:p-0"
+  },
+  variants: {
+    /**
+     * Vuno cambia aquí los tres tokens propios del componente y sube el
+     * peso de la etiqueta seleccionada a `heading-compact-01`: sobre un
+     * fondo claro el contraste ya no distingue la pastilla y lo hace la
+     * tipografía.
+     *
+     * El icono también se oscurece al apuntarlo, y solo aquí: en bajo
+     * contraste parte de `icon-secondary`, así que sin ese paso una opción
+     * con icono y sin etiqueta no devuelve nada al puntero —el fondo apenas
+     * cambia y no hay texto que se aclare—.
+     */
+    lowContrast: {
+      false: {},
+      true: {
+        icon: "text-(--vuno-icon-secondary) group-hover:text-(--vuno-icon-primary) group-aria-selected:text-(--vuno-icon-primary) group-disabled:text-(--vuno-icon-disabled)",
+        root: "bg-(--vuno-content-switcher-background) outline-(--vuno-border-strong-01)",
+        switch: "border-(--vuno-border-strong-01) before:bg-(--vuno-border-strong-01) hover:bg-(--vuno-content-switcher-background-hover) active:bg-(--vuno-content-switcher-background-hover) focus:bg-(--vuno-content-switcher-background) focus:hover:bg-(--vuno-content-switcher-background-hover) aria-selected:bg-(--vuno-content-switcher-selected) aria-selected:font-semibold aria-selected:text-(--vuno-text-primary) aria-selected:shadow-[inset_0_0_0_1px_var(--vuno-border-inverse)] aria-selected:hover:bg-(--vuno-content-switcher-selected) aria-selected:hover:text-(--vuno-text-primary) aria-selected:active:bg-(--vuno-content-switcher-selected) aria-selected:focus:bg-(--vuno-content-switcher-selected) aria-selected:focus:text-(--vuno-text-primary) aria-selected:focus:shadow-[inset_0_0_0_2px_var(--vuno-focus)] disabled:border-(--vuno-border-disabled) disabled:aria-selected:bg-(--vuno-content-switcher-selected) disabled:aria-selected:shadow-[inset_0_0_0_1px_var(--vuno-border-disabled)]"
+      }
+    },
+    /**
+     * El botón solo con icono es cuadrado y se declara aquí en píxeles en vez
+     * de con `aspect-square`: el lado saldría entonces de una altura que el
+     * contenedor calcula a partir del ancho de sus hijos, y ese ancho es el
+     * que se está pidiendo.
+     */
+    size: {
+      sm: { root: "h-8", switch: "data-[icon-only]:size-8" },
+      md: { root: "h-10", switch: "data-[icon-only]:size-10" },
+      /* 14 px en vez de 16: el icono de 20 px come los 2 px que faltan. */
+      lg: { icon: "size-5", root: "h-12", switch: "px-[14px] data-[icon-only]:size-12" }
+    }
+  }
+});

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

@@ -0,0 +1,21 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * `automatic` selecciona al llegar con las flechas y `manual` solo mueve el
+ * foco, dejando la selección a Enter o Espacio. Vuno usa `automatic` por
+ * defecto; `manual` es lo correcto cuando cambiar de vista cuesta —una
+ * consulta, un formulario a medio llenar— y recorrerlas todas sería peor.
+ */
+export type ContentSwitcherSelectionMode = 'automatic' | 'manual';
+/** Alturas Vuno del control: 32, 40 y 48 px. */
+export type ContentSwitcherSize = 'lg' | 'md' | 'sm';
+export type ContentSwitcherProps = {
+    /**
+     * Nombre del `tablist`. Vuno lo deja en manos del consumidor y un grupo
+     * de pestañas sin nombre se anuncia sin decir de qué elige.
+     */
+    ariaLabel?: string;
+    lowContrast?: boolean;
+    selectionMode?: ContentSwitcherSelectionMode;
+    size?: ContentSwitcherSize;
+    ui?: ComponentUi<'contentSwitcher'>;
+};

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

@@ -0,0 +1,56 @@
+<script setup>
+import { computed, provide, ref } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { contentSwitcherKey } from "./ContentSwitcher.context";
+defineOptions({ name: "ContentSwitcher" });
+const selectedIndex = defineModel("selectedIndex", { type: Number, ...{ default: 0 } });
+const props = defineProps({
+  ariaLabel: { type: String, required: false, default: "Selector de contenido" },
+  lowContrast: { type: Boolean, required: false, default: false },
+  selectionMode: { type: String, required: false, default: "automatic" },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["change"]);
+const count = ref(0);
+const ui = useTheme(
+  "contentSwitcher",
+  () => props.ui,
+  () => ({ lowContrast: String(props.lowContrast), size: props.size })
+);
+provide(contentSwitcherKey, {
+  lowContrast: computed(() => props.lowContrast),
+  selectedIndex: computed(() => selectedIndex.value),
+  selectionMode: computed(() => props.selectionMode),
+  size: computed(() => props.size),
+  register: () => count.value++,
+  select: (change) => {
+    if (change.index === selectedIndex.value) return;
+    selectedIndex.value = change.index;
+    emit("change", change);
+  }
+});
+function onKeydown(event) {
+  if (!["ArrowLeft", "ArrowRight", "End", "Home"].includes(event.key)) return;
+  const tabs = [...event.currentTarget.querySelectorAll('[role="tab"]:not(:disabled)')];
+  if (tabs.length === 0) return;
+  const current = tabs.indexOf(document.activeElement);
+  const step = event.key === "ArrowRight" ? 1 : -1;
+  const target = event.key === "Home" ? tabs[0] : event.key === "End" ? tabs.at(-1) : tabs[(current + step + tabs.length) % tabs.length];
+  if (!target) return;
+  event.preventDefault();
+  target.focus();
+  if (props.selectionMode === "automatic") target.click();
+}
+</script>
+
+<template>
+    <div
+        :aria-label="props.ariaLabel"
+        :class="ui.root"
+        role="tablist"
+        @keydown="onKeydown"
+    >
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,32 @@
+import type { SwitchChange } from '#vuno/components/Switch/Switch.types';
+import type { ContentSwitcherProps } from './ContentSwitcher.types.js';
+type __VLS_Props = ContentSwitcherProps;
+type __VLS_ModelProps = {
+    'selectedIndex'?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (change: SwitchChange) => any;
+    "update:selectedIndex": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((change: SwitchChange) => any) | undefined;
+    "onUpdate:selectedIndex"?: ((value: number) => any) | undefined;
+}>, {
+    size: import("./ContentSwitcher.types.js").ContentSwitcherSize;
+    lowContrast: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"contentSwitcher">;
+    ariaLabel: string;
+    selectionMode: import("./ContentSwitcher.types.js").ContentSwitcherSelectionMode;
+}, {}, {}, {}, 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/CopyButton/CopyButton.d.vue.ts

@@ -0,0 +1,18 @@
+import type { CopyButtonProps } from './CopyButton.types.js';
+declare const __VLS_export: import("vue").DefineComponent<CopyButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<CopyButtonProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    text: string;
+    disabled: boolean;
+    align: import("../Tooltip/Tooltip.types.js").TooltipAlignment;
+    size: import("../IconButton/IconButton.types.js").IconButtonSize;
+    ui: import("../../types/slots.js").ComponentUi<"copyButton">;
+    iconDescription: string;
+    autoAlign: boolean;
+    feedback: string;
+    feedbackTimeout: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,7 @@
+export declare const copyButtonTheme: Record<"copyButton", {
+    readonly slots: {
+        readonly base: "border-none bg-(--vuno-layer-01) hover:bg-(--vuno-layer-hover-01) focus:shadow-none focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) active:bg-(--vuno-layer-active-01) disabled:bg-(--vuno-layer-01)";
+        /** La confirmación para quien no ve el aviso. Ocupa sitio en el árbol, no en pantalla. */
+        readonly live: "sr-only";
+    };
+}>;

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

@@ -0,0 +1,8 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const copyButtonTheme = defineTheme("copyButton", {
+  slots: {
+    base: "border-none bg-(--vuno-layer-01) hover:bg-(--vuno-layer-hover-01) focus:shadow-none focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) active:bg-(--vuno-layer-active-01) disabled:bg-(--vuno-layer-01)",
+    /** La confirmación para quien no ve el aviso. Ocupa sitio en el árbol, no en pantalla. */
+    live: "sr-only"
+  }
+});

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

@@ -0,0 +1,29 @@
+import type { ComponentUi } from '#vuno/types/slots';
+import type { IconButtonSize } from '#vuno/components/IconButton/IconButton.types';
+import type { TooltipAlignment } from '#vuno/components/Tooltip/Tooltip.types';
+export type CopyButtonProps = {
+    /** Dónde se coloca el aviso. Por defecto abajo, como en el sistema de origen. */
+    align?: TooltipAlignment;
+    /** Recoloca el aviso cuando la alineación pedida no cabe. */
+    autoAlign?: boolean;
+    disabled?: boolean;
+    /** Texto del aviso mientras dura la confirmación. Por defecto, `messages.copied`. */
+    feedback?: string;
+    /** Cuánto dura la confirmación, en milisegundos. Vuno: 2000. */
+    feedbackTimeout?: number;
+    /** Nombre accesible y texto del aviso en reposo. Por defecto, `messages.copy`. */
+    iconDescription?: string;
+    size?: IconButtonSize;
+    /**
+     * Lo que se copia al portapapeles.
+     *
+     * No existe en el sistema de origen, donde el botón solo anima y quien lo
+     * usa copia en su propio manejador. Aquí se ofrece porque el componente ya
+     * tiene que saber si la copia salió bien: sin ella, la confirmación se
+     * anuncia igual cuando el portapapeles falla, que es justo lo que nadie
+     * quiere oír. Sin `text` el comportamiento vuelve a ser el de origen: se
+     * emite `click` y se confirma sin comprobar nada.
+     */
+    text?: string;
+    ui?: ComponentUi<'copyButton'>;
+};

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

@@ -0,0 +1,76 @@
+<script setup>
+import { computed, onBeforeUnmount, ref } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import IconButton from "#vuno/components/IconButton/IconButton.vue";
+defineOptions({ name: "CopyButton", inheritAttrs: false });
+const props = defineProps({
+  align: { type: String, required: false, default: "bottom" },
+  autoAlign: { type: Boolean, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  feedback: { type: String, required: false, default: void 0 },
+  feedbackTimeout: { type: Number, required: false, default: 2e3 },
+  iconDescription: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  text: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["click"]);
+const icons = useIcons();
+const messages = useMessages();
+const copied = ref(false);
+const failed = ref(false);
+const confirming = computed(() => copied.value || failed.value);
+const description = computed(() => props.iconDescription ?? messages.value.copy);
+const announcement = computed(() => failed.value ? messages.value.copyFailed : copied.value ? messages.value.copiedAnnouncement : "");
+const label = computed(() => failed.value ? messages.value.copyFailed : copied.value ? props.feedback ?? messages.value.copied : description.value);
+const ui = useTheme("copyButton", () => props.ui);
+let timer;
+function restart() {
+  clearTimeout(timer);
+  timer = setTimeout(() => {
+    copied.value = false;
+    failed.value = false;
+  }, props.feedbackTimeout);
+}
+async function copy(event) {
+  emit("click", event);
+  if (props.text !== void 0) {
+    try {
+      await navigator.clipboard.writeText(props.text);
+    } catch {
+      copied.value = false;
+      failed.value = true;
+      restart();
+      return;
+    }
+  }
+  copied.value = true;
+  failed.value = false;
+  restart();
+}
+onBeforeUnmount(() => clearTimeout(timer));
+</script>
+
+<template>
+    <IconButton
+        v-bind="$attrs"
+        :align="props.align"
+        :autoAlign="props.autoAlign"
+        :closeOnActivation="false"
+        :disabled="props.disabled"
+        :icon="copied ? icons.copied : icons.copy"
+        kind="ghost"
+        :label="label"
+        :leaveDelayMs="confirming ? props.feedbackTimeout : void 0"
+        :size="props.size"
+        :ui="{ button: ui.base }"
+        @click="copy"
+    />
+
+    <span
+        aria-live="polite"
+        :class="ui.live"
+    >
+        {{ announcement }}
+    </span>
+</template>