[egdev6]

Summary

Closes #34

• Adds the Tabs molecule with controlled/uncontrolled selection, APG tab semantics, roving focus, manual/automatic activation, disabled states, semantic colors, placements, and link-like tab support.
• Documents variants, colors, icon tabs, rich React node content, controlled usage, disabled items, and persistent panels in Storybook.
• Exports Tabs from the package root.

Review scope

• Primary files/areas:
  • src/components/molecules/tabs/*
  • src/index.ts
• Out of scope:
  • Existing local .gitignore and pnpm-lock.yaml workspace changes were not included in this branch commit.
  • Existing lottie-web eval build warning is unrelated to Tabs.
• Review workload: large for a single component (~2k added lines across implementation, tests, stories, and export). Kept as one PR because the issue is one new component and tests/stories are part of the same reviewable contract.

Type of change

• New component
• Existing component update/refactor
• Bug fix
• Accessibility
• Design tokens
• Storybook/docs
• Infrastructure/tooling
• NPM/dependencies

Workflow gates

• Linked issue is present with Closes #NNN or maintainer approved an exception.
• Linked issue has label status:approved before implementation starts.
• Linked issue assignee was checked before work started; if it was assigned to someone else, explicit reassignment permission is documented.
• Work was started through the Project flow: assignee set, Project status In progress, branch/worktree recorded.
• PR title follows Conventional Commit format: <type>(<optional scope>): <description>.
• Commits follow the same commitlint-enforced format.
• Diff is focused; unrelated work is called out in Review scope.
• MCP/runtime artifacts are absent: .playwright-mcp, page-*.png, page-*.jpeg, *.md.playwright-output.

Component evidence (required for component changes)

• Validated component spec is linked or quoted in the issue.
• Accessibility contract from the spec was implemented or deviations are explained below.
• Follows the 6-file pattern: types.ts, use*.ts, Component.tsx, Component.test.tsx, Component.stories.tsx, index.ts.
• CVA variants live in types.ts; JSX component has no state, CVA calls, or business logic.
• Public props with runtime defaults have matching @default JSDoc in types.ts (node scripts/verify-prop-default-docs.mjs).
• Uses design tokens from theme.css; no hardcoded colors or arbitrary color utilities.
• Storybook covers default, variants, documented states, edge cases, and dark mode when visually different.
• Component audit result is PASS or accepted PASS WITH WARNINGS.
• Visual review result is included when visuals changed.

Accessibility evidence

• Role/name semantics verified with Testing Library queries or equivalent.
• Keyboard-only behavior verified: Tab / Shift+Tab, Enter / Space, Arrow keys, Home / End where applicable.
• Focus lifecycle verified: roving focus, manual activation, focusable panel fallback.
• Disabled, empty, invalid controlled value, and global disabled behavior verified.
• Reduced motion behavior is respected where motion changed.
• Screen reader or axe/manual evidence is included below when applicable.

Validation evidence

• TypeScript:
  • pnpm exec tsc --noEmit — passed
  • pre-commit typecheck — passed
• Unit tests:
  • pnpm exec vitest run src/components/molecules/tabs/Tabs.test.tsx — 27 tests passed
  • pnpm exec vitest run src/storybook-explicit-examples.test.ts — passed
  • pre-push pnpm run test — 37 files / 796 tests passed
• Build/package:
  • pnpm run build — passed
  • pnpm run verify:package — passed for React 18 and React 19 consumers
• Storybook or visual check:
  • Headless Storybook smoke for default, vertical, full-width, with-icons, colors, and cursor alignment
  • Visual review PASS after cursor alignment and spacing/layout refinements
• Accessibility check:
  • Testing Library role/name/keyboard tests
  • Fresh PR readiness review PASS
  • 4R review: Risk no findings; Reliability re-run no findings; Resilience warning documented below
• Security/dependency check:
  • No new dependencies
  • Existing lottie-web eval warning remains unrelated to this PR

Screenshots or recordings

Not attached. Storybook stories were smoke-checked locally; reviewers can inspect Molecules/Tabs stories directly.

Notes for reviewer

• Link-like tabs intentionally render as tab buttons and navigate by creating a temporary anchor, preserving APG role="tab" semantics. R4 resilience review noted this does not provide native link context-menu affordances; accepted as a follow-up tradeoff for this component API.
• Runtime fallback normalization was added for invalid untyped visual props so JS/data-driven consumers do not crash on invalid variant, color, size, radius, placement, or activationMode.
• Storybook Colors uses explicit examples instead of .map() to satisfy the repo's story explicitness test.

[ludevdot]

Review notes for the Tabs ARIA relationship when inactive panels are destroyed.

[ludevdot]

Only remaining cleanup: please update the PR description to mention the included .gitignore change for context.md (or remove that change if it was accidental). Once that body/scope mismatch is fixed, this looks merge-ready to me.