@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -0,0 +1,29 @@
+import type { ToastNotificationProps } from './ToastNotification.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ToastNotificationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<ToastNotificationProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    title: string;
+    kind: import("../InlineNotification/InlineNotification.types.js").NotificationKind;
+    lowContrast: boolean;
+    hideCloseButton: boolean;
+    caption: string;
+    subtitle: string;
+    ui: import("../../types/slots.js").ComponentUi<"inlineNotification">;
+    closeButtonLabel: string;
+    statusIconDescription: string;
+    role: import("../InlineNotification/InlineNotification.types.js").NotificationRole;
+    timeout: 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/ToastNotification/ToastNotification.types.d.ts

@@ -0,0 +1,12 @@
+import type { NotificationProps, NotificationRole } from '#vuno/components/InlineNotification/InlineNotification.types';
+export type ToastNotificationProps = NotificationProps & {
+    /** Tercera línea opcional; Vuno la reserva para la marca de tiempo. */
+    caption?: string;
+    role?: NotificationRole;
+    /**
+     * Milisegundos hasta emitir `close`. `0` la deja fija, que es lo
+     * predeterminado en Vuno; cinco segundos es el valor que documenta
+     * cuando el toast debe irse solo.
+     */
+    timeout?: number;
+};

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

@@ -0,0 +1,103 @@
+<script setup>
+import { onBeforeUnmount, onMounted, useTemplateRef, watch } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import { interactiveChildren, notificationIcons } from "#vuno/components/InlineNotification/notification";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "ToastNotification" });
+const props = defineProps({
+  closeButtonLabel: { type: String, required: false, default: "Cerrar notificaci\xF3n" },
+  hideCloseButton: { type: Boolean, required: false, default: false },
+  kind: { type: String, required: false, default: "error" },
+  lowContrast: { type: Boolean, required: false, default: false },
+  statusIconDescription: { type: String, required: false, default: void 0 },
+  subtitle: { type: String, required: false, default: void 0 },
+  title: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 },
+  caption: { type: String, required: false, default: void 0 },
+  role: { type: String, required: false, default: "status" },
+  timeout: { type: Number, required: false, default: 0 }
+});
+const emit = defineEmits(["close"]);
+defineSlots();
+const icons = useIcons();
+const details = useTemplateRef("details");
+let timer;
+const ui = useTheme(
+  "inlineNotification",
+  () => props.ui,
+  () => ({ kind: props.kind, lowContrast: props.lowContrast ? "true" : "false", variant: "toast" })
+);
+function stop() {
+  if (timer === void 0) return;
+  clearTimeout(timer);
+  timer = void 0;
+}
+onMounted(() => {
+  watch(
+    () => props.timeout,
+    (timeout) => {
+      stop();
+      if (timeout > 0) timer = setTimeout(() => emit("close"), timeout);
+    },
+    { immediate: true }
+  );
+  if (!import.meta.env.DEV || interactiveChildren(details.value).length === 0) return;
+  console.warn("[ToastNotification] El cuerpo no debe contener elementos accionables: usa `ActionableNotification`.");
+});
+onBeforeUnmount(stop);
+</script>
+
+<template>
+    <div
+        :class="ui.root"
+        :role="props.role"
+    >
+        <Icon
+            :class="ui.icon"
+            :name="notificationIcons[props.kind]"
+        />
+        <span
+            v-if="props.statusIconDescription"
+            :class="ui.assistive"
+        >
+            {{ props.statusIconDescription }}
+        </span>
+        <div
+            ref="details"
+            :class="ui.details"
+        >
+            <div
+                v-if="props.title"
+                :class="ui.title"
+            >
+                {{ props.title }}
+            </div>
+            <div
+                v-if="props.subtitle"
+                :class="ui.subtitle"
+            >
+                {{ props.subtitle }}
+            </div>
+            <div
+                v-if="props.caption"
+                :class="ui.caption"
+            >
+                {{ props.caption }}
+            </div>
+            <slot />
+        </div>
+        <button
+            v-if="!props.hideCloseButton"
+            :aria-label="props.closeButtonLabel"
+            :class="ui.close"
+            :title="props.closeButtonLabel"
+            type="button"
+            @click="emit('close')"
+        >
+            <Icon
+                :class="ui.closeIcon"
+                :name="icons.close"
+            />
+        </button>
+    </div>
+</template>

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

@@ -0,0 +1,29 @@
+import type { ToastNotificationProps } from './ToastNotification.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ToastNotificationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<ToastNotificationProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    title: string;
+    kind: import("../InlineNotification/InlineNotification.types.js").NotificationKind;
+    lowContrast: boolean;
+    hideCloseButton: boolean;
+    caption: string;
+    subtitle: string;
+    ui: import("../../types/slots.js").ComponentUi<"inlineNotification">;
+    closeButtonLabel: string;
+    statusIconDescription: string;
+    role: import("../InlineNotification/InlineNotification.types.js").NotificationRole;
+    timeout: 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/Toggle/Toggle.d.vue.ts

@@ -0,0 +1,31 @@
+import type { ToggleChange, ToggleProps } from './Toggle.types.js';
+type __VLS_Props = ToggleProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (payload: ToggleChange & {
+        event: Event;
+    }) => any;
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((payload: ToggleChange & {
+        event: Event;
+    }) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("./Toggle.types.js").ToggleSize;
+    name: string;
+    hideLabel: boolean;
+    labelText: string;
+    readonly: boolean;
+    id: string;
+    ui: Partial<Record<import("./Toggle.types.js").ToggleSlot, string>>;
+    required: boolean;
+    labelA: string;
+    labelB: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,94 @@
+/**
+ * `vuno--toggle`: una pastilla de 48 × 24 px con un pulgar de 18 px, el rótulo
+ * superior en `label-01` y el texto de estado a un lado, separados por 8 px.
+ *
+ * Vuno oculta un `button[role="switch"]` y dibuja la pastilla sobre la
+ * etiqueta. Aquí la pastilla **es** el control: un `input[type="checkbox"]`
+ * con `role="switch"` y `appearance-none`, la misma decisión que en `Checkbox`
+ * y por la misma razón —el foco, el teclado, el envío del formulario y la
+ * validación nativa siguen perteneciendo al control, y el estado que se anuncia
+ * no puede separarse del que se ve.
+ *
+ * El pulgar y la palomita son hermanos del `input`, no pseudoelementos: un
+ * `input` es un elemento reemplazado y los navegadores no renderizan `::before`
+ * ni `::after` sobre él. Leen el estado con `peer-*`, así que no hay estado
+ * duplicado en props. Por eso existe `field`, que no es decorativo: es el
+ * contexto de posicionamiento que la pastilla no puede ofrecer.
+ *
+ * Las medidas son las de Vuno: pastilla de 48 × 24 px y pulgar de 18 px a
+ * 3 px de cada borde con un desplazamiento de 24 px; en `sm`, 32 × 16 px con
+ * pulgar de 10 px y desplazamiento de 16 px. El rótulo superior deja
+ * `$spacing-05` —16 px— hasta la pastilla; el indicador de v12 lo reduce a 8 px
+ * y se obtiene sobreescribiendo `labelText` desde el tema.
+ *
+ * El anillo de foco se dibuja con `outline` sobre el propio control en lugar
+ * del `::after` del sistema de origen. El radio resultante es el de la pastilla
+ * en vez de los 16 px de aquel, una diferencia invisible en una caja de 26 px de alto, y
+ * evita un elemento que solo existiría para llevar un contorno.
+ */
+export declare const toggleTheme: Record<"toggle", {
+    readonly slots: {
+        readonly appearance: "inline-grid cursor-pointer grid-cols-[max-content_max-content] items-center gap-x-2";
+        readonly check: "pointer-events-none invisible absolute top-1.5 end-[5px] h-[5px] w-[6px] fill-(--vuno-support-success) peer-checked:visible";
+        readonly field: "relative inline-flex";
+        readonly labelText: "mb-4 block text-xs leading-4 font-normal tracking-[0.32px] text-(--vuno-text-secondary)";
+        readonly root: "inline-block select-none";
+        readonly switch: "peer h-6 w-12 shrink-0 cursor-pointer appearance-none rounded-full bg-(--vuno-toggle-off) transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) checked:bg-(--vuno-support-success) focus:outline-solid focus:outline-2 focus:outline-offset-1 focus:outline-(--vuno-focus) motion-reduce:transition-none forced-colors:[outline:1px_solid_transparent] forced-colors:checked:bg-[Highlight] forced-colors:focus:outline-solid forced-colors:focus:outline-1 forced-colors:focus:outline-[Highlight]";
+        readonly text: "text-sm leading-5 tracking-[0.16px] text-(--vuno-text-primary)";
+        /**
+         * El desplazamiento se invierte en RTL porque `translate` es físico y la
+         * posición inicial del pulgar es lógica, igual que en Vuno.
+         */
+        readonly thumb: "pointer-events-none absolute top-[3px] start-[3px] size-[1.125rem] rounded-full bg-(--vuno-icon-on-color) transition-transform duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) peer-checked:translate-x-6 motion-reduce:transition-none rtl:peer-checked:-translate-x-6 forced-colors:[outline:1px_solid_transparent]";
+    };
+    readonly variants: {
+        /**
+         * Vuno apaga la pastilla con `$button-disabled` en los dos estados, así
+         * que el color marcado también se reescribe. El estado deshabilitado
+         * queda expresamente fuera del contraste WCAG.
+         */
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly appearance: "cursor-not-allowed";
+                readonly check: "fill-(--vuno-button-disabled)";
+                readonly labelText: "text-(--vuno-text-disabled)";
+                readonly switch: "cursor-not-allowed bg-(--vuno-button-disabled) checked:bg-(--vuno-button-disabled)";
+                readonly text: "text-(--vuno-text-disabled)";
+                readonly thumb: "bg-(--vuno-icon-on-color-disabled)";
+            };
+        };
+        /**
+         * `vuno--visually-hidden`, que es lo que hace `sr-only`: el rótulo sigue en
+         * el árbol de accesibilidad y conserva la relación con el control.
+         */
+        readonly hideLabel: {
+            readonly false: {};
+            readonly true: {
+                readonly labelText: "sr-only";
+            };
+        };
+        /**
+         * Solo lectura invierte la pastilla: fondo transparente, borde de 1 px y
+         * pulgar en `$icon-primary`. El pulgar no cambia de sitio porque aquí
+         * está posicionado contra `field` y no contra el control, así que el borde
+         * no desplaza su origen.
+         */
+        readonly readonly: {
+            readonly false: {};
+            readonly true: {
+                readonly appearance: "cursor-default";
+                readonly switch: "cursor-default border border-(--vuno-icon-disabled) bg-transparent checked:bg-transparent";
+                readonly text: "cursor-text select-text";
+                readonly thumb: "bg-(--vuno-icon-primary)";
+            };
+        };
+        readonly size: {
+            readonly sm: {
+                readonly switch: "h-4 w-8";
+                readonly thumb: "size-[0.625rem] peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4";
+            };
+            readonly md: {};
+        };
+    };
+}>;

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

@@ -0,0 +1,65 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const toggleTheme = defineTheme("toggle", {
+  slots: {
+    appearance: "inline-grid cursor-pointer grid-cols-[max-content_max-content] items-center gap-x-2",
+    check: "pointer-events-none invisible absolute top-1.5 end-[5px] h-[5px] w-[6px] fill-(--vuno-support-success) peer-checked:visible",
+    field: "relative inline-flex",
+    labelText: "mb-4 block text-xs leading-4 font-normal tracking-[0.32px] text-(--vuno-text-secondary)",
+    root: "inline-block select-none",
+    switch: "peer h-6 w-12 shrink-0 cursor-pointer appearance-none rounded-full bg-(--vuno-toggle-off) transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) checked:bg-(--vuno-support-success) focus:outline-solid focus:outline-2 focus:outline-offset-1 focus:outline-(--vuno-focus) motion-reduce:transition-none forced-colors:[outline:1px_solid_transparent] forced-colors:checked:bg-[Highlight] forced-colors:focus:outline-solid forced-colors:focus:outline-1 forced-colors:focus:outline-[Highlight]",
+    text: "text-sm leading-5 tracking-[0.16px] text-(--vuno-text-primary)",
+    /**
+     * El desplazamiento se invierte en RTL porque `translate` es físico y la
+     * posición inicial del pulgar es lógica, igual que en Vuno.
+     */
+    thumb: "pointer-events-none absolute top-[3px] start-[3px] size-[1.125rem] rounded-full bg-(--vuno-icon-on-color) transition-transform duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) peer-checked:translate-x-6 motion-reduce:transition-none rtl:peer-checked:-translate-x-6 forced-colors:[outline:1px_solid_transparent]"
+  },
+  variants: {
+    /**
+     * Vuno apaga la pastilla con `$button-disabled` en los dos estados, así
+     * que el color marcado también se reescribe. El estado deshabilitado
+     * queda expresamente fuera del contraste WCAG.
+     */
+    disabled: {
+      false: {},
+      true: {
+        appearance: "cursor-not-allowed",
+        check: "fill-(--vuno-button-disabled)",
+        labelText: "text-(--vuno-text-disabled)",
+        switch: "cursor-not-allowed bg-(--vuno-button-disabled) checked:bg-(--vuno-button-disabled)",
+        text: "text-(--vuno-text-disabled)",
+        thumb: "bg-(--vuno-icon-on-color-disabled)"
+      }
+    },
+    /**
+     * `vuno--visually-hidden`, que es lo que hace `sr-only`: el rótulo sigue en
+     * el árbol de accesibilidad y conserva la relación con el control.
+     */
+    hideLabel: {
+      false: {},
+      true: { labelText: "sr-only" }
+    },
+    /**
+     * Solo lectura invierte la pastilla: fondo transparente, borde de 1 px y
+     * pulgar en `$icon-primary`. El pulgar no cambia de sitio porque aquí
+     * está posicionado contra `field` y no contra el control, así que el borde
+     * no desplaza su origen.
+     */
+    readonly: {
+      false: {},
+      true: {
+        appearance: "cursor-default",
+        switch: "cursor-default border border-(--vuno-icon-disabled) bg-transparent checked:bg-transparent",
+        text: "cursor-text select-text",
+        thumb: "bg-(--vuno-icon-primary)"
+      }
+    },
+    size: {
+      sm: {
+        switch: "h-4 w-8",
+        thumb: "size-[0.625rem] peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4"
+      },
+      md: {}
+    }
+  }
+});

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

@@ -0,0 +1,42 @@
+import type { ControlProps } from '#vuno/types/control';
+/** Slots tematizables del toggle. */
+export type ToggleSlot = 'appearance' | 'check' | 'field' | 'labelText' | 'root' | 'switch' | 'text' | 'thumb';
+/**
+ * Vuno publica dos tamaños de toggle —24 px y 16 px de alto— y no el tercer
+ * paso de `ControlSize`, así que `lg` se retira del contrato en lugar de
+ * anunciar una capacidad que el componente no tiene.
+ */
+export type ToggleSize = 'md' | 'sm';
+/** Lo que viaja con `change`, además del evento nativo que lo originó. */
+export type ToggleChange = {
+    id: string;
+    checked: boolean;
+};
+/**
+ * El contrato de Vuno `Toggle`.
+ *
+ * `labelText` es opcional porque el toggle pequeño se usa en línea —dentro de
+ * una fila de tabla, por ejemplo— sin rótulo ni texto de estado visibles. Sin
+ * `labelText`, el nombre accesible lo aporta quien lo consume con `aria-label`
+ * o `aria-labelledby`, igual que en Vuno.
+ */
+export type ToggleProps = Omit<ControlProps<ToggleSlot>, 'size'> & {
+    /**
+     * Oculta el rótulo superior y, si `labelText` existe, lo usa como texto
+     * lateral en lugar de `labelA` y `labelB`. Es el comportamiento de Vuno:
+     * el rótulo sigue siendo el nombre accesible y deja de duplicarse.
+     */
+    hideLabel?: boolean;
+    /** Texto de estado en la posición «apagado». */
+    labelA?: string;
+    /** Texto de estado en la posición «encendido». */
+    labelB?: string;
+    labelText?: string;
+    /**
+     * Impide el cambio sin sacar el control del recorrido de foco. No desarma
+     * `disabled`: con las dos, el control sigue deshabilitado y solo el aspecto
+     * de solo lectura predomina.
+     */
+    readonly?: boolean;
+    size?: ToggleSize;
+};

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

@@ -0,0 +1,108 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "Toggle", inheritAttrs: false });
+const model = defineModel({ type: Boolean, 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: false },
+  required: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  labelA: { type: String, required: false, default: "Apagado" },
+  labelB: { type: String, required: false, default: "Encendido" },
+  labelText: { type: String, required: false, default: void 0 },
+  readonly: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" }
+});
+const emit = defineEmits(["change"]);
+const fallbackId = useId();
+const controlId = computed(() => props.id ?? fallbackId);
+const checked = computed(() => model.value === true);
+const sideLabel = computed(() => props.hideLabel ? props.labelText : checked.value ? props.labelB : props.labelA);
+const showCheck = computed(() => props.size === "sm" && !props.readonly);
+const ui = useTheme(
+  "toggle",
+  () => props.ui,
+  () => ({
+    disabled: String(props.disabled),
+    hideLabel: String(props.hideLabel),
+    readonly: String(props.readonly),
+    size: props.size
+  })
+);
+function commit(next, event) {
+  model.value = next;
+  emit("change", { id: controlId.value, checked: next, event });
+}
+function onChange(event) {
+  if (props.readonly) return;
+  commit(event.target.checked, event);
+}
+function onClick(event) {
+  if (props.readonly) event.preventDefault();
+}
+function onEnter(event) {
+  if (props.readonly) return;
+  event.preventDefault();
+  commit(!checked.value, event);
+}
+</script>
+
+<template>
+    <label
+        :class="ui.root"
+        :for="controlId"
+    >
+        <span
+            v-if="props.labelText"
+            :class="ui.labelText"
+        >
+            {{ props.labelText }}
+        </span>
+
+        <span :class="ui.appearance">
+            <span :class="ui.field">
+                <input
+                    v-bind="$attrs"
+                    :id="controlId"
+                    :aria-readonly="props.readonly || void 0"
+                    :checked="checked"
+                    :class="ui.switch"
+                    :disabled="props.disabled"
+                    :name="props.name"
+                    :required="props.required"
+                    role="switch"
+                    type="checkbox"
+                    @change="onChange"
+                    @click="onClick"
+                    @keydown.enter="onEnter"
+                />
+
+                <span
+                    aria-hidden="true"
+                    :class="ui.thumb"
+                />
+
+                <svg
+                    v-if="showCheck"
+                    aria-hidden="true"
+                    :class="ui.check"
+                    focusable="false"
+                    viewBox="0 0 6 5"
+                >
+                    <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
+                </svg>
+            </span>
+
+            <span
+                v-if="sideLabel"
+                aria-hidden="true"
+                :class="ui.text"
+            >
+                {{ sideLabel }}
+            </span>
+        </span>
+    </label>
+</template>

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

@@ -0,0 +1,31 @@
+import type { ToggleChange, ToggleProps } from './Toggle.types.js';
+type __VLS_Props = ToggleProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (payload: ToggleChange & {
+        event: Event;
+    }) => any;
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((payload: ToggleChange & {
+        event: Event;
+    }) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("./Toggle.types.js").ToggleSize;
+    name: string;
+    hideLabel: boolean;
+    labelText: string;
+    readonly: boolean;
+    id: string;
+    ui: Partial<Record<import("./Toggle.types.js").ToggleSlot, string>>;
+    required: boolean;
+    labelA: string;
+    labelB: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,27 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+import type { ResolvedSlots } from '#vuno/types/slots';
+/**
+ * Lo que `Toggletip` comparte con sus tres piezas.
+ *
+ * El estado ARIA, el tema resuelto y el teclado viven en el contenedor porque
+ * son lo único que el botón y el contenido tienen que ver igual: el botón
+ * anuncia `expanded`, `controls` y `describedby` sobre el mismo identificador
+ * que el contenido lleva, y el recorrido del tabulador necesita conocer los dos
+ * elementos a la vez.
+ */
+export type ToggletipContext = {
+    /** Tabular desde el botón entra en el contenido; si está vacío, sigue por la página. */
+    onButtonKeydown: (event: KeyboardEvent) => void;
+    /** Dentro no atrapa: sale al botón por arriba y a la página por abajo. */
+    onContentKeydown: (event: KeyboardEvent) => void;
+    contentId: string;
+    open: ComputedRef<boolean>;
+    portalTarget: ComputedRef<string>;
+    ui: ComputedRef<ResolvedSlots<'toggletip'>>;
+    close: (refocus?: boolean) => void;
+    setButton: (element: HTMLElement | null) => void;
+    setCaret: (element: HTMLElement | null) => void;
+    setContent: (element: HTMLElement | null) => void;
+    toggle: () => void;
+};
+export declare const toggletipKey: InjectionKey<ToggletipContext>;

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

@@ -0,0 +1 @@
+export const toggletipKey = Symbol("toggletip");

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

@@ -0,0 +1,29 @@
+import type { ToggletipProps } from './Toggletip.types.js';
+type __VLS_Props = ToggletipProps;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    align: import("../../types/base.js").Placement;
+    ui: import("../../types/slots.js").ComponentUi<"toggletip">;
+    autoAlign: boolean;
+    defaultOpen: boolean;
+    portal: import("../../types/base.js").PortalTarget;
+}, {}, {}, {}, 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;
+    };
+};