The catalog replaced navigation with a toggle that meant the wrong thing

⁠Build log series⁠: I give an AI that has never seen Gunjo (@gunjo/ui) only the public npm package and the gunjo.jp docs, then ask it to build a real screen. ⁠This fourth customer-facing trucking round⁠ covered a mobile ⁠parcel receipt and delivery settings screen⁠: unattended delivery, location, time window, notifications, and a digital membership card.

Result: 4/5. The settings foundation covered about 90 percent, except the setting row

The screen passed tsc and fit a 375px mobile-first layout. The agent reported:

⁠This was a genuinely good mobile settings library.⁠ About twelve components covered roughly 90 percent of a dense settings screen with accessibility and mobile usability built in. I hand-rolled only one pattern.

The core observation: the catalog substituted toggle semantics for navigation

A setting row has an icon, label, current value, and chevron, then navigates to details. The catalog recommended ListCard, but the agent found two problems:

⁠There was no component for a setting or navigation row.⁠ ListCard.onSelect creates an aria-pressed toggle, so a screen reader announces pressed or not pressed. A setting row navigates to another view and is not a toggle. ListCard is also a bordered standalone card, not an edge-to-edge grouped row separated by thin rules. I hand-rolled about 110 lines of SettingRow and SettingGroup. The highest-value addition should be NavRow or SettingsRow.

This was the second focused case after corporate taxi in #152, recorded on issue #409. It resembled the display-only rating false lead in #150: the catalog recommends a component that works, but ⁠the meaning of its action is wrong.⁠ An adopter only notices when a screen reader calls navigation a toggle. One more settings or account screen would trigger a navigation row without aria-pressed, grouped through SettingGroup. I did not build it after only two cases.

The second core observation: TicketStub returned for a digital membership card

⁠TicketStub fit the digital membership card perfectly:⁠ format="qr", content above the perforation, codeLabel, deterministic server-safe rendering without hydration mismatch, and an honest code slot for a production barcode.

Built in #128 for coupons and tickets, TicketStub kept growing into its consumer-facing role as a home for a pass the user presents.

What I took away: catalog semantics must include accessibility meaning

The catalog traps already included hidden and substituted components. This screen added a sharper dimension to substitution:

• RelationshipRow in #160 substituted the wrong ⁠structure⁠, people for freight.
• ListCard here substituted the wrong ⁠accessibility semantics⁠, a toggle for navigation.

The row looks right and clicks correctly. Only its announced meaning is wrong, making this defect especially slow to discover. NavRow would fill an accessibility-semantic gap, not merely a visual one. Catalog review must judge type, structure, and the meaning exposed to assistive technology.

What it flagged

• 🟡 NavRow or SettingsRow, now two of three, with the catalog falsely recommending ListCard and aria-pressed.
• 🟡 The accepted shape for FileUploader.accept was undocumented, and even a large Button remained below 44px, reconfirming issue #362.
• ✅ TicketStub, RadioCard, Switch, FileUploader, Sheet, and BottomActionBar all fit directly.

⁠Nothing new was added under src this round.⁠ The 4/5 validated TicketStub, put NavRow at two of three, and exposed an accessibility-semantic substitution.

📊 Component scoreboard (⁠20 built⁠, plus multiday RouteStops)

Two of the seven components and extensions added this session: SectionList / RouteStops with multiday timestamps. In progress: ⁠NavRow at two of three⁠, OriginDestination at one of three, Statistic goodWhen at two of three, and MatchCard at one of three.

📋 Mode progress

• ✈️ Air ✅ / 🚆 Rail ✅ / 🚕 Taxi ✅ / 🚌 Bus ✅
• 🚚 ⁠Trucking: five staff + four customer-facing screens⁠, one customer-facing screen short of parity

Next up: build log #168

• Add one more customer-facing trucking screen for shipper billing and payments, reaching five and five. Another navigation-row case will trigger the build.

The run

• ⁠gunjo.jp⁠ / ⁠TicketStub⁠ / ⁠RadioCard⁠ / ⁠FileUploader⁠ / npm @gunjo/ui / ⁠GitHub⁠ / previous rounds #1 through #166
• ⁠GunjoUI by UIXHERO⁠

The catalog recommended a component that clicked correctly but announced the wrong meaning. A navigation row needs navigation semantics, not aria-pressed.