feat: Milestone 6 Phase 4 P2 nice-to-have features (WI-47 to WI-54)

WI-47: Add DataTextFormatString to BaseListControl  applies string.Format
       to item display text for all 5 list controls
WI-48: Add AppendDataBoundItems to BaseListControl  when true, data-bound
       items append to static items instead of replacing them
WI-51: Add AssociatedControlID to Label  renders <label for=...> instead
       of <span> for accessibility
WI-52: Change Login, ChangePassword, CreateUserWizard base class to
       BaseStyledComponent  adds BackColor, CssClass, Font, etc. on outer
       container (~30 gaps closed)
WI-53: Add 32 bUnit tests covering all P2 features
WI-54: Add sample pages for DataTextFormatString, Menu Orientation, and
       Label AssociatedControlID

Also fixes 5 existing Menu test files and 3 sample pages that broke when
the Orientation parameter was added (removed redundant orientation=Vertical
attribute since Vertical is the default). Fixed 3 existing combined static +
data-bound item tests to use AppendDataBoundItems=true.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: csharpfritz

samples/AfterBlazorServerSide/ComponentCatalog.cs

@@ -33,6 +33,8 @@ public static class ComponentCatalog
         new("Image", "Editor", "/ControlSamples/Image", "Displays an image with alt text support",
             Keywords: new[] { "img", "picture" }),
         new("ImageMap", "Editor", "/ControlSamples/ImageMap", "Image with clickable hotspot regions"),
+        new("Label", "Editor", "/ControlSamples/Label", "Renders text as span or accessible label element",
+            Keywords: new[] { "text", "label", "accessibility" }),
         new("LinkButton", "Editor", "/ControlSamples/LinkButton", "Button rendered as a hyperlink",
             new[] { "JavaScript" },
             new[] { "link", "postback" }),

samples/AfterBlazorServerSide/Components/Pages/ComponentList.razor

@@ -12,6 +12,7 @@
 			<li><a href="/ControlSamples/HiddenField">HiddenField</a></li>
 			<li><a href="/ControlSamples/HyperLink">HyperLink</a></li>
 			<li><a href="/ControlSamples/Image">Image</a></li>
+			<li><a href="/ControlSamples/Label">Label</a></li>
 			<li><a href="/ControlSamples/LinkButton">LinkButton</a></li>
 			<li><a href="/ControlSamples/Literal">Literal</a></li>
 			<li><a href="/ControlSamples/Localize">Localize</a></li>

samples/AfterBlazorServerSide/Components/Pages/ControlSamples/DropDownList/Index.razor

@@ -18,6 +18,26 @@
 <p>Selected Product ID: <strong>@selectedProduct</strong></p>
 <p>Selected Product: <strong>@(products.FirstOrDefault(p => p.Id == selectedProduct)?.Name ?? "None")</strong></p>
 
+<h2>Data-bound with DataTextFormatString (Currency)</h2>
+<DropDownList TItem="PricedProduct"
+              Items="pricedProducts"
+              DataTextField="Price"
+              DataValueField="Id"
+              DataTextFormatString="{0:C}"
+              @bind-SelectedValue="selectedPricedProduct" />
+<p>Selected: <strong>@selectedPricedProduct</strong></p>
+<small>The <code>DataTextFormatString="{0:C}"</code> formats each item's text as currency.</small>
+
+<h2>Data-bound with DataTextFormatString (Prefix)</h2>
+<DropDownList TItem="Product"
+              Items="products"
+              DataTextField="Name"
+              DataValueField="Id"
+              DataTextFormatString="Item: {0}"
+              @bind-SelectedValue="selectedFormattedProduct" />
+<p>Selected: <strong>@selectedFormattedProduct</strong></p>
+<small>The <code>DataTextFormatString="Item: {0}"</code> adds a prefix to each item's display text.</small>
+
 <h2>Disabled DropDownList</h2>
 <DropDownList TItem="object" StaticItems="staticItems" Enabled="false" SelectedValue="2" />
 
@@ -43,6 +63,8 @@
 @code {
     private string selectedStatic = "";
     private string selectedProduct = "";
+    private string selectedPricedProduct = "";
+    private string selectedFormattedProduct = "";
     private string eventSelection = "";
     private string lastSelection = "None";
     private DateTime lastChangeTime = DateTime.Now;
@@ -90,6 +112,14 @@
         new Product { Id = "4", Name = "Doohickey" }
     };
 
+    private List<PricedProduct> pricedProducts = new()
+    {
+        new PricedProduct { Id = "1", Price = 9.99m },
+        new PricedProduct { Id = "2", Price = 24.50m },
+        new PricedProduct { Id = "3", Price = 149.95m },
+        new PricedProduct { Id = "4", Price = 3.00m }
+    };
+
     private void HandleSelectionChanged(ChangeEventArgs e)
     {
         lastSelection = e.Value?.ToString() ?? "None";
@@ -102,6 +132,12 @@
         public string Id { get; set; }
         public string Name { get; set; }
     }
+
+    public class PricedProduct
+    {
+        public string Id { get; set; }
+        public decimal Price { get; set; }
+    }
 }
 
 <hr />
@@ -110,5 +146,7 @@
 <code>
 &lt;DropDownList TItem="object" StaticItems="staticItems" @@bind-SelectedValue="selectedValue" /&gt;<br />
 &lt;DropDownList TItem="Product" Items="products" DataTextField="Name" DataValueField="Id" @@bind-SelectedValue="selectedProduct" /&gt;<br />
+&lt;DropDownList TItem="PricedProduct" Items="pricedProducts" DataTextField="Price" DataValueField="Id" DataTextFormatString="{0:C}" /&gt;<br />
+&lt;DropDownList TItem="Product" Items="products" DataTextField="Name" DataValueField="Id" DataTextFormatString="Item: {0}" /&gt;<br />
 &lt;DropDownList TItem="object" StaticItems="staticItems" Enabled="false" SelectedValue="2" /&gt;
 </code>

samples/AfterBlazorServerSide/Components/Pages/ControlSamples/Label/Index.razor

@@ -0,0 +1,75 @@
+@page "/ControlSamples/Label"
+@using BlazorWebFormsComponents.Enums
+
+<PageTitle>Label Component Samples</PageTitle>
+
+<h2>Label Component</h2>
+
+<p>The <code>Label</code> component renders text on the page. By default it renders as a <code>&lt;span&gt;</code>,
+matching the behavior of the ASP.NET Web Forms Label control.</p>
+
+<h3>Basic Label</h3>
+
+<Label Text="Hello, World!" />
+
+<pre><code>&lt;Label Text="Hello, World!" /&gt;</code></pre>
+
+<hr />
+
+<h3>Styled Label</h3>
+
+<Label Text="Important notice"
+       CssClass="text-danger fw-bold"
+       ForeColor="WebColor.Red" />
+
+<pre><code>&lt;Label Text="Important notice"
+       CssClass="text-danger fw-bold"
+       ForeColor="WebColor.Red" /&gt;</code></pre>
+
+<hr />
+
+<h3>AssociatedControlID — Accessible Form Label</h3>
+
+<p>When you set <code>AssociatedControlID</code>, the Label renders as a <code>&lt;label for="..."&gt;</code>
+element instead of a <code>&lt;span&gt;</code>. This associates the label with a form input for accessibility —
+clicking the label focuses the input, and screen readers announce the relationship.</p>
+
+<div class="mb-3">
+    <Label Text="Email Address:" AssociatedControlID="emailInput" CssClass="form-label" />
+    <TextBox id="emailInput"
+             TextMode="TextBoxMode.Email"
+             Placeholder="you@example.com"
+             CssClass="form-control"
+             Width="Unit.Pixel(300)" />
+</div>
+
+<div class="mb-3">
+    <Label Text="Full Name:" AssociatedControlID="nameInput" CssClass="form-label" />
+    <TextBox id="nameInput"
+             Placeholder="Enter your full name"
+             CssClass="form-control"
+             Width="Unit.Pixel(300)" />
+</div>
+
+<pre><code>&lt;Label Text="Email Address:" AssociatedControlID="emailInput" CssClass="form-label" /&gt;
+&lt;TextBox id="emailInput" TextMode="TextBoxMode.Email"
+         Placeholder="you@@example.com" CssClass="form-control" /&gt;
+
+&lt;Label Text="Full Name:" AssociatedControlID="nameInput" CssClass="form-label" /&gt;
+&lt;TextBox id="nameInput" Placeholder="Enter your full name" CssClass="form-control" /&gt;</code></pre>
+
+<hr />
+
+<h4>Without AssociatedControlID (default)</h4>
+<p>Without <code>AssociatedControlID</code>, the Label renders as a <code>&lt;span&gt;</code>:</p>
+
+<Label Text="This renders as a span" />
+
+<pre><code>&lt;!-- Renders: &lt;span&gt;This renders as a span&lt;/span&gt; --&gt;
+&lt;Label Text="This renders as a span" /&gt;
+
+&lt;!-- Renders: &lt;label for="emailInput"&gt;Email Address:&lt;/label&gt; --&gt;
+&lt;Label Text="Email Address:" AssociatedControlID="emailInput" /&gt;</code></pre>
+
+@code {
+}

samples/AfterBlazorServerSide/Pages/ControlSamples/Menu/DatabindingSitemap.razor

@@ -11,7 +11,6 @@
 			DisappearAfter="2000"
 			StaticDisplayLevels="2"
 			StaticSubmenuIndent="10"
-			orientation="Vertical"
 			font-names="Arial"
 			target="_blank"
 			DataSource="MenuSource"

samples/AfterBlazorServerSide/Pages/ControlSamples/Menu/DynamicMenuStyleSample.razor

@@ -9,7 +9,6 @@
 <Menu ID="NavigationMenu"
 			StaticDisplayLevels="2"
 			StaticSubmenuIndent="10"
-			orientation="Vertical"
 			target="_blank"
 			runat="server">
 

samples/AfterBlazorServerSide/Pages/ControlSamples/Menu/Index.razor

@@ -1,4 +1,5 @@
 @page "/ControlSamples/Menu"
+@using BlazorWebFormsComponents.Enums
 
 
 <h2>Menu Component homepage</h2>
@@ -11,7 +12,6 @@
 			DisappearAfter="2000"
 			StaticDisplayLevels="2"
 			StaticSubmenuIndent="10"
-			orientation="Vertical"
 			font-names="Arial"
 			target="_blank"
 			runat="server">
@@ -59,6 +59,46 @@
 
 <hr />
 
+<h2>Horizontal Menu</h2>
+
+<p>Set <code>Orientation</code> to display menu items horizontally. This is useful for top navigation bars.</p>
+
+<Menu id="HorizontalMenu"
+			Orientation="@horizontal"
+			StaticDisplayLevels="2"
+			StaticSubmenuIndent="10"
+			target="_blank"
+			runat="server">
+
+	<StaticMenuItemStyle BackColor="@("LightSteelBlue")"
+											 ForeColor="@("Black")" />
+	<StaticHoverStyle BackColor="WebColor.LightSkyBlue" />
+
+	<Items>
+		<MenuItem navigateurl="Home.aspx"
+							text="Home"
+							tooltip="Home" />
+		<MenuItem text="Products"
+							tooltip="Products">
+			<MenuItem navigateurl="Software.aspx"
+								text="Software"
+								tooltip="Software" />
+			<MenuItem navigateurl="Hardware.aspx"
+								text="Hardware"
+								tooltip="Hardware" />
+		</MenuItem>
+		<MenuItem navigateurl="About.aspx"
+							text="About"
+							tooltip="About" />
+		<MenuItem navigateurl="Contact.aspx"
+							text="Contact"
+							tooltip="Contact" />
+	</Items>
+
+</Menu>
+
+<hr />
+
 <p>Code:</p>
 <code>
 &lt;Menu id="NavigationMenu" orientation="Vertical"&gt;<br />
@@ -68,5 +108,17 @@
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;MenuItem text="Music" tooltip="Music"&gt;...&lt;/MenuItem&gt;<br />
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;/MenuItem&gt;<br />
 &nbsp;&nbsp;&lt;/Items&gt;<br />
+&lt;/Menu&gt;<br /><br />
+&lt;!-- Horizontal orientation --&gt;<br />
+&lt;Menu id="HorizontalMenu" Orientation="horizontal"&gt;<br />
+&nbsp;&nbsp;&lt;Items&gt;<br />
+&nbsp;&nbsp;&nbsp;&nbsp;&lt;MenuItem text="Home" /&gt;<br />
+&nbsp;&nbsp;&nbsp;&nbsp;&lt;MenuItem text="Products"&gt;...&lt;/MenuItem&gt;<br />
+&nbsp;&nbsp;&nbsp;&nbsp;&lt;MenuItem text="About" /&gt;<br />
+&nbsp;&nbsp;&lt;/Items&gt;<br />
 &lt;/Menu&gt;
 </code>
+
+@code {
+	BlazorWebFormsComponents.Enums.Orientation horizontal = BlazorWebFormsComponents.Enums.Orientation.Horizontal;
+}

src/BlazorWebFormsComponents.Test/BulletedList/DataBinding.razor

@@ -72,7 +72,7 @@
 		};
 
 		// Act
-		var cut = Render(@<BulletedList TItem="Product" StaticItems="staticItems" Items="products" DataTextField="Name" DataValueField="Url" />);
+		var cut = Render(@<BulletedList TItem="Product" StaticItems="staticItems" Items="products" AppendDataBoundItems="true" DataTextField="Name" DataValueField="Url" />);
 
 		// Assert
 		var listItems = cut.FindAll("li");

src/BlazorWebFormsComponents.Test/BulletedList/DataTextFormatString.razor

@@ -0,0 +1,80 @@
+@using BlazorWebFormsComponents.Enums
+
+@code {
+
+	public class Product
+	{
+		public string Name { get; set; }
+		public string Url { get; set; }
+	}
+
+	[Fact]
+	public void BulletedList_DataTextFormatString_AppliesFormatToDataBoundItems()
+	{
+		// Arrange
+		var products = new List<Product>
+		{
+			new Product { Name = "Alpha", Url = "/a" },
+			new Product { Name = "Beta", Url = "/b" }
+		};
+
+		// Act
+		var cut = Render(
+			@<BulletedList TItem="Product"
+						  Items="products"
+						  DataTextField="Name"
+						  DataValueField="Url"
+						  DataTextFormatString=">> {0}" />
+		);
+
+		// Assert
+		var spans = cut.FindAll("li span");
+		spans[0].TextContent.ShouldBe(">> Alpha");
+		spans[1].TextContent.ShouldBe(">> Beta");
+	}
+
+	[Fact]
+	public void BulletedList_DataTextFormatString_AppliesFormatToStaticItems()
+	{
+		// Arrange
+		var items = new ListItemCollection
+		{
+			new ListItem("One", "1"),
+			new ListItem("Two", "2")
+		};
+
+		// Act
+		var cut = Render(
+			@<BulletedList TItem="object"
+						  StaticItems="items"
+						  DataTextFormatString="#{0}" />
+		);
+
+		// Assert
+		var spans = cut.FindAll("li span");
+		spans[0].TextContent.ShouldBe("#One");
+		spans[1].TextContent.ShouldBe("#Two");
+	}
+
+	[Fact]
+	public void BulletedList_DataTextFormatString_Empty_NoFormatting()
+	{
+		// Arrange
+		var items = new ListItemCollection
+		{
+			new ListItem("Raw Text", "1")
+		};
+
+		// Act
+		var cut = Render(
+			@<BulletedList TItem="object"
+						  StaticItems="items"
+						  DataTextFormatString="" />
+		);
+
+		// Assert
+		var span = cut.Find("li span");
+		span.TextContent.ShouldBe("Raw Text");
+	}
+
+}