v0.6.0 — Ribbon initiative

v0.6.0 — The Ribbon initiative

The kit's flagship release: an Office-style Ribbon and the primitives it stands on. There is no production-grade React Ribbon in the OSS space (Fluent UI v9 ships none) — this one is built from kit primitives, validated live against Word Online in light and dark.

New (6 registry items, 31 → 37)

• ribbon — the composite. Two layouts on one shared component tree:
  • Single-line (Word's "Faixa de Opções de Linha Única"): commands drop by priority into a "…" overflow menu, grouped under source-group headers.
  • Classic (expanded): whole groups collapse to a dropdown whose flyout holds the group's commands → horizontal scroll with edge arrows → tab-strip overflow.
  • RibbonLayoutSwitcher (Word's far-right chevron), controllable layout/collapsed/autoAdjust, and a layouts escape hatch for per-layout content.
• overflow — headless priority-overflow system (ResizeObserver + exact space accounting: computed gaps, dividers, trigger, container padding + a post-layout safety net). Reusable standalone.
• ribbon-collapse — headless group-collapse manager (per-group expand/collapse + scroll escalation), the classic layout's core.
• toolbar — APG toolbar with roving tabindex, on @base-ui/react/toolbar.
• toggle — Fluent ToggleButton (pressed/unpressed), on @base-ui/react/toggle.
• split-button — primary action joined to a chevron menu trigger, composes DropdownMenu.

Quality

• 707 unit tests + 142 Playwright e2e, all green.
• Live-Word validation report (docs/design/ribbon-validation.md) — single-line and classic, light and dark; the layout-switcher finding is closed, remaining divergences are cosmetic and documented.
• Fixes found along the way: a Toggle dark-mode pressed-fill cascade bug, and the overflow manager's padding-reserve guesswork (replaced with exact accounting).

Install

npx shadcn@latest add @fluent2-react-kit/ribbon

Published to npm as @graundtech/fluent2-react-kit@0.6.0 via OIDC trusted publishing.