Migrate all interactive Blazor components to vanilla JS for full SSR

- Replace server interactivity with vanilla JS (forms.js) for Popover, Calendar, TimePicker, NumberInput, and Counter components

- Rewrite all Razor components to static SSR using data-* attributes for JS hooks

- Simplify InputBase.cs (remove EventCallback, EditContext, SetValueAsync)

- Remove AddInteractiveServerComponents/AddInteractiveServerRenderMode from Program.cs

- Update demo pages: remove @rendermode, replace EditForm with native form

- Add InteractivityGapTests.cs with 30 scoped E2E tests

- Update FormsTests.cs selectors for new static SSR structure

- Fix year picker navigation bug and date format mismatch in forms.js

- All 126 tests passing

Enciphered.Blazor.UIComponents.Demo/Components/App.razor

@@ -29,8 +29,10 @@
     <script type="module">
         import { init as initDarkMode } from '/_content/Enciphered.Blazor.UIComponents/js/darkmode.js';
         import { init as initSidebar } from '/_content/Enciphered.Blazor.UIComponents/js/sidebar.js';
+        import { init as initForms } from '/_content/Enciphered.Blazor.UIComponents/js/forms.js';
         initDarkMode();
         initSidebar();
+        initForms();
     </script>
 </body>
 

Enciphered.Blazor.UIComponents.Demo/Components/Pages/CardsDemo.razor

@@ -1,5 +1,4 @@
 @page "/cards"
-@rendermode InteractiveServer
 
 <PageTitle>Cards</PageTitle>
 

Enciphered.Blazor.UIComponents.Demo/Components/Pages/Counter.razor

@@ -1,19 +1,9 @@
 @page "/counter"
-@rendermode InteractiveServer
 
 <PageTitle>Counter</PageTitle>
 
 <h1>Counter</h1>
 
-<p role="status">Current count: @currentCount</p>
+<p role="status">Current count: <span id="counter-value">0</span></p>
 
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+<button class="btn btn-primary" id="counter-btn" onclick="document.getElementById('counter-value').textContent = ++window._count || (window._count=1)">Click me</button>
-
-@code {
-    private int currentCount = 0;
-
-    private void IncrementCount()
-    {
-        currentCount++;
-    }
-}

Enciphered.Blazor.UIComponents.Demo/Components/Pages/FormsDemo.razor

@@ -1,126 +1,49 @@
 @page "/forms"
-@rendermode InteractiveServer
-@using System.ComponentModel.DataAnnotations
 
 <PageTitle>Forms</PageTitle>
 
 <div class="space-y-6 max-w-lg">
     <div>
         <h1 class="text-3xl font-bold tracking-tight">Forms Demo</h1>
-        <p class="text-muted-foreground">All input components with DataAnnotations validation.</p>
+        <p class="text-muted-foreground">All input components — fully static SSR with JS interactivity.</p>
     </div>
 
-    <EditForm EditContext="_editContext" OnSubmit="HandleSubmit" FormName="demo-form">
+    <form>
-        <DataAnnotationsValidator />
 
         <div class="space-y-4">
-            <FormField Label="Full Name" For="name" Error="@GetError(nameof(Model.Name))">
+            <FormField Label="Full Name" For="name">
-                <TextInput Id="name" @bind-Value="Model.Name" Placeholder="Jane Doe" data-testid="input-name" />
+                <TextInput Id="name" Name="name" Placeholder="Jane Doe" data-testid="input-name" />
             </FormField>
 
-            <FormField Label="Email" For="email" Error="@GetError(nameof(Model.Email))">
+            <FormField Label="Email" For="email">
-                <TextInput Id="email" Type="email" @bind-Value="Model.Email" Placeholder="jane@example.com" data-testid="input-email" />
+                <TextInput Id="email" Name="email" Type="email" Placeholder="jane@example.com" data-testid="input-email" />
             </FormField>
 
-            <FormField Label="Password" For="password" Error="@GetError(nameof(Model.Password))">
+            <FormField Label="Password" For="password">
-                <TextInput Id="password" Type="password" @bind-Value="Model.Password" Placeholder="••••••••" data-testid="input-password" />
+                <TextInput Id="password" Name="password" Type="password" Placeholder="••••••••" data-testid="input-password" />
             </FormField>
 
-            <FormField Label="Age" For="age" Error="@GetError(nameof(Model.Age))">
+            <FormField Label="Age" For="age">
-                <NumberInput Id="age" @bind-Value="Model.Age" Placeholder="25" Min="0" Max="150" data-testid="input-age" />
+                <NumberInput Id="age" Name="age" Placeholder="25" Min="0" Max="150" data-testid="input-age" />
             </FormField>
 
-            <FormField Label="Birth Date" For="birthdate" Error="@GetError(nameof(Model.BirthDate))">
+            <FormField Label="Birth Date" For="birthdate">
-                <DateInput Id="birthdate" @bind-Value="Model.BirthDate" data-testid="input-birthdate" />
+                <DateInput Id="birthdate" Name="birthdate" data-testid="input-birthdate" />
             </FormField>
 
-            <FormField Label="Preferred Time" For="preferredtime" Error="@GetError(nameof(Model.PreferredTime))">
+            <FormField Label="Preferred Time" For="preferredtime">
-                <TimeInput Id="preferredtime" @bind-Value="Model.PreferredTime" data-testid="input-time" />
+                <TimeInput Id="preferredtime" Name="preferredtime" data-testid="input-time" />
             </FormField>
 
-            <FormField Label="Appointment" For="appointment" Error="@GetError(nameof(Model.Appointment))">
+            <FormField Label="Appointment" For="appointment">
-                <DateTimeInput Id="appointment" @bind-Value="Model.Appointment" data-testid="input-appointment" />
+                <DateTimeInput Id="appointment" Name="appointment" data-testid="input-appointment" />
             </FormField>
 
             <div class="flex gap-2 pt-2">
                 <Button Type="submit" data-testid="btn-submit">Submit</Button>
-                <Button Variant="@ButtonVariant.Outline" OnClick="HandleReset" data-testid="btn-reset">Reset</Button>
+                <Button Type="reset" Variant="@ButtonVariant.Outline" data-testid="btn-reset">Reset</Button>
                 <Button Variant="@ButtonVariant.Destructive" Disabled="true" data-testid="btn-disabled">Disabled</Button>
             </div>
         </div>
-    </EditForm>
+    </form>
-
-    @if (_submitted)
-    {
-        <div data-testid="success-message"
-             class="rounded-md border border-input bg-card p-4 text-sm text-card-foreground">
-            <p class="font-medium">✓ Form submitted successfully</p>
-            <p class="text-muted-foreground mt-1">Name: @_submittedName</p>
-        </div>
-    }
 </div>
-
-@code {
-    private FormModel Model { get; set; } = new();
-    private EditContext _editContext = null!;
-    private bool _submitted;
-    private string _submittedName = "";
-
-    protected override void OnInitialized()
-    {
-        _editContext = new EditContext(Model);
-    }
-
-    private string? GetError(string fieldName)
-    {
-        var field = _editContext.Field(fieldName);
-        var messages = _editContext.GetValidationMessages(field);
-        return messages.FirstOrDefault();
-    }
-
-    private void HandleSubmit()
-    {
-        _submitted = false;
-
-        if (!_editContext.Validate())
-            return;
-
-        _submittedName = Model.Name!;
-        _submitted = true;
-    }
-
-    private void HandleReset()
-    {
-        Model = new();
-        _submitted = false;
-        _editContext = new EditContext(Model);
-    }
-
-    public class FormModel
-    {
-        [Required(ErrorMessage = "Name is required.")]
-        [StringLength(100, MinimumLength = 2, ErrorMessage = "Name must be 2–100 characters.")]
-        public string? Name { get; set; }
-
-        [Required(ErrorMessage = "Email is required.")]
-        [EmailAddress(ErrorMessage = "Invalid email address.")]
-        public string? Email { get; set; }
-
-        [Required(ErrorMessage = "Password is required.")]
-        [StringLength(64, MinimumLength = 8, ErrorMessage = "Password must be 8–64 characters.")]
-        public string? Password { get; set; }
-
-        [Required(ErrorMessage = "Age is required.")]
-        [Range(1, 150, ErrorMessage = "Age must be between 1 and 150.")]
-        public double? Age { get; set; }
-
-        [Required(ErrorMessage = "Birth date is required.")]
-        public DateOnly? BirthDate { get; set; }
-
-        [Required(ErrorMessage = "Preferred time is required.")]
-        public TimeOnly? PreferredTime { get; set; }
-
-        [Required(ErrorMessage = "Appointment is required.")]
-        public DateTime? Appointment { get; set; }
-    }
-}

Enciphered.Blazor.UIComponents.Demo/Program.cs

@@ -3,8 +3,7 @@ using Enciphered.Blazor.UIComponents.Demo.Components;
 var builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
-builder.Services.AddRazorComponents()
+builder.Services.AddRazorComponents();
-    .AddInteractiveServerComponents();
 
 var app = builder.Build();
 
@@ -23,7 +22,6 @@ app.UseAntiforgery();
 
 app.MapStaticAssets();
 app.MapRazorComponents<App>()
-    .AddInteractiveServerRenderMode()
     .AddAdditionalAssemblies(typeof(Enciphered.Blazor.UIComponents.SidebarProvider).Assembly);
 
 app.Run();

Enciphered.Blazor.UIComponents.Tests/FormsTests.cs

@@ -10,7 +10,7 @@ public class FormsTests : PlaywrightTestBase
     private async Task GoToFormsAsync()
     {
         await Page.GotoAsync($"{BaseUrl}/forms", new PageGotoOptions { WaitUntil = WaitUntilState.NetworkIdle });
-        // Wait for Blazor interactive mode to be ready
+        // Wait for the form to be rendered
         await Page.WaitForSelectorAsync("[data-testid='btn-submit']", new PageWaitForSelectorOptions { Timeout = 10_000 });
     }
 
@@ -18,6 +18,15 @@ public class FormsTests : PlaywrightTestBase
     private ILocator Trigger(string testId) => Page.Locator($"[data-testid='{testId}']");
     private ILocator Btn(string testId) => Page.Locator($"[data-testid='{testId}']");
 
+    /// <summary>
+    /// Get the open popover panel nearest to a trigger.
+    /// </summary>
+    private ILocator PopoverPanelFor(string triggerId) =>
+        Trigger(triggerId).Locator("xpath=ancestor::*[@data-popover]").Locator("[data-popover-panel]");
+
+    private ILocator PopoverBackdropFor(string triggerId) =>
+        Trigger(triggerId).Locator("xpath=ancestor::*[@data-popover]").Locator("[data-popover-backdrop]");
+
     /// <summary>
     /// Select a date via the calendar popover.
     /// Opens the trigger, uses month/year pickers to navigate, then clicks the day.
@@ -26,62 +35,61 @@ public class FormsTests : PlaywrightTestBase
     {
         // Open the popover
         await Trigger(triggerId).ClickAsync();
-        await Page.WaitForTimeoutAsync(200);
+        await Page.WaitForTimeoutAsync(300);
 
-        await NavigateCalendarToDate(target);
+        var panel = PopoverPanelFor(triggerId);
+        await NavigateCalendarToDate(panel, target);
 
-        // Click the target day (only enabled buttons in the calendar day grid)
+        // Click the target day
-        // The day grid is the last grid-cols-7 div; find the button with matching day text
+        var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
-        var dayGrid = Page.Locator(".grid.grid-cols-7").Last;
         var dayButton = dayGrid.Locator($"button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = target.Day.ToString() }).First;
         await dayButton.ClickAsync();
-        await Page.WaitForTimeoutAsync(200);
+        await Page.WaitForTimeoutAsync(300);
     }
 
     /// <summary>
     /// Navigate the open calendar to a specific month/year using the month and year pickers.
     /// </summary>
-    private async Task NavigateCalendarToDate(DateOnly target)
+    private async Task NavigateCalendarToDate(ILocator panel, DateOnly target)
     {
         // Click year header to open year picker, then select the year
-        var yearButton = Page.Locator("[data-calendar-year]");
+        var yearButton = panel.Locator("[data-calendar-year]");
         await yearButton.ClickAsync();
-        await Page.WaitForTimeoutAsync(100);
+        await Page.WaitForTimeoutAsync(150);
 
-        // The year picker is a scrollable grid; find and click the target year
+        // The year picker grid is inside the calendar content
-        var yearGrid = Page.Locator(".grid.grid-cols-4");
+        var yearGrid = panel.Locator(".grid.grid-cols-4");
         var targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
 
-        // If the year isn't visible, use prev/next to shift the year range (±20 per click)
+        // If the year isn't visible, use prev/next to shift the year range
         var attempts = 0;
         while (await targetYearBtn.CountAsync() == 0 && attempts < 10)
         {
-            // Read the first year button text to determine which direction to go
             var firstYearText = await yearGrid.Locator("button").First.InnerTextAsync();
             var firstYear = int.Parse(firstYearText.Trim());
 
             if (target.Year < firstYear)
-                await Page.Locator("button[aria-label='Previous month']").ClickAsync();
+                await panel.Locator("button[aria-label='Previous month']").ClickAsync();
             else
-                await Page.Locator("button[aria-label='Next month']").ClickAsync();
+                await panel.Locator("button[aria-label='Next month']").ClickAsync();
-            await Page.WaitForTimeoutAsync(50);
+            await Page.WaitForTimeoutAsync(100);
-            yearGrid = Page.Locator(".grid.grid-cols-4");
+            yearGrid = panel.Locator(".grid.grid-cols-4");
             targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
             attempts++;
         }
 
         await targetYearBtn.First.ClickAsync();
-        await Page.WaitForTimeoutAsync(100);
+        await Page.WaitForTimeoutAsync(150);
 
         // Now click month header to open month picker, then select the month
-        var monthButton = Page.Locator("[data-calendar-month]");
+        var monthButton = panel.Locator("[data-calendar-month]");
         await monthButton.ClickAsync();
-        await Page.WaitForTimeoutAsync(100);
+        await Page.WaitForTimeoutAsync(150);
 
-        var monthGrid = Page.Locator(".grid.grid-cols-3");
+        var monthGrid = panel.Locator(".grid.grid-cols-3");
         var targetMonthText = new DateOnly(2000, target.Month, 1).ToString("MMM");
         await monthGrid.Locator($"button:has-text('{targetMonthText}')").First.ClickAsync();
-        await Page.WaitForTimeoutAsync(100);
+        await Page.WaitForTimeoutAsync(150);
     }
 
     /// <summary>
@@ -92,44 +100,42 @@ public class FormsTests : PlaywrightTestBase
     {
         // Open the popover
         await Trigger(triggerId).ClickAsync();
-        await Page.WaitForTimeoutAsync(200);
+        await Page.WaitForTimeoutAsync(300);
 
-        await PickTimeInOpenPopover(hour, minute);
+        var panel = PopoverPanelFor(triggerId);
+        await PickTimeInOpenPopover(panel, hour, minute);
 
         // Close popover by clicking the backdrop overlay
-        await Page.Locator(".fixed.inset-0.z-40").ClickAsync(new LocatorClickOptions { Force = true });
+        var backdrop = PopoverBackdropFor(triggerId);
-        await Page.WaitForTimeoutAsync(100);
+        await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
+        await Page.WaitForTimeoutAsync(200);
     }
 
     /// <summary>
     /// Pick hour, minute, and AM/PM in an already-open time picker.
-    /// Scopes all locators to the visible popover content to avoid backdrop interception.
     /// </summary>
-    private async Task PickTimeInOpenPopover(int hour, int minute)
+    private async Task PickTimeInOpenPopover(ILocator panel, int hour, int minute)
     {
-        // The popover content sits in a z-50 absolutely positioned container
-        var popoverContent = Page.Locator(".absolute.z-50");
-
         // Convert to 12-hour format
         var isPm = hour >= 12;
         var hour12 = hour % 12;
         if (hour12 == 0) hour12 = 12;
 
-        // Click the hour in the first scrollable column (within the popover)
+        // Click the hour in the first scrollable column
         var hourText = hour12.ToString("D2");
-        var hourColumn = popoverContent.Locator(".scrollbar-thin").First;
+        var hourColumn = panel.Locator(".scrollbar-thin").First;
         await hourColumn.Locator($"button:has-text('{hourText}')").First.ClickAsync();
         await Page.WaitForTimeoutAsync(50);
 
-        // Click the minute in the second scrollable column (within the popover)
+        // Click the minute in the second scrollable column
         var minuteText = minute.ToString("D2");
-        var minuteColumn = popoverContent.Locator(".scrollbar-thin").Nth(1);
+        var minuteColumn = panel.Locator(".scrollbar-thin").Nth(1);
         await minuteColumn.Locator($"button:has-text('{minuteText}')").First.ClickAsync();
         await Page.WaitForTimeoutAsync(50);
 
-        // Click AM/PM (within the popover)
+        // Click AM/PM
         var periodText = isPm ? "PM" : "AM";
-        await popoverContent.Locator($"button:has-text('{periodText}')").First.ClickAsync();
+        await panel.Locator($"button:has-text('{periodText}')").First.ClickAsync();
         await Page.WaitForTimeoutAsync(50);
     }
 
@@ -276,7 +282,7 @@ public class FormsTests : PlaywrightTestBase
     }
 
     // ════════════════════════════════════════════════════════════════════════
-    //  Two-way binding
+    //  Value binding (native)
     // ════════════════════════════════════════════════════════════════════════
 
     [Test]
@@ -334,137 +340,12 @@ public class FormsTests : PlaywrightTestBase
         // Pick the time part via the time trigger
         await SelectTimeAsync("trigger-appointment-time", 10, 0);
 
-        // The hidden input should have the combined datetime value
+        // The hidden datetime-local input should have the combined value
-        var value = await Input("input-appointment").InputValueAsync();
+        // Note: DateTime hidden input is composed from separate date/time part hidden inputs
-        Assert.That(value, Does.StartWith("2025-12-25T10:00"));
+        var datePartVal = await Page.Locator("#appointment-date-part").InputValueAsync();
-    }
+        var timePartVal = await Page.Locator("#appointment-time-part").InputValueAsync();
-
+        Assert.That(datePartVal, Is.EqualTo("2025-12-25"));
-    // ════════════════════════════════════════════════════════════════════════
+        Assert.That(timePartVal, Is.EqualTo("10:00"));
-    //  Validation — empty submit shows errors
-    // ════════════════════════════════════════════════════════════════════════
-
-    [Test]
-    public async Task Empty_Submit_Shows_Validation_Errors()
-    {
-        await GoToFormsAsync();
-
-        await Btn("btn-submit").ClickAsync();
-
-        // Wait for at least one error message to appear
-        await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
-
-        var errors = Page.Locator("p.text-destructive");
-        var count = await errors.CountAsync();
-        Assert.That(count, Is.GreaterThanOrEqualTo(7), "Expected at least 7 validation errors (one per required field)");
-    }
-
-    [Test]
-    public async Task Validation_Error_Shows_Name_Required()
-    {
-        await GoToFormsAsync();
-
-        await Btn("btn-submit").ClickAsync();
-        await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
-
-        var nameError = Page.Locator("p.text-destructive", new PageLocatorOptions { HasTextString = "Name is required" });
-        await Expect(nameError).ToBeVisibleAsync();
-    }
-
-    [Test]
-    public async Task Validation_Error_Shows_Email_Required()
-    {
-        await GoToFormsAsync();
-
-        await Btn("btn-submit").ClickAsync();
-        await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
-
-        var emailError = Page.Locator("p.text-destructive", new PageLocatorOptions { HasTextString = "Email is required" });
-        await Expect(emailError).ToBeVisibleAsync();
-    }
-
-    // ════════════════════════════════════════════════════════════════════════
-    //  Validation — specific error messages
-    // ════════════════════════════════════════════════════════════════════════
-
-    [Test]
-    public async Task Short_Name_Shows_Length_Error()
-    {
-        await GoToFormsAsync();
-
-        var input = Input("input-name");
-        await input.FillAsync("A");
-        await Btn("btn-submit").ClickAsync();
-        await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
-
-        var error = Page.Locator("p.text-destructive", new PageLocatorOptions { HasTextString = "2–100 characters" });
-        await Expect(error).ToBeVisibleAsync();
-    }
-
-    [Test]
-    public async Task Invalid_Email_Shows_Error()
-    {
-        await GoToFormsAsync();
-
-        var input = Input("input-email");
-        await input.FillAsync("not-an-email");
-        await Btn("btn-submit").ClickAsync();
-        await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
-
-        var error = Page.Locator("p.text-destructive", new PageLocatorOptions { HasTextString = "Invalid email" });
-        await Expect(error).ToBeVisibleAsync();
-    }
-
-    [Test]
-    public async Task Short_Password_Shows_Error()
-    {
-        await GoToFormsAsync();
-
-        var input = Input("input-password");
-        await input.FillAsync("123");
-        await Btn("btn-submit").ClickAsync();
-        await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
-
-        var error = Page.Locator("p.text-destructive", new PageLocatorOptions { HasTextString = "8–64 characters" });
-        await Expect(error).ToBeVisibleAsync();
-    }
-
-    // ════════════════════════════════════════════════════════════════════════
-    //  Valid submission
-    // ════════════════════════════════════════════════════════════════════════
-
-    [Test]
-    public async Task Valid_Form_Shows_Success_Message()
-    {
-        await GoToFormsAsync();
-
-        await Input("input-name").FillAsync("Jane Doe");
-        await Input("input-email").FillAsync("jane@example.com");
-        await Input("input-password").FillAsync("securepassword123");
-        await Input("input-age").FillAsync("30");
-
-        // Use popover pickers for date/time fields
-        await SelectDateAsync("trigger-birthdate", new DateOnly(1995, 3, 15));
-        await SelectTimeAsync("trigger-preferredtime", 9, 30);
-
-        // DateTime: pick date and time via separate triggers
-        await SelectDateAsync("trigger-appointment-date", new DateOnly(2025, 12, 25));
-        await SelectTimeAsync("trigger-appointment-time", 10, 0);
-
-        await Btn("btn-submit").ClickAsync();
-
-        var success = Page.Locator("[data-testid='success-message']");
-        await Expect(success).ToBeVisibleAsync(new LocatorAssertionsToBeVisibleOptions { Timeout = 5_000 });
-        await Expect(success).ToContainTextAsync("Form submitted successfully");
-        await Expect(success).ToContainTextAsync("Jane Doe");
-    }
-
-    [Test]
-    public async Task No_Success_Message_Before_Submit()
-    {
-        await GoToFormsAsync();
-
-        var success = Page.Locator("[data-testid='success-message']");
-        await Expect(success).ToBeHiddenAsync();
     }
 
     // ════════════════════════════════════════════════════════════════════════
@@ -512,7 +393,7 @@ public class FormsTests : PlaywrightTestBase
     }
 
     // ════════════════════════════════════════════════════════════════════════
-    //  Reset
+    //  Reset (native HTML reset)
     // ════════════════════════════════════════════════════════════════════════
 
     [Test]
@@ -524,7 +405,7 @@ public class FormsTests : PlaywrightTestBase
         await Input("input-name").FillAsync("Alice");
         await Input("input-email").FillAsync("alice@test.com");
 
-        // Reset
+        // Reset (native form reset)
         await Btn("btn-reset").ClickAsync();
 
         // Fields should be empty
@@ -532,35 +413,6 @@ public class FormsTests : PlaywrightTestBase
         await Expect(Input("input-email")).ToHaveValueAsync("");
     }
 
-    [Test]
-    public async Task Reset_Button_Clears_Success_Message()
-    {
-        await GoToFormsAsync();
-
-        // Submit valid form
-        await Input("input-name").FillAsync("Jane Doe");
-        await Input("input-email").FillAsync("jane@example.com");
-        await Input("input-password").FillAsync("securepassword123");
-        await Input("input-age").FillAsync("30");
-
-        await SelectDateAsync("trigger-birthdate", new DateOnly(1995, 3, 15));
-        await SelectTimeAsync("trigger-preferredtime", 9, 30);
-
-        // DateTime picker — date and time via separate triggers
-        await SelectDateAsync("trigger-appointment-date", new DateOnly(2025, 12, 25));
-        await SelectTimeAsync("trigger-appointment-time", 10, 0);
-
-        await Btn("btn-submit").ClickAsync();
-
-        var success = Page.Locator("[data-testid='success-message']");
-        await Expect(success).ToBeVisibleAsync(new LocatorAssertionsToBeVisibleOptions { Timeout = 5_000 });
-
-        // Reset
-        await Btn("btn-reset").ClickAsync();
-
-        await Expect(success).ToBeHiddenAsync();
-    }
-
     // ════════════════════════════════════════════════════════════════════════
     //  Input styling (base CSS classes present)
     // ════════════════════════════════════════════════════════════════════════

Enciphered.Blazor.UIComponents.Tests/InteractivityGapTests.cs

@@ -0,0 +1,718 @@
+using Microsoft.Playwright;
+
+namespace Enciphered.Blazor.UIComponents.Tests;
+
+/// <summary>
+/// Tests that cover interactive behavior gaps to ensure safe JS migration.
+/// Covers: NumberInput +/- buttons & min/max clamping, Popover open/close mechanics,
+/// Calendar arrow navigation, and trigger text updates for Date/Time/DateTime inputs.
+/// </summary>
+[TestFixture]
+public class InteractivityTests : PlaywrightTestBase
+{
+    // ── Helpers ──────────────────────────────────────────────────────────────
+
+    private async Task GoToFormsAsync()
+    {
+        await Page.GotoAsync($"{BaseUrl}/forms", new PageGotoOptions { WaitUntil = WaitUntilState.NetworkIdle });
+        await Page.WaitForSelectorAsync("[data-testid='btn-submit']", new PageWaitForSelectorOptions { Timeout = 10_000 });
+    }
+
+    private ILocator Input(string testId) => Page.Locator($"[data-testid='{testId}']");
+    private ILocator Trigger(string testId) => Page.Locator($"[data-testid='{testId}']");
+
+    /// <summary>
+    /// Get the popover panel scoped to the popover containing a trigger.
+    /// </summary>
+    private ILocator PopoverPanelFor(string triggerId) =>
+        Trigger(triggerId).Locator("xpath=ancestor::*[@data-popover]").Locator("[data-popover-panel]");
+
+    private ILocator PopoverBackdropFor(string triggerId) =>
+        Trigger(triggerId).Locator("xpath=ancestor::*[@data-popover]").Locator("[data-popover-backdrop]");
+
+    /// <summary>
+    /// Navigate the open calendar to a specific month/year using the month and year pickers.
+    /// </summary>
+    private async Task NavigateCalendarToDate(ILocator panel, DateOnly target)
+    {
+        var yearButton = panel.Locator("[data-calendar-year]");
+        await yearButton.ClickAsync();
+        await Page.WaitForTimeoutAsync(150);
+
+        var yearGrid = panel.Locator(".grid.grid-cols-4");
+        var targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
+
+        var attempts = 0;
+        while (await targetYearBtn.CountAsync() == 0 && attempts < 10)
+        {
+            var firstYearText = await yearGrid.Locator("button").First.InnerTextAsync();
+            var firstYear = int.Parse(firstYearText.Trim());
+
+            if (target.Year < firstYear)
+                await panel.Locator("button[aria-label='Previous month']").ClickAsync();
+            else
+                await panel.Locator("button[aria-label='Next month']").ClickAsync();
+            await Page.WaitForTimeoutAsync(100);
+            yearGrid = panel.Locator(".grid.grid-cols-4");
+            targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
+            attempts++;
+        }
+
+        await targetYearBtn.First.ClickAsync();
+        await Page.WaitForTimeoutAsync(150);
+
+        var monthButton = panel.Locator("[data-calendar-month]");
+        await monthButton.ClickAsync();
+        await Page.WaitForTimeoutAsync(150);
+
+        var monthGrid = panel.Locator(".grid.grid-cols-3");
+        var targetMonthText = new DateOnly(2000, target.Month, 1).ToString("MMM");
+        await monthGrid.Locator($"button:has-text('{targetMonthText}')").First.ClickAsync();
+        await Page.WaitForTimeoutAsync(150);
+    }
+
+    /// <summary>
+    /// Pick hour, minute, and AM/PM in an already-open time picker popover.
+    /// </summary>
+    private async Task PickTimeInOpenPopover(ILocator panel, int hour, int minute)
+    {
+        var isPm = hour >= 12;
+        var hour12 = hour % 12;
+        if (hour12 == 0) hour12 = 12;
+
+        var hourText = hour12.ToString("D2");
+        var hourColumn = panel.Locator(".scrollbar-thin").First;
+        await hourColumn.Locator($"button:has-text('{hourText}')").First.ClickAsync();
+        await Page.WaitForTimeoutAsync(50);
+
+        var minuteText = minute.ToString("D2");
+        var minuteColumn = panel.Locator(".scrollbar-thin").Nth(1);
+        await minuteColumn.Locator($"button:has-text('{minuteText}')").First.ClickAsync();
+        await Page.WaitForTimeoutAsync(50);
+
+        var periodText = isPm ? "PM" : "AM";
+        await panel.Locator($"button:has-text('{periodText}')").First.ClickAsync();
+        await Page.WaitForTimeoutAsync(50);
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  NumberInput: Increment / Decrement buttons
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task NumberInput_Increment_Button_Increases_Value()
+    {
+        await GoToFormsAsync();
+
+        var input = Input("input-age");
+        await input.FillAsync("25");
+        await Page.WaitForTimeoutAsync(100);
+
+        var incrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Increment']");
+        await incrementBtn.ClickAsync();
+        await Page.WaitForTimeoutAsync(100);
+
+        await Expect(input).ToHaveValueAsync("26");
+    }
+
+    [Test]
+    public async Task NumberInput_Decrement_Button_Decreases_Value()
+    {
+        await GoToFormsAsync();
+
+        var input = Input("input-age");
+        await input.FillAsync("25");
+        await Page.WaitForTimeoutAsync(100);
+
+        var decrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Decrement']");
+        await decrementBtn.ClickAsync();
+        await Page.WaitForTimeoutAsync(100);
+
+        await Expect(input).ToHaveValueAsync("24");
+    }
+
+    [Test]
+    public async Task NumberInput_Increment_Multiple_Times()
+    {
+        await GoToFormsAsync();
+
+        var input = Input("input-age");
+        await input.FillAsync("10");
+        await Page.WaitForTimeoutAsync(100);
+
+        var incrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Increment']");
+        await incrementBtn.ClickAsync();
+        await Page.WaitForTimeoutAsync(50);
+        await incrementBtn.ClickAsync();
+        await Page.WaitForTimeoutAsync(50);
+        await incrementBtn.ClickAsync();
+        await Page.WaitForTimeoutAsync(100);
+
+        await Expect(input).ToHaveValueAsync("13");
+    }
+
+    [Test]
+    public async Task NumberInput_Increment_From_Empty_Sets_Value_To_One()
+    {
+        await GoToFormsAsync();
+
+        var input = Input("input-age");
+        await input.FillAsync("");
+        await Page.WaitForTimeoutAsync(100);
+
+        var incrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Increment']");
+        await incrementBtn.ClickAsync();
+        await Page.WaitForTimeoutAsync(100);
+
+        await Expect(input).ToHaveValueAsync("1");
+    }
+
+    [Test]
+    public async Task NumberInput_Decrement_From_Empty_Sets_Value_To_Negative_One_Or_Min()
+    {
+        await GoToFormsAsync();
+
+        var input = Input("input-age");
+        await input.FillAsync("");
+        await Page.WaitForTimeoutAsync(100);
+
+        var decrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Decrement']");
+        await decrementBtn.ClickAsync();
+        await Page.WaitForTimeoutAsync(100);
+
+        // Age has Min=0, so decrement from 0 (default) should clamp to 0
+        await Expect(input).ToHaveValueAsync("0");
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  NumberInput: Min / Max clamping
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task NumberInput_Increment_Button_Disabled_At_Max()
+    {
+        await GoToFormsAsync();
+
+        var input = Input("input-age");
+        await input.FillAsync("150"); // Max is 150
+        await Page.WaitForTimeoutAsync(100);
+
+        var incrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Increment']");
+        await Expect(incrementBtn).ToBeDisabledAsync();
+    }
+
+    [Test]
+    public async Task NumberInput_Decrement_Button_Disabled_At_Min()
+    {
+        await GoToFormsAsync();
+
+        var input = Input("input-age");
+        await input.FillAsync("0"); // Min is 0
+        await Page.WaitForTimeoutAsync(100);
+
+        var decrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Decrement']");
+        await Expect(decrementBtn).ToBeDisabledAsync();
+    }
+
+    [Test]
+    public async Task NumberInput_Increment_At_Max_Does_Not_Exceed()
+    {
+        await GoToFormsAsync();
+
+        var input = Input("input-age");
+        await input.FillAsync("149");
+        await Page.WaitForTimeoutAsync(100);
+
+        var incrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Increment']");
+        await incrementBtn.ClickAsync();
+        await Page.WaitForTimeoutAsync(100);
+
+        await Expect(input).ToHaveValueAsync("150");
+        await Expect(incrementBtn).ToBeDisabledAsync();
+    }
+
+    [Test]
+    public async Task NumberInput_Decrement_At_Min_Does_Not_Go_Below()
+    {
+        await GoToFormsAsync();
+
+        var input = Input("input-age");
+        await input.FillAsync("1");
+        await Page.WaitForTimeoutAsync(100);
+
+        var decrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Decrement']");
+        await decrementBtn.ClickAsync();
+        await Page.WaitForTimeoutAsync(100);
+
+        await Expect(input).ToHaveValueAsync("0");
+        await Expect(decrementBtn).ToBeDisabledAsync();
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  Popover: explicit open/close mechanics
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task Popover_Opens_On_Trigger_Click()
+    {
+        await GoToFormsAsync();
+
+        // Date input trigger opens a calendar popover
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        // The popover panel scoped to this trigger should be visible
+        var panel = PopoverPanelFor("trigger-birthdate");
+        await Expect(panel).ToBeVisibleAsync();
+    }
+
+    [Test]
+    public async Task Popover_Closes_On_Backdrop_Click()
+    {
+        await GoToFormsAsync();
+
+        // Open the time input popover
+        await Trigger("trigger-preferredtime").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-preferredtime");
+        await Expect(panel).ToBeVisibleAsync();
+
+        // Click the backdrop overlay to close
+        var backdrop = PopoverBackdropFor("trigger-preferredtime");
+        await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
+        await Page.WaitForTimeoutAsync(300);
+
+        // Popover should no longer be visible
+        await Expect(panel).ToBeHiddenAsync();
+    }
+
+    [Test]
+    public async Task Popover_Stays_Open_On_Content_Click()
+    {
+        await GoToFormsAsync();
+
+        // Open the date input popover
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-birthdate");
+        await Expect(panel).ToBeVisibleAsync();
+
+        // Click inside the popover content (e.g. the month header button) — should NOT close
+        var monthButton = panel.Locator("[data-calendar-month]");
+        await monthButton.ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        // Popover should still be visible (month picker is now showing)
+        await Expect(panel).ToBeVisibleAsync();
+    }
+
+    [Test]
+    public async Task Popover_Toggle_Opens_Then_Closes_Via_Backdrop()
+    {
+        await GoToFormsAsync();
+
+        var trigger = Trigger("trigger-birthdate");
+        var panel = PopoverPanelFor("trigger-birthdate");
+
+        // Open
+        await trigger.ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+        await Expect(panel).ToBeVisibleAsync();
+
+        // Close via backdrop
+        var backdrop = PopoverBackdropFor("trigger-birthdate");
+        await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
+        await Page.WaitForTimeoutAsync(300);
+        await Expect(panel).ToBeHiddenAsync();
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  Calendar: Previous / Next arrow buttons
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task Calendar_Next_Arrow_Advances_Month()
+    {
+        await GoToFormsAsync();
+
+        // Open calendar
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-birthdate");
+
+        // Read the current displayed month
+        var monthLabel = panel.Locator("[data-calendar-month]");
+        var initialMonth = await monthLabel.InnerTextAsync();
+
+        // Click the next arrow
+        await panel.Locator("button[aria-label='Next month']").ClickAsync();
+        await Page.WaitForTimeoutAsync(200);
+
+        // Month should have changed
+        var newMonth = await monthLabel.InnerTextAsync();
+        Assert.That(newMonth, Is.Not.EqualTo(initialMonth), "Month label should change after clicking Next");
+    }
+
+    [Test]
+    public async Task Calendar_Previous_Arrow_Goes_Back_Month()
+    {
+        await GoToFormsAsync();
+
+        // Open calendar
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-birthdate");
+
+        var monthLabel = panel.Locator("[data-calendar-month]");
+        var initialMonth = await monthLabel.InnerTextAsync();
+
+        // Click the previous arrow
+        await panel.Locator("button[aria-label='Previous month']").ClickAsync();
+        await Page.WaitForTimeoutAsync(200);
+
+        var newMonth = await monthLabel.InnerTextAsync();
+        Assert.That(newMonth, Is.Not.EqualTo(initialMonth), "Month label should change after clicking Previous");
+    }
+
+    [Test]
+    public async Task Calendar_Next_Arrow_Wraps_Year()
+    {
+        await GoToFormsAsync();
+
+        // Open calendar
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-birthdate");
+
+        // Navigate to Dec of current year
+        var target = new DateOnly(DateTime.Today.Year, 12, 1);
+        await NavigateCalendarToDate(panel, target);
+
+        var yearLabel = panel.Locator("[data-calendar-year]");
+        var initialYear = await yearLabel.InnerTextAsync();
+
+        // Click next — should go to Jan of next year
+        await panel.Locator("button[aria-label='Next month']").ClickAsync();
+        await Page.WaitForTimeoutAsync(200);
+
+        var monthLabel = panel.Locator("[data-calendar-month]");
+        var newMonth = await monthLabel.InnerTextAsync();
+        var newYear = await yearLabel.InnerTextAsync();
+
+        Assert.That(newMonth.Trim(), Is.EqualTo("Jan"), "Should wrap to January");
+        Assert.That(int.Parse(newYear.Trim()), Is.EqualTo(int.Parse(initialYear.Trim()) + 1), "Year should increment");
+    }
+
+    [Test]
+    public async Task Calendar_Previous_Arrow_Wraps_Year()
+    {
+        await GoToFormsAsync();
+
+        // Open calendar
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-birthdate");
+
+        var target = new DateOnly(DateTime.Today.Year, 1, 1);
+        await NavigateCalendarToDate(panel, target);
+
+        var yearLabel = panel.Locator("[data-calendar-year]");
+        var initialYear = await yearLabel.InnerTextAsync();
+
+        // Click previous — should go to Dec of previous year
+        await panel.Locator("button[aria-label='Previous month']").ClickAsync();
+        await Page.WaitForTimeoutAsync(200);
+
+        var monthLabel = panel.Locator("[data-calendar-month]");
+        var newMonth = await monthLabel.InnerTextAsync();
+        var newYear = await yearLabel.InnerTextAsync();
+
+        Assert.That(newMonth.Trim(), Is.EqualTo("Dec"), "Should wrap to December");
+        Assert.That(int.Parse(newYear.Trim()), Is.EqualTo(int.Parse(initialYear.Trim()) - 1), "Year should decrement");
+    }
+
+    [Test]
+    public async Task Calendar_Selecting_Day_Via_Arrow_Navigation()
+    {
+        await GoToFormsAsync();
+
+        // Open calendar
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-birthdate");
+
+        // Navigate forward one month using arrow
+        await panel.Locator("button[aria-label='Next month']").ClickAsync();
+        await Page.WaitForTimeoutAsync(200);
+
+        // Read the new month/year
+        var monthText = (await panel.Locator("[data-calendar-month]").InnerTextAsync()).Trim();
+        var yearText = (await panel.Locator("[data-calendar-year]").InnerTextAsync()).Trim();
+        var month = DateTime.ParseExact(monthText, "MMM", null).Month;
+        var year = int.Parse(yearText);
+
+        // Click day 15
+        var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
+        await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "15" }).First.ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        // Verify the hidden input has the correct value
+        var expected = new DateOnly(year, month, 15).ToString("yyyy-MM-dd");
+        await Expect(Input("input-birthdate")).ToHaveValueAsync(expected);
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  DateInput: Trigger text updates after selection
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task DateInput_Trigger_Shows_Placeholder_Initially()
+    {
+        await GoToFormsAsync();
+
+        var triggerSpan = Trigger("trigger-birthdate").Locator("span");
+        var text = await triggerSpan.InnerTextAsync();
+        Assert.That(text.Trim(), Is.EqualTo("Select date"), "Should show placeholder before a date is selected");
+    }
+
+    [Test]
+    public async Task DateInput_Trigger_Shows_Formatted_Date_After_Selection()
+    {
+        await GoToFormsAsync();
+
+        // Open and select June 15, 2000
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-birthdate");
+        await NavigateCalendarToDate(panel, new DateOnly(2000, 6, 15));
+
+        var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
+        await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "15" }).First.ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        // Trigger button text should now show the formatted date
+        var triggerSpan = Trigger("trigger-birthdate").Locator("span");
+        var text = (await triggerSpan.InnerTextAsync()).Trim();
+        Assert.That(text, Is.EqualTo("June 15, 2000"), "Trigger should display the formatted selected date");
+    }
+
+    [Test]
+    public async Task DateInput_Trigger_Text_Loses_Placeholder_Class_After_Selection()
+    {
+        await GoToFormsAsync();
+
+        var triggerSpan = Trigger("trigger-birthdate").Locator("span");
+
+        // Before selection — should have muted style
+        var classBefore = await triggerSpan.GetAttributeAsync("class");
+        Assert.That(classBefore, Does.Contain("text-muted-foreground"), "Placeholder text should have muted class");
+
+        // Select a date
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+        var panel = PopoverPanelFor("trigger-birthdate");
+        await NavigateCalendarToDate(panel, new DateOnly(2000, 6, 15));
+        var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
+        await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "15" }).First.ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        // After selection — should NOT have muted class
+        var classAfter = await triggerSpan.GetAttributeAsync("class");
+        Assert.That(classAfter, Does.Not.Contain("text-muted-foreground"), "Selected date text should not have muted class");
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  TimeInput: Trigger text updates after selection
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task TimeInput_Trigger_Shows_Placeholder_Initially()
+    {
+        await GoToFormsAsync();
+
+        var triggerSpan = Trigger("trigger-preferredtime").Locator("span");
+        var text = await triggerSpan.InnerTextAsync();
+        Assert.That(text.Trim(), Is.EqualTo("Select time"), "Should show placeholder before a time is selected");
+    }
+
+    [Test]
+    public async Task TimeInput_Trigger_Shows_Formatted_Time_After_Selection()
+    {
+        await GoToFormsAsync();
+
+        // Open time picker and select 2:30 PM
+        await Trigger("trigger-preferredtime").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-preferredtime");
+        await PickTimeInOpenPopover(panel, 14, 30);
+
+        // Close by clicking backdrop
+        var backdrop = PopoverBackdropFor("trigger-preferredtime");
+        await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
+        await Page.WaitForTimeoutAsync(300);
+
+        var triggerSpan = Trigger("trigger-preferredtime").Locator("span");
+        var text = (await triggerSpan.InnerTextAsync()).Trim();
+        Assert.That(text, Is.EqualTo("02:30 PM"), "Trigger should display the formatted selected time");
+    }
+
+    [Test]
+    public async Task TimeInput_Trigger_Text_Loses_Placeholder_Class_After_Selection()
+    {
+        await GoToFormsAsync();
+
+        var triggerSpan = Trigger("trigger-preferredtime").Locator("span");
+
+        // Before selection
+        var classBefore = await triggerSpan.GetAttributeAsync("class");
+        Assert.That(classBefore, Does.Contain("text-muted-foreground"), "Placeholder should have muted class");
+
+        // Select a time
+        await Trigger("trigger-preferredtime").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+        var panel = PopoverPanelFor("trigger-preferredtime");
+        await PickTimeInOpenPopover(panel, 14, 30);
+        var backdrop = PopoverBackdropFor("trigger-preferredtime");
+        await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
+        await Page.WaitForTimeoutAsync(300);
+
+        // After selection
+        var classAfter = await triggerSpan.GetAttributeAsync("class");
+        Assert.That(classAfter, Does.Not.Contain("text-muted-foreground"), "Selected time text should not have muted class");
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  DateTimeInput: Trigger text updates after selection
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task DateTimeInput_Date_Trigger_Shows_Placeholder_Initially()
+    {
+        await GoToFormsAsync();
+
+        var triggerSpan = Trigger("trigger-appointment-date").Locator("span");
+        var text = await triggerSpan.InnerTextAsync();
+        Assert.That(text.Trim(), Is.EqualTo("Select date"), "Date trigger should show placeholder initially");
+    }
+
+    [Test]
+    public async Task DateTimeInput_Time_Trigger_Shows_Placeholder_Initially()
+    {
+        await GoToFormsAsync();
+
+        var triggerSpan = Trigger("trigger-appointment-time").Locator("span");
+        var text = await triggerSpan.InnerTextAsync();
+        Assert.That(text.Trim(), Is.EqualTo("Select time"), "Time trigger should show placeholder initially");
+    }
+
+    [Test]
+    public async Task DateTimeInput_Date_Trigger_Shows_Formatted_Date_After_Selection()
+    {
+        await GoToFormsAsync();
+
+        // Open and select Dec 25, 2025
+        await Trigger("trigger-appointment-date").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-appointment-date");
+        await NavigateCalendarToDate(panel, new DateOnly(2025, 12, 25));
+        var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
+        await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "25" }).First.ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var triggerSpan = Trigger("trigger-appointment-date").Locator("span");
+        var text = (await triggerSpan.InnerTextAsync()).Trim();
+        Assert.That(text, Is.EqualTo("Dec 25, 2025"), "Date trigger should display the formatted selected date");
+    }
+
+    [Test]
+    public async Task DateTimeInput_Time_Trigger_Shows_Formatted_Time_After_Selection()
+    {
+        await GoToFormsAsync();
+
+        // Must select a date first so the component has a value
+        await Trigger("trigger-appointment-date").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+        var datePanel = PopoverPanelFor("trigger-appointment-date");
+        await NavigateCalendarToDate(datePanel, new DateOnly(2025, 12, 25));
+        var dayGrid = datePanel.Locator(".grid.grid-cols-7").Last;
+        await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "25" }).First.ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        // Now select time 10:00 AM
+        await Trigger("trigger-appointment-time").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+        var timePanel = PopoverPanelFor("trigger-appointment-time");
+        await PickTimeInOpenPopover(timePanel, 10, 0);
+        var backdrop = PopoverBackdropFor("trigger-appointment-time");
+        await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
+        await Page.WaitForTimeoutAsync(300);
+
+        var triggerSpan = Trigger("trigger-appointment-time").Locator("span");
+        var text = (await triggerSpan.InnerTextAsync()).Trim();
+        Assert.That(text, Is.EqualTo("10:00 AM"), "Time trigger should display the formatted selected time");
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  Calendar: day selection highlights correctly
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task Calendar_Selected_Day_Has_Primary_Styling()
+    {
+        await GoToFormsAsync();
+
+        // Open and select a date
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-birthdate");
+        var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
+        var day15 = dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "15" }).First;
+        await day15.ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        // Re-open the calendar to verify the selected day is highlighted
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        panel = PopoverPanelFor("trigger-birthdate");
+        var selectedDay = panel.Locator(".grid.grid-cols-7").Last
+            .Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "15" }).First;
+        var cls = await selectedDay.GetAttributeAsync("class");
+        Assert.That(cls, Does.Contain("bg-primary"), "Selected day should have primary background styling");
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  Popover: Date selection auto-closes popover
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task DateInput_Popover_Closes_After_Day_Selection()
+    {
+        await GoToFormsAsync();
+
+        await Trigger("trigger-birthdate").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor("trigger-birthdate");
+        await Expect(panel).ToBeVisibleAsync();
+
+        // Select a day
+        var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
+        await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "10" }).First.ClickAsync();
+        await Page.WaitForTimeoutAsync(400);
+
+        // Popover should auto-close after date selection
+        await Expect(panel).ToBeHiddenAsync();
+    }
+}

Enciphered.Blazor.UIComponents/Forms/Button.razor

@@ -3,7 +3,6 @@
 <button type="@Type"
         disabled="@Disabled"
         class="@ComputedClass"
-        @onclick="OnClick"
         @attributes="AdditionalAttributes">
     @if (Icon is not null)
     {
@@ -30,7 +29,6 @@
     /// </summary>
     [Parameter] public string Size { get; set; } = ButtonSize.Default;
 
-    [Parameter] public EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs> OnClick { get; set; }
     [Parameter] public string? Class { get; set; }
 
     [Parameter(CaptureUnmatchedValues = true)]

Enciphered.Blazor.UIComponents/Forms/Calendar.razor

@@ -1,7 +1,26 @@
 @namespace Enciphered.Blazor.UIComponents
 
-@* ── shadcn/ui-style calendar grid ────────────────────────────────────── *@
+@* ── shadcn/ui-style calendar grid (JS-driven) ───────────────────────── *@
-<div class="p-4" @attributes="AdditionalAttributes">
+@{
+    var displayDate = SelectedDate ?? DateOnly.FromDateTime(DateTime.Today);
+    var yearRangeStart = displayDate.Year - 10;
+    var yearRangeEnd = displayDate.Year + 10;
+    var selectedStr = SelectedDate.HasValue
+        ? SelectedDate.Value.ToString("yyyy-MM-dd")
+        : "";
+}
+
+<div class="p-4"
+     data-calendar
+     data-display-year="@displayDate.Year"
+     data-display-month="@displayDate.Month"
+     data-selected-date="@selectedStr"
+     data-view="days"
+     data-year-range-start="@yearRangeStart"
+     data-year-range-end="@yearRangeEnd"
+     data-linked-input="@LinkedInputId"
+     @attributes="AdditionalAttributes">
+
     @* ── Month / Year navigation ── *@
     <div class="flex items-center justify-between mb-3">
         <button type="button"
@@ -9,7 +28,7 @@
                        text-muted-foreground hover:bg-accent hover:text-accent-foreground
                        transition-colors cursor-pointer"
                 aria-label="Previous month"
-                @onclick="Previous">
+                data-calendar-prev>
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="m15 18-6-6 6-6"/>
@@ -19,15 +38,13 @@
         <div class="flex items-center gap-1.5 text-sm font-medium">
             <button type="button"
                     data-calendar-month
-                    class="px-2 py-0.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
+                    class="px-2 py-0.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer">
-                    @onclick="ToggleMonthPicker">
+                @displayDate.ToString("MMM")
-                @_displayDate.ToString("MMM")
             </button>
             <button type="button"
                     data-calendar-year
-                    class="px-2 py-0.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
+                    class="px-2 py-0.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer">
-                    @onclick="ToggleYearPicker">
+                @displayDate.Year
-                @_displayDate.Year
             </button>
         </div>
 
@@ -36,7 +53,7 @@
                        text-muted-foreground hover:bg-accent hover:text-accent-foreground
                        transition-colors cursor-pointer"
                 aria-label="Next month"
-                @onclick="Next">
+                data-calendar-next>
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="m9 18 6-6-6-6"/>
@@ -44,215 +61,51 @@
         </button>
     </div>
 
-    @if (_showMonthPicker)
+    @* ── Dynamic content area (rendered by JS) ── *@
-    {
+    <div data-calendar-content>
-        @* ── Month picker grid ── *@
+        @* Server-rendered initial day grid for SSR — JS will take over *@
-        <div class="grid grid-cols-3 gap-2 py-2">
+        @{
-            @for (int m = 1; m <= 12; m++)
+            var dayHeaders = new[] { "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" };
-            {
+            var firstOfMonth = new DateOnly(displayDate.Year, displayDate.Month, 1);
-                var month = m;
+            var startOffset = (int)firstOfMonth.DayOfWeek;
-                var isCurrentMonth = _displayDate.Month == month;
+            var start = firstOfMonth.AddDays(-startOffset);
-                <button type="button"
+            var today = DateOnly.FromDateTime(DateTime.Today);
-                        class="@($"h-9 rounded-md text-sm transition-colors cursor-pointer {(isCurrentMonth ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground")}")"
-                        @onclick="() => SelectMonth(month)">
-                    @(new DateOnly(2000, month, 1).ToString("MMM"))
-                </button>
         }
-        </div>
-    }
-    else if (_showYearPicker)
-    {
-        @* ── Year picker grid ── *@
-        <div class="grid grid-cols-4 gap-2 py-2 max-h-52 overflow-y-auto scrollbar-thin pr-1">
-            @for (int y = _yearRangeStart; y <= _yearRangeEnd; y++)
-            {
-                var year = y;
-                var isCurrentYear = _displayDate.Year == year;
-                <button type="button"
-                        class="@($"h-9 rounded-md text-sm transition-colors cursor-pointer {(isCurrentYear ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground")}")"
-                        @onclick="() => SelectYear(year)">
-                    @year
-                </button>
-            }
-        </div>
-    }
-    else
-    {
-        @* ── Day-of-week headers ── *@
         <div class="grid grid-cols-7 gap-1 mb-1">
-            @foreach (var dow in _dayHeaders)
+            @foreach (var dow in dayHeaders)
             {
-                <div class="h-9 w-9 flex items-center justify-center text-[0.8rem] text-muted-foreground font-medium">
+                <div class="h-9 w-9 flex items-center justify-center text-[0.8rem] text-muted-foreground font-medium">@dow</div>
-                    @dow
-                </div>
             }
         </div>
-
-        @* ── Day grid ── *@
         <div class="grid grid-cols-7 gap-1">
-            @foreach (var day in GetCalendarDays())
+            @for (int i = 0; i < 42; i++)
             {
-                var d = day;
+                var d = start.AddDays(i);
+                var isOutside = d.Month != displayDate.Month;
                 var isSelected = SelectedDate.HasValue && d == SelectedDate.Value;
-                var isToday = d == DateOnly.FromDateTime(DateTime.Today);
+                var isToday = d == today;
-                var isOutside = d.Month != _displayDate.Month;
+                var dateStr = d.ToString("yyyy-MM-dd");
 
-                <button type="button"
+                var cls = "h-9 w-9 inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer";
-                        class="@DayCellClass(isSelected, isToday, isOutside)"
+                if (isSelected) { cls += " bg-primary text-primary-foreground font-semibold"; }
-                        disabled="@isOutside"
+                else if (isOutside) { cls += " text-muted-foreground/40 cursor-default"; }
-                        @onclick="() => SelectDay(d)">
+                else if (isToday) { cls += " bg-accent text-accent-foreground font-medium"; }
-                    @d.Day
+                else { cls += " hover:bg-accent hover:text-accent-foreground"; }
-                </button>
+
+                <button type="button" class="@cls" disabled="@isOutside" data-calendar-day="@dateStr">@d.Day</button>
             }
         </div>
-    }
+    </div>
 </div>
 
 @code {
-    /// <summary>The currently selected date (two-way bindable).</summary>
+    /// <summary>The currently selected date.</summary>
     [Parameter] public DateOnly? SelectedDate { get; set; }
-    [Parameter] public EventCallback<DateOnly?> SelectedDateChanged { get; set; }
+
+    /// <summary>The id of the linked hidden input to update when a day is selected.</summary>
+    [Parameter] public string? LinkedInputId { get; set; }
 
     /// <summary>Any extra HTML attributes (data-testid, etc.).</summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
-
-    private DateOnly _displayDate;
-    private bool _showMonthPicker;
-    private bool _showYearPicker;
-    private int _yearRangeStart;
-    private int _yearRangeEnd;
-
-    private static readonly string[] _dayHeaders = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-
-    protected override void OnInitialized()
-    {
-        _displayDate = SelectedDate ?? DateOnly.FromDateTime(DateTime.Today);
-        UpdateYearRange();
-    }
-
-    protected override void OnParametersSet()
-    {
-        // If the selected date changes externally, navigate to that month
-        if (SelectedDate.HasValue && (SelectedDate.Value.Year != _displayDate.Year || SelectedDate.Value.Month != _displayDate.Month))
-        {
-            _displayDate = new DateOnly(SelectedDate.Value.Year, SelectedDate.Value.Month, 1);
-            UpdateYearRange();
-        }
-    }
-
-    // ── Navigation ───────────────────────────────────────────────────────
-
-    private void Previous()
-    {
-        if (_showYearPicker)
-        {
-            // Shift year range back by 20
-            _yearRangeStart -= 20;
-            _yearRangeEnd -= 20;
-        }
-        else if (_showMonthPicker)
-        {
-            _displayDate = new DateOnly(_displayDate.Year - 1, _displayDate.Month, 1);
-            UpdateYearRange();
-        }
-        else
-        {
-            _displayDate = _displayDate.AddMonths(-1);
-            UpdateYearRange();
-        }
-    }
-
-    private void Next()
-    {
-        if (_showYearPicker)
-        {
-            // Shift year range forward by 20
-            _yearRangeStart += 20;
-            _yearRangeEnd += 20;
-        }
-        else if (_showMonthPicker)
-        {
-            _displayDate = new DateOnly(_displayDate.Year + 1, _displayDate.Month, 1);
-            UpdateYearRange();
-        }
-        else
-        {
-            _displayDate = _displayDate.AddMonths(1);
-            UpdateYearRange();
-        }
-    }
-
-    private void ToggleMonthPicker()
-    {
-        _showMonthPicker = !_showMonthPicker;
-        _showYearPicker = false;
-    }
-
-    private void ToggleYearPicker()
-    {
-        _showYearPicker = !_showYearPicker;
-        _showMonthPicker = false;
-    }
-
-    private void SelectMonth(int month)
-    {
-        _displayDate = new DateOnly(_displayDate.Year, month, 1);
-        _showMonthPicker = false;
-    }
-
-    private void SelectYear(int year)
-    {
-        _displayDate = new DateOnly(year, _displayDate.Month, 1);
-        _showYearPicker = false;
-        UpdateYearRange();
-    }
-
-    private void UpdateYearRange()
-    {
-        _yearRangeStart = _displayDate.Year - 10;
-        _yearRangeEnd = _displayDate.Year + 10;
-    }
-
-    // ── Day selection ────────────────────────────────────────────────────
-
-    private async Task SelectDay(DateOnly date)
-    {
-        SelectedDate = date;
-        _displayDate = new DateOnly(date.Year, date.Month, 1);
-        await SelectedDateChanged.InvokeAsync(date);
-    }
-
-    // ── Calendar generation ──────────────────────────────────────────────
-
-    private List<DateOnly> GetCalendarDays()
-    {
-        var days = new List<DateOnly>();
-        var firstOfMonth = new DateOnly(_displayDate.Year, _displayDate.Month, 1);
-        var startOffset = (int)firstOfMonth.DayOfWeek; // Sunday = 0
-
-        // Previous month's trailing days
-        var start = firstOfMonth.AddDays(-startOffset);
-        // Always show 6 rows (42 cells) for consistent height
-        for (int i = 0; i < 42; i++)
-            days.Add(start.AddDays(i));
-
-        return days;
-    }
-
-    // ── CSS ──────────────────────────────────────────────────────────────
-
-    private static string DayCellClass(bool isSelected, bool isToday, bool isOutside)
-    {
-        const string baseClass = "h-9 w-9 inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer";
-
-        if (isSelected)
-            return $"{baseClass} bg-primary text-primary-foreground font-semibold";
-        if (isOutside)
-            return $"{baseClass} text-muted-foreground/40 cursor-default";
-        if (isToday)
-            return $"{baseClass} bg-accent text-accent-foreground font-medium";
-
-        return $"{baseClass} hover:bg-accent hover:text-accent-foreground";
-    }
 }

Enciphered.Blazor.UIComponents/Forms/DateInput.razor

@@ -6,19 +6,20 @@
        id="@Id"
        name="@Name"
        value="@FormatValue()"
+       data-trigger-id="@($"trigger-{Id}")"
+       data-placeholder="@(Placeholder ?? "Select date")"
        class="sr-only"
        tabindex="-1"
        aria-hidden="true"
        disabled="@Disabled"
        @attributes="AdditionalAttributes" />
 
-<Popover @ref="_popover">
+<Popover>
     <Trigger>
         <button type="button"
                 disabled="@Disabled"
                 data-testid="@($"trigger-{Id}")"
-                class="@TriggerClass"
+                class="@TriggerClass">
-                @onclick="() => _popover?.Toggle()">
             @* Lucide calendar icon *@
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -33,7 +34,7 @@
         </button>
     </Trigger>
     <Content>
-        <Calendar SelectedDate="@Value" SelectedDateChanged="OnCalendarDateChanged" />
+        <Calendar SelectedDate="@Value" LinkedInputId="@Id" />
     </Content>
 </Popover>
 
@@ -41,8 +42,6 @@
     [Parameter] public string? Min { get; set; }
     [Parameter] public string? Max { get; set; }
 
-    private Popover? _popover;
-
     private string? FormatValue() =>
         Value?.ToString("yyyy-MM-dd");
 
@@ -56,26 +55,9 @@
                 "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
                 "disabled:cursor-not-allowed disabled:opacity-50";
 
-            var validation = GetTriggerValidationClass();
             return string.IsNullOrEmpty(Class)
-                ? $"{baseClass} {validation}"
+                ? $"{baseClass} border-input"
-                : $"{baseClass} {validation} {Class}";
+                : $"{baseClass} border-input {Class}";
         }
     }
-
-    [CascadingParameter] private EditContext? _cascadedEditContext { get; set; }
-
-    private string GetTriggerValidationClass()
-    {
-        if (_cascadedEditContext is null || FieldId is not { } fi) return "border-input";
-        return _cascadedEditContext.GetValidationMessages(fi).Any()
-            ? "border-destructive focus-visible:ring-destructive"
-            : "border-input";
-    }
-
-    private async Task OnCalendarDateChanged(DateOnly? date)
-    {
-        await SetValueAsync(date);
-        _popover?.Close();
-    }
 }

Enciphered.Blazor.UIComponents/Forms/DateTimeInput.razor

@@ -12,16 +12,29 @@
        disabled="@Disabled"
        @attributes="AdditionalAttributes" />
 
+@* Hidden helper inputs for JS to write date/time portions separately *@
+<input type="hidden" id="@($"{Id}-date-part")"
+       value="@(SelectedDateOnly?.ToString("yyyy-MM-dd") ?? "")"
+       data-trigger-id="@($"trigger-{Id}-date")"
+       data-placeholder="@(Placeholder ?? "Select date")"
+       data-datetime-part="date"
+       data-datetime-input-id="@Id" />
+<input type="hidden" id="@($"{Id}-time-part")"
+       value="@(SelectedTimeOnly.HasValue ? SelectedTimeOnly.Value.ToString("HH:mm") : "")"
+       data-trigger-id="@($"trigger-{Id}-time")"
+       data-placeholder="Select time"
+       data-datetime-part="time"
+       data-datetime-input-id="@Id" />
+
 @* ── Two side-by-side triggers: date field + time field ── *@
 <div class="flex gap-2">
     @* ── Date portion ── *@
-    <Popover @ref="_datePopover">
+    <Popover>
         <Trigger>
             <button type="button"
                     disabled="@Disabled"
                     data-testid="@($"trigger-{Id}-date")"
-                    class="@TriggerClass"
+                    class="@TriggerClass">
-                    @onclick="() => _datePopover?.Toggle()">
                 @* Lucide calendar icon *@
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                      fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -36,18 +49,17 @@
             </button>
         </Trigger>
         <Content>
-            <Calendar SelectedDate="@SelectedDateOnly" SelectedDateChanged="OnDatePartChanged" />
+            <Calendar SelectedDate="@SelectedDateOnly" LinkedInputId="@($"{Id}-date-part")" />
         </Content>
     </Popover>
 
     @* ── Time portion ── *@
-    <Popover @ref="_timePopover">
+    <Popover>
         <Trigger>
             <button type="button"
                     disabled="@Disabled"
                     data-testid="@($"trigger-{Id}-time")"
-                    class="@TriggerClass"
+                    class="@TriggerClass">
-                    @onclick="() => _timePopover?.Toggle()">
                 @* Lucide clock icon *@
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                      fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -61,7 +73,7 @@
             </button>
         </Trigger>
         <Content>
-            <TimePicker SelectedTime="@SelectedTimeOnly" SelectedTimeChanged="OnTimePartChanged" Use12Hour="true" />
+            <TimePicker SelectedTime="@SelectedTimeOnly" Use12Hour="true" LinkedInputId="@($"{Id}-time-part")" />
         </Content>
     </Popover>
 </div>
@@ -75,9 +87,6 @@
     /// </summary>
     [Parameter] public string? Step { get; set; }
 
-    private Popover? _datePopover;
-    private Popover? _timePopover;
-
     private DateOnly? SelectedDateOnly =>
         Value.HasValue ? DateOnly.FromDateTime(Value.Value) : null;
 
@@ -97,35 +106,9 @@
                 "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
                 "disabled:cursor-not-allowed disabled:opacity-50";
 
-            var validation = GetTriggerValidationClass();
             return string.IsNullOrEmpty(Class)
-                ? $"{baseClass} {validation}"
+                ? $"{baseClass} border-input"
-                : $"{baseClass} {validation} {Class}";
+                : $"{baseClass} border-input {Class}";
         }
     }
-
-    [CascadingParameter] private EditContext? _cascadedEditContext { get; set; }
-
-    private string GetTriggerValidationClass()
-    {
-        if (_cascadedEditContext is null || FieldId is not { } fi) return "border-input";
-        return _cascadedEditContext.GetValidationMessages(fi).Any()
-            ? "border-destructive focus-visible:ring-destructive"
-            : "border-input";
-    }
-
-    private async Task OnDatePartChanged(DateOnly? date)
-    {
-        if (date is null) return;
-        var timePart = SelectedTimeOnly ?? new TimeOnly(0, 0);
-        await SetValueAsync(date.Value.ToDateTime(timePart));
-        _datePopover?.Close();
-    }
-
-    private async Task OnTimePartChanged(TimeOnly? time)
-    {
-        if (time is null) return;
-        var datePart = SelectedDateOnly ?? DateOnly.FromDateTime(DateTime.Today);
-        await SetValueAsync(datePart.ToDateTime(time.Value));
-    }
 }

Enciphered.Blazor.UIComponents/Forms/InputBase.cs

@@ -1,23 +1,17 @@
-using System.Diagnostics.CodeAnalysis;
-using System.Linq.Expressions;
 using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Forms;
 
 namespace Enciphered.Blazor.UIComponents;
 
 /// <summary>
-/// Abstract base for all form input components.  Provides two-way binding
+/// Abstract base for all form input components.  Provides parameter declarations
-/// (<see cref="Value"/>/<see cref="ValueChanged"/>/<see cref="ValueExpression"/>),
+/// for value, id, name, disabled state, and CSS class computation.
-/// optional <see cref="EditContext"/> integration for validation CSS,
+/// All interactivity is handled by the forms.js module.
-/// and attribute splatting via <see cref="AdditionalAttributes"/>.
 /// </summary>
 public abstract class InputBase<TValue> : ComponentBase
 {
-    // ── Two-way binding triad ────────────────────────────────────────────────
+    // ── Value (for initial SSR render) ───────────────────────────────────────
 
     [Parameter] public TValue? Value { get; set; }
-    [Parameter] public EventCallback<TValue> ValueChanged { get; set; }
-    [Parameter] public Expression<Func<TValue>>? ValueExpression { get; set; }
 
     // ── Common parameters ────────────────────────────────────────────────────
 
@@ -36,37 +30,6 @@ public abstract class InputBase<TValue> : ComponentBase
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
-    // ── EditContext integration (optional) ────────────────────────────────────
-
-    [CascadingParameter] private EditContext? EditContext { get; set; }
-
-    private FieldIdentifier? _fieldIdentifier;
-
-    protected FieldIdentifier? FieldId => _fieldIdentifier;
-
-    // ── Lifecycle ────────────────────────────────────────────────────────────
-
-    protected override void OnParametersSet()
-    {
-        if (ValueExpression is not null)
-            _fieldIdentifier = FieldIdentifier.Create(ValueExpression);
-    }
-
-    // ── Value helpers ────────────────────────────────────────────────────────
-
-    /// <summary>
-    /// Called by derived components when the user changes the value.
-    /// Fires <see cref="ValueChanged"/> and notifies the <see cref="EditContext"/>.
-    /// </summary>
-    protected async Task SetValueAsync(TValue? value)
-    {
-        Value = value;
-        await ValueChanged.InvokeAsync(value);
-
-        if (EditContext is not null && _fieldIdentifier is FieldIdentifier fi)
-            EditContext.NotifyFieldChanged(fi);
-    }
-
     // ── CSS helpers ──────────────────────────────────────────────────────────
 
     private const string BaseInputClass =
@@ -76,25 +39,15 @@ public abstract class InputBase<TValue> : ComponentBase
         "disabled:cursor-not-allowed disabled:opacity-50";
 
     /// <summary>
-    /// Computes the full CSS class string: base + validation state + consumer override.
+    /// Computes the full CSS class string: base + consumer override.
     /// </summary>
     protected string ComputedClass
     {
         get
         {
-            var validation = GetValidationClass();
             return string.IsNullOrEmpty(Class)
-                ? string.IsNullOrEmpty(validation) ? BaseInputClass : $"{BaseInputClass} {validation}"
+                ? BaseInputClass
-                : string.IsNullOrEmpty(validation) ? $"{BaseInputClass} {Class}" : $"{BaseInputClass} {validation} {Class}";
+                : $"{BaseInputClass} {Class}";
         }
     }
-
-    private string? GetValidationClass()
-    {
-        if (EditContext is null || _fieldIdentifier is not FieldIdentifier fi)
-            return null;
-
-        var isValid = !EditContext.GetValidationMessages(fi).Any();
-        return isValid ? "border-input" : "border-destructive focus-visible:ring-destructive";
-    }
 }

Enciphered.Blazor.UIComponents/Forms/NumberInput.razor

@@ -1,7 +1,7 @@
 @namespace Enciphered.Blazor.UIComponents
 @inherits InputBase<double?>
 
-<div class="relative flex items-center">
+<div class="relative flex items-center" data-number-input>
     <input id="@Id"
            name="@Name"
            type="number"
@@ -13,7 +13,6 @@
            min="@Min"
            max="@Max"
            class="@ComputedClass [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none pr-8"
-           @oninput="OnInput"
            @attributes="AdditionalAttributes" />
 
     @if (!Disabled && !ReadOnly)
@@ -26,7 +25,7 @@
                            hover:text-foreground hover:bg-accent transition-colors
                            rounded-tr-md cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
                     disabled="@IsAtMax"
-                    @onclick="Increment">
+                    data-number-increment>
                 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
                      fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="m18 15-6-6-6 6"/>
@@ -40,7 +39,7 @@
                            hover:text-foreground hover:bg-accent transition-colors
                            rounded-br-md cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
                     disabled="@IsAtMin"
-                    @onclick="Decrement">
+                    data-number-decrement>
                 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
                      fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="m6 9 6 6 6-6"/>
@@ -55,38 +54,9 @@
     [Parameter] public string? Min { get; set; }
     [Parameter] public string? Max { get; set; }
 
-    private double StepValue => double.TryParse(Step, out var s) ? s : 1;
-    private double? MinValue => double.TryParse(Min, out var m) ? m : null;
     private double? MaxValue => double.TryParse(Max, out var m) ? m : null;
+    private double? MinValue => double.TryParse(Min, out var m) ? m : null;
 
     private bool IsAtMax => Value.HasValue && MaxValue.HasValue && Value.Value >= MaxValue.Value;
     private bool IsAtMin => Value.HasValue && MinValue.HasValue && Value.Value <= MinValue.Value;
-
-    private async Task OnInput(ChangeEventArgs e)
-    {
-        var raw = e.Value?.ToString();
-        if (double.TryParse(raw, out var parsed))
-            await SetValueAsync(Clamp(parsed));
-        else if (string.IsNullOrWhiteSpace(raw))
-            await SetValueAsync(null);
-    }
-
-    private async Task Increment()
-    {
-        var current = Value ?? 0;
-        await SetValueAsync(Clamp(current + StepValue));
-    }
-
-    private async Task Decrement()
-    {
-        var current = Value ?? 0;
-        await SetValueAsync(Clamp(current - StepValue));
-    }
-
-    private double Clamp(double value)
-    {
-        if (MinValue.HasValue && value < MinValue.Value) return MinValue.Value;
-        if (MaxValue.HasValue && value > MaxValue.Value) return MaxValue.Value;
-        return value;
-    }
 }

Enciphered.Blazor.UIComponents/Forms/Popover.razor

@@ -1,20 +1,19 @@
 @namespace Enciphered.Blazor.UIComponents
 
-@* ── Generic popover: trigger + dropdown panel ───────────────────────── *@
+@* ── Generic popover: trigger + dropdown panel (JS-driven) ──────────── *@
-<div class="relative inline-block w-full" @attributes="AdditionalAttributes">
+<div class="relative inline-block w-full" data-popover data-popover-open="false" @attributes="AdditionalAttributes">
+    <div data-popover-trigger>
         @Trigger
+    </div>
 
-    @if (_open)
-    {
     @* Backdrop to close on outside click *@
-        <div class="fixed inset-0 z-40" @onclick="Close" @onclick:stopPropagation></div>
+    <div class="fixed inset-0 z-40" data-popover-backdrop style="display:none"></div>
 
     <div class="absolute left-0 z-50 mt-1.5 rounded-lg border border-input bg-popover text-popover-foreground shadow-md
                 animate-in fade-in-0 zoom-in-95 origin-top-left"
-             @onclick:stopPropagation>
+         data-popover-panel style="display:none">
         @Content
     </div>
-    }
 </div>
 
 @code {
@@ -24,35 +23,7 @@
     /// <summary>The popover content.</summary>
     [Parameter] public RenderFragment? Content { get; set; }
 
-    /// <summary>Any extra HTML attributes.</summary>
+    /// <summary>Any extra HTML attributes (data-testid, etc.).</summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
-
-    private bool _open;
-
-    /// <summary>Toggle the popover open/closed. Call from the trigger button.</summary>
-    public void Toggle()
-    {
-        _open = !_open;
-        StateHasChanged();
-    }
-
-    /// <summary>Close the popover.</summary>
-    public void Close()
-    {
-        if (!_open) return;
-        _open = false;
-        StateHasChanged();
-    }
-
-    /// <summary>Open the popover.</summary>
-    public void Open()
-    {
-        if (_open) return;
-        _open = true;
-        StateHasChanged();
-    }
-
-    /// <summary>Whether the popover is currently open.</summary>
-    public bool IsOpen => _open;
 }

Enciphered.Blazor.UIComponents/Forms/TextInput.razor

@@ -9,7 +9,6 @@
        disabled="@Disabled"
        readonly="@ReadOnly"
        class="@ComputedClass"
-       @oninput="OnInput"
        @attributes="AdditionalAttributes" />
 
 @code {
@@ -18,9 +17,4 @@
     /// Supports: text, email, password, url, tel, search.
     /// </summary>
     [Parameter] public string Type { get; set; } = "text";
-
-    private async Task OnInput(ChangeEventArgs e)
-    {
-        await SetValueAsync(e.Value?.ToString());
-    }
 }

Enciphered.Blazor.UIComponents/Forms/TimeInput.razor

@@ -6,19 +6,20 @@
        id="@Id"
        name="@Name"
        value="@FormatValue()"
+       data-trigger-id="@($"trigger-{Id}")"
+       data-placeholder="@(Placeholder ?? "Select time")"
        class="sr-only"
        tabindex="-1"
        aria-hidden="true"
        disabled="@Disabled"
        @attributes="AdditionalAttributes" />
 
-<Popover @ref="_popover">
+<Popover>
     <Trigger>
         <button type="button"
                 disabled="@Disabled"
                 data-testid="@($"trigger-{Id}")"
-                class="@TriggerClass"
+                class="@TriggerClass">
-                @onclick="() => _popover?.Toggle()">
             @* Lucide clock icon *@
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -32,7 +33,7 @@
         </button>
     </Trigger>
     <Content>
-        <TimePicker SelectedTime="@Value" SelectedTimeChanged="OnTimeChanged" Use12Hour="true" MinuteStep="@ParsedMinuteStep" />
+        <TimePicker SelectedTime="@Value" Use12Hour="true" MinuteStep="@ParsedMinuteStep" LinkedInputId="@Id" />
     </Content>
 </Popover>
 
@@ -45,8 +46,6 @@
     /// <summary>Use 12-hour format with AM/PM. Default is true.</summary>
     [Parameter] public bool Use12Hour { get; set; } = true;
 
-    private Popover? _popover;
-
     private int ParsedMinuteStep => int.TryParse(Step, out var s) && s >= 60 ? s / 60 : 1;
 
     private string? FormatValue() =>
@@ -62,25 +61,9 @@
                 "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
                 "disabled:cursor-not-allowed disabled:opacity-50";
 
-            var validation = GetTriggerValidationClass();
             return string.IsNullOrEmpty(Class)
-                ? $"{baseClass} {validation}"
+                ? $"{baseClass} border-input"
-                : $"{baseClass} {validation} {Class}";
+                : $"{baseClass} border-input {Class}";
         }
     }
-
-    [CascadingParameter] private EditContext? _cascadedEditContext { get; set; }
-
-    private string GetTriggerValidationClass()
-    {
-        if (_cascadedEditContext is null || FieldId is not { } fi) return "border-input";
-        return _cascadedEditContext.GetValidationMessages(fi).Any()
-            ? "border-destructive focus-visible:ring-destructive"
-            : "border-input";
-    }
-
-    private async Task OnTimeChanged(TimeOnly? time)
-    {
-        await SetValueAsync(time);
-    }
 }

Enciphered.Blazor.UIComponents/Forms/TimePicker.razor

@@ -1,19 +1,50 @@
 @namespace Enciphered.Blazor.UIComponents
 
-@* ── shadcn/ui-style time picker with scrollable columns ─────────────── *@
+@* ── shadcn/ui-style time picker with scrollable columns (JS-driven) ── *@
-<div class="flex items-stretch gap-1 p-4" @attributes="AdditionalAttributes">
+@{
+    var use12 = Use12Hour;
+    var minStep = MinuteStep < 1 ? 1 : MinuteStep;
+    var selHour = 0;
+    var selMinute = 0;
+    var isPm = false;
+
+    if (SelectedTime is { } t)
+    {
+        if (use12)
+        {
+            isPm = t.Hour >= 12;
+            selHour = t.Hour % 12;
+            selMinute = t.Minute;
+        }
+        else
+        {
+            selHour = t.Hour;
+            selMinute = t.Minute;
+        }
+    }
+}
+
+<div class="flex items-stretch gap-1 p-4"
+     data-timepicker
+     data-selected-hour="@selHour"
+     data-selected-minute="@selMinute"
+     data-selected-pm="@(isPm ? "true" : "false")"
+     data-use-12-hour="@(use12 ? "true" : "false")"
+     data-linked-input="@LinkedInputId"
+     @attributes="AdditionalAttributes">
+
     @* ── Hour column ── *@
     <div class="flex flex-col items-center">
         <span class="text-xs font-medium text-muted-foreground mb-2">Hr</span>
         <div class="h-52 w-16 overflow-y-auto flex flex-col gap-1 scrollbar-thin pr-1">
-            @for (int h = 0; h < (_use12Hour ? 12 : 24); h++)
+            @for (int h = 0; h < (use12 ? 12 : 24); h++)
             {
-                var hour = _use12Hour ? (h == 0 ? 12 : h) : h;
+                var hour = use12 ? (h == 0 ? 12 : h) : h;
                 var hourValue = h;
-                var isSelected = _selectedHour == hourValue;
+                var isSelected = selHour == hourValue;
                 <button type="button"
                         class="@TimeItemClass(isSelected)"
-                        @onclick="() => SelectHour(hourValue)">
+                        data-tp-hour="@hourValue">
                     @hour.ToString("D2")
                 </button>
             }
@@ -26,20 +57,20 @@
     <div class="flex flex-col items-center">
         <span class="text-xs font-medium text-muted-foreground mb-2">Min</span>
         <div class="h-52 w-16 overflow-y-auto flex flex-col gap-1 scrollbar-thin pr-1">
-            @for (int m = 0; m < 60; m += _minuteStep)
+            @for (int m = 0; m < 60; m += minStep)
             {
                 var minute = m;
-                var isSelected = _selectedMinute == minute;
+                var isSel = selMinute == minute;
                 <button type="button"
-                        class="@TimeItemClass(isSelected)"
+                        class="@TimeItemClass(isSel)"
-                        @onclick="() => SelectMinute(minute)">
+                        data-tp-minute="@minute">
                     @minute.ToString("D2")
                 </button>
             }
         </div>
     </div>
 
-    @if (_use12Hour)
+    @if (use12)
     {
         <div class="flex items-center px-1"></div>
 
@@ -48,13 +79,13 @@
             <span class="text-xs font-medium text-muted-foreground mb-2">  </span>
             <div class="flex flex-col gap-1">
                 <button type="button"
-                        class="@TimeItemClass(!_isPm)"
+                        class="@TimeItemClass(!isPm)"
-                        @onclick='() => SelectPeriod(false)'>
+                        data-tp-period="am">
                     AM
                 </button>
                 <button type="button"
-                        class="@TimeItemClass(_isPm)"
+                        class="@TimeItemClass(isPm)"
-                        @onclick='() => SelectPeriod(true)'>
+                        data-tp-period="pm">
                     PM
                 </button>
             </div>
@@ -63,9 +94,8 @@
 </div>
 
 @code {
-    /// <summary>The currently selected time (two-way bindable).</summary>
+    /// <summary>The currently selected time (for initial render).</summary>
     [Parameter] public TimeOnly? SelectedTime { get; set; }
-    [Parameter] public EventCallback<TimeOnly?> SelectedTimeChanged { get; set; }
 
     /// <summary>Use 12-hour format with AM/PM. Default is false (24-hour).</summary>
     [Parameter] public bool Use12Hour { get; set; }
@@ -73,74 +103,13 @@
     /// <summary>Minute step interval. Default is 1.</summary>
     [Parameter] public int MinuteStep { get; set; } = 1;
 
+    /// <summary>The id of the linked hidden input to sync time value to.</summary>
+    [Parameter] public string? LinkedInputId { get; set; }
+
     /// <summary>Any extra HTML attributes.</summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
-    private int _selectedHour;
-    private int _selectedMinute;
-    private bool _isPm;
-    private bool _use12Hour;
-    private int _minuteStep = 1;
-
-    protected override void OnInitialized()
-    {
-        _use12Hour = Use12Hour;
-        _minuteStep = MinuteStep < 1 ? 1 : MinuteStep;
-        ApplyFromValue();
-    }
-
-    protected override void OnParametersSet()
-    {
-        _use12Hour = Use12Hour;
-        _minuteStep = MinuteStep < 1 ? 1 : MinuteStep;
-        ApplyFromValue();
-    }
-
-    private void ApplyFromValue()
-    {
-        if (SelectedTime is { } t)
-        {
-            if (_use12Hour)
-            {
-                _isPm = t.Hour >= 12;
-                _selectedHour = t.Hour % 12;
-                _selectedMinute = t.Minute;
-            }
-            else
-            {
-                _selectedHour = t.Hour;
-                _selectedMinute = t.Minute;
-            }
-        }
-    }
-
-    private async Task SelectHour(int hour)
-    {
-        _selectedHour = hour;
-        await EmitValue();
-    }
-
-    private async Task SelectMinute(int minute)
-    {
-        _selectedMinute = minute;
-        await EmitValue();
-    }
-
-    private async Task SelectPeriod(bool isPm)
-    {
-        _isPm = isPm;
-        await EmitValue();
-    }
-
-    private async Task EmitValue()
-    {
-        var hour = _use12Hour ? (_selectedHour % 12) + (_isPm ? 12 : 0) : _selectedHour;
-        var time = new TimeOnly(hour, _selectedMinute);
-        SelectedTime = time;
-        await SelectedTimeChanged.InvokeAsync(time);
-    }
-
     private static string TimeItemClass(bool isSelected)
     {
         const string baseClass = "h-9 w-full inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer";

Enciphered.Blazor.UIComponents/wwwroot/js/forms.js

@@ -0,0 +1,648 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+ *  Forms Module — handles all interactive form behaviour via vanilla JS.
+ *  Manages: Popover open/close, Calendar navigation & day selection,
+ *  TimePicker hour/minute/period selection, NumberInput +/- stepping.
+ *  Survives Blazor enhanced-navigation via MutationObserver.
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+let initialized = false;
+let bodyObserver = null;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Popover ──────────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+function openPopover(wrapper) {
+    const panel = wrapper.querySelector('[data-popover-panel]');
+    const backdrop = wrapper.querySelector('[data-popover-backdrop]');
+    if (!panel) return;
+    panel.style.display = '';
+    if (backdrop) backdrop.style.display = '';
+    wrapper.setAttribute('data-popover-open', 'true');
+}
+
+function closePopover(wrapper) {
+    const panel = wrapper.querySelector('[data-popover-panel]');
+    const backdrop = wrapper.querySelector('[data-popover-backdrop]');
+    if (!panel) return;
+    panel.style.display = 'none';
+    if (backdrop) backdrop.style.display = 'none';
+    wrapper.setAttribute('data-popover-open', 'false');
+}
+
+function togglePopover(wrapper) {
+    const isOpen = wrapper.getAttribute('data-popover-open') === 'true';
+    if (isOpen) closePopover(wrapper);
+    else openPopover(wrapper);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Calendar ─────────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+const DAY_HEADERS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTH_NAMES_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function getCalendarState(cal) {
+    return {
+        displayYear: parseInt(cal.getAttribute('data-display-year')),
+        displayMonth: parseInt(cal.getAttribute('data-display-month')),
+        selectedDate: cal.getAttribute('data-selected-date') || '',
+        view: cal.getAttribute('data-view') || 'days', // 'days' | 'months' | 'years'
+        yearRangeStart: parseInt(cal.getAttribute('data-year-range-start') || '0'),
+        yearRangeEnd: parseInt(cal.getAttribute('data-year-range-end') || '0'),
+    };
+}
+
+function setCalendarState(cal, state) {
+    cal.setAttribute('data-display-year', state.displayYear);
+    cal.setAttribute('data-display-month', state.displayMonth);
+    if (state.selectedDate !== undefined) cal.setAttribute('data-selected-date', state.selectedDate);
+    cal.setAttribute('data-view', state.view);
+    cal.setAttribute('data-year-range-start', state.yearRangeStart);
+    cal.setAttribute('data-year-range-end', state.yearRangeEnd);
+    renderCalendar(cal);
+}
+
+function getCalendarDays(year, month) {
+    const days = [];
+    const firstOfMonth = new Date(year, month - 1, 1);
+    const startOffset = firstOfMonth.getDay(); // Sunday = 0
+    const start = new Date(firstOfMonth);
+    start.setDate(start.getDate() - startOffset);
+    for (let i = 0; i < 42; i++) {
+        const d = new Date(start);
+        d.setDate(d.getDate() + i);
+        days.push(d);
+    }
+    return days;
+}
+
+function formatDateISO(d) {
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2, '0');
+    const dd = String(d.getDate()).padStart(2, '0');
+    return `${yyyy}-${mm}-${dd}`;
+}
+
+function parseDateISO(str) {
+    if (!str) return null;
+    const [y, m, d] = str.split('-').map(Number);
+    return new Date(y, m - 1, d);
+}
+
+function isSameDay(a, b) {
+    return a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate();
+}
+
+function renderCalendar(cal) {
+    const state = getCalendarState(cal);
+    const contentEl = cal.querySelector('[data-calendar-content]');
+    if (!contentEl) return;
+
+    // Update header labels
+    const monthLabel = cal.querySelector('[data-calendar-month]');
+    const yearLabel = cal.querySelector('[data-calendar-year]');
+    if (monthLabel) monthLabel.textContent = MONTH_NAMES_SHORT[state.displayMonth - 1];
+    if (yearLabel) yearLabel.textContent = state.displayYear;
+
+    const selectedParsed = parseDateISO(state.selectedDate);
+    const today = new Date();
+
+    if (state.view === 'months') {
+        contentEl.innerHTML = renderMonthPicker(state);
+    } else if (state.view === 'years') {
+        contentEl.innerHTML = renderYearPicker(state);
+    } else {
+        contentEl.innerHTML = renderDayGrid(state, selectedParsed, today);
+    }
+}
+
+function renderDayGrid(state, selectedParsed, today) {
+    const baseBtn = 'h-9 w-9 inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer';
+
+    let html = '<div class="grid grid-cols-7 gap-1 mb-1">';
+    for (const dow of DAY_HEADERS) {
+        html += `<div class="h-9 w-9 flex items-center justify-center text-[0.8rem] text-muted-foreground font-medium">${dow}</div>`;
+    }
+    html += '</div><div class="grid grid-cols-7 gap-1">';
+
+    const days = getCalendarDays(state.displayYear, state.displayMonth);
+    for (const d of days) {
+        const isOutside = d.getMonth() !== state.displayMonth - 1;
+        const isSelected = selectedParsed && isSameDay(d, selectedParsed);
+        const isToday = isSameDay(d, today);
+        const dateStr = formatDateISO(d);
+
+        let cls = baseBtn;
+        if (isSelected) cls += ' bg-primary text-primary-foreground font-semibold';
+        else if (isOutside) cls += ' text-muted-foreground/40 cursor-default';
+        else if (isToday) cls += ' bg-accent text-accent-foreground font-medium';
+        else cls += ' hover:bg-accent hover:text-accent-foreground';
+
+        html += `<button type="button" class="${cls}" ${isOutside ? 'disabled' : ''} data-calendar-day="${dateStr}">${d.getDate()}</button>`;
+    }
+    html += '</div>';
+    return html;
+}
+
+function renderMonthPicker(state) {
+    let html = '<div class="grid grid-cols-3 gap-2 py-2">';
+    for (let m = 0; m < 12; m++) {
+        const isCurrent = state.displayMonth === m + 1;
+        const cls = isCurrent
+            ? 'h-9 rounded-md text-sm transition-colors cursor-pointer bg-primary text-primary-foreground'
+            : 'h-9 rounded-md text-sm transition-colors cursor-pointer hover:bg-accent hover:text-accent-foreground';
+        html += `<button type="button" class="${cls}" data-calendar-select-month="${m + 1}">${MONTH_NAMES_SHORT[m]}</button>`;
+    }
+    html += '</div>';
+    return html;
+}
+
+function renderYearPicker(state) {
+    let html = '<div class="grid grid-cols-4 gap-2 py-2 max-h-52 overflow-y-auto scrollbar-thin pr-1">';
+    for (let y = state.yearRangeStart; y <= state.yearRangeEnd; y++) {
+        const isCurrent = state.displayYear === y;
+        const cls = isCurrent
+            ? 'h-9 rounded-md text-sm transition-colors cursor-pointer bg-primary text-primary-foreground'
+            : 'h-9 rounded-md text-sm transition-colors cursor-pointer hover:bg-accent hover:text-accent-foreground';
+        html += `<button type="button" class="${cls}" data-calendar-select-year="${y}">${y}</button>`;
+    }
+    html += '</div>';
+    return html;
+}
+
+function calendarPrev(cal) {
+    const state = getCalendarState(cal);
+    if (state.view === 'years') {
+        state.yearRangeStart -= 20;
+        state.yearRangeEnd -= 20;
+    } else if (state.view === 'months') {
+        state.displayYear--;
+        state.yearRangeStart = state.displayYear - 10;
+        state.yearRangeEnd = state.displayYear + 10;
+    } else {
+        state.displayMonth--;
+        if (state.displayMonth < 1) { state.displayMonth = 12; state.displayYear--; }
+        state.yearRangeStart = state.displayYear - 10;
+        state.yearRangeEnd = state.displayYear + 10;
+    }
+    setCalendarState(cal, state);
+}
+
+function calendarNext(cal) {
+    const state = getCalendarState(cal);
+    if (state.view === 'years') {
+        state.yearRangeStart += 20;
+        state.yearRangeEnd += 20;
+    } else if (state.view === 'months') {
+        state.displayYear++;
+        state.yearRangeStart = state.displayYear - 10;
+        state.yearRangeEnd = state.displayYear + 10;
+    } else {
+        state.displayMonth++;
+        if (state.displayMonth > 12) { state.displayMonth = 1; state.displayYear++; }
+        state.yearRangeStart = state.displayYear - 10;
+        state.yearRangeEnd = state.displayYear + 10;
+    }
+    setCalendarState(cal, state);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── TimePicker ───────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+function getTimePickerState(tp) {
+    return {
+        hour: parseInt(tp.getAttribute('data-selected-hour') || '0'),
+        minute: parseInt(tp.getAttribute('data-selected-minute') || '0'),
+        isPm: tp.getAttribute('data-selected-pm') === 'true',
+        use12Hour: tp.getAttribute('data-use-12-hour') === 'true',
+    };
+}
+
+function setTimePickerState(tp, state) {
+    tp.setAttribute('data-selected-hour', state.hour);
+    tp.setAttribute('data-selected-minute', state.minute);
+    tp.setAttribute('data-selected-pm', state.isPm);
+    renderTimePicker(tp);
+}
+
+function renderTimePicker(tp) {
+    const state = getTimePickerState(tp);
+
+    // Update selected states on buttons
+    tp.querySelectorAll('[data-tp-hour]').forEach(btn => {
+        const val = parseInt(btn.getAttribute('data-tp-hour'));
+        updateTimeItemSelected(btn, val === state.hour);
+    });
+    tp.querySelectorAll('[data-tp-minute]').forEach(btn => {
+        const val = parseInt(btn.getAttribute('data-tp-minute'));
+        updateTimeItemSelected(btn, val === state.minute);
+    });
+    tp.querySelectorAll('[data-tp-period]').forEach(btn => {
+        const isPm = btn.getAttribute('data-tp-period') === 'pm';
+        updateTimeItemSelected(btn, isPm === state.isPm);
+    });
+}
+
+function updateTimeItemSelected(btn, isSelected) {
+    const base = 'h-9 w-full inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer';
+    if (isSelected) {
+        btn.className = base + ' bg-primary text-primary-foreground font-semibold';
+    } else {
+        btn.className = base + ' hover:bg-accent hover:text-accent-foreground';
+    }
+}
+
+function getTimePickerValue(tp) {
+    const state = getTimePickerState(tp);
+    let hour = state.hour;
+    if (state.use12Hour) {
+        hour = (state.hour % 12) + (state.isPm ? 12 : 0);
+    }
+    return { hour, minute: state.minute };
+}
+
+function formatTime24(hour, minute) {
+    return String(hour).padStart(2, '0') + ':' + String(minute).padStart(2, '0');
+}
+
+function formatTime12(hour, minute) {
+    const isPm = hour >= 12;
+    let h12 = hour % 12;
+    if (h12 === 0) h12 = 12;
+    return String(h12).padStart(2, '0') + ':' + String(minute).padStart(2, '0') + ' ' + (isPm ? 'PM' : 'AM');
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── NumberInput ──────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+function handleNumberIncrement(wrapper, direction) {
+    const input = wrapper.querySelector('input[type="number"]');
+    if (!input) return;
+
+    const step = parseFloat(input.getAttribute('step')) || 1;
+    const min = input.hasAttribute('min') ? parseFloat(input.getAttribute('min')) : null;
+    const max = input.hasAttribute('max') ? parseFloat(input.getAttribute('max')) : null;
+
+    let current = parseFloat(input.value) || 0;
+    current += step * direction;
+
+    // Clamp
+    if (min !== null && current < min) current = min;
+    if (max !== null && current > max) current = max;
+
+    input.value = current;
+    // Fire native input event so forms pick it up
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+
+    // Update disabled state on buttons
+    updateStepperDisabledState(wrapper);
+}
+
+function updateStepperDisabledState(wrapper) {
+    const input = wrapper.querySelector('input[type="number"]');
+    if (!input) return;
+
+    const min = input.hasAttribute('min') ? parseFloat(input.getAttribute('min')) : null;
+    const max = input.hasAttribute('max') ? parseFloat(input.getAttribute('max')) : null;
+    const val = parseFloat(input.value);
+
+    const incBtn = wrapper.querySelector('[data-number-increment]');
+    const decBtn = wrapper.querySelector('[data-number-decrement]');
+
+    if (incBtn) {
+        incBtn.disabled = (max !== null && !isNaN(val) && val >= max);
+    }
+    if (decBtn) {
+        decBtn.disabled = (min !== null && !isNaN(val) && val <= min);
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Trigger text sync (DateInput / TimeInput / DateTimeInput) ────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+function syncDateTriggerText(hiddenInput) {
+    const triggerId = hiddenInput.getAttribute('data-trigger-id');
+    if (!triggerId) return;
+    const trigger = document.querySelector(`[data-testid="${triggerId}"]`);
+    if (!trigger) return;
+    const span = trigger.querySelector('span');
+    if (!span) return;
+
+    const val = hiddenInput.value;
+    if (val) {
+        const [y, m, d] = val.split('-').map(Number);
+        const date = new Date(y, m - 1, d);
+        // DateTime date-parts use short month ("Dec 25, 2025"),
+        // standalone DateInput uses long month ("December 25, 2025")
+        const isDateTimePart = hiddenInput.hasAttribute('data-datetime-part');
+        const options = isDateTimePart
+            ? { month: 'short', day: 'numeric', year: 'numeric' }
+            : { month: 'long', day: 'numeric', year: 'numeric' };
+        span.textContent = date.toLocaleDateString('en-US', options);
+        span.classList.remove('text-muted-foreground');
+    } else {
+        span.textContent = hiddenInput.getAttribute('data-placeholder') || 'Select date';
+        span.classList.add('text-muted-foreground');
+    }
+}
+
+function syncTimeTriggerText(hiddenInput) {
+    const triggerId = hiddenInput.getAttribute('data-trigger-id');
+    if (!triggerId) return;
+    const trigger = document.querySelector(`[data-testid="${triggerId}"]`);
+    if (!trigger) return;
+    const span = trigger.querySelector('span');
+    if (!span) return;
+
+    const val = hiddenInput.value;
+    if (val) {
+        const [h, m] = val.split(':').map(Number);
+        span.textContent = formatTime12(h, m);
+        span.classList.remove('text-muted-foreground');
+    } else {
+        span.textContent = hiddenInput.getAttribute('data-placeholder') || 'Select time';
+        span.classList.add('text-muted-foreground');
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Global click handler ─────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+function handleClick(e) {
+    const target = e.target;
+
+    // ── Popover trigger ──
+    const popoverTrigger = target.closest('[data-popover-trigger]');
+    if (popoverTrigger) {
+        const wrapper = popoverTrigger.closest('[data-popover]');
+        if (wrapper) {
+            e.stopPropagation();
+            togglePopover(wrapper);
+            return;
+        }
+    }
+
+    // ── Popover backdrop (close on outside click) ──
+    const backdrop = target.closest('[data-popover-backdrop]');
+    if (backdrop) {
+        const wrapper = backdrop.closest('[data-popover]');
+        if (wrapper) {
+            e.stopPropagation();
+            closePopover(wrapper);
+            return;
+        }
+    }
+
+    // ── Calendar: Previous button ──
+    const prevBtn = target.closest('[data-calendar-prev]');
+    if (prevBtn) {
+        const cal = prevBtn.closest('[data-calendar]');
+        if (cal) { calendarPrev(cal); return; }
+    }
+
+    // ── Calendar: Next button ──
+    const nextBtn = target.closest('[data-calendar-next]');
+    if (nextBtn) {
+        const cal = nextBtn.closest('[data-calendar]');
+        if (cal) { calendarNext(cal); return; }
+    }
+
+    // ── Calendar: Month header toggle ──
+    const monthHeader = target.closest('[data-calendar-month]');
+    if (monthHeader) {
+        const cal = monthHeader.closest('[data-calendar]');
+        if (cal) {
+            const state = getCalendarState(cal);
+            state.view = state.view === 'months' ? 'days' : 'months';
+            setCalendarState(cal, state);
+            return;
+        }
+    }
+
+    // ── Calendar: Year header toggle ──
+    const yearHeader = target.closest('[data-calendar-year]');
+    if (yearHeader) {
+        const cal = yearHeader.closest('[data-calendar]');
+        if (cal) {
+            const state = getCalendarState(cal);
+            state.view = state.view === 'years' ? 'days' : 'years';
+            setCalendarState(cal, state);
+            return;
+        }
+    }
+
+    // ── Calendar: Select month ──
+    const monthBtn = target.closest('[data-calendar-select-month]');
+    if (monthBtn) {
+        const cal = monthBtn.closest('[data-calendar]');
+        if (cal) {
+            const state = getCalendarState(cal);
+            state.displayMonth = parseInt(monthBtn.getAttribute('data-calendar-select-month'));
+            state.view = 'days';
+            setCalendarState(cal, state);
+            return;
+        }
+    }
+
+    // ── Calendar: Select year ──
+    const yearBtn = target.closest('[data-calendar-select-year]');
+    if (yearBtn) {
+        const cal = yearBtn.closest('[data-calendar]');
+        if (cal) {
+            const state = getCalendarState(cal);
+            state.displayYear = parseInt(yearBtn.getAttribute('data-calendar-select-year'));
+            state.view = 'days';
+            state.yearRangeStart = state.displayYear - 10;
+            state.yearRangeEnd = state.displayYear + 10;
+            setCalendarState(cal, state);
+            return;
+        }
+    }
+
+    // ── Calendar: Select day ──
+    const dayBtn = target.closest('[data-calendar-day]');
+    if (dayBtn && !dayBtn.disabled) {
+        const cal = dayBtn.closest('[data-calendar]');
+        if (cal) {
+            const dateStr = dayBtn.getAttribute('data-calendar-day');
+            const [y, m, d] = dateStr.split('-').map(Number);
+            const state = getCalendarState(cal);
+            state.selectedDate = dateStr;
+            state.displayYear = y;
+            state.displayMonth = m;
+            setCalendarState(cal, state);
+
+            // Update the linked hidden input
+            const inputId = cal.getAttribute('data-linked-input');
+            if (inputId) {
+                const hiddenInput = document.getElementById(inputId);
+                if (hiddenInput) {
+                    hiddenInput.value = dateStr;
+                    hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
+                    syncDateTriggerText(hiddenInput);
+                }
+            }
+
+            // Auto-close popover parent
+            const popover = cal.closest('[data-popover]');
+            if (popover) closePopover(popover);
+            return;
+        }
+    }
+
+    // ── TimePicker: Select hour ──
+    const hourBtn = target.closest('[data-tp-hour]');
+    if (hourBtn) {
+        const tp = hourBtn.closest('[data-timepicker]');
+        if (tp) {
+            const state = getTimePickerState(tp);
+            state.hour = parseInt(hourBtn.getAttribute('data-tp-hour'));
+            setTimePickerState(tp, state);
+            syncTimeToHiddenInput(tp);
+            return;
+        }
+    }
+
+    // ── TimePicker: Select minute ──
+    const minuteBtn = target.closest('[data-tp-minute]');
+    if (minuteBtn) {
+        const tp = minuteBtn.closest('[data-timepicker]');
+        if (tp) {
+            const state = getTimePickerState(tp);
+            state.minute = parseInt(minuteBtn.getAttribute('data-tp-minute'));
+            setTimePickerState(tp, state);
+            syncTimeToHiddenInput(tp);
+            return;
+        }
+    }
+
+    // ── TimePicker: Select AM/PM ──
+    const periodBtn = target.closest('[data-tp-period]');
+    if (periodBtn) {
+        const tp = periodBtn.closest('[data-timepicker]');
+        if (tp) {
+            const state = getTimePickerState(tp);
+            state.isPm = periodBtn.getAttribute('data-tp-period') === 'pm';
+            setTimePickerState(tp, state);
+            syncTimeToHiddenInput(tp);
+            return;
+        }
+    }
+
+    // ── NumberInput: Increment ──
+    const incBtn = target.closest('[data-number-increment]');
+    if (incBtn) {
+        const wrapper = incBtn.closest('[data-number-input]');
+        if (wrapper) { handleNumberIncrement(wrapper, 1); return; }
+    }
+
+    // ── NumberInput: Decrement ──
+    const decBtn = target.closest('[data-number-decrement]');
+    if (decBtn) {
+        const wrapper = decBtn.closest('[data-number-input]');
+        if (wrapper) { handleNumberIncrement(wrapper, -1); return; }
+    }
+}
+
+function syncTimeToHiddenInput(tp) {
+    const inputId = tp.getAttribute('data-linked-input');
+    if (!inputId) return;
+    const hiddenInput = document.getElementById(inputId);
+    if (!hiddenInput) return;
+
+    const { hour, minute } = getTimePickerValue(tp);
+    hiddenInput.value = formatTime24(hour, minute);
+    hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
+    syncTimeTriggerText(hiddenInput);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Global input handler (for NumberInput stepper disabled state) ─────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+function handleInput(e) {
+    const target = e.target;
+    if (target.matches('[data-number-input] input[type="number"]')) {
+        const wrapper = target.closest('[data-number-input]');
+        if (wrapper) updateStepperDisabledState(wrapper);
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Init all static calendars/timepickers on the page ────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+function initComponents() {
+    // Render all calendars
+    document.querySelectorAll('[data-calendar]').forEach(cal => {
+        renderCalendar(cal);
+    });
+
+    // Render all timepickers
+    document.querySelectorAll('[data-timepicker]').forEach(tp => {
+        renderTimePicker(tp);
+    });
+
+    // Init all number input stepper states
+    document.querySelectorAll('[data-number-input]').forEach(wrapper => {
+        updateStepperDisabledState(wrapper);
+    });
+
+    // Ensure all popovers start closed
+    document.querySelectorAll('[data-popover]').forEach(wrapper => {
+        if (wrapper.getAttribute('data-popover-open') !== 'true') {
+            closePopover(wrapper);
+        }
+    });
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Lifecycle ────────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function init() {
+    if (initialized) {
+        initComponents();
+        return;
+    }
+    initialized = true;
+
+    initComponents();
+
+    document.addEventListener('click', handleClick);
+    document.addEventListener('input', handleInput);
+
+    // Watch for Blazor enhanced-nav replacing content
+    document.addEventListener('blazor:enhanced-load', () => {
+        initComponents();
+    });
+
+    // Body observer for dynamic content
+    bodyObserver = new MutationObserver(() => {
+        // If new calendars/timepickers/popovers appeared, init them
+        const uninitCals = document.querySelectorAll('[data-calendar]:not([data-initialized])');
+        uninitCals.forEach(cal => {
+            cal.setAttribute('data-initialized', 'true');
+            renderCalendar(cal);
+        });
+    });
+    bodyObserver.observe(document.body, { childList: true, subtree: true });
+}
+
+export function dispose() {
+    document.removeEventListener('click', handleClick);
+    document.removeEventListener('input', handleInput);
+    bodyObserver?.disconnect();
+    bodyObserver = null;
+    initialized = false;
+}