npm - ds-tis - Versions diffs - 1.0.0-beta.10 - Mend

ds-tis 1.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

package/LICENSE +49 -0
package/README.md +125 -0
package/css/base/forced-colors.css +62 -0
package/css/base/icons.css +73 -0
package/css/base/index.css +4 -0
package/css/base/reset.css +80 -0
package/css/base/typography.css +211 -0
package/css/components/accordion.css +153 -0
package/css/components/alert.css +161 -0
package/css/components/avatar.css +76 -0
package/css/components/badge.css +83 -0
package/css/components/breadcrumb.css +58 -0
package/css/components/button.css +364 -0
package/css/components/card.css +159 -0
package/css/components/checkbox.css +296 -0
package/css/components/combobox.css +330 -0
package/css/components/divider.css +20 -0
package/css/components/form-field.css +137 -0
package/css/components/index.css +28 -0
package/css/components/input.css +356 -0
package/css/components/link.css +67 -0
package/css/components/menu.css +246 -0
package/css/components/modal.css +236 -0
package/css/components/pagination.css +132 -0
package/css/components/radio.css +280 -0
package/css/components/select.css +399 -0
package/css/components/skeleton.css +52 -0
package/css/components/spinner.css +59 -0
package/css/components/tabs.css +79 -0
package/css/components/textarea.css +218 -0
package/css/components/toggle.css +202 -0
package/css/components/tooltip.css +116 -0
package/css/design-system.css +13 -0
package/css/tokens/generated/component.css +720 -0
package/css/tokens/generated/foundation.css +282 -0
package/css/tokens/generated/index.css +5 -0
package/css/tokens/generated/theme-dark.css +243 -0
package/css/tokens/generated/theme-light.css +244 -0
package/css/tokens/index.css +6 -0
package/css/utilities/elevation.css +24 -0
package/css/utilities/index.css +2 -0
package/css/utilities/layout.css +132 -0
package/docs/agent-consumer-usage.en.md +322 -0
package/docs/agent-consumer-usage.md +294 -0
package/docs/api/adrs.json +186 -0
package/docs/api/components.json +2071 -0
package/docs/api/consumer-context.json +66 -0
package/docs/api/foundations.json +94 -0
package/docs/api/tokens.json +6839 -0
package/docs/llms-full.txt +23699 -0
package/docs/llms.txt +109 -0
package/docs/templates/contact.html +364 -0
package/docs/templates/dashboard.html +318 -0
package/docs/templates/index.html +232 -0
package/docs/templates/login.html +286 -0
package/docs/templates/settings.html +365 -0
package/docs/templates/signup.html +350 -0
package/js/accordion.js +192 -0
package/js/combobox.js +263 -0
package/js/menu.js +301 -0
package/js/modal.js +256 -0
package/js/package.json +3 -0
package/js/tabs.js +200 -0
package/js/theme/apply.js +75 -0
package/js/theme/brand-contrast-audit.js +133 -0
package/js/theme/color.js +149 -0
package/js/theme/config-schema.js +40 -0
package/js/theme/contrast.js +76 -0
package/js/theme/export.js +118 -0
package/js/theme/index.js +21 -0
package/js/theme/overlay.js +29 -0
package/js/theme/package.json +3 -0
package/js/theme/palette.js +103 -0
package/js/theme/radius.js +76 -0
package/js/theme/semantic-mapper.js +138 -0
package/js/theme/typography.js +33 -0
package/js/theme/url-state.js +52 -0
package/js/tooltip.js +227 -0
package/package.json +139 -0

package/docs/templates/dashboard.html ADDED Viewed

@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="pt">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dashboard — Design System</title>
+  <link rel="stylesheet" href="../../css/design-system.css">
+  <link rel="stylesheet" href="../layout.css">
+  <script>
+    (function(){var l=localStorage.getItem('ds-lang');if(l)document.documentElement.setAttribute('lang',l)})();
+  </script>
+</head>
+<body>
+<header class="ds-site-header">
+  <div style="display:flex;align-items:center;gap:var(--ds-dimension-16)">
+    <button class="ds-menu-toggle" id="menu-toggle" aria-label="Toggle navigation" aria-expanded="false">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+    </button>
+    <a href="../../index.html" class="ds-site-header__brand" aria-label="TIS Design System">
+      <img class="ds-site-header__logo" src="../assets/logo-tis-mark.svg" alt="TIS" width="36" height="36">
+      <span class="ds-site-header__title ds-site-header__title--brand">TIS</span>
+      <span class="ds-site-header__brand-separator" aria-hidden="true"></span>
+      <span class="ds-site-header__title ds-site-header__title--product">Design System</span>
+    </a>
+  </div>
+  <div class="ds-site-header__actions">
+    <select class="ds-theme-switcher__select" id="lang-switcher" aria-label="Language">
+      <option value="pt">PT</option>
+      <option value="en">EN</option>
+    </select>
+    <button class="ds-button ds-button--ghost ds-button--sm" id="mode-toggle" aria-pressed="false" aria-label="Toggle dark mode"><svg class="ds-button__icon ds-site-header__mode-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg><span class="ds-button__label">Dark</span></button>
+  </div>
+</header>
+<div class="ds-sidebar-overlay" id="sidebar-overlay"></div>
+<nav class="ds-sidebar" id="sidebar" aria-label="Main navigation"></nav>
+<main class="ds-main">
+  <!-- 1. HEADER -->
+  <div class="ds-section">
+    <h1 class="ds-section__title">Dashboard</h1>
+    <p class="ds-section__subtitle">
+      <span data-lang="pt">Painel de controle com métricas em cards, abas de conteúdo, estado de carregamento via Skeleton e alert contextual. Base para produtos SaaS e apps de gestão.</span>
+      <span data-lang="en">Control panel with metric cards, content tabs, Skeleton loading state, and contextual alert. Foundation for SaaS products and management apps.</span>
+    </p>
+    <div style="display:flex;flex-wrap:wrap;gap:var(--ds-dimension-8);margin-top:var(--ds-dimension-16)">
+      <span class="ds-badge ds-badge--neutral ds-badge--subtle">Card</span>
+      <span class="ds-badge ds-badge--neutral ds-badge--subtle">Tabs</span>
+      <span class="ds-badge ds-badge--neutral ds-badge--subtle">Badge</span>
+      <span class="ds-badge ds-badge--neutral ds-badge--subtle">Avatar</span>
+      <span class="ds-badge ds-badge--neutral ds-badge--subtle">Skeleton</span>
+      <span class="ds-badge ds-badge--neutral ds-badge--subtle">Alert</span>
+      <span class="ds-badge ds-badge--neutral ds-badge--subtle">Button</span>
+    </div>
+  </div>
+  <!-- 2. PREVIEW -->
+  <div class="ds-subsection">
+    <h2 class="ds-subsection__title">Preview</h2>
+    <div class="ds-preview">
+      <div class="ds-preview__tabs">
+        <button class="ds-preview__tab ds-preview__tab--active" data-tab="preview">Preview</button>
+        <button class="ds-preview__tab" data-tab="code">Code</button>
+                <button type="button" class="ds-button ds-button--ghost ds-button--sm ds-preview__action" onclick="openPreviewInNewTab()" aria-label="Abrir preview em nova aba"><svg class="ds-button__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg><span class="ds-button__label">Abrir em nova aba</span></button>
+      </div>
+      <div class="ds-preview__canvas" style="padding:0;display:block">
+        <div style="background:var(--ds-background-subtle);padding:var(--ds-dimension-32);min-height:640px">
+          <!-- App header row -->
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--ds-dimension-32)">
+            <div>
+              <h2 style="font-size:var(--ds-body-font-size-2xl);font-weight:var(--ds-body-font-weight-bold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-4)">
+                <span data-lang="pt">Visão geral</span><span data-lang="en">Overview</span>
+              </h2>
+              <p style="font-size:var(--ds-body-font-size-sm);color:var(--ds-content-default);margin:0">
+                <span data-lang="pt">Período: últimos 30 dias</span><span data-lang="en">Period: last 30 days</span>
+              </p>
+            </div>
+            <div style="display:flex;align-items:center;gap:var(--ds-dimension-12)">
+              <button class="ds-button ds-button--outline ds-button--sm">
+                <span class="ds-button__label"><span data-lang="pt">Exportar</span><span data-lang="en">Export</span></span>
+              </button>
+              <div class="ds-avatar" aria-label="Ana Lima" title="Ana Lima">AL</div>
+            </div>
+          </div>
+          <!-- Alert -->
+          <div class="ds-alert ds-alert--info ds-alert--subtle" style="margin-bottom:var(--ds-dimension-24)" role="status">
+            <div class="ds-alert__content">
+              <p class="ds-alert__title">
+                <span data-lang="pt">Novo relatório disponível</span><span data-lang="en">New report available</span>
+              </p>
+              <span class="ds-alert__description">
+                <span data-lang="pt">O relatório mensal de maio foi gerado. <a class="ds-link" href="#">Ver relatório</a></span>
+                <span data-lang="en">The May monthly report has been generated. <a class="ds-link" href="#">View report</a></span>
+              </span>
+            </div>
+          </div>
+          <!-- Metric cards -->
+          <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ds-dimension-16);margin-bottom:var(--ds-dimension-32)">
+            <div class="ds-card ds-card--outlined" style="padding:var(--ds-dimension-20)">
+              <p style="font-size:var(--ds-body-font-size-sm);color:var(--ds-content-default);margin:0 0 var(--ds-dimension-8)">
+                <span data-lang="pt">Receita total</span><span data-lang="en">Total revenue</span>
+              </p>
+              <p style="font-size:var(--ds-body-font-size-2xl);font-weight:var(--ds-body-font-weight-bold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-8)">R$ 48.320</p>
+              <span class="ds-badge ds-badge--success ds-badge--subtle">
+                <span data-lang="pt">↑ 12% vs mês anterior</span><span data-lang="en">↑ 12% vs last month</span>
+              </span>
+            </div>
+            <div class="ds-card ds-card--outlined" style="padding:var(--ds-dimension-20)">
+              <p style="font-size:var(--ds-body-font-size-sm);color:var(--ds-content-default);margin:0 0 var(--ds-dimension-8)">
+                <span data-lang="pt">Novos clientes</span><span data-lang="en">New clients</span>
+              </p>
+              <p style="font-size:var(--ds-body-font-size-2xl);font-weight:var(--ds-body-font-weight-bold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-8)">1.284</p>
+              <span class="ds-badge ds-badge--success ds-badge--subtle">
+                <span data-lang="pt">↑ 8% vs mês anterior</span><span data-lang="en">↑ 8% vs last month</span>
+              </span>
+            </div>
+            <div class="ds-card ds-card--outlined" style="padding:var(--ds-dimension-20)">
+              <p style="font-size:var(--ds-body-font-size-sm);color:var(--ds-content-default);margin:0 0 var(--ds-dimension-8)">
+                <span data-lang="pt">Taxa de churn</span><span data-lang="en">Churn rate</span>
+              </p>
+              <p style="font-size:var(--ds-body-font-size-2xl);font-weight:var(--ds-body-font-weight-bold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-8)">2,4%</p>
+              <span class="ds-badge ds-badge--warning ds-badge--subtle">
+                <span data-lang="pt">↑ 0,3% vs mês anterior</span><span data-lang="en">↑ 0.3% vs last month</span>
+              </span>
+            </div>
+          </div>
+          <!-- Tabs + content -->
+          <div class="ds-card ds-card--outlined" style="padding:var(--ds-dimension-24)">
+            <div class="ds-tabs" role="tablist" aria-label="Dashboard sections" style="margin-bottom:var(--ds-dimension-24)">
+              <button class="ds-tab ds-tab--active" role="tab" aria-selected="true">
+                <span data-lang="pt">Transações</span><span data-lang="en">Transactions</span>
+              </button>
+              <button class="ds-tab" role="tab" aria-selected="false">
+                <span data-lang="pt">Clientes</span><span data-lang="en">Clients</span>
+              </button>
+              <button class="ds-tab" role="tab" aria-selected="false">
+                <span data-lang="pt">Produtos</span><span data-lang="en">Products</span>
+              </button>
+            </div>
+            <!-- Skeleton loading rows -->
+            <div style="display:flex;flex-direction:column;gap:var(--ds-dimension-12)">
+              <div style="display:flex;align-items:center;gap:var(--ds-dimension-12)">
+                <div class="ds-skeleton ds-skeleton--circle" style="width:32px;height:32px;flex-shrink:0"></div>
+                <div style="flex:1;display:flex;flex-direction:column;gap:var(--ds-dimension-6)">
+                  <div class="ds-skeleton ds-skeleton--text" style="width:55%"></div>
+                  <div class="ds-skeleton ds-skeleton--text" style="width:35%"></div>
+                </div>
+                <div class="ds-skeleton ds-skeleton--text" style="width:80px"></div>
+              </div>
+              <div style="display:flex;align-items:center;gap:var(--ds-dimension-12)">
+                <div class="ds-skeleton ds-skeleton--circle" style="width:32px;height:32px;flex-shrink:0"></div>
+                <div style="flex:1;display:flex;flex-direction:column;gap:var(--ds-dimension-6)">
+                  <div class="ds-skeleton ds-skeleton--text" style="width:45%"></div>
+                  <div class="ds-skeleton ds-skeleton--text" style="width:30%"></div>
+                </div>
+                <div class="ds-skeleton ds-skeleton--text" style="width:80px"></div>
+              </div>
+              <div style="display:flex;align-items:center;gap:var(--ds-dimension-12)">
+                <div class="ds-skeleton ds-skeleton--circle" style="width:32px;height:32px;flex-shrink:0"></div>
+                <div style="flex:1;display:flex;flex-direction:column;gap:var(--ds-dimension-6)">
+                  <div class="ds-skeleton ds-skeleton--text" style="width:60%"></div>
+                  <div class="ds-skeleton ds-skeleton--text" style="width:25%"></div>
+                </div>
+                <div class="ds-skeleton ds-skeleton--text" style="width:80px"></div>
+              </div>
+              <div style="display:flex;align-items:center;gap:var(--ds-dimension-12)">
+                <div class="ds-skeleton ds-skeleton--circle" style="width:32px;height:32px;flex-shrink:0"></div>
+                <div style="flex:1;display:flex;flex-direction:column;gap:var(--ds-dimension-6)">
+                  <div class="ds-skeleton ds-skeleton--text" style="width:40%"></div>
+                  <div class="ds-skeleton ds-skeleton--text" style="width:20%"></div>
+                </div>
+                <div class="ds-skeleton ds-skeleton--text" style="width:80px"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ds-preview__code" style="display:none">
+        <button class="ds-preview__copy">Copy</button>
+        <pre tabindex="0"><code>&lt;!DOCTYPE html&gt;
+&lt;html lang="pt-BR"&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
+  &lt;title&gt;Dashboard&lt;/title&gt;
+  &lt;link rel="stylesheet" href="css/design-system.css"&gt;
+  &lt;style&gt;
+    *, *::before, *::after { box-sizing: border-box; }
+    body { background: var(--ds-background-subtle); min-height: 100vh; margin: 0; padding: var(--ds-dimension-32); }
+    .dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-dimension-16); margin-bottom: var(--ds-dimension-32); }
+    .dash-row { display: flex; align-items: center; gap: var(--ds-dimension-12); margin-bottom: var(--ds-dimension-12); }
+    .dash-row-meta { flex: 1; display: flex; flex-direction: column; gap: var(--ds-dimension-6); }
+    @media (max-width: 768px) { .dash-grid { grid-template-columns: 1fr; } }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;!-- App header --&gt;
+&lt;div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--ds-dimension-32)"&gt;
+  &lt;div&gt;
+    &lt;h1 style="font-size:var(--ds-body-font-size-2xl);font-weight:var(--ds-body-font-weight-bold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-4)"&gt;Visão geral&lt;/h1&gt;
+    &lt;p style="font-size:var(--ds-body-font-size-sm);color:var(--ds-content-default);margin:0"&gt;Período: últimos 30 dias&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div style="display:flex;align-items:center;gap:var(--ds-dimension-12)"&gt;
+    &lt;button class="ds-button ds-button--outline ds-button--sm"&gt;
+      &lt;span class="ds-button__label"&gt;Exportar&lt;/span&gt;
+    &lt;/button&gt;
+    &lt;div class="ds-avatar" aria-label="Ana Lima" title="Ana Lima"&gt;AL&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;!-- Alert --&gt;
+&lt;div class="ds-alert ds-alert--info ds-alert--subtle" style="margin-bottom:var(--ds-dimension-24)" role="status"&gt;
+  &lt;div class="ds-alert__content"&gt;
+    &lt;p class="ds-alert__title"&gt;Novo relatório disponível&lt;/p&gt;
+    &lt;span class="ds-alert__description"&gt;O relatório mensal de maio foi gerado. &lt;a class="ds-link" href="#"&gt;Ver relatório&lt;/a&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;!-- Metric cards --&gt;
+&lt;div class="dash-grid"&gt;
+  &lt;div class="ds-card ds-card--outlined" style="padding:var(--ds-dimension-20)"&gt;
+    &lt;p style="font-size:var(--ds-body-font-size-sm);color:var(--ds-content-default);margin:0 0 var(--ds-dimension-8)"&gt;Receita total&lt;/p&gt;
+    &lt;p style="font-size:var(--ds-body-font-size-2xl);font-weight:var(--ds-body-font-weight-bold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-8)"&gt;R$ 48.320&lt;/p&gt;
+    &lt;span class="ds-badge ds-badge--success ds-badge--subtle"&gt;↑ 12% vs mês anterior&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div class="ds-card ds-card--outlined" style="padding:var(--ds-dimension-20)"&gt;
+    &lt;p style="font-size:var(--ds-body-font-size-sm);color:var(--ds-content-default);margin:0 0 var(--ds-dimension-8)"&gt;Novos clientes&lt;/p&gt;
+    &lt;p style="font-size:var(--ds-body-font-size-2xl);font-weight:var(--ds-body-font-weight-bold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-8)"&gt;1.284&lt;/p&gt;
+    &lt;span class="ds-badge ds-badge--success ds-badge--subtle"&gt;↑ 8% vs mês anterior&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div class="ds-card ds-card--outlined" style="padding:var(--ds-dimension-20)"&gt;
+    &lt;p style="font-size:var(--ds-body-font-size-sm);color:var(--ds-content-default);margin:0 0 var(--ds-dimension-8)"&gt;Taxa de churn&lt;/p&gt;
+    &lt;p style="font-size:var(--ds-body-font-size-2xl);font-weight:var(--ds-body-font-weight-bold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-8)"&gt;2,4%&lt;/p&gt;
+    &lt;span class="ds-badge ds-badge--warning ds-badge--subtle"&gt;↑ 0,3% vs mês anterior&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;!-- Table card with tabs --&gt;
+&lt;div class="ds-card ds-card--outlined" style="padding:var(--ds-dimension-24)"&gt;
+  &lt;div class="ds-tabs" role="tablist" aria-label="Dashboard sections" style="margin-bottom:var(--ds-dimension-24)"&gt;
+    &lt;button class="ds-tab ds-tab--active" role="tab" aria-selected="true" id="tab-tx" aria-controls="panel-tx"&gt;Transações&lt;/button&gt;
+    &lt;button class="ds-tab" role="tab" aria-selected="false" id="tab-cl" aria-controls="panel-cl"&gt;Clientes&lt;/button&gt;
+    &lt;button class="ds-tab" role="tab" aria-selected="false" id="tab-pr" aria-controls="panel-pr"&gt;Produtos&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;!-- Replace skeleton rows with real data once loaded --&gt;
+  &lt;div id="panel-tx" role="tabpanel" aria-labelledby="tab-tx"&gt;
+    &lt;div class="dash-row"&gt;
+      &lt;div class="ds-skeleton ds-skeleton--circle" style="width:32px;height:32px;flex-shrink:0"&gt;&lt;/div&gt;
+      &lt;div class="dash-row-meta"&gt;
+        &lt;div class="ds-skeleton ds-skeleton--text" style="width:55%"&gt;&lt;/div&gt;
+        &lt;div class="ds-skeleton ds-skeleton--text" style="width:35%"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="ds-skeleton ds-skeleton--text" style="width:80px"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;!-- Repeat rows as needed --&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+  <!-- 3. USAGE -->
+  <div class="ds-subsection">
+    <h2 class="ds-subsection__title"><span data-lang="pt">Notas de uso</span><span data-lang="en">Usage notes</span></h2>
+    <table class="ds-token-table">
+      <thead><tr><th><span data-lang="pt">Padrão</span><span data-lang="en">Pattern</span></th><th><span data-lang="pt">Decisão</span><span data-lang="en">Decision</span></th></tr></thead>
+      <tbody>
+        <tr><td>Skeleton <span data-lang="pt">como estado inicial</span><span data-lang="en">as initial state</span></td><td><span data-lang="pt">Substitua as linhas de Skeleton pelos dados reais ao receber a resposta da API. Skeleton evita layout shift (CLS) e comunica que há conteúdo chegando.</span><span data-lang="en">Replace Skeleton rows with real data once the API responds. Skeleton prevents layout shift (CLS) and communicates that content is incoming.</span></td></tr>
+        <tr><td><code>ds-card--outlined</code></td><td><span data-lang="pt">Cards de métrica usam <code>--outlined</code> (borda, sem sombra) pois estão sobre fundo sutil — sombra acumularia visualmente.</span><span data-lang="en">Metric cards use <code>--outlined</code> (border, no shadow) since they sit on a subtle background — shadows would stack visually.</span></td></tr>
+        <tr><td><code>ds-badge--success/warning</code></td><td><span data-lang="pt">Cor semântica comunica variação positiva/negativa sem depender só de ícone ou texto — atende WCAG 1.4.1 (uso de cor).</span><span data-lang="en">Semantic color communicates positive/negative variation without relying solely on icon or text — meets WCAG 1.4.1 (use of color).</span></td></tr>
+        <tr><td>Grid <span data-lang="pt">responsivo</span><span data-lang="en">responsive</span></td><td><span data-lang="pt">Colapse de 3 para 1 coluna via media query no mobile — os cards de métrica são igualmente importantes em telas pequenas.</span><span data-lang="en">Collapse from 3 to 1 column via media query on mobile — metric cards are equally important on small screens.</span></td></tr>
+      </tbody>
+    </table>
+  </div>
+  <!-- 4. RELATED -->
+  <div class="ds-subsection">
+    <h2 class="ds-subsection__title"><span data-lang="pt">Templates relacionados</span><span data-lang="en">Related templates</span></h2>
+    <div class="ds-related">
+      <a href="settings.html" class="ds-related__link"><span data-lang="pt">Configurações</span><span data-lang="en">Settings</span></a>
+      <a href="index.html" class="ds-related__link"><span data-lang="pt">Ver todos os templates</span><span data-lang="en">All templates</span></a>
+    </div>
+  </div>
+</main>
+<script src="../../js/main.js"></script>
+<script>
+function openPreviewInNewTab() {
+  var code = document.querySelector('.ds-preview__code pre code').textContent;
+  var cssUrl = new URL('../../css/design-system.css', window.location.href).href;
+  var html = code.replace(/"css\/design-system\.css"/, '"' + cssUrl + '"');
+  var blob = new Blob([html], { type: 'text/html' });
+  var url = URL.createObjectURL(blob);
+  window.open(url, '_blank');
+  setTimeout(function() { URL.revokeObjectURL(url); }, 30000);
+}
+</script>
+</body>
+</html>

package/docs/templates/index.html ADDED Viewed

@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="pt">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Templates — Design System</title>
+  <link rel="stylesheet" href="../../css/design-system.css">
+  <link rel="stylesheet" href="../layout.css">
+  <script>
+    (function(){var l=localStorage.getItem('ds-lang');if(l)document.documentElement.setAttribute('lang',l)})();
+  </script>
+  <style>
+    .ds-template-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: var(--ds-dimension-20);
+    }
+    .ds-template-card {
+      border: var(--ds-border-width-1) solid var(--ds-border-default);
+      border-radius: var(--ds-radius-8);
+      background: var(--ds-surface-default);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .ds-template-card__body {
+      padding: var(--ds-dimension-20);
+      display: flex;
+      flex-direction: column;
+      gap: var(--ds-dimension-8);
+      flex: 1;
+    }
+    .ds-template-card__title {
+      font-size: var(--ds-font-size-16);
+      font-weight: var(--ds-font-weight-semibold);
+      color: var(--ds-content-strong);
+      margin: 0;
+    }
+    .ds-template-card__desc {
+      font-size: var(--ds-font-size-14);
+      color: var(--ds-content-default);
+      margin: 0;
+      line-height: var(--ds-line-height-relaxed);
+    }
+    .ds-template-card__tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ds-dimension-4);
+    }
+    .ds-template-card__cta {
+      margin-top: auto;
+      padding-top: var(--ds-dimension-12);
+      display: flex;
+      gap: var(--ds-dimension-8);
+      align-items: center;
+    }
+  </style>
+</head>
+<body>
+<header class="ds-site-header">
+  <div style="display:flex;align-items:center;gap:var(--ds-dimension-16)">
+    <button class="ds-menu-toggle" id="menu-toggle" aria-label="Toggle navigation" aria-expanded="false">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+    </button>
+    <a href="../../index.html" class="ds-site-header__brand" aria-label="TIS Design System">
+      <img class="ds-site-header__logo" src="../assets/logo-tis-mark.svg" alt="TIS" width="36" height="36">
+      <span class="ds-site-header__title ds-site-header__title--brand">TIS</span>
+      <span class="ds-site-header__brand-separator" aria-hidden="true"></span>
+      <span class="ds-site-header__title ds-site-header__title--product">Design System</span>
+    </a>
+  </div>
+  <div class="ds-site-header__actions">
+    <select class="ds-theme-switcher__select" id="lang-switcher" aria-label="Language">
+      <option value="pt">PT</option>
+      <option value="en">EN</option>
+    </select>
+    <button class="ds-button ds-button--ghost ds-button--sm" id="mode-toggle" aria-pressed="false" aria-label="Toggle dark mode"><svg class="ds-button__icon ds-site-header__mode-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg><span class="ds-button__label">Dark</span></button>
+  </div>
+</header>
+<div class="ds-sidebar-overlay" id="sidebar-overlay"></div>
+<nav class="ds-sidebar" id="sidebar" aria-label="Main navigation"></nav>
+<main class="ds-main">
+  <div class="ds-section">
+    <h1 class="ds-section__title"><span data-lang="pt">Galeria de Templates</span><span data-lang="en">Template Gallery</span></h1>
+    <p class="ds-section__subtitle">
+      <span data-lang="pt">Páginas completas construídas exclusivamente com componentes e tokens do Design System Core. Copie, adapte e implemente em minutos.</span>
+      <span data-lang="en">Complete pages built exclusively with Design System Core components and tokens. Copy, adapt, and ship in minutes.</span>
+    </p>
+  </div>
+  <div class="ds-subsection">
+    <div class="ds-callout ds-callout--info">
+      <div class="ds-callout__title"><span data-lang="pt">Como usar</span><span data-lang="en">How to use</span></div>
+      <span data-lang="pt">Cada template é uma página HTML autocontida que importa apenas <code>css/design-system.css</code>. Abra a aba <strong>Código</strong> em qualquer template, copie o HTML e hospede com os assets do DS.</span>
+      <span data-lang="en">Each template is a self-contained HTML page that only imports <code>css/design-system.css</code>. Open the <strong>Code</strong> tab in any template, copy the HTML, and host it with the DS assets.</span>
+    </div>
+  </div>
+  <div class="ds-subsection">
+    <div class="ds-template-grid">
+      <!-- Login -->
+      <div class="ds-template-card">
+        <div class="ds-template-card__body">
+          <h3 class="ds-template-card__title"><span data-lang="pt">Login</span><span data-lang="en">Login</span></h3>
+          <p class="ds-template-card__desc">
+            <span data-lang="pt">Autenticação com email e senha, link de recuperação e acesso ao cadastro.</span>
+            <span data-lang="en">Email and password authentication with recovery link and sign-up access.</span>
+          </p>
+          <div class="ds-template-card__tags">
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Input</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Button</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Form Field</span>
+          </div>
+          <div class="ds-template-card__cta">
+            <a class="ds-button ds-button--brand ds-button--sm" href="login.html"><span class="ds-button__label"><span data-lang="pt">Documentação</span><span data-lang="en">Documentation</span></span></a>
+            <button type="button" class="ds-button ds-button--ghost ds-button--sm" onclick="openTemplate('login.html')"><span class="ds-button__label"><span data-lang="pt">Template</span><span data-lang="en">Template</span></span><svg class="ds-button__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></button>
+          </div>
+        </div>
+      </div>
+      <!-- Sign Up -->
+      <div class="ds-template-card">
+        <div class="ds-template-card__body">
+          <h3 class="ds-template-card__title"><span data-lang="pt">Cadastro</span><span data-lang="en">Sign Up</span></h3>
+          <p class="ds-template-card__desc">
+            <span data-lang="pt">Criação de conta com validação em linha, aceite de termos e feedback de erro.</span>
+            <span data-lang="en">Account creation with inline validation, terms acceptance, and error feedback.</span>
+          </p>
+          <div class="ds-template-card__tags">
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Input</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Select</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Checkbox</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Alert</span>
+          </div>
+          <div class="ds-template-card__cta">
+            <a class="ds-button ds-button--brand ds-button--sm" href="signup.html"><span class="ds-button__label"><span data-lang="pt">Documentação</span><span data-lang="en">Documentation</span></span></a>
+            <button type="button" class="ds-button ds-button--ghost ds-button--sm" onclick="openTemplate('signup.html')"><span class="ds-button__label"><span data-lang="pt">Template</span><span data-lang="en">Template</span></span><svg class="ds-button__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></button>
+          </div>
+        </div>
+      </div>
+      <!-- Dashboard -->
+      <div class="ds-template-card">
+        <div class="ds-template-card__body">
+          <h3 class="ds-template-card__title">Dashboard</h3>
+          <p class="ds-template-card__desc">
+            <span data-lang="pt">Painel com métricas, abas de conteúdo e estado de carregamento com Skeleton.</span>
+            <span data-lang="en">Panel with metrics, content tabs, and Skeleton loading state.</span>
+          </p>
+          <div class="ds-template-card__tags">
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Card</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Tabs</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Badge</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Skeleton</span>
+          </div>
+          <div class="ds-template-card__cta">
+            <a class="ds-button ds-button--brand ds-button--sm" href="dashboard.html"><span class="ds-button__label"><span data-lang="pt">Documentação</span><span data-lang="en">Documentation</span></span></a>
+            <button type="button" class="ds-button ds-button--ghost ds-button--sm" onclick="openTemplate('dashboard.html')"><span class="ds-button__label"><span data-lang="pt">Template</span><span data-lang="en">Template</span></span><svg class="ds-button__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></button>
+          </div>
+        </div>
+      </div>
+      <!-- Settings -->
+      <div class="ds-template-card">
+        <div class="ds-template-card__body">
+          <h3 class="ds-template-card__title"><span data-lang="pt">Configurações</span><span data-lang="en">Settings</span></h3>
+          <p class="ds-template-card__desc">
+            <span data-lang="pt">Página de preferências com abas, campos de perfil e toggles de notificação.</span>
+            <span data-lang="en">Preferences page with tabs, profile fields, and notification toggles.</span>
+          </p>
+          <div class="ds-template-card__tags">
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Tabs</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Toggle</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Input</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Avatar</span>
+          </div>
+          <div class="ds-template-card__cta">
+            <a class="ds-button ds-button--brand ds-button--sm" href="settings.html"><span class="ds-button__label"><span data-lang="pt">Documentação</span><span data-lang="en">Documentation</span></span></a>
+            <button type="button" class="ds-button ds-button--ghost ds-button--sm" onclick="openTemplate('settings.html')"><span class="ds-button__label"><span data-lang="pt">Template</span><span data-lang="en">Template</span></span><svg class="ds-button__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></button>
+          </div>
+        </div>
+      </div>
+      <!-- Contact -->
+      <div class="ds-template-card">
+        <div class="ds-template-card__body">
+          <h3 class="ds-template-card__title"><span data-lang="pt">Contato</span><span data-lang="en">Contact</span></h3>
+          <p class="ds-template-card__desc">
+            <span data-lang="pt">Formulário completo com seleção de assunto, validação e confirmação de envio.</span>
+            <span data-lang="en">Complete form with subject selection, validation, and submission confirmation.</span>
+          </p>
+          <div class="ds-template-card__tags">
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Input</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Textarea</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Select</span>
+            <span class="ds-badge ds-badge--neutral ds-badge--subtle">Radio</span>
+          </div>
+          <div class="ds-template-card__cta">
+            <a class="ds-button ds-button--brand ds-button--sm" href="contact.html"><span class="ds-button__label"><span data-lang="pt">Documentação</span><span data-lang="en">Documentation</span></span></a>
+            <button type="button" class="ds-button ds-button--ghost ds-button--sm" onclick="openTemplate('contact.html')"><span class="ds-button__label"><span data-lang="pt">Template</span><span data-lang="en">Template</span></span><svg class="ds-button__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+<script src="../../js/main.js"></script>
+<script>
+async function openTemplate(url) {
+  var resp = await fetch(url);
+  var html = await resp.text();
+  var parser = new DOMParser();
+  var doc = parser.parseFromString(html, 'text/html');
+  var code = doc.querySelector('.ds-preview__code pre code').textContent;
+  var cssUrl = new URL('../../css/design-system.css', window.location.href).href;
+  var resolved = code.replace(/"css\/design-system\.css"/, '"' + cssUrl + '"');
+  var blob = new Blob([resolved], { type: 'text/html' });
+  var blobUrl = URL.createObjectURL(blob);
+  window.open(blobUrl, '_blank');
+  setTimeout(function() { URL.revokeObjectURL(blobUrl); }, 30000);
+}
+</script>
+</body>
+</html>