ds-tis 1.0.0-beta.10

package/css/components/form-field.css

@@ -0,0 +1,137 @@
+/* ============================================================
+   COMPONENT: Form Field — wrapper composite pra Input/Select/Textarea/etc
+
+   ⚠ CSS-ONLY (ADR-017): Form Field NÃO existe no Figma e NÃO deve ser
+   authorado lá. Componentes Figma de form (Input Text, Select, Textarea,
+   Checkbox, Radio, Toggle) já carregam Label + Required + Helper Text +
+   Description inline em cada variant. Form Field só existe no CSS porque
+   HTML não tem elemento "form control" composto — precisamos compor
+   <label> + control + helper + error com IDs e ARIA. Auditorias Figma↔Repo
+   devem ignorar este componente como "faltando no Figma".
+
+   Junta os 5 elementos que precisam estar visualmente alinhados E
+   acessivelmente conectados:
+
+     1. Label              .ds-field__label  (com `for=` apontando pra controle)
+     2. Required indicator .ds-field__required (asterisco, decorativo)
+     3. Controle           Input/Select/Textarea/Checkbox group
+     4. Helper text        .ds-field__helper (com aria-describedby no controle)
+     5. Error message      .ds-field__error  (ícone + texto, aparece em estado --error)
+
+   HTML structure:
+     <div class="ds-field">
+       <div class="ds-field__label-row">
+         <label class="ds-field__label" for="field-id">Nome</label>
+         <span class="ds-field__required" aria-hidden="true">*</span>
+       </div>
+       <div class="ds-input">
+         <input class="ds-input__field" id="field-id"
+                aria-required="true"
+                aria-describedby="field-id-helper">
+       </div>
+       <span class="ds-field__helper" id="field-id-helper">Texto auxiliar</span>
+       <span class="ds-field__error" id="field-id-error" role="alert">Mensagem de erro</span>
+     </div>
+
+   Accessibility (WCAG 2.2):
+   - Label tem `for=` apontando pro `id` do controle (1.3.1, 3.3.2)
+   - Required → `aria-required="true"` no controle + asterisco visual com aria-hidden
+   - Helper text → `aria-describedby` no controle apontando pro `id` do helper
+   - Error → set `aria-invalid="true"` no controle + `aria-describedby` aponta pro error
+   - Show Label=false → use `aria-label` direto no controle E `.ds-field--no-label`
+   ============================================================ */
+
+/* Wrapper: stacks label row, control, helper, error verticalmente */
+.ds-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-form-field-gap-default);
+  width: 100%;
+}
+
+/* Label row: label text + optional required asterisk (horizontal, gap 2px) */
+.ds-field__label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-form-field-label-row-gap-default);
+}
+
+/* Label text (body/sm: 14px bold / 20px) */
+.ds-field__label {
+  font-size: var(--ds-form-field-label-font-size-default);
+  font-weight: var(--ds-body-font-weight-bold);
+  line-height: var(--ds-form-field-label-line-height-default);
+  color: var(--ds-form-field-label-color-default);
+}
+
+/* Required asterisk — error text color, decorative (aria-hidden no markup) */
+.ds-field__required {
+  font-size: var(--ds-form-field-required-font-size-default);
+  font-weight: var(--ds-body-font-weight-bold);
+  line-height: var(--ds-form-field-required-line-height-default);
+  color: var(--ds-form-field-required-color-default);
+  user-select: none;
+}
+
+/* Helper text (12px regular / 18px) */
+.ds-field__helper {
+  font-size: var(--ds-body-font-size-xs);
+  font-weight: var(--ds-body-font-weight-regular);
+  line-height: var(--ds-body-line-height-xs);
+  color: var(--ds-form-field-helper-color-default);
+}
+
+/* Error message (default hidden; mostrado em .ds-field--error) */
+.ds-field__error {
+  display: none;
+  align-items: flex-start;
+  gap: var(--ds-form-field-error-gap-default);
+  font-size: var(--ds-form-field-error-font-size-default);
+  font-weight: var(--ds-form-field-error-font-weight-default);
+  line-height: var(--ds-form-field-error-line-height-default);
+  padding-top: var(--ds-form-field-error-padding-top-default);
+  color: var(--ds-form-field-error-color-default);
+}
+
+.ds-field__error::before {
+  --_ds-field-error-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
+
+  content: "";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  flex: 0 0 calc(
+    var(--ds-form-field-error-icon-size-default) +
+    var(--ds-form-field-error-icon-frame-padding-x-default) +
+    var(--ds-form-field-error-icon-frame-padding-x-default)
+  );
+  width: var(--ds-form-field-error-icon-size-default);
+  height: var(--ds-form-field-error-icon-size-default);
+  padding-left: var(--ds-form-field-error-icon-frame-padding-x-default);
+  padding-right: var(--ds-form-field-error-icon-frame-padding-x-default);
+  color: var(--ds-form-field-error-icon-color-default);
+  background-color: currentColor;
+  -webkit-mask: var(--_ds-field-error-icon-mask) center / var(--ds-form-field-error-icon-size-default) var(--ds-form-field-error-icon-size-default) no-repeat;
+  mask: var(--_ds-field-error-icon-mask) center / var(--ds-form-field-error-icon-size-default) var(--ds-form-field-error-icon-size-default) no-repeat;
+  user-select: none;
+}
+
+/* ---------------------------------------------------------
+   Modifiers
+   --------------------------------------------------------- */
+
+/* Hide label row (use aria-label no controle pra a11y) */
+.ds-field--no-label .ds-field__label-row {
+  display: none;
+}
+
+/* Hide helper text */
+.ds-field--no-helper .ds-field__helper {
+  display: none;
+}
+
+/* Error state — mostra error message; label permanece neutra. */
+.ds-field--error .ds-field__error {
+  display: inline-flex;
+}

package/css/components/index.css

@@ -0,0 +1,28 @@
+/* ==========================================================================
+   Components
+   ========================================================================== */
+
+@import 'button.css';
+@import 'form-field.css';
+@import 'input.css';
+@import 'textarea.css';
+@import 'select.css';
+@import 'combobox.css';
+@import 'checkbox.css';
+@import 'radio.css';
+@import 'toggle.css';
+@import 'badge.css';
+@import 'alert.css';
+@import 'accordion.css';
+@import 'card.css';
+@import 'modal.css';
+@import 'tooltip.css';
+@import 'menu.css';
+@import 'tabs.css';
+@import 'breadcrumb.css';
+@import 'pagination.css';
+@import 'avatar.css';
+@import 'divider.css';
+@import 'spinner.css';
+@import 'skeleton.css';
+@import 'link.css';

package/css/components/input.css

@@ -0,0 +1,356 @@
+/* ==========================================================================
+   Input – .ds-input — aligned with Figma specs
+   Sizes: sm=32px, md=40px, lg=48px
+   ========================================================================== */
+
+/* Wrapper
+   ========================================================================== */
+
+.ds-input {
+  --input-padding-x: var(--ds-input-padding-x-md);
+  --input-padding-y: var(--ds-field-padding-y-md);
+  --input-gap: var(--ds-input-gap-md);
+  --input-icon-frame-size: var(--ds-input-icon-size-md);
+  --input-border-width: var(--ds-field-border-width);
+
+  display: flex;
+  align-items: center;
+  gap: var(--ds-input-gap-md);
+  border: var(--ds-field-border-width) solid var(--ds-field-border-color-default);
+  border-radius: var(--ds-field-radius);
+  background: var(--ds-field-bg-default);
+  color: var(--ds-field-value-color-default);
+  font-family: var(--ds-input-text-font-family-default);
+  font-weight: var(--ds-input-text-font-weight-default);
+  letter-spacing: var(--ds-input-text-letter-spacing-default);
+  transition: border-color var(--ds-motion-duration-fast) var(--ds-motion-ease-default),
+              box-shadow var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+}
+
+/* Sizes
+   ========================================================================== */
+
+.ds-input,
+.ds-input--md {
+  height: var(--ds-input-height-md);
+  padding: var(--ds-field-padding-y-md) var(--ds-input-padding-x-md);
+  font-size: var(--ds-input-text-font-size-md);
+  line-height: var(--ds-input-text-line-height-md);
+}
+
+.ds-input--sm {
+  --input-padding-x: var(--ds-input-padding-x-sm);
+  --input-padding-y: var(--ds-field-padding-y-sm);
+  --input-gap: var(--ds-input-gap-sm);
+  --input-icon-frame-size: var(--ds-input-icon-size-sm);
+
+  height: var(--ds-input-height-sm);
+  gap: var(--ds-input-gap-sm);
+  padding: var(--ds-field-padding-y-sm) var(--ds-input-padding-x-sm);
+  font-size: var(--ds-input-text-font-size-sm);
+  line-height: var(--ds-input-text-line-height-sm);
+}
+
+.ds-input--lg {
+  --input-padding-x: var(--ds-input-padding-x-lg);
+  --input-padding-y: var(--ds-field-padding-y-lg);
+  --input-gap: var(--ds-input-gap-lg);
+  --input-icon-frame-size: var(--ds-input-icon-size-lg);
+
+  height: var(--ds-input-height-lg);
+  gap: var(--ds-input-gap-lg);
+  padding: var(--ds-field-padding-y-lg) var(--ds-input-padding-x-lg);
+  font-size: var(--ds-input-text-font-size-lg);
+  line-height: var(--ds-input-text-line-height-lg);
+}
+
+/* Field
+   ========================================================================== */
+
+.ds-input__field {
+  --input-field-leading-size: 0px;
+  --input-field-leading-gap: 0px;
+  --input-field-trailing-size: 0px;
+  --input-field-trailing-gap: 0px;
+
+  flex: 1;
+  align-self: stretch;
+  border: none;
+  background: transparent;
+  outline: none;
+  color: var(--ds-field-value-color-default);
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  min-width: 0;
+  margin-top: calc(-1 * (var(--input-padding-y) + var(--input-border-width)));
+  margin-bottom: calc(-1 * (var(--input-padding-y) + var(--input-border-width)));
+  margin-left: calc(
+    -1 * (
+      var(--input-padding-x) +
+      var(--input-border-width) +
+      var(--input-field-leading-size) +
+      var(--input-field-leading-gap)
+    )
+  );
+  margin-right: calc(-1 * (var(--input-padding-x) + var(--input-border-width)));
+  padding-left: calc(
+    var(--input-padding-x) +
+    var(--input-border-width) +
+    var(--input-field-leading-size) +
+    var(--input-field-leading-gap) +
+    var(--ds-input-text-frame-padding-x-default)
+  );
+  padding-right: calc(
+    var(--input-padding-x) +
+    var(--input-border-width) +
+    var(--input-field-trailing-size) +
+    var(--input-field-trailing-gap) +
+    var(--ds-input-text-frame-padding-x-default)
+  );
+}
+
+.ds-input__icon + .ds-input__field {
+  --input-field-leading-size: calc(
+    var(--input-icon-frame-size) +
+    var(--ds-input-icon-frame-padding-x-default) +
+    var(--ds-input-icon-frame-padding-x-default)
+  );
+  --input-field-leading-gap: var(--input-gap);
+}
+
+.ds-input__field:has(+ .ds-input__icon) {
+  --input-field-trailing-size: calc(
+    var(--input-icon-frame-size) +
+    var(--ds-input-icon-frame-padding-x-default) +
+    var(--ds-input-icon-frame-padding-x-default)
+  );
+  --input-field-trailing-gap: var(--input-gap);
+  margin-right: calc(
+    -1 * (
+      var(--input-padding-x) +
+      var(--input-border-width) +
+      var(--input-field-trailing-size) +
+      var(--input-field-trailing-gap)
+    )
+  );
+}
+
+.ds-input__field::placeholder {
+  color: var(--ds-field-placeholder-color-default);
+}
+
+/* Icon
+   ========================================================================== */
+
+/* Icon container: wrapper externo com respiro horizontal; ícone interno escala por tamanho. */
+.ds-input__icon {
+  flex-shrink: 0;
+  color: var(--ds-input-icon-color-default);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--ds-input-icon-stroke-width-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  width: var(--ds-input-icon-size-md);
+  height: var(--ds-input-icon-size-md);
+  padding-left: var(--ds-input-icon-frame-padding-x-default);
+  padding-right: var(--ds-input-icon-frame-padding-x-default);
+  font-size: var(--ds-input-icon-size-md);
+  line-height: 1;
+  pointer-events: none;
+}
+
+.ds-input--sm .ds-input__icon {
+  width: var(--ds-input-icon-size-sm);
+  height: var(--ds-input-icon-size-sm);
+  font-size: var(--ds-input-icon-size-sm);
+  stroke-width: var(--ds-input-icon-stroke-width-sm);
+}
+
+.ds-input--lg .ds-input__icon {
+  width: var(--ds-input-icon-size-lg);
+  height: var(--ds-input-icon-size-lg);
+  font-size: var(--ds-input-icon-size-lg);
+  stroke-width: var(--ds-input-icon-stroke-width-lg);
+}
+
+/* States
+   ========================================================================== */
+
+/* Hover */
+.ds-input:hover:not(.ds-input--disabled):not(:focus-within) {
+  border-color: var(--ds-field-border-color-hover);
+}
+
+/* Focused */
+.ds-input:focus-within {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-focus);
+  border-radius: var(--ds-field-radius);
+  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color-default);
+  outline-offset: var(--ds-focus-ring-width);
+}
+
+/* Error */
+.ds-input--error,
+.ds-field--error .ds-input {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-error);
+}
+
+.ds-input--error:hover:not(.ds-input--disabled):not(:focus-within),
+.ds-field--error .ds-input:hover:not(.ds-input--disabled):not(:focus-within) {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-error-hover);
+}
+
+.ds-input--error:focus-within,
+.ds-field--error .ds-input:focus-within {
+  border-color: var(--ds-field-border-color-error);
+  outline-color: var(--ds-focus-ring-color-error);
+}
+
+/* Filled */
+.ds-input--filled {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-filled);
+}
+
+.ds-input--filled.ds-input--error,
+.ds-field--error .ds-input--filled {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-error);
+}
+
+.ds-input--filled.ds-input--error:hover:not(.ds-input--disabled):not(:focus-within),
+.ds-field--error .ds-input--filled:hover:not(.ds-input--disabled):not(:focus-within) {
+  background: var(--ds-field-bg-default);
+  border-color: var(--ds-field-border-color-error-hover);
+}
+
+/* Disabled */
+.ds-input--disabled,
+.ds-input:has(.ds-input__field:disabled) {
+  background: var(--ds-field-bg-disabled);
+  border-color: var(--ds-field-border-color-disabled);
+  color: var(--ds-field-value-color-disabled);
+  pointer-events: none;
+}
+
+.ds-input--disabled .ds-input__field,
+.ds-input__field:disabled {
+  color: var(--ds-field-value-color-disabled);
+}
+
+.ds-input--disabled .ds-input__field::placeholder,
+.ds-input__field:disabled::placeholder {
+  color: var(--ds-field-placeholder-color-disabled);
+}
+
+.ds-input--disabled .ds-input__icon,
+.ds-input:has(.ds-input__field:disabled) .ds-input__icon {
+  color: var(--ds-input-icon-color-disabled);
+}
+
+/* Readonly */
+.ds-input--readonly,
+.ds-input:has(.ds-input__field:read-only) {
+  background: var(--ds-field-bg-readonly);
+  border-color: var(--ds-field-border-color-readonly);
+}
+
+.ds-input--readonly .ds-input__field,
+.ds-input__field:read-only {
+  color: var(--ds-field-value-color-readonly);
+}
+
+.ds-input--readonly:focus-within,
+.ds-input:has(.ds-input__field:read-only):focus-within {
+  background: var(--ds-field-bg-readonly);
+  border-color: var(--ds-field-border-color-readonly);
+  outline-color: var(--ds-focus-ring-color-readonly);
+}
+
+/* Composed field anatomy
+   ========================================================================== */
+
+.ds-field:has(.ds-input) {
+  gap: var(--ds-form-field-stack-gap-default);
+}
+
+.ds-field:has(.ds-input) .ds-field__label-row {
+  gap: var(--ds-form-field-label-row-gap-default);
+}
+
+.ds-field:has(.ds-input) .ds-field__label {
+  color: var(--ds-form-field-label-color-default);
+  font-family: var(--ds-form-field-label-font-family-default);
+  font-size: var(--ds-form-field-label-font-size-default);
+  font-weight: var(--ds-body-font-weight-bold);
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+  line-height: var(--ds-form-field-label-line-height-default);
+}
+
+.ds-field:has(.ds-input--sm) .ds-field__label {
+  font-size: var(--ds-form-field-label-font-size-default);
+  line-height: var(--ds-form-field-label-line-height-default);
+}
+
+.ds-field:has(.ds-input--lg) .ds-field__label {
+  font-size: var(--ds-form-field-label-font-size-default);
+  line-height: var(--ds-form-field-label-line-height-default);
+}
+
+.ds-field:has(.ds-input) .ds-field__required {
+  color: var(--ds-form-field-required-color-default);
+  font-family: var(--ds-form-field-required-font-family-default);
+  font-size: var(--ds-form-field-required-font-size-default);
+  font-weight: var(--ds-body-font-weight-bold);
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+  line-height: var(--ds-form-field-required-line-height-default);
+}
+
+.ds-field:has(.ds-input) .ds-field__helper {
+  color: var(--ds-form-field-helper-color-default);
+  font-family: var(--ds-form-field-label-font-family-default);
+  font-size: var(--ds-body-font-size-xs);
+  font-weight: var(--ds-body-font-weight-regular);
+  letter-spacing: var(--ds-body-letter-spacing-normal);
+  line-height: var(--ds-body-line-height-xs);
+}
+
+.ds-field--error:has(.ds-input) .ds-field__label {
+  color: var(--ds-form-field-label-color-default);
+}
+
+.ds-field:has(.ds-input--disabled) .ds-field__label,
+.ds-field:has(.ds-input__field:disabled) .ds-field__label {
+  color: var(--ds-form-field-label-color-disabled);
+}
+
+.ds-field:has(.ds-input--disabled) .ds-field__helper,
+.ds-field:has(.ds-input__field:disabled) .ds-field__helper {
+  color: var(--ds-form-field-helper-color-disabled);
+}
+
+.ds-field:has(.ds-input--readonly) .ds-field__label,
+.ds-field:has(.ds-input__field:read-only) .ds-field__label {
+  color: var(--ds-form-field-label-color-readonly);
+}
+
+/* ---------------------------------------------------------
+   Error message styling lives em form-field.css.
+   Compor Input dentro de .ds-field pra usar o pattern composto.
+   --------------------------------------------------------- */
+
+/* ---------------------------------------------------------
+   Reduced motion
+   --------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ds-input { transition: none; }
+}

package/css/components/link.css

@@ -0,0 +1,67 @@
+/* ============================================================
+   COMPONENT: Link — text style pra hyperlinks inline em prosa
+   Bold + underline. Tamanhos espelham body/* (xs/sm/md/lg).
+   Estados WCAG/W3C: default, :hover, :active, :focus-visible.
+   :visited intencionalmente omitido (decisão do owner).
+
+   Consome Semantic `link/content/*` e `body/*` direto por design:
+   no Figma Link é Text Style + Semantic Variables, sem collection
+   Component. Não inventar `component.link.*` só no JSON — isso
+   cria DRIFT_FROM_SOURCE. Migrar para ADR-019 quando o Figma
+   materializar contrato anatômico próprio.
+   ============================================================ */
+
+.ds-link {
+  font-weight: var(--ds-body-font-weight-bold);
+  text-decoration: underline;
+  color: var(--ds-link-content-default);
+  cursor: pointer;
+  transition: color var(--ds-motion-duration-fast) var(--ds-motion-ease-default);
+}
+
+.ds-link:hover {
+  color: var(--ds-link-content-hover);
+}
+
+.ds-link:active {
+  color: var(--ds-link-content-active);
+}
+
+/* :visited intencionalmente omitido — decisão do owner */
+
+.ds-link:focus-visible {
+  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color-default);
+  outline-offset: var(--ds-focus-ring-width);
+  border-radius: var(--ds-radius-sm);
+}
+
+/* ---------------------------------------------------------
+   Sizes — herdam dimensões de body/*
+   --------------------------------------------------------- */
+
+.ds-link--xs {
+  font-size: var(--ds-body-font-size-xs);   /* 12px */
+  line-height: var(--ds-body-line-height-xs); /* 18px */
+}
+
+.ds-link--sm {
+  font-size: var(--ds-body-font-size-sm);   /* 14px */
+  line-height: var(--ds-body-line-height-sm); /* 20px */
+}
+
+.ds-link--md {
+  font-size: var(--ds-body-font-size-md);   /* 16px */
+  line-height: var(--ds-body-line-height-md); /* 24px */
+}
+
+.ds-link--lg {
+  font-size: var(--ds-body-font-size-lg);   /* 18px */
+  line-height: var(--ds-body-line-height-xl); /* 32px (Figma body/lg uses lh xl) */
+}
+
+/* ---------------------------------------------------------
+   Reduced motion
+   --------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ds-link { transition: none; }
+}