# Sistema de diseño Oruga UI

## Vista previa de la interfaz del sistema de diseño Oruga UI

Busca en un vocabulario controlado, añade hasta tres temas, elimina una etiqueta y guarda una descripción local de la nota.

## Referencia de diseño del sistema de diseño Oruga UI

Paquete Oruga para Vue 3, versión 0.14.4, con @oruga-ui/theme-oruga 0.10.0. Los valores siguientes pertenecen a ese tema predeterminado opcional, no a un núcleo headless inmutable. Los iconos MDI 7.4.47 se incluyen localmente. La composición del catálogo y las ilustraciones de carpetas que la rodean son originales.

### Colores semánticos del tema opcional de Oruga

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --oruga-primary | #445e00 | Etiquetas seleccionadas y acción principal. |
| --oruga-primary-invert | #fff | Texto de las etiquetas principales. |
| --oruga-success | #006724 | Variante de éxito. |
| --oruga-info | #005c98 | Variante informativa. |
| --oruga-warning | #f4c300 | Variante de advertencia. |
| --oruga-danger | #b60000 | Variante de error del campo. |
| --oruga-control-border-color | #dbdbdb | Borde predeterminado del campo. |
### Tipografía, espaciado y geometría del tema opcional

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --oruga-font-size | 1rem | Tamaño de texto predeterminado. |
| --oruga-line-height | 1.5 | Proporción de interlineado predeterminada. |
| --oruga-border-radius | 4px | Radio estándar de las esquinas de los controles. |
| --oruga-control-spacer | .5em | Espaciado compartido entre controles. |
| --oruga-control-height | 2.25em | Altura del control en relación con su fuente. |
| --oruga-control-padding-vertical | calc(.375em - 1px) | Relleno vertical que tiene en cuenta el borde. |
| --oruga-control-padding-horizontal | calc(.8em - 1px) | Relleno horizontal que tiene en cuenta el borde. |
| --oruga-control-disabled-opacity | .5 | Estado visual deshabilitado. |
| --oruga-animation-speed-fast | .15s | Duración de transición rápida. |
| --oruga-animation-speed | .3s | Duración de transición estándar. |
### Escalas explícitas de la aplicación original

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Font stack | system-ui, sans-serif | Texto exterior de la aplicación; el tema opcional también usa una pila de fuentes del sistema. |
| Page title | 34px / 1.15; 29px narrow | Jerarquía original. |
| Catalog card title | Georgia, serif; 29px / 1.25 | Contraste editorial original, no un valor predeterminado de Oruga. |
| Supporting type | 10 / 11 / 12 / 13 / 14 / 15px | Pies de foto, definiciones y prosa originales explícitos. |
| Spacing | 4 / 5 / 7 / 12 / 13 / 14 / 16 / 20 / 22 / 24 / 28 / 32px | Valores reales de diseño; la biblioteca headless no proporciona una escala de cuadrícula. |
| Layout | Flexible editor + 330px catalog card; stack at 760px | Cuadrícula original. |
| Topic constraints | 1–3 unique existing labels | allow-new=false, allow-duplicates=false, maxitems=3. |
| Title constraint | 5–80 characters; minimum evaluated after trim | Validación de la aplicación más límite de longitud nativo. |
## Oruga UI Guía completa del sistema de diseño

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## Separa el comportamiento de los componentes de Oruga de su tema opcional — Sistema de diseño Oruga UI

### Separa el comportamiento de los componentes de Oruga de su tema opcional

> Oruga proporciona componentes de Vue sin exigir un marco de CSS específico. Este ejemplo combina el paquete para Vue 3 con el tema predeterminado de Oruga, que se distribuye por separado. Las etiquetas verdes seleccionadas y los campos delineados provienen de ese tema, mientras que la búsqueda, la selección y la eliminación son comportamientos nativos de los componentes.

Este límite resulta útil al evaluar la biblioteca. Un equipo puede conservar los componentes API y sustituir la configuración de clases o elegir otro tema compatible. Por eso, la tabla de referencia indica el paquete y la versión del tema, en lugar de presentar su color primario verde como un requisito universal para todas las aplicaciones Oruga.

Consulta la especificación complementaria

## Usa las variables reales del tema predeterminado — Sistema de diseño Oruga UI

### Usa las variables reales del tema predeterminado

El tema opcional instalado define --oruga-primary como #445e00 y --oruga-primary-invert como white. El color de peligro es #b60000 y los bordes de los controles usan #dbdbdb. La propiedad variant del componente selecciona la familia semántica adecuada, sin necesidad de una regla CSS independiente para cada campo o etiqueta.

El mismo tema define un radio estándar de cuatro píxeles, una altura de control de 2.25em y fórmulas de relleno que restan el borde de un píxel. Como estos valores son relativos al texto del control, cambiar la escala tipográfica afecta a la geometría. El espaciador de medio em del tema expresa una relación entre componentes, no demuestra que exista una escala completa de espaciado para la maquetación de páginas.

Consulta la especificación complementaria

## Proporciona la estructura que Oruga deliberadamente no impone — Sistema de diseño Oruga UI

### Proporciona la estructura que Oruga deliberadamente no impone

El catálogo usa una columna flexible para el editor y otra de 330px para la tarjeta; ambas se apilan por debajo de 760px. El título de la página usa una fuente sans del sistema, mientras que el de la tarjeta usa Georgia para evocar una ficha editorial. Ambas son decisiones originales y no requieren archivos de fuentes externos.

Oruga no prescribe una cuadrícula ni un framework de utilidades. Por eso, la hoja de estilos completa deja a la vista el relleno de los paneles, los márgenes interiores en pantallas estrechas y las reglas de ajuste de línea. El contador de etiquetas mantiene juntos el numerador y el denominador, y el título de la tarjeta permite que los nombres largos de las notas se ajusten a varias líneas en lugar de ensanchar la página incrustada.

Consulta la especificación complementaria

## Sistema de diseño Oruga UI: mantener separados los valores seleccionados y la consulta de búsqueda

### Mantén los valores seleccionados separados de la consulta de búsqueda

OTaginput enlaza la matriz de temas seleccionados mediante v-model. El texto de autocompletado interno filtra las etiquetas candidatas sin reemplazar esa matriz. El vocabulario incluye seis temas originales con definiciones concretas, y la tarjeta en vivo muestra las definiciones solo de los temas seleccionados.

La comparación de búsqueda predeterminada no distingue entre mayúsculas y minúsculas. La prueba local escribió Color y esperó a que terminara el filtrado antes de seleccionar la opción resultante. Una aserción inmediata durante la espera de la entrada debida a la función debounce daría a entender erróneamente que el filtrado falló. Después de seleccionar una opción, la consulta se borra y se conservan las etiquetas elegidas previamente.

1. Busca Color y selecciona la opción correspondiente.

2. Añade Forms para llegar a tres temas junto con Navigation.

3. Elimina una etiqueta, confirma que la tarjeta cambia y elige un reemplazo antes de guardar.

Consulta la especificación complementaria

## Sistema de diseño Oruga UI: controlar el vocabulario, los duplicados y el recuento por separado

### Controla de forma independiente el vocabulario, los duplicados y el recuento

allow-new=false impide que una frase escrita arbitrariamente se convierta en una etiqueta. allow-duplicates=false impide añadir dos veces la misma etiqueta existente. maxitems=3 limita el total de selecciones y muestra el contador. Cada ajuste protege un aspecto distinto de un vocabulario controlado.

La aplicación sigue comprobando que se haya seleccionado al menos un tema al intentar guardar. El límite máximo de selecciones no implica que haya un mínimo obligatorio. También comprueba que el título, una vez eliminado el espacio sobrante, tenga cinco caracteres significativos; el atributo maxlength del campo de entrada nativo limita el máximo a ochenta caracteres.

Consulta la especificación complementaria

## Sistema de diseño Oruga UI: usar OField para las etiquetas y los mensajes de validación específicos

### Usa OField para las etiquetas y los mensajes de validación específicos

OField proporciona las etiquetas visibles Note title y Topics, así como sus mensajes. Tras guardar con datos no válidos, el campo pertinente recibe la variante danger y un mensaje concreto que indica cómo corregirlo. La indicación sobre los temas explica el rango disponible y la restricción del vocabulario antes de que se produzca un error.

El menú desplegable nativo de entrada de etiquetas sigue el patrón de cuadro combinado/lista. En esta versión, el rol de cuadro combinado pertenece a un contenedor y el campo de texto editable está anidado en su interior. Por eso, la prueba de control de calidad completa el campo Search topics real, en lugar de suponer que el elemento con el rol de cuadro combinado es en sí mismo un campo de entrada.

Consulta la especificación complementaria

## Sistema de diseño Oruga UI: el paquete de iconos predeterminado también necesita su archivo de fuente

### Incluso un paquete de iconos predeterminado necesita el archivo de fuentes

El control para quitar etiquetas usa el paquete de iconos MDI predeterminado de Oruga. Cargar el tema de componentes no carga automáticamente esa fuente, así que la configuración completa incluye @mdi/font. La vista previa independiente conserva un recurso WOFF2 local y las reglas de iconos necesarias, sin depender de una fuente remota.

La acción para quitar una etiqueta sigue siendo un botón real con la etiqueta accesible Remove topic. La ilustración decorativa de la carpeta no está relacionada con esos iconos de control y se oculta a las tecnologías de asistencia. Esta distinción evita que se confunda un elemento ornamental con un control interactivo.

Consulta la especificación complementaria

## Sistema de diseño Oruga UI: invalidar una instantánea guardada cuando cambian sus datos de entrada

### Invalida una instantánea guardada cuando cambien sus datos de entrada

La acción Save registra una frase que indica el título sin espacios sobrantes y el número de temas seleccionados. Un observador supervisa tanto el título como la matriz de temas en profundidad; por eso, quitar un elemento borra la confirmación igual que cambiar el título. Save solo se desactiva mientras la instantánea actual siga guardada.

Clear note restablece el título, todos los temas seleccionados, el estado de validación intentada y el estado de guardado. La tarjeta muestra entonces Untitled research note y No topics selected. El usuario puede ver el ciclo completo de estado vacío, edición y guardado sin que el botón oculte una operación de backend, carga o publicación.

- Conserva el modelo de matriz de selección mientras cambia la consulta.

- Borra la confirmación de guardado cuando se modifica la matriz anidada.

- Describe el resultado como estado local, no como publicación.

Consulta la especificación complementaria

## Sistema de diseño Oruga UI: importar componentes de forma explícita con el registro actual de Oruga

### Importa los componentes explícitamente con el registro actual de Oruga

La configuración verificada de la versión 0.14.4 crea una instancia de Oruga y la instala en la aplicación Vue. App.vue importa explícitamente OField, OInput, OTaginput, OTag y OButton. Este enfoque sigue el modelo de registro actual; basarse en ejemplos antiguos que suponían que todos los componentes estaban registrados globalmente puede dejar incompleta una aplicación.

El README del tema indica que este tema predeterminado usa los nombres de clase existentes de Oruga y necesita su hoja de estilos, sin un objeto adicional de configuración del tema. El punto de entrada importa esa hoja de estilos, el recurso MDI y el diseño original en ese orden. Los ejemplos de código fuente completos anteriores y la raíz de Vite de abajo incluyen todos los elementos necesarios.

Consulta la especificación complementaria

## Oruga UI Ejemplos de componentes del sistema de diseño

### SFC completo del catálogo de temas

OTaginput, OField, OInput, OTag y OButton conectan un vocabulario restringido con una tarjeta de catálogo en vivo.

```
<script setup>
import {ref,computed,watch} from 'vue';
import {OField,OInput,OTaginput,OButton,OTag} from '@oruga-ui/oruga-next';
const title=ref('Finding a calmer navigation'),topics=ref(['Navigation']),attempted=ref(false),saved=ref('');
const definitions={'Navigation':'Menus, wayfinding and the path through a product.','Typography':'Type hierarchy, reading rhythm and legibility.','Color':'Semantic roles, contrast and theme behavior.','Forms':'Input labels, validation and correction.','Motion':'Transitions, reduced motion and continuity.','Accessibility':'Keyboard flow, semantics and assistive technology.'};
const options=Object.keys(definitions),valid=computed(()=>title.value.trim().length>=5&&topics.value.length>=1&&topics.value.length<=3);
watch([title,topics],()=>saved.value='',{deep:true});
function save(){attempted.value=true;if(valid.value)saved.value=`Saved locally: “${title.value.trim()}” with ${topics.value.length} ${topics.value.length===1?'topic':'topics'}.`}
function reset(){title.value='';topics.value=[];attempted.value=false;saved.value=''}
</script>
<template><main class="catalog-shell"><header><p class="eyebrow">RESEARCH CATALOG · LABEL A NOTE</p><h1>Give the next reader a useful starting point.</h1><p>Name a research note and choose up to three topics from a controlled vocabulary.</p></header><div class="catalog-layout"><section class="editor"><h2>Note details</h2><OField label="Note title" :variant="attempted&&title.trim().length<5?'danger':undefined" :message="attempted&&title.trim().length<5?'Use at least five meaningful characters.':undefined"><OInput v-model="title" maxlength="80" expanded placeholder="What did you learn?"/></OField><OField label="Topics" :variant="attempted&&!topics.length?'danger':undefined" :message="attempted&&!topics.length?'Choose at least one topic.':'Choose 1–3 existing topics; duplicate and new labels are not added.'"><OTaginput v-model="topics" :options="options" :allow-new="false" :allow-duplicates="false" :maxitems="3" open-on-focus :keep-open="false" expanded variant="primary" placeholder="Search topics" aria-close-label="Remove topic"><template #empty>No matching topic. Try Color, Forms or Motion.</template></OTaginput></OField><div class="actions"><OButton variant="primary" @click="save" :disabled="!!saved">Save local note</OButton><OButton @click="reset">Clear note</OButton></div><p role="status" class="result">{{saved||'The preview keeps only local page state.'}}</p><h3>Vocabulary guide</h3><dl class="vocabulary"><div v-for="(meaning,name) in definitions" :key="name"><dt>{{name}}</dt><dd>{{meaning}}</dd></div></dl></section><aside class="note-card"><div class="folder-art" aria-hidden="true"><i></i><b></b><span></span></div><p class="eyebrow">CATALOG CARD PREVIEW</p><h2>{{title.trim()||'Untitled research note'}}</h2><div class="topic-tags"><OTag v-for="topic in topics" :key="topic" variant="primary">{{topic}}</OTag><span v-if="!topics.length" class="empty-topics">No topics selected</span></div><p class="card-label">This note will appear under</p><ul><li v-for="topic in topics" :key="topic"><strong>{{topic}}</strong><span>{{definitions[topic]}}</span></li></ul><p class="card-foot">Original sample note · no upload or publishing</p></aside></div></main></template>
```

Referencia de código

- El modelo de matriz de selección es distinto del texto de búsqueda interno.

- La selección se limita a etiquetas existentes y no duplicadas.

- Un observador profundo borra la confirmación de guardado después de quitar un tema.

### Diseño original completo del catálogo

Cuadrícula adaptable del editor y la tarjeta, ajuste de línea controlado e ilustración original de carpeta CSS.

```
html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#f4f4ed;color:#34392b}.catalog-shell{max-width:1100px;margin:auto;padding:32px}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:700;color:#6e775f}h1{font-size:34px;line-height:1.15;max-width:700px;margin:12px 0}header>p:last-child{font-size:15px;line-height:1.6;color:#727965;max-width:630px}.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;margin-top:28px}.editor,.note-card{background:white;border:1px solid #dfe3d4;border-radius:14px;padding:24px;min-width:0}.editor>h2{font-size:20px;margin:0 0 24px}.editor .o-field{margin-bottom:22px}.editor .o-field__message{font-size:12px;line-height:1.6}.actions{display:flex;gap:12px;flex-wrap:wrap}.result{font-size:12px;line-height:1.6;color:#596d2e;margin:16px 0 28px}.editor h3{font-size:14px}.vocabulary{margin:0}.vocabulary>div{padding:12px 0;border-bottom:1px solid #eaede3}.vocabulary dt{font-size:13px;font-weight:650}.vocabulary dd{font-size:12px;line-height:1.6;margin:4px 0 0;color:#707763}.note-card{align-self:start;background:#fcfcf5}.note-card h2{font-family:Georgia,serif;font-size:29px;line-height:1.25;font-weight:400;overflow-wrap:anywhere}.folder-art{height:145px;background:#e3e8cf;border-radius:8px;position:relative;overflow:hidden;margin-bottom:24px}.folder-art i{position:absolute;left:15%;top:40px;width:70%;height:100px;border-radius:7px;background:#7e8e52;transform:rotate(-8deg)}.folder-art b{position:absolute;left:21%;top:24px;width:60%;height:115px;background:#fffef5;transform:rotate(5deg);border-radius:4px}.folder-art span{position:absolute;left:16%;top:71px;width:70%;height:80px;background:#a6b57a;border-radius:7px}.topic-tags{display:flex;gap:7px;flex-wrap:wrap}.card-label{font-size:11px;color:#737b65;margin-top:24px}.note-card ul{list-style:none;padding:0}.note-card li{border-top:1px solid #e0e4d6;padding:13px 0}.note-card li strong{font-size:13px;display:block}.note-card li span{font-size:12px;color:#6c765b;line-height:1.6;display:block;margin-top:5px}.card-foot{font-size:10px;line-height:1.6;color:#7c846e;margin-top:20px}.empty-topics{font-size:12px;color:#7c846e}.o-taginput{max-width:100%}.o-taginput__container{min-width:0}.o-taginput .o-input{min-width:0}@media(max-width:760px){.catalog-layout{grid-template-columns:minmax(0,1fr)}.catalog-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.catalog-shell{padding:14px}.editor,.note-card{padding:16px}.actions>*{width:100%}}
.o-taginput__counter{white-space:nowrap;flex-shrink:0}
```

Referencia de código

- Oruga no exige un sistema de cuadrícula; este diseño está definido explícitamente por la aplicación CSS.

- El texto del contador permanece en una sola línea en pantallas estrechas.

## Oruga UI Configuración del agente de IA del sistema de diseño

### Punto de partida para la implementación

Oruga 0.14.4, tema predeterminado opcional 0.10.0 y MDI 7.4.47 verificados. Los componentes se importan explícitamente; el tema predeterminado no requiere configuración adicional del tema JavaScript.

```
// npm create vite@latest oruga-catalog -- --template vue
// cd oruga-catalog && npm install
// npm install @oruga-ui/oruga-next@0.14.4 @oruga-ui/theme-oruga@0.10.0 @mdi/font@7.4.47
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createOruga} from '@oruga-ui/oruga-next';
import '@oruga-ui/theme-oruga/style.css';
import '@mdi/font/css/materialdesignicons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createOruga()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
```

### Una instrucción para tu proyecto

```
Empieza con el catálogo de notas de investigación de Oruga 0.14.4 y su tema 0.10.0. Conserva la selección controlada de OTaginput a partir del vocabulario de seis temas, la búsqueda que no distingue entre mayúsculas y minúsculas, las etiquetas nuevas y duplicadas desactivadas y el máximo de tres etiquetas. Mantén conectadas las definiciones de temas en vivo y la validación del título con la instantánea guardada, y borra la confirmación de guardado tras cualquier cambio. Incluye createOruga, el tema CSS y la configuración del recurso MDI local. Restablece el estado a un borrador vacío; no inventes datos de comparación de productos ni una actualización remota del catálogo.
```

## Oruga UI Fuentes y alcance del sistema de diseño

Oruga 0.14.4 con el tema predeterminado opcional 0.10.0. Vocabulario original e ilustración de catálogo. Guarda los cambios solo en el estado local de la página, sin subirlos, publicarlos ni conservarlos al recargarla.

- Introducción Plugin actual y registro explícito de componentes.

- Opciones de tema Límite de estilo opcional.

- Configuración Personalización global y local de clases.

- Entrada de etiquetas Restricciones de vocabulario, modelo, límites y eliminación.

- Autocompletado Filtrado, comportamiento de combobox anidado y popover nativo.

- Campo Etiquetas visibles y mensajes de validación.

- Icono Configuración del paquete de iconos.

- Fuente del tema predeterminado Configuración del tema oficial y origen de los tokens.

## Oruga UI Recursos relacionados con el sistema de diseño

### Pico CSS

Pico CSS aplica estilos a HTML semántico con una escala tipográfica adaptable basada en rem y variables de tema. Sus distribuciones estándar, sin clases y condicionales tienen distintos ámbitos de integración; esta guía usa la compilación estándar para un formulario de preferencias de lectura con comportamiento nativo de divulgación y diálogo.

### Preline UI

Un planificador de sesiones nativo de Preline con pestañas vinculadas, un complemento de entrada numérica con límites, alias de temas instalados, escalas reales de Tailwind y una estimación local de materiales que se actualiza según la sesión seleccionada.

### Prime UI

Una implementación de PrimeVue con versión fijada del ecosistema Prime UI: un árbol de documentos con tema Aura y referencias reales al preajuste, expansión controlada, filtrado, selección y fijación local.


- [Referencia de implementación](https://oruga-ui.com/components/taginput)
- [Fuente](https://oruga-ui.com/documentation/themes)
- [Fuente](https://oruga-ui.com/components/taginput)
- [Consulta la especificación complementaria](https://oruga-ui.com/documentation/)
- [Consulta la especificación complementaria](https://oruga-ui.com/documentation/themes)
- [Consulta la especificación complementaria](https://oruga-ui.com/components/taginput)
- [Consulta la especificación complementaria](https://oruga-ui.com/components/field)
- [Consulta la especificación complementaria](https://oruga-ui.com/components/icon)
- [Consulta la especificación complementaria](https://oruga-ui.com/components/button)
- [Referencia de código](https://oruga-ui.com/components/taginput)
- [Referencia de código](https://oruga-ui.com/documentation/configuration)
- [Introducción Plugin actual y registro explícito de componentes.](https://oruga-ui.com/documentation/)
- [Opciones de tema Límite de estilo opcional.](https://oruga-ui.com/documentation/themes)
- [Configuración Personalización global y local de clases.](https://oruga-ui.com/documentation/configuration)
- [Entrada de etiquetas Restricciones de vocabulario, modelo, límites y eliminación.](https://oruga-ui.com/components/taginput)
- [Autocompletado Filtrado, comportamiento de combobox anidado y popover nativo.](https://oruga-ui.com/components/autocomplete)
- [Campo Etiquetas visibles y mensajes de validación.](https://oruga-ui.com/components/field)
- [Icono Configuración del paquete de iconos.](https://oruga-ui.com/components/icon)
- [Fuente del tema predeterminado Configuración del tema oficial y origen de los tokens.](https://github.com/oruga-ui/theme-oruga)