NavRow fixed the semantic gap as I finished all five transport modes

⁠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 ⁠fifth and final customer-facing trucking round⁠ covered a ⁠shipper billing and payment portal⁠: invoice lists, breakdowns, document downloads, and payment methods. Trucking reached five staff and five customer-facing screens, completing all five transport modes.

First, I finished trucking and all five transport modes

Staff trucking covered dispatch, matching, fleet and labor, billing, and profitability. Customer-facing coverage included the portal, parcel tracking, international freight, delivery settings, and billing. With five screens on each side, trucking joined air, rail, taxi, and bus as a complete mode with balanced depth.

Result: 4.5/5, and NavRow settled on its third case

The responsive mobile and desktop screen passed tsc. The agent reported:

⁠This was a rare design system that had already considered its domain.⁠ Documentation literally named billing, closing dates, customer grouping, and advances. Two of the three hard parts, grouped tables with subtotals and derived monetary totals, fit directly.

The core observation: NavRow reached three of three and fixed the semantics

Payment method, delivery method, and notifications needed settings rows. The agent found:

⁠There was no NavRow, SettingsRow, or ListRow.⁠ The catalog sends tappable settings rows to ListCard, but ListCard.onSelect is an aria-pressed button with selection state. A row that opens a detail sheet navigates and is not a toggle, so aria-pressed lies to assistive technology. I hand-rolled SettingsNavRow without aria-pressed and with aria-haspopup="dialog". The highest-value addition is NavRow, and the catalog should point settings rows there.

After corporate taxi in #152 and delivery settings in #167, this was the third case. I built:

• ⁠NavRow⁠, an edge-to-edge row with leading icon, label, description, right-aligned current value, and trailing chevron. With onSelect, it is a button for navigation or detail expansion, and opensDialog adds aria-haspopup="dialog". It intentionally has no aria-pressed. Without onSelect, it can be a static action row with a trailing switch or badge.
• ⁠SettingGroup⁠, a rounded container with thin dividers, following grouped mobile settings patterns.
• Corrected catalog guidance from settings and navigation rows using ListCard to NavRow, explicitly noting that ListCard.onSelect is a toggle and is wrong for opening details.

PR#426 confirmed zero aria-pressed attributes on nav-row buttons and two aria-haspopup="dialog" rows. Issue #409 closed. ⁠This was the twenty-first component produced by the series.⁠

What I took away: NavRow was the first build aimed at accessibility meaning

Earlier components mostly filled functional gaps. NavRow filled an ⁠accessibility-semantic gap⁠. ListCard already looked right and clicked, but its announced toggle state did not match navigation.

A working interaction with the wrong meaning is among the slowest defects to find. Encoding navigation and dialog semantics in the component protects adopters who do not know the rule, the accessibility counterpart to encoding server-safe classification in LimitMonitor.

What it flagged

• ✅ SectionList was the best fit for invoices grouped by month or closing date with subtotal footers, validating it again in the same run.
• ✅ AmountBreakdown fit the invoice details, and RadioCard fit payment method.
• 🟡 The catalog honestly returned no answer for downloadable document rows, so the agent hand-rolled them.

⁠What I built under src this round: NavRow.⁠ The 4.5/5 settled the accessibility semantics, corrected the catalog, and completed trucking.

📊 Component scoreboard (⁠21 built⁠)

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

📋 Mode progress: all five complete

• ✈️ Air (five staff + six passenger) ✅ / 🚆 Rail (five + six) ✅ / 🚕 Taxi (six + six) ✅ / 🚌 Bus (five + six) ✅ / 🚚 ⁠Trucking (five + five)⁠ ✅
• ⁠I finished all five transport modes with balanced operator- and customer-facing coverage.⁠

Next up: build log #169

• With transportation complete, either move to another industry or deliberately deepen the remaining candidates.

The run

• ⁠gunjo.jp⁠ / ⁠NavRow⁠ / ⁠SectionList⁠ / ⁠AmountBreakdown⁠ / npm @gunjo/ui / ⁠GitHub⁠ / previous rounds #1 through #167
• ⁠GunjoUI by UIXHERO⁠

NavRow settled as trucking completed all five modes. It was the first build aimed specifically at replacing wrong accessibility semantics with the right ones.