@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -0,0 +1,414 @@
+<script setup>
+import { computed, ref, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { cn } from "#vuno/utils/theme";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import Tooltip from "#vuno/components/Tooltip/Tooltip.vue";
+import SliderThumb from "./internal/SliderThumb/SliderThumb.vue";
+import PrimitiveControl from "#vuno/primitives/PrimitiveControl/PrimitiveControl.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "Slider" });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const valueUpper = defineModel("valueUpper", { type: null, ...{ default: void 0 } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  hideLabel: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  invalidText: { type: String, required: false, default: void 0 },
+  labelText: { type: String, required: true },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 },
+  ariaLabelInput: { type: String, required: false, default: void 0 },
+  ariaLabelInputUpper: { type: String, required: false, default: void 0 },
+  formatLabel: { type: Function, required: false, default: void 0 },
+  hideTextInput: { type: Boolean, required: false, default: false },
+  inputType: { type: String, required: false, default: "number" },
+  max: { type: Number, required: true },
+  maxLabel: { type: String, required: false, default: void 0 },
+  min: { type: Number, required: true },
+  minLabel: { type: String, required: false, default: void 0 },
+  nameUpper: { type: String, required: false, default: void 0 },
+  readonly: { type: Boolean, required: false, default: false },
+  step: { type: Number, required: false, default: 1 },
+  stepMultiplier: { type: Number, required: false, default: 4 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["change", "release"]);
+const activeHandle = ref("lower");
+const corrected = ref(void 0);
+const drafts = ref({});
+const sliderEl = ref(null);
+let dragging;
+const ui = useTheme(
+  "slider",
+  () => props.ui,
+  () => ({
+    disabled: String(props.disabled),
+    invalid: String(props.invalid),
+    range: String(valueUpper.value !== void 0),
+    readOnly: String(props.readonly),
+    warn: String(!props.invalid && props.warn)
+  })
+);
+const fallbackId = useId();
+const range = computed(() => valueUpper.value !== void 0);
+const controlId = computed(() => props.id ?? fallbackId);
+const labelId = computed(() => `${controlId.value}-label`);
+const messageId = computed(() => `${controlId.value}-message`);
+const describedBy = computed(() => message.value ? messageId.value : void 0);
+const lower = computed(() => clamp(model.value ?? props.min, props.min, range.value ? valueUpper.value ?? props.max : props.max));
+const upper = computed(() => range.value ? clamp(valueUpper.value ?? props.max, lower.value, props.max) : void 0);
+const message = computed(() => props.invalid ? props.invalidText : props.warn ? props.warnText : void 0);
+const handles = computed(() => {
+  const lowerHandle = {
+    id: range.value ? void 0 : controlId.value,
+    ariaLabel: range.value ? props.ariaLabelInput : void 0,
+    ariaLabelledby: range.value ? void 0 : labelId.value,
+    class: cn(ui.value.thumb, ui.value.thumbLower),
+    iconClass: ui.value.thumbIcon,
+    iconFocusClass: ui.value.thumbIconFocus,
+    percent: percentOf(lower.value),
+    position: "lower",
+    text: format(lower.value),
+    value: lower.value,
+    valueMax: range.value ? upper.value ?? props.max : props.max,
+    valueMin: props.min
+  };
+  if (!range.value) return [lowerHandle];
+  return [
+    lowerHandle,
+    {
+      id: void 0,
+      ariaLabel: props.ariaLabelInputUpper,
+      ariaLabelledby: void 0,
+      class: cn(ui.value.thumb, ui.value.thumbUpper),
+      iconClass: ui.value.thumbIcon,
+      iconFocusClass: ui.value.thumbIconFocus,
+      percent: percentOf(upper.value ?? props.max),
+      position: "upper",
+      text: format(upper.value ?? props.max),
+      value: upper.value ?? props.max,
+      valueMax: props.max,
+      valueMin: lower.value
+    }
+  ];
+});
+const fill = computed(() => {
+  const start = range.value ? percentOf(lower.value) : 0;
+  const end = percentOf(range.value ? upper.value ?? props.max : lower.value);
+  return { inlineSize: `${Math.max(end - start, 0)}%`, insetInlineStart: `${start}%` };
+});
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function format(value, label) {
+  return props.formatLabel ? props.formatLabel(value, label) : `${value}${label ?? ""}`;
+}
+function round(value) {
+  const decimals = (props.step.toString().split(".")[1] ?? "").length;
+  return Number(value.toFixed(decimals));
+}
+function percentOf(value) {
+  const span = props.max - props.min;
+  return span <= 0 ? 0 : clamp((value - props.min) / span, 0, 1) * 100;
+}
+function boundsFor(handle) {
+  if (!range.value) return { max: props.max, min: props.min };
+  return handle === "upper" ? { max: props.max, min: lower.value } : { max: upper.value ?? props.max, min: props.min };
+}
+function payload() {
+  return { value: lower.value, valueUpper: upper.value };
+}
+function apply(handle, next) {
+  const bounds = boundsFor(handle);
+  const value = round(clamp(next, bounds.min, bounds.max));
+  if (handle === "upper") {
+    if (valueUpper.value === value) return;
+    valueUpper.value = value;
+  } else {
+    if (model.value === value) return;
+    model.value = value;
+  }
+  emit("change", payload());
+}
+function valueFromPointer(clientX) {
+  const element = sliderEl.value;
+  if (!element) return props.min;
+  const rect = element.getBoundingClientRect();
+  const width = rect.width || 1;
+  const rtl = getComputedStyle(element).direction === "rtl";
+  const offset = rtl ? rect.right - clientX : clientX - rect.left;
+  const percent = clamp(offset / width, 0, 1);
+  const steps = Math.max(Math.floor((props.max - props.min) / props.step) + 1, 2);
+  const index = Math.round(percent * (steps - 1));
+  return index === steps - 1 ? props.max : round(props.min + props.step * index);
+}
+function handleFor(value) {
+  if (!range.value) return "lower";
+  return Math.abs(value - lower.value) <= Math.abs(value - (upper.value ?? props.max)) ? "lower" : "upper";
+}
+function focusHandle(handle) {
+  const thumbs = sliderEl.value?.querySelectorAll('[role="slider"]');
+  thumbs?.[handle === "upper" ? 1 : 0]?.focus();
+}
+function onPointerdown(event) {
+  if (props.disabled || props.readonly || event.button !== 0) return;
+  const next = valueFromPointer(event.clientX);
+  const handle = handleFor(next);
+  activeHandle.value = handle;
+  corrected.value = void 0;
+  dragging = event.pointerId;
+  sliderEl.value?.setPointerCapture(event.pointerId);
+  focusHandle(handle);
+  apply(handle, next);
+  event.preventDefault();
+}
+function onPointermove(event) {
+  if (dragging !== event.pointerId) return;
+  apply(activeHandle.value, valueFromPointer(event.clientX));
+}
+function onPointerup(event) {
+  if (dragging !== event.pointerId) return;
+  dragging = void 0;
+  if (sliderEl.value?.hasPointerCapture(event.pointerId)) sliderEl.value.releasePointerCapture(event.pointerId);
+  emit("release", payload());
+}
+function onKeydown(event) {
+  if (props.disabled || props.readonly) return;
+  corrected.value = void 0;
+  const handle = activeHandle.value;
+  const bounds = boundsFor(handle);
+  if (event.key === "End") {
+    event.preventDefault();
+    apply(handle, bounds.max);
+    return;
+  }
+  if (event.key === "Home") {
+    event.preventDefault();
+    apply(handle, bounds.min);
+    return;
+  }
+  const direction = ["ArrowDown", "ArrowLeft"].includes(event.key) ? -1 : ["ArrowRight", "ArrowUp"].includes(event.key) ? 1 : 0;
+  if (direction === 0) return;
+  const current = handle === "upper" ? upper.value ?? props.max : lower.value;
+  const delta = direction * props.step * (event.shiftKey ? props.stepMultiplier : 1);
+  const base = delta > 0 ? Math.round(current / props.step) * props.step : current;
+  event.preventDefault();
+  apply(handle, round(base + delta));
+}
+function inputValue(handle) {
+  const draft = drafts.value[handle];
+  if (draft !== void 0) return draft;
+  return String(handle === "upper" ? upper.value ?? props.max : lower.value);
+}
+function commitInput(handle, typed) {
+  if (props.disabled || props.readonly) return;
+  const bounds = boundsFor(handle);
+  const adjusted = clamp(typed, bounds.min, bounds.max);
+  corrected.value = adjusted === typed ? void 0 : typed;
+  delete drafts.value[handle];
+  apply(handle, adjusted);
+}
+function onInput(handle, event) {
+  const raw = event.target.value;
+  const typed = Number.parseFloat(raw);
+  corrected.value = void 0;
+  if (Number.isNaN(typed) || typed < props.min || typed > props.max) {
+    drafts.value[handle] = raw;
+    return;
+  }
+  commitInput(handle, typed);
+}
+function onInputCommit(handle, event) {
+  const typed = Number.parseFloat(event.target.value);
+  if (Number.isNaN(typed)) {
+    delete drafts.value[handle];
+    corrected.value = void 0;
+    return;
+  }
+  commitInput(handle, typed);
+}
+</script>
+
+<template>
+    <div :class="ui.field">
+        <FormLabel
+            :id="labelId"
+            :disabled="props.disabled"
+            :for="controlId"
+            :hideLabel="props.hideLabel"
+            :invalid="props.invalid"
+        >
+            {{ props.labelText }}
+        </FormLabel>
+
+        <div :class="ui.container">
+            <div
+                v-if="range && !props.hideTextInput"
+                :class="ui.inputWrapper"
+            >
+                <PrimitiveControl :ui="{ root: ui.inputBox }">
+                    <input
+                        :aria-describedby="describedBy"
+                        :aria-invalid="props.invalid || void 0"
+                        :aria-label="props.ariaLabelInput"
+                        :aria-labelledby="props.ariaLabelInput ? void 0 : labelId"
+                        :class="ui.input"
+                        :disabled="props.disabled"
+                        :max="props.inputType === 'number' ? props.max : void 0"
+                        :min="props.inputType === 'number' ? props.min : void 0"
+                        :name="props.name"
+                        :readonly="props.readonly"
+                        :required="props.required"
+                        :step="props.inputType === 'number' ? props.step : void 0"
+                        :type="props.inputType"
+                        :value="inputValue('lower')"
+                        @blur="onInputCommit('lower', $event)"
+                        @input="onInput('lower', $event)"
+                        @keydown.enter="onInputCommit('lower', $event)"
+                    />
+                </PrimitiveControl>
+            </div>
+
+            <span :class="ui.rangeLabel">{{ format(props.min, props.minLabel) }}</span>
+
+            <div
+                ref="sliderEl"
+                :class="ui.slider"
+                :data-invalid="props.invalid || void 0"
+                role="presentation"
+                :tabindex="-1"
+                @keydown="onKeydown"
+                @pointercancel="onPointerup"
+                @pointerdown="onPointerdown"
+                @pointermove="onPointermove"
+                @pointerup="onPointerup"
+            >
+                <div :class="ui.track" />
+
+                <div
+                    :class="ui.filledTrack"
+                    :style="fill"
+                />
+
+                <template
+                    v-for="handle in handles"
+                    :key="handle.position"
+                >
+                    <!-- Sin caja numérica el valor solo se ve en el aviso, así que ahí sí envuelve. -->
+                    <Tooltip
+                        v-if="props.hideTextInput"
+                        :delay="0"
+                        :disabled="props.disabled"
+                        :text="handle.text"
+                    >
+                        <!--
+                            El nombre viaja escrito en la etiqueta y no solo dentro del tirador:
+                            el aviso clona el nodo del disparador y, al hacerlo, solo conserva los
+                            atributos que ya venían puestos en él. Sin esto, el tirador perdía su
+                            `aria-labelledby` y se quedaba sin nombre accesible en cuanto se ocultaba
+                            la caja numérica.
+                        -->
+                        <SliderThumb
+                            :aria-label="handle.ariaLabel"
+                            :aria-labelledby="handle.ariaLabelledby"
+                            :range="range"
+                            :tabbable="!props.disabled && !props.readonly"
+                            :thumb="handle"
+                            @focus="activeHandle = handle.position"
+                        />
+                    </Tooltip>
+
+                    <SliderThumb
+                        v-else
+                        :describedBy="describedBy"
+                        :range="range"
+                        :tabbable="!props.disabled && !props.readonly"
+                        :thumb="handle"
+                        @focus="activeHandle = handle.position"
+                    />
+                </template>
+            </div>
+
+            <span :class="ui.rangeLabel">{{ format(props.max, props.maxLabel) }}</span>
+
+            <div
+                v-if="!props.hideTextInput"
+                :class="ui.inputWrapper"
+            >
+                <PrimitiveControl :ui="{ root: ui.inputBox }">
+                    <input
+                        :aria-describedby="describedBy"
+                        :aria-invalid="props.invalid || void 0"
+                        :aria-label="range ? props.ariaLabelInputUpper : props.ariaLabelInput"
+                        :aria-labelledby="range || props.ariaLabelInput ? void 0 : labelId"
+                        :class="ui.input"
+                        :disabled="props.disabled"
+                        :max="props.inputType === 'number' ? props.max : void 0"
+                        :min="props.inputType === 'number' ? props.min : void 0"
+                        :name="range ? props.nameUpper : props.name"
+                        :readonly="props.readonly"
+                        :required="props.required"
+                        :step="props.inputType === 'number' ? props.step : void 0"
+                        :type="props.inputType"
+                        :value="inputValue(range ? 'upper' : 'lower')"
+                        @blur="onInputCommit(range ? 'upper' : 'lower', $event)"
+                        @input="onInput(range ? 'upper' : 'lower', $event)"
+                        @keydown.enter="onInputCommit(range ? 'upper' : 'lower', $event)"
+                    />
+                </PrimitiveControl>
+
+                <Icon
+                    v-if="props.invalid"
+                    :class="ui.validationIcon"
+                    name="carbon:warning-filled"
+                />
+
+                <Icon
+                    v-else-if="props.warn"
+                    :class="ui.validationIcon"
+                    name="carbon:warning-alt-filled"
+                />
+            </div>
+
+            <!-- Sin caja numérica el valor sigue viajando con el formulario. -->
+            <input
+                v-if="props.hideTextInput && props.name"
+                :name="props.name"
+                type="hidden"
+                :value="lower"
+            />
+
+            <input
+                v-if="props.hideTextInput && range && props.nameUpper"
+                :name="props.nameUpper"
+                type="hidden"
+                :value="upper"
+            />
+        </div>
+
+        <div
+            v-if="message"
+            :id="messageId"
+            :class="ui.validation"
+        >
+            {{ message }}
+        </div>
+
+        <!--
+            El texto está escrito aquí y no en `theme/messages.ts` porque añadir
+            una clave obliga a tocar `types/theme.ts`, que pertenece a otra
+            tarea. Queda anotado: su sitio es el catálogo de mensajes.
+        -->
+        <div
+            v-if="corrected !== void 0"
+            :class="ui.statusMessage"
+            role="alert"
+        >
+            El valor {{ corrected }} se ajustó al permitido más próximo.
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,50 @@
+import type { SliderChange, SliderProps } from './Slider.types.js';
+type __VLS_Props = SliderProps;
+type __VLS_ModelProps = {
+    modelValue?: number | undefined;
+    /**
+         * El segundo valor convierte el control en un rango.
+         *
+         * Vuno lo llama `unstable_valueUpper` porque su implementación en React
+         * todavía se mueve; aquí es `v-model:valueUpper`, el nombre de la
+         * capacidad y no el del estado de aquel código. La variante sí está
+         * documentada y estabilizada en el sistema de diseño.
+         */
+    'valueUpper'?: number | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: SliderChange) => any;
+    "update:modelValue": (value: number | undefined) => any;
+    release: (args_0: SliderChange) => any;
+    "update:valueUpper": (value: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((args_0: SliderChange) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+    onRelease?: ((args_0: SliderChange) => any) | undefined;
+    "onUpdate:valueUpper"?: ((value: number | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    invalid: boolean;
+    warn: boolean;
+    name: string;
+    hideLabel: boolean;
+    step: number;
+    readonly: boolean;
+    id: string;
+    ui: import("../../types/slots.js").ComponentUi<"slider">;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    ariaLabelInput: string;
+    ariaLabelInputUpper: string;
+    formatLabel: import("./Slider.types.js").SliderFormatLabel;
+    hideTextInput: boolean;
+    inputType: "number" | "text";
+    maxLabel: string;
+    minLabel: string;
+    nameUpper: string;
+    stepMultiplier: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Slider/handles.d.ts

@@ -0,0 +1,38 @@
+import type { SliderHandle } from './Slider.types.js';
+/**
+ * Todo lo que un tirador necesita para pintarse y anunciarse.
+ *
+ * Vive aquí y no en `Slider.types.ts` porque no es contrato público: lo
+ * calcula el componente y lo consume su pieza interna, y publicarlo invitaría
+ * a construirlo desde fuera.
+ */
+export type SliderThumbView = {
+    id?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    class: string;
+    iconClass: string;
+    iconFocusClass: string;
+    percent: number;
+    position: SliderHandle;
+    text: string;
+    value: number;
+    valueMax: number;
+    valueMin: number;
+};
+/**
+ * Las dos manillas del rango, copiadas de `SliderHandles.tsx` de Vuno.
+ *
+ * Son trazados y no iconos del catálogo: Vuno las dibuja a medida en el
+ * propio componente porque no existen en `upstream/icons`, y pedirlas a
+ * `@nuxt/icon` daría un icono parecido pero no el mismo. El lienzo es de
+ * 16 × 24, con la punta hacia el centro del intervalo.
+ *
+ * Cada manilla tiene dos versiones. La segunda es la de foco: repite el
+ * trazado y le añade el marco que Vuno enseña al enfocar, y el intercambio
+ * lo hace el tema con `group-focus`, no una rama en la plantilla.
+ */
+export declare const handlePaths: Record<SliderHandle, {
+    base: string[];
+    focus: string[];
+}>;

package/dist/runtime/app/components/Slider/handles.js

@@ -0,0 +1,10 @@
+export const handlePaths = {
+  lower: {
+    base: ["M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"],
+    focus: ["M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z", "M15.08 0H16v6.46h-.92z", "M0 0h.92v24H0zM15.08 0H16v24h-.92z", "M0 .92V0h16v.92zM0 24v-.92h16V24z"]
+  },
+  upper: {
+    base: ["M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"],
+    focus: ["M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z", "M.92 24H0v-6.46h.92z", "M16 24h-.92V0H16zM.92 24H0V0h.92z", "M16 23.08V24H0v-.92zM16 0v.92H0V0z"]
+  }
+};

package/dist/runtime/app/components/Slider/internal/SliderThumb/SliderThumb.d.vue.ts

@@ -0,0 +1,16 @@
+import type { SliderThumbView } from '#vuno/components/Slider/handles';
+type Props = {
+    /** El mensaje de validación que describe el control, si lo hay. */
+    describedBy?: string;
+    /** Dibuja las manillas del rango en lugar del círculo de un solo valor. */
+    range: boolean;
+    /** Deshabilitado y solo lectura lo sacan del recorrido de foco. */
+    tabbable?: boolean;
+    thumb: SliderThumbView;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    describedBy: string;
+    tabbable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Slider/internal/SliderThumb/SliderThumb.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { handlePaths } from "#vuno/components/Slider/handles";
+defineOptions({ name: "SliderThumb" });
+const props = defineProps({
+  describedBy: { type: String, required: false, default: void 0 },
+  range: { type: Boolean, required: true },
+  tabbable: { type: Boolean, required: false, default: true },
+  thumb: { type: Object, required: true }
+});
+</script>
+
+<template>
+    <div
+        :id="props.thumb.id"
+        :aria-describedby="props.describedBy"
+        :aria-label="props.thumb.ariaLabel"
+        :aria-labelledby="props.thumb.ariaLabelledby"
+        aria-orientation="horizontal"
+        :aria-valuemax="props.thumb.valueMax"
+        :aria-valuemin="props.thumb.valueMin"
+        :aria-valuenow="props.thumb.value"
+        :aria-valuetext="props.thumb.text"
+        :class="props.thumb.class"
+        :data-handle="props.thumb.position"
+        role="slider"
+        :style="{ insetInlineStart: `${props.thumb.percent}%` }"
+        :tabindex="props.tabbable ? 0 : void 0"
+    >
+        <template v-if="props.range">
+            <svg
+                :class="props.thumb.iconClass"
+                viewBox="0 0 16 24"
+            >
+                <path
+                    v-for="path in handlePaths[props.thumb.position].base"
+                    :key="path"
+                    :d="path"
+                />
+            </svg>
+
+            <svg
+                :class="props.thumb.iconFocusClass"
+                viewBox="0 0 16 24"
+            >
+                <path
+                    v-for="path in handlePaths[props.thumb.position].focus"
+                    :key="path"
+                    :d="path"
+                />
+            </svg>
+        </template>
+    </div>
+</template>

package/dist/runtime/app/components/Slider/internal/SliderThumb/SliderThumb.vue.d.ts

@@ -0,0 +1,16 @@
+import type { SliderThumbView } from '#vuno/components/Slider/handles';
+type Props = {
+    /** El mensaje de validación que describe el control, si lo hay. */
+    describedBy?: string;
+    /** Dibuja las manillas del rango en lugar del círculo de un solo valor. */
+    range: boolean;
+    /** Deshabilitado y solo lectura lo sacan del recorrido de foco. */
+    tabbable?: boolean;
+    thumb: SliderThumbView;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    describedBy: string;
+    tabbable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,17 @@
+import type { StackProps } from './Stack.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<StackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StackProps> & Readonly<{}>, {
+    orientation: import("./Stack.types.js").StackOrientation;
+    gap: import("./Stack.types.js").StackGapStep | string;
+    as: import("vue").Component | 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/Stack/Stack.types.d.ts

@@ -0,0 +1,44 @@
+import type { Component } from 'vue';
+/**
+ * Los trece pasos de la escala espacial de Vuno —`$spacing-01` a
+ * `$spacing-13`, de 2 px a 160 px—, que es lo que `gap` acepta como número.
+ *
+ * Vuno publica en React `SPACING_STEPS = Array.from({ length: spacing.length
+ * - 1 }, (_, step) => step + 1)`, que se queda en doce: el `- 1` sobra y deja
+ * fuera el paso 13. Su propia hoja de estilos sí genera `.vuno--stack-scale-13`
+ * recorriendo el mapa completo, así que el paso existe y solo el `propTypes` de
+ * React lo rechaza. Aquí se admiten los trece: el token
+ * `--vuno-spacing-13` está declarado y `DESIGN.md` cuenta la escala con sus
+ * trece valores.
+ */
+export type StackGapStep = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
+/** Eje en el que se apilan los hijos. Vuno apila en vertical de serie. */
+export type StackOrientation = 'horizontal' | 'vertical';
+export type StackProps = {
+    /**
+     * Raíz alternativa. Una pila suele ser la lista, la sección o el grupo de
+     * campos que ya existía en el marcado, y forzar un `div` obligaría a
+     * envolverla solo para recuperar la semántica.
+     *
+     * Con `ul` u `ol`, declara además `role="list"`: al cambiar el `display` a
+     * `grid` algunos lectores de pantalla dejan de anunciar la lista.
+     */
+    as?: Component | string;
+    /**
+     * Separación entre hijos. Un número es un paso de la escala espacial de
+     * Vuno y se resuelve al token `--vuno-spacing-NN`; una cadena es un valor
+     * CSS propio —`'1.5rem'`, `'clamp(1rem, 2vw, 2rem)'`— que se usa tal cual.
+     *
+     * Sin declarar no hay separación, como en Vuno: `--vuno-stack-gap` cae a su
+     * valor de reserva `0`. Una pila no decide cuánto aire necesita el contenido
+     * que la usa.
+     *
+     * En plantilla, un paso se pasa como número: `:gap="5"`. `gap="5"` llegaría
+     * como cadena, y por comodidad se acepta —una cadena de solo dígitos dentro
+     * del rango se lee como paso—, porque un número sin unidad tampoco sería un
+     * `gap` válido en CSS. Un valor propio siempre lleva unidad y no entra en
+     * esa lectura.
+     */
+    gap?: StackGapStep | string;
+    orientation?: StackOrientation;
+};