ds-tis 1.0.0-beta.10

package/LICENSE

@@ -0,0 +1,49 @@
+Proprietary Software License
+
+Copyright (c) 2026. Todos os direitos reservados.
+CNPJ: 41.422.344/0001-76. All rights reserved.
+
+This software and associated documentation files (the "Software") are the
+exclusive property of the copyright holder. The Software is provided solely
+for use under a separate written agreement between the copyright holder and
+the authorized licensee.
+
+RESTRICTIONS
+
+Unless expressly authorized in writing by the copyright holder, you may not:
+
+1. Copy, reproduce, or duplicate the Software in whole or in part.
+2. Modify, adapt, translate, or create derivative works based on the Software.
+3. Distribute, sublicense, sell, rent, lease, or otherwise transfer the
+   Software or any rights in the Software to any third party.
+4. Reverse engineer, disassemble, decompile, or otherwise attempt to derive
+   the source code of the Software.
+5. Remove or alter any proprietary notices, labels, or marks on the Software.
+6. Use the Software for any commercial purpose without a valid license
+   agreement issued by the copyright holder.
+
+PERMITTED USE
+
+Viewing the source code for evaluation purposes is permitted solely to
+assess whether to enter into a license agreement with the copyright holder.
+No other use is granted by this permission.
+
+INTELLECTUAL PROPERTY
+
+All title, ownership rights, and intellectual property rights in and to the
+Software remain with the copyright holder. No rights are granted other than
+those expressly stated in a separate written license agreement.
+
+DISCLAIMER OF WARRANTIES
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. IN NO EVENT SHALL
+THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF,
+OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+CONTACT
+
+To inquire about licensing, contact the copyright holder directly.

package/README.md

@@ -0,0 +1,125 @@
+# Design System Core
+
+[![Versão](https://img.shields.io/badge/vers%C3%A3o-1.0.0--beta.10-blue)](./CHANGELOG.md) [![Licença](https://img.shields.io/badge/licen%C3%A7a-Propriet%C3%A1ria-red)](./LICENSE)
+
+Design system white-label em CSS puro, com tokens DTCG em arquitetura 3-layer (Foundation/Core → Semantic/System → Component), componentes documentados, modos light/dark e paleta brand única customizável.
+
+## Instalação
+
+O pacote beta é distribuído pelo npm registry. Instale a versão corrente com:
+
+```bash
+npm install ds-tis
+```
+
+Durante a fase beta, as dist-tags npm `latest` e `beta` apontam para a mesma
+pré-release. Use `npm install ds-tis@beta` quando quiser explicitar o canal.
+
+Em produção, prefira o pin exato:
+
+```json
+{
+  "dependencies": {
+    "ds-tis": "1.0.0-beta.10"
+  }
+}
+```
+
+Como fallback, o mesmo release pode ser instalado pela tag GitHub: `npm install github:tis-experience/ds-tis#v1.0.0-beta.10`.
+
+Import principal (o nome do pacote continua `ds-tis`):
+
+```js
+import 'ds-tis/css';
+```
+
+HTML estático ou protótipo sem bundler:
+
+```html
+<link rel="stylesheet" href="./node_modules/ds-tis/css/design-system.css">
+```
+
+Componentes interativos mantêm CSS puro para a anatomia visual. Quando
+`runtime.level` é `required` em `docs/api/components.json`, o módulo público é
+**obrigatório** para cumprir o contrato interativo e acessível. Os runtimes atuais
+são Accordion, Combobox, Modal, Action Menu, Tabs e Tooltip:
+
+```js
+import { initAccordions, destroyAccordions } from 'ds-tis/accordion';
+import { initComboboxes, destroyComboboxes } from 'ds-tis/combobox';
+import { initModals, destroyModals } from 'ds-tis/modal';
+import { initActionMenus, destroyActionMenus } from 'ds-tis/menu';
+import { initTabs, destroyTabs } from 'ds-tis/tabs';
+import { initTooltips, destroyTooltips } from 'ds-tis/tooltip';
+
+initAccordions();
+initComboboxes();
+initModals();
+initActionMenus();
+initTabs();
+initTooltips();
+
+// ao desmontar a view/subtree:
+destroyAccordions();
+destroyComboboxes();
+destroyModals();
+destroyActionMenus();
+destroyTabs();
+destroyTooltips();
+```
+
+Accordion, Combobox, Modal, Action Menu, Tabs e Tooltip concluíram o gate
+executável da ADR-020 e estão **App-ready**. Seus módulos continuam obrigatórios
+quando os componentes forem usados, pois mantêm o contrato interativo e
+acessível publicado.
+
+O pacote também exporta o theme engine e templates HTML:
+
+```js
+import { applyTheme, toCssSnippet } from 'ds-tis/theme';
+```
+
+Desenvolvimento local do próprio DS:
+
+```bash
+git clone https://github.com/tis-experience/ds-tis.git
+cd ds-tis
+npm install
+npm run build:all
+```
+
+Depois sirva o diretório estático (`python3 -m http.server` ou equivalente). Docs públicas: [GitHub Pages](https://tis-experience.github.io/ds-tis/).
+
+## Documentação completa
+
+Toda a documentação vive em `docs/` e pode ser servida como site estático. Lá estão: componentes com preview ao vivo, foundations, guias de tema, acessibilidade e documentação, ADRs navegáveis, inventário de tokens, e consumo por IA em `docs/llms.txt`.
+
+O pacote também distribui contexto machine-readable para ferramentas e agents:
+`ds-tis/metadata` (manifesto de consumo), `ds-tis/metadata/components`,
+`ds-tis/metadata/tokens`, `ds-tis/agent-guide`, `ds-tis/llms` e
+`ds-tis/llms-full`. O manifesto declara a estratégia responsiva
+`intrinsic-first`: não há breakpoints públicos automáticos; layout, densidade e
+troca de composição pertencem ao app consumidor.
+
+Antes de usar um componente em fluxo crítico, consulte seu `readiness` na
+[API pública de componentes](https://tis-experience.github.io/ds-tis/docs/api/components.json)
+ou no inventário: `app-ready` é recomendado para aplicações, `composition`
+mantém orquestração no app e `experimental` ainda possui gaps declarados em
+`readinessNotes`.
+
+Links rápidos:
+
+- [Getting Started](./index.html)
+- [Token Architecture](./docs/token-architecture.html)
+- [Documentation Guidelines](./docs/documentation-guidelines.html)
+- [Guia para agents consumidores](./docs/agent-consumer-usage.html) — como implementar telas em projetos consumidores usando o DS TIS
+- [Component Inventory](./docs/component-inventory.md)
+- [Decisões (ADRs)](./docs/decisions/)
+- [Changelog](./CHANGELOG.md)
+- [Como contribuir](./CONTRIBUTING.md)
+- [Instruções para agentes IA](./AGENTS.md) — canônico (Claude Code, Codex, Gemini, Cursor, etc.)
+- [Integrações para agentes IA](./docs/agent-integrations.md) — Figma, GitHub, MCPs e adapters locais
+
+## Licença
+
+Licença proprietária. Todos os direitos reservados. Ver [LICENSE](./LICENSE).

package/css/base/forced-colors.css

@@ -0,0 +1,62 @@
+/* ============================================================
+   Forced colors (Windows High Contrast) — WCAG 1.4.11 support
+   Usa system colors para preservar contraste quando o SO
+   substitui paletas customizadas.
+   ============================================================ */
+
+@media (forced-colors: active) {
+  .ds-button:focus-visible,
+  .ds-link:focus-visible,
+  .ds-input__field:focus-visible,
+  .ds-select__field:focus-visible,
+  .ds-textarea__field:focus-visible,
+  .ds-combobox__input:focus-visible,
+  .ds-checkbox:focus-visible,
+  .ds-radio:focus-visible,
+  .ds-toggle:focus-visible,
+  .ds-breadcrumb__item:focus-visible,
+  .ds-menu__item:focus-visible,
+  .ds-modal__close:focus-visible,
+  .ds-tabs__tab:focus-visible,
+  .ds-accordion__trigger:focus-visible,
+  .ds-pagination__item:focus-visible {
+    outline: 2px solid CanvasText;
+    outline-offset: 2px;
+  }
+
+  .ds-checkbox:checked,
+  .ds-checkbox:indeterminate {
+    background-color: Highlight;
+    border-color: Highlight;
+  }
+
+  .ds-checkbox:checked::after,
+  .ds-checkbox:indeterminate::after {
+    background-color: HighlightText;
+  }
+
+  .ds-radio:checked {
+    border-color: Highlight;
+  }
+
+  .ds-radio:checked::after {
+    background-color: Highlight;
+  }
+
+  .ds-toggle:checked {
+    background-color: Highlight;
+    border-color: Highlight;
+  }
+
+  .ds-toggle__thumb {
+    background-color: Canvas;
+  }
+
+  .ds-modal-overlay {
+    background-color: Canvas;
+  }
+
+  .ds-modal {
+    border: 1px solid CanvasText;
+  }
+}

package/css/base/icons.css

@@ -0,0 +1,73 @@
+/* ============================================================
+   Iconography helpers
+   ============================================================ */
+
+.ds-icon {
+  width: var(--ds-size-md);
+  height: var(--ds-size-md);
+  color: var(--ds-icon-color-default);
+  stroke: currentColor;
+  stroke-width: var(--ds-icon-stroke-width-regular-24);
+  fill: none;
+  flex-shrink: 0;
+}
+
+.ds-icon--16 {
+  width: var(--ds-size-xs);
+  height: var(--ds-size-xs);
+  stroke-width: var(--ds-icon-stroke-width-regular-16);
+}
+
+.ds-icon--20 {
+  width: var(--ds-size-sm);
+  height: var(--ds-size-sm);
+  stroke-width: var(--ds-icon-stroke-width-regular-20);
+}
+
+.ds-icon--24 {
+  width: var(--ds-size-md);
+  height: var(--ds-size-md);
+  stroke-width: var(--ds-icon-stroke-width-regular-24);
+}
+
+.ds-icon--32 {
+  width: var(--ds-size-lg);
+  height: var(--ds-size-lg);
+  stroke-width: var(--ds-icon-stroke-width-regular-32);
+}
+
+.ds-icon--strong.ds-icon--16 {
+  stroke-width: var(--ds-icon-stroke-width-strong-16);
+}
+
+.ds-icon--strong.ds-icon--20 {
+  stroke-width: var(--ds-icon-stroke-width-strong-20);
+}
+
+.ds-icon--strong.ds-icon--24 {
+  stroke-width: var(--ds-icon-stroke-width-strong-24);
+}
+
+.ds-icon--subtle {
+  color: var(--ds-icon-color-subtle);
+}
+
+.ds-icon--inverse {
+  color: var(--ds-icon-color-inverse);
+}
+
+.ds-icon--success {
+  color: var(--ds-icon-color-success);
+}
+
+.ds-icon--warning {
+  color: var(--ds-icon-color-warning);
+}
+
+.ds-icon--error {
+  color: var(--ds-icon-color-error);
+}
+
+.ds-icon--disabled {
+  color: var(--ds-icon-color-disabled);
+}

package/css/base/index.css

@@ -0,0 +1,4 @@
+@import 'reset.css';
+@import 'typography.css';
+@import 'icons.css';
+@import 'forced-colors.css';

package/css/base/reset.css

@@ -0,0 +1,80 @@
+/* Google Fonts — Inter + DM Mono */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
+
+*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; padding: 0; }
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scroll-behavior: smooth;
+}
+body {
+  font-family: var(--ds-body-font-family-sans);
+  font-size: var(--ds-body-font-size-md);
+  line-height: var(--ds-body-line-height-md);
+  color: var(--ds-content-strong);
+  background-color: var(--ds-background-default);
+}
+img, picture, video, canvas, svg { display: block; max-width: 100%; }
+input, button, textarea, select { font: inherit; }
+p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
+
+/* ---------------------------------------------------------
+   Code / Pre
+   --------------------------------------------------------- */
+code, pre {
+  font-family: var(--ds-body-font-family-mono);
+  font-size: var(--ds-body-font-size-sm);
+}
+
+code {
+  background-color: var(--ds-background-subtle);
+  padding: var(--ds-space-2xs) var(--ds-space-xs);
+  border-radius: var(--ds-radius-sm);
+  color: var(--ds-link-content-default);
+}
+
+pre {
+  background-color: var(--ds-background-inverse);
+  color: var(--ds-content-inverse);
+  padding: var(--ds-space-lg);
+  border-radius: var(--ds-radius-lg);
+  overflow-x: auto;
+  margin-bottom: var(--ds-space-lg);
+}
+
+pre code {
+  background: none;
+  padding: 0;
+  color: inherit;
+  font-size: var(--ds-body-font-size-sm);
+}
+
+/* ---------------------------------------------------------
+   Tables
+   --------------------------------------------------------- */
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th, td {
+  padding: var(--ds-space-md) var(--ds-space-lg);
+  text-align: left;
+  border-bottom: var(--ds-border-width-default) solid var(--ds-border-default);
+}
+
+th {
+  font-weight: var(--ds-body-font-weight-semibold);
+  font-size: var(--ds-body-font-size-sm);
+  color: var(--ds-content-default);
+  text-transform: uppercase;
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/css/base/typography.css

@@ -0,0 +1,211 @@
+/* ==========================================================================
+   Typography utility classes — alinhadas 1:1 com Text Styles do Figma
+   Naming: .ds-text-{category}-{size}
+   Cada utility espelha um Text Style equivalente em Figma:
+     display/2xl..sm  →  .ds-text-display-{2xl..sm}
+     heading/xl..xs   →  .ds-text-heading-{xl..xs}
+     body/lg..xs      →  .ds-text-body-{lg..xs}
+     label/lg, md, xs →  .ds-text-label-{lg, md, xs}
+     overline/md, sm  →  .ds-text-overline-{md, sm}
+     code/md, sm      →  .ds-text-code-{md, sm}
+   Tokens consumidos exclusivamente da camada Semantic (body.*).
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   Display — Inter Bold, line-height pareado, letter-spacing tight (sm: normal)
+   -------------------------------------------------------------------------- */
+
+.ds-text-display-2xl {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-bold);
+  font-size: var(--ds-body-font-size-9xl);       /* 72px */
+  line-height: var(--ds-body-line-height-9xl);   /* 90px */
+  letter-spacing: var(--ds-body-letter-spacing-tight);
+}
+
+.ds-text-display-xl {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-bold);
+  font-size: var(--ds-body-font-size-8xl);       /* 64px */
+  line-height: var(--ds-body-line-height-8xl);   /* 80px */
+  letter-spacing: var(--ds-body-letter-spacing-tight);
+}
+
+.ds-text-display-lg {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-bold);
+  font-size: var(--ds-body-font-size-7xl);       /* 56px */
+  line-height: var(--ds-body-line-height-7xl);   /* 72px */
+  letter-spacing: var(--ds-body-letter-spacing-tight);
+}
+
+.ds-text-display-md {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-bold);
+  font-size: var(--ds-body-font-size-6xl);       /* 48px */
+  line-height: var(--ds-body-line-height-6xl);   /* 64px */
+  letter-spacing: var(--ds-body-letter-spacing-tight);
+}
+
+.ds-text-display-sm {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-bold);
+  font-size: var(--ds-body-font-size-5xl);       /* 40px */
+  line-height: var(--ds-body-line-height-5xl);   /* 48px */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+/* --------------------------------------------------------------------------
+   Heading — Inter, xl bold, lg–xs semibold; letter-spacing tight em xl/lg, normal demais
+   -------------------------------------------------------------------------- */
+
+.ds-text-heading-xl {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-bold);
+  font-size: var(--ds-body-font-size-4xl);       /* 32px */
+  line-height: var(--ds-body-line-height-4xl);   /* 44px */
+  letter-spacing: var(--ds-body-letter-spacing-tight);
+}
+
+.ds-text-heading-lg {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-semibold);
+  font-size: var(--ds-body-font-size-3xl);       /* 28px */
+  line-height: var(--ds-body-line-height-3xl);   /* 40px */
+  letter-spacing: var(--ds-body-letter-spacing-tight);
+}
+
+.ds-text-heading-md {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-semibold);
+  font-size: var(--ds-body-font-size-2xl);       /* 24px */
+  line-height: var(--ds-body-line-height-2xl);   /* 34px */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+.ds-text-heading-sm {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-semibold);
+  font-size: var(--ds-body-font-size-xl);        /* 20px */
+  line-height: var(--ds-body-line-height-xl);    /* 32px */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+.ds-text-heading-xs {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-semibold);
+  font-size: var(--ds-body-font-size-lg);        /* 18px */
+  line-height: var(--ds-body-line-height-lg);    /* 28px */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+/* --------------------------------------------------------------------------
+   Body — Inter Regular, line-height pareado conforme Text Style do Figma
+   (body/lg usa line-height/xl em Figma — não lg)
+   -------------------------------------------------------------------------- */
+
+.ds-text-body-lg {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-regular);
+  font-size: var(--ds-body-font-size-lg);        /* 18px */
+  line-height: var(--ds-body-line-height-xl);    /* 32px (Figma body/lg = lh xl) */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+.ds-text-body-md {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-regular);
+  font-size: var(--ds-body-font-size-md);        /* 16px */
+  line-height: var(--ds-body-line-height-md);    /* 24px */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+.ds-text-body-sm {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-regular);
+  font-size: var(--ds-body-font-size-sm);        /* 14px */
+  line-height: var(--ds-body-line-height-sm);    /* 20px */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+.ds-text-body-xs {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-regular);
+  font-size: var(--ds-body-font-size-xs);        /* 12px */
+  line-height: var(--ds-body-line-height-xs);    /* 18px */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+/* --------------------------------------------------------------------------
+   Label — Inter Bold (Figma: label/* é Bold). Letter-spacing normal (zero).
+   .ds-text-label-sm removido (Text Style label/sm deletado em Figma)
+   -------------------------------------------------------------------------- */
+
+.ds-text-label-lg {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-bold);
+  font-size: var(--ds-body-font-size-md);        /* 16px */
+  line-height: var(--ds-body-line-height-md);    /* 24px */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+.ds-text-label-md {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-bold);
+  font-size: var(--ds-body-font-size-sm);        /* 14px */
+  line-height: var(--ds-body-line-height-sm);    /* 20px */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+/* label-xs: Figma label/xs = 12px (Bump de 11→12 nesta migração) */
+.ds-text-label-xs {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-bold);
+  font-size: var(--ds-body-font-size-xs);        /* 12px */
+  line-height: var(--ds-body-line-height-xs);    /* 18px */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+/* --------------------------------------------------------------------------
+   Overline — Inter Semibold, letter-spacing wider (1.5px), uppercase
+   .ds-text-overline-sm bump de 11→12 (alinhando com Figma overline/sm)
+   -------------------------------------------------------------------------- */
+
+.ds-text-overline-md {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-semibold);
+  font-size: var(--ds-body-font-size-sm);        /* 14px */
+  line-height: var(--ds-body-line-height-sm);    /* 20px */
+  letter-spacing: var(--ds-body-letter-spacing-wider);
+  text-transform: uppercase;
+}
+
+.ds-text-overline-sm {
+  font-family: var(--ds-body-font-family-sans);
+  font-weight: var(--ds-body-font-weight-semibold);
+  font-size: var(--ds-body-font-size-xs);        /* 12px */
+  line-height: var(--ds-body-line-height-xs);    /* 18px */
+  letter-spacing: var(--ds-body-letter-spacing-wider);
+  text-transform: uppercase;
+}
+
+/* --------------------------------------------------------------------------
+   Code — DM Mono Regular
+   .ds-text-caption-{md,sm} removidos (Text Styles caption/* deletados em Figma)
+   -------------------------------------------------------------------------- */
+
+.ds-text-code-md {
+  font-family: var(--ds-body-font-family-mono);
+  font-weight: var(--ds-body-font-weight-regular);
+  font-size: var(--ds-body-font-size-sm);        /* 14px */
+  line-height: var(--ds-body-line-height-md);    /* 24px (Figma code/md = lh md) */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}
+
+.ds-text-code-sm {
+  font-family: var(--ds-body-font-family-mono);
+  font-weight: var(--ds-body-font-weight-regular);
+  font-size: var(--ds-body-font-size-sm);        /* 14px (Figma code/sm = sm igual code/md, só lh diferente) */
+  line-height: var(--ds-body-line-height-sm);    /* 20px */
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+}