feat(design-system): add core design-system components

[DigiBanks99]

Summary- add Tailwind CSS v4 design-system infrastructure across the Menlo app, libraries, and Storybook- define Catppuccin theme tokens, semantic colors, and Nunito Sans as the shared visual foundation- add a reusable ThemeService in menlo-lib and initialize it during app bootstrap- add Storybook Foundations documentation for colours, typography, spacing, icons, and shadows/radii in menlo-lib- add the standalone mnl-button, mnl-input, and mnl-select atoms with signal-based APIs, CVA integration for the form controls, Storybook docs, and exhaustive Vitest coverage in menlo-lib- add the standalone mnl-form-field and mnl-amount-input molecules with accessible label/error composition, currency-prefix formatting, CVA wiring, Storybook docs, and full coverage in menlo-lib- add the standalone mnl-tab-bar molecule and mnl-page-shell organism with router-aware active state handling, responsive mobile/desktop navigation, page-scroll reset on route changes, Storybook docs, and full coverage in menlo-lib- add the standalone mnl-panel molecule with viewport-aware auto/sheet/dialog modes, focus trapping, dismissal handling, body scroll locking, Storybook docs, and full coverage in menlo-lib- add the standalone mnl-toggle and mnl-badge atoms with signal APIs, CVA and keyboard support for the toggle, Storybook docs, and full Vitest coverage in menlo-lib- wire the authenticated app shell to the new page shell organism without migrating the route content yet- refresh the tracked documentation.json artifact after Storybook validation and keep repo formatting aligned with the validation gates## Validation- pushd src\ui\web; pnpm format && pnpm lint && pnpm test && pnpm build && popd- pushd src\ui\web; pnpm build-storybook && pnpm build-storybook:lib && pnpm audit --audit-level moderate && pnpm licenses list --json && popd- dotnet restore Menlo.slnx- dotnet format Menlo.slnx --verify-no-changes --no-restore- dotnet build Menlo.slnx --no-restore --configuration Release- dotnet test Menlo.slnx --no-build --configuration Release --verbosity minimal --collect:"XPlat Code Coverage" --results-directory .\coverage\issue-331 --logger trx --logger "console;verbosity=minimal"- .\scripts\check-api-coverage-baseline.ps1 -CoverageDir coverage\issue-331 -Threshold 70 -HeadSha HEAD- dotnet list Menlo.slnx package --vulnerable --include-transitive- aspire start --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --isolated --non-interactive --nologo --format Json- aspire wait web-ui --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --status up --timeout 180 --non-interactive --nologo- aspire describe web-ui --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --format Json --non-interactive --nologo- HTTP 200 from http://localhost:4200/Closes #321Closes #322Closes #323Closes #324Closes #329Closes #330Closes #331Closes #325Relates to #320## Update: Issue #326- add the standalone mnl-progress and mnl-avatar atoms with accessible progress semantics, image fallback handling, Storybook stories, and Vitest coverage in menlo-lib- rerun Playwright from a clean dev-server instance to avoid stale Vite overlays before completing audit and license validationCloses #326## Update: Issue #328- add the standalone mnl-card and mnl-stat molecules with padding variants, projected header/footer slots, interactive hover treatment, and badge-backed trend states in menlo-lib- add Storybook coverage and focused Vitest suites for slot projection, interactive rendering, and conditional trend badges so the home and budget-list migrations can compose these primitives confidently### Validation- pushd src\ui\web; pnpm nx test menlo-lib --runInBand && pnpm lint && pnpm test && pnpm build && pnpm build-storybook && pnpm build-storybook:lib && pnpm audit --audit-level moderate && pnpm licenses list --json && popd- dotnet restore Menlo.slnx- dotnet format Menlo.slnx --verify-no-changes --no-restore- dotnet build Menlo.slnx --no-restore --configuration Release- dotnet test Menlo.slnx --no-build --configuration Release --verbosity minimal --collect:"XPlat Code Coverage" --results-directory .\coverage\issue-328 --logger trx --logger "console;verbosity=minimal"- .\scripts\check-api-coverage-baseline.ps1 -CoverageDir coverage\issue-328 -Threshold 70 -HeadSha HEAD- dotnet list Menlo.slnx package --vulnerable --include-transitive- aspire start --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --isolated --non-interactive --nologo --format Json- aspire wait web-ui --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --status up --timeout 180 --non-interactive --nologo- aspire describe --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --format Json --non-interactive --nologo- HTTP 200 from http://localhost:4200/Closes #328

Update: Issue #332

• add the standalone mnl-list-item and mnl-page-header molecules with projected slots, interactive and selected states, theme-aware gradient tokens, Storybook coverage, and Vitest suites in menlo-lib
• refresh shared theme preview variables and the tracked Storybook documentation artifact so the new molecules render consistently across Latte and Mocha in app and docs builds

Validation

• pushd src\ui\web; pnpm format && pnpm lint && pnpm test && pnpm build && pnpm build-storybook && pnpm build-storybook:lib && pnpm audit --audit-level moderate && pnpm licenses list --json && popd
• dotnet restore Menlo.slnx
• dotnet format Menlo.slnx --verify-no-changes --no-restore
• dotnet build Menlo.slnx --no-restore --configuration Release
• dotnet test Menlo.slnx --no-build --configuration Release --verbosity minimal --collect:"XPlat Code Coverage" --results-directory .\coverage\issue-332-full --logger trx --logger "console;verbosity=minimal"
• .\scripts\check-api-coverage-baseline.ps1 -CoverageDir coverage\issue-332-full -Threshold 70 -HeadSha HEAD
• dotnet list Menlo.slnx package --vulnerable --include-transitive
• aspire start --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --isolated --non-interactive --nologo --format Json
• aspire wait web-ui --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --status up --timeout 180 --non-interactive --nologo
• aspire describe web-ui --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --format Json --non-interactive --nologo
• HTTP 200 from http://localhost:4200/

Closes #332

Update: Issue #335

• migrate the menlo-app home page to mnl-page-header, mnl-card, mnl-stat, mnl-button, and mnl-badge, removing the bespoke landing-page styling
• restyle the embedded budget widget with design-system primitives so the home route keeps its budget summary and navigation behaviour without hardcoded colours
• align menlo-lib's public-api.ts with src/index.ts for page-header exports and document routed mnl-button usage in AGENTS.md

Validation

• pushd src\ui\web; pnpm nx format:check --files="projects/menlo-app/src/app/home/home.component.ts,projects/menlo-app/src/app/home/home.component.html,projects/menlo-app/src/app/home/budget-widget.component.ts,projects/menlo-app/src/app/home/home.component.spec.ts,projects/menlo-app/src/app/home/budget-widget.component.spec.ts,projects/menlo-lib/src/public-api.ts" && pnpm lint && pnpm test && pnpm build && pnpm build-storybook && pnpm build-storybook:lib && pnpm audit --audit-level moderate && pnpm licenses list --json && popd
• dotnet restore Menlo.slnx
• dotnet format Menlo.slnx --verify-no-changes --no-restore
• dotnet build Menlo.slnx --no-restore --configuration Release
• dotnet test Menlo.slnx --no-build --configuration Release --verbosity minimal --collect:"XPlat Code Coverage" --results-directory .\coverage\issue-335-full --logger trx --logger "console;verbosity=minimal"
• .\scripts\check-api-coverage-baseline.ps1 -CoverageDir coverage\issue-335-full -Threshold 70 -HeadSha HEAD
• dotnet list Menlo.slnx package --vulnerable --include-transitive
• aspire start --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --isolated --non-interactive --nologo --format Json
• aspire wait web-ui --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --status up --timeout 180 --non-interactive --nologo
• aspire describe web-ui --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --format Json --non-interactive --nologo
• HTTP 200 from http://localhost:4200/
• pushd src\ui\web; pnpm test:e2e && popd

Closes #335

Update: Issue #336

• migrate the budget list page to mnl-page-header, mnl-card, mnl-progress, mnl-badge, and mnl-button, replacing the bespoke SCSS-driven layout
• route budget list actions through the host component so mnl-button drives navigation to budget detail without reintroducing page-specific button styles
• add component tests for seeded rendering, overspend/error variants, the empty state CTA, and budget-detail navigation while deleting the old budget-list.component.scss

Validation

• pushd src\ui\web; pnpm run lint && pnpm run build:all:prod && pnpm run test && pnpm run test:e2e && pnpm audit --audit-level moderate && pnpm licenses list --json && popd
• dotnet format Menlo.slnx --verify-no-changes --no-restore
• dotnet test Menlo.slnx --no-restore --nologo
• dotnet list package --vulnerable --include-transitive

Coverage note

• pnpm exec nx run-many --target=test --all --outputStyle=static -- --coverage still fails on this branch because menlo-app and menlo-lib both enforce 100% global coverage across pre-existing uncovered files outside issue Design System: Migration - Budget List Page #336. budget-list.component.ts itself is 100% covered locally.

Closes #336

Update: Issue #333

• add the standalone mnl-form-layout organism with projected title, section, and action slots plus a sticky action bar that stays within mnl-panel boundaries
• add realistic Storybook coverage for dialog, dark-mode, and mobile sheet layouts so the budget-form migration has a shared reference implementation
• export the organism through both src/index.ts and public-api.ts, and refresh the tracked documentation.json artifact

Validation

• pushd src\ui\web; pnpm run lint && pnpm run test && pnpm run build:all:prod && pnpm audit --audit-level moderate && pnpm run start && popd
• pushd src\ui\web; pnpm exec nx format:check --files="projects/menlo-lib/src/index.ts,projects/menlo-lib/src/public-api.ts,projects/menlo-lib/src/lib/organisms/form-layout/form-layout.component.ts,projects/menlo-lib/src/lib/organisms/form-layout/form-layout.component.spec.ts,projects/menlo-lib/src/lib/organisms/form-layout/form-layout.stories.ts,projects/menlo-lib/src/lib/organisms/form-layout/index.ts" && pnpm exec nx test menlo-lib -- --coverage && pnpm exec nx build-storybook menlo-lib && pnpm licenses list --json > coverage\licenses-menlo-web.json && popd

Coverage note

• pnpm exec nx test menlo-lib -- --coverage still trips the library's existing project-wide 100% threshold because other pre-existing files on this branch remain uncovered; src/lib/organisms/form-layout/form-layout.component.ts itself is 100% covered.

Closes #333

Update: Issue #327

• add the standalone mnl-toast atom with semantic variants, optional dismiss actions, auto-dismiss timing, reduced-motion-aware transitions, and ARIA live-region semantics in menlo-lib
• add MnlToastService plus a root-level toast outlet portal so consumers can stack up to three active notifications without page-specific overlay wiring
• add Storybook coverage, Vitest suites, and refresh the tracked documentation.json artifact for the toast surface

Validation

• pushd src\ui\web; pnpm lint && pnpm test && pnpm build && pnpm build-storybook && pnpm build-storybook:lib && pnpm audit --audit-level moderate && pnpm licenses list --json && popd
• dotnet restore Menlo.slnx
• dotnet format Menlo.slnx --verify-no-changes --no-restore
• dotnet build Menlo.slnx --no-restore --configuration Release
• dotnet test Menlo.slnx --no-build --configuration Release --verbosity minimal --collect:"XPlat Code Coverage" --results-directory .\coverage\issue-327-full --logger trx --logger "console;verbosity=minimal"
• .\scripts\check-api-coverage-baseline.ps1 -CoverageDir coverage\issue-327-full -Threshold 70 -HeadSha HEAD
• dotnet list Menlo.slnx package --vulnerable --include-transitive
• aspire start --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --isolated --non-interactive --nologo --format Json
• aspire wait web-ui --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --status healthy --timeout 240 --non-interactive --nologo
• aspire describe web-ui --apphost src\api\Menlo.AppHost\Menlo.AppHost.csproj --format Json --non-interactive --nologo
• HTTP 200 from http://localhost:4200/

Notes

• Existing Storybook font-asset resolution warnings still appear during static builds and remain runtime-safe.
• The existing �udget-analytics.component.scss size-budget warning persists and is unrelated to Design System: Atom - Toast + Toast Service #327.

Closes #327

Update: Issue #337

• migrate the budget detail page, category management surfaces, and item create/edit/fill-forward/delete workflows onto mnl-page-header, mnl-card, mnl-list-item, mnl-form-layout, mnl-form-field, mnl-amount-input, mnl-panel, and MnlToastService
• preserve the existing Vitest and Playwright selector contracts by adding configurable test IDs to shared buttons, inputs, selects, amount inputs, form-field errors, and panel roots instead of falling back to page-specific controls
• update the affected budget item specs for localized amount formatting and validate the single-item create workflow end to end against the Aspire-hosted app

Validation

• Set-Location src\\ui\\web; pnpm format && pnpm lint && pnpm test && pnpm build && pnpm test:e2e && pnpm audit --audit-level moderate && pnpm licenses list --json
• dotnet format --verify-no-changes
• dotnet test Menlo.slnx
• dotnet list package --vulnerable --include-transitive
• aspire start --isolated --non-interactive --format Json --apphost src\\api\\Menlo.AppHost\\Menlo.AppHost.csproj
• aspire wait web-ui-xhgbuhtq --status healthy --timeout 180 --non-interactive --apphost src\\api\\Menlo.AppHost\\Menlo.AppHost.csproj
• HTTP 200 from http://localhost:4200/
• pnpm exec playwright test e2e/budget-item-create.spec.ts --workers=1

Note

• Parent issue PRD: Menlo Design System Implementation #320 is still open, so .ralph.done was not created in this slice.

Closes #337

Update: Issue #334

• add a reusable chart palette helper for menlo-lib and export it through the shared theme surface
• add Foundations/Charts Storybook coverage plus the ApexCharts dependencies needed for the new design-system chart demos
• refresh the tracked documentation.json artifact after the chart surface changes

Validation

• pushd src\ui\web; pnpm exec nx lint menlo-lib && pnpm exec nx test menlo-lib --watch=false && pnpm exec nx run menlo-lib:build-storybook && popd

Closes #334

Update: Storybook rendering

• remove the TypeScript-only preview annotation that the lib Storybook runtime was serving directly to the browser
• escape the literal Lucide import braces in the foundations icons story so Angular can compile the template reliably
• verify Avatar and the full menlo-lib Storybook surface with Playwright; all 35 story iframes render without console errors

Refs #320

Coverage update

• Added targeted menlo-app and menlo-lib spec coverage to satisfy the frontend CI thresholds and unblock the PR.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!