diff --git a/examples/ui-showcase/README.md b/examples/ui-showcase/README.md
index 0cdb1266..631e731a 100644
--- a/examples/ui-showcase/README.md
+++ b/examples/ui-showcase/README.md
@@ -1,6 +1,7 @@
 # CodeMonster UI showcase
 
-A live demonstration of CodeMonster UI's components and layouts, rendered by the Vue adapter.
+A live demonstration of every component in `@codemonster-ru/ui-vue` and every layout in
+`@codemonster-ru/ui-layouts`, rendered by the Vue adapter.
 
 ```sh
 npm run dev -w @codemonster-ru/ui-showcase-example
@@ -8,5 +9,5 @@ npm run dev -w @codemonster-ru/ui-showcase-example
 
 This showcase was originally created to demonstrate components with no VueForge ancestor, back
 when a separate frozen VueForge showcase (`examples/vue`) also existed in this repository and
-could not show them. VueForge is now sunset and that frozen showcase is gone; this one continues
-as CodeMonster UI's own demo.
+could not show them. VueForge is now sunset and that frozen showcase is gone; this one now covers
+the full component set, not just what VueForge's showcase was missing.
diff --git a/examples/ui-showcase/package.json b/examples/ui-showcase/package.json
index 3a899853..6248b75b 100644
--- a/examples/ui-showcase/package.json
+++ b/examples/ui-showcase/package.json
@@ -16,6 +16,7 @@
     "@codemonster-ru/ui-icons": "file:../../packages/icons",
     "@codemonster-ru/ui-layouts": "file:../../packages/layouts",
     "@codemonster-ru/ui-tokens": "file:../../packages/tokens",
+    "@codemonster-ru/ui-utilities": "file:../../packages/utilities",
     "@codemonster-ru/ui-vue": "file:../../packages/vue",
     "vue": "^3.5.20"
   },
diff --git a/examples/ui-showcase/src/App.vue b/examples/ui-showcase/src/App.vue
index 66a18abd..02a752fa 100644
--- a/examples/ui-showcase/src/App.vue
+++ b/examples/ui-showcase/src/App.vue
@@ -1,9 +1,55 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { arrowLeft, gear, github } from '@codemonster-ru/ui-icons';
+import { arrowLeft, gear, github, magnifyingGlass, plus, trash } from '@codemonster-ru/ui-icons';
 import type { CmThemeMode } from '@codemonster-ru/ui-runtime/core';
 import { CmAdminLayout, CmAdminShell, CmAppShell, CmDocumentLayout, CmSetupLayout } from '@codemonster-ru/ui-layouts';
-import { CmColumnChooser, CmMenuBar, CmNavMenu, CmStepper, CmTableOfContents, CmTag } from '@codemonster-ru/ui-vue';
+import {
+  CmAccordion,
+  CmAlert,
+  CmAvatar,
+  CmBadge,
+  CmBreadcrumbs,
+  CmButton,
+  CmCard,
+  CmCheckbox,
+  CmColumnChooser,
+  CmCommandPalette,
+  CmContainer,
+  CmDataTable,
+  CmDatePicker,
+  CmDialog,
+  CmDivider,
+  CmDropdown,
+  CmDrawer,
+  CmField,
+  CmFieldset,
+  CmGrid,
+  CmIcon,
+  CmIconButton,
+  CmInline,
+  CmInput,
+  CmLink,
+  CmMenu,
+  CmMenuBar,
+  CmNavMenu,
+  CmPopover,
+  CmProgressBar,
+  CmProgressSpinner,
+  CmRadio,
+  CmSection,
+  CmSelect,
+  CmSkeleton,
+  CmStack,
+  CmStepper,
+  CmSwitch,
+  CmTable,
+  CmTableOfContents,
+  CmTabs,
+  CmTag,
+  CmTextarea,
+  CmThemeSwitch,
+  CmTooltip,
+} from '@codemonster-ru/ui-vue';
 
 const columns = [
   { key: 'name', header: 'Name' },
@@ -13,6 +59,69 @@ const columns = [
 const visibleColumnKeys = ref<string[] | null>(null);
 const themeMode = ref<CmThemeMode>('system');
 
+const accordionItems = [
+  { id: 'overview', title: 'Overview', content: 'A short summary of the project.' },
+  { id: 'access', title: 'Access', content: 'Who can see and edit this workspace.' },
+  { id: 'billing', title: 'Billing', content: 'Plan, seats, and payment method.' },
+];
+const accordionOpenItems = ref<string[]>(['overview']);
+
+const breadcrumbItems = [
+  { label: 'Workspace', href: '#demo-breadcrumbs' },
+  { label: 'Projects', href: '#demo-breadcrumbs' },
+  { label: 'Showcase', current: true },
+];
+
+const commandPaletteOpen = ref(false);
+const commandPaletteCommands = [
+  { id: 'new-file', label: 'New file', keywords: 'create add' },
+  { id: 'invite', label: 'Invite teammate', keywords: 'share collaborate' },
+  { id: 'archive', label: 'Archive project', keywords: 'delete remove' },
+];
+
+const dataTableColumns = [
+  { key: 'name', header: 'Name', sortable: true },
+  { key: 'owner', header: 'Owner' },
+  { key: 'size', header: 'Size', align: 'end' as const },
+];
+const dataTableRows = [
+  { id: 'a', cells: { name: 'Report.pdf', owner: 'Kirill', size: '2.1 MB' } },
+  { id: 'b', cells: { name: 'Roadmap.md', owner: 'Aisha', size: '18 KB' } },
+];
+
+const datePickerValue = ref('');
+
+const dialogOpen = ref(false);
+const drawerOpen = ref(false);
+const dropdownOpen = ref(false);
+const popoverOpen = ref(false);
+
+const menuItems = [
+  { id: 'edit', label: 'Edit' },
+  { id: 'duplicate', label: 'Duplicate' },
+  { id: 'delete', label: 'Delete', tone: 'danger' as const },
+];
+
+const selectOptions = [
+  { value: 'draft', label: 'Draft' },
+  { value: 'review', label: 'In review' },
+  { value: 'published', label: 'Published' },
+];
+const selectValue = ref('review');
+
+const tabItems = [
+  { value: 'overview', label: 'Overview', content: 'A summary of recent activity.' },
+  { value: 'activity', label: 'Activity', content: 'A chronological log of every change.' },
+  { value: 'settings', label: 'Settings', content: 'Project name, visibility, and danger zone.' },
+];
+const tabsValue = ref('overview');
+
+const checkboxValue = ref(true);
+const switchValue = ref(true);
+const radioValue = ref('email');
+const inputValue = ref('');
+const textareaValue = ref('');
+
 const menuBarItems = [
   {
     value: 'file',
@@ -52,8 +161,9 @@ const tableOfContentsItems = [
     <header class="ui-showcase__intro">
       <h1>CodeMonster UI showcase</h1>
       <p class="ui-showcase__note">
-        Components and layouts with no VueForge ancestor. The VueForge playground stays frozen against its reference
-        commit, so anything without a predecessor to match is demonstrated here instead.
+        Every component and layout in <code>@codemonster-ru/ui-vue</code> and <code>@codemonster-ru/ui-layouts</code>,
+        rendered live by the Vue adapter. Some carry a VueForge ancestor and some don't -- that distinction lives in
+        each component's own history, not in whether it's demonstrated here.
       </p>
     </header>
 
@@ -128,6 +238,351 @@ const tableOfContentsItems = [
       <CmThemeSwitch v-model="themeMode" />
     </section>
 
+    <section id="demo-accordion" class="ui-showcase__demo">
+      <h2>Accordion</h2>
+      <p class="ui-showcase__note">Disclosure panels sharing one set of expanded ids, so more than one can open.</p>
+      <CmAccordion id="showcase-accordion" v-model:open-items="accordionOpenItems" :items="accordionItems" />
+    </section>
+
+    <section id="demo-alert" class="ui-showcase__demo">
+      <h2>Alert</h2>
+      <p class="ui-showcase__note">An inline, non-dismissable status message with a tone.</p>
+      <CmStack>
+        <CmAlert tone="info" title="Heads up">A new version of this workspace is available.</CmAlert>
+        <CmAlert tone="danger" title="Failed to save">Check your connection and try again.</CmAlert>
+      </CmStack>
+    </section>
+
+    <section id="demo-avatar" class="ui-showcase__demo">
+      <h2>Avatar</h2>
+      <p class="ui-showcase__note">A person or entity, by image, then initials, then a fallback slot.</p>
+      <div class="ui-showcase__inline">
+        <CmAvatar label="KK" shape="circle" />
+        <CmAvatar label="AI" shape="square" size="lg" />
+      </div>
+    </section>
+
+    <section id="demo-badge" class="ui-showcase__demo">
+      <h2>Badge</h2>
+      <p class="ui-showcase__note">A small count or status mark, meant to sit on or beside another element.</p>
+      <div class="ui-showcase__inline">
+        <CmBadge tone="primary">3</CmBadge>
+        <CmBadge tone="danger">!</CmBadge>
+      </div>
+    </section>
+
+    <section id="demo-breadcrumbs" class="ui-showcase__demo">
+      <h2>Breadcrumbs</h2>
+      <p class="ui-showcase__note">A trail back up the hierarchy, with the current page marked, not linked.</p>
+      <CmBreadcrumbs :items="breadcrumbItems" />
+    </section>
+
+    <section id="demo-button" class="ui-showcase__demo">
+      <h2>Button</h2>
+      <p class="ui-showcase__note">Variant carries intent, not just color; loading disables the control itself.</p>
+      <div class="ui-showcase__inline">
+        <CmButton variant="primary">Save</CmButton>
+        <CmButton variant="secondary">Cancel</CmButton>
+        <CmButton variant="danger">Delete</CmButton>
+        <CmButton variant="ghost" loading>Loading</CmButton>
+      </div>
+    </section>
+
+    <section id="demo-card" class="ui-showcase__demo">
+      <h2>Card</h2>
+      <p class="ui-showcase__note">A titled surface. Header and footer regions appear only when given content.</p>
+      <CmCard title="Deploy preview">
+        <p>The last commit built successfully and is ready to review.</p>
+        <template #footer>
+          <CmButton variant="secondary" size="sm">View build</CmButton>
+        </template>
+      </CmCard>
+    </section>
+
+    <section id="demo-checkbox" class="ui-showcase__demo">
+      <h2>Checkbox</h2>
+      <p class="ui-showcase__note">A tri-state-capable control; indeterminate is visual only, not a value.</p>
+      <CmCheckbox v-model="checkboxValue" label="Email me about product updates" />
+    </section>
+
+    <section id="demo-command-palette" class="ui-showcase__demo">
+      <h2>Command palette</h2>
+      <p class="ui-showcase__note">A searchable action list opened as a modal dialog, filtered as you type.</p>
+      <CmButton variant="secondary" @click="commandPaletteOpen = true">Open command palette</CmButton>
+      <CmCommandPalette
+        id="showcase-command-palette"
+        v-model:open="commandPaletteOpen"
+        title="Commands"
+        placeholder="Type a command..."
+        :commands="commandPaletteCommands"
+      />
+    </section>
+
+    <section id="demo-container" class="ui-showcase__demo">
+      <h2>Container</h2>
+      <p class="ui-showcase__note">Centers content and caps its width at one of a fixed set of sizes.</p>
+      <CmContainer size="md" class="cm-p-4 cm-bg-surface cm-border cm-border-subtle cm-rounded-surface">
+        This content is centered and width-capped.
+      </CmContainer>
+    </section>
+
+    <section id="demo-data-table" class="ui-showcase__demo">
+      <h2>Data table</h2>
+      <p class="ui-showcase__note">
+        Columns, rows, sorting, selection, and pagination as data, not markup you assemble by hand.
+      </p>
+      <CmDataTable id="showcase-data-table" :columns="dataTableColumns" :rows="dataTableRows" />
+    </section>
+
+    <section id="demo-date-picker" class="ui-showcase__demo">
+      <h2>Date picker</h2>
+      <p class="ui-showcase__note">A native date input styled to match the rest of the control set.</p>
+      <CmDatePicker id="showcase-date-picker" v-model="datePickerValue" clearable />
+    </section>
+
+    <section id="demo-divider" class="ui-showcase__demo">
+      <h2>Divider</h2>
+      <p class="ui-showcase__note">A semantic separator; orientation flips both its ARIA role and its geometry.</p>
+      <CmDivider />
+    </section>
+
+    <section id="demo-dialog" class="ui-showcase__demo">
+      <h2>Dialog</h2>
+      <p class="ui-showcase__note">A modal built on the native &lt;dialog&gt; element, dismissible by default.</p>
+      <CmButton variant="secondary" @click="dialogOpen = true">Open dialog</CmButton>
+      <CmDialog id="showcase-dialog" v-model:open="dialogOpen" title="Archive this project?" dismissible>
+        <p>Archived projects can be restored for 30 days, then they're deleted.</p>
+        <template #footer="{ close }">
+          <CmButton variant="secondary" @click="close">Cancel</CmButton>
+          <CmButton variant="danger" @click="close">Archive</CmButton>
+        </template>
+      </CmDialog>
+    </section>
+
+    <section id="demo-dropdown" class="ui-showcase__demo">
+      <h2>Dropdown</h2>
+      <p class="ui-showcase__note">A button that opens a menu, closing on selection, outside click, or Escape.</p>
+      <CmDropdown id="showcase-dropdown" v-model:open="dropdownOpen" label="Actions" :items="menuItems" />
+    </section>
+
+    <section id="demo-drawer" class="ui-showcase__demo">
+      <h2>Drawer</h2>
+      <p class="ui-showcase__note">A modal that slides in from a screen edge instead of appearing centered.</p>
+      <CmButton variant="secondary" @click="drawerOpen = true">Open drawer</CmButton>
+      <CmDrawer id="showcase-drawer" v-model:open="drawerOpen" title="Filters" side="end" dismissible>
+        <p>Drawer content goes here -- a form, a list, whatever the side panel needs to hold.</p>
+      </CmDrawer>
+    </section>
+
+    <section id="demo-field" class="ui-showcase__demo">
+      <h2>Field</h2>
+      <p class="ui-showcase__note">
+        Wraps one control with a label, description, and error, wiring their ids together as
+        <code>aria-describedby</code>.
+      </p>
+      <CmField control-id="showcase-field-email" label="Email" description="We'll only use this for account alerts.">
+        <template #default="{ controlId, describedBy, invalid, required }">
+          <CmInput
+            :id="controlId"
+            v-model="inputValue"
+            type="email"
+            :aria-describedby="describedBy"
+            :invalid="invalid"
+            :required="required"
+          />
+        </template>
+      </CmField>
+    </section>
+
+    <section id="demo-fieldset" class="ui-showcase__demo">
+      <h2>Fieldset</h2>
+      <p class="ui-showcase__note">Groups related controls -- checkboxes, radios -- under one required legend.</p>
+      <CmFieldset id="showcase-fieldset" label="Contact method" description="Choose every acceptable method.">
+        <template #default="{ describedBy, invalid }">
+          <CmRadio
+            v-model="radioValue"
+            name="showcase-contact-method"
+            value="email"
+            label="Email"
+            :aria-describedby="describedBy"
+            :aria-invalid="invalid || undefined"
+          />
+          <CmRadio
+            v-model="radioValue"
+            name="showcase-contact-method"
+            value="sms"
+            label="SMS"
+            :aria-describedby="describedBy"
+            :aria-invalid="invalid || undefined"
+          />
+        </template>
+      </CmFieldset>
+    </section>
+
+    <section id="demo-grid" class="ui-showcase__demo">
+      <h2>Grid</h2>
+      <p class="ui-showcase__note">
+        A CSS grid primitive that auto-fits columns by default; a <code>cm-grid-cols-*</code> utility fixes the count.
+      </p>
+      <CmGrid class="cm-grid-cols-3">
+        <div class="cm-p-4 cm-bg-surface cm-border cm-border-subtle cm-rounded-surface">1</div>
+        <div class="cm-p-4 cm-bg-surface cm-border cm-border-subtle cm-rounded-surface">2</div>
+        <div class="cm-p-4 cm-bg-surface cm-border cm-border-subtle cm-rounded-surface">3</div>
+      </CmGrid>
+    </section>
+
+    <section id="demo-icon-button" class="ui-showcase__demo">
+      <h2>Icon button</h2>
+      <p class="ui-showcase__note">A square button carrying only an icon; <code>label</code> supplies its name.</p>
+      <div class="ui-showcase__inline">
+        <CmIconButton label="Add" variant="secondary"><CmIcon :icon="plus" /></CmIconButton>
+        <CmIconButton label="Search" variant="ghost"><CmIcon :icon="magnifyingGlass" /></CmIconButton>
+        <CmIconButton label="Delete" variant="danger"><CmIcon :icon="trash" /></CmIconButton>
+      </div>
+    </section>
+
+    <section id="demo-input" class="ui-showcase__demo">
+      <h2>Input</h2>
+      <p class="ui-showcase__note">Text entry, with an optional clear button and, for passwords, a reveal toggle.</p>
+      <CmInput v-model="inputValue" type="text" placeholder="Project name" clearable />
+    </section>
+
+    <section id="demo-inline" class="ui-showcase__demo">
+      <h2>Inline</h2>
+      <p class="ui-showcase__note">A flex row primitive for laying out a run of small elements.</p>
+      <CmInline>
+        <CmTag tone="primary">Platform</CmTag>
+        <CmTag tone="success">Stable</CmTag>
+        <CmTag>Internal</CmTag>
+      </CmInline>
+    </section>
+
+    <section id="demo-link" class="ui-showcase__demo">
+      <h2>Link</h2>
+      <p class="ui-showcase__note">A styled anchor with an underline policy and tone, independent of visited state.</p>
+      <div class="ui-showcase__inline">
+        <CmLink href="#demo-link">Always underlined</CmLink>
+        <CmLink href="#demo-link" underline="hover" tone="muted">Underlines on hover</CmLink>
+      </div>
+    </section>
+
+    <section id="demo-menu" class="ui-showcase__demo">
+      <h2>Menu</h2>
+      <p class="ui-showcase__note">A standalone list of actions with roving tabindex; Dropdown renders one of these.</p>
+      <CmMenu :items="menuItems" aria-label="Row actions" />
+    </section>
+
+    <section id="demo-popover" class="ui-showcase__demo">
+      <h2>Popover</h2>
+      <p class="ui-showcase__note">An anchored panel for arbitrary content, as opposed to Dropdown's fixed menu.</p>
+      <CmPopover id="showcase-popover" v-model:open="popoverOpen" label="Details">
+        <p>Anything can go in a popover's panel -- text, a form, another component.</p>
+      </CmPopover>
+    </section>
+
+    <section id="demo-progress-bar" class="ui-showcase__demo">
+      <h2>Progress bar</h2>
+      <p class="ui-showcase__note">A determinate or indeterminate horizontal progress meter.</p>
+      <CmStack>
+        <CmProgressBar label="Uploading" :value="62" show-value />
+        <CmProgressBar label="Syncing" indeterminate />
+      </CmStack>
+    </section>
+
+    <section id="demo-progress-spinner" class="ui-showcase__demo">
+      <h2>Progress spinner</h2>
+      <p class="ui-showcase__note">An indeterminate circular spinner, for a spot too small for a bar.</p>
+      <CmProgressSpinner label="Loading" />
+    </section>
+
+    <section id="demo-radio" class="ui-showcase__demo">
+      <h2>Radio</h2>
+      <p class="ui-showcase__note">A mutually exclusive choice; grouping comes from a shared <code>name</code>.</p>
+      <div class="ui-showcase__inline">
+        <CmRadio v-model="radioValue" name="showcase-radio" value="email" label="Email" />
+        <CmRadio v-model="radioValue" name="showcase-radio" value="sms" label="SMS" />
+      </div>
+    </section>
+
+    <section id="demo-select" class="ui-showcase__demo">
+      <h2>Select</h2>
+      <p class="ui-showcase__note">A native select styled to match the rest of the control set.</p>
+      <CmSelect id="showcase-select" v-model="selectValue" :options="selectOptions" />
+    </section>
+
+    <section id="demo-section" class="ui-showcase__demo">
+      <h2>Section</h2>
+      <p class="ui-showcase__note">A landmark and vertical-rhythm primitive; <code>surface</code> adds a background.</p>
+      <CmSection surface>A section with the surface variant.</CmSection>
+    </section>
+
+    <section id="demo-skeleton" class="ui-showcase__demo">
+      <h2>Skeleton</h2>
+      <p class="ui-showcase__note">A loading placeholder shaped like the content it stands in for.</p>
+      <CmStack>
+        <CmSkeleton min-height="1rem" />
+        <CmSkeleton min-height="1rem" style="inline-size: 60%" />
+      </CmStack>
+    </section>
+
+    <section id="demo-stack" class="ui-showcase__demo">
+      <h2>Stack</h2>
+      <p class="ui-showcase__note">A flex column primitive, stretched and gapped by default.</p>
+      <CmStack>
+        <div class="cm-p-4 cm-bg-surface cm-border cm-border-subtle cm-rounded-surface">1</div>
+        <div class="cm-p-4 cm-bg-surface cm-border cm-border-subtle cm-rounded-surface">2</div>
+      </CmStack>
+    </section>
+
+    <section id="demo-switch" class="ui-showcase__demo">
+      <h2>Switch</h2>
+      <p class="ui-showcase__note">
+        An on/off control with immediate effect, unlike Checkbox's deferred-until-submit norm.
+      </p>
+      <CmSwitch v-model="switchValue" label="Enable notifications" />
+    </section>
+
+    <section id="demo-table" class="ui-showcase__demo">
+      <h2>Table</h2>
+      <p class="ui-showcase__note">
+        Plain markup in header/body/footer slots; DataTable builds this from data instead.
+      </p>
+      <CmTable id="showcase-table" striped>
+        <template #header>
+          <tr>
+            <th scope="col">Name</th>
+            <th scope="col">Owner</th>
+          </tr>
+        </template>
+        <tr>
+          <td>Report.pdf</td>
+          <td>Kirill</td>
+        </tr>
+        <tr>
+          <td>Roadmap.md</td>
+          <td>Aisha</td>
+        </tr>
+      </CmTable>
+    </section>
+
+    <section id="demo-tabs" class="ui-showcase__demo">
+      <h2>Tabs</h2>
+      <p class="ui-showcase__note">One panel visible at a time, switched with a roving-tabindex tablist.</p>
+      <CmTabs id="showcase-tabs" v-model="tabsValue" :items="tabItems" />
+    </section>
+
+    <section id="demo-textarea" class="ui-showcase__demo">
+      <h2>Textarea</h2>
+      <p class="ui-showcase__note">Multi-line text entry, sharing Input's size and validation states.</p>
+      <CmTextarea v-model="textareaValue" placeholder="Leave a comment" />
+    </section>
+
+    <section id="demo-tooltip" class="ui-showcase__demo">
+      <h2>Tooltip</h2>
+      <p class="ui-showcase__note">Shown on focus or hover, never as the only way to reach information.</p>
+      <CmTooltip id="showcase-tooltip" label="Info" content="Tooltips are shown on focus or hover, never tap-only." />
+    </section>
+
     <section id="demo-app-shell" class="ui-showcase__demo">
       <h2>App shell</h2>
       <p class="ui-showcase__note">
@@ -139,7 +594,14 @@ const tableOfContentsItems = [
         <CmAppShell layout="sidebar-content" sticky-header>
           <template #header>Product</template>
           <template #sidebar>
-            <button type="button" data-cm-sidebar-toggle aria-expanded="true">Collapse</button>
+            <button
+              type="button"
+              class="cm-button cm-button--ghost cm-button--sm"
+              data-cm-sidebar-toggle
+              aria-expanded="true"
+            >
+              Collapse
+            </button>
           </template>
           Content
         </CmAppShell>
diff --git a/examples/ui-showcase/src/main.ts b/examples/ui-showcase/src/main.ts
index 0221c1a2..8b3d134b 100644
--- a/examples/ui-showcase/src/main.ts
+++ b/examples/ui-showcase/src/main.ts
@@ -2,22 +2,14 @@ import { createApp } from 'vue';
 import '@codemonster-ru/ui-tokens/tokens.css';
 import '@codemonster-ru/ui-tokens/breakpoints.css';
 import '@codemonster-ru/ui-css/fonts.css';
-import '@codemonster-ru/ui-css/container.css';
-import '@codemonster-ru/ui-css/section.css';
-import '@codemonster-ru/ui-css/stack.css';
-import '@codemonster-ru/ui-css/checkbox.css';
-import '@codemonster-ru/ui-css/popover.css';
-import '@codemonster-ru/ui-css/admin-layout.css';
-import '@codemonster-ru/ui-css/app-shell.css';
-import '@codemonster-ru/ui-css/document-layout.css';
-import '@codemonster-ru/ui-css/admin-shell.css';
-import '@codemonster-ru/ui-css/column-chooser.css';
-import '@codemonster-ru/ui-css/menu-bar.css';
-import '@codemonster-ru/ui-css/nav-menu.css';
-import '@codemonster-ru/ui-css/setup-layout.css';
-import '@codemonster-ru/ui-css/stepper.css';
-import '@codemonster-ru/ui-css/table-of-contents.css';
-import '@codemonster-ru/ui-css/tag.css';
+// The complete bundle, not a hand-picked subset: a per-component list here has twice missed a
+// stylesheet a demoed component actually needs (icon.css, theme-switch.css) because nothing forces
+// it to track what App.vue uses. It also carries `foundation.css`, which is what paints `:root`/
+// `body` from the theme tokens and responds to `data-cm-theme` in the first place -- without it,
+// CmThemeSwitch was flipping the attribute and the token values correctly, but nothing on the page
+// was ever reading them. The Razor example already loads this same bundle wholesale.
+import '@codemonster-ru/ui-css/styles.css';
+import '@codemonster-ru/ui-utilities/utilities.css';
 import App from './App.vue';
 import './showcase.css';
 
diff --git a/examples/ui-showcase/src/showcase.css b/examples/ui-showcase/src/showcase.css
index edc1b433..e1d2e0e9 100644
--- a/examples/ui-showcase/src/showcase.css
+++ b/examples/ui-showcase/src/showcase.css
@@ -1,13 +1,10 @@
 /* The showcase is a working page rather than a styled one: it borrows the design tokens and lets
    each component supply its own appearance, so nothing here can disguise a component that looks
-   wrong on its own. */
-
-body {
-  margin: 0;
-  background: var(--cm-color-surface-default, #fff);
-  color: var(--cm-color-text-default, #111);
-  font-family: var(--cm-font-family-base, system-ui, sans-serif);
-}
+   wrong on its own. `foundation.css` (imported in main.ts) already paints `body` from
+   `--cm-color-background-canvas`/`--cm-color-text-primary` and responds to `data-cm-theme`, and
+   `reset.css` already zeroes its margin -- restating any of that here previously used two token
+   names (`--cm-color-surface-default`, `--cm-color-text-default`) that don't exist in this design
+   system, so the fallback colors (#fff/#111) always won regardless of theme. */
 
 .ui-showcase {
   margin: 0 auto;
@@ -37,10 +34,17 @@ body {
 }
 
 .ui-showcase__frame {
-  border: 1px solid var(--cm-color-border-subtle, #e5e5e5);
-  border-radius: var(--cm-radius-md, 8px);
+  /* Every layout demoed here (CmAppShell, CmAdminLayout, ...) sets min-block-size: 100dvb/100vh on
+     its own root, because that's correct for what it actually is: a full page. Nothing about being
+     dropped into an inline preview changes that, so without a height of its own, this box grew to
+     fill the entire viewport -- once per layout demo, each one christmas-treeing the whole page. The
+     explicit block-size gives resize (already here) something to shrink from; overflow hidden clips
+     the rest instead of pushing the box open. */
+  block-size: 20rem;
   overflow: hidden;
   resize: vertical;
+  border: 1px solid var(--cm-color-border-subtle, #e5e5e5);
+  border-radius: var(--cm-radius-surface, 8px);
 }
 
 .ui-showcase__inline {
diff --git a/package-lock.json b/package-lock.json
index 80e337cb..3905cc43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,6 +51,7 @@
         "@codemonster-ru/ui-icons": "file:../../packages/icons",
         "@codemonster-ru/ui-layouts": "file:../../packages/layouts",
         "@codemonster-ru/ui-tokens": "file:../../packages/tokens",
+        "@codemonster-ru/ui-utilities": "file:../../packages/utilities",
         "@codemonster-ru/ui-vue": "file:../../packages/vue",
         "vue": "^3.5.20"
       },
diff --git a/package.json b/package.json
index 90d4ab9e..9b0843b5 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "check:composer-packed-consumer": "node ./scripts/ci/check-code-monster-ui-composer-packed-consumer.mjs",
     "check:composer-registry-consumer": "node ./scripts/ci/check-code-monster-ui-composer-registry-consumer.mjs",
     "check:consumer-tree-shaking": "node ./scripts/ci/check-consumer-tree-shaking.mjs",
+    "check:css-token-references": "node --test ./scripts/ci/css-token-references.test.mjs",
     "check:docs": "node --test ./scripts/ci/documentation-fences.test.mjs && node ./scripts/ci/check-documentation-contracts.mjs && npm run check:component-documentation",
     "check:docs:examples": "node --test ./scripts/ci/documentation-example-paths.test.mjs && node ./scripts/ci/check-documentation-examples.mjs",
     "check:package-contracts": "node --test ./scripts/ci/code-monster-ui-package-contracts.test.mjs && node ./scripts/ci/check-package-contracts.mjs",
@@ -34,7 +35,7 @@
     "check:ui-component-selectors": "node --test ./scripts/contracts/component-selectors.test.mjs",
     "check:ui-composer-split": "node ./scripts/ci/check-code-monster-ui-composer-split.mjs",
     "check:ui-contract-cases": "node --test ./scripts/contracts/component-cases.test.mjs && node ./scripts/ci/check-code-monster-ui-contract-cases.mjs",
-    "check:ui-contracts": "npm run check:ui-package-metadata && npm run check:ui-composer-split && npm run check:ui-component-manifests && npm run check:ui-contract-cases && npm run check:ui-behavior-scenarios && npm run check:ui-controller-coverage && npm run check:ui-significant-dom && npm run check:ui-component-selectors && npm run check:ui-razor-assets",
+    "check:ui-contracts": "npm run check:ui-package-metadata && npm run check:ui-composer-split && npm run check:ui-component-manifests && npm run check:ui-contract-cases && npm run check:ui-behavior-scenarios && npm run check:ui-controller-coverage && npm run check:ui-significant-dom && npm run check:ui-component-selectors && npm run check:ui-razor-assets && npm run check:css-token-references",
     "check:ui-controller-coverage": "node --test ./scripts/contracts/controller-coverage.test.mjs && node ./scripts/contracts/check-controller-coverage.mjs",
     "check:ui-package-budgets": "node --test ./scripts/ci/code-monster-ui-package-budgets.test.mjs && node ./scripts/ci/check-code-monster-ui-package-budgets.mjs",
     "check:ui-package-metadata": "node --test ./scripts/ci/code-monster-ui-package-metadata.test.mjs ./scripts/ci/code-monster-ui-workspaces.test.mjs && node ./scripts/ci/check-code-monster-ui-package-metadata.mjs",
diff --git a/packages/css/__tests__/exports.test.mjs b/packages/css/__tests__/exports.test.mjs
index 77255399..78d2b58d 100644
--- a/packages/css/__tests__/exports.test.mjs
+++ b/packages/css/__tests__/exports.test.mjs
@@ -35,6 +35,7 @@ test('publishes only the approved CSS subpath exports', async () => {
     './foundation.css': './dist/foundation.css',
     './grid.css': './dist/components/grid.css',
     './icon-button.css': './dist/components/icon-button.css',
+    './icon.css': './dist/components/icon.css',
     './input.css': './dist/components/input.css',
     './inline.css': './dist/components/inline.css',
     './link.css': './dist/components/link.css',
diff --git a/packages/css/__tests__/package.test.mjs b/packages/css/__tests__/package.test.mjs
index df573695..0c085b90 100644
--- a/packages/css/__tests__/package.test.mjs
+++ b/packages/css/__tests__/package.test.mjs
@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict';
-import { readFile } from 'node:fs/promises';
+import { readdir, readFile } from 'node:fs/promises';
 import test from 'node:test';
 import { URL } from 'node:url';
 
@@ -41,3 +41,21 @@ test('separates foundation-only and complete stylesheet compositions', async ()
   assert.match(stylesCss, /@import '\.\/components\/stack\.css';/);
   assert.match(stylesCss, /@import '\.\/components\/table\.css';/);
 });
+
+test('every distributed component stylesheet is reachable from styles.css', async () => {
+  // The list above spot-checks a subset by name, which is exactly what let icon.css,
+  // theme-switch.css, app-shell.css and document-layout.css exist as real, exported component
+  // stylesheets without styles.css importing any of them -- nothing here enumerated the directory,
+  // so a component missing from the bundle never failed a check. This reads the actual output
+  // instead, so a future component can't go missing the same way.
+  const stylesCss = await readFile(new URL('../dist/styles.css', import.meta.url), 'utf8');
+  const componentFiles = await readdir(new URL('../dist/components', import.meta.url));
+
+  for (const file of componentFiles) {
+    assert.match(
+      stylesCss,
+      new RegExp(`@import '\\./components/${file.replace('.', '\\.')}';`),
+      `styles.css does not import components/${file}`,
+    );
+  }
+});
diff --git a/packages/css/package.json b/packages/css/package.json
index 83abf765..3672b789 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -53,6 +53,7 @@
     "./foundation.css": "./dist/foundation.css",
     "./grid.css": "./dist/components/grid.css",
     "./icon-button.css": "./dist/components/icon-button.css",
+    "./icon.css": "./dist/components/icon.css",
     "./inline.css": "./dist/components/inline.css",
     "./input.css": "./dist/components/input.css",
     "./link.css": "./dist/components/link.css",
diff --git a/packages/css/src/components/admin-layout.css b/packages/css/src/components/admin-layout.css
index 9b02e8c2..cae94cad 100644
--- a/packages/css/src/components/admin-layout.css
+++ b/packages/css/src/components/admin-layout.css
@@ -17,7 +17,7 @@
   padding: var(--cm-space-3);
   border-inline-end: var(--cm-border-width) solid var(--cm-color-border-default);
   background: var(--cm-color-background-surface);
-  transition: inline-size var(--cm-motion-duration-fast) var(--cm-motion-easing-standard);
+  transition: inline-size var(--cm-motion-duration-fast) var(--cm-motion-ease-standard);
 }
 
 .cm-admin-layout[data-cm-sidebar-collapsed='true'] .cm-admin-layout__aside {
@@ -121,7 +121,7 @@
     inset-inline-start: 0;
     inline-size: 16rem;
     translate: -100% 0;
-    transition: translate var(--cm-motion-duration-fast) var(--cm-motion-easing-standard);
+    transition: translate var(--cm-motion-duration-fast) var(--cm-motion-ease-standard);
   }
 
   .cm-admin-layout[data-cm-mobile-sidebar-open='true'] .cm-admin-layout__aside {
@@ -133,7 +133,7 @@
     z-index: 1;
     display: block;
     inset: 0;
-    background: var(--cm-color-background-overlay);
+    background: var(--cm-color-background-backdrop);
   }
 }
 
diff --git a/packages/css/src/components/app-shell.css b/packages/css/src/components/app-shell.css
index bbeae151..058f2d3a 100644
--- a/packages/css/src/components/app-shell.css
+++ b/packages/css/src/components/app-shell.css
@@ -33,7 +33,7 @@
   display: grid;
   flex: 1;
   grid-template-columns: 1fr;
-  gap: var(--cm-space-md);
+  gap: var(--cm-space-4);
   align-items: start;
 }
 
diff --git a/packages/css/src/components/document-layout.css b/packages/css/src/components/document-layout.css
index 8b910147..51fc1173 100644
--- a/packages/css/src/components/document-layout.css
+++ b/packages/css/src/components/document-layout.css
@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   margin-inline: auto;
-  max-inline-size: var(--cm-container-2xl, 80rem);
+  max-inline-size: var(--cm-breakpoint-2xl, 80rem);
   min-block-size: 100vh;
 }
 
@@ -29,7 +29,7 @@
   display: grid;
   flex: 1;
   grid-template-columns: minmax(0, 1fr);
-  gap: var(--cm-space-lg);
+  gap: var(--cm-space-6);
   align-items: start;
 }
 
diff --git a/packages/css/src/components/icon.css b/packages/css/src/components/icon.css
new file mode 100644
index 00000000..b10a8f49
--- /dev/null
+++ b/packages/css/src/components/icon.css
@@ -0,0 +1,37 @@
+/*
+ * The generated geometry carries no presentation of its own -- the outline shapes have neither a
+ * fill nor a stroke attribute, because in the source they were painted by the wrapper element they
+ * sat inside, not by themselves. This is that wrapper's other half: without it, `regular`/`light`/
+ * `thin` icons are literal geometry with nothing telling the browser to paint it, and every variant
+ * renders at the browser's default replaced-element size because neither the icon nor anything else
+ * declares one.
+ */
+.cm-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  inline-size: var(--cm-icon-size-md);
+  block-size: var(--cm-icon-size-md);
+  fill: none;
+  vertical-align: middle;
+}
+
+.cm-icon--regular {
+  stroke: currentColor;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.cm-icon--light {
+  stroke: currentColor;
+  stroke-width: 1.5px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.cm-icon--thin {
+  stroke: currentColor;
+  stroke-width: 1px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
diff --git a/packages/css/src/components/menu-bar.css b/packages/css/src/components/menu-bar.css
index d1c4727f..88ebbacf 100644
--- a/packages/css/src/components/menu-bar.css
+++ b/packages/css/src/components/menu-bar.css
@@ -49,7 +49,7 @@
 
 .cm-menu-bar__item:disabled,
 .cm-menu-bar__item[aria-disabled='true'] {
-  color: var(--cm-color-text-tertiary);
+  color: var(--cm-color-text-muted);
   cursor: not-allowed;
 }
 
diff --git a/packages/css/src/components/nav-menu.css b/packages/css/src/components/nav-menu.css
index fa29ec5c..1108a291 100644
--- a/packages/css/src/components/nav-menu.css
+++ b/packages/css/src/components/nav-menu.css
@@ -54,12 +54,12 @@
 }
 
 .cm-nav-menu__item--disabled {
-  color: var(--cm-color-text-tertiary);
+  color: var(--cm-color-text-muted);
   cursor: not-allowed;
 }
 
 .cm-nav-menu__group-label {
-  color: var(--cm-color-text-tertiary);
+  color: var(--cm-color-text-muted);
   font-size: var(--cm-font-size-sm);
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -85,7 +85,7 @@
   border-inline-end: var(--cm-border-width) solid currentcolor;
   border-block-end: var(--cm-border-width) solid currentcolor;
   rotate: 45deg;
-  transition: rotate var(--cm-motion-duration-fast) var(--cm-motion-easing-standard);
+  transition: rotate var(--cm-motion-duration-fast) var(--cm-motion-ease-standard);
 }
 
 .cm-nav-menu__item--expanded .cm-nav-menu__icon {
@@ -95,7 +95,7 @@
 .cm-nav-menu__collapse {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows var(--cm-motion-duration-fast) var(--cm-motion-easing-standard);
+  transition: grid-template-rows var(--cm-motion-duration-fast) var(--cm-motion-ease-standard);
 }
 
 .cm-nav-menu__collapse > .cm-nav-menu__list {
diff --git a/packages/css/src/components/stepper.css b/packages/css/src/components/stepper.css
index 75cd432f..21d5d864 100644
--- a/packages/css/src/components/stepper.css
+++ b/packages/css/src/components/stepper.css
@@ -77,7 +77,7 @@
 }
 
 .cm-stepper__description {
-  color: var(--cm-color-text-tertiary);
+  color: var(--cm-color-text-muted);
   font-size: var(--cm-font-size-sm);
   line-height: var(--cm-line-height-tight);
 }
diff --git a/packages/css/src/components/theme-switch.css b/packages/css/src/components/theme-switch.css
index 31a1230b..83f419b5 100644
--- a/packages/css/src/components/theme-switch.css
+++ b/packages/css/src/components/theme-switch.css
@@ -8,9 +8,9 @@
  */
 .cm-theme-switch {
   display: inline-flex;
-  gap: var(--cm-space-3xs);
+  gap: var(--cm-space-1);
   margin: 0;
-  padding: var(--cm-space-3xs);
+  padding: var(--cm-space-1);
   border: var(--cm-border-width) solid var(--cm-color-border-default);
   border-radius: var(--cm-radius-control);
   background: var(--cm-color-background-surface);
@@ -39,7 +39,7 @@
 .cm-theme-switch__label {
   display: inline-flex;
   align-items: center;
-  padding: var(--cm-space-3xs) var(--cm-space-xs);
+  padding: var(--cm-space-1) var(--cm-space-2);
   border-radius: var(--cm-radius-control-tight);
   color: var(--cm-color-text-secondary);
   font-size: var(--cm-font-size-md);
@@ -54,7 +54,7 @@
 
 .cm-theme-switch__input:focus-visible + .cm-theme-switch__label {
   outline: var(--cm-focus-ring-width) solid var(--cm-color-border-focus);
-  outline-offset: var(--cm-focus-ring-offset);
+  outline-offset: var(--cm-focus-ring-width);
 }
 
 .cm-theme-switch__input:disabled + .cm-theme-switch__label {
diff --git a/packages/css/src/styles.css b/packages/css/src/styles.css
index 08ac1684..67c4b8af 100644
--- a/packages/css/src/styles.css
+++ b/packages/css/src/styles.css
@@ -5,6 +5,7 @@
 @import './components/admin-layout.css';
 @import './components/admin-shell.css';
 @import './components/alert.css';
+@import './components/app-shell.css';
 @import './components/avatar.css';
 @import './components/badge.css';
 @import './components/breadcrumbs.css';
@@ -18,12 +19,14 @@
 @import './components/date-picker.css';
 @import './components/divider.css';
 @import './components/dialog.css';
+@import './components/document-layout.css';
 @import './components/dropdown.css';
 @import './components/drawer.css';
 @import './components/field.css';
 @import './components/fieldset.css';
 @import './components/grid.css';
 @import './components/icon-button.css';
+@import './components/icon.css';
 @import './components/input.css';
 @import './components/inline.css';
 @import './components/link.css';
@@ -44,6 +47,7 @@
 @import './components/table.css';
 @import './components/tag.css';
 @import './components/textarea.css';
+@import './components/theme-switch.css';
 @import './components/table-of-contents.css';
 @import './components/tabs.css';
 @import './components/tooltip.css';
diff --git a/packages/razor/resources/assets/css/css/components/admin-layout.css b/packages/razor/resources/assets/css/css/components/admin-layout.css
index 9b02e8c2..cae94cad 100644
--- a/packages/razor/resources/assets/css/css/components/admin-layout.css
+++ b/packages/razor/resources/assets/css/css/components/admin-layout.css
@@ -17,7 +17,7 @@
   padding: var(--cm-space-3);
   border-inline-end: var(--cm-border-width) solid var(--cm-color-border-default);
   background: var(--cm-color-background-surface);
-  transition: inline-size var(--cm-motion-duration-fast) var(--cm-motion-easing-standard);
+  transition: inline-size var(--cm-motion-duration-fast) var(--cm-motion-ease-standard);
 }
 
 .cm-admin-layout[data-cm-sidebar-collapsed='true'] .cm-admin-layout__aside {
@@ -121,7 +121,7 @@
     inset-inline-start: 0;
     inline-size: 16rem;
     translate: -100% 0;
-    transition: translate var(--cm-motion-duration-fast) var(--cm-motion-easing-standard);
+    transition: translate var(--cm-motion-duration-fast) var(--cm-motion-ease-standard);
   }
 
   .cm-admin-layout[data-cm-mobile-sidebar-open='true'] .cm-admin-layout__aside {
@@ -133,7 +133,7 @@
     z-index: 1;
     display: block;
     inset: 0;
-    background: var(--cm-color-background-overlay);
+    background: var(--cm-color-background-backdrop);
   }
 }
 
diff --git a/packages/razor/resources/assets/css/css/components/app-shell.css b/packages/razor/resources/assets/css/css/components/app-shell.css
new file mode 100644
index 00000000..058f2d3a
--- /dev/null
+++ b/packages/razor/resources/assets/css/css/components/app-shell.css
@@ -0,0 +1,83 @@
+/*
+ * An application frame. The sticky offsets arrive as custom properties the layout publishes: a
+ * declared height from the server, an observed one once CmShellMetricsController runs. Nothing here
+ * measures, so the frame is correct with scripting disabled.
+ */
+.cm-app-shell {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100vh;
+  background: var(--cm-color-background-canvas);
+}
+
+.cm-app-shell__header {
+  border-block-end: var(--cm-border-width) solid var(--cm-color-border-subtle);
+  background: var(--cm-color-background-surface);
+}
+
+.cm-app-shell--header-sticky .cm-app-shell__header {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--cm-z-index-sticky, 10);
+}
+
+.cm-app-shell__subheader {
+  position: sticky;
+  inset-block-start: var(--cm-sticky-header-offset, 0);
+  z-index: var(--cm-z-index-sticky, 10);
+  border-block-end: var(--cm-border-width) solid var(--cm-color-border-subtle);
+  background: var(--cm-color-background-surface-subtle);
+}
+
+.cm-app-shell__body {
+  display: grid;
+  flex: 1;
+  grid-template-columns: 1fr;
+  gap: var(--cm-space-4);
+  align-items: start;
+}
+
+.cm-app-shell--sidebar-content .cm-app-shell__body {
+  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
+}
+
+.cm-app-shell--sidebar-content-aside .cm-app-shell__body {
+  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) minmax(0, 18rem);
+}
+
+.cm-app-shell__sidebar,
+.cm-app-shell__aside {
+  position: sticky;
+  inset-block-start: var(--cm-sticky-top-offset, 0);
+  min-inline-size: 0;
+}
+
+.cm-app-shell__content {
+  min-inline-size: 0;
+}
+
+.cm-app-shell__footer {
+  border-block-start: var(--cm-border-width) solid var(--cm-color-border-subtle);
+  background: var(--cm-color-background-surface);
+}
+
+.cm-app-shell[data-cm-sidebar-collapsed='true'] .cm-app-shell__sidebar {
+  display: none;
+}
+
+.cm-app-shell[data-cm-sidebar-collapsed='true'].cm-app-shell--sidebar-content .cm-app-shell__body,
+.cm-app-shell[data-cm-sidebar-collapsed='true'].cm-app-shell--sidebar-content-aside .cm-app-shell__body {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@media (width < 64em) {
+  .cm-app-shell--sidebar-content .cm-app-shell__body,
+  .cm-app-shell--sidebar-content-aside .cm-app-shell__body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .cm-app-shell__sidebar,
+  .cm-app-shell__aside {
+    position: static;
+  }
+}
diff --git a/packages/razor/resources/assets/css/css/components/document-layout.css b/packages/razor/resources/assets/css/css/components/document-layout.css
new file mode 100644
index 00000000..51fc1173
--- /dev/null
+++ b/packages/razor/resources/assets/css/css/components/document-layout.css
@@ -0,0 +1,69 @@
+/*
+ * A reading frame. Like the application shell, it sticks against published custom properties rather
+ * than anything it measures itself, so the page is correct before a controller narrows them.
+ */
+.cm-document-layout {
+  display: flex;
+  flex-direction: column;
+  margin-inline: auto;
+  max-inline-size: var(--cm-breakpoint-2xl, 80rem);
+  min-block-size: 100vh;
+}
+
+.cm-document-layout__header {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--cm-z-index-sticky, 10);
+  border-block-end: var(--cm-border-width) solid var(--cm-color-border-subtle);
+  background: var(--cm-color-background-canvas);
+}
+
+.cm-document-layout__subheader {
+  position: sticky;
+  inset-block-start: var(--cm-sticky-header-offset, 0);
+  z-index: var(--cm-z-index-sticky, 10);
+  background: var(--cm-color-background-canvas);
+}
+
+.cm-document-layout__content {
+  display: grid;
+  flex: 1;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--cm-space-6);
+  align-items: start;
+}
+
+.cm-document-layout--sidebar-content .cm-document-layout__content {
+  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
+}
+
+.cm-document-layout--sidebar-content-aside .cm-document-layout__content {
+  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 15rem);
+}
+
+.cm-document-layout__sidebar,
+.cm-document-layout__aside {
+  position: sticky;
+  inset-block-start: var(--cm-sticky-top-offset, 0);
+  min-inline-size: 0;
+}
+
+.cm-document-layout__main {
+  min-inline-size: 0;
+}
+
+.cm-document-layout__footer {
+  border-block-start: var(--cm-border-width) solid var(--cm-color-border-subtle);
+}
+
+@media (width < 64em) {
+  .cm-document-layout--sidebar-content .cm-document-layout__content,
+  .cm-document-layout--sidebar-content-aside .cm-document-layout__content {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .cm-document-layout__sidebar,
+  .cm-document-layout__aside {
+    position: static;
+  }
+}
diff --git a/packages/razor/resources/assets/css/css/components/icon.css b/packages/razor/resources/assets/css/css/components/icon.css
new file mode 100644
index 00000000..b10a8f49
--- /dev/null
+++ b/packages/razor/resources/assets/css/css/components/icon.css
@@ -0,0 +1,37 @@
+/*
+ * The generated geometry carries no presentation of its own -- the outline shapes have neither a
+ * fill nor a stroke attribute, because in the source they were painted by the wrapper element they
+ * sat inside, not by themselves. This is that wrapper's other half: without it, `regular`/`light`/
+ * `thin` icons are literal geometry with nothing telling the browser to paint it, and every variant
+ * renders at the browser's default replaced-element size because neither the icon nor anything else
+ * declares one.
+ */
+.cm-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  inline-size: var(--cm-icon-size-md);
+  block-size: var(--cm-icon-size-md);
+  fill: none;
+  vertical-align: middle;
+}
+
+.cm-icon--regular {
+  stroke: currentColor;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.cm-icon--light {
+  stroke: currentColor;
+  stroke-width: 1.5px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.cm-icon--thin {
+  stroke: currentColor;
+  stroke-width: 1px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
diff --git a/packages/razor/resources/assets/css/css/components/menu-bar.css b/packages/razor/resources/assets/css/css/components/menu-bar.css
index d1c4727f..88ebbacf 100644
--- a/packages/razor/resources/assets/css/css/components/menu-bar.css
+++ b/packages/razor/resources/assets/css/css/components/menu-bar.css
@@ -49,7 +49,7 @@
 
 .cm-menu-bar__item:disabled,
 .cm-menu-bar__item[aria-disabled='true'] {
-  color: var(--cm-color-text-tertiary);
+  color: var(--cm-color-text-muted);
   cursor: not-allowed;
 }
 
diff --git a/packages/razor/resources/assets/css/css/components/nav-menu.css b/packages/razor/resources/assets/css/css/components/nav-menu.css
index fa29ec5c..1108a291 100644
--- a/packages/razor/resources/assets/css/css/components/nav-menu.css
+++ b/packages/razor/resources/assets/css/css/components/nav-menu.css
@@ -54,12 +54,12 @@
 }
 
 .cm-nav-menu__item--disabled {
-  color: var(--cm-color-text-tertiary);
+  color: var(--cm-color-text-muted);
   cursor: not-allowed;
 }
 
 .cm-nav-menu__group-label {
-  color: var(--cm-color-text-tertiary);
+  color: var(--cm-color-text-muted);
   font-size: var(--cm-font-size-sm);
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -85,7 +85,7 @@
   border-inline-end: var(--cm-border-width) solid currentcolor;
   border-block-end: var(--cm-border-width) solid currentcolor;
   rotate: 45deg;
-  transition: rotate var(--cm-motion-duration-fast) var(--cm-motion-easing-standard);
+  transition: rotate var(--cm-motion-duration-fast) var(--cm-motion-ease-standard);
 }
 
 .cm-nav-menu__item--expanded .cm-nav-menu__icon {
@@ -95,7 +95,7 @@
 .cm-nav-menu__collapse {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows var(--cm-motion-duration-fast) var(--cm-motion-easing-standard);
+  transition: grid-template-rows var(--cm-motion-duration-fast) var(--cm-motion-ease-standard);
 }
 
 .cm-nav-menu__collapse > .cm-nav-menu__list {
diff --git a/packages/razor/resources/assets/css/css/components/stepper.css b/packages/razor/resources/assets/css/css/components/stepper.css
index 75cd432f..21d5d864 100644
--- a/packages/razor/resources/assets/css/css/components/stepper.css
+++ b/packages/razor/resources/assets/css/css/components/stepper.css
@@ -77,7 +77,7 @@
 }
 
 .cm-stepper__description {
-  color: var(--cm-color-text-tertiary);
+  color: var(--cm-color-text-muted);
   font-size: var(--cm-font-size-sm);
   line-height: var(--cm-line-height-tight);
 }
diff --git a/packages/razor/resources/assets/css/css/components/theme-switch.css b/packages/razor/resources/assets/css/css/components/theme-switch.css
new file mode 100644
index 00000000..83f419b5
--- /dev/null
+++ b/packages/razor/resources/assets/css/css/components/theme-switch.css
@@ -0,0 +1,63 @@
+/*
+ * A three-state control, because the preference is three-state: an explicit light, an explicit dark,
+ * and deferring to the operating system. A two-position toggle cannot say the third thing, which is
+ * the one most people never change.
+ *
+ * Native radios carry the semantics and the keyboard behaviour, so the control works inside a form
+ * with no JavaScript at all. The input stays in the accessibility tree and is hidden visually only.
+ */
+.cm-theme-switch {
+  display: inline-flex;
+  gap: var(--cm-space-1);
+  margin: 0;
+  padding: var(--cm-space-1);
+  border: var(--cm-border-width) solid var(--cm-color-border-default);
+  border-radius: var(--cm-radius-control);
+  background: var(--cm-color-background-surface);
+}
+
+.cm-theme-switch__legend {
+  position: absolute;
+  overflow: hidden;
+  clip-path: inset(50%);
+  inline-size: 1px;
+  block-size: 1px;
+  white-space: nowrap;
+}
+
+.cm-theme-switch__option {
+  display: inline-flex;
+}
+
+.cm-theme-switch__input {
+  position: absolute;
+  opacity: 0;
+  inline-size: 1px;
+  block-size: 1px;
+}
+
+.cm-theme-switch__label {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--cm-space-1) var(--cm-space-2);
+  border-radius: var(--cm-radius-control-tight);
+  color: var(--cm-color-text-secondary);
+  font-size: var(--cm-font-size-md);
+  line-height: var(--cm-line-height-tight);
+  cursor: pointer;
+}
+
+.cm-theme-switch__input:checked + .cm-theme-switch__label {
+  background: var(--cm-color-interactive-primary-subtle-background);
+  color: var(--cm-color-interactive-primary-subtle-foreground);
+}
+
+.cm-theme-switch__input:focus-visible + .cm-theme-switch__label {
+  outline: var(--cm-focus-ring-width) solid var(--cm-color-border-focus);
+  outline-offset: var(--cm-focus-ring-width);
+}
+
+.cm-theme-switch__input:disabled + .cm-theme-switch__label {
+  color: var(--cm-color-text-disabled);
+  cursor: not-allowed;
+}
diff --git a/packages/razor/resources/assets/css/css/styles.css b/packages/razor/resources/assets/css/css/styles.css
index 08ac1684..67c4b8af 100644
--- a/packages/razor/resources/assets/css/css/styles.css
+++ b/packages/razor/resources/assets/css/css/styles.css
@@ -5,6 +5,7 @@
 @import './components/admin-layout.css';
 @import './components/admin-shell.css';
 @import './components/alert.css';
+@import './components/app-shell.css';
 @import './components/avatar.css';
 @import './components/badge.css';
 @import './components/breadcrumbs.css';
@@ -18,12 +19,14 @@
 @import './components/date-picker.css';
 @import './components/divider.css';
 @import './components/dialog.css';
+@import './components/document-layout.css';
 @import './components/dropdown.css';
 @import './components/drawer.css';
 @import './components/field.css';
 @import './components/fieldset.css';
 @import './components/grid.css';
 @import './components/icon-button.css';
+@import './components/icon.css';
 @import './components/input.css';
 @import './components/inline.css';
 @import './components/link.css';
@@ -44,6 +47,7 @@
 @import './components/table.css';
 @import './components/tag.css';
 @import './components/textarea.css';
+@import './components/theme-switch.css';
 @import './components/table-of-contents.css';
 @import './components/tabs.css';
 @import './components/tooltip.css';
diff --git a/packages/razor/resources/assets/manifest.json b/packages/razor/resources/assets/manifest.json
index 7578106a..c0be8136 100644
--- a/packages/razor/resources/assets/manifest.json
+++ b/packages/razor/resources/assets/manifest.json
@@ -24,7 +24,7 @@
     "css:styles.css": {
       "path": "css/css/styles.css",
       "mediaType": "text/css",
-      "sha256": "c265cd309a1bce8cb5b977eee00e35af3eb0367d155bcd5ccc161bc4002a47a6",
+      "sha256": "0c9a81f5022840bfaf89652e372913f6a4c003240de3d18b9001150e9235da4a",
       "source": {
         "package": "@codemonster-ru/ui-css",
         "version": "2.0.0-dev.0",
@@ -114,7 +114,7 @@
     "css:components/admin-layout.css": {
       "path": "css/css/components/admin-layout.css",
       "mediaType": "text/css",
-      "sha256": "61f22962b69c776bc894a43916a37337ca2828f14e3f3d71dfa04c281c73f819",
+      "sha256": "954a8b362b15c76bbc22e9910e0e44e54aabbdf15a53aa0a0f8e9864ad8836c3",
       "source": {
         "package": "@codemonster-ru/ui-css",
         "version": "2.0.0-dev.0",
@@ -141,6 +141,16 @@
         "export": "./alert.css"
       }
     },
+    "css:components/app-shell.css": {
+      "path": "css/css/components/app-shell.css",
+      "mediaType": "text/css",
+      "sha256": "9bfdaa294df92b1083ba748311b6062713b6f68f9c80f92d1ff2730b828db3b3",
+      "source": {
+        "package": "@codemonster-ru/ui-css",
+        "version": "2.0.0-dev.0",
+        "export": "./app-shell.css"
+      }
+    },
     "css:components/avatar.css": {
       "path": "css/css/components/avatar.css",
       "mediaType": "text/css",
@@ -271,6 +281,16 @@
         "export": "./dialog.css"
       }
     },
+    "css:components/document-layout.css": {
+      "path": "css/css/components/document-layout.css",
+      "mediaType": "text/css",
+      "sha256": "3354af03dcb0782e7090560b48c7095fc2c9f37bf44f024b8718ddc02c8d772c",
+      "source": {
+        "package": "@codemonster-ru/ui-css",
+        "version": "2.0.0-dev.0",
+        "export": "./document-layout.css"
+      }
+    },
     "css:components/dropdown.css": {
       "path": "css/css/components/dropdown.css",
       "mediaType": "text/css",
@@ -331,6 +351,16 @@
         "export": "./icon-button.css"
       }
     },
+    "css:components/icon.css": {
+      "path": "css/css/components/icon.css",
+      "mediaType": "text/css",
+      "sha256": "f3cdbe5fe05d88887959816be32f35b96af50997e13baec729a3ac6d7821a23b",
+      "source": {
+        "package": "@codemonster-ru/ui-css",
+        "version": "2.0.0-dev.0",
+        "export": "./icon.css"
+      }
+    },
     "css:components/input.css": {
       "path": "css/css/components/input.css",
       "mediaType": "text/css",
@@ -364,7 +394,7 @@
     "css:components/menu-bar.css": {
       "path": "css/css/components/menu-bar.css",
       "mediaType": "text/css",
-      "sha256": "c7b9fd535e6378ec8fdf5290653778a436e9e5a86d52dd0bcef4416f52d02c09",
+      "sha256": "94ec4fae07f4686a3730c2b1884a56c14a3167afe5b61b5f89f6595cb7854a72",
       "source": {
         "package": "@codemonster-ru/ui-css",
         "version": "2.0.0-dev.0",
@@ -384,7 +414,7 @@
     "css:components/nav-menu.css": {
       "path": "css/css/components/nav-menu.css",
       "mediaType": "text/css",
-      "sha256": "49a48d55dc2bd7c5b145d2d7a7ea416127242a108d2af34d05823570ea954657",
+      "sha256": "4a9154493ac5ad527c20b7a866c32f6045d653fe7febdd2d5871c70fcab5e8f0",
       "source": {
         "package": "@codemonster-ru/ui-css",
         "version": "2.0.0-dev.0",
@@ -484,7 +514,7 @@
     "css:components/stepper.css": {
       "path": "css/css/components/stepper.css",
       "mediaType": "text/css",
-      "sha256": "db30ece4050612e250c0dbb21a3501fcfb9172cdd39e5ea5e9ef9262c1bd7626",
+      "sha256": "bc1ac5d109aa3c3eab22fcbc52378ed705f8e97a4c0cc7daa2ca4aa833242f74",
       "source": {
         "package": "@codemonster-ru/ui-css",
         "version": "2.0.0-dev.0",
@@ -551,6 +581,16 @@
         "export": "./tag.css"
       }
     },
+    "css:components/theme-switch.css": {
+      "path": "css/css/components/theme-switch.css",
+      "mediaType": "text/css",
+      "sha256": "002f3899d4f2131b92aeae4bbe8a87362663fe88c3debb7bfd3dcf5637ac1c61",
+      "source": {
+        "package": "@codemonster-ru/ui-css",
+        "version": "2.0.0-dev.0",
+        "export": "./theme-switch.css"
+      }
+    },
     "css:components/tooltip.css": {
       "path": "css/css/components/tooltip.css",
       "mediaType": "text/css",
diff --git a/scripts/ci/css-token-references.test.mjs b/scripts/ci/css-token-references.test.mjs
new file mode 100644
index 00000000..8ddc0245
--- /dev/null
+++ b/scripts/ci/css-token-references.test.mjs
@@ -0,0 +1,80 @@
+import assert from 'node:assert/strict';
+import { readFile, readdir } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import test from 'node:test';
+import { fileURLToPath } from 'node:url';
+
+// This lives at the repository root, not inside packages/css/__tests__, because it reads
+// packages/tokens/dist -- a sibling package's build output. 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 before running each one's tests independently, so a css-package
+// test that assumed tokens' dist already existed would fail there even though `npm run verify`
+// (which builds every workspace up front) never would have caught it.
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '../..');
+const cssRoot = resolve(root, 'packages/css');
+const tokensRoot = resolve(root, 'packages/tokens');
+
+async function listCssFiles(directory) {
+  const files = [];
+
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    const path = resolve(directory, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...(await listCssFiles(path)));
+    } else if (entry.name.endsWith('.css')) {
+      files.push(path);
+    }
+  }
+
+  return files;
+}
+
+// A handful of custom properties are legitimately published only from JS/PHP (per-element indentation
+// and offsets a controller or adapter writes as an inline style), not declared in any stylesheet. Every
+// one of them already carries a CSS fallback at its use site, so this list exists only for readability,
+// not because the fallback check below needs it.
+const jsPublishedProperties = new Set([
+  '--cm-toc-level',
+  '--cm-nav-menu-level',
+  '--cm-sticky-header-offset',
+  '--cm-sticky-top-offset',
+  '--cm-z-index-sticky',
+]);
+
+test('every var() without a fallback names a custom property ui-css or ui-tokens actually defines', async () => {
+  // This is exactly the check that would have caught --cm-space-3xs, --cm-space-xs, --cm-space-md,
+  // --cm-space-lg, --cm-container-2xl, --cm-focus-ring-offset, --cm-motion-easing-standard,
+  // --cm-color-text-tertiary, and --cm-color-background-overlay -- nine references to custom
+  // properties that don't exist anywhere in this design system, each silently resolving to the
+  // property's initial value (usually as good as unset) instead of failing anything. None of them
+  // crashed, so nothing short of reading every generated pixel would have noticed on its own.
+  const definitionSources = [
+    resolve(tokensRoot, 'dist/tokens.css'),
+    resolve(tokensRoot, 'dist/breakpoints.css'),
+    ...(await listCssFiles(resolve(cssRoot, 'src'))),
+  ];
+
+  const defined = new Set();
+  for (const path of definitionSources) {
+    const source = await readFile(path, 'utf8');
+    for (const match of source.matchAll(/(--cm-[a-zA-Z0-9-]+)\s*:/gu)) {
+      defined.add(match[1]);
+    }
+  }
+
+  const missing = [];
+  for (const path of await listCssFiles(resolve(cssRoot, 'src'))) {
+    const source = await readFile(path, 'utf8');
+
+    for (const match of source.matchAll(/var\((--cm-[a-zA-Z0-9-]+)([^)]*)\)/gu)) {
+      const [, name, rest] = match;
+      const hasFallback = rest.includes(',');
+
+      if (!hasFallback && !defined.has(name) && !jsPublishedProperties.has(name)) {
+        missing.push(`${name} (${path.replace(`${cssRoot}/`, '')})`);
+      }
+    }
+  }
+
+  assert.deepEqual(missing, []);
+});
diff --git a/scripts/ci/sync-code-monster-ui-razor-assets.mjs b/scripts/ci/sync-code-monster-ui-razor-assets.mjs
index 7bf60d97..4c15bd1b 100644
--- a/scripts/ci/sync-code-monster-ui-razor-assets.mjs
+++ b/scripts/ci/sync-code-monster-ui-razor-assets.mjs
@@ -20,6 +20,7 @@ const sources = [
   { packageDirectory: 'css', path: 'components/admin-layout.css', export: './admin-layout.css' },
   { packageDirectory: 'css', path: 'components/admin-shell.css', export: './admin-shell.css' },
   { packageDirectory: 'css', path: 'components/alert.css', export: './alert.css' },
+  { packageDirectory: 'css', path: 'components/app-shell.css', export: './app-shell.css' },
   { packageDirectory: 'css', path: 'components/avatar.css', export: './avatar.css' },
   { packageDirectory: 'css', path: 'components/badge.css', export: './badge.css' },
   { packageDirectory: 'css', path: 'components/breadcrumbs.css', export: './breadcrumbs.css' },
@@ -33,12 +34,14 @@ const sources = [
   { packageDirectory: 'css', path: 'components/date-picker.css', export: './date-picker.css' },
   { packageDirectory: 'css', path: 'components/divider.css', export: './divider.css' },
   { packageDirectory: 'css', path: 'components/dialog.css', export: './dialog.css' },
+  { packageDirectory: 'css', path: 'components/document-layout.css', export: './document-layout.css' },
   { packageDirectory: 'css', path: 'components/dropdown.css', export: './dropdown.css' },
   { packageDirectory: 'css', path: 'components/drawer.css', export: './drawer.css' },
   { packageDirectory: 'css', path: 'components/field.css', export: './field.css' },
   { packageDirectory: 'css', path: 'components/fieldset.css', export: './fieldset.css' },
   { packageDirectory: 'css', path: 'components/grid.css', export: './grid.css' },
   { packageDirectory: 'css', path: 'components/icon-button.css', export: './icon-button.css' },
+  { packageDirectory: 'css', path: 'components/icon.css', export: './icon.css' },
   { packageDirectory: 'css', path: 'components/input.css', export: './input.css' },
   { packageDirectory: 'css', path: 'components/inline.css', export: './inline.css' },
   { packageDirectory: 'css', path: 'components/link.css', export: './link.css' },
@@ -61,6 +64,7 @@ const sources = [
   { packageDirectory: 'css', path: 'components/table-of-contents.css', export: './table-of-contents.css' },
   { packageDirectory: 'css', path: 'components/tabs.css', export: './tabs.css' },
   { packageDirectory: 'css', path: 'components/tag.css', export: './tag.css' },
+  { packageDirectory: 'css', path: 'components/theme-switch.css', export: './theme-switch.css' },
   { packageDirectory: 'css', path: 'components/tooltip.css', export: './tooltip.css' },
 ];