@groupteknology/vuno 2.0.0 → 4.0.0

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>

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: {};
+        };
+    };
+}>;