Interface unificada de props para todos os tipos de botão. Props específicas de Chip e icon-buttons estão marcadas.

Requisitos compartilhados de acessibilidade para todos os sub-componentes de botão.

/* Registrar propriedade animável (CSS Houdini) */
@property --ti-focus-pct {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.ti-wrapper {
  position: relative; overflow: visible;
  border-radius: var(--radius-md);      /* 8px — repouso */
  border: 2px solid var(--ti-border-default);
  transition:
    border-radius var(--motion-duration-normal) var(--motion-easing-expressive),
    border-color  var(--motion-duration-fast)   var(--motion-easing-standard);
}

/* Color replace: ::before renderiza borda completa (grape + tomato).
   border-color real fica transparent no foco.
   from 0deg = centro da linha superior (12h). */
.ti-wrapper::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: calc(var(--radius-md) + 2px);
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    var(--color-primary) 0%,
    var(--color-primary) var(--ti-focus-pct),
    var(--ti-border-active) calc(var(--ti-focus-pct) + 0.5%),
    var(--ti-border-active) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; opacity: 0;
  transition: opacity 150ms var(--motion-easing-standard);
}

.ti-wrapper:focus-within {
  border-radius: var(--radius-lg);      /* 12px — foco */
  border-color: transparent;            /* ::before assume */
  transition:
    border-radius var(--motion-duration-normal) var(--motion-easing-expressive),
    border-color  0ms;
}
.ti-wrapper:focus-within::before {
  --ti-focus-pct: 100%;
  opacity: 1;
  border-radius: calc(var(--radius-lg) + 2px);
  transition:
    --ti-focus-pct 800ms var(--motion-easing-expressive),
    opacity        0ms,
    border-radius  var(--motion-duration-normal) var(--motion-easing-expressive);
}
/* Retorna a radius-md no blur — sempre, com ou sem valor */

.ti-wrapper.is-error  { border-color: var(--ti-border-error); }
.ti-wrapper.is-warning { border-color: var(--ti-border-warning); }

@media (prefers-reduced-motion: reduce) {
  .ti-wrapper,
  .ti-wrapper::before { transition: none; }
}

/* Wrapper: border + focus stroke draw */
.ta-wrapper {
  border: var(--border-width-strong) solid var(--ti-border-default);
  border-radius: var(--radius-md);   /* sempre retangular */
  padding: 14px var(--ti-padding-x-lg);
}
.ta-wrapper:focus-within { border-color: transparent; }
/* ::before: conic-gradient idêntico ao TextInput
   (ver 02-textinput.css para técnica completa) */

/* States */
.ta-wrapper.is-error   { border-color: var(--ti-border-error) !important; }
.ta-wrapper.is-disabled {
  border-color: var(--ti-border-disabled);
  background: var(--color-state-disabled);
}

/* Auto-resize */
.ta-input.is-autoresize { resize: none; overflow: hidden; }

/* Counter */
.ta-counter.is-warn  { color: var(--color-warning-text); }
.ta-counter.is-limit { color: var(--color-danger); }

Props proibidas: size · leadingIcon · trailingIcon · prefix · suffix · trailingAction — Textarea não suporta esses slots.

/* Touch target + hover halo */
.cb-control {
  width: var(--size-xl);     /* 44px */
  height: var(--size-xl);
  border-radius: var(--radius-full);
  transition: background var(--motion-duration-fast) var(--motion-easing-standard);
}
.cb-item:not(.is-disabled):not(.is-readonly) .cb-control:hover {
  background: var(--color-state-hover);    /* grape-50 */
}

/* Polygon icon */
.cb-box { color: var(--color-border-strong); }       /* unchecked */
.cb-box.is-checked, .cb-box.is-indeterminate {
  color: var(--color-primary);                       /* tomato-500 */
}

/* Focus ring */
.cb-input:focus-visible ~ .cb-box {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset-compact);
}

/* Disabled */
.cb-item.is-disabled { opacity: 0.38; pointer-events: none; }

Props proibidas: variant · color · shape · borderRadius · tone — a forma poligonal é identidade fixa do DS.

/* Outer circle */
.rd-box {
  width: var(--icon-lg); height: var(--icon-lg);  /* 24px */
  border-radius: var(--radius-full);
  border: var(--border-width-strong) solid var(--color-border-strong);
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    background   var(--motion-duration-fast) var(--motion-easing-standard);
}

/* Inner dot: scale animation */
.rd-box::after {
  content: ''; width: 10px; height: 10px;
  border-radius: var(--radius-full); background: transparent;
  transform: scale(0);
  transition:
    background var(--motion-duration-fast) var(--motion-easing-standard),
    transform  var(--motion-duration-fast) var(--motion-easing-standard);
}
.rd-box.is-checked { border-color: var(--color-primary); }
.rd-box.is-checked::after {
  background: var(--color-primary); transform: scale(1);
}

/* Disabled */
.rd-item.is-disabled { opacity: 0.38; pointer-events: none; }

/* Vertical group */
.rg-group { display: flex; flex-direction: column; }

/* Horizontal group */
.rg-group.is-horizontal {
  flex-direction: row; flex-wrap: wrap; gap: var(--space-4);
}

/* Error state — applies to all rd-box in group */
.rg-group.is-error .rd-box { border-color: var(--color-danger); }

/* Card variant */
.rg-card {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width-strong) solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    background   var(--motion-duration-fast) var(--motion-easing-standard);
}
.rg-card.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-muted);
}

Radio

RadioGroup

Props proibidas no Radio: variant · color · shape · tone · borderRadius

APG — Radio Group Pattern

/* Trigger: pill at rest */
.sel-trigger {
  height: var(--size-input-height);          /* 52px */
  border: var(--border-width-strong) solid var(--ti-border-default);
  border-radius: var(--radius-input-default); /* 999px pill */
  transition: border-radius var(--motion-duration-fast) var(--motion-easing-expressive),
              border-color  var(--motion-duration-fast) var(--motion-easing-standard);
}

/* Open: pill top, rect bottom */
.sel-trigger.is-open {
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md);
  border-color: var(--ti-border-active);
}

/* Dropdown: rect top, lg bottom */
.si-dropdown {
  border-radius: var(--radius-md) var(--radius-md) var(--radius-lg) var(--radius-lg);
  margin-top: var(--dropdown-gap);
}

/* Chevron rotation */
.sel-trigger.is-open .sel-arrow { transform: rotate(180deg); }

/* Open state: tomato stroke-draw animation (conic-gradient ::before)
   Same technique as TextInput focus. Fires on :focus-visible AND .is-open. */
.sel-trigger:focus-visible,
.sel-trigger.is-open { border-color: transparent; outline: none; }
.sel-trigger:focus-visible::before,
.sel-trigger.is-open::before {
  --sel-focus-pct: 100%; opacity: 1;
  transition: --sel-focus-pct 800ms var(--motion-easing-expressive), opacity 0ms;
}

/* Multi wrapper: pill → rect bottom on open */
.sel-multi {
  display: flex; flex-wrap: wrap; align-items: center;
  min-height: var(--size-input-height);      /* 52px */
  border: var(--border-width-strong) solid var(--ti-border-default);
  border-radius: var(--radius-input-default); /* 999px */
  padding: 6px var(--ti-padding-x-lg);
  transition: border-radius var(--motion-duration-fast) var(--motion-easing-expressive),
              border-color  var(--motion-duration-fast) var(--motion-easing-standard);
}
.sel-multi.is-open {
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md);
  border-color: var(--ti-border-active);
}

/* Tags — reuse .fci-tag from TextInput */
.fci-tag {
  background: var(--color-surface-inverse);  /* grape-500 */
  color: var(--color-text-on-dark);          /* jasmine-50 */
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
}