{"_id":"@alessandropontes/ds-gov","name":"@alessandropontes/ds-gov","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@alessandropontes/ds-gov","version":"0.1.0","description":"Biblioteca de Web Components nativos fiel ao Padrão Digital de Governo (gov.br DS) — sem Tailwind, HTML + Sass + Lit.","type":"module","license":"MIT","main":"./dist/ds-gov.js","module":"./dist/ds-gov.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/ds-gov.js"},"./styles.css":"./dist/ds-gov.css","./tokens.css":"./tokens/dist/tokens.css","./tokens.json":"./tokens/dist/tokens.json","./tokens.scss":"./tokens/dist/_tokens.scss"},"sideEffects":["**/*.css","**/*.scss","./src/index.ts","./dist/ds-gov.js"],"scripts":{"predev":"npm run tokens","dev":"vite","tokens":"tsx tokens/build.ts","tokens:contrast":"tsx tokens/check-contrast.ts","prebuild":"npm run tokens","build":"vite build && tsc","preview":"vite preview","pretest":"npm run tokens","test":"vitest run","test:watch":"vitest","lint":"eslint . && stylelint \"src/**/*.scss\"","format":"prettier --write .","ci":"npm run tokens:contrast && npm run tokens && npm run lint && npm run test && npm run build"},"dependencies":{"@govbr-ds/core":"^3.7.0","lit":"^3.3.1"},"devDependencies":{"@eslint/js":"^10.0.1","@fortawesome/fontawesome-free":"^6.7.2","@vitest/browser":"^5.0.0","@vitest/browser-playwright":"^5.0.0","eslint":"^10.9.1","globals":"^17.12.0","playwright":"^1.55.0","prettier":"^3.7.3","sass":"^1.93.2","stylelint":"^17.14.1","stylelint-config-standard-scss":"^17.0.0","tsx":"^4.23.13","typescript":"^5.8.3","typescript-eslint":"^8.56.1","vite":"^8.2.2","vitest":"^5.0.0"},"engines":{"node":">=20"},"gitHead":"3e8d9445d88e8703c570b96272a1c46eca511c9c","_id":"@alessandropontes/ds-gov@0.1.0","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-1UZRz0gbuvEVcd6JGjsSvZUz6x8SUF7y7vWUOtarI0Gzs8WBTz6DErz7bpd5matTN3mgkoNOHUX6rTBZnOt30g==","shasum":"f0db5f1717d4d5be336466e71364405d7c1c56ca","tarball":"https://registry.npmjs.org/@alessandropontes/ds-gov/-/ds-gov-0.1.0.tgz","fileCount":111,"unpackedSize":2756429,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIASS76cJRaXCGHO/Viqj10agi/zCAg5jrwr/bT1XdjNoAiAGYOzIdg5SWjcY/yrh/w8SfxKeK/ZNy8en4LWIRwW1UQ=="}]},"_npmUser":{"name":"alessandropontes","email":"japaweb@gmail.com"},"directories":{},"maintainers":[{"name":"alessandropontes","email":"japaweb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ds-gov_0.1.0_1788543297696_0.6878232061728504"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-04T17:34:57.457Z","0.1.0":"2026-09-04T17:34:57.902Z","modified":"2026-09-04T17:34:58.102Z"},"maintainers":[{"name":"alessandropontes","email":"japaweb@gmail.com"}],"description":"Biblioteca de Web Components nativos fiel ao Padrão Digital de Governo (gov.br DS) — sem Tailwind, HTML + Sass + Lit.","license":"MIT","readme":"# DS GOV\n\nBiblioteca de **Web Components nativos** fiel ao **Padrão Digital de Governo\n(gov.br DS)** — sem Tailwind, sem React. HTML + Sass/CSS clássico + JavaScript\n(Lit), construída sobre o [`@govbr-ds/core`](https://www.npmjs.com/package/@govbr-ds/core)\noficial.\n\n> Este projeto substitui a versão anterior (React 19 + TanStack Start +\n> Tailwind CSS v4), que não seguia a stack de distribuição oficial do gov.br DS.\n> Veja o plano de migração em `.claude` / histórico de commits.\n\n## Por que Web Components?\n\nO gov.br DS é distribuído oficialmente como:\n\n- **`@govbr-ds/core`** — CSS/SCSS compilado, metodologia BEM (`.br-button`,\n `.br-input`, `.br-card`…), **sem Tailwind**;\n- **`@govbr-ds/webcomponents`** — Custom Elements nativos (compilados com Stencil).\n\nEste pacote segue a mesma filosofia: componentes `` (Lit + Shadow DOM)\nque renderizam o markup `.br-*` oficial e consomem o CSS do `@govbr-ds/core`\ndiretamente — nenhuma classe utilitária própria, nenhum framework de UI.\n\n## Uso\n\n```bash\nnpm install @alessandropontes/ds-gov\n```\n\nCom bundler (Vite, webpack, esbuild…):\n\n```js\nimport \"@alessandropontes/ds-gov\"; // registra os e injeta o CSS via seu bundler\n```\n\n```html\nSalvar\nNovo\nOperação realizada com sucesso.\n```\n\nSem bundler (HTML puro):\n\n```html\n\n\n```\n\n## Estrutura\n\n```\ntokens/\n├── source/ # fonte da verdade dos design tokens (cor, tipografia, espaçamento…)\n├── build.ts # gera tokens/dist/{_tokens.scss, tokens.css, tokens.json}\n└── check-contrast.ts\n\nsrc/\n├── core/ # base-element (Lit + Shadow DOM), base-styles (tokens\n│ # compartilhados), ícones inline\n├── styles/ # fontes (Rawline self-hosted) + tema global\n└── components/ # um diretório por componente (ds-button, ds-tag, …)\n\ndev/ # playground manual (um .html por componente)\n```\n\n## Arquitetura de estilo\n\nCada componente é um Custom Element com Shadow DOM que adota:\n\n1. **`tokenStyles`** — os tokens do `@govbr-ds/core` (`core-tokens.css`) +\n os tokens `--ds-*` deste projeto, compartilhados (parseados uma única vez);\n2. o **slice de CSS oficial** do componente (`@govbr-ds/core/dist/components//.min.css`),\n importado como string (`?inline`) — o mesmo CSS que o gov.br publica;\n3. um pequeno reset (`hostReset`).\n\nIsso garante fidelidade pixel-a-pixel com o gov.br DS sem duplicar CSS: quando\no pacote oficial lança uma atualização visual, basta atualizar a dependência\n`@govbr-ds/core`.\n\nA folha `dist/ds-gov.css` (gerada a partir de `src/index.ts`) cobre o **CSS\nglobal do core + fontes Rawline + tema base**, para uso em light DOM / páginas\nque não passam por um bundler.\n\n## Tokens\n\nFonte única em `tokens/source/*.ts` (paleta gov.br, tipografia Rawline,\nespaçamento base-8, raio, sombras, breakpoints `xs·sm·md·lg·xl`). Rodar\n`npm run tokens` gera:\n\n- `tokens/dist/tokens.css` — custom properties `--ds-*`;\n- `tokens/dist/_tokens.scss` — variáveis `$ds-*` (uso em Sass próprio);\n- `tokens/dist/tokens.json` — formato W3C Design Tokens, importável no\n plugin **Tokens Studio for Figma**.\n\n## Scripts\n\n| Comando | O que faz |\n| ------------------------- | -------------------------------------------- |\n| `npm run dev` | Playground em `dev/` (Vite) |\n| `npm run tokens` | Gera os artefatos de token |\n| `npm run tokens:contrast` | Audita contraste WCAG AA da paleta |\n| `npm run build` | Type-check + build da biblioteca (`dist/`) |\n| `npm run test` | Testes (Vitest, browser real via Playwright) |\n| `npm run lint` | ESLint + Stylelint |\n| `npm run ci` | Sequência completa (mesma do CI) |\n\n## Componentes disponíveis\n\n**Lote 1 — fundação:** `ds-button` · `ds-tag` · `ds-message` · `ds-divider` · `ds-loading`\n\n**Lote 2 — formulários:** `ds-checkbox` · `ds-radio` + `ds-radio-group` ·\n`ds-switch` · `ds-input` · `ds-textarea`\n\n> `` roda em Shadow DOM isolado, então o agrupamento nativo por\n> `name` não atravessa os shadow roots — por isso a exclusividade é\n> coordenada por `` (ouve `ds-change` dos filhos e desmarca\n> os demais). Sempre use `` dentro de um ``.\n\n**Lote 3 — combobox e arquivos:** `ds-select` · `ds-upload`\n\n> `ds-select` reconstrói o combobox customizado do gov.br: `.br-input`\n> disparando uma `.br-list`, com navegação por teclado (setas, Home/End,\n> Enter, Esc) — não é um `` interno sincronizado (útil se\n> o consumidor ler `input.files` diretamente).\n\n**Lote 4 — navegação e layout:** `ds-breadcrumb` · `ds-tabs` + `ds-tab-panel` ·\n`ds-accordion` + `ds-accordion-item` · `ds-footer` · `ds-header`\n\n> `ds-tabs`/`ds-accordion` seguem o mesmo padrão declarativo do\n> `ds-radio-group`: filhos leves em light DOM (``,\n> ``, sem Shadow DOM própria) cujo conteúdo é\n> projetado via `slot` nomeado para dentro do componente pai — o cabeçalho\n> (aba/botão do item) é sempre renderizado pelo pai a partir de `label`.\n>\n> `ds-header`/`ds-footer` são simplificações conscientes do `.br-header` e\n> `.br-footer` oficiais, que dependem de peças ainda não portadas:\n>\n> - o menu mobile do `.br-header` é o componente `.br-menu` (painel deslizante\n> completo) — aqui é uma lista simples que abre abaixo do cabeçalho;\n> - os grupos de função/login do `.br-header` usam dropdowns — aqui são\n> botões diretos (`ds-header-action`, `ds-login`, `ds-search`);\n> - links de redes sociais no `ds-footer` são texto (sem ícones de marca —\n> o catálogo de ícones inline ainda não cobre logos de redes sociais).\n\n**Lote 5 — sobreposição:** `ds-modal` · `ds-drawer` · `ds-tooltip` · `ds-toast`\n\n> `ds-modal` usa `.br-scrim.foco` + `.br-modal` oficiais — fecha por botão,\n> Escape ou clique fora (desative com `persistent`), trava o scroll do body\n> e devolve o foco ao elemento que o abriu.\n>\n> `ds-drawer` não tem equivalente oficial — reaproveita a estrutura real do\n> `.br-menu` (o painel deslizante do gov.br, normalmente o menu mobile do\n> header), generalizada para qualquer conteúdo. O core não anima a\n> abertura/fechamento (alterna `display` puro) — `ds-drawer` também não.\n>\n> `ds-tooltip` reproduz `.br-tooltip`, mas calcula a posição manualmente em\n> vez de trazer o Popper.js só para isso (o `position: fixed` evita o\n> problema de `offsetParent` atravessando o shadow root).\n>\n> `ds-toast` também não tem equivalente oficial (o `.br-notification` do\n> gov.br é uma central de notificações com abas, não um toast temporário) —\n> reaproveita o visual de `.br-message` com posicionamento fixo, empilhamento\n> e auto-dismiss configurável (`duration`, `0` desativa).\n\n**Lote 6 — nicho:** `ds-table` · `ds-step` · `ds-carousel` + `ds-carousel-item`\n\n> `ds-table` combina o estilo base do elemento `` (bordas, cabeçalho,\n> hover — também embutido em `core.css` fora de `dist/components/table`,\n> igual ao grid; extraído para `src/styles/table-base.css`) com o \"chrome\"\n> de `.br-table`. A barra de busca/seleção/ações do `.br-table` oficial\n> (dropdown de ações, busca embutida) não foi portada — aqui a ordenação por\n> coluna (`columns[].sortable`) e a seleção de linhas por checkbox\n> (`selectable`) são resolvidas diretamente pelo componente.\n>\n> `ds-step` cobre as variantes `default`/`simple`/`void`, posições de rótulo\n> e status de alerta (`success`/`info`/`warning`/`danger`) — a variante rara\n> `type=\"text\"` do core não foi portada.\n>\n> `ds-carousel`/`ds-carousel-item` seguem o padrão declarativo de\n> `ds-tabs`/`ds-accordion`; os indicadores reaproveitam\n> `.br-step[data-type=simple]`. Setas prev/next usam os ícones inline do\n> projeto em vez de FontAwesome. Suporta `autoplay` + `interval` (pausa no\n> hover), navegação por teclado (setas) — sem anúncio em live region para\n> leitores de tela a cada troca de slide (gap conhecido).\n\n## Grid de 12 colunas\n\nO `@govbr-ds/core` não publica o grid (`.row`/`.col-*`/`.container*`) como\narquivo separado — está embutido em `dist/core.css` junto de outros\nutilitários. Como qualquer página que importa `@alessandropontes/ds-gov` já carrega\no `core.min.css` completo, o grid funciona direto em HTML puro (light DOM):\n\n```html\n
\n
Metade em telas ≥ 992px
\n
Metade em telas ≥ 992px
\n
\n```\n\nO bloco também foi extraído verbatim para `src/styles/grid.css`, para uso\ncomo slice isolado dentro do Shadow DOM de componentes (`ds-footer` já usa\nisso para distribuir suas colunas).\n\n## Formulários e `` nativo\n\nSó o `ds-select` implementa `ElementInternals`/`formAssociated` até agora.\n`ds-input`, `ds-textarea`, `ds-checkbox`, `ds-radio`, `ds-switch` e\n`ds-upload` têm um ``/`