Spec — Button groups Expressive

Strict extension to buttons.kmd §Button groups. Compatible: code using base button groups remains valid; Expressive opt-in per surface OR per preset.

Princípios

1. Connected by default — sem gap entre items; visual unified group.
2. 5 sizes XS-XL — granular sizing extending baseline 3 sizes.
3. Shape morph on press — corner radius pulls toward pressed item.
4. Scale on hover — 1.0 → 1.05 via spring (desktop + tablet hover).
5. Reduced-motion safe — animations skipped under prefers-reduced-motion.

R1 — Anatomy (extension)

Base anatomy per buttons.kmd §Button groups. Expressive adds:

   normal:    ┌──┬──┬──┬──┐
              │ A│ B│ C│ D│
              └──┴──┴──┴──┘
   hover B:   ┌──┬────┬──┬──┐   ← B scales 1.05 + neighbors compress
              │ A│  B │ C│ D│
              └──┴────┴──┴──┘
   press C:   ┌──┬──┬──┬──┐
              │ A│ B│CCC│ D│   ← C grabs visual focus
              └──┴──┴──┴──┘

R2 — 5 sizes

R3 — Connected appearance

• No gap entre items (0dp).
• Shared inner border (1dp; color outline-variant).
• Group radius: shape-corner-small or shape-corner-medium (per preset; xs/sm in expressive default).
• Items at edges share group radius; inner items square.

R4 — Hover state

Hover an item (desktop/mouse OR tablet stylus-hover):

• Scale: 1.0 → 1.05 over 200ms spring motion-spatial-fast (per motion.kmd R9.1).
• Neighbors compress slightly (max 5% width reduction) to make room.
• Group radius shifts toward hovered item.
• Color shift: hovered item background surface-container-highest.

R5 — Press state

Press item:

• Scale: 1.0 → 0.97 (subtle "click" feel) via spring.
• Group radius "pulls toward" pressed item (radius asymmetric briefly).
• Color: primary-container (filled style) OR primary text (outlined).
• Release: spring back to default state.

R6 — Selected state (for toggle groups)

Selected item in toggle group:

• Background: secondary-container (tonal).
• Persistent (not press-flash).
• Shape: filled in corner radius of group.

Multi-select OR single-select per host config.

R7 — Surface bindings

R8 — Acessibilidade

• Buttons individually focusable per buttons.kmd.
• Hover scale: visual only — does NOT affect tab order.
• Reduced-motion: hover scale + radius shift disabled; color shift remains.
• Touch target ≥ 28dp per size XS (sizes S+ already meet 32+).

R9 — i18n

Inherits from buttons.kmd. No new keys.

R10 — Per-preset variation

T-suite

• T1 Render 3-item group XS → height 28dp; min width 48dp each.
• T2 Hover item: scale 1.0 → 1.05 via spring; neighbors compress.
• T3 Press item: scale → 0.97; release → springs back.
• T4 Group radius asymmetric during press; reverts on release.
• T5 Selected state: persistent secondary-container fill.
• T6 Reduced-motion: no scale + no shape morph; color shift kept.
• T7 Touch target ≥ 28dp for XS; S+ ≥ 32dp.
• T8 Disable expressive (flag false): falls back to base buttons.kmd behavior.
• T9 A11y: tab order unchanged by scale.
• N1 Material2 preset: expressive ignored (graceful).

Cross-link

• Base: buttons.kmd §Button groups
• Animation: motion.kmd R9.1
• Shape morph: shape-library.kmd R2 (corner radius interpolation)
• Refs: M3 Button groups Expressive