feat: Sana Canvas Tabs

[jaclynjessup]

🚀 Feature Proposal

Update the Tabs component to align with v16 token and style changes, including the addition of a new item variant.

Components in this ticket:

• Tabs

---

Prerequisites

• Design review: Confirm Figma component is marked ready for dev
• A11y review completed for focus ring / selected state overlap (see below)
• Design decision confirmed on outlined vs. filled (ghost) variant guidance

---

Token Updates Required

Category	Updated?
Space	✅ Yes
Size	✅ Yes
Shape	✅ Yes
Color	✅ Yes
Depth	No
Theme	No

---

Visual Changes

• Token changes across space, size, shape, and color
• Two Tabs.Item button-style variants currently unsupported — need to be added

---

API Changes

• Addition of Tabs.Item variant to support the two button-style tab variants in Sana Figma.

---

⚠️ Accessibility Concern

Overlapping focus ring & selected state border: The selected state uses a bottom border that visually conflicts with the focus ring.

• Use :focus-visible (not :focus) to reduce false positives
• Must be resolved before shipping.

---

Effort & Timeline

• Priority: High
• Effort: Large (token changes, addition of Tabs.Item variant)

---

Dependencies

• No blockers
• A11y review required before shipping

---

Acceptance Criteria

• Token updates applied (space, size, shape, color)
• New Tabs.Item variant added
• Focus ring / selected state border overlap resolved with :focus-visible
• A11y review signed off
• Usage guidance documented in Storybook
• Visual regression tests pass

[RayRedGoose]

blocked by a11y

[RayRedGoose]

Going to preview/labs

[mannycarrera4]

Consider adding this accessibility feature here: #3790