[Michael McQuade (giraffesyo)]

Summary

Applications with custom navigation currently load the styles for AppFrameNavItem even when they never render it. Export @parallelworks/ui/app-frame/layout.css for the frame, resize handle, toggle/close buttons, focus indicators, and mobile drawer, and @parallelworks/ui/app-frame/navigation.css for the optional navigation items.

The existing @parallelworks/ui/app-frame.css import continues to include both. The published combined file remains self-contained, so direct stylesheet links do not gain additional requests. All rules retain the pw-ui layer. No component runtime or dependency changes.

Measured with Vite's production CSS build and gzip:

Stylesheet	Minified bytes	Gzip bytes
Previous combined stylesheet	5,311	1,493
Combined stylesheet after this change	5,396	1,486
Layout only	4,215	1,196

Layout-only consumers omit 1,096 minified bytes / 297 gzip bytes compared with the previous combined stylesheet, about 20% of its compressed size. These are isolated stylesheet measurements, not a whole-application bundle estimate.

Testing

• UI build, typecheck, changed-file Biome checks, and strict package lint pass.
• All 4,102 UI tests pass across 226 files, including the new custom-navigation Storybook story.
• verify:pack installs the actual tarball and bundles all CSS import forms. It checks that combined and separate imports produce identical output, layout-only omits navigation item styles, and the compatibility file has no import waterfall. Existing runtime-import and consumer-type checks also pass.
• Storybook browser comparison: all computed properties and screenshots identical to the previous CSS in 13 states covering expanded/rail, narrow labels, short sidebar, dark, full bleed, mobile/banner/RTL, navigation hover/disabled, and toggle hover/focus.
• With only layout CSS loaded: custom navigation, collapse/expand, keyboard resizing, toggle hover, 44px mobile controls, keyboard focus indication, reduced motion, navigation dismissal, focus return, and Escape pass.

Existing frame: before and after

Before	After

Custom navigation with layout CSS only

layout-only-interaction.mp4

Checklist

• Applicable UI checks pass; full make check was not run locally because this changes only the UI package.
• No shared messages changed.
• No existing exports, codes, rules, or params renamed.