@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,23 @@
+import type { ShellUi } from '#vuno/components/Header/Header.types';
+type __VLS_Props = {
+    href?: string;
+    tabIndex?: number;
+    ui?: ShellUi;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: ShellUi;
+    href: string;
+    tabIndex: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,20 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "SkipToContent" });
+const props = defineProps({
+  href: { type: String, required: false, default: "#main-content" },
+  tabIndex: { type: Number, required: false, default: 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme("header", () => props.ui);
+</script>
+
+<template>
+    <a
+        :class="ui.skipToContent"
+        :href="props.href"
+        :tabindex="props.tabIndex"
+    >
+        <slot>Saltar al contenido principal</slot>
+    </a>
+</template>

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

@@ -0,0 +1,23 @@
+import type { ShellUi } from '#vuno/components/Header/Header.types';
+type __VLS_Props = {
+    href?: string;
+    tabIndex?: number;
+    ui?: ShellUi;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: ShellUi;
+    href: string;
+    tabIndex: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/Slider/Slider.d.vue.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/Slider.theme.d.ts

@@ -0,0 +1,67 @@
+export declare const sliderTheme: Record<"slider", {
+    readonly slots: {
+        readonly container: "relative flex w-full items-center gap-4 select-none";
+        readonly field: "w-full min-w-0";
+        readonly filledTrack: "pointer-events-none absolute h-0.5 -translate-y-1/2 bg-(--vuno-layer-selected-inverse) transition-colors duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) group-has-[[role=slider]:focus]:bg-(--vuno-border-interactive) motion-reduce:transition-none forced-colors:bg-[CanvasText]";
+        readonly input: "w-full min-w-0 bg-transparent tabular-nums outline-none [appearance:textfield] disabled:cursor-not-allowed disabled:text-(--vuno-text-disabled) [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none";
+        readonly inputBox: "w-16 shrink-0";
+        readonly inputWrapper: "relative";
+        readonly rangeLabel: "text-sm leading-[1.125rem] tracking-[0.16px] whitespace-nowrap text-(--vuno-text-primary)";
+        readonly slider: "group relative w-full max-w-160 min-w-0 cursor-pointer touch-none py-4";
+        readonly statusMessage: "mt-1 block text-xs leading-4 tracking-[0.32px] text-(--vuno-text-primary)";
+        readonly thumb: "group/thumb absolute z-3 size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--vuno-layer-selected-inverse) shadow-[inset_0_0_0_1px_transparent,inset_0_0_0_2px_transparent] transition-[scale,background-color,box-shadow] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) outline-none hover:scale-[1.4286] focus:scale-[1.4286] focus:bg-(--vuno-interactive) focus:shadow-[inset_0_0_0_2px_var(--vuno-interactive),inset_0_0_0_3px_var(--vuno-layer-01)] active:scale-[1.4286] active:shadow-[inset_0_0_0_2px_var(--vuno-interactive)] motion-reduce:transition-none rtl:translate-x-1/2 forced-colors:outline forced-colors:outline-transparent";
+        readonly thumbIcon: "pointer-events-none block h-6 w-4 fill-(--vuno-layer-selected-inverse) group-hover/thumb:fill-(--vuno-text-secondary) group-focus/thumb:hidden rtl:-scale-x-100";
+        readonly thumbIconFocus: "pointer-events-none hidden h-6 w-4 fill-(--vuno-interactive) group-focus/thumb:block rtl:-scale-x-100";
+        readonly thumbLower: "";
+        readonly thumbUpper: "";
+        readonly track: "absolute h-0.5 w-full -translate-y-1/2 bg-(--vuno-border-subtle-00) before:absolute before:start-1/2 before:-top-[5px] before:block before:h-1 before:w-0.5 before:-translate-x-1/2 before:bg-(--vuno-border-subtle-00) before:content-[''] forced-colors:bg-[CanvasText]";
+        readonly validation: "mt-1 block text-xs leading-4 tracking-[0.32px] text-(--vuno-text-primary)";
+        readonly validationIcon: "pointer-events-none absolute end-4 top-1/2 size-4 -translate-y-1/2 text-(--vuno-support-error)";
+    };
+    readonly variants: {
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly filledTrack: "bg-(--vuno-border-disabled)";
+                readonly inputBox: "border-transparent";
+                readonly rangeLabel: "text-(--vuno-text-disabled)";
+                readonly slider: "cursor-not-allowed";
+                readonly thumb: "bg-(--vuno-border-disabled) shadow-none hover:scale-100 focus:scale-100 focus:bg-(--vuno-border-disabled) focus:shadow-none active:scale-100 active:shadow-none";
+                readonly thumbIcon: "fill-(--vuno-border-disabled)";
+                readonly track: "bg-(--vuno-border-disabled)";
+            };
+        };
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {
+                readonly inputBox: "w-24 pe-12";
+                readonly validation: "text-(--vuno-text-error)";
+            };
+        };
+        readonly range: {
+            readonly false: {};
+            readonly true: {
+                readonly slider: "mx-1";
+                readonly thumb: "size-auto h-6 w-4 -translate-x-0 rounded-none bg-transparent shadow-none before:absolute before:top-1/2 before:z-[-1] before:block before:h-0.5 before:w-1.5 before:-translate-y-1/2 before:bg-(--vuno-background) before:content-[''] hover:scale-100 focus:scale-100 focus:bg-transparent focus:shadow-none focus:before:w-full active:scale-100 active:shadow-none rtl:translate-x-0";
+                readonly thumbLower: "-translate-x-full before:end-0 rtl:translate-x-full";
+                readonly thumbUpper: "before:start-0";
+            };
+        };
+        readonly readOnly: {
+            readonly false: {};
+            readonly true: {
+                readonly input: "cursor-default";
+                readonly inputBox: "bg-transparent";
+                readonly slider: "cursor-default";
+                readonly thumb: "size-0 shadow-none before:hidden hover:scale-100 focus:scale-100 focus:shadow-none";
+            };
+        };
+        readonly warn: {
+            readonly false: {};
+            readonly true: {
+                readonly inputBox: "w-24 pe-12";
+                readonly validationIcon: "text-(--vuno-support-warning)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,93 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const sliderTheme = defineTheme("slider", {
+  slots: {
+    container: "relative flex w-full items-center gap-4 select-none",
+    field: "w-full min-w-0",
+    filledTrack: "pointer-events-none absolute h-0.5 -translate-y-1/2 bg-(--vuno-layer-selected-inverse) transition-colors duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) group-has-[[role=slider]:focus]:bg-(--vuno-border-interactive) motion-reduce:transition-none forced-colors:bg-[CanvasText]",
+    /* `appearance-textfield` retira las flechas del campo numérico: el paso ya lo dan la pista y las flechas del teclado. */
+    input: "w-full min-w-0 bg-transparent tabular-nums outline-none [appearance:textfield] disabled:cursor-not-allowed disabled:text-(--vuno-text-disabled) [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+    inputBox: "w-16 shrink-0",
+    inputWrapper: "relative",
+    rangeLabel: "text-sm leading-[1.125rem] tracking-[0.16px] whitespace-nowrap text-(--vuno-text-primary)",
+    slider: "group relative w-full max-w-160 min-w-0 cursor-pointer touch-none py-4",
+    /* Vuno lo enseña además de anunciarlo: quien ve la pantalla también merece saber que su cifra cambió. */
+    statusMessage: "mt-1 block text-xs leading-4 tracking-[0.32px] text-(--vuno-text-primary)",
+    thumb: "group/thumb absolute z-3 size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--vuno-layer-selected-inverse) shadow-[inset_0_0_0_1px_transparent,inset_0_0_0_2px_transparent] transition-[scale,background-color,box-shadow] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) outline-none hover:scale-[1.4286] focus:scale-[1.4286] focus:bg-(--vuno-interactive) focus:shadow-[inset_0_0_0_2px_var(--vuno-interactive),inset_0_0_0_3px_var(--vuno-layer-01)] active:scale-[1.4286] active:shadow-[inset_0_0_0_2px_var(--vuno-interactive)] motion-reduce:transition-none rtl:translate-x-1/2 forced-colors:outline forced-colors:outline-transparent",
+    /* Vuno dibuja las dos manillas y las intercambia con CSS; en RTL las refleja, que es justo lo que hace `-scale-x-100`. */
+    thumbIcon: "pointer-events-none block h-6 w-4 fill-(--vuno-layer-selected-inverse) group-hover/thumb:fill-(--vuno-text-secondary) group-focus/thumb:hidden rtl:-scale-x-100",
+    thumbIconFocus: "pointer-events-none hidden h-6 w-4 fill-(--vuno-interactive) group-focus/thumb:block rtl:-scale-x-100",
+    thumbLower: "",
+    thumbUpper: "",
+    track: "absolute h-0.5 w-full -translate-y-1/2 bg-(--vuno-border-subtle-00) before:absolute before:start-1/2 before:-top-[5px] before:block before:h-1 before:w-0.5 before:-translate-x-1/2 before:bg-(--vuno-border-subtle-00) before:content-[''] forced-colors:bg-[CanvasText]",
+    validation: "mt-1 block text-xs leading-4 tracking-[0.32px] text-(--vuno-text-primary)",
+    validationIcon: "pointer-events-none absolute end-4 top-1/2 size-4 -translate-y-1/2 text-(--vuno-support-error)"
+  },
+  variants: {
+    disabled: {
+      false: {},
+      /*
+       * Deshabilitado apaga los tres colores a la vez. El tirador deja de
+       * crecer: si sigue reaccionando al ratón, parece que aún se puede
+       * mover.
+       */
+      true: {
+        filledTrack: "bg-(--vuno-border-disabled)",
+        inputBox: "border-transparent",
+        rangeLabel: "text-(--vuno-text-disabled)",
+        slider: "cursor-not-allowed",
+        thumb: "bg-(--vuno-border-disabled) shadow-none hover:scale-100 focus:scale-100 focus:bg-(--vuno-border-disabled) focus:shadow-none active:scale-100 active:shadow-none",
+        thumbIcon: "fill-(--vuno-border-disabled)",
+        track: "bg-(--vuno-border-disabled)"
+      }
+    },
+    /*
+     * Vuno ensancha la caja a 96 px y le reserva 48 px al final cuando
+     * hay icono de estado. Sin eso el icono se monta encima de la cifra.
+     */
+    invalid: {
+      false: {},
+      true: { inputBox: "w-24 pe-12", validation: "text-(--vuno-text-error)" }
+    },
+    /*
+     * El rango cambia la forma del tirador, no solo su tamaño: son dos
+     * manillas planas que se miran, y una pareja de círculos en la misma
+     * posición no deja ver cuál abre el intervalo y cuál lo cierra.
+     *
+     * Por eso la manilla tampoco crece al posarse, enfocarse ni pulsar: el
+     * sistema de origen anula ahí las tres escalas, y una manilla que se
+     * ensancha al enfocarla desplaza el borde con el que marca el extremo
+     * del intervalo.
+     */
+    range: {
+      false: {},
+      true: {
+        slider: "mx-1",
+        thumb: "size-auto h-6 w-4 -translate-x-0 rounded-none bg-transparent shadow-none before:absolute before:top-1/2 before:z-[-1] before:block before:h-0.5 before:w-1.5 before:-translate-y-1/2 before:bg-(--vuno-background) before:content-[''] hover:scale-100 focus:scale-100 focus:bg-transparent focus:shadow-none focus:before:w-full active:scale-100 active:shadow-none rtl:translate-x-0",
+        /* La manilla inferior se apoya en su borde derecho y la superior en el izquierdo, como las puntas de un corchete. */
+        thumbLower: "-translate-x-full before:end-0 rtl:translate-x-full",
+        thumbUpper: "before:start-0"
+      }
+    },
+    readOnly: {
+      false: {},
+      /*
+       * Solo lectura anula la caja del tirador y su pseudoelemento, nada
+       * más: la pista sigue informando y ya no invita a arrastrar. Las dos
+       * manillas del rango **siguen a la vista**, porque son lo que marca
+       * los extremos del intervalo y esconderlas deja el intervalo sin
+       * principio ni final.
+       */
+      true: {
+        input: "cursor-default",
+        inputBox: "bg-transparent",
+        slider: "cursor-default",
+        thumb: "size-0 shadow-none before:hidden hover:scale-100 focus:scale-100 focus:shadow-none"
+      }
+    },
+    /* El aviso deja el mensaje en el texto normal: el triángulo ya avisa y un aviso en rojo se lee como un fallo. */
+    warn: {
+      false: {},
+      true: { inputBox: "w-24 pe-12", validationIcon: "text-(--vuno-support-warning)" }
+    }
+  }
+});

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

@@ -0,0 +1,85 @@
+import type { LabeledControlProps } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+/** Cuál de los dos tiradores del rango se está moviendo. */
+export type SliderHandle = 'lower' | 'upper';
+/**
+ * Lo que viaja con `change` y con `release`.
+ *
+ * `valueUpper` solo existe en el rango, y por eso es opcional: un slider de un
+ * tirador emitiría siempre `undefined` y quien lo escuche tendría que
+ * comprobarlo para nada.
+ */
+export type SliderChange = {
+    value: number;
+    valueUpper?: number;
+};
+/**
+ * Da forma a los extremos de la pista y al aviso del tirador.
+ *
+ * Vuno la llama con `(min, minLabel)` y `(max, maxLabel)` para los extremos y
+ * con `(valor, undefined)` para el aviso, de modo que la misma función escribe
+ * «0 °C» abajo y «24 °C» encima del tirador sin declarar dos formatos.
+ */
+export type SliderFormatLabel = (value: number, label?: string) => string;
+/**
+ * El contrato de Vuno `Slider`.
+ *
+ * Se retiran tres cosas de `LabeledControlProps` a propósito. `helperText`
+ * porque Vuno no da ayuda al slider: debajo de la pista solo cabe el mensaje
+ * de validación, y anunciar un texto que el componente no coloca deja al
+ * consumidor esperando algo que no llega. `size` porque la caja numérica mide
+ * 40 px en cualquier contexto y el slider no tiene escala. Y `ui`, que se
+ * vuelve a declarar contra la clave del tema para que un slot mal escrito falle
+ * al compilar.
+ */
+export type SliderProps = Omit<LabeledControlProps, 'helperText' | 'size' | 'ui'> & {
+    /**
+     * Nombre accesible de la caja numérica.
+     *
+     * Sin él la caja hereda la etiqueta del slider, que es lo correcto cuando
+     * solo hay una. En el rango hay dos y comparten etiqueta, así que cada una
+     * necesita el suyo para poder distinguirse al tabular.
+     */
+    ariaLabelInput?: string;
+    /** Nombre accesible de la caja numérica superior del rango. */
+    ariaLabelInputUpper?: string;
+    formatLabel?: SliderFormatLabel;
+    /**
+     * Retira las cajas numéricas y deja solo la pista.
+     *
+     * El valor no desaparece: pasa a un aviso sobre el tirador, porque un
+     * slider sin cifra visible obliga a adivinar dónde se ha soltado.
+     */
+    hideTextInput?: boolean;
+    /**
+     * `type` de la caja numérica. `number` de serie, como Vuno.
+     *
+     * `text` existe para teclados que no ofrecen signos ni decimales con el
+     * teclado numérico del móvil; el componente sigue interpretando la entrada
+     * como número en los dos casos.
+     */
+    inputType?: 'number' | 'text';
+    max: number;
+    /** Texto que acompaña al extremo derecho, normalmente la unidad. */
+    maxLabel?: string;
+    min: number;
+    minLabel?: string;
+    /** `name` de la caja superior del rango; la inferior usa `name`. */
+    nameUpper?: string;
+    /**
+     * Impide el cambio sin sacar el control del recorrido de foco.
+     *
+     * Vuno además esconde el tirador: la pista sigue mostrando la posición y
+     * deja de ofrecer algo que no se puede arrastrar.
+     */
+    readonly?: boolean;
+    step?: number;
+    /**
+     * Cuántos pasos mueve `Shift` + flecha. Cuatro de serie, como Vuno.
+     *
+     * Vuno recomienda una décima parte del recorrido —`10` en un 0-100—
+     * porque el valor por defecto se queda corto en rangos largos.
+     */
+    stepMultiplier?: number;
+    ui?: ComponentUi<'slider'>;
+};