@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -0,0 +1,147 @@
+/**
+ * `vuno--time-picker`: el campo de la hora y los selectores que lo acompañan.
+ *
+ * Una sola clave sirve a los dos componentes de la familia, como ya ocurre en
+ * `accordion` y en `breadcrumb`, porque en el sistema de origen también son una
+ * sola hoja: el selector solo existe dentro de esta fila y de ella recibe su
+ * alto, su solo lectura y su margen. Separarlos en dos claves habría obligado a
+ * repetir las tres variantes en las dos y a mantenerlas sincronizadas a mano.
+ *
+ * El campo **no reutiliza la caja de `PrimitiveControl`** ni la clave `input`,
+ * por la misma razón que documentan `TextInput`, `Search` y `Select`: esa caja
+ * pinta el borde y el foco en un contenedor y deja el control transparente, que
+ * es la anatomía del combobox, no la de un `<input>` con fondo propio. Aquí el
+ * fondo, el filete inferior y el contorno de foco viven en el propio `<input>`
+ * y en el propio `<select>`, y el envoltorio solo es el ancla del icono de
+ * estado.
+ *
+ * Las dos anchuras del campo son literales del origen y no una escala: 4.875
+ * rem de serie y 6.175 rem cuando hay error o aviso. Los 20.8 px de diferencia
+ * **son** el hueco del icono de estado, que se superpone en vez de empujar el
+ * texto, así que el campo no lleva relleno final añadido cuando el icono
+ * aparece: crece por el lado que ocupa.
+ *
+ * El contorno rojo del estado inválido **cede ante el foco**, como en el
+ * sistema de origen, donde la regla cuelga de `input[data-invalid]:not(:focus)`.
+ * Aquí lo resuelve la precedencia de los modificadores: las utilidades `focus:`
+ * del slot base llegan después que la utilidad suelta de la variante, así que
+ * mientras se escribe manda el azul y el rojo vuelve al salir. Es el mismo
+ * mecanismo que usa `TextInput`.
+ *
+ * Cada declaración de contorno lleva `outline-solid` junto al ancho. En
+ * Tailwind v4 el estilo viaja en `--tw-outline-style` y `outline-none` lo deja
+ * en `none`, de modo que un `outline-2` suelto después de un `outline-none` no
+ * pinta nada.
+ */
+export declare const timePickerTheme: Record<"timePicker", {
+    readonly slots: {
+        /** `vuno--select__arrow`. No recibe puntero: quien pincha ahí pincha el selector. */
+        readonly arrow: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2 text-(--vuno-icon-primary)";
+        /** `vuno--time-picker__input`: el ancla del icono de estado. */
+        readonly field: "relative flex flex-col";
+        /**
+         * `vuno--time-picker__input-field` sobre `vuno--text-input`.
+         *
+         * La tipografía es `code-02` —monoespaciada, 14 px— y no la del resto
+         * de los campos. No es un capricho del origen: en una máscara de dígitos
+         * el ancho constante mantiene los dos puntos en el mismo sitio mientras
+         * se teclea, y `hh:mm` no baila al pasar de `1:00` a `11:00`.
+         */
+        readonly input: "block w-[4.875rem] appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) px-4 py-0 font-mono text-sm leading-5 tracking-[0.32px] text-(--vuno-text-primary) caret-(--vuno-text-primary) outline-none transition-[background-color,outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) placeholder:text-(--vuno-text-placeholder) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) disabled:outline-none disabled:[-webkit-text-fill-color:var(--vuno-text-disabled)] disabled:placeholder:text-(--vuno-text-disabled) motion-reduce:transition-none";
+        /** El rótulo del campo. Existe para que un proyecto pueda recolocarlo. */
+        readonly label: "";
+        /**
+         * `vuno--form-requirement`. El color lo pone el estado: el origen tiñe
+         * de error solo el mensaje del campo inválido y deja el aviso en el
+         * texto normal, porque un aviso no impide guardar.
+         */
+        readonly message: "mt-1 w-full text-xs leading-4 tracking-[0.16px] break-words text-(--vuno-text-primary)";
+        /**
+         * `vuno--time-picker`: la fila del campo y sus selectores.
+         *
+         * Se alinea por abajo y no por el centro porque el campo lleva rótulo
+         * encima y los selectores no: con `items-center` los filetes inferiores
+         * de las tres cajas quedarían a alturas distintas.
+         */
+        readonly picker: "flex items-end";
+        /**
+         * `vuno--select-input` dentro de la fila: ancho por contenido en vez de
+         * al 100 %, interlineado 1 y los mismos 48 px de relleno final que
+         * reserva el chevron.
+         */
+        readonly select: "block w-auto cursor-pointer appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) ps-4 pe-12 text-sm leading-none tracking-[0.16px] text-ellipsis text-(--vuno-text-primary) opacity-100 outline-none transition-[outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) not-disabled:hover:bg-(--vuno-field-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-transparent disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) motion-reduce:transition-none";
+        /**
+         * `vuno--select-input__wrapper`: el ancla del chevron.
+         *
+         * Envuelve solo al control y no a la columna entera porque el rótulo
+         * puede hacerse visible: con el chevron anclado al `vuno--select`, un
+         * rótulo a la vista lo dejaría centrado entre los dos y no dentro de la
+         * caja.
+         */
+        readonly selectField: "relative flex items-center";
+        /** El rótulo del selector, que de serie está oculto a la vista. */
+        readonly selectLabel: "";
+        /**
+         * `vuno--select-option`. La lista desplegada la dibuja el sistema
+         * operativo, pero el fondo y el color del texto se heredan igualmente
+         * del documento: sin esto, en los temas oscuros las opciones salen con
+         * los colores del navegador y no con los del tema.
+         */
+        readonly selectOption: "bg-(--vuno-layer-hover-01) text-(--vuno-text-primary) disabled:text-(--vuno-text-disabled)";
+        /**
+         * `vuno--select` con `vuno--time-picker__select`: la columna del
+         * selector, separada del campo por los 2 px de `spacing-01`.
+         */
+        readonly selectRoot: "ms-0.5 flex flex-col items-start justify-center";
+        /** `vuno--time-picker__error__icon`. El color va en la variante del estado. */
+        readonly stateIcon: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2";
+        /** `vuno--form-item`: rótulo, fila y mensaje en columna. */
+        readonly wrapper: "flex w-full flex-auto flex-col items-start";
+    };
+    readonly variants: {
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly arrow: "text-(--vuno-icon-disabled)";
+            };
+        };
+        readonly invalid: {
+            readonly false: {};
+            readonly true: {
+                readonly input: "w-[6.175rem] outline-solid outline-2 -outline-offset-2 outline-(--vuno-support-error)";
+                readonly message: "text-(--vuno-text-error)";
+                readonly stateIcon: "text-(--vuno-support-error)";
+            };
+        };
+        readonly readOnly: {
+            readonly false: {};
+            readonly true: {
+                readonly arrow: "text-(--vuno-icon-disabled)";
+                readonly input: "border-(--vuno-border-subtle-00) bg-transparent";
+                readonly select: "cursor-default border-(--vuno-border-subtle-00) bg-transparent not-disabled:hover:bg-transparent";
+            };
+        };
+        /** Los tres altos del origen, que campo y selectores comparten. */
+        readonly size: {
+            readonly sm: {
+                readonly input: "h-8";
+                readonly select: "h-8";
+            };
+            readonly md: {
+                readonly input: "h-10";
+                readonly select: "h-10";
+            };
+            readonly lg: {
+                readonly input: "h-12";
+                readonly select: "h-12";
+            };
+        };
+        readonly warn: {
+            readonly false: {};
+            readonly true: {
+                readonly input: "w-[6.175rem]";
+                readonly stateIcon: "text-(--vuno-support-warning)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,112 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const timePickerTheme = defineTheme("timePicker", {
+  slots: {
+    /** `vuno--select__arrow`. No recibe puntero: quien pincha ahí pincha el selector. */
+    arrow: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2 text-(--vuno-icon-primary)",
+    /** `vuno--time-picker__input`: el ancla del icono de estado. */
+    field: "relative flex flex-col",
+    /**
+     * `vuno--time-picker__input-field` sobre `vuno--text-input`.
+     *
+     * La tipografía es `code-02` —monoespaciada, 14 px— y no la del resto
+     * de los campos. No es un capricho del origen: en una máscara de dígitos
+     * el ancho constante mantiene los dos puntos en el mismo sitio mientras
+     * se teclea, y `hh:mm` no baila al pasar de `1:00` a `11:00`.
+     */
+    input: "block w-[4.875rem] appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) px-4 py-0 font-mono text-sm leading-5 tracking-[0.32px] text-(--vuno-text-primary) caret-(--vuno-text-primary) outline-none transition-[background-color,outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) placeholder:text-(--vuno-text-placeholder) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) disabled:outline-none disabled:[-webkit-text-fill-color:var(--vuno-text-disabled)] disabled:placeholder:text-(--vuno-text-disabled) motion-reduce:transition-none",
+    /** El rótulo del campo. Existe para que un proyecto pueda recolocarlo. */
+    label: "",
+    /**
+     * `vuno--form-requirement`. El color lo pone el estado: el origen tiñe
+     * de error solo el mensaje del campo inválido y deja el aviso en el
+     * texto normal, porque un aviso no impide guardar.
+     */
+    message: "mt-1 w-full text-xs leading-4 tracking-[0.16px] break-words text-(--vuno-text-primary)",
+    /**
+     * `vuno--time-picker`: la fila del campo y sus selectores.
+     *
+     * Se alinea por abajo y no por el centro porque el campo lleva rótulo
+     * encima y los selectores no: con `items-center` los filetes inferiores
+     * de las tres cajas quedarían a alturas distintas.
+     */
+    picker: "flex items-end",
+    /**
+     * `vuno--select-input` dentro de la fila: ancho por contenido en vez de
+     * al 100 %, interlineado 1 y los mismos 48 px de relleno final que
+     * reserva el chevron.
+     */
+    select: "block w-auto cursor-pointer appearance-none rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) ps-4 pe-12 text-sm leading-none tracking-[0.16px] text-ellipsis text-(--vuno-text-primary) opacity-100 outline-none transition-[outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) not-disabled:hover:bg-(--vuno-field-hover-01) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:border-transparent disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) motion-reduce:transition-none",
+    /**
+     * `vuno--select-input__wrapper`: el ancla del chevron.
+     *
+     * Envuelve solo al control y no a la columna entera porque el rótulo
+     * puede hacerse visible: con el chevron anclado al `vuno--select`, un
+     * rótulo a la vista lo dejaría centrado entre los dos y no dentro de la
+     * caja.
+     */
+    selectField: "relative flex items-center",
+    /** El rótulo del selector, que de serie está oculto a la vista. */
+    selectLabel: "",
+    /**
+     * `vuno--select-option`. La lista desplegada la dibuja el sistema
+     * operativo, pero el fondo y el color del texto se heredan igualmente
+     * del documento: sin esto, en los temas oscuros las opciones salen con
+     * los colores del navegador y no con los del tema.
+     */
+    selectOption: "bg-(--vuno-layer-hover-01) text-(--vuno-text-primary) disabled:text-(--vuno-text-disabled)",
+    /**
+     * `vuno--select` con `vuno--time-picker__select`: la columna del
+     * selector, separada del campo por los 2 px de `spacing-01`.
+     */
+    selectRoot: "ms-0.5 flex flex-col items-start justify-center",
+    /** `vuno--time-picker__error__icon`. El color va en la variante del estado. */
+    stateIcon: "pointer-events-none absolute top-1/2 end-4 size-4 -translate-y-1/2",
+    /** `vuno--form-item`: rótulo, fila y mensaje en columna. */
+    wrapper: "flex w-full flex-auto flex-col items-start"
+  },
+  variants: {
+    /*
+     * El `<input>` y el `<select>` se apagan solos con `:disabled`. Lo que
+     * no puede saberlo es el chevron, que es un hermano del selector.
+     */
+    disabled: {
+      false: {},
+      true: { arrow: "text-(--vuno-icon-disabled)" }
+    },
+    invalid: {
+      false: {},
+      true: {
+        input: "w-[6.175rem] outline-solid outline-2 -outline-offset-2 outline-(--vuno-support-error)",
+        message: "text-(--vuno-text-error)",
+        stateIcon: "text-(--vuno-support-error)"
+      }
+    },
+    /*
+     * Solo lectura: fondo transparente y filete apagado en las tres cajas,
+     * como en el origen. No cambia el color del texto —el valor se tiene
+     * que poder leer y seleccionar— y el chevron sí se atenúa, porque ahí
+     * ya no hay nada que desplegar.
+     *
+     * El filete es el token contextual del nivel base: dentro de un `Layer`
+     * sube de nivel por cascada sin que el tema lo sepa.
+     */
+    readOnly: {
+      false: {},
+      true: {
+        arrow: "text-(--vuno-icon-disabled)",
+        input: "border-(--vuno-border-subtle-00) bg-transparent",
+        select: "cursor-default border-(--vuno-border-subtle-00) bg-transparent not-disabled:hover:bg-transparent"
+      }
+    },
+    /** Los tres altos del origen, que campo y selectores comparten. */
+    size: {
+      sm: { input: "h-8", select: "h-8" },
+      md: { input: "h-10", select: "h-10" },
+      lg: { input: "h-12", select: "h-12" }
+    },
+    warn: {
+      false: {},
+      true: { input: "w-[6.175rem]", stateIcon: "text-(--vuno-support-warning)" }
+    }
+  }
+});

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

@@ -0,0 +1,65 @@
+import type { ControlSize } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * El tipo del `<input>` de la hora.
+ *
+ * El sistema de origen declara `type?: string` y lo entrega tal cual al campo.
+ * Aquí la unión se estrecha a los dos valores que significan algo en un campo
+ * de hora, porque una cadena libre en un contrato tipado solo sirve para que
+ * `type="email"` compile.
+ *
+ * `text` es el del origen y el único con el que la máscara de `pattern`, el
+ * `maxlength` y los `TimePickerSelect` de al lado tienen sentido. `time`
+ * entrega el control al selector nativo del navegador, que trae su propio
+ * formato, su propio teclado y su propio AM/PM: con él sobran los selectores y
+ * `pattern` deja de aplicarse.
+ *
+ * `TextInputType` no sirve como recurso: ninguno de sus valores es la hora y la
+ * mitad —`email`, `password`, `url`— no tiene sentido en este campo.
+ */
+export type TimePickerType = 'text' | 'time';
+export type TimePickerProps = {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    /** Oculta el rótulo a la vista conservándolo en el árbol de accesibilidad. */
+    hideLabel?: boolean;
+    invalid?: boolean;
+    invalidText?: string;
+    labelText: string;
+    /**
+     * Longitud máxima del texto de la hora. Cinco caracteres, `hh:mm`, como en
+     * el sistema de origen.
+     *
+     * Se escribe como el atributo nativo y no como el `maxLength` del origen
+     * porque es la grafía que ya usa `TextInput`: dos nombres para el mismo
+     * límite dentro del mismo formulario cuestan más que la diferencia con el
+     * original.
+     */
+    maxlength?: number;
+    /**
+     * La expresión con la que el navegador valida el texto al enviar.
+     *
+     * El valor predeterminado es el del sistema de origen y describe el formato
+     * de 12 horas: de `1:00` a `12:59`, con un espacio final opcional. Un
+     * formulario de 24 horas necesita el suyo —por ejemplo
+     * `([01]?[0-9]|2[0-3]):[0-5][0-9]`—, porque este rechaza `13:00` y `00:30`.
+     */
+    pattern?: string;
+    placeholder?: string;
+    /**
+     * Muestra la hora sin permitir cambiarla, y predomina sobre deshabilitado,
+     * el error y el aviso: lo que no se puede corregir no se reclama.
+     *
+     * En el sistema de origen se llama `readOnly`. Aquí conserva la grafía que
+     * ya usan `TextInput`, `Select` y el resto de los controles del paquete.
+     */
+    readonly?: boolean;
+    required?: boolean;
+    /** Alto del campo y de los selectores que lo acompañan: 32, 40 o 48 px. */
+    size?: ControlSize;
+    type?: TimePickerType;
+    ui?: ComponentUi<'timePicker'>;
+    warn?: boolean;
+    warnText?: string;
+};

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

@@ -0,0 +1,113 @@
+<script setup>
+import { computed, provide, toRef, useId } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import { timePickerKey } from "./TimePicker.context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "TimePicker", inheritAttrs: false });
+const model = defineModel({ 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 },
+  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 },
+  maxlength: { type: Number, required: false, default: 5 },
+  pattern: { type: String, required: false, default: "(1[012]|[1-9]):[0-5][0-9](\\s)?" },
+  placeholder: { type: String, required: false, default: "hh:mm" },
+  readonly: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  type: { type: String, required: false, default: "text" },
+  ui: { type: Object, required: false, default: void 0 },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 }
+});
+defineSlots();
+const icons = useIcons();
+const uid = useId();
+const controlId = computed(() => props.id ?? uid);
+const errorId = computed(() => `${controlId.value}-error-msg`);
+const warnId = computed(() => `${controlId.value}-warn-msg`);
+const disabled = computed(() => !props.readonly && props.disabled);
+const invalid = computed(() => !props.readonly && !disabled.value && props.invalid);
+const warn = computed(() => !props.readonly && !invalid.value && !disabled.value && props.warn);
+const ui = useTheme(
+  "timePicker",
+  () => props.ui,
+  () => ({
+    disabled: String(disabled.value),
+    invalid: String(invalid.value),
+    readOnly: String(props.readonly),
+    size: props.size,
+    warn: String(warn.value)
+  })
+);
+const message = computed(() => invalid.value ? props.invalidText : warn.value ? props.warnText : void 0);
+const messageId = computed(() => invalid.value ? errorId.value : warnId.value);
+const describedBy = computed(() => !invalid.value && warn.value && message.value ? warnId.value : void 0);
+const stateIcon = computed(() => invalid.value ? icons.value.notifyError : warn.value ? icons.value.notifyWarning : void 0);
+const pattern = computed(() => props.type === "time" ? void 0 : props.pattern);
+function onInput(event) {
+  model.value = event.target.value;
+}
+provide(timePickerKey, { disabled, readonly: toRef(props, "readonly"), size: toRef(props, "size") });
+</script>
+
+<template>
+    <div :class="ui.wrapper">
+        <FormLabel
+            :disabled="disabled"
+            :for="controlId"
+            :hideLabel="props.hideLabel"
+            :invalid="invalid"
+            :ui="{ label: ui.label }"
+        >
+            {{ props.labelText }}
+        </FormLabel>
+
+        <div :class="ui.picker">
+            <div :class="ui.field">
+                <input
+                    v-bind="$attrs"
+                    :id="controlId"
+                    :aria-describedby="describedBy"
+                    :aria-errormessage="invalid && message ? errorId : void 0"
+                    :aria-invalid="invalid || void 0"
+                    :aria-readonly="props.readonly || void 0"
+                    :class="ui.input"
+                    :data-invalid="invalid || void 0"
+                    :disabled="disabled"
+                    :maxlength="props.maxlength"
+                    :name="props.name"
+                    :pattern="pattern"
+                    :placeholder="props.placeholder"
+                    :readonly="props.readonly"
+                    :required="props.required"
+                    :type="props.type"
+                    :value="model"
+                    @input="onInput"
+                />
+
+                <Icon
+                    v-if="stateIcon"
+                    :class="ui.stateIcon"
+                    :name="stateIcon"
+                />
+            </div>
+
+            <slot />
+        </div>
+
+        <p
+            v-if="message"
+            :id="messageId"
+            :class="ui.message"
+            role="alert"
+        >
+            {{ message }}
+        </p>
+    </div>
+</template>

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

@@ -0,0 +1,40 @@
+import type { TimePickerProps } from './TimePicker.types.js';
+type __VLS_Props = TimePickerProps;
+type __VLS_Slots = {
+    /** Los `TimePickerSelect` de la fila: el periodo AM/PM y la zona horaria. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("../../types/control.js").ControlSize;
+    invalid: boolean;
+    warn: boolean;
+    type: import("./TimePicker.types.js").TimePickerType;
+    placeholder: string;
+    name: string;
+    hideLabel: boolean;
+    readonly: boolean;
+    pattern: string;
+    id: string;
+    ui: import("../../types/slots.js").ComponentUi<"timePicker">;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    maxlength: 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/TimePickerSelect/TimePickerSelect.d.vue.ts

@@ -0,0 +1,21 @@
+import type { OptionValue } from '#vuno/types/control';
+import type { TimePickerSelectProps } from './TimePickerSelect.types.js';
+type __VLS_Props = TimePickerSelectProps;
+type __VLS_ModelProps = {
+    modelValue?: OptionValue | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: OptionValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: OptionValue | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    name: string;
+    hideLabel: boolean;
+    readonly: boolean;
+    id: string;
+    ui: import("../../types/slots.js").ComponentUi<"timePicker">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,43 @@
+import type { OptionItem, OptionValue } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+export type TimePickerSelectProps = {
+    id?: string;
+    name?: string;
+    /**
+     * Sin declarar, hereda el `disabled` del `TimePicker`. Declarado, manda
+     * sobre el contenedor en los dos sentidos.
+     */
+    disabled?: boolean;
+    /**
+     * Oculta el rótulo a la vista conservándolo en el árbol de accesibilidad, y
+     * está activo de serie: en una fila de hora el periodo y la zona van sin
+     * rótulo visible, porque el del campo ya nombra el conjunto.
+     *
+     * El rótulo sigue existiendo. El sistema de origen nombra estos selectores
+     * con un `aria-label` fijo —«open list of options»— que es el mismo para los
+     * dos y no dice cuál es cuál; un `<label>` de verdad los distingue y además
+     * los relaciona con el control como espera cualquier lector de pantalla.
+     */
+    hideLabel?: boolean;
+    /**
+     * Las opciones del desplegable.
+     *
+     * Entran por datos y no por slot porque el contenido de un `<select>` solo
+     * puede ser `<option>` y `<optgroup>`; es el mismo contrato de opción que ya
+     * usan `Select` y el resto de las listas del paquete, del que este selector
+     * consume `disabled`, `label` y `value`.
+     */
+    items: OptionItem[];
+    labelText: string;
+    /**
+     * Sin declarar, hereda el `readonly` del `TimePicker`.
+     *
+     * `<select>` no admite `readonly`, así que se reproduce como en el sistema
+     * de origen: el control conserva foco y contraste, se anuncia con
+     * `aria-readonly`, y se bloquean el despliegue con puntero, las teclas que
+     * lo abren y el salto por letra inicial.
+     */
+    readonly?: boolean;
+    ui?: ComponentUi<'timePicker'>;
+};
+export type TimePickerSelectValue = OptionValue;

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

@@ -0,0 +1,106 @@
+<script setup>
+import { computed, inject, useAttrs, useId } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import { fromOptionKey, toOptionKey } from "#vuno/components/Dropdown/option";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import { timePickerKey } from "#vuno/components/TimePicker/TimePicker.context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "TimePickerSelect", inheritAttrs: false });
+const model = defineModel({ type: [Boolean, null, Number, String], skipCheck: true, ...{ 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: void 0 },
+  hideLabel: { type: Boolean, required: false, default: true },
+  items: { type: Array, required: true },
+  labelText: { type: String, required: true },
+  readonly: { type: Boolean, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const attrs = useAttrs();
+const context = inject(timePickerKey, void 0);
+const icons = useIcons();
+const uid = useId();
+const controlId = computed(() => props.id ?? uid);
+const readonly = computed(() => props.readonly ?? context?.readonly.value ?? false);
+const disabled = computed(() => !readonly.value && (props.disabled ?? context?.disabled.value ?? false));
+const size = computed(() => context?.size.value ?? "md");
+const ui = useTheme(
+  "timePicker",
+  () => props.ui,
+  () => ({
+    disabled: String(disabled.value),
+    readOnly: String(readonly.value),
+    size: size.value
+  })
+);
+const encodedValue = computed(() => model.value === void 0 ? "" : toOptionKey(model.value));
+const selected = computed(() => props.items.find((option) => toOptionKey(option.value) === encodedValue.value));
+const title = computed(() => attrs.title ?? selected.value?.label ?? props.items[0]?.label);
+const openKeys = /* @__PURE__ */ new Set([" ", "ArrowDown", "ArrowUp"]);
+function onChange(event) {
+  const target = event.target;
+  if (readonly.value) {
+    target.value = encodedValue.value;
+    return;
+  }
+  if (target.value === "") {
+    model.value = void 0;
+    return;
+  }
+  const match = props.items.find((option) => toOptionKey(option.value) === target.value);
+  model.value = match ? match.value : fromOptionKey(target.value);
+}
+function onKeydown(event) {
+  if (readonly.value && openKeys.has(event.key)) event.preventDefault();
+}
+function onMousedown(event) {
+  if (!readonly.value) return;
+  event.preventDefault();
+  event.target?.focus();
+}
+</script>
+
+<template>
+    <div :class="ui.selectRoot">
+        <FormLabel
+            :disabled="disabled"
+            :for="controlId"
+            :hideLabel="props.hideLabel"
+            :ui="{ label: ui.selectLabel }"
+        >
+            {{ props.labelText }}
+        </FormLabel>
+
+        <div :class="ui.selectField">
+            <select
+                v-bind="$attrs"
+                :id="controlId"
+                :aria-readonly="readonly || void 0"
+                :class="ui.select"
+                :disabled="disabled"
+                :name="props.name"
+                :title="title"
+                :value="encodedValue"
+                @change="onChange"
+                @keydown="onKeydown"
+                @mousedown="onMousedown"
+            >
+                <option
+                    v-for="item in props.items"
+                    :key="toOptionKey(item.value)"
+                    :class="ui.selectOption"
+                    :disabled="item.disabled"
+                    :value="toOptionKey(item.value)"
+                >
+                    {{ item.label }}
+                </option>
+            </select>
+
+            <Icon
+                :class="ui.arrow"
+                :name="icons.dropdownOpen"
+            />
+        </div>
+    </div>
+</template>