From 914f065f4785cfb6a7e9a8c44f23e4c874fa0f5b Mon Sep 17 00:00:00 2001
From: "Jeffrey T. Fritz" <csharpfritz@users.noreply.github.com>
Date: Thu, 29 Jan 2026 13:19:56 -0500
Subject: [PATCH 1/2] =?UTF-8?q?Add=20new=20components=20and=20samples=20fo?=
 =?UTF-8?q?r=20CheckBox,=20DropDownList,=20Panel,=20Pla=E2=80=A6=20(#304)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/skills/documentation/SKILL.md         | 323 +++++++++++++++++-
 README.md                                     |  10 +-
 .../Components/Layout/NavMenu.razor           |  13 +-
 .../Components/Pages/ComponentList.razor      |   7 +
 .../Pages/ControlSamples/Panel/Index.razor    | 184 ++++++++++
 .../ControlSamples/PlaceHolder/Index.razor    | 117 +++++++
 .../RadioButtonList/Index.razor               | 302 ++++++++++++++++
 .../ControlSamples/RadioButton/Index.razor    |  21 +-
 .../ControlSamples/TextBox/Default.razor      | 132 +++++--
 samples/AfterBlazorServerSide/Program.cs      |   2 +-
 samples/AfterBlazorServerSide/_Imports.razor  |   1 +
 11 files changed, 1055 insertions(+), 57 deletions(-)
 create mode 100644 samples/AfterBlazorServerSide/Components/Pages/ControlSamples/Panel/Index.razor
 create mode 100644 samples/AfterBlazorServerSide/Components/Pages/ControlSamples/PlaceHolder/Index.razor
 create mode 100644 samples/AfterBlazorServerSide/Components/Pages/ControlSamples/RadioButtonList/Index.razor

diff --git a/.github/skills/documentation/SKILL.md b/.github/skills/documentation/SKILL.md
index 975044a98..179d8d0c6 100644
--- a/.github/skills/documentation/SKILL.md
+++ b/.github/skills/documentation/SKILL.md
@@ -391,6 +391,305 @@ When creating sample pages in `samples/AfterBlazorServerSide/Components/Pages/Co
 }
 ```
 
+## Creating Sample Pages for Components
+
+**CRITICAL**: Every documented component MUST have a corresponding sample page in the AfterBlazorServerSide project.
+
+### Sample Page Structure and Location
+
+Samples are located in `samples/AfterBlazorServerSide/Components/Pages/ControlSamples/[ComponentName]/`
+
+The folder structure mirrors the documentation categories:
+- **Editor Controls**: `ControlSamples/[ComponentName]/`
+- **Data Controls**: `ControlSamples/[ComponentName]/`
+- **Validation Controls**: `ControlSamples/[ComponentName]/` (or `ControlSamples/Validations/`)
+- **Navigation Controls**: `ControlSamples/[ComponentName]/`
+- **Login Controls**: `ControlSamples/[ComponentName]/`
+
+### Sample File Naming Conventions
+
+1. **Basic Sample**: `Index.razor` - The main/default sample for the component
+   - Route: `@page "/ControlSamples/[ComponentName]"`
+
+2. **Additional Scenarios**: `[ScenarioName].razor` - Named after what they demonstrate
+   - Route: `@page "/ControlSamples/[ComponentName]/[ScenarioName]"`
+   - Examples: `Style.razor`, `Events.razor`, `JavaScript.razor`
+
+3. **Navigation Helper**: `Nav.razor` - Optional component listing all samples for this component
+   - Used to navigate between multiple samples for the same component
+
+### Sample Page Required Structure
+
+Every sample page MUST include:
+
+1. **Route**: `@page "/ControlSamples/[ComponentName]"` or `@page "/ControlSamples/[ComponentName]/[Scenario]"`
+2. **PageTitle**: `<PageTitle>[ComponentName] - [Scenario]</PageTitle>`
+3. **Heading**: `<h1>[ComponentName] Sample</h1>` or `<h2>[ComponentName] - [Scenario]</h2>`
+4. **Description**: Brief explanation of what the sample demonstrates
+5. **Demo Section**: Working component implementation
+6. **Code Display**: Showing the markup and code being used (optional but recommended)
+
+### Sample Page Template
+
+```razor
+@page "/ControlSamples/[ComponentName]"
+@page "/ControlSamples/[ComponentName]/[Scenario]"
+
+<PageTitle>[ComponentName] Sample</PageTitle>
+
+<h2>[ComponentName] - [Scenario Description]</h2>
+
+<p>[Brief description of what this sample demonstrates]</p>
+
+@* Optional: Navigation to other samples for this component *@
+<Nav />
+
+@* The working demo *@
+<div class="demo-section">
+    <[ComponentName]
+        Property1="value"
+        Property2="@someValue"
+        OnEvent="HandleEvent" />
+</div>
+
+@* Optional but recommended: Show the results or state *@
+@if (!string.IsNullOrEmpty(Message))
+{
+    <div class="result">@Message</div>
+}
+
+@code {
+    private string Message = "";
+
+    private void HandleEvent()
+    {
+        Message = "Event handled!";
+    }
+}
+
+<hr />
+
+@* Optional: Display the code being used *@
+<p>Code:</p>
+<code>
+&lt;[ComponentName] Property1="value" OnEvent="HandleEvent" /&gt;
+</code>
+```
+
+### Creating Samples for Different Scenarios
+
+When a component has multiple features to demonstrate, create separate sample pages:
+
+```
+ControlSamples/
+  Button/
+    Index.razor           # Basic button usage
+    Style.razor           # Styling examples
+    JavaScript.razor      # JavaScript integration
+    Nav.razor            # Navigation between samples
+```
+
+Each scenario page should focus on ONE specific feature or use case.
+
+## Linking Samples in Navigation
+
+**CRITICAL**: After creating sample pages, they MUST be added to the navigation tree.
+
+### Update NavMenu.razor
+
+Location: `samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor`
+
+Add `<TreeNode>` entries under the appropriate category section:
+
+```razor
+<TreeNode Text="[Category] Components">
+
+    @* For a component with a single sample *@
+    <TreeNode Text="[ComponentName]" NavigateUrl="/ControlSamples/[ComponentName]" />
+
+    @* For a component with multiple samples *@
+    <TreeNode Text="[ComponentName]" NavigateUrl="/ControlSamples/[ComponentName]" Expanded="false">
+        <TreeNode Text="Basic Usage" NavigateUrl="/ControlSamples/[ComponentName]" />
+        <TreeNode Text="[Scenario 1]" NavigateUrl="/ControlSamples/[ComponentName]/[Scenario1]" />
+        <TreeNode Text="[Scenario 2]" NavigateUrl="/ControlSamples/[ComponentName]/[Scenario2]" />
+    </TreeNode>
+
+</TreeNode>
+```
+
+**Navigation Categories**:
+- `<TreeNode Text="Editor Components">` - For editor controls
+- `<TreeNode Text="Data Components">` - For data-bound controls
+- `<TreeNode Text="Validation Components">` - For validators
+- `<TreeNode Text="Navigation Components">` - For navigation controls
+- `<TreeNode Text="Login Components">` - For login/authentication controls
+
+**Ordering**: Add new components alphabetically within their category.
+
+### Example NavMenu Updates
+
+```razor
+@* Adding a new editor control *@
+<TreeNode Text="Editor Components">
+    <TreeNode Text="Button" NavigateUrl="/ControlSamples/Button">
+        <TreeNode Text="JavaScript Click" NavigateUrl="/ControlSamples/Button/JavaScript" />
+        <TreeNode Text="Style" NavigateUrl="/ControlSamples/Button/Style" />
+    </TreeNode>
+    <TreeNode Text="Label" NavigateUrl="/ControlSamples/Label" />  @* New component *@
+    <TreeNode Text="TextBox" NavigateUrl="/ControlSamples/TextBox" />
+</TreeNode>
+
+@* Adding a new data control with multiple samples *@
+<TreeNode Text="Data Components">
+    <TreeNode Text="GridView" NavigateUrl="/ControlSamples/GridView" Expanded="false">
+        <TreeNode NavigateUrl="/ControlSamples/GridView" Text="Simple GridView" />
+        <TreeNode NavigateUrl="/ControlSamples/GridView/AutoGeneratedColumns" Text="Autogenerated Columns" />
+        <TreeNode NavigateUrl="/ControlSamples/GridView/TemplateFields" Text="Template Fields" />
+    </TreeNode>
+</TreeNode>
+```
+
+## Updating the Home Page Component List
+
+**CRITICAL**: After creating samples, update the component list on the home page.
+
+Location: `samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor`
+
+Add links to the appropriate category column:
+
+```html
+<div class="col-md-3">
+    <h3>[Category] Controls</h3>
+    <ul>
+        <li><a href="/ControlSamples/ExistingComponent">ExistingComponent</a></li>
+        <li><a href="/ControlSamples/NewComponent">NewComponent</a></li>  @* Add alphabetically *@
+        <li><a href="/ControlSamples/OtherComponent">OtherComponent</a></li>
+    </ul>
+</div>
+```
+
+**Categories**:
+- **Editor Controls** - Simple UI components (Button, Label, TextBox, etc.)
+- **Data Controls** - Data-bound components (GridView, Repeater, DataList, etc.)
+- **Validation Controls** - Form validators
+- **Navigation Controls** - Menu, TreeView, SiteMapPath
+- **Login Controls** - Authentication/authorization components
+
+**Ordering**: Add links alphabetically within each category.
+
+## Updating the Repository README
+
+**CRITICAL**: After documenting a component, update the main README.md at the repository root.
+
+Location: `README.md` (repository root)
+
+### For New Components
+
+If adding a component that isn't already listed, add it to the appropriate category:
+
+```markdown
+## Blazor Components for Controls
+
+There are a significant number of controls in ASP.NET Web Forms, and we will focus on creating components in the following order:
+
+  - Editor Controls
+    - [AdRotator](docs/EditorControls/AdRotator.md)
+    - [Button](docs/EditorControls/Button.md)
+    - [NewComponent](docs/EditorControls/NewComponent.md)  <-- Add alphabetically with link
+    - [TextBox](docs/EditorControls/TextBox.md)
+```
+
+### For Existing Components (Adding Documentation)
+
+If a component exists in the list without a documentation link, add the link:
+
+```markdown
+Before:
+    - CheckBoxList
+
+After:
+    - [CheckBoxList](docs/EditorControls/CheckBoxList.md)
+```
+
+### README Categories
+
+Match the category in the README to where you placed the documentation:
+- `Editor Controls` → `docs/EditorControls/`
+- `Data Controls` → `docs/DataControls/`
+- `Validation Controls` → `docs/ValidationControls/`
+- `Navigation Controls` → `docs/NavigationControls/`
+- `Login Controls` → `docs/LoginControls/`
+
+**Ordering**: Keep components alphabetically sorted within each category.
+
+## Complete Documentation Workflow
+
+When documenting a new or existing component, follow this complete workflow:
+
+### 1. Create Component Documentation
+- Location: `docs/[Category]/[ComponentName].md`
+- Follow the component documentation template
+- Include Web Forms and Blazor syntax comparisons
+- Document supported and unsupported features
+- Provide working code examples
+
+### 2. Add to MkDocs Navigation
+- File: `mkdocs.yml`
+- Add entry under appropriate `nav:` section
+- Format: `- ComponentName: Category/ComponentName.md`
+- Maintain alphabetical order within category
+
+### 3. Create Sample Page(s)
+- Location: `samples/AfterBlazorServerSide/Components/Pages/ControlSamples/[ComponentName]/`
+- Create `Index.razor` for basic usage
+- Create additional scenario pages as needed (Style.razor, Events.razor, etc.)
+- Follow sample page template and structure
+- Include `@page` directive with correct route
+- Add working component demonstration
+
+### 4. Update Navigation Menu
+- File: `samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor`
+- Add `<TreeNode>` entries under appropriate category
+- Include all sample pages for the component
+- Maintain alphabetical order within category
+
+### 5. Update Home Page Component List
+- File: `samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor`
+- Add link in appropriate category column
+- Link to the main sample page: `/ControlSamples/[ComponentName]`
+- Maintain alphabetical order within category
+
+### 6. Update Repository README
+- File: `README.md` (root)
+- Add component with documentation link if new
+- Update existing component entry to include link if adding documentation
+- Format: `- [ComponentName](docs/Category/ComponentName.md)`
+- Maintain alphabetical order within category
+
+### Example: Complete Workflow for "Label" Component
+
+```bash
+# 1. Create documentation
+docs/EditorControls/Label.md
+
+# 2. Update mkdocs.yml
+nav:
+  - Editor Controls:
+    - Label: EditorControls/Label.md
+
+# 3. Create sample page
+samples/AfterBlazorServerSide/Components/Pages/ControlSamples/Label/Index.razor
+
+# 4. Update NavMenu.razor
+<TreeNode Text="Label" NavigateUrl="/ControlSamples/Label" />
+
+# 5. Update ComponentList.razor
+<li><a href="/ControlSamples/Label">Label</a></li>
+
+# 6. Update README.md
+- [Label](docs/EditorControls/Label.md)
+```
+
 ## Quality Checklist
 
 Before submitting documentation:
@@ -405,10 +704,20 @@ Before submitting documentation:
 - [ ] Spell-checked
 
 Before submitting sample pages:
-- [ ] Includes both demo and source code sections
-- [ ] Code block exactly matches the demo
-- [ ] HTML entities properly encoded in code block
-- [ ] `@` symbols doubled in code block
-- [ ] Includes complete `@code` block with all handlers
-- [ ] Brief description explains what sample demonstrates
-- [ ] Sample is accessible from navigation or component list
+- [ ] Created in correct folder: `ControlSamples/[ComponentName]/`
+- [ ] Follows naming convention (Index.razor for main sample)
+- [ ] Includes `@page` directive with correct route
+- [ ] Includes `<PageTitle>` element
+- [ ] Has clear heading and description
+- [ ] Contains working component demonstration
+- [ ] Added to NavMenu.razor navigation tree
+- [ ] Added to ComponentList.razor home page
+- [ ] All samples for component are linked in navigation
+- [ ] Routes match navigation URLs exactly
+
+Before submitting README updates:
+- [ ] Component added to or updated in correct category
+- [ ] Documentation link format: `[ComponentName](docs/Category/ComponentName.md)`
+- [ ] Alphabetically ordered within category
+- [ ] Link verified to work (file exists at that path)
+- [ ] Category matches documentation location
diff --git a/README.md b/README.md
index 7d16ee105..3e26a5e2e 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ There are a significant number of controls in ASP.NET Web Forms, and we will foc
     - [Button](docs/EditorControls/Button.md)
     - Calendar
     - [CheckBox](docs/EditorControls/CheckBox.md)
-    - CheckBoxList
+    - [CheckBoxList](docs/EditorControls/CheckBoxList.md)
     - [DropDownList](docs/EditorControls/DropDownList.md)
     - FileUpload
     - [HiddenField](docs/EditorControls/HiddenField.md)
@@ -38,14 +38,14 @@ There are a significant number of controls in ASP.NET Web Forms, and we will foc
     - ImageMap
     - [Label](docs/EditorControls/Label.md)
     - [LinkButton](docs/EditorControls/LinkButton.md)
-    - ListBox
+    - [ListBox](docs/EditorControls/ListBox.md)
     - [Literal](docs/EditorControls/Literal.md)
     - Localize
     - MultiView
-    - Panel
-    - PlaceHolder
+    - [Panel](docs/EditorControls/Panel.md)
+    - [PlaceHolder](docs/EditorControls/PlaceHolder.md)
     - [RadioButton](docs/EditorControls/RadioButton.md)
-    - RadioButtonList
+    - [RadioButtonList](docs/EditorControls/RadioButtonList.md)
     - Substitution
     - Table
     - [TextBox](docs/EditorControls/TextBox.md)
diff --git a/samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor b/samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor
index 16b0dd77d..7dbd1ab3e 100644
--- a/samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor
+++ b/samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor
@@ -19,11 +19,21 @@
 						<TreeNode Text="JavaScript Click" NavigateUrl="/ControlSamples/Button/JavaScript" />
 						<TreeNode Text="Style" NavigateUrl="/ControlSamples/Button/Style" />
 					</TreeNode>
+					<TreeNode Text="CheckBox" NavigateUrl="/ControlSamples/CheckBox">
+						<TreeNode Text="Events" NavigateUrl="/ControlSamples/CheckBox/Events" />
+						<TreeNode Text="Style" NavigateUrl="/ControlSamples/CheckBox/Style" />
+					</TreeNode>
+					<TreeNode Text="DropDownList" NavigateUrl="/ControlSamples/DropDownList" />
 					<TreeNode Text="LinkButton" NavigateUrl="/ControlSamples/LinkButton">
 						<TreeNode Text="JavaScript Click" NavigateUrl="/ControlSamples/LinkButton/JavaScript" />
 					</TreeNode>
 					<TreeNode Text="HyperLink" NavigateUrl="/ControlSamples/HyperLink" />
 					<TreeNode Text="Literal" NavigateUrl="/ControlSamples/Literal" />
+					<TreeNode Text="Panel" NavigateUrl="/ControlSamples/Panel" />
+					<TreeNode Text="PlaceHolder" NavigateUrl="/ControlSamples/PlaceHolder" />
+					<TreeNode Text="RadioButton" NavigateUrl="/ControlSamples/RadioButton" />
+					<TreeNode Text="RadioButtonList" NavigateUrl="/ControlSamples/RadioButtonList" />
+					<TreeNode Text="TextBox" NavigateUrl="/ControlSamples/TextBox" />
 				</TreeNode>
         <TreeNode Text="Data Components">
 
@@ -74,7 +84,8 @@
 
         <TreeNode Text="Navigation Components">
 
-					<TreeNode Text="Menu" NavigateUrl="/ControlSamples/Menu" Expanded="true">
+					<TreeNode Text="Menu" NavigateUrl="/ControlSamples/Menu" Expanded="false">
+						<TreeNode Text="Databinding Sitemap" NavigateUrl="/ControlSamples/Menu/DatabindingSitemap" />
 					</TreeNode>
 
 					<TreeNode Text="TreeView" NavigateUrl="/ControlSamples/TreeView" Expanded="false">
diff --git a/samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor b/samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor
index 411dbdf2b..5a212a27c 100644
--- a/samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor
+++ b/samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor
@@ -4,9 +4,16 @@
 		<ul>
 			<li><a href="/ControlSamples/AdRotator">AdRotator</a></li>
 			<li><a href="/ControlSamples/Button">Button</a></li>
+			<li><a href="/ControlSamples/CheckBox">CheckBox</a></li>
+			<li><a href="/ControlSamples/DropDownList">DropDownList</a></li>
 			<li><a href="/ControlSamples/HyperLink">HyperLink</a></li>
 			<li><a href="/ControlSamples/LinkButton">LinkButton</a></li>
 			<li><a href="/ControlSamples/Literal">Literal</a></li>
+			<li><a href="/ControlSamples/Panel">Panel</a></li>
+			<li><a href="/ControlSamples/PlaceHolder">PlaceHolder</a></li>
+			<li><a href="/ControlSamples/RadioButton">RadioButton</a></li>
+			<li><a href="/ControlSamples/RadioButtonList">RadioButtonList</a></li>
+			<li><a href="/ControlSamples/TextBox">TextBox</a></li>
 		</ul>
 	</div>
 
diff --git a/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/Panel/Index.razor b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/Panel/Index.razor
new file mode 100644
index 000000000..6beaad2e2
--- /dev/null
+++ b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/Panel/Index.razor
@@ -0,0 +1,184 @@
+@page "/ControlSamples/Panel"
+@using BlazorWebFormsComponents.Enums
+
+<h2>Panel Component Samples</h2>
+
+<h3>Basic Panel</h3>
+<Panel>
+	<p>This content is inside a basic Panel.</p>
+	<p>A Panel renders as a div element by default.</p>
+</Panel>
+<pre><code>&lt;Panel&gt;
+    &lt;p&gt;This content is inside a basic Panel.&lt;/p&gt;
+&lt;/Panel&gt;</code></pre>
+
+<hr />
+
+<h3>Panel with GroupingText (Fieldset)</h3>
+<Panel GroupingText="User Information">
+	<p>Name: John Doe</p>
+	<p>Email: john@example.com</p>
+</Panel>
+<pre><code>&lt;Panel GroupingText="User Information"&gt;
+    &lt;p&gt;Name: John Doe&lt;/p&gt;
+    &lt;p&gt;Email: john@example.com&lt;/p&gt;
+&lt;/Panel&gt;</code></pre>
+
+<hr />
+
+<h3>Panel with Styling</h3>
+<Panel BackColor="WebColor.LightYellow" 
+       ForeColor="WebColor.Navy"
+       BorderColor="WebColor.Blue"
+       BorderWidth="Unit.Pixel(2)"
+       BorderStyle="BorderStyle.Solid"
+       Width="Unit.Pixel(300)">
+	<p>This panel has custom colors and border.</p>
+</Panel>
+<pre><code>&lt;Panel BackColor="WebColor.LightYellow" 
+       ForeColor="WebColor.Navy"
+       BorderColor="WebColor.Blue"
+       BorderWidth="Unit.Pixel(2)"
+       BorderStyle="BorderStyle.Solid"
+       Width="Unit.Pixel(300)"&gt;
+    &lt;p&gt;This panel has custom colors and border.&lt;/p&gt;
+&lt;/Panel&gt;</code></pre>
+
+<hr />
+
+<h3>Panel with Vertical ScrollBars</h3>
+<Panel ScrollBars="ScrollBars.Vertical" 
+       Height="Unit.Pixel(100)" 
+       Width="Unit.Pixel(300)"
+       BorderStyle="BorderStyle.Solid"
+       BorderWidth="Unit.Pixel(1)">
+	<p>Line 1 - This panel has vertical scrollbars.</p>
+	<p>Line 2</p>
+	<p>Line 3</p>
+	<p>Line 4</p>
+	<p>Line 5</p>
+	<p>Line 6</p>
+	<p>Line 7</p>
+</Panel>
+<pre><code>&lt;Panel ScrollBars="ScrollBars.Vertical" 
+       Height="Unit.Pixel(100)" 
+       Width="Unit.Pixel(300)"
+       BorderStyle="BorderStyle.Solid"
+       BorderWidth="Unit.Pixel(1)"&gt;
+    &lt;p&gt;Line 1&lt;/p&gt;
+    &lt;p&gt;Line 2&lt;/p&gt;
+    ...
+&lt;/Panel&gt;</code></pre>
+
+<hr />
+
+<h3>Panel with Horizontal ScrollBars</h3>
+<Panel ScrollBars="ScrollBars.Horizontal" 
+       Height="Unit.Pixel(60)" 
+       Width="Unit.Pixel(200)"
+       BorderStyle="BorderStyle.Solid"
+       BorderWidth="Unit.Pixel(1)">
+	<p style="white-space: nowrap;">This is a very long line of text that will cause horizontal scrolling in the panel.</p>
+</Panel>
+<pre><code>&lt;Panel ScrollBars="ScrollBars.Horizontal" 
+       Height="Unit.Pixel(60)" 
+       Width="Unit.Pixel(200)"&gt;
+    &lt;p&gt;Long content here...&lt;/p&gt;
+&lt;/Panel&gt;</code></pre>
+
+<hr />
+
+<h3>Panel with Auto ScrollBars</h3>
+<Panel ScrollBars="ScrollBars.Auto" 
+       Height="Unit.Pixel(80)" 
+       Width="Unit.Pixel(250)"
+       BorderStyle="BorderStyle.Solid"
+       BorderWidth="Unit.Pixel(1)">
+	<p>Auto scrollbars appear only when needed.</p>
+	<p>Add more content to see them.</p>
+	<p>Line 3</p>
+	<p>Line 4</p>
+</Panel>
+<pre><code>&lt;Panel ScrollBars="ScrollBars.Auto" 
+       Height="Unit.Pixel(80)" 
+       Width="Unit.Pixel(250)"&gt;
+    &lt;p&gt;Content...&lt;/p&gt;
+&lt;/Panel&gt;</code></pre>
+
+<hr />
+
+<h3>Panel with Horizontal Alignment</h3>
+<Panel HorizontalAlign="HorizontalAlign.Center"
+       BorderStyle="BorderStyle.Dashed"
+       BorderWidth="Unit.Pixel(1)"
+       Width="Unit.Pixel(400)">
+	<p>This text is centered within the panel.</p>
+</Panel>
+<pre><code>&lt;Panel HorizontalAlign="HorizontalAlign.Center"
+       BorderStyle="BorderStyle.Dashed"
+       Width="Unit.Pixel(400)"&gt;
+    &lt;p&gt;This text is centered within the panel.&lt;/p&gt;
+&lt;/Panel&gt;</code></pre>
+
+<hr />
+
+<h3>Panel with Right Alignment</h3>
+<Panel HorizontalAlign="HorizontalAlign.Right"
+       BorderStyle="BorderStyle.Solid"
+       BorderWidth="Unit.Pixel(1)"
+       Width="Unit.Pixel(400)">
+	<p>This text is right-aligned.</p>
+</Panel>
+<pre><code>&lt;Panel HorizontalAlign="HorizontalAlign.Right" Width="Unit.Pixel(400)"&gt;
+    &lt;p&gt;This text is right-aligned.&lt;/p&gt;
+&lt;/Panel&gt;</code></pre>
+
+<hr />
+
+<h3>Panel with Text Direction (RTL)</h3>
+<Panel Direction="ContentDirection.RightToLeft"
+       BorderStyle="BorderStyle.Solid"
+       BorderWidth="Unit.Pixel(1)"
+       Width="Unit.Pixel(300)">
+	<p>This text flows right-to-left.</p>
+</Panel>
+<pre><code>&lt;Panel Direction="ContentDirection.RightToLeft"&gt;
+    &lt;p&gt;This text flows right-to-left.&lt;/p&gt;
+&lt;/Panel&gt;</code></pre>
+
+<hr />
+
+<h3>Panel with No Wrap</h3>
+<Panel Wrap="false"
+       Width="Unit.Pixel(200)"
+       BorderStyle="BorderStyle.Solid"
+       BorderWidth="Unit.Pixel(1)">
+	<span>This long text will not wrap to the next line because Wrap is false.</span>
+</Panel>
+<pre><code>&lt;Panel Wrap="false" Width="Unit.Pixel(200)"&gt;
+    &lt;span&gt;This long text will not wrap...&lt;/span&gt;
+&lt;/Panel&gt;</code></pre>
+
+<hr />
+
+<h3>Hidden Panel (Visible=false)</h3>
+<Panel Visible="false">
+	<p>This content should not be visible.</p>
+</Panel>
+<p><em>(The panel above is hidden - nothing rendered)</em></p>
+<pre><code>&lt;Panel Visible="false"&gt;
+    &lt;p&gt;This content should not be visible.&lt;/p&gt;
+&lt;/Panel&gt;</code></pre>
+
+<hr />
+
+<h3>Visible Panel (Visible=true)</h3>
+<Panel Visible="true"
+       BorderStyle="BorderStyle.Solid"
+       BorderWidth="Unit.Pixel(1)"
+       BackColor="WebColor.LightGreen">
+	<p>This panel is visible (Visible=true is the default).</p>
+</Panel>
+<pre><code>&lt;Panel Visible="true" BackColor="WebColor.LightGreen"&gt;
+    &lt;p&gt;This panel is visible.&lt;/p&gt;
+&lt;/Panel&gt;</code></pre>
diff --git a/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/PlaceHolder/Index.razor b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/PlaceHolder/Index.razor
new file mode 100644
index 000000000..c552cbfd4
--- /dev/null
+++ b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/PlaceHolder/Index.razor
@@ -0,0 +1,117 @@
+@page "/ControlSamples/PlaceHolder"
+
+<h2>PlaceHolder Component Samples</h2>
+
+<p>The PlaceHolder component is a container that renders its child content without adding any HTML markup of its own. It's useful for conditionally showing/hiding content.</p>
+
+<hr />
+
+<h3>Basic PlaceHolder</h3>
+<PlaceHolder>
+	<p>This content is inside a PlaceHolder.</p>
+	<p>Note: No extra wrapper element is rendered around this content.</p>
+</PlaceHolder>
+<pre><code>&lt;PlaceHolder&gt;
+    &lt;p&gt;This content is inside a PlaceHolder.&lt;/p&gt;
+    &lt;p&gt;No extra wrapper element is rendered.&lt;/p&gt;
+&lt;/PlaceHolder&gt;</code></pre>
+
+<hr />
+
+<h3>PlaceHolder with Visible=true (default)</h3>
+<PlaceHolder Visible="true">
+	<div style="background-color: lightgreen; padding: 10px; border: 1px solid green;">
+		<p>This PlaceHolder is visible (Visible=true).</p>
+	</div>
+</PlaceHolder>
+<pre><code>&lt;PlaceHolder Visible="true"&gt;
+    &lt;div&gt;This PlaceHolder is visible.&lt;/div&gt;
+&lt;/PlaceHolder&gt;</code></pre>
+
+<hr />
+
+<h3>PlaceHolder with Visible=false</h3>
+<PlaceHolder Visible="false">
+	<div style="background-color: lightcoral; padding: 10px;">
+		<p>This content should NOT be visible.</p>
+	</div>
+</PlaceHolder>
+<p><em>(The PlaceHolder above has Visible=false, so nothing is rendered)</em></p>
+<pre><code>&lt;PlaceHolder Visible="false"&gt;
+    &lt;div&gt;This content should NOT be visible.&lt;/div&gt;
+&lt;/PlaceHolder&gt;</code></pre>
+
+<hr />
+
+<h3>Dynamic Visibility Toggle</h3>
+<PlaceHolder Visible="@showContent">
+	<div style="background-color: lightyellow; padding: 10px; border: 1px solid orange;">
+		<p>Dynamic content is visible! Click button to hide.</p>
+	</div>
+</PlaceHolder>
+<button class="btn btn-primary" @onclick="ToggleContent">
+	@(showContent ? "Hide Content" : "Show Content")
+</button>
+<pre><code>&lt;PlaceHolder Visible="@@showContent"&gt;
+    &lt;div&gt;Dynamic content is visible!&lt;/div&gt;
+&lt;/PlaceHolder&gt;
+&lt;button @@onclick="ToggleContent"&gt;Toggle&lt;/button&gt;
+
+@@code {
+    private bool showContent = true;
+    private void ToggleContent() => showContent = !showContent;
+}</code></pre>
+
+<hr />
+
+<h3>Conditional Content (Login State Example)</h3>
+<PlaceHolder Visible="@isLoggedIn">
+	<div style="background-color: lightgreen; padding: 10px; border: 1px solid green;">
+		<p><strong>Welcome, logged in user!</strong></p>
+	</div>
+</PlaceHolder>
+<PlaceHolder Visible="@(!isLoggedIn)">
+	<div style="background-color: lightcoral; padding: 10px; border: 1px solid red;">
+		<p>Please log in to see content.</p>
+	</div>
+</PlaceHolder>
+<button class="btn btn-secondary" @onclick="ToggleLogin">
+	@(isLoggedIn ? "Log Out" : "Log In")
+</button>
+<p>Status: <strong>@(isLoggedIn ? "Logged In" : "Logged Out")</strong></p>
+<pre><code>&lt;PlaceHolder Visible="@@isLoggedIn"&gt;
+    &lt;div&gt;Welcome, logged in user!&lt;/div&gt;
+&lt;/PlaceHolder&gt;
+&lt;PlaceHolder Visible="@@(!isLoggedIn)"&gt;
+    &lt;div&gt;Please log in to see content.&lt;/div&gt;
+&lt;/PlaceHolder&gt;
+
+@@code {
+    private bool isLoggedIn = false;
+    private void ToggleLogin() => isLoggedIn = !isLoggedIn;
+}</code></pre>
+
+<hr />
+
+<h3>Empty PlaceHolder</h3>
+<p>Before empty PlaceHolder:</p>
+<PlaceHolder></PlaceHolder>
+<p>After empty PlaceHolder (nothing between these paragraphs).</p>
+<pre><code>&lt;p&gt;Before empty PlaceHolder:&lt;/p&gt;
+&lt;PlaceHolder&gt;&lt;/PlaceHolder&gt;
+&lt;p&gt;After empty PlaceHolder.&lt;/p&gt;</code></pre>
+
+@code {
+	private bool showContent = true;
+	private bool isLoggedIn = false;
+
+	private void ToggleContent()
+	{
+		showContent = !showContent;
+	}
+
+	private void ToggleLogin()
+	{
+		isLoggedIn = !isLoggedIn;
+	}
+}
diff --git a/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/RadioButtonList/Index.razor b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/RadioButtonList/Index.razor
new file mode 100644
index 000000000..2cb9001de
--- /dev/null
+++ b/samples/AfterBlazorServerSide/Components/Pages/ControlSamples/RadioButtonList/Index.razor
@@ -0,0 +1,302 @@
+@page "/ControlSamples/RadioButtonList"
+@using BlazorWebFormsComponents.Enums
+
+<h2>RadioButtonList Component Samples</h2>
+
+<h3>Basic RadioButtonList with Static Items</h3>
+<RadioButtonList TItem="object" StaticItems="colorItems" @bind-SelectedValue="selectedColor" />
+<p>Selected: <strong>@selectedColor</strong></p>
+<pre><code>&lt;RadioButtonList TItem="object" StaticItems="colorItems" @@bind-SelectedValue="selectedColor" /&gt;
+
+@@code {
+    private string selectedColor = "";
+    private ListItemCollection colorItems = new() {
+        new ListItem("Red", "red"),
+        new ListItem("Green", "green"),
+        new ListItem("Blue", "blue")
+    };
+}</code></pre>
+
+<hr />
+
+<h3>Horizontal Layout (RepeatDirection.Horizontal)</h3>
+<RadioButtonList TItem="object" 
+                 StaticItems="sizeItems" 
+                 RepeatDirection="RepeatDirection.Horizontal"
+                 @bind-SelectedValue="selectedSize" />
+<p>Selected: <strong>@selectedSize</strong></p>
+<pre><code>&lt;RadioButtonList TItem="object" 
+                 StaticItems="sizeItems" 
+                 RepeatDirection="RepeatDirection.Horizontal"
+                 @@bind-SelectedValue="selectedSize" /&gt;</code></pre>
+
+<hr />
+
+<h3>Vertical Layout (RepeatDirection.Vertical - Default)</h3>
+<RadioButtonList TItem="object" 
+                 StaticItems="priorityItems" 
+                 RepeatDirection="RepeatDirection.Vertical"
+                 @bind-SelectedValue="selectedPriority" />
+<p>Selected: <strong>@selectedPriority</strong></p>
+<pre><code>&lt;RadioButtonList TItem="object" 
+                 StaticItems="priorityItems" 
+                 RepeatDirection="RepeatDirection.Vertical"
+                 @@bind-SelectedValue="selectedPriority" /&gt;</code></pre>
+
+<hr />
+
+<h3>Flow Layout (No Table)</h3>
+<RadioButtonList TItem="object" 
+                 StaticItems="fruitItems" 
+                 RepeatLayout="RepeatLayout.Flow"
+                 @bind-SelectedValue="selectedFruit" />
+<p>Selected: <strong>@selectedFruit</strong></p>
+<pre><code>&lt;RadioButtonList TItem="object" 
+                 StaticItems="fruitItems" 
+                 RepeatLayout="RepeatLayout.Flow"
+                 @@bind-SelectedValue="selectedFruit" /&gt;</code></pre>
+
+<hr />
+
+<h3>Unordered List Layout</h3>
+<RadioButtonList TItem="object" 
+                 StaticItems="animalItems" 
+                 RepeatLayout="RepeatLayout.UnorderedList"
+                 @bind-SelectedValue="selectedAnimal" />
+<p>Selected: <strong>@selectedAnimal</strong></p>
+<pre><code>&lt;RadioButtonList TItem="object" 
+                 StaticItems="animalItems" 
+                 RepeatLayout="RepeatLayout.UnorderedList"
+                 @@bind-SelectedValue="selectedAnimal" /&gt;</code></pre>
+
+<hr />
+
+<h3>Ordered List Layout</h3>
+<RadioButtonList TItem="object" 
+                 StaticItems="rankItems" 
+                 RepeatLayout="RepeatLayout.OrderedList"
+                 @bind-SelectedValue="selectedRank" />
+<p>Selected: <strong>@selectedRank</strong></p>
+<pre><code>&lt;RadioButtonList TItem="object" 
+                 StaticItems="rankItems" 
+                 RepeatLayout="RepeatLayout.OrderedList"
+                 @@bind-SelectedValue="selectedRank" /&gt;</code></pre>
+
+<hr />
+
+<h3>Text Align Left (Label before radio button)</h3>
+<RadioButtonList TItem="object" 
+                 StaticItems="yesNoItems" 
+                 TextAlign="TextAlign.Left"
+                 @bind-SelectedValue="yesNoValue" />
+<p>Selected: <strong>@yesNoValue</strong></p>
+<pre><code>&lt;RadioButtonList TItem="object" 
+                 StaticItems="yesNoItems" 
+                 TextAlign="TextAlign.Left"
+                 @@bind-SelectedValue="yesNoValue" /&gt;</code></pre>
+
+<hr />
+
+<h3>Text Align Right (Label after radio button - Default)</h3>
+<RadioButtonList TItem="object" 
+                 StaticItems="yesNoItems" 
+                 TextAlign="TextAlign.Right"
+                 @bind-SelectedValue="yesNoValue2" />
+<p>Selected: <strong>@yesNoValue2</strong></p>
+<pre><code>&lt;RadioButtonList TItem="object" 
+                 StaticItems="yesNoItems" 
+                 TextAlign="TextAlign.Right"
+                 @@bind-SelectedValue="yesNoValue2" /&gt;</code></pre>
+
+<hr />
+
+<h3>Data-Bound RadioButtonList</h3>
+<RadioButtonList TItem="Product"
+                 Items="products"
+                 DataTextField="Name"
+                 DataValueField="Id"
+                 @bind-SelectedValue="selectedProduct" />
+<p>Selected Product ID: <strong>@selectedProduct</strong></p>
+<pre><code>&lt;RadioButtonList TItem="Product"
+                 Items="products"
+                 DataTextField="Name"
+                 DataValueField="Id"
+                 @@bind-SelectedValue="selectedProduct" /&gt;
+
+@@code {
+    private List&lt;Product&gt; products = new() {
+        new Product { Id = "1", Name = "Widget" },
+        new Product { Id = "2", Name = "Gadget" }
+    };
+}</code></pre>
+
+<hr />
+
+<h3>With Styling</h3>
+<RadioButtonList TItem="object" 
+                 StaticItems="styledItems"
+                 BackColor="new WebColor(System.Drawing.Color.LightBlue)"
+                 ForeColor="new WebColor(System.Drawing.Color.DarkBlue)"
+                 BorderStyle="BorderStyle.Solid"
+                 BorderWidth="Unit.Pixel(1)"
+                 @bind-SelectedValue="styledValue" />
+<p>Selected: <strong>@styledValue</strong></p>
+<pre><code>&lt;RadioButtonList TItem="object" 
+                 StaticItems="styledItems"
+                 BackColor="new WebColor(System.Drawing.Color.LightBlue)"
+                 ForeColor="new WebColor(System.Drawing.Color.DarkBlue)"
+                 BorderStyle="BorderStyle.Solid"
+                 BorderWidth="Unit.Pixel(1)"
+                 @@bind-SelectedValue="styledValue" /&gt;</code></pre>
+
+<hr />
+
+<h3>Disabled Item in List</h3>
+<RadioButtonList TItem="object" StaticItems="disabledItems" @bind-SelectedValue="disabledSelection" />
+<p>Selected: <strong>@disabledSelection</strong></p>
+<pre><code>&lt;RadioButtonList TItem="object" StaticItems="disabledItems" @@bind-SelectedValue="disabledSelection" /&gt;
+
+@@code {
+    private ListItemCollection disabledItems = new() {
+        new ListItem("Available", "available"),
+        new ListItem("Unavailable", "unavailable") { Enabled = false },
+        new ListItem("Also Available", "also-available")
+    };
+}</code></pre>
+
+<hr />
+
+<h3>Enabled=false (Entire list disabled)</h3>
+<RadioButtonList TItem="object" 
+                 StaticItems="colorItems" 
+                 Enabled="false" 
+                 SelectedValue="green" />
+<p><em>(Entire RadioButtonList is disabled)</em></p>
+<pre><code>&lt;RadioButtonList TItem="object" 
+                 StaticItems="colorItems" 
+                 Enabled="false" 
+                 SelectedValue="green" /&gt;</code></pre>
+
+<hr />
+
+<h3>With Change Event</h3>
+<RadioButtonList TItem="object" 
+                 StaticItems="eventItems"
+                 @bind-SelectedValue="eventValue"
+                 OnSelectedIndexChanged="HandleSelectionChanged" />
+<p>Selection changed <strong>@changeCount</strong> times. Current: <strong>@eventValue</strong></p>
+<pre><code>&lt;RadioButtonList TItem="object" 
+                 StaticItems="eventItems"
+                 @@bind-SelectedValue="eventValue"
+                 OnSelectedIndexChanged="HandleSelectionChanged" /&gt;
+
+@@code {
+    private int changeCount = 0;
+    private void HandleSelectionChanged(ChangeEventArgs e) {
+        changeCount++;
+    }
+}</code></pre>
+
+@code {
+	private string selectedColor = "";
+	private string selectedSize = "";
+	private string selectedFruit = "";
+	private string selectedAnimal = "";
+	private string selectedPriority = "";
+	private string selectedRank = "";
+	private string yesNoValue = "";
+	private string yesNoValue2 = "";
+	private string selectedProduct = "";
+	private string styledValue = "";
+	private string disabledSelection = "";
+	private string eventValue = "";
+	private int changeCount = 0;
+
+	private ListItemCollection colorItems = new()
+	{
+		new ListItem("Red", "red"),
+		new ListItem("Green", "green"),
+		new ListItem("Blue", "blue")
+	};
+
+	private ListItemCollection sizeItems = new()
+	{
+		new ListItem("Small", "S"),
+		new ListItem("Medium", "M"),
+		new ListItem("Large", "L"),
+		new ListItem("X-Large", "XL")
+	};
+
+	private ListItemCollection fruitItems = new()
+	{
+		new ListItem("Apple", "apple"),
+		new ListItem("Banana", "banana"),
+		new ListItem("Cherry", "cherry")
+	};
+
+	private ListItemCollection animalItems = new()
+	{
+		new ListItem("Dog", "dog"),
+		new ListItem("Cat", "cat"),
+		new ListItem("Bird", "bird")
+	};
+
+	private ListItemCollection priorityItems = new()
+	{
+		new ListItem("High", "high"),
+		new ListItem("Medium", "medium"),
+		new ListItem("Low", "low")
+	};
+
+	private ListItemCollection rankItems = new()
+	{
+		new ListItem("First Place", "1"),
+		new ListItem("Second Place", "2"),
+		new ListItem("Third Place", "3")
+	};
+
+	private ListItemCollection yesNoItems = new()
+	{
+		new ListItem("Yes", "yes"),
+		new ListItem("No", "no")
+	};
+
+	private ListItemCollection styledItems = new()
+	{
+		new ListItem("Option A", "a"),
+		new ListItem("Option B", "b"),
+		new ListItem("Option C", "c")
+	};
+
+	private ListItemCollection disabledItems = new()
+	{
+		new ListItem("Available", "available"),
+		new ListItem("Unavailable (disabled)", "unavailable") { Enabled = false },
+		new ListItem("Also Available", "also-available")
+	};
+
+	private ListItemCollection eventItems = new()
+	{
+		new ListItem("First", "1"),
+		new ListItem("Second", "2"),
+		new ListItem("Third", "3")
+	};
+
+	private List<Product> products = new()
+	{
+		new Product { Id = "1", Name = "Widget" },
+		new Product { Id = "2", Name = "Gadget" },
+		new Product { Id = "3", Name = "Gizmo" }
+	};
+
+	private void HandleSelectionChanged(ChangeEventArgs e)
+	{
+		changeCount++;
+	}
+
+	public class Product
+	{
+		public string Id { get; set; } = "";
+		public string Name { get; set; } = "";
+	}
+}
diff --git a/samples/AfterBlazorServerSide/Pages/ControlSamples/RadioButton/Index.razor b/samples/AfterBlazorServerSide/Pages/ControlSamples/RadioButton/Index.razor
index f00315f56..a10ac9f90 100644
--- a/samples/AfterBlazorServerSide/Pages/ControlSamples/RadioButton/Index.razor
+++ b/samples/AfterBlazorServerSide/Pages/ControlSamples/RadioButton/Index.razor
@@ -1,4 +1,5 @@
 @page "/ControlSamples/RadioButton"
+@using BlazorWebFormsComponents
 
 <h1>RadioButton Samples</h1>
 
@@ -9,13 +10,13 @@
 <hr />
 
 <h2>Grouped RadioButtons (Size Selection)</h2>
-<RadioButton Text="Small" GroupName="Size" Checked="@(selectedSize == "Small")" 
+<RadioButton Text="Small" GroupName="Size" Checked="@(selectedSize == "Small")"
              OnCheckedChanged="@(() => OnSizeChange("Small"))" />
 <br />
-<RadioButton Text="Medium" GroupName="Size" Checked="@(selectedSize == "Medium")" 
+<RadioButton Text="Medium" GroupName="Size" Checked="@(selectedSize == "Medium")"
              OnCheckedChanged="@(() => OnSizeChange("Medium"))" />
 <br />
-<RadioButton Text="Large" GroupName="Size" Checked="@(selectedSize == "Large")" 
+<RadioButton Text="Large" GroupName="Size" Checked="@(selectedSize == "Large")"
              OnCheckedChanged="@(() => OnSizeChange("Large"))" />
 <p>Selected Size: @selectedSize</p>
 
@@ -24,7 +25,7 @@
 <h2>Text Alignment</h2>
 <RadioButton Text="Label on right (default)" GroupName="Align" />
 <br />
-<RadioButton Text="Label on left" GroupName="Align" TextAlign="Enums.TextAlign.Left" />
+<RadioButton Text="Label on left" GroupName="Align" TextAlign="@BlazorWebFormsComponents.Enums.TextAlign.Left" />
 
 <hr />
 
@@ -36,7 +37,7 @@
 <hr />
 
 <h2>Styled RadioButton</h2>
-<RadioButton Text="Custom styled" CssClass="custom-radio" BackColor="LightPink" GroupName="Styled" />
+<RadioButton Text="Custom styled" CssClass="custom-radio" BackColor="@BlazorWebFormsComponents.WebColor.LightPink" GroupName="Styled" />
 
 <hr />
 
@@ -50,18 +51,18 @@
 <h2>Interactive Example - Payment Method</h2>
 <div style="padding: 20px; background-color: #f5f5f5;">
     <h3>Select Payment Method:</h3>
-    <RadioButton Text="Credit Card" GroupName="Payment" Checked="@(paymentMethod == "Credit")" 
+    <RadioButton Text="Credit Card" GroupName="Payment" Checked="@(paymentMethod == "Credit")"
                  OnCheckedChanged="@(() => paymentMethod = "Credit")" />
     <br />
-    <RadioButton Text="Debit Card" GroupName="Payment" Checked="@(paymentMethod == "Debit")" 
+    <RadioButton Text="Debit Card" GroupName="Payment" Checked="@(paymentMethod == "Debit")"
                  OnCheckedChanged="@(() => paymentMethod = "Debit")" />
     <br />
-    <RadioButton Text="PayPal" GroupName="Payment" Checked="@(paymentMethod == "PayPal")" 
+    <RadioButton Text="PayPal" GroupName="Payment" Checked="@(paymentMethod == "PayPal")"
                  OnCheckedChanged="@(() => paymentMethod = "PayPal")" />
     <br />
-    <RadioButton Text="Bank Transfer" GroupName="Payment" Checked="@(paymentMethod == "Bank")" 
+    <RadioButton Text="Bank Transfer" GroupName="Payment" Checked="@(paymentMethod == "Bank")"
                  OnCheckedChanged="@(() => paymentMethod = "Bank")" />
-    
+
     @if (!string.IsNullOrEmpty(paymentMethod))
     {
         <p style="margin-top: 10px; color: green; font-weight: bold;">
diff --git a/samples/AfterBlazorServerSide/Pages/ControlSamples/TextBox/Default.razor b/samples/AfterBlazorServerSide/Pages/ControlSamples/TextBox/Default.razor
index ebee1de38..62fb3b724 100644
--- a/samples/AfterBlazorServerSide/Pages/ControlSamples/TextBox/Default.razor
+++ b/samples/AfterBlazorServerSide/Pages/ControlSamples/TextBox/Default.razor
@@ -1,61 +1,127 @@
 @page "/ControlSamples/TextBox"
+@using BlazorWebFormsComponents
 @using BlazorWebFormsComponents.Enums
 
 <h1>TextBox Samples</h1>
 
-<h2>Single Line TextBox</h2>
-<TextBox Text="@singleText" CssClass="form-control" />
-<p>Value: @singleText</p>
+<h2>Single Line TextBox (Default)</h2>
+<TextBox Text="Hello World" CssClass="form-control" Width="Unit.Pixel(300)" />
+<pre><code>&lt;TextBox Text="Hello World" CssClass="form-control" Width="Unit.Pixel(300)" /&gt;</code></pre>
+
+<hr />
+
+<h2>Editable TextBox (ReadOnly=false)</h2>
+<TextBox Text="You can edit this text" ReadOnly="false" CssClass="form-control" Width="Unit.Pixel(300)" />
+<pre><code>&lt;TextBox Text="You can edit this text" ReadOnly="false" CssClass="form-control" /&gt;</code></pre>
+
+<hr />
+
+<h2>ReadOnly TextBox (ReadOnly=true)</h2>
+<TextBox Text="Cannot edit this text" ReadOnly="true" CssClass="form-control" Width="Unit.Pixel(300)" />
+<pre><code>&lt;TextBox Text="Cannot edit this text" ReadOnly="true" CssClass="form-control" /&gt;</code></pre>
+
+<hr />
 
 <h2>Password TextBox</h2>
-<TextBox TextMode="TextBoxMode.Password" Placeholder="Enter password" />
+<TextBox TextMode="TextBoxMode.Password" Placeholder="Enter password" CssClass="form-control" Width="Unit.Pixel(300)" />
+<pre><code>&lt;TextBox TextMode="TextBoxMode.Password" Placeholder="Enter password" /&gt;</code></pre>
+
+<hr />
 
 <h2>Email TextBox</h2>
-<TextBox TextMode="TextBoxMode.Email" Placeholder="Enter email" />
+<TextBox TextMode="TextBoxMode.Email" Placeholder="Enter email" CssClass="form-control" Width="Unit.Pixel(300)" />
+<pre><code>&lt;TextBox TextMode="TextBoxMode.Email" Placeholder="Enter email" /&gt;</code></pre>
+
+<hr />
 
 <h2>Number TextBox</h2>
-<TextBox TextMode="TextBoxMode.Number" Placeholder="Enter number" />
+<TextBox TextMode="TextBoxMode.Number" Placeholder="Enter number" CssClass="form-control" Width="Unit.Pixel(200)" />
+<pre><code>&lt;TextBox TextMode="TextBoxMode.Number" Placeholder="Enter number" /&gt;</code></pre>
+
+<hr />
 
 <h2>MultiLine TextBox</h2>
 <TextBox TextMode="TextBoxMode.MultiLine" Rows="5" Columns="40" Text="@multiLineText" />
-<p>Value: @multiLineText</p>
+<pre><code>&lt;TextBox TextMode="TextBoxMode.MultiLine" Rows="5" Columns="40" Text="Line 1..." /&gt;</code></pre>
+
+<hr />
 
-<h2>ReadOnly TextBox</h2>
-<TextBox Text="Cannot edit this" ReadOnly="true" CssClass="form-control" />
+<h2>Enabled TextBox (Enabled=true - Default)</h2>
+<TextBox Text="Enabled textbox" Enabled="true" CssClass="form-control" Width="Unit.Pixel(300)" />
+<pre><code>&lt;TextBox Text="Enabled textbox" Enabled="true" /&gt;</code></pre>
 
-<h2>Disabled TextBox</h2>
-<TextBox Text="Disabled textbox" Enabled="false" CssClass="form-control" />
+<hr />
 
-<h2>With MaxLength (10 characters max)</h2>
-<TextBox MaxLength="10" Placeholder="Max 10 chars" CssClass="form-control" />
+<h2>Disabled TextBox (Enabled=false)</h2>
+<TextBox Text="Disabled textbox" Enabled="false" CssClass="form-control" Width="Unit.Pixel(300)" />
+<pre><code>&lt;TextBox Text="Disabled textbox" Enabled="false" /&gt;</code></pre>
 
-<h2>With Styles</h2>
-<TextBox Text="Styled textbox" 
-         BackColor="WebColor.LightYellow" 
+<hr />
+
+<h2>MaxLength (10 characters max)</h2>
+<TextBox MaxLength="10" Placeholder="Max 10 chars" CssClass="form-control" Width="Unit.Pixel(200)" />
+<pre><code>&lt;TextBox MaxLength="10" Placeholder="Max 10 chars" /&gt;</code></pre>
+
+<hr />
+
+<h2>Styled TextBox</h2>
+<TextBox Text="Styled textbox"
+         BackColor="WebColor.LightYellow"
+         ForeColor="WebColor.Navy"
+         BorderColor="WebColor.Blue"
+         BorderWidth="Unit.Pixel(2)"
+         BorderStyle="BorderStyle.Solid"
+         Width="Unit.Pixel(250)" />
+<pre><code>&lt;TextBox Text="Styled textbox"
+         BackColor="WebColor.LightYellow"
          ForeColor="WebColor.Navy"
-         BorderColor="WebColor.Blue" 
-         BorderWidth="Unit.Pixel(2)" 
+         BorderColor="WebColor.Blue"
+         BorderWidth="Unit.Pixel(2)"
          BorderStyle="BorderStyle.Solid"
-         Width="Unit.Pixel(200)" />
+         Width="Unit.Pixel(250)" /&gt;</code></pre>
+
+<hr />
 
 <h2>Date Picker</h2>
-<TextBox TextMode="TextBoxMode.Date" />
+<TextBox TextMode="TextBoxMode.Date" CssClass="form-control" Width="Unit.Pixel(200)" />
+<pre><code>&lt;TextBox TextMode="TextBoxMode.Date" /&gt;</code></pre>
+
+<hr />
 
 <h2>URL Input</h2>
-<TextBox TextMode="TextBoxMode.Url" Placeholder="Enter URL" />
+<TextBox TextMode="TextBoxMode.Url" Placeholder="Enter URL" CssClass="form-control" Width="Unit.Pixel(300)" />
+<pre><code>&lt;TextBox TextMode="TextBoxMode.Url" Placeholder="Enter URL" /&gt;</code></pre>
 
-@code {
-    private string singleText = "Default Text";
-    private string multiLineText = "Line 1\nLine 2\nLine 3";
-}
+<hr />
+
+<h2>Phone Input</h2>
+<TextBox TextMode="TextBoxMode.Phone" Placeholder="Enter phone number" CssClass="form-control" Width="Unit.Pixel(200)" />
+<pre><code>&lt;TextBox TextMode="TextBoxMode.Phone" Placeholder="Enter phone number" /&gt;</code></pre>
 
 <hr />
 
-<p>Code:</p>
-<code>
-&lt;TextBox Text="@@singleText" CssClass="form-control" /&gt;<br />
-&lt;TextBox TextMode="TextBoxMode.Password" Placeholder="Enter password" /&gt;<br />
-&lt;TextBox TextMode="TextBoxMode.MultiLine" Rows="5" Columns="40" Text="@@multiLineText" /&gt;<br />
-&lt;TextBox Text="Cannot edit this" ReadOnly="true" CssClass="form-control" /&gt;<br />
-&lt;TextBox Text="Disabled textbox" Enabled="false" CssClass="form-control" /&gt;
-</code>
+<h2>Search Input</h2>
+<TextBox TextMode="TextBoxMode.Search" Placeholder="Search..." CssClass="form-control" Width="Unit.Pixel(250)" />
+<pre><code>&lt;TextBox TextMode="TextBoxMode.Search" Placeholder="Search..." /&gt;</code></pre>
+
+<hr />
+
+<h2>Color Picker</h2>
+<TextBox TextMode="TextBoxMode.Color" Width="Unit.Pixel(60)" />
+<pre><code>&lt;TextBox TextMode="TextBoxMode.Color" /&gt;</code></pre>
+
+<hr />
+
+<h2>With Placeholder Text</h2>
+<TextBox Placeholder="Enter your name here" CssClass="form-control" Width="Unit.Pixel(300)" />
+<pre><code>&lt;TextBox Placeholder="Enter your name here" /&gt;</code></pre>
+
+<hr />
+
+<h2>With Columns (Size)</h2>
+<TextBox Columns="20" Placeholder="20 columns wide" />
+<pre><code>&lt;TextBox Columns="20" Placeholder="20 columns wide" /&gt;</code></pre>
+
+@code {
+    private string multiLineText = "Line 1\nLine 2\nLine 3";
+}
diff --git a/samples/AfterBlazorServerSide/Program.cs b/samples/AfterBlazorServerSide/Program.cs
index 5e8d59709..5e1584be8 100644
--- a/samples/AfterBlazorServerSide/Program.cs
+++ b/samples/AfterBlazorServerSide/Program.cs
@@ -1,6 +1,6 @@
+global using BlazorWebFormsComponents;
 using AfterBlazorServerSide;
 using AfterBlazorServerSide.Components;
-using BlazorWebFormsComponents;
 using Microsoft.AspNetCore.Components.Authorization;
 using System.Reflection;
 
diff --git a/samples/AfterBlazorServerSide/_Imports.razor b/samples/AfterBlazorServerSide/_Imports.razor
index d9caa78ca..1fc4e0fd9 100644
--- a/samples/AfterBlazorServerSide/_Imports.razor
+++ b/samples/AfterBlazorServerSide/_Imports.razor
@@ -5,6 +5,7 @@
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.AspNetCore.Components.Web
 @using Microsoft.JSInterop
+@using BlazorWebFormsComponents
 @using AfterBlazorServerSide
 @using AfterBlazorServerSide.Components
 @using AfterBlazorServerSide.Components.Layout

From 8dda188ad31cd75134a69858bd784408fcdf9b6c Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 29 Jan 2026 14:04:11 -0500
Subject: [PATCH 2/2] Fix AdRotator deployment failure - add
 CopyToOutputDirectory for Ads.xml and integration tests (#290)

Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Jeffrey T. Fritz <csharpfritz@users.noreply.github.com>
Co-authored-by: hishamco <hishamco_2007@yahoo.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
---
 .github/skills/component-development/SKILL.md |  54 +++-
 .github/skills/documentation/SKILL.md         |   8 +-
 .github/workflows/demo.yml                    |  63 ++++
 .../AfterBlazorClientSide.csproj              |   3 +
 .../ControlSampleTests.cs                     | 100 +++++-
 .../InteractiveComponentTests.cs              | 296 ++++++++++++++++++
 .../AfterBlazorServerSide.csproj              |   4 +-
 .../wwwroot/css/site.css                      |   3 +-
 .../AdRotator/DeploymentVerification.razor    |  68 ++++
 9 files changed, 577 insertions(+), 22 deletions(-)
 create mode 100644 .github/workflows/demo.yml
 create mode 100644 src/BlazorWebFormsComponents.Test/AdRotator/DeploymentVerification.razor

diff --git a/.github/skills/component-development/SKILL.md b/.github/skills/component-development/SKILL.md
index 8afe75da6..331d5381f 100644
--- a/.github/skills/component-development/SKILL.md
+++ b/.github/skills/component-development/SKILL.md
@@ -25,9 +25,13 @@ This skill covers creating new Blazor components that emulate ASP.NET Web Forms
    - `BaseStyledComponent` - Components with styling
    - `DataBoundComponent<T>` - Data-bound components
 5. **Add unit tests** in `src/BlazorWebFormsComponents.Test/{ComponentName}/`
-6. **Add sample page** in `samples/AfterBlazorServerSide/Pages/ControlSamples/`
-7. **Create documentation** in `docs/{Category}/{ComponentName}.md`
-8. **Update `mkdocs.yml`** and `README.md`
+6. **Add sample page** in `samples/AfterBlazorServerSide/Components/Pages/ControlSamples/{ComponentName}/`
+7. **Add integration tests** using Playwright in `samples/AfterBlazorServerSide.Tests/`
+8. **Create documentation** in `docs/{Category}/{ComponentName}.md`
+9. **Update navigation:**
+   - Add to `samples/AfterBlazorServerSide/Components/Layout/NavMenu.razor` (TreeView)
+   - Add to `samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor` (home page catalog)
+   - Update `mkdocs.yml` and `README.md`
 
 ### Base Class Selection
 
@@ -54,3 +58,47 @@ Prefix with `On`:
 - `OnCommand` for command events
 - `OnSelectedIndexChanged` for selection changes
 - `OnDataBinding` for data binding events
+
+### Integration Testing Requirements
+
+Every component must have integration tests in `samples/AfterBlazorServerSide.Tests/` using Playwright:
+
+1. **Page load test** in `ControlSampleTests.cs`:
+   - Add route to the appropriate `[Theory]` test (EditorControl, DataControl, etc.)
+   - Verifies page loads without console errors or page errors
+
+2. **Interactive test** in `InteractiveComponentTests.cs` (for interactive components):
+   - Test user interactions (clicks, input, selection changes)
+   - Verify component responds correctly to user actions
+   - Assert no console errors during interaction
+
+Example page load test entry:
+```csharp
+[Theory]
+[InlineData("/ControlSamples/YourComponent")]
+public async Task EditorControl_Loads_WithoutErrors(string path)
+```
+
+Example interactive test:
+```csharp
+[Fact]
+public async Task YourComponent_Interaction_Works()
+{
+    var page = await _fixture.NewPageAsync();
+    try
+    {
+        await page.GotoAsync($"{_fixture.BaseUrl}/ControlSamples/YourComponent");
+        // Test interactions...
+        // Assert expected behavior...
+    }
+    finally
+    {
+        await page.CloseAsync();
+    }
+}
+```
+
+Run integration tests with:
+```bash
+dotnet test samples/AfterBlazorServerSide.Tests
+```
diff --git a/.github/skills/documentation/SKILL.md b/.github/skills/documentation/SKILL.md
index 179d8d0c6..490ba961c 100644
--- a/.github/skills/documentation/SKILL.md
+++ b/.github/skills/documentation/SKILL.md
@@ -689,7 +689,6 @@ samples/AfterBlazorServerSide/Components/Pages/ControlSamples/Label/Index.razor
 # 6. Update README.md
 - [Label](docs/EditorControls/Label.md)
 ```
-
 ## Quality Checklist
 
 Before submitting documentation:
@@ -704,6 +703,13 @@ Before submitting documentation:
 - [ ] Spell-checked
 
 Before submitting sample pages:
+- [ ] Includes both demo and source code sections
+- [ ] Code block exactly matches the demo
+- [ ] HTML entities properly encoded in code block
+- [ ] `@` symbols doubled in code block
+- [ ] Includes complete `@code` block with all handlers
+- [ ] Brief description explains what sample demonstrates
+- [ ] Sample is accessible from navigation or component list
 - [ ] Created in correct folder: `ControlSamples/[ComponentName]/`
 - [ ] Follows naming convention (Index.razor for main sample)
 - [ ] Includes `@page` directive with correct route
diff --git a/.github/workflows/demo.yml b/.github/workflows/demo.yml
new file mode 100644
index 000000000..eac70e9f6
--- /dev/null
+++ b/.github/workflows/demo.yml
@@ -0,0 +1,63 @@
+name: Build Demo Sites
+
+on:
+  push:
+    branches:
+      - 'main'
+      - 'v*'
+    paths:
+      - 'src/**'
+      - 'samples/**'
+      - '.github/workflows/demo.yml'
+  pull_request:
+    branches:
+      - 'main'
+      - 'v*'
+    paths:
+      - 'src/**'
+      - 'samples/**'
+      - '.github/workflows/demo.yml'
+  workflow_run:
+    workflows: ["Integration Tests"]
+    types:
+      - completed
+
+jobs:
+  build-demos:
+    runs-on: ubuntu-latest
+    # Only run if integration tests passed (or if triggered directly without workflow_run)
+    if: ${{ github.event_name != 'workflow_run' || github.event.workflow_run.conclusion == 'success' }}
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: '10.0.x'
+
+      - name: Restore dependencies
+        run: |
+          dotnet restore samples/AfterBlazorServerSide/AfterBlazorServerSide.csproj
+          dotnet restore samples/AfterBlazorClientSide/AfterBlazorClientSide.csproj
+
+      - name: Publish Server-Side Demo
+        run: dotnet publish samples/AfterBlazorServerSide/AfterBlazorServerSide.csproj --configuration Release --output ./publish/server-side
+
+      - name: Publish Client-Side Demo (WebAssembly)
+        run: dotnet publish samples/AfterBlazorClientSide/AfterBlazorClientSide.csproj --configuration Release --output ./publish/client-side
+
+      - name: Upload Server-Side Demo artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: demo-server-side
+          path: ./publish/server-side
+
+      - name: Upload Client-Side Demo artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: demo-client-side
+          path: ./publish/client-side
diff --git a/samples/AfterBlazorClientSide/AfterBlazorClientSide.csproj b/samples/AfterBlazorClientSide/AfterBlazorClientSide.csproj
index c987d85bf..505d347b8 100644
--- a/samples/AfterBlazorClientSide/AfterBlazorClientSide.csproj
+++ b/samples/AfterBlazorClientSide/AfterBlazorClientSide.csproj
@@ -15,6 +15,9 @@
     <Content Include="..\AfterBlazorServerSide\Components\Layout\**">
       <Link>Layout\%(RecursiveDir)%(Filename)%(Extension)</Link>
     </Content>
+    <Content Include="..\AfterBlazorServerSide\Ads.xml" Link="wwwroot\Ads.xml">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
   </ItemGroup>
 
   <ItemGroup>
diff --git a/samples/AfterBlazorServerSide.Tests/ControlSampleTests.cs b/samples/AfterBlazorServerSide.Tests/ControlSampleTests.cs
index a0a6675f7..b6b9be0fa 100644
--- a/samples/AfterBlazorServerSide.Tests/ControlSampleTests.cs
+++ b/samples/AfterBlazorServerSide.Tests/ControlSampleTests.cs
@@ -16,10 +16,17 @@ public ControlSampleTests(PlaywrightFixture fixture)
     [Theory]
     [InlineData("/ControlSamples/Button")]
     [InlineData("/ControlSamples/CheckBox")]
+    [InlineData("/ControlSamples/CheckBox/Events")]
+    [InlineData("/ControlSamples/CheckBox/Style")]
     [InlineData("/ControlSamples/HyperLink")]
     [InlineData("/ControlSamples/LinkButton")]
     [InlineData("/ControlSamples/Literal")]
     [InlineData("/ControlSamples/DropDownList")]
+    [InlineData("/ControlSamples/Panel")]
+    [InlineData("/ControlSamples/PlaceHolder")]
+    [InlineData("/ControlSamples/RadioButton")]
+    [InlineData("/ControlSamples/RadioButtonList")]
+    [InlineData("/ControlSamples/TextBox")]
     public async Task EditorControl_Loads_WithoutErrors(string path)
     {
         await VerifyPageLoadsWithoutErrors(path);
@@ -49,6 +56,16 @@ public async Task NavigationControl_Loads_WithoutErrors(string path)
         await VerifyPageLoadsWithoutErrors(path);
     }
 
+    // Menu component tests - Menu has known JS interop requirements that may produce console errors
+    // Testing separately to verify the page loads and renders content
+    [Theory]
+    [InlineData("/ControlSamples/Menu")]
+    [InlineData("/ControlSamples/Menu/DatabindingSitemap")]
+    public async Task MenuControl_Loads_AndRendersContent(string path)
+    {
+        await VerifyMenuPageLoads(path);
+    }
+
     // Validation Controls
     [Theory]
     [InlineData("/ControlSamples/RequiredFieldValidator")]
@@ -77,6 +94,53 @@ public async Task LoginControl_Loads_WithoutErrors(string path)
     [Theory]
     [InlineData("/ControlSamples/AdRotator")]
     public async Task OtherControl_Loads_WithoutErrors(string path)
+    {
+        await VerifyPageLoadsWithoutErrors(path);
+    }
+
+    /// <summary>
+    /// Validates that AdRotator displays an ad with the correct attributes.
+    /// This specifically tests that Ads.xml is properly deployed and accessible.
+    /// </summary>
+    [Fact]
+    public async Task AdRotator_DisplaysAd_WithCorrectAttributes()
+    {
+        // Arrange
+        var page = await _fixture.NewPageAsync();
+
+        try
+        {
+            // Act
+            var response = await page.GotoAsync($"{_fixture.BaseUrl}/ControlSamples/AdRotator", new PageGotoOptions
+            {
+                WaitUntil = WaitUntilState.NetworkIdle,
+                Timeout = 30000
+            });
+
+            // Assert - Page loads successfully
+            Assert.NotNull(response);
+            Assert.True(response.Ok, $"Page failed to load with status: {response.Status}");
+
+            // Assert - AdRotator component rendered (look for images from Ads.xml)
+            // The AdRotator renders as: <a href="..."><img src="/img/CSharp.png" OR "/img/VB.png" alt="..." /></a>
+            // Look for the specific image sources that come from Ads.xml
+            var adImage = await page.QuerySelectorAsync("img[src='/img/CSharp.png'], img[src='/img/VB.png']");
+            Assert.NotNull(adImage);
+            Assert.True(await adImage.IsVisibleAsync(), "Ad image should be visible");
+            
+            // Verify alt text is one of the expected values from Ads.xml
+            var altText = await adImage.GetAttributeAsync("alt");
+            Assert.NotNull(altText);
+            Assert.NotEmpty(altText);
+            Assert.Contains(altText, new[] { "CSharp", "Visual Basic" });
+        }
+        finally
+        {
+            await page.CloseAsync();
+        }
+    }
+
+    private async Task VerifyPageLoadsWithoutErrors(string path)
     {
         // Arrange
         var page = await _fixture.NewPageAsync();
@@ -105,11 +169,11 @@ public async Task OtherControl_Loads_WithoutErrors(string path)
                 Timeout = 30000
             });
 
-            // Assert - AdRotator may have issues with file loading, so we just verify page loads
+            // Assert
             Assert.NotNull(response);
-            // Note: AdRotator may return 500 if Ads.xml is not found in production, but that's a known limitation
-            Assert.True(response.Ok || response.Status == 500, 
-                $"Page {path} failed to load with status: {response.Status}");
+            Assert.True(response.Ok, $"Page {path} failed to load with status: {response.Status}");
+            Assert.Empty(consoleErrors);
+            Assert.Empty(pageErrors);
         }
         finally
         {
@@ -117,21 +181,17 @@ public async Task OtherControl_Loads_WithoutErrors(string path)
         }
     }
 
-    private async Task VerifyPageLoadsWithoutErrors(string path)
+    /// <summary>
+    /// Verifies Menu pages load and render content. Menu component has known JS interop 
+    /// requirements (bwfc.Page.AddScriptElement) that may produce console errors when
+    /// the JavaScript setup is not configured, but the page should still render.
+    /// </summary>
+    private async Task VerifyMenuPageLoads(string path)
     {
         // Arrange
         var page = await _fixture.NewPageAsync();
-        var consoleErrors = new List<string>();
         var pageErrors = new List<string>();
 
-        page.Console += (_, msg) =>
-        {
-            if (msg.Type == "error")
-            {
-                consoleErrors.Add($"{path}: {msg.Text}");
-            }
-        };
-
         page.PageError += (_, error) =>
         {
             pageErrors.Add($"{path}: {error}");
@@ -146,10 +206,18 @@ private async Task VerifyPageLoadsWithoutErrors(string path)
                 Timeout = 30000
             });
 
-            // Assert
+            // Assert - Page loads successfully
             Assert.NotNull(response);
             Assert.True(response.Ok, $"Page {path} failed to load with status: {response.Status}");
-            Assert.Empty(consoleErrors);
+            
+            // Assert - Page renders menu content (tables, links, or list items)
+            var menuContent = await page.Locator("table, a, li, td").AllAsync();
+            Assert.NotEmpty(menuContent);
+            
+            // Note: We don't check console errors for Menu pages because the Menu component
+            // requires JavaScript setup (bwfc.Page.AddScriptElement) that may not be configured
+            // in all environments. The important thing is that the page renders.
+            
             Assert.Empty(pageErrors);
         }
         finally
diff --git a/samples/AfterBlazorServerSide.Tests/InteractiveComponentTests.cs b/samples/AfterBlazorServerSide.Tests/InteractiveComponentTests.cs
index 90b1f32b3..5f59b60f4 100644
--- a/samples/AfterBlazorServerSide.Tests/InteractiveComponentTests.cs
+++ b/samples/AfterBlazorServerSide.Tests/InteractiveComponentTests.cs
@@ -530,4 +530,300 @@ public async Task Login_FormElements_Present()
             await page.CloseAsync();
         }
     }
+
+    [Fact]
+    public async Task Panel_Renders_WithContent()
+    {
+        // Arrange
+        var page = await _fixture.NewPageAsync();
+        var consoleErrors = new List<string>();
+        
+        page.Console += (_, msg) =>
+        {
+            if (msg.Type == "error")
+            {
+                consoleErrors.Add(msg.Text);
+            }
+        };
+
+        try
+        {
+            // Act
+            await page.GotoAsync($"{_fixture.BaseUrl}/ControlSamples/Panel", new PageGotoOptions
+            {
+                WaitUntil = WaitUntilState.NetworkIdle
+            });
+
+            // Verify Panel renders as div elements
+            var divPanels = await page.Locator("div").AllAsync();
+            Assert.NotEmpty(divPanels);
+
+            // Verify fieldset for GroupingText panels
+            var fieldsets = await page.Locator("fieldset").AllAsync();
+            Assert.NotEmpty(fieldsets);
+
+            // Verify legend inside fieldset
+            var legends = await page.Locator("fieldset legend").AllAsync();
+            Assert.NotEmpty(legends);
+
+            // Assert no console errors
+            Assert.Empty(consoleErrors);
+        }
+        finally
+        {
+            await page.CloseAsync();
+        }
+    }
+
+    [Fact]
+    public async Task PlaceHolder_VisibilityToggle_Works()
+    {
+        // Arrange
+        var page = await _fixture.NewPageAsync();
+        var consoleErrors = new List<string>();
+        
+        page.Console += (_, msg) =>
+        {
+            if (msg.Type == "error")
+            {
+                consoleErrors.Add(msg.Text);
+            }
+        };
+
+        try
+        {
+            // Act
+            await page.GotoAsync($"{_fixture.BaseUrl}/ControlSamples/PlaceHolder", new PageGotoOptions
+            {
+                WaitUntil = WaitUntilState.NetworkIdle
+            });
+
+            // Find toggle button
+            var toggleButton = page.Locator("button:has-text('Hide Content'), button:has-text('Show Content')").First;
+            Assert.NotNull(toggleButton);
+
+            // Get initial visibility state by checking button text
+            var initialButtonText = await toggleButton.TextContentAsync();
+
+            // Click to toggle
+            await toggleButton.ClickAsync();
+            await page.WaitForTimeoutAsync(300);
+
+            // Verify button text changed (indicating toggle worked)
+            var newButtonText = await toggleButton.TextContentAsync();
+            Assert.NotEqual(initialButtonText, newButtonText);
+
+            // Assert no console errors
+            Assert.Empty(consoleErrors);
+        }
+        finally
+        {
+            await page.CloseAsync();
+        }
+    }
+
+    [Fact]
+    public async Task RadioButtonList_Selection_Works()
+    {
+        // Arrange
+        var page = await _fixture.NewPageAsync();
+        var consoleErrors = new List<string>();
+        
+        page.Console += (_, msg) =>
+        {
+            if (msg.Type == "error")
+            {
+                consoleErrors.Add(msg.Text);
+            }
+        };
+
+        try
+        {
+            // Act
+            await page.GotoAsync($"{_fixture.BaseUrl}/ControlSamples/RadioButtonList", new PageGotoOptions
+            {
+                WaitUntil = WaitUntilState.NetworkIdle
+            });
+
+            // Find radio buttons
+            var radioButtons = await page.Locator("input[type='radio']").AllAsync();
+            Assert.NotEmpty(radioButtons);
+
+            // Click a radio button
+            var firstRadio = page.Locator("input[type='radio']").First;
+            await firstRadio.ClickAsync();
+            await page.WaitForTimeoutAsync(300);
+
+            // Verify it's checked
+            var isChecked = await firstRadio.IsCheckedAsync();
+            Assert.True(isChecked, "Radio button should be checked after clicking");
+
+            // Assert no console errors
+            Assert.Empty(consoleErrors);
+        }
+        finally
+        {
+            await page.CloseAsync();
+        }
+    }
+
+    [Fact]
+    public async Task RadioButton_Toggle_Works()
+    {
+        // Arrange
+        var page = await _fixture.NewPageAsync();
+        var consoleErrors = new List<string>();
+        
+        page.Console += (_, msg) =>
+        {
+            if (msg.Type == "error")
+            {
+                consoleErrors.Add(msg.Text);
+            }
+        };
+
+        try
+        {
+            // Act
+            await page.GotoAsync($"{_fixture.BaseUrl}/ControlSamples/RadioButton", new PageGotoOptions
+            {
+                WaitUntil = WaitUntilState.NetworkIdle
+            });
+
+            // Find radio buttons
+            var radioButtons = await page.Locator("input[type='radio']").AllAsync();
+            Assert.NotEmpty(radioButtons);
+
+            // Click a radio button
+            var firstRadio = page.Locator("input[type='radio']").First;
+            await firstRadio.ClickAsync();
+            await page.WaitForTimeoutAsync(300);
+
+            // Verify it's checked
+            var isChecked = await firstRadio.IsCheckedAsync();
+            Assert.True(isChecked, "Radio button should be checked after clicking");
+
+            // Assert no console errors
+            Assert.Empty(consoleErrors);
+        }
+        finally
+        {
+            await page.CloseAsync();
+        }
+    }
+
+    [Fact]
+    public async Task TextBox_Input_Works()
+    {
+        // Arrange
+        var page = await _fixture.NewPageAsync();
+        var consoleErrors = new List<string>();
+        
+        page.Console += (_, msg) =>
+        {
+            if (msg.Type == "error")
+            {
+                consoleErrors.Add(msg.Text);
+            }
+        };
+
+        try
+        {
+            // Act
+            await page.GotoAsync($"{_fixture.BaseUrl}/ControlSamples/TextBox", new PageGotoOptions
+            {
+                WaitUntil = WaitUntilState.NetworkIdle
+            });
+
+            // Find text inputs (not readonly)
+            var textInputs = await page.Locator("input[type='text']:not([readonly])").AllAsync();
+            Assert.NotEmpty(textInputs);
+
+            // Fill a text input
+            var firstInput = page.Locator("input[type='text']:not([readonly])").First;
+            await firstInput.FillAsync("Test Input");
+            
+            // Verify the value was set
+            var value = await firstInput.InputValueAsync();
+            Assert.Equal("Test Input", value);
+
+            // Verify readonly inputs exist
+            var readonlyInputs = await page.Locator("input[readonly]").AllAsync();
+            Assert.NotEmpty(readonlyInputs);
+
+            // Assert no console errors
+            Assert.Empty(consoleErrors);
+        }
+        finally
+        {
+            await page.CloseAsync();
+        }
+    }
+
+    [Fact]
+    public async Task TextBox_MultiLine_Works()
+    {
+        // Arrange
+        var page = await _fixture.NewPageAsync();
+        var consoleErrors = new List<string>();
+        
+        page.Console += (_, msg) =>
+        {
+            if (msg.Type == "error")
+            {
+                consoleErrors.Add(msg.Text);
+            }
+        };
+
+        try
+        {
+            // Act
+            await page.GotoAsync($"{_fixture.BaseUrl}/ControlSamples/TextBox", new PageGotoOptions
+            {
+                WaitUntil = WaitUntilState.NetworkIdle
+            });
+
+            // Verify textarea elements exist (multiline textbox)
+            var textareas = await page.Locator("textarea").AllAsync();
+            Assert.NotEmpty(textareas);
+
+            // Assert no console errors
+            Assert.Empty(consoleErrors);
+        }
+        finally
+        {
+            await page.CloseAsync();
+        }
+    }
+
+    [Fact]
+    public async Task Menu_Renders_WithItems()
+    {
+        // Arrange
+        var page = await _fixture.NewPageAsync();
+        // Note: We don't check console errors for Menu because the Menu component
+        // requires JavaScript setup (bwfc.Page.AddScriptElement) that produces errors
+        // when not configured. The test verifies the page renders content.
+
+        try
+        {
+            // Act
+            await page.GotoAsync($"{_fixture.BaseUrl}/ControlSamples/Menu", new PageGotoOptions
+            {
+                WaitUntil = WaitUntilState.NetworkIdle
+            });
+
+            // Verify menu content renders (the Menu component renders tables with menu items)
+            var menuTables = await page.Locator("table").AllAsync();
+            Assert.NotEmpty(menuTables);
+
+            // Verify there are clickable elements (links or cells with menu text)
+            var menuItems = await page.Locator("td a, td").AllAsync();
+            Assert.NotEmpty(menuItems);
+        }
+        finally
+        {
+            await page.CloseAsync();
+        }
+    }
 }
diff --git a/samples/AfterBlazorServerSide/AfterBlazorServerSide.csproj b/samples/AfterBlazorServerSide/AfterBlazorServerSide.csproj
index 4d46fb9e5..28c6edc50 100644
--- a/samples/AfterBlazorServerSide/AfterBlazorServerSide.csproj
+++ b/samples/AfterBlazorServerSide/AfterBlazorServerSide.csproj
@@ -11,7 +11,9 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <Content Include="Ads.xml" />
+    <Content Include="Ads.xml">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
   </ItemGroup>
 
   <ItemGroup>
diff --git a/samples/AfterBlazorServerSide/wwwroot/css/site.css b/samples/AfterBlazorServerSide/wwwroot/css/site.css
index bf58cdecf..1945d3cea 100644
--- a/samples/AfterBlazorServerSide/wwwroot/css/site.css
+++ b/samples/AfterBlazorServerSide/wwwroot/css/site.css
@@ -112,7 +112,8 @@ footer {
 }
 
 .verticalNav {
-	overflow-y: scroll;
+	overflow-y: auto;
+	height: calc(100vh - 3.5rem);
 }
 
 .navbar-toggler {
diff --git a/src/BlazorWebFormsComponents.Test/AdRotator/DeploymentVerification.razor b/src/BlazorWebFormsComponents.Test/AdRotator/DeploymentVerification.razor
new file mode 100644
index 000000000..520680e45
--- /dev/null
+++ b/src/BlazorWebFormsComponents.Test/AdRotator/DeploymentVerification.razor
@@ -0,0 +1,68 @@
+@using System.IO
+
+@code {
+	/// <summary>
+	/// Integration test to verify that XML files are properly copied to output directory.
+	/// This test validates the fix for the Azure deployment issue where Ads.xml was missing.
+	/// Uses Ads1.xml as the test file to verify the deployment mechanism works correctly.
+	/// </summary>
+	[Fact]
+	public void AdRotator_DeploymentVerification_AdsXmlExistsInOutputDirectory()
+	{
+		// Arrange - Get the path where test XML files should be copied during build
+		var outputDirectory = AppContext.BaseDirectory;
+		var adsXmlPath = Path.Combine(outputDirectory, "Ads1.xml");
+
+		// Act & Assert - Verify the file exists (simulating deployment scenario)
+		File.Exists(adsXmlPath).ShouldBeTrue($"XML files should be copied to output directory. Expected path: {adsXmlPath}");
+		
+		// Verify the file can be read and contains valid XML
+		var fileContent = File.ReadAllText(adsXmlPath);
+		fileContent.ShouldContain("<Advertisements>");
+		fileContent.ShouldContain("<Ad>");
+	}
+
+	/// <summary>
+	/// Integration test to verify AdRotator can load and render ads from a file in the output directory.
+	/// This simulates the actual deployment scenario where the component loads from the file system.
+	/// Uses Ads1.xml to test the deployment mechanism works as expected.
+	/// </summary>
+	[Fact]
+	public void AdRotator_DeploymentVerification_LoadsFromOutputDirectory()
+	{
+		// Arrange - Use Ads1.xml which should be in output directory
+		var adsFile = "Ads1.xml";
+
+		// Act - Render AdRotator with the file from output directory
+		var cut = Render(@<AdRotator AdvertisementFile="@adsFile" Target="_blank" />);
+
+		// Assert - Verify the component rendered successfully
+		var anchor = cut.Find("a");
+		anchor.ShouldNotBeNull("AdRotator should render an anchor element when Ads.xml is found");
+		
+		var img = cut.Find("img");
+		img.ShouldNotBeNull("AdRotator should render an image element when Ads.xml is found");
+		
+		// Verify the content matches expected values from Ads1.xml
+		img.Attributes["alt"].Value.ShouldBe("Bing");
+		img.Attributes["src"].Value.ShouldBe("bing.png");
+		anchor.Attributes["href"].Value.ShouldBe("http://www.bing.com");
+	}
+
+	/// <summary>
+	/// Integration test to verify AdRotator handles missing XML files gracefully.
+	/// This helps identify deployment issues early where files may not be properly deployed.
+	/// </summary>
+	[Fact]
+	public void AdRotator_DeploymentVerification_HandlesFileMissingScenario()
+	{
+		// Arrange - Use a non-existent file
+		var nonExistentFile = "NonExistent.xml";
+
+		// Act & Assert - Should throw FileNotFoundException
+		Should.Throw<FileNotFoundException>(() =>
+		{
+			var cut = Render(@<AdRotator AdvertisementFile="@nonExistentFile" Target="_blank" />);
+		});
+	}
+}