JavaScript

ds-uikit.js agrega el comportamiento de los componentes interactivos. No tiene dependencias ni hay que inicializar nada: basta con cargarlo y usar los atributos data-ds-*.

Archivos

Archivo	Formato	Uso
ds-uikit.min.js	Script, global dsUIKit	Producción, con <script>.
ds-uikit.js	Script, global dsUIKit	Desarrollo (sin minificar).
ds-uikit.esm.js	Módulo ESM	React, Vite y otros empaquetadores.

Se descargan en Primeros pasos.

Con <script>

<script src="/js/ds-uikit.min.js" defer></script>

Puede ir en el <head> con defer o al final del <body>. Los listeners se conectan a document, así que también funciona con contenido que se agrega después (por ejemplo, un mensaje que llega por AJAX).

Con React

Importa el módulo una vez, en el punto de entrada:

main.jsx

import './css/ds-uikit.min.css';
import './css/theme.css';
import './js/ds-uikit.esm.js';

• Funciona con SSR (Next.js, Astro): al importarse en el servidor no toca document.
• Si el archivo se carga dos veces (por ejemplo, el <script> y el módulo), arranca una sola vez.
• El kit no quita nodos del DOM: oculta con hidden. Para que React sepa que algo se cerró, escucha el evento:

import { useEffect, useRef, useState } from 'react';

export default function Aviso() {
  const ref = useRef(null);
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const alCerrar = () => setVisible(false);
    el.addEventListener('ds:closed', alCerrar);
    return () => el.removeEventListener('ds:closed', alCerrar);
  }, [visible]);

  if (!visible) return null;
  return (
    <div ref={ref} className="message message--info message--dismissible">
      Hay una nueva versión disponible.
      <button type="button" className="message__close" data-ds-dismiss="message" aria-label="Cerrar" />
    </div>
  );
}

Atributos

Atributo	Qué hace
data-ds-toggle="<componente>"	Abre o cierra el componente indicado en data-ds-target (por ejemplo, modal). En el toast, lo muestra (si ya está abierto, reinicia el tiempo). En un enlace, también sirve href="#id". Sin destino, el que contiene al botón (por ejemplo, el .dropdown).
data-ds-dismiss="<componente>"	Cierra el componente que contiene al elemento (por ejemplo, message).
data-ds-target="<selector>"	Junto a data-ds-toggle, el elemento que se abre. Junto a data-ds-dismiss, cierra ese elemento en vez del que lo contiene.

Los elementos con disabled o aria-disabled="true" no hacen nada.

API

Cada componente tiene una función que recibe el elemento (o un selector) y devuelve su instancia. Para el mismo elemento, siempre devuelve la misma.

const aviso = dsUIKit.message('#aviso');
aviso.close();
aviso.open();
aviso.isOpen; // false o true

Con ESM, importa la función: import { message } from './js/ds-uikit.esm.js';.

Propiedad	Uso
dsUIKit.version	Versión del kit.
dsUIKit.init()	Conecta los listeners. Se llama sola al cargar; repetirla no hace nada.
dsUIKit.message(el)	Mensaje: open(), close(), isOpen.
dsUIKit.modal(el)	Modal: open(), close(), toggle(), isOpen.
dsUIKit.dropdown(el)	Dropdown: open(), close(), toggle(), isOpen.
dsUIKit.collapse(el)	Collapse: open(), close(), toggle(), isOpen.
dsUIKit.tabs(el)	Tabs: show(pestaña o índice).
dsUIKit.toast(el)	Toast: open(), close(), toggle(), isOpen.

Eventos

Se emiten en el elemento del componente (en tabs, en los paneles) y suben hasta document.

Evento	Cuándo	Cancelable
ds:open	Antes de mostrarse.	Sí
ds:opened	Al terminar de mostrarse (después de la transición).	No
ds:close	Antes de cerrarse.	Sí
ds:closed	Al terminar de cerrarse.	No

event.detail trae component (el nombre, por ejemplo 'message'), instance y trigger (el elemento que lo activó, o null si fue por la API).

// Evita que se cierre un mensaje
document.addEventListener('ds:close', (e) => {
  if (e.detail.component === 'message' && e.target.id === 'aviso-fijo') e.preventDefault();
});

Accesibilidad

• Si el foco estaba dentro de un elemento que se cierra, pasa al siguiente elemento enfocable de la página.
• Los modales atrapan el foco mientras están abiertos y, al cerrarse, lo devuelven al botón que los abrió.
• Escape cierra solo lo último que se abrió (por ejemplo, un dropdown dentro de un modal).
• Si el elemento que abrió un modal quedó oculto (por ejemplo, un ítem de un dropdown), al cerrar el modal el foco vuelve al botón del dropdown.
• Con «reducir movimiento» activado en el sistema no hay transiciones, y ds:opened y ds:closed se emiten de inmediato.

Componentes con JS

Componente	Qué agrega
Mensaje	Cerrar con data-ds-dismiss="message".
Modal	Abrir con data-ds-toggle="modal"; cerrar con data-ds-dismiss="modal", el fondo o Escape. Bloquea el scroll y atrapa el foco.
Dropdown	Abrir con data-ds-toggle="dropdown"; cerrar con un clic fuera, Escape, al elegir un ítem o al salir con Tab. Navegación con flechas; se da vuelta si no cabe.
Collapse	Abrir y cerrar paneles con data-ds-toggle="collapse", con transición de alto. Acordeón con data-ds-parent (uno abierto a la vez).
Tabs	Cambiar de panel con data-ds-toggle="tab". Flechas, Inicio y Fin recorren las pestañas y las activan. Los eventos se emiten en los paneles.
Toast	Mostrar con data-ds-toggle="toast" (si ya está abierto, reinicia el tiempo); cerrar con data-ds-dismiss="toast" o solo a los 5 s (data-ds-delay, data-ds-autohide). El tiempo se pausa con el puntero encima o el foco dentro.

El menú lateral móvil llega en las próximas versiones.