From bcbe7376c293a55857b253e90dd9b097c4a43902 Mon Sep 17 00:00:00 2001
From: Kirill Kolesnikov <kolesnikov-kiril@mail.ru>
Date: Sat, 5 Sep 2026 13:57:24 +0700
Subject: [PATCH] Enrich six showcase demos to match VueForge's actual frozen
 rendering

You said components looked worse than VueForge's fd793696 commit, which you remembered as
10/10. Checked against the real evidence rather than guessing: this repo keeps genuine frozen
screenshots from that exact commit at visual-baselines/vueforge-cross-platform/, and the `visual`
CI job already pixel-diffs the live Vue and Razor adapters against them on every run (currently
green, 4-level-per-channel tolerance). That means the design system itself -- tokens, CSS -- is
already proven pixel-faithful for every case that baseline covers.

Compared six of those baseline images against the showcase demos directly and found the gap:
mine were bare-bones, using each component's minimum viable props instead of the fuller
composition the baseline actually shows.

- Alert: baseline (alert-danger-icon) has a tone-matching icon in the icon slot; mine had none.
  Added CmIcon (infoCircle / alertCircle) and matched the baseline's own copy ("Submission
  failed" / "Review the failed fields.") for the danger case specifically.
- Badge: baseline (badge-danger) shows a text label ("Blocked"), not a single digit or
  punctuation mark. Badge's own CSS is a text pill, not a numeral dot -- changed "3"/"!" to
  "New"/"Blocked".
- Field: baseline (field-help-error) shows a required field with both a description and an
  error rendered at once. Rewrote the demo to `required`, with an error, matching the baseline's
  copy ("Display name" / "Shown to other members." / "Enter a display name.") exactly.
- Input: baseline (input-enhanced) combines a leading slot, password-reveal, clearable, and a
  required indicator in one control. Added a second CmInput demonstrating all four together,
  including the literal "required" trailing-slot text the baseline itself displays.
- Select: baseline (select-clearable) shows the clear button; mine omitted `clearable`. Added it.
- Date picker: baseline (date-picker-clearable) shows a filled value with both the calendar and
  clear icons visible; mine was empty, showing only the calendar icon. Gave it an initial value.

Verified live over CDP against the actual dev server, not just by reading the diff: confirmed the
alert icon, badge text, field's required marker/description/error, input's leading/trailing/
password/clear elements, select's clear button, and the date picker's filled value all render,
then screenshotted each section and compared side by side with its baseline image. Zero console
warnings.

No design-system code changed -- this is a demo-content fix, not a token or CSS fix. The other
38 sections weren't touched; they don't have a frozen baseline to compare against, so there was
nothing concrete to check them against here.
---
 examples/ui-showcase/src/App.vue | 54 ++++++++++++++++++++++++--------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/examples/ui-showcase/src/App.vue b/examples/ui-showcase/src/App.vue
index 02a752fa..cf66d7b8 100644
--- a/examples/ui-showcase/src/App.vue
+++ b/examples/ui-showcase/src/App.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { arrowLeft, gear, github, magnifyingGlass, plus, trash } from '@codemonster-ru/ui-icons';
+import {
+  alertCircle,
+  arrowLeft,
+  gear,
+  github,
+  infoCircle,
+  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 {
@@ -89,7 +98,7 @@ const dataTableRows = [
   { id: 'b', cells: { name: 'Roadmap.md', owner: 'Aisha', size: '18 KB' } },
 ];
 
-const datePickerValue = ref('');
+const datePickerValue = ref('2026-08-13');
 
 const dialogOpen = ref(false);
 const drawerOpen = ref(false);
@@ -120,6 +129,8 @@ const checkboxValue = ref(true);
 const switchValue = ref(true);
 const radioValue = ref('email');
 const inputValue = ref('');
+const passwordValue = ref('correct-horse');
+const displayNameValue = ref('');
 const textareaValue = ref('');
 
 const menuBarItems = [
@@ -246,10 +257,16 @@ const tableOfContentsItems = [
 
     <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>
+      <p class="ui-showcase__note">An inline, non-dismissable status message with a tone; the icon slot is optional.</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>
+        <CmAlert tone="info" title="Heads up">
+          <template #icon><CmIcon :icon="infoCircle" /></template>
+          A new version of this workspace is available.
+        </CmAlert>
+        <CmAlert tone="danger" title="Submission failed">
+          <template #icon><CmIcon :icon="alertCircle" /></template>
+          Review the failed fields.
+        </CmAlert>
       </CmStack>
     </section>
 
@@ -264,10 +281,10 @@ const tableOfContentsItems = [
 
     <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>
+      <p class="ui-showcase__note">A short status label, meant to sit on or beside another element.</p>
       <div class="ui-showcase__inline">
-        <CmBadge tone="primary">3</CmBadge>
-        <CmBadge tone="danger">!</CmBadge>
+        <CmBadge tone="primary">New</CmBadge>
+        <CmBadge tone="danger">Blocked</CmBadge>
       </div>
     </section>
 
@@ -380,12 +397,17 @@ const tableOfContentsItems = [
         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.">
+      <CmField
+        control-id="showcase-field-display-name"
+        label="Display name"
+        description="Shown to other members."
+        error="Enter a display name."
+        required
+      >
         <template #default="{ controlId, describedBy, invalid, required }">
           <CmInput
             :id="controlId"
-            v-model="inputValue"
-            type="email"
+            v-model="displayNameValue"
             :aria-describedby="describedBy"
             :invalid="invalid"
             :required="required"
@@ -444,7 +466,13 @@ const tableOfContentsItems = [
     <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 />
+      <CmStack>
+        <CmInput v-model="inputValue" type="text" placeholder="Project name" clearable />
+        <CmInput v-model="passwordValue" type="password" required clearable password-reveal>
+          <template #leading>@</template>
+          <template #trailing>required</template>
+        </CmInput>
+      </CmStack>
     </section>
 
     <section id="demo-inline" class="ui-showcase__demo">
@@ -507,7 +535,7 @@ const tableOfContentsItems = [
     <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" />
+      <CmSelect id="showcase-select" v-model="selectValue" :options="selectOptions" clearable />
     </section>
 
     <section id="demo-section" class="ui-showcase__demo">