# UI Óptago > Design system em CSS puro + JavaScript vanilla (sem build, sem dependências de framework) da Óptago. Todas as classes usam o prefixo `op-`, estados usam `is-` (`is-open`, `is-active`, `is-error`...), e a maior parte dos comportamentos interativos liga sozinha via atributos `data-op-*`, sem precisar escrever JS. API global em `window.OptagoUI`. Versão atual: `1.2.3`. Este arquivo é a referência otimizada para agentes de IA/LLMs que forem gerar HTML usando esta biblioteca. Para a documentação em prosa (humanos), veja [README.md](README.md). Para ver todos os componentes renderizados com exemplo de código, veja [index.html](index.html) (showcase). ## Instalação (escolha uma) CDN, versão fixa (recomendado em produção, sem definir versão especifica ele estará sempre na versão mais atual da biblioteca): ```html ``` npm: ```bash npm install ui-optago ``` ```html ``` Arquivos locais: copie `ui-optago.css` e `ui-optago.js` para o projeto e sirva localmente. ## Regras que um agente NÃO pode quebrar 1. **Sempre incluir os dois arquivos juntos**: `ui-optago.css` E `ui-optago.js`. O JS não é opcional: ele aplica o tema salvo, injeta fontes/ícones e liga todos os `data-op-*`. Sem ele, os componentes ficam sem interatividade e sem tema. 2. **NUNCA usar `defer` ou `async` no ``) e o tema passa a ser salvo num cookie com esse `Domain`, em vez de só `localStorage`. Assim, `app1.seusite.com` e `app2.seusite.com` compartilham a mesma escolha de tema automaticamente. Sem esse atributo, o comportamento continua sendo só `localStorage` (por app, isolado). O valor precisa começar com `.` e ser um domínio de verdade que a página atual pertence (não use domínios de terceiros). 8. **Ícones**: a lib usa Phosphor Icons (``), injetado automaticamente via CDN pelo JS. Não precisa adicionar ``/` ``` Ou copie o arquivo direto pro projeto e inclua localmente (`include` no PHP, import estático etc.). ## Arquivos do pacote - `ui-optago.css`, `ui-optago.js`: a lib em si (obrigatórios, sempre os dois juntos) - `optago-credit-dark.html`, `optago-credit-light.html`: selo de rodapé, independentes da lib - `index.html`: showcase com todos os componentes renderizados e botão "Copiar" pra cada exemplo - `README.md`: documentação em prosa para humanos - `llms.txt`: este arquivo