Component Library

The styled container kept the button's look and pointer tap but lost its role, focusability and keyboard activation, so assistive-technology and keyboard users could not accept trips. The API should restrict render targets to semantically compatible ones and type the properties each allows.

Forty properties signal over-configuration: one component absorbing every surface's needs as flags, with interactions nobody tests. Restructure into primitives, named slots for extension, and a few prebuilt recipes, keeping editorial invariants enforced inside the pieces.

Wrapper drift happens when hand-written wrappers gain their own options, defaults and behaviour. Stop it with one machine-readable component contract that generates or type-checks every wrapper, a shared conformance suite run against each, and lockstep releases.

The package defeats tree-shaking - usually a name-string lookup over a map of every icon, a single file, or registration on import. Ship one module per icon, imported statically, keep name-based lookup opt-in, and guard it with a size budget.

Add a theme switcher that applies every shipped theme through the same mechanism apps use, render every example under each, and review a side-by-side view. Measure coverage as specified variants and states with examples, across themes.

Inventory every physical left/right use, convert spacing, alignment, radii, offsets and motion to logical start/end, take direction from the app's root, flag directional icons, then add a lint guard and both-direction checks so physical values cannot return.

Consumer-contract tests encode what real consuming screens rely on and run against a library release candidate before publishing, catching breaks in usage the library's own authors never tested.

The team depended on private structure the library never promised to keep. The library should publish a small, documented override surface — theme tokens, component override tokens, variants and a few named parts — and keep everything else private.

A changed default is a breaking change shipped as a MINOR. Leave 4.7.0 as published, release a version restoring 99, flag 4.7.0 as faulty, and deliver the new cap as an opt-in or in 5.0.0.

Open enough that teams never fork, closed enough that internals stay changeable. Most libraries curate: attributes pass to one documented element, a host reference points at the primary focusable node, style changes go through named override points, and escape-hatch usage is measured.

Weigh each framework's share of product surface and lifespan against the multiplied cost of supporting it, and the cost of teams rebuilding components if you do not. Usually the answer is tiered support with explicit entry and exit criteria.

Interaction rules are the costliest part to get right, so a render-free state machine lets every framework share one tested implementation. Each adapter still renders markup, binds platform input to machine events, moves real focus and runs side effects.

Each example is defined once and reused by the workshop, tests and design review, so a documented state is a tested state. Its mocked data should come from deterministic builders with named scenarios, a frozen current time and no real records.