Give CmIcon its own stylesheet, and import what App.vue actually uses

[KolesnikovKirill]

What and why

You looked at the running showcase and asked if it was normal. It wasn't — two separate bugs, both hiding the same two components (CmIcon, CmThemeSwitch).

Bug 1: .cm-icon had no stylesheet at all

CmIcon's SVG carries no width, height, fill, or stroke — the outline shapes (regular/light/thin) have neither attribute at all. In the source they were painted by the wrapper <svg> they sat inside, not by themselves.

Checked against the source rather than guessed: rendered the same icon through the original codemonster-ru/vueforge component and diffed the two <svg> tags directly. The wrapper carried width/height via a CSS-variable fallback, fill="none" unconditionally, and stroke/stroke-width/stroke-linecap/stroke-linejoin for every variant but solid (stroke-width 2/1.5/1 for regular/light/thin). icon.js's extraction regex kept only viewBox from that tag and silently dropped everything else.

None of that needed to move into the generator or either adapter — the classes it needs (cm-icon, cm-icon--regular, and so on) were already being rendered on both platforms. It only needed a stylesheet, which never existed. Added packages/css/src/components/icon.css.

Bug 2: App.vue used two components it never imported

<CmIcon> and <CmThemeSwitch> were in the template but missing from the <script setup> import list. Vue does not resolve template tags against a global namespace — an unimported name is treated as an unresolved custom element, so both were silently invisible regardless of the CSS fix. This is why the first fix alone didn't show anything: the components weren't rendering at all yet.

Cross-checked every component tag the template actually uses against the import list, not just the two already reported missing — all 13 now match (5 from ui-layouts, 8 from ui-vue).

Bug 3: the theme switch changed nothing you could see

Asked separately whether light/dark looked supported — it wasn't, for two independent reasons:

• main.ts hand-picked one CSS import per demoed component and never imported foundation.css (or styles.css), which is what paints :root/body from --cm-color-background-canvas / --cm-color-text-primary in the first place. CmThemeSwitch was writing data-cm-theme and the token values behind it correctly the whole time; nothing on the page ever read them.
• showcase.css had its own body rule reading --cm-color-surface-default and --cm-color-text-default — neither name exists in this design system, so it always fell through to its own hardcoded #fff/#111 fallback, on top of the cascade, regardless of theme.

Verified live rather than assumed: drove the running dev server over the Chrome DevTools protocol and clicked the theme switch's own radios. Before the fix, body background stayed rgb(255, 255, 255) whether data-cm-theme was absent, dark, or light. After, it tracks the token in both directions (oklch(0.214 0.01 260) dark, oklch(0.978 0.005 260) light).

Bug 4 (found while fixing #3): the CSS bundle silently drops components

Switching main.ts to import styles.css — the "everything" bundle — surfaced that styles.css never @imported icon.css or theme-switch.css (pre-existing), and was also missing app-shell.css and document-layout.css (introduced earlier this same round of fixes). A spot-check test listed a subset of imports by name, so a missing component never failed anything. Added a test that enumerates the built components/ directory and asserts every file is reachable from styles.css.

That exposed the same class of bug one layer down: scripts/ci/sync-code-monster-ui-razor-assets.mjs never vendored those four component stylesheets for PHP consumers at all — styles.css importing them made check:ui-razor-assets correctly fail on an undeclared @import. Added the four missing entries and re-ran sync:ui-razor-assets to regenerate the vendored assets and manifest.

Bug 5 (you asked me to check everything else): nine custom-property references named tokens that don't exist

A systematic sweep of every var(--cm-*) in packages/css/src against every custom property this package or ui-tokens actually defines found nine more, in six files — none of them crashed, each silently fell back to the property's initial value:

• theme-switch.css: --cm-space-3xs / --cm-space-xs (gap and padding collapsed to 0, which is why "Light System Dark" rendered as one unbroken run of text) and --cm-focus-ring-offset (should be --cm-focus-ring-width, matching every other component).
• app-shell.css / document-layout.css: --cm-space-md / --cm-space-lg (grid columns had no gap) and --cm-container-2xl (fell through to its own 80rem fallback instead of the real --cm-breakpoint-2xl, 96rem).
• nav-menu.css / admin-layout.css: --cm-motion-easing-standard — the real token is --cm-motion-ease-standard (every other component's transitions use it); four transitions were instant instead of eased.
• nav-menu.css / menu-bar.css / stepper.css: --cm-color-text-tertiary — there's no "tertiary" step in the text-color scale, only primary/secondary/muted/disabled/placeholder. --cm-color-text-muted is what this codebase already uses for the same kind of de-emphasized text elsewhere.
• admin-layout.css: --cm-color-background-overlay for the mobile sidebar scrim — the real token is --cm-color-background-backdrop, the same one dialog.css/drawer.css use for their own backdrops.

Also gave the App Shell demo's collapse button real classes (cm-button cm-button--ghost cm-button--sm) — it was a bare <button> with none, rendering as the browser's default gray/outset control instead of anything from this design system.

Added scripts/ci/css-token-references.test.mjs: it extracts every custom property ui-css/ui-tokens define, then asserts every var(--cm-*) reference without a fallback names one of them — the check that would have caught all nine on its own. It lives at the repo root rather than inside packages/css/__tests__ because it reads a sibling package's dist; packages/css's own workspace test script only builds itself, and scripts/ci/test-without-dist.sh (the pre-push hook's isolation check) wipes every workspace's dist and runs each one's tests independently, so it has to run where cross-package reads are expected. Wired as check:css-token-references, appended to check:ui-contracts next to check:ui-razor-assets for the same reason.

None of the six touched components are covered by the frozen vueforge-cross-platform visual baseline (checked contracts/cross-platform-visual-baselines.json's 12 case IDs directly), so there's nothing there to re-approve.

Bug 6 (you asked about Admin Layout specifically): every layout demo filled the whole viewport

Every layout demo's .ui-showcase__frame (App shell, Document layout, Admin layout, Admin shell, Setup layout) rendered at exactly 815px — the browser viewport's innerHeight (813px) to the pixel. Each of those five layout components sets min-block-size: 100dvb/100vh on its own root, correct for what they actually are (a full page); the frame gave them nothing to be preview-sized against, so overflow: hidden and resize: vertical had no starting size to clip or resize from — each layout just grew to fill the viewport.

This isn't a regression from VueForge: the page's own intro text says these layouts are shown here specifically because the frozen VueForge showcase never had them (separate full-page routes per component there, not one scrolling page of framed previews) — so this failure mode is specific to this showcase's page architecture.

Gave .ui-showcase__frame an explicit block-size: 20rem, and fixed its border-radius reference from --cm-radius-md (doesn't exist) to the real --cm-radius-surface. Verified live over CDP: all five frames now render at 320px.

Verified against the real thing, throughout

Confirmed each CSS/import fix by inspecting the live dev server's HMR payload and, for the theme and spacing fixes, by scripting real clicks against the live page over CDP and reading back computed styles — not by reasoning about the CSS in the abstract.

Checks

npm run verify passes in full, and so does sh scripts/ci/test-without-dist.sh (the pre-push hook's stricter per-workspace isolation check) run directly.

Bug 7 (you asked for the demo to cover everything VueForge did): 36 components had no live demo at all

The showcase demoed 13 components/layouts — the ones with no VueForge ancestor, back when a separate frozen VueForge showcase also covered the rest. That frozen showcase is gone (sunset earlier), so the other 36 components in @codemonster-ru/ui-vue had no live demo anywhere in this repository: Accordion, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CommandPalette, Container, DataTable, DatePicker, Dialog, Divider, Dropdown, Drawer, Field, Fieldset, Grid, IconButton, Input, Inline, Link, Menu, Popover, ProgressBar, ProgressSpinner, Radio, Select, Section, Skeleton, Stack, Switch, Table, Tabs, Textarea, Tooltip.

Added a demo section for each, reading each component's actual prop types and templates rather than guessing — CmField/CmFieldset's slot-scoped composition matches the pattern already documented in docs/getting-started.md and docs/components/fieldset.md. Grid/Inline/Stack/Container/Section needed no bespoke showcase CSS (their own stylesheets already set gap/padding/background); the few demos that need a visible box use this design system's own @codemonster-ru/ui-utilities classes instead of new one-off rules, so the showcase now demonstrates that package too, for the first time.

Verified every section live over CDP: zero console warnings across all 50 sections, and scripted real clicks to confirm the interactive ones actually work — Dialog/Drawer/CommandPalette open and close, Dropdown/Popover toggle aria-expanded, Accordion expands a second item, Tooltip shows after its delay and hides on blur. That caught a real bug before it shipped: the Tabs demo initially rendered zero tabs, because CmTabs silently drops any item lacking either a content string or a matching panel slot (by design) — the demo's items had neither. Fixed and reverified.

Rewrote the showcase's intro text and README, which both still described a showcase that only covered VueForge's gaps.