Densidade

data-density="medium|large|extra-large" (padrão regular) vale para a subárvore, como a marca e o modo, e é independente deles.

<section data-density="large">…</section>

O que muda hoje

Só o AppButton lê a densidade: o gap entre texto e ícone e o tamanho do ícone crescem com ela, mas nunca ficam abaixo do que o tamanho (sm a 2xl) pede. Altura e padding seguem o tamanho.

Densidade	Gap (`--button-gap`)	Ícone (`--button-icon-size`)
`regular`	8px	16px
`medium`	8px	16px
`large`	12px	16px
`extra-large`	12px	24px

O tamanho define o mínimo (ícone de 20px, 24px no 2xl): por isso, no botão, os valores efetivos só mudam onde a densidade passa do mínimo.

const PorDensidade = () => (
  <div style={{ display: 'grid', gap: 16 }}>
    {DENSITIES.map((density) => (
      <section key={density} aria-label={density} data-density={density} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <strong style={{ width: 96 }}>{density}</strong>
        <AppButton trailingIcon={<IconArrowForward />}>Participar</AppButton>
        <AppButton size="2xl" trailingIcon={<IconArrowForward />}>
          Participar
        </AppButton>
      </section>
    ))}
  </div>
);

Tokens de densidade

O pacote declara, por densidade, estes tokens (montados com a escala --size-*): --button-icon-size, --button-gap, --button-padding-x, --button-padding-y, --button-radius, --content-gap-large, --content-gap-extra-large, --container-gap e --container-radius.