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.
- 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
|
@@ -0,0 +1,365 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="pt">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Configurações — Design System</title>
|
|
7
|
+
<link rel="stylesheet" href="../../css/design-system.css">
|
|
8
|
+
<link rel="stylesheet" href="../layout.css">
|
|
9
|
+
<script>
|
|
10
|
+
(function(){var l=localStorage.getItem('ds-lang');if(l)document.documentElement.setAttribute('lang',l)})();
|
|
11
|
+
</script>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
|
|
15
|
+
<header class="ds-site-header">
|
|
16
|
+
<div style="display:flex;align-items:center;gap:var(--ds-dimension-16)">
|
|
17
|
+
<button class="ds-menu-toggle" id="menu-toggle" aria-label="Toggle navigation" aria-expanded="false">
|
|
18
|
+
<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>
|
|
19
|
+
</button>
|
|
20
|
+
<a href="../../index.html" class="ds-site-header__brand" aria-label="TIS Design System">
|
|
21
|
+
<img class="ds-site-header__logo" src="../assets/logo-tis-mark.svg" alt="TIS" width="36" height="36">
|
|
22
|
+
<span class="ds-site-header__title ds-site-header__title--brand">TIS</span>
|
|
23
|
+
<span class="ds-site-header__brand-separator" aria-hidden="true"></span>
|
|
24
|
+
<span class="ds-site-header__title ds-site-header__title--product">Design System</span>
|
|
25
|
+
</a>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="ds-site-header__actions">
|
|
28
|
+
<select class="ds-theme-switcher__select" id="lang-switcher" aria-label="Language">
|
|
29
|
+
<option value="pt">PT</option>
|
|
30
|
+
<option value="en">EN</option>
|
|
31
|
+
</select>
|
|
32
|
+
<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>
|
|
33
|
+
</div>
|
|
34
|
+
</header>
|
|
35
|
+
<div class="ds-sidebar-overlay" id="sidebar-overlay"></div>
|
|
36
|
+
|
|
37
|
+
<nav class="ds-sidebar" id="sidebar" aria-label="Main navigation"></nav>
|
|
38
|
+
|
|
39
|
+
<main class="ds-main">
|
|
40
|
+
|
|
41
|
+
<!-- 1. HEADER -->
|
|
42
|
+
<div class="ds-section">
|
|
43
|
+
<h1 class="ds-section__title"><span data-lang="pt">Configurações</span><span data-lang="en">Settings</span></h1>
|
|
44
|
+
<p class="ds-section__subtitle">
|
|
45
|
+
<span data-lang="pt">Página de preferências com abas por categoria (Perfil, Segurança, Notificações), campos de formulário, toggles e divisores de seção.</span>
|
|
46
|
+
<span data-lang="en">Preferences page with tabs by category (Profile, Security, Notifications), form fields, toggles, and section dividers.</span>
|
|
47
|
+
</p>
|
|
48
|
+
<div style="display:flex;flex-wrap:wrap;gap:var(--ds-dimension-8);margin-top:var(--ds-dimension-16)">
|
|
49
|
+
<span class="ds-badge ds-badge--neutral ds-badge--subtle">Tabs</span>
|
|
50
|
+
<span class="ds-badge ds-badge--neutral ds-badge--subtle">Toggle</span>
|
|
51
|
+
<span class="ds-badge ds-badge--neutral ds-badge--subtle">Input</span>
|
|
52
|
+
<span class="ds-badge ds-badge--neutral ds-badge--subtle">Select</span>
|
|
53
|
+
<span class="ds-badge ds-badge--neutral ds-badge--subtle">Avatar</span>
|
|
54
|
+
<span class="ds-badge ds-badge--neutral ds-badge--subtle">Divider</span>
|
|
55
|
+
<span class="ds-badge ds-badge--neutral ds-badge--subtle">Button</span>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<!-- 2. PREVIEW -->
|
|
60
|
+
<div class="ds-subsection">
|
|
61
|
+
<h2 class="ds-subsection__title">Preview</h2>
|
|
62
|
+
<div class="ds-preview">
|
|
63
|
+
<div class="ds-preview__tabs">
|
|
64
|
+
<button class="ds-preview__tab ds-preview__tab--active" data-tab="preview">Preview</button>
|
|
65
|
+
<button class="ds-preview__tab" data-tab="code">Code</button>
|
|
66
|
+
<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>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="ds-preview__canvas" style="padding:0;display:block">
|
|
69
|
+
<div style="background:var(--ds-background-subtle);padding:var(--ds-dimension-32);min-height:680px">
|
|
70
|
+
|
|
71
|
+
<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-24)">
|
|
72
|
+
<span data-lang="pt">Configurações</span><span data-lang="en">Settings</span>
|
|
73
|
+
</h2>
|
|
74
|
+
|
|
75
|
+
<!-- Tabs -->
|
|
76
|
+
<div class="ds-tabs" role="tablist" style="margin-bottom:var(--ds-dimension-32)">
|
|
77
|
+
<button class="ds-tab ds-tab--active" role="tab" aria-selected="true">
|
|
78
|
+
<span data-lang="pt">Perfil</span><span data-lang="en">Profile</span>
|
|
79
|
+
</button>
|
|
80
|
+
<button class="ds-tab" role="tab" aria-selected="false">
|
|
81
|
+
<span data-lang="pt">Segurança</span><span data-lang="en">Security</span>
|
|
82
|
+
</button>
|
|
83
|
+
<button class="ds-tab" role="tab" aria-selected="false">
|
|
84
|
+
<span data-lang="pt">Notificações</span><span data-lang="en">Notifications</span>
|
|
85
|
+
</button>
|
|
86
|
+
<button class="ds-tab" role="tab" aria-selected="false">
|
|
87
|
+
<span data-lang="pt">Avançado</span><span data-lang="en">Advanced</span>
|
|
88
|
+
</button>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<!-- Profile tab content -->
|
|
92
|
+
<div class="ds-card ds-card--outlined" style="padding:var(--ds-dimension-32);max-width:640px">
|
|
93
|
+
|
|
94
|
+
<!-- Avatar section -->
|
|
95
|
+
<div style="display:flex;align-items:center;gap:var(--ds-dimension-20);margin-bottom:var(--ds-dimension-32)">
|
|
96
|
+
<div class="ds-avatar ds-avatar--lg" aria-label="Ana Lima" title="Ana Lima">AL</div>
|
|
97
|
+
<div>
|
|
98
|
+
<p style="font-size:var(--ds-body-font-size-md);font-weight:var(--ds-body-font-weight-semibold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-4)">Ana Lima</p>
|
|
99
|
+
<p style="font-size:var(--ds-body-font-size-sm);color:var(--ds-content-default);margin:0 0 var(--ds-dimension-12)">ana@empresa.com</p>
|
|
100
|
+
<button class="ds-button ds-button--outline ds-button--sm">
|
|
101
|
+
<span class="ds-button__label"><span data-lang="pt">Trocar foto</span><span data-lang="en">Change photo</span></span>
|
|
102
|
+
</button>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<hr class="ds-divider" style="margin-bottom:var(--ds-dimension-24)">
|
|
107
|
+
|
|
108
|
+
<!-- Form fields -->
|
|
109
|
+
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-dimension-16);margin-bottom:var(--ds-dimension-16)">
|
|
110
|
+
<div class="ds-field">
|
|
111
|
+
<div class="ds-field__label-row">
|
|
112
|
+
<label class="ds-field__label" for="cfg-fname"><span data-lang="pt">Nome</span><span data-lang="en">First name</span></label>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="ds-input ds-input--lg">
|
|
115
|
+
<input class="ds-input__field" type="text" id="cfg-fname" value="Ana" autocomplete="given-name">
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
<div class="ds-field">
|
|
119
|
+
<div class="ds-field__label-row">
|
|
120
|
+
<label class="ds-field__label" for="cfg-lname"><span data-lang="pt">Sobrenome</span><span data-lang="en">Last name</span></label>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="ds-input ds-input--lg">
|
|
123
|
+
<input class="ds-input__field" type="text" id="cfg-lname" value="Lima" autocomplete="family-name">
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div class="ds-field" style="margin-bottom:var(--ds-dimension-16)">
|
|
129
|
+
<div class="ds-field__label-row">
|
|
130
|
+
<label class="ds-field__label" for="cfg-email">E-mail</label>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="ds-input ds-input--lg">
|
|
133
|
+
<input class="ds-input__field" type="email" id="cfg-email" value="ana@empresa.com" autocomplete="email">
|
|
134
|
+
</div>
|
|
135
|
+
<span class="ds-field__helper"><span data-lang="pt">Alterar e-mail requer verificação.</span><span data-lang="en">Changing email requires verification.</span></span>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div class="ds-field" style="margin-bottom:var(--ds-dimension-32)">
|
|
139
|
+
<div class="ds-field__label-row">
|
|
140
|
+
<label class="ds-field__label" for="cfg-lang"><span data-lang="pt">Idioma</span><span data-lang="en">Language</span></label>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="ds-select ds-select--lg">
|
|
143
|
+
<select class="ds-select__field" id="cfg-lang">
|
|
144
|
+
<option selected>Português (BR)</option>
|
|
145
|
+
<option>English (US)</option>
|
|
146
|
+
<option>Español</option>
|
|
147
|
+
</select>
|
|
148
|
+
<span class="ds-select__arrow" aria-hidden="true"></span>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<hr class="ds-divider" style="margin-bottom:var(--ds-dimension-24)">
|
|
153
|
+
|
|
154
|
+
<!-- Notification toggles -->
|
|
155
|
+
<p style="font-size:var(--ds-body-font-size-md);font-weight:var(--ds-body-font-weight-semibold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-16)">
|
|
156
|
+
<span data-lang="pt">Notificações por e-mail</span><span data-lang="en">Email notifications</span>
|
|
157
|
+
</p>
|
|
158
|
+
|
|
159
|
+
<div style="display:flex;flex-direction:column;gap:var(--ds-dimension-16);margin-bottom:var(--ds-dimension-32)">
|
|
160
|
+
<label class="ds-toggle-label" style="justify-content:space-between">
|
|
161
|
+
<span class="ds-toggle__content">
|
|
162
|
+
<span class="ds-toggle__label"><span data-lang="pt">Resumo semanal</span><span data-lang="en">Weekly digest</span></span>
|
|
163
|
+
<span class="ds-toggle__description"><span data-lang="pt">Receba um resumo das atividades toda segunda-feira</span><span data-lang="en">Receive an activity summary every Monday</span></span>
|
|
164
|
+
</span>
|
|
165
|
+
<input class="ds-toggle" type="checkbox" checked aria-label="Resumo semanal">
|
|
166
|
+
</label>
|
|
167
|
+
|
|
168
|
+
<label class="ds-toggle-label" style="justify-content:space-between">
|
|
169
|
+
<span class="ds-toggle__content">
|
|
170
|
+
<span class="ds-toggle__label"><span data-lang="pt">Alertas de segurança</span><span data-lang="en">Security alerts</span></span>
|
|
171
|
+
<span class="ds-toggle__description"><span data-lang="pt">Notificações sobre logins e alterações de senha</span><span data-lang="en">Notifications about logins and password changes</span></span>
|
|
172
|
+
</span>
|
|
173
|
+
<input class="ds-toggle" type="checkbox" checked aria-label="Alertas de segurança">
|
|
174
|
+
</label>
|
|
175
|
+
|
|
176
|
+
<label class="ds-toggle-label" style="justify-content:space-between">
|
|
177
|
+
<span class="ds-toggle__content">
|
|
178
|
+
<span class="ds-toggle__label"><span data-lang="pt">Novidades do produto</span><span data-lang="en">Product updates</span></span>
|
|
179
|
+
<span class="ds-toggle__description"><span data-lang="pt">Fique por dentro de novas funcionalidades</span><span data-lang="en">Stay up to date with new features</span></span>
|
|
180
|
+
</span>
|
|
181
|
+
<input class="ds-toggle" type="checkbox" aria-label="Novidades do produto">
|
|
182
|
+
</label>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<!-- Actions -->
|
|
186
|
+
<div style="display:flex;gap:var(--ds-dimension-12);justify-content:flex-end">
|
|
187
|
+
<button class="ds-button ds-button--ghost">
|
|
188
|
+
<span class="ds-button__label"><span data-lang="pt">Cancelar</span><span data-lang="en">Cancel</span></span>
|
|
189
|
+
</button>
|
|
190
|
+
<button class="ds-button ds-button--brand">
|
|
191
|
+
<span class="ds-button__label"><span data-lang="pt">Salvar alterações</span><span data-lang="en">Save changes</span></span>
|
|
192
|
+
</button>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
<div class="ds-preview__code" style="display:none">
|
|
200
|
+
<button class="ds-preview__copy">Copy</button>
|
|
201
|
+
<pre tabindex="0"><code><!DOCTYPE html>
|
|
202
|
+
<html lang="pt-BR">
|
|
203
|
+
<head>
|
|
204
|
+
<meta charset="UTF-8">
|
|
205
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
206
|
+
<title>Configurações</title>
|
|
207
|
+
<link rel="stylesheet" href="css/design-system.css">
|
|
208
|
+
<style>
|
|
209
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
210
|
+
body { background: var(--ds-background-subtle); min-height: 100vh; margin: 0; padding: var(--ds-dimension-32); }
|
|
211
|
+
.cfg-card { background: var(--ds-surface-default); border-radius: var(--ds-radius-lg); padding: var(--ds-dimension-32); max-width: 640px; border: 1px solid var(--ds-border-default); }
|
|
212
|
+
.cfg-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-dimension-16); margin-bottom: var(--ds-dimension-16); }
|
|
213
|
+
.cfg-toggle-row { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--ds-dimension-12) 0; }
|
|
214
|
+
@media (max-width: 640px) { .cfg-name-row { grid-template-columns: 1fr; } }
|
|
215
|
+
</style>
|
|
216
|
+
</head>
|
|
217
|
+
<body>
|
|
218
|
+
|
|
219
|
+
<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-24)">Configurações</h1>
|
|
220
|
+
|
|
221
|
+
<div class="ds-tabs" role="tablist" style="margin-bottom:var(--ds-dimension-32)">
|
|
222
|
+
<button class="ds-tab ds-tab--active" role="tab" aria-selected="true" id="tab-profile" aria-controls="panel-profile">Perfil</button>
|
|
223
|
+
<button class="ds-tab" role="tab" aria-selected="false" id="tab-security" aria-controls="panel-security">Segurança</button>
|
|
224
|
+
<button class="ds-tab" role="tab" aria-selected="false" id="tab-notif" aria-controls="panel-notif">Notificações</button>
|
|
225
|
+
<button class="ds-tab" role="tab" aria-selected="false" id="tab-adv" aria-controls="panel-adv">Avançado</button>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div class="cfg-card" id="panel-profile" role="tabpanel" aria-labelledby="tab-profile">
|
|
229
|
+
|
|
230
|
+
<!-- Avatar -->
|
|
231
|
+
<div style="display:flex;align-items:center;gap:var(--ds-dimension-20);margin-bottom:var(--ds-dimension-32)">
|
|
232
|
+
<div class="ds-avatar ds-avatar--lg" aria-label="Ana Lima" title="Ana Lima">AL</div>
|
|
233
|
+
<div>
|
|
234
|
+
<p style="font-weight:var(--ds-body-font-weight-semibold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-4)">Ana Lima</p>
|
|
235
|
+
<p style="font-size:var(--ds-body-font-size-sm);color:var(--ds-content-default);margin:0 0 var(--ds-dimension-12)">ana@empresa.com</p>
|
|
236
|
+
<button class="ds-button ds-button--outline ds-button--sm">
|
|
237
|
+
<span class="ds-button__label">Trocar foto</span>
|
|
238
|
+
</button>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
<hr class="ds-divider" style="margin-bottom:var(--ds-dimension-24)">
|
|
243
|
+
|
|
244
|
+
<div class="cfg-name-row">
|
|
245
|
+
<div class="ds-field">
|
|
246
|
+
<div class="ds-field__label-row">
|
|
247
|
+
<label class="ds-field__label" for="fname">Nome</label>
|
|
248
|
+
</div>
|
|
249
|
+
<div class="ds-input ds-input--lg">
|
|
250
|
+
<input class="ds-input__field" type="text" id="fname" value="Ana" autocomplete="given-name">
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
<div class="ds-field">
|
|
254
|
+
<div class="ds-field__label-row">
|
|
255
|
+
<label class="ds-field__label" for="lname">Sobrenome</label>
|
|
256
|
+
</div>
|
|
257
|
+
<div class="ds-input ds-input--lg">
|
|
258
|
+
<input class="ds-input__field" type="text" id="lname" value="Lima" autocomplete="family-name">
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
|
|
263
|
+
<div class="ds-field" style="margin-bottom:var(--ds-dimension-16)">
|
|
264
|
+
<div class="ds-field__label-row">
|
|
265
|
+
<label class="ds-field__label" for="email">E-mail</label>
|
|
266
|
+
</div>
|
|
267
|
+
<div class="ds-input ds-input--lg">
|
|
268
|
+
<input class="ds-input__field" type="email" id="email" value="ana@empresa.com" autocomplete="email">
|
|
269
|
+
</div>
|
|
270
|
+
<span class="ds-field__helper">Alterar e-mail requer verificação.</span>
|
|
271
|
+
</div>
|
|
272
|
+
|
|
273
|
+
<div class="ds-field" style="margin-bottom:var(--ds-dimension-32)">
|
|
274
|
+
<div class="ds-field__label-row">
|
|
275
|
+
<label class="ds-field__label" for="lang">Idioma</label>
|
|
276
|
+
</div>
|
|
277
|
+
<div class="ds-select ds-select--lg">
|
|
278
|
+
<select class="ds-select__field" id="lang">
|
|
279
|
+
<option selected>Português (BR)</option>
|
|
280
|
+
<option>English (US)</option>
|
|
281
|
+
<option>Español</option>
|
|
282
|
+
</select>
|
|
283
|
+
<span class="ds-select__arrow" aria-hidden="true"></span>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<hr class="ds-divider" style="margin-bottom:var(--ds-dimension-24)">
|
|
288
|
+
|
|
289
|
+
<p style="font-weight:var(--ds-body-font-weight-semibold);color:var(--ds-content-strong);margin:0 0 var(--ds-dimension-16)">Notificações por e-mail</p>
|
|
290
|
+
|
|
291
|
+
<label class="ds-toggle-label cfg-toggle-row">
|
|
292
|
+
<span class="ds-toggle__content">
|
|
293
|
+
<span class="ds-toggle__label">Resumo semanal</span>
|
|
294
|
+
<span class="ds-toggle__description">Receba um resumo toda segunda-feira</span>
|
|
295
|
+
</span>
|
|
296
|
+
<input class="ds-toggle" type="checkbox" checked aria-label="Resumo semanal">
|
|
297
|
+
</label>
|
|
298
|
+
|
|
299
|
+
<label class="ds-toggle-label cfg-toggle-row">
|
|
300
|
+
<span class="ds-toggle__content">
|
|
301
|
+
<span class="ds-toggle__label">Alertas de segurança</span>
|
|
302
|
+
<span class="ds-toggle__description">Logins e alterações de senha</span>
|
|
303
|
+
</span>
|
|
304
|
+
<input class="ds-toggle" type="checkbox" checked aria-label="Alertas de segurança">
|
|
305
|
+
</label>
|
|
306
|
+
|
|
307
|
+
<label class="ds-toggle-label cfg-toggle-row" style="margin-bottom:var(--ds-dimension-32)">
|
|
308
|
+
<span class="ds-toggle__content">
|
|
309
|
+
<span class="ds-toggle__label">Novidades do produto</span>
|
|
310
|
+
<span class="ds-toggle__description">Novas funcionalidades e melhorias</span>
|
|
311
|
+
</span>
|
|
312
|
+
<input class="ds-toggle" type="checkbox" aria-label="Novidades do produto">
|
|
313
|
+
</label>
|
|
314
|
+
|
|
315
|
+
<div style="display:flex;gap:var(--ds-dimension-12);justify-content:flex-end">
|
|
316
|
+
<button class="ds-button ds-button--ghost"><span class="ds-button__label">Cancelar</span></button>
|
|
317
|
+
<button class="ds-button ds-button--brand"><span class="ds-button__label">Salvar alterações</span></button>
|
|
318
|
+
</div>
|
|
319
|
+
|
|
320
|
+
</div>
|
|
321
|
+
|
|
322
|
+
</body>
|
|
323
|
+
</html></code></pre>
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
|
|
328
|
+
<!-- 3. USAGE -->
|
|
329
|
+
<div class="ds-subsection">
|
|
330
|
+
<h2 class="ds-subsection__title"><span data-lang="pt">Notas de uso</span><span data-lang="en">Usage notes</span></h2>
|
|
331
|
+
<table class="ds-token-table">
|
|
332
|
+
<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>
|
|
333
|
+
<tbody>
|
|
334
|
+
<tr><td><span data-lang="pt">Toggle com label+descrição</span><span data-lang="en">Toggle with label+description</span></td><td><span data-lang="pt"><code>ds-toggle__label</code> nomeia a preferência; <code>ds-toggle__description</code> explica o impacto — não confie só na label para comunicar consequências.</span><span data-lang="en"><code>ds-toggle__label</code> names the preference; <code>ds-toggle__description</code> explains the impact — don't rely only on the label to communicate consequences.</span></td></tr>
|
|
335
|
+
<tr><td><code>ds-divider</code> <span data-lang="pt">como separador de seções</span><span data-lang="en">as section separator</span></td><td><span data-lang="pt">Agrupa campos relacionados sem adicionar um card aninhado — mantém a hierarquia visual simples dentro do card externo.</span><span data-lang="en">Groups related fields without a nested card — keeps visual hierarchy simple within the outer card.</span></td></tr>
|
|
336
|
+
<tr><td><span data-lang="pt">Ações no rodapé do card</span><span data-lang="en">Actions in card footer</span></td><td><span data-lang="pt">Cancelar usa <code>--ghost</code> (baixa ênfase) e Salvar usa <code>--brand</code> (alta). Alinhados à direita para seguir convenção de formulários ocidentais.</span><span data-lang="en">Cancel uses <code>--ghost</code> (low emphasis) and Save uses <code>--brand</code> (high). Right-aligned to follow western form conventions.</span></td></tr>
|
|
337
|
+
</tbody>
|
|
338
|
+
</table>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<!-- 4. RELATED -->
|
|
342
|
+
<div class="ds-subsection">
|
|
343
|
+
<h2 class="ds-subsection__title"><span data-lang="pt">Templates relacionados</span><span data-lang="en">Related templates</span></h2>
|
|
344
|
+
<div class="ds-related">
|
|
345
|
+
<a href="dashboard.html" class="ds-related__link">Dashboard</a>
|
|
346
|
+
<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>
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
|
|
350
|
+
</main>
|
|
351
|
+
|
|
352
|
+
<script src="../../js/main.js"></script>
|
|
353
|
+
<script>
|
|
354
|
+
function openPreviewInNewTab() {
|
|
355
|
+
var code = document.querySelector('.ds-preview__code pre code').textContent;
|
|
356
|
+
var cssUrl = new URL('../../css/design-system.css', window.location.href).href;
|
|
357
|
+
var html = code.replace(/"css\/design-system\.css"/, '"' + cssUrl + '"');
|
|
358
|
+
var blob = new Blob([html], { type: 'text/html' });
|
|
359
|
+
var url = URL.createObjectURL(blob);
|
|
360
|
+
window.open(url, '_blank');
|
|
361
|
+
setTimeout(function() { URL.revokeObjectURL(url); }, 30000);
|
|
362
|
+
}
|
|
363
|
+
</script>
|
|
364
|
+
</body>
|
|
365
|
+
</html>
|