@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -0,0 +1,89 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "ProgressBar" });
+const props = defineProps({
+  helperText: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  label: { type: String, required: true },
+  max: { type: Number, required: false, default: 100 },
+  size: { type: String, required: false, default: "big" },
+  status: { type: String, required: false, default: "active" },
+  type: { type: String, required: false, default: "default" },
+  ui: { type: Object, required: false, default: void 0 },
+  value: { type: Number, required: false, default: void 0 }
+});
+const labelId = useId();
+const helperTextId = useId();
+const isFinished = computed(() => props.status === "finished");
+const isError = computed(() => props.status === "error");
+const indeterminate = computed(() => !isFinished.value && !isError.value && !Number.isFinite(props.value));
+const max = computed(() => Number.isFinite(props.max) && props.max > 0 ? props.max : 100);
+const value = computed(() => {
+  if (isError.value) return 0;
+  if (isFinished.value) return max.value;
+  return Math.min(Math.max(props.value ?? 0, 0), max.value);
+});
+const barStyle = computed(() => indeterminate.value || isFinished.value || isError.value ? void 0 : { transform: `scaleX(${value.value / max.value})` });
+const statusIcons = { error: "carbon:error-filled", finished: "carbon:checkmark-filled" };
+const statusIcon = computed(() => statusIcons[props.status]);
+const liveText = computed(() => isFinished.value ? "Hecho" : "Cargando");
+const ui = useTheme(
+  "progressBar",
+  () => props.ui,
+  () => ({ hideLabel: String(props.hideLabel), size: props.size, status: props.status, type: props.type })
+);
+</script>
+
+<template>
+    <div :class="ui.root">
+        <div
+            :id="labelId"
+            :class="ui.label"
+        >
+            <span :class="ui.labelText">{{ props.label }}</span>
+            <Icon
+                v-if="statusIcon"
+                :class="ui.statusIcon"
+                :name="statusIcon"
+            />
+        </div>
+
+        <div
+            :aria-busy="!isFinished"
+            :aria-describedby="props.helperText ? helperTextId : void 0"
+            :aria-invalid="isError"
+            :aria-labelledby="labelId"
+            :aria-valuemax="indeterminate ? void 0 : max"
+            :aria-valuemin="indeterminate ? void 0 : 0"
+            :aria-valuenow="indeterminate ? void 0 : value"
+            :class="ui.track"
+            :data-indeterminate="indeterminate ? 'true' : void 0"
+            role="progressbar"
+        >
+            <div
+                :class="ui.bar"
+                :style="barStyle"
+            />
+        </div>
+
+        <div
+            v-if="props.helperText"
+            :id="helperTextId"
+            :class="ui.helperText"
+        >
+            {{ props.helperText }}
+            <div
+                aria-live="polite"
+                :class="ui.liveRegion"
+            >
+                {{ liveText }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+[data-indeterminate=true]:after{animation:vuno-progress-bar-indeterminate 1.4s linear infinite;background-image:linear-gradient(90deg,var(--vuno-interactive) 12.5%,transparent 12.5%);background-position-x:0;background-size:200% 100%;content:"";inset:0;position:absolute}[dir=rtl] [data-indeterminate=true]:after{animation-name:vuno-progress-bar-indeterminate-rtl}@media (prefers-reduced-motion:reduce){[data-indeterminate=true]:after{animation:none}}@keyframes vuno-progress-bar-indeterminate{0%{background-position-x:25%}80%,to{background-position-x:-105%}}@keyframes vuno-progress-bar-indeterminate-rtl{0%{background-position-x:-105%}80%,to{background-position-x:25%}}
+</style>

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

@@ -0,0 +1,13 @@
+import type { ProgressBarProps, ProgressBarStatus } from './ProgressBar.types.js';
+declare const __VLS_export: import("vue").DefineComponent<ProgressBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressBarProps> & Readonly<{}>, {
+    value: number;
+    size: import("./ProgressBar.types.js").ProgressBarSize;
+    type: import("./ProgressBar.types.js").ProgressBarType;
+    hideLabel: boolean;
+    status: ProgressBarStatus;
+    helperText: string;
+    ui: import("../../types/slots.js").ComponentUi<"progressBar">;
+    max: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/ProgressIndicator/ProgressIndicator.context.d.ts

@@ -0,0 +1,21 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Vuno clona cada `ProgressStep` para inyectarle `index`, `complete`,
+ * `current` y el manejador de clic. En Vue el paso se apunta él mismo al
+ * montarse —`register` le devuelve su posición— y deriva su estado leyendo el
+ * índice actual del contenedor.
+ *
+ * Aquí viajan además `spaceEqually` y `vertical`, que en el sistema de origen son clases del
+ * contenedor pero afectan a slots que **pinta el paso**: la línea, la etiqueta,
+ * el icono y el texto secundario cambian de geometría con la orientación, y el
+ * paso no puede resolver su tema sin saberlas.
+ */
+export type ProgressIndicatorContext = {
+    currentIndex: ComputedRef<number>;
+    interactive: ComputedRef<boolean>;
+    spaceEqually: ComputedRef<boolean>;
+    vertical: ComputedRef<boolean>;
+    register: () => number;
+    select: (index: number) => void;
+};
+export declare const progressIndicatorKey: InjectionKey<ProgressIndicatorContext>;

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

@@ -0,0 +1 @@
+export const progressIndicatorKey = Symbol("progress-indicator");

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

@@ -0,0 +1,31 @@
+import type { ProgressIndicatorProps } from './ProgressIndicator.types.js';
+type __VLS_Props = ProgressIndicatorProps;
+type __VLS_ModelProps = {
+    'currentIndex'?: 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: (index: number) => any;
+    "update:currentIndex": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((index: number) => any) | undefined;
+    "onUpdate:currentIndex"?: ((value: number) => any) | undefined;
+}>, {
+    vertical: boolean;
+    spaceEqually: boolean;
+    interactive: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"progressIndicator">;
+    ariaLabel: 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/ProgressIndicator/ProgressIndicator.theme.d.ts

@@ -0,0 +1,121 @@
+export declare const progressIndicatorTheme: Record<"progressIndicator", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly icon: "text-(--vuno-support-error)";
+        };
+        readonly invalid: "true";
+    }, {
+        readonly class: {
+            readonly icon: "text-(--vuno-icon-disabled)";
+            readonly label: "text-(--vuno-text-disabled) shadow-none";
+        };
+        readonly disabled: "true";
+    }];
+    readonly slots: {
+        /** El estado del paso se anuncia con texto, no solo con la forma del icono. */
+        readonly assistive: "sr-only";
+        /**
+         * `group` existe para la etiqueta: Vuno dibuja el foco alrededor del
+         * rótulo y no del control, y eso solo se puede escribir desde el hijo.
+         */
+        readonly control: "group m-0 flex w-full cursor-default border-0 bg-transparent p-0 text-start outline-none";
+        readonly icon: "relative z-[1] mt-2.5 me-2 size-4 shrink-0 rounded-full text-(--vuno-interactive)";
+        readonly label: string;
+        readonly line: "absolute start-0 top-0 h-0.5 w-32 border border-transparent";
+        readonly root: "m-0 flex list-none p-0";
+        readonly secondary: "absolute start-0 mt-7 ms-6 block text-start text-xs leading-4 font-normal tracking-[0.32px] text-(--vuno-text-secondary)";
+        readonly step: "relative m-0 inline-flex w-32 min-w-28 flex-row overflow-visible p-0";
+        readonly text: "flex flex-col";
+    };
+    readonly variants: {
+        /**
+         * Un paso accionable es el que Vuno deja sin `--unclickable`: el
+         * indicador es interactivo, el paso no está deshabilitado y no es el
+         * paso actual. Solo ese responde al puntero, y por eso el subrayado de
+         * enlace vive aquí y no en la etiqueta base.
+         */
+        readonly clickable: {
+            readonly false: {};
+            readonly true: {
+                readonly control: "cursor-pointer";
+                readonly label: "hover:cursor-pointer hover:text-(--vuno-link-primary-hover) hover:shadow-[0_1px_var(--vuno-link-primary-hover)] active:text-(--vuno-text-primary) active:shadow-[0_1px_0_0_var(--vuno-text-primary)]";
+            };
+        };
+        /**
+         * Vuno retira el puntero del paso completo, no solo del control: así ni
+         * la línea ni la etiqueta reaccionan. El color del icono y del rótulo
+         * llega desde `compoundVariants`, que gana al estado.
+         */
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly control: "pointer-events-none cursor-not-allowed";
+                readonly step: "cursor-not-allowed";
+            };
+        };
+        /**
+         * Dimensión sin clases propias a propósito: el error solo cambia el
+         * color del icono y tiene que hacerlo **después** del estado, así que su
+         * única declaración está en `compoundVariants`. Sigue siendo una
+         * variante porque es lo que permite componer esa combinación y
+         * sobreescribirla desde el tema del proyecto.
+         */
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {};
+        };
+        /**
+         * Reparto a partes iguales: el paso crece, la línea deja de medir 128 px
+         * fijos y la etiqueta pierde su ancho máximo de 88 px. El recorte pasa
+         * entonces al contenedor del texto, que necesita `min-w-0` para poder
+         * encogerse por debajo de su contenido; los 2 px de relleno con margen
+         * negativo son los de Vuno y evitan que `overflow: hidden` corte el
+         * foco del rótulo.
+         */
+        readonly spaceEqually: {
+            readonly false: {};
+            readonly true: {
+                readonly label: "me-3 max-w-full";
+                readonly line: "w-full min-w-32";
+                readonly step: "grow min-w-32";
+                readonly text: "-m-0.5 min-w-0 overflow-hidden p-0.5";
+            };
+        };
+        /**
+         * El estado gobierna la línea y el icono. `complete` y `current`
+         * comparten el azul interactivo y se distinguen por la forma del icono
+         * —marca de verificación frente a círculo medio lleno—; `incomplete` baja
+         * el icono a `icon-primary` y la línea a `border-subtle`.
+         */
+        readonly state: {
+            readonly complete: {
+                readonly line: "bg-(--vuno-border-interactive)";
+            };
+            readonly current: {
+                readonly line: "bg-(--vuno-border-interactive)";
+            };
+            readonly incomplete: {
+                readonly icon: "text-(--vuno-icon-primary)";
+                readonly line: "bg-(--vuno-border-subtle-00)";
+            };
+        };
+        /**
+         * En vertical el paso deja de medir un ancho fijo y pasa a medir un alto
+         * mínimo, la etiqueta puede envolver hasta 160 px y la etiqueta
+         * secundaria vuelve al flujo, debajo del rótulo y empujada por `mb-auto`
+         * contra el paso siguiente.
+         */
+        readonly vertical: {
+            readonly false: {};
+            readonly true: {
+                readonly control: "min-h-[3.625rem] w-auto min-w-0 content-start";
+                readonly icon: "mt-px inline-block ms-2 me-2";
+                readonly label: "m-0 inline-block w-auto max-w-40 align-top whitespace-normal";
+                readonly line: "h-full w-px";
+                readonly root: "flex-col";
+                readonly secondary: "static m-0 mb-auto w-full";
+                readonly step: "min-h-[3.625rem] w-auto min-w-0 content-start";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,107 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const progressIndicatorTheme = defineTheme("progressIndicator", {
+  compoundVariants: [
+    /* Vuno pinta `.vuno--progress__warning` sobre cualquier posición del paso. */
+    {
+      class: { icon: "text-(--vuno-support-error)" },
+      invalid: "true"
+    },
+    /* Deshabilitado gana a todo, el error incluido. */
+    {
+      class: { icon: "text-(--vuno-icon-disabled)", label: "text-(--vuno-text-disabled) shadow-none" },
+      disabled: "true"
+    }
+  ],
+  slots: {
+    /** El estado del paso se anuncia con texto, no solo con la forma del icono. */
+    assistive: "sr-only",
+    /**
+     * `group` existe para la etiqueta: Vuno dibuja el foco alrededor del
+     * rótulo y no del control, y eso solo se puede escribir desde el hijo.
+     */
+    control: "group m-0 flex w-full cursor-default border-0 bg-transparent p-0 text-start outline-none",
+    icon: "relative z-[1] mt-2.5 me-2 size-4 shrink-0 rounded-full text-(--vuno-interactive)",
+    label: "mt-2 block max-w-22 overflow-hidden text-sm leading-[1.45] font-normal tracking-[0.16px] text-ellipsis whitespace-nowrap text-(--vuno-text-primary) transition-[box-shadow,color] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none before:block before:content-[''] group-focus-visible:text-(--vuno-focus) group-focus-visible:outline-solid group-focus-visible:outline-1 group-focus-visible:outline-(--vuno-focus)",
+    line: "absolute start-0 top-0 h-0.5 w-32 border border-transparent",
+    root: "m-0 flex list-none p-0",
+    secondary: "absolute start-0 mt-7 ms-6 block text-start text-xs leading-4 font-normal tracking-[0.32px] text-(--vuno-text-secondary)",
+    step: "relative m-0 inline-flex w-32 min-w-28 flex-row overflow-visible p-0",
+    text: "flex flex-col"
+  },
+  variants: {
+    /**
+     * Un paso accionable es el que Vuno deja sin `--unclickable`: el
+     * indicador es interactivo, el paso no está deshabilitado y no es el
+     * paso actual. Solo ese responde al puntero, y por eso el subrayado de
+     * enlace vive aquí y no en la etiqueta base.
+     */
+    clickable: {
+      false: {},
+      true: {
+        control: "cursor-pointer",
+        label: "hover:cursor-pointer hover:text-(--vuno-link-primary-hover) hover:shadow-[0_1px_var(--vuno-link-primary-hover)] active:text-(--vuno-text-primary) active:shadow-[0_1px_0_0_var(--vuno-text-primary)]"
+      }
+    },
+    /**
+     * Vuno retira el puntero del paso completo, no solo del control: así ni
+     * la línea ni la etiqueta reaccionan. El color del icono y del rótulo
+     * llega desde `compoundVariants`, que gana al estado.
+     */
+    disabled: {
+      false: {},
+      true: { control: "pointer-events-none cursor-not-allowed", step: "cursor-not-allowed" }
+    },
+    /**
+     * Dimensión sin clases propias a propósito: el error solo cambia el
+     * color del icono y tiene que hacerlo **después** del estado, así que su
+     * única declaración está en `compoundVariants`. Sigue siendo una
+     * variante porque es lo que permite componer esa combinación y
+     * sobreescribirla desde el tema del proyecto.
+     */
+    invalid: {
+      false: {},
+      true: {}
+    },
+    /**
+     * Reparto a partes iguales: el paso crece, la línea deja de medir 128 px
+     * fijos y la etiqueta pierde su ancho máximo de 88 px. El recorte pasa
+     * entonces al contenedor del texto, que necesita `min-w-0` para poder
+     * encogerse por debajo de su contenido; los 2 px de relleno con margen
+     * negativo son los de Vuno y evitan que `overflow: hidden` corte el
+     * foco del rótulo.
+     */
+    spaceEqually: {
+      false: {},
+      true: { label: "me-3 max-w-full", line: "w-full min-w-32", step: "grow min-w-32", text: "-m-0.5 min-w-0 overflow-hidden p-0.5" }
+    },
+    /**
+     * El estado gobierna la línea y el icono. `complete` y `current`
+     * comparten el azul interactivo y se distinguen por la forma del icono
+     * —marca de verificación frente a círculo medio lleno—; `incomplete` baja
+     * el icono a `icon-primary` y la línea a `border-subtle`.
+     */
+    state: {
+      complete: { line: "bg-(--vuno-border-interactive)" },
+      current: { line: "bg-(--vuno-border-interactive)" },
+      incomplete: { icon: "text-(--vuno-icon-primary)", line: "bg-(--vuno-border-subtle-00)" }
+    },
+    /**
+     * En vertical el paso deja de medir un ancho fijo y pasa a medir un alto
+     * mínimo, la etiqueta puede envolver hasta 160 px y la etiqueta
+     * secundaria vuelve al flujo, debajo del rótulo y empujada por `mb-auto`
+     * contra el paso siguiente.
+     */
+    vertical: {
+      false: {},
+      true: {
+        control: "min-h-[3.625rem] w-auto min-w-0 content-start",
+        icon: "mt-px inline-block ms-2 me-2",
+        label: "m-0 inline-block w-auto max-w-40 align-top whitespace-normal",
+        line: "h-full w-px",
+        root: "flex-col",
+        secondary: "static m-0 mb-auto w-full",
+        step: "min-h-[3.625rem] w-auto min-w-0 content-start"
+      }
+    }
+  }
+});

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

@@ -0,0 +1,25 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type ProgressIndicatorProps = {
+    /**
+     * Nombre de la lista de pasos. Vuno no lo expone y deja el `<ul>` sin
+     * nombre; aquí se conserva porque una lista de progreso sin nombre se
+     * anuncia como «lista de cinco elementos» y no dice de qué proceso informa.
+     */
+    ariaLabel?: string;
+    /**
+     * Convierte cada paso en un botón que lleva al paso elegido. Es la forma
+     * declarativa de lo que Vuno decide mirando si recibió `onChange`: allí el
+     * indicador es interactivo **porque** hay escucha, algo que en Vue no se
+     * puede leer de forma estable —`vnode.props` se reemplaza en cada render del
+     * padre— ni durante el render en servidor.
+     */
+    interactive?: boolean;
+    /**
+     * Reparte el ancho sobrante entre los pasos en vez de dejarlos en sus 128 px
+     * fijos. El sistema de origen lo ignora cuando el indicador es vertical y aquí
+     * también.
+     */
+    spaceEqually?: boolean;
+    ui?: ComponentUi<'progressIndicator'>;
+    vertical?: boolean;
+};

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

@@ -0,0 +1,56 @@
+<script setup>
+import { computed, provide, ref } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { progressIndicatorKey } from "./ProgressIndicator.context";
+defineOptions({ name: "ProgressIndicator" });
+const currentIndex = defineModel("currentIndex", { type: Number, ...{ default: 0 } });
+const props = defineProps({
+  ariaLabel: { type: String, required: false, default: "Progreso" },
+  interactive: { type: Boolean, required: false, default: false },
+  spaceEqually: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 },
+  vertical: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["change"]);
+const count = ref(0);
+const spaceEqually = computed(() => props.spaceEqually && !props.vertical);
+const ui = useTheme(
+  "progressIndicator",
+  () => props.ui,
+  () => ({ spaceEqually: spaceEqually.value ? "true" : "false", vertical: props.vertical ? "true" : "false" })
+);
+provide(progressIndicatorKey, {
+  currentIndex: computed(() => currentIndex.value),
+  interactive: computed(() => props.interactive),
+  spaceEqually,
+  vertical: computed(() => props.vertical),
+  register: () => count.value++,
+  select: (index) => {
+    currentIndex.value = index;
+    emit("change", index);
+  }
+});
+function onKeydown(event) {
+  const previous = props.vertical ? "ArrowUp" : "ArrowLeft";
+  const next = props.vertical ? "ArrowDown" : "ArrowRight";
+  if (!["End", "Home", next, previous].includes(event.key)) return;
+  const steps = [...event.currentTarget.querySelectorAll("[data-progress-step]:not(:disabled)")];
+  if (steps.length === 0) return;
+  const current = steps.indexOf(document.activeElement);
+  const step = event.key === next ? 1 : -1;
+  const target = event.key === "Home" ? steps[0] : event.key === "End" ? steps.at(-1) : steps[(current + step + steps.length) % steps.length];
+  if (!target) return;
+  event.preventDefault();
+  target.focus();
+}
+</script>
+
+<template>
+    <ol
+        :aria-label="props.ariaLabel"
+        :class="ui.root"
+        @keydown="onKeydown"
+    >
+        <slot />
+    </ol>
+</template>

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

@@ -0,0 +1,31 @@
+import type { ProgressIndicatorProps } from './ProgressIndicator.types.js';
+type __VLS_Props = ProgressIndicatorProps;
+type __VLS_ModelProps = {
+    'currentIndex'?: 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: (index: number) => any;
+    "update:currentIndex": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((index: number) => any) | undefined;
+    "onUpdate:currentIndex"?: ((value: number) => any) | undefined;
+}>, {
+    vertical: boolean;
+    spaceEqually: boolean;
+    interactive: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"progressIndicator">;
+    ariaLabel: 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/ProgressStep/ProgressStep.d.vue.ts

@@ -0,0 +1,11 @@
+import type { ProgressStepProps } from './ProgressStep.types.js';
+declare const __VLS_export: import("vue").DefineComponent<ProgressStepProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressStepProps> & Readonly<{}>, {
+    description: string;
+    disabled: boolean;
+    invalid: boolean;
+    complete: boolean;
+    secondaryLabel: string;
+    ui: import("../../types/slots.js").ComponentUi<"progressIndicator">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,31 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type ProgressStepProps = {
+    /**
+     * Marca el paso como hecho aunque esté en el índice actual o por delante de
+     * él. Vuno fuerza `complete` en todo lo que queda **detrás** del índice
+     * actual, así que esta prop solo decide los pasos que el índice no resuelve.
+     */
+    complete?: boolean;
+    /**
+     * Descripción del icono. En Vuno es el `<title>` de un `<svg>` marcado
+     * `aria-hidden`, así que funciona como pista del puntero y no como nombre
+     * accesible; aquí se conserva ese comportamiento.
+     */
+    description?: string;
+    disabled?: boolean;
+    /**
+     * Pinta el icono de error sin cambiar el estado del paso: la línea conserva
+     * el color de su posición, igual que en Vuno, y el texto asistivo pasa a
+     * anunciar el fallo.
+     */
+    invalid?: boolean;
+    /**
+     * Qué consigue la persona en este paso, en una o dos palabras. Vuno lo
+     * limita a 16 caracteres y lo trunca con puntos suspensivos cuando no cabe,
+     * dejando el texto completo en el `title` del paso.
+     */
+    label: string;
+    /** Texto de ayuda del paso: que es opcional, o qué ha fallado. */
+    secondaryLabel?: string;
+    ui?: ComponentUi<'progressIndicator'>;
+};

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

@@ -0,0 +1,83 @@
+<script setup>
+import { computed, defineComponent, h, inject } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { progressIndicatorKey } from "#vuno/components/ProgressIndicator/ProgressIndicator.context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "ProgressStep" });
+const props = defineProps({
+  complete: { type: Boolean, required: false, default: false },
+  description: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  label: { type: String, required: true },
+  secondaryLabel: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const stateMessages = { complete: "Completado", current: "Paso actual", incomplete: "Pendiente", invalid: "Con error" };
+const context = inject(progressIndicatorKey);
+if (!context) throw new Error("[ProgressStep] debe usarse dentro de ProgressIndicator.");
+const index = context.register();
+const complete = computed(() => index < context.currentIndex.value || props.complete);
+const current = computed(() => index === context.currentIndex.value && !complete.value);
+const state = computed(() => current.value ? "current" : complete.value ? "complete" : "incomplete");
+const clickable = computed(() => context.interactive.value && !props.disabled && !current.value);
+const NativeButton = defineComponent({
+  name: "ProgressStepButtonRoot",
+  inheritAttrs: false,
+  setup(_, { attrs, slots: nativeSlots }) {
+    return () => h("button", attrs, nativeSlots.default?.());
+  }
+});
+const rootTag = computed(() => context.interactive.value ? NativeButton : "span");
+const iconName = computed(() => props.invalid ? "carbon:warning" : current.value ? "carbon:incomplete" : complete.value ? "carbon:checkmark-outline" : "carbon:circle-dash");
+const message = computed(() => props.invalid ? stateMessages.invalid : complete.value ? stateMessages.complete : current.value ? stateMessages.current : stateMessages.incomplete);
+const ui = useTheme(
+  "progressIndicator",
+  () => props.ui,
+  () => ({
+    clickable: clickable.value ? "true" : "false",
+    disabled: props.disabled ? "true" : "false",
+    invalid: props.invalid ? "true" : "false",
+    spaceEqually: context.spaceEqually.value ? "true" : "false",
+    state: state.value,
+    vertical: context.vertical.value ? "true" : "false"
+  })
+);
+const onSelect = () => {
+  if (!clickable.value) return;
+  context.select(index);
+};
+</script>
+
+<template>
+    <li :class="ui.step">
+        <component
+            :is="rootTag"
+            :aria-current="current ? 'step' : void 0"
+            :aria-disabled="context.interactive.value && props.disabled ? 'true' : void 0"
+            :class="ui.control"
+            :data-progress-step="context.interactive.value ? '' : void 0"
+            :disabled="context.interactive.value && props.disabled ? true : void 0"
+            :title="props.label"
+            :type="context.interactive.value ? 'button' : void 0"
+            @click="onSelect"
+        >
+            <Icon
+                :class="ui.icon"
+                :name="iconName"
+                :title="props.description"
+            />
+            <span :class="ui.text">
+                <span :class="ui.label">{{ props.label }}</span>
+                <span
+                    v-if="props.secondaryLabel !== void 0"
+                    :class="ui.secondary"
+                >
+                    {{ props.secondaryLabel }}
+                </span>
+            </span>
+            <span :class="ui.assistive">{{ message }}</span>
+            <span :class="ui.line" />
+        </component>
+    </li>
+</template>

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

@@ -0,0 +1,11 @@
+import type { ProgressStepProps } from './ProgressStep.types.js';
+declare const __VLS_export: import("vue").DefineComponent<ProgressStepProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressStepProps> & Readonly<{}>, {
+    description: string;
+    disabled: boolean;
+    invalid: boolean;
+    complete: boolean;
+    secondaryLabel: string;
+    ui: import("../../types/slots.js").ComponentUi<"progressIndicator">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;