@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -0,0 +1,113 @@
+/**
+ * La superficie flotante de Vuno, traducida a utilidades.
+ *
+ * Las medidas salen de `packages/styles/scss/components/popover/_popover.scss`:
+ * ancho máximo 368px, radio 2px, sombra `drop-shadow(0 2px 2px rgb(0 0 0/.2))`,
+ * borde de 1px por dentro y punta de 12×6 —girada a 6×12 en los lados—. El
+ * relleno de 16px viene de la guía de estilo del sitio, que es donde Vuno lo
+ * fija; en React lo pone cada componente que monta encima.
+ *
+ * El color no se repite por variante: la superficie entra por
+ * `--popover-surface` y el filo de la punta por `--popover-caret-edge`, así
+ * que `highContrast` y `backgroundToken` cambian una variable y la punta se
+ * entera sola. Sin eso harían falta combinaciones de punta por cada fondo.
+ *
+ * No hay `overflow` ni alto máximo a propósito. El sistema de origen tampoco los pone —su
+ * guía dice que el desplazamiento no suele hacer falta— y aquí además
+ * recortarían la punta, que vive medio cuerpo fuera de la caja.
+ */
+export declare const popoverTheme: Record<"popover", {
+    readonly compoundVariants: [{
+        readonly border: "true";
+        readonly class: {
+            readonly caretFill: "top-px left-[0.5px] w-[calc(0.75rem-1px)]";
+        };
+        readonly side: "bottom";
+    }, {
+        readonly border: "true";
+        readonly class: {
+            readonly caretFill: "-top-px left-[0.5px] w-[calc(0.75rem-1px)]";
+        };
+        readonly side: "top";
+    }, {
+        readonly border: "true";
+        readonly class: {
+            readonly caretFill: "left-px";
+        };
+        readonly side: "right";
+    }, {
+        readonly border: "true";
+        readonly class: {
+            readonly caretFill: "-left-px";
+        };
+        readonly side: "left";
+    }, {
+        readonly class: {
+            readonly trigger: "bg-(--vuno-layer-01) shadow-[0_2px_2px_rgb(0_0_0/0.2)] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-(--vuno-layer-01) after:content-[''] focus-visible:after:hidden";
+        };
+        readonly open: "true";
+        readonly tabTip: "true";
+    }];
+    readonly slots: {
+        readonly caret: "pointer-events-none absolute bg-(--popover-caret-edge)";
+        readonly caretFill: "absolute inset-0 bg-(--popover-surface)";
+        readonly content: "z-floating w-max max-w-[min(23rem,calc(100dvw-2rem))] rounded-[2px] bg-(--popover-surface) p-4 text-sm text-(--vuno-text-primary) [--popover-caret-edge:var(--popover-surface)] [--popover-edge:var(--vuno-border-subtle-00)] [--popover-surface:var(--vuno-layer-01)]";
+        readonly trigger: "";
+    };
+    readonly variants: {
+        readonly background: {
+            readonly background: {
+                readonly content: "[--popover-surface:var(--vuno-background)]";
+            };
+            readonly layer: {};
+        };
+        readonly border: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "outline-solid outline-1 -outline-offset-1 outline-(--popover-edge) [--popover-caret-edge:var(--popover-edge)]";
+            };
+        };
+        readonly dropShadow: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "drop-shadow-[0_2px_2px_rgb(0_0_0/0.2)]";
+            };
+        };
+        readonly highContrast: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "text-(--vuno-text-inverse) [--popover-surface:var(--vuno-background-inverse)]";
+            };
+        };
+        readonly open: {
+            readonly false: {};
+            readonly true: {};
+        };
+        /** El lado **resuelto**, no el pedido: con volteo la punta cambia de cara. */
+        readonly side: {
+            readonly bottom: {
+                readonly caret: "h-1.5 w-3 [clip-path:polygon(0%_100%,50%_0%,100%_100%)]";
+                readonly caretFill: "[clip-path:polygon(0%_100%,50%_0%,100%_100%)]";
+            };
+            readonly left: {
+                readonly caret: "h-3 w-1.5 [clip-path:polygon(0%_0%,100%_50%,0%_100%)]";
+                readonly caretFill: "[clip-path:polygon(0%_0%,100%_50%,0%_100%)]";
+            };
+            readonly right: {
+                readonly caret: "h-3 w-1.5 [clip-path:polygon(0%_50%,100%_0%,100%_100%)]";
+                readonly caretFill: "[clip-path:polygon(0%_50%,100%_0%,100%_100%)]";
+            };
+            readonly top: {
+                readonly caret: "h-1.5 w-3 [clip-path:polygon(0%_0%,50%_100%,100%_0%)]";
+                readonly caretFill: "[clip-path:polygon(0%_0%,50%_100%,100%_0%)]";
+            };
+        };
+        readonly tabTip: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "rounded-none";
+                readonly trigger: "relative inline-flex size-8 items-center justify-center text-(--vuno-icon-primary) hover:bg-(--vuno-layer-hover-01) focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--vuno-focus)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,68 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const popoverTheme = defineTheme("popover", {
+  compoundVariants: [
+    /*
+     * Con borde, el relleno de la punta se mete 1px para dejar ver el filo.
+     * Los desplazamientos son los de `_popover.scss`, incluido el medio
+     * píxel horizontal que centra el triángulo ya estrechado.
+     */
+    { border: "true", class: { caretFill: "top-px left-[0.5px] w-[calc(0.75rem-1px)]" }, side: "bottom" },
+    { border: "true", class: { caretFill: "-top-px left-[0.5px] w-[calc(0.75rem-1px)]" }, side: "top" },
+    { border: "true", class: { caretFill: "left-px" }, side: "right" },
+    { border: "true", class: { caretFill: "-left-px" }, side: "left" },
+    /*
+     * Abierto, la pestaña se funde con la superficie: mismo fondo, la
+     * misma sombra y una franja de 2px que borra la costura. La franja se
+     * esconde para no partir el anillo de foco, y con `focus-visible` y no
+     * con `focus` porque ese es el estado en el que la pestaña dibuja el
+     * anillo: con `focus` también desaparecía tras un clic de ratón, que
+     * no lo dibuja, y la pestaña se separaba del panel sin nada a cambio.
+     */
+    {
+      class: { trigger: "bg-(--vuno-layer-01) shadow-[0_2px_2px_rgb(0_0_0/0.2)] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-(--vuno-layer-01) after:content-[''] focus-visible:after:hidden" },
+      open: "true",
+      tabTip: "true"
+    }
+  ],
+  slots: {
+    caret: "pointer-events-none absolute bg-(--popover-caret-edge)",
+    caretFill: "absolute inset-0 bg-(--popover-surface)",
+    content: "z-floating w-max max-w-[min(23rem,calc(100dvw-2rem))] rounded-[2px] bg-(--popover-surface) p-4 text-sm text-(--vuno-text-primary) [--popover-caret-edge:var(--popover-surface)] [--popover-edge:var(--vuno-border-subtle-00)] [--popover-surface:var(--vuno-layer-01)]",
+    trigger: ""
+  },
+  variants: {
+    background: {
+      background: { content: "[--popover-surface:var(--vuno-background)]" },
+      layer: {}
+    },
+    border: {
+      false: {},
+      /* Contorno por dentro: un borde real desplazaría el contenido 1px. */
+      true: { content: "outline-solid outline-1 -outline-offset-1 outline-(--popover-edge) [--popover-caret-edge:var(--popover-edge)]" }
+    },
+    dropShadow: {
+      false: {},
+      /* `drop-shadow` y no `box-shadow`: sigue el recorte de la punta. */
+      true: { content: "drop-shadow-[0_2px_2px_rgb(0_0_0/0.2)]" }
+    },
+    highContrast: {
+      false: {},
+      true: { content: "text-(--vuno-text-inverse) [--popover-surface:var(--vuno-background-inverse)]" }
+    },
+    open: {
+      false: {},
+      true: {}
+    },
+    /** El lado **resuelto**, no el pedido: con volteo la punta cambia de cara. */
+    side: {
+      bottom: { caret: "h-1.5 w-3 [clip-path:polygon(0%_100%,50%_0%,100%_100%)]", caretFill: "[clip-path:polygon(0%_100%,50%_0%,100%_100%)]" },
+      left: { caret: "h-3 w-1.5 [clip-path:polygon(0%_0%,100%_50%,0%_100%)]", caretFill: "[clip-path:polygon(0%_0%,100%_50%,0%_100%)]" },
+      right: { caret: "h-3 w-1.5 [clip-path:polygon(0%_50%,100%_0%,100%_100%)]", caretFill: "[clip-path:polygon(0%_50%,100%_0%,100%_100%)]" },
+      top: { caret: "h-1.5 w-3 [clip-path:polygon(0%_0%,50%_100%,100%_0%)]", caretFill: "[clip-path:polygon(0%_0%,50%_100%,100%_0%)]" }
+    },
+    tabTip: {
+      false: {},
+      true: { content: "rounded-none", trigger: "relative inline-flex size-8 items-center justify-center text-(--vuno-icon-primary) hover:bg-(--vuno-layer-hover-01) focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--vuno-focus)" }
+    }
+  }
+});

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

@@ -0,0 +1,50 @@
+import type { Placement, PortalTarget } from '#vuno/types/base';
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * Alineación del popover respecto a su disparador.
+ *
+ * Vuno aún acepta los nombres antiguos —`top-left`, `bottom-right`,
+ * `left-top`…— y los traduce a los de Floating UI con `mapPopoverAlign`. Aquí
+ * no existen: `Placement` ya es el juego nuevo, así que un nombre heredado
+ * falla al compilar en vez de traducirse en silencio.
+ */
+export type PopoverAlignment = Placement;
+/** Token de fondo de la superficie: la capa contextual o el fondo de página. */
+export type PopoverBackgroundToken = 'background' | 'layer';
+export type PopoverProps = {
+    align?: PopoverAlignment;
+    /**
+     * Recoloca el popover cuando la alineación pedida no cabe.
+     *
+     * En React es `autoAlign` y viene apagado porque allí sigue marcado como
+     * experimental. La guía de diseño dice lo contrario —«popover directions by
+     * default are set to auto»— y el `Toggletip` de este paquete ya abre con
+     * volteo. Se elige la guía, y quien necesite una dirección fija la apaga.
+     */
+    autoAlign?: boolean;
+    backgroundToken?: PopoverBackgroundToken;
+    border?: boolean;
+    /**
+     * Dibuja la punta que une la superficie con el disparador.
+     *
+     * Por defecto la lleva, salvo en `isTabTip`: esa variante se pega al borde
+     * y la punta sobraría. Vuno la marca como obsoleta de cara a la v12, pero
+     * sigue siendo parte del contrato vigente y es la que decide la separación.
+     */
+    caret?: boolean;
+    disabled?: boolean;
+    /**
+     * Separación en píxeles entre disparador y superficie.
+     *
+     * Sin valor se aplica la regla de Vuno: 10 con punta, 4 sin punta y 0 en
+     * `isTabTip`, que va pegado. Equivale a `--vuno-popover-offset`.
+     */
+    distance?: number;
+    dropShadow?: boolean;
+    highContrast?: boolean;
+    isTabTip?: boolean;
+    /** Nombre accesible de la superficie. Obligatorio: se teletransporta fuera de su contexto. */
+    label: string;
+    portal?: PortalTarget;
+    ui?: ComponentUi<'popover'>;
+};

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

@@ -0,0 +1,211 @@
+<script setup>
+import { cloneVNode, computed, nextTick, onBeforeUnmount, onMounted, ref, useId } from "vue";
+import { useAnchor } from "#vuno/composables/internal/useAnchor";
+import { usePortal } from "#vuno/composables/internal/usePortal";
+import { useTheme } from "#vuno/composables/useTheme";
+import { firstElement } from "#vuno/utils/slots";
+defineOptions({ name: "Popover" });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  align: { type: String, required: false, default: "bottom" },
+  autoAlign: { type: Boolean, required: false, default: true },
+  backgroundToken: { type: String, required: false, default: "layer" },
+  border: { type: Boolean, required: false, default: false },
+  caret: { type: Boolean, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  distance: { type: Number, required: false, default: void 0 },
+  dropShadow: { type: Boolean, required: false, default: true },
+  highContrast: { type: Boolean, required: false, default: false },
+  isTabTip: { type: Boolean, required: false, default: false },
+  label: { type: String, required: true },
+  portal: { type: [String, Boolean], required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const slots = defineSlots();
+const CARET_HEIGHT = 6;
+const TABBABLE = "a[href], audio[controls], button, embed, iframe, input, object, select, summary, textarea, video[controls], [tabindex], [contenteditable]";
+const caretEl = ref(null);
+const content = ref(null);
+const placed = ref(props.align);
+const trigger = ref(null);
+const contentId = useId();
+const portalTarget = usePortal(() => props.portal);
+const caret = computed(() => props.caret ?? !props.isTabTip);
+const alignment = computed(() => {
+  if (!props.isTabTip) return props.align;
+  return props.align === "bottom-end" || props.align === "top-end" ? "bottom-end" : "bottom-start";
+});
+const distance = computed(() => props.distance ?? (props.isTabTip ? 0 : caret.value ? 10 : 4));
+const side = computed(() => placed.value.split("-")[0]);
+const ui = useTheme(
+  "popover",
+  () => props.ui,
+  () => ({
+    background: props.backgroundToken,
+    border: String(props.border),
+    dropShadow: String(props.dropShadow),
+    highContrast: String(props.highContrast),
+    open: String(open.value),
+    side: side.value,
+    tabTip: String(props.isTabTip)
+  })
+);
+const opposite = { bottom: "top", left: "right", right: "left", top: "bottom" };
+const { anchor, release } = useAnchor({
+  onPlaced: (position) => pinCaret(position),
+  arrowElement: () => caretEl.value ?? void 0,
+  distance: () => distance.value,
+  flip: () => props.autoAlign,
+  placement: () => alignment.value
+});
+function pinCaret(position) {
+  placed.value = position.placement;
+  const point = position.middlewareData.arrow;
+  if (!caretEl.value || !point) return;
+  const offsets = {
+    bottom: "",
+    left: point.x === void 0 ? "" : `${point.x}px`,
+    right: "",
+    top: point.y === void 0 ? "" : `${point.y}px`
+  };
+  offsets[opposite[side.value]] = `${-CARET_HEIGHT}px`;
+  Object.assign(caretEl.value.style, offsets);
+}
+function close(refocus = false) {
+  if (!open.value) return;
+  open.value = false;
+  release();
+  if (refocus) void nextTick(() => trigger.value?.focus());
+}
+async function show() {
+  if (props.disabled || open.value) return;
+  open.value = true;
+  await nextTick();
+  anchor(trigger.value ?? void 0, content.value ?? void 0);
+}
+function toggle() {
+  if (open.value) close(true);
+  else void show();
+}
+function tabbables(root) {
+  return [...root.querySelectorAll(TABBABLE)].filter((element) => !element.hasAttribute("disabled") && element.getAttribute("tabindex") !== "-1" && element.getAttribute("aria-hidden") !== "true");
+}
+async function leave() {
+  const from = trigger.value;
+  close();
+  await nextTick();
+  if (!from) return;
+  const stops = tabbables(document);
+  stops[stops.indexOf(from) + 1]?.focus();
+}
+function onTriggerClick(event) {
+  event.stopPropagation();
+  toggle();
+}
+function onTriggerKeydown(event) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    toggle();
+    return;
+  }
+  if (event.key !== "Tab" || event.shiftKey || !open.value) return;
+  const first = content.value ? tabbables(content.value)[0] : void 0;
+  if (!first) return void leave();
+  event.preventDefault();
+  first.focus();
+}
+function onContentKeydown(event) {
+  if (event.key !== "Tab" || !content.value) return;
+  const stops = tabbables(content.value);
+  const index = stops.indexOf(document.activeElement);
+  if (event.shiftKey) {
+    if (index > 0) return;
+    event.preventDefault();
+    trigger.value?.focus();
+    return;
+  }
+  if (index !== stops.length - 1) return;
+  event.preventDefault();
+  void leave();
+}
+function contains(target) {
+  return Boolean(target && (trigger.value?.contains(target) || content.value?.contains(target)));
+}
+function onPointerDown(event) {
+  if (open.value && !contains(event.target)) close();
+}
+function onFocusIn(event) {
+  if (open.value && !contains(event.target)) close();
+}
+function onKeydown(event) {
+  if (event.key !== "Escape" || !open.value) return;
+  event.preventDefault();
+  event.stopPropagation();
+  close(true);
+}
+const Trigger = () => {
+  const node = firstElement(slots.default?.({ open: open.value }));
+  if (!node) return null;
+  return cloneVNode(node, {
+    onClick: onTriggerClick,
+    onKeydown: onTriggerKeydown,
+    "aria-controls": contentId,
+    "aria-expanded": open.value ? "true" : "false",
+    "aria-haspopup": "dialog",
+    class: props.isTabTip ? ui.value.trigger : void 0,
+    ref: (el) => {
+      trigger.value = el?.$el ?? el;
+    }
+  });
+};
+onMounted(() => {
+  document.addEventListener("focusin", onFocusIn);
+  document.addEventListener("keydown", onKeydown);
+  document.addEventListener("pointerdown", onPointerDown, true);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("focusin", onFocusIn);
+  document.removeEventListener("keydown", onKeydown);
+  document.removeEventListener("pointerdown", onPointerDown, true);
+  release();
+});
+</script>
+
+<template>
+    <Trigger />
+
+    <Teleport
+        v-if="open"
+        :to="portalTarget"
+    >
+        <div
+            :id="contentId"
+            ref="content"
+            :aria-label="props.label"
+            :class="ui.content"
+            role="dialog"
+            style="position: fixed; top: 0; left: 0"
+            @keydown="onContentKeydown"
+        >
+            <slot
+                :close="close"
+                name="content"
+                :open="open"
+            />
+
+            <!--
+                Dos capas y no una: con `border`, la exterior pinta el filo de
+                1px y la interior el relleno metido hacia dentro. Sin borde las
+                dos comparten color y se ven como un solo triángulo.
+            -->
+            <div
+                v-if="caret"
+                ref="caretEl"
+                aria-hidden="true"
+                :class="ui.caret"
+            >
+                <div :class="ui.caretFill" />
+            </div>
+        </div>
+    </Teleport>
+</template>

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

@@ -0,0 +1,41 @@
+import type { PopoverAlignment, PopoverProps } from './Popover.types.js';
+type __VLS_Props = PopoverProps;
+type __VLS_Slots = {
+    content?: (props: {
+        open: boolean;
+        close: () => void;
+    }) => unknown;
+    default?: (props: {
+        open: boolean;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    align: PopoverAlignment;
+    caret: boolean;
+    backgroundToken: import("./Popover.types.js").PopoverBackgroundToken;
+    border: boolean;
+    dropShadow: boolean;
+    highContrast: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"popover">;
+    autoAlign: boolean;
+    portal: import("../../types/base.js").PortalTarget;
+    distance: number;
+    isTabTip: 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/ProgressBar/ProgressBar.d.vue.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/ProgressBar/ProgressBar.theme.d.ts

@@ -0,0 +1,68 @@
+export declare const progressBarTheme: Record<"progressBar", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly label: "me-0 shrink justify-start";
+            readonly track: "sr-only";
+        };
+        readonly status: "finished";
+        readonly type: "inline";
+    }, {
+        readonly class: {
+            readonly label: "me-0 shrink justify-start";
+            readonly track: "sr-only";
+        };
+        readonly status: "error";
+        readonly type: "inline";
+    }];
+    readonly slots: {
+        readonly bar: "block h-full w-full bg-current text-(--vuno-interactive) transition-transform duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) [transform-origin:0_center] [transform:scaleX(0)] forced-colors:bg-[CanvasText] motion-reduce:transition-none rtl:[transform-origin:100%_center]";
+        readonly helperText: "mt-2 text-xs leading-4 tracking-[0.32px] text-(--vuno-text-secondary)";
+        readonly label: "mb-2 flex min-w-12 justify-between text-sm leading-[1.125rem] font-normal tracking-[0.16px] text-(--vuno-text-primary)";
+        readonly labelText: "overflow-hidden text-ellipsis whitespace-nowrap";
+        readonly liveRegion: "sr-only";
+        readonly root: "w-full";
+        readonly statusIcon: "ms-4 size-4 shrink-0";
+        readonly track: "relative w-full min-w-12 bg-(--vuno-border-subtle-00) forced-colors:bg-[Canvas] forced-colors:outline-solid forced-colors:outline-2 forced-colors:-outline-offset-2 forced-colors:outline-transparent forced-colors:[forced-color-adjust:none]";
+    };
+    readonly variants: {
+        readonly hideLabel: {
+            readonly false: {};
+            readonly true: {
+                readonly label: "sr-only";
+            };
+        };
+        readonly size: {
+            readonly big: {
+                readonly track: "h-2";
+            };
+            readonly small: {
+                readonly track: "h-1";
+            };
+        };
+        readonly status: {
+            readonly active: {};
+            readonly error: {
+                readonly bar: "text-(--vuno-support-error) [transform:scaleX(1)]";
+                readonly helperText: "text-(--vuno-text-error)";
+                readonly statusIcon: "text-(--vuno-support-error)";
+            };
+            readonly finished: {
+                readonly bar: "text-(--vuno-support-success) [transform:scaleX(1)]";
+                readonly statusIcon: "text-(--vuno-support-success)";
+            };
+        };
+        readonly type: {
+            readonly default: {};
+            readonly indented: {
+                readonly helperText: "px-4";
+                readonly label: "px-4";
+            };
+            readonly inline: {
+                readonly helperText: "sr-only";
+                readonly label: "mb-0 me-4 shrink-0";
+                readonly root: "flex items-center";
+                readonly track: "grow basis-0";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,44 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const progressBarTheme = defineTheme("progressBar", {
+  compoundVariants: [
+    /*
+     * Terminado y fallido en línea ocultan la pista: el icono ya comunica el
+     * desenlace y la etiqueta recupera su ancho natural pegada al inicio.
+     */
+    { class: { label: "me-0 shrink justify-start", track: "sr-only" }, status: "finished", type: "inline" },
+    { class: { label: "me-0 shrink justify-start", track: "sr-only" }, status: "error", type: "inline" }
+  ],
+  slots: {
+    bar: "block h-full w-full bg-current text-(--vuno-interactive) transition-transform duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) [transform-origin:0_center] [transform:scaleX(0)] forced-colors:bg-[CanvasText] motion-reduce:transition-none rtl:[transform-origin:100%_center]",
+    helperText: "mt-2 text-xs leading-4 tracking-[0.32px] text-(--vuno-text-secondary)",
+    label: "mb-2 flex min-w-12 justify-between text-sm leading-[1.125rem] font-normal tracking-[0.16px] text-(--vuno-text-primary)",
+    labelText: "overflow-hidden text-ellipsis whitespace-nowrap",
+    liveRegion: "sr-only",
+    root: "w-full",
+    statusIcon: "ms-4 size-4 shrink-0",
+    track: "relative w-full min-w-12 bg-(--vuno-border-subtle-00) forced-colors:bg-[Canvas] forced-colors:outline-solid forced-colors:outline-2 forced-colors:-outline-offset-2 forced-colors:outline-transparent forced-colors:[forced-color-adjust:none]"
+  },
+  variants: {
+    hideLabel: {
+      false: {},
+      true: { label: "sr-only" }
+    },
+    size: {
+      big: { track: "h-2" },
+      small: { track: "h-1" }
+    },
+    status: {
+      active: {},
+      /* Fallido llena la barra en rojo aunque `aria-valuenow` valga 0. */
+      error: { bar: "text-(--vuno-support-error) [transform:scaleX(1)]", helperText: "text-(--vuno-text-error)", statusIcon: "text-(--vuno-support-error)" },
+      finished: { bar: "text-(--vuno-support-success) [transform:scaleX(1)]", statusIcon: "text-(--vuno-support-success)" }
+    },
+    type: {
+      default: {},
+      /* Sangra etiqueta y ayuda 16 px mientras la pista conserva todo el ancho. */
+      indented: { helperText: "px-4", label: "px-4" },
+      /* La etiqueta no se encoge y la pista ocupa el resto de la línea. */
+      inline: { helperText: "sr-only", label: "mb-0 me-4 shrink-0", root: "flex items-center", track: "grow basis-0" }
+    }
+  }
+});

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

@@ -0,0 +1,26 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/** Altura de la pista: 8 px en `big` y 4 px en `small`. */
+export type ProgressBarSize = 'big' | 'small';
+/** Estado del proceso, en el mismo orden público que Vuno. */
+export type ProgressBarStatus = 'active' | 'error' | 'finished';
+/** Disposición de etiqueta, pista y ayuda. */
+export type ProgressBarType = 'default' | 'indented' | 'inline';
+export type ProgressBarProps = {
+    /** Representación textual del avance. En `inline` queda solo para lectores de pantalla. */
+    helperText?: string;
+    /** Oculta visualmente la etiqueta y su icono de estado sin sacarlos del árbol de accesibilidad. */
+    hideLabel?: boolean;
+    /** Nombre de la operación. Da nombre accesible a la barra. */
+    label: string;
+    /** Valor máximo del rango. */
+    max?: number;
+    /** Altura de la pista. */
+    size?: ProgressBarSize;
+    /** Estado del proceso. `finished` y `error` dejan de ser indeterminados aunque falte `value`. */
+    status?: ProgressBarStatus;
+    /** Disposición del componente. */
+    type?: ProgressBarType;
+    ui?: ComponentUi<'progressBar'>;
+    /** Avance actual. Sin un número finito la barra es indeterminada. */
+    value?: number;
+};