Add carousel navigation and the mixed checkbox state, without script

These were left out because daisyUI does them with scripts or with links that
<base href="/"> breaks.

DCarousel:
- ShowNavigation adds previous/next links on each slide, and ShowIndicators adds
  a row of numbered links under the strip.
- The links point at the slides' ids under the current path, so Blazor treats
  them as same-page fragments and scrolls the strip.

DCheckbox:
- Indeterminate renders aria-checked="mixed", which daisyUI draws like
  :indeterminate.
- A click clears it through IndeterminateChanged.
- The neo inset well leaves the mixed state alone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw

Components/Daisy/DataDisplay/DCarousel.razor

@@ -1,15 +1,45 @@
 @inherits DComponentBase
+@inject NavigationManager NavigationManager
 
 @* daisyUI Carousel: https://daisyui.com/components/carousel/ . A scroll-snap strip of DCarouselItem children; the
-   user scrolls or swipes it. Give each item w-full for one slide at a time. *@
+   user scrolls or swipes it. Give each item w-full for one slide at a time. ShowNavigation (previous/next on every
-<div @attributes="AdditionalAttributes" class="@CssClass">
+   slide) and ShowIndicators (numbered buttons under the strip) are links to the slides' ids, as in daisyUI's examples:
-	@ChildContent
+   they keep the current path, so Blazor treats them as same-page fragments and scrolls the slide into view. *@
+<CascadingValue Value="this" IsFixed="true">
+	@if (ShowIndicators)
+	{
+		<div class="flex flex-col gap-2">
+			@Strip
+			<div class="flex w-full justify-center gap-2">
+				@for (var i = 0; i < items.Count; i++)
+				{
+					<a href="@Link(i)" class="btn btn-xs" aria-label="@($"{SlideText} {i + 1}")">@(i + 1)</a>
+				}
 			</div>
+		</div>
+	}
+	else
+	{
+		@Strip
+	}
+</CascadingValue>
 
 @code {
 	[Parameter] public RenderFragment ChildContent { get; set; }
 	[Parameter] public DCarouselSnap Snap { get; set; }
 	[Parameter] public DDirection Direction { get; set; }
+	/// <summary>Previous/next buttons on every slide.</summary>
+	[Parameter] public bool ShowNavigation { get; set; }
+	/// <summary>A row of numbered buttons under the strip, one per slide.</summary>
+	[Parameter] public bool ShowIndicators { get; set; }
+	[Parameter] public string PreviousText { get; set; } = "Previous slide";
+	[Parameter] public string NextText { get; set; } = "Next slide";
+	[Parameter] public string SlideText { get; set; } = "Slide";
+
+	readonly List<DCarouselItem> items = new();
+	readonly string uid = "d" + Guid.NewGuid().ToString("N")[..8];
+
+	RenderFragment Strip => @<div @attributes="AdditionalAttributes" class="@CssClass">@ChildContent</div>;
 
 	string CssClass => Cx("carousel", SnapClass, Direction == DDirection.Vertical ? "carousel-vertical" : null, Class);
 
@@ -19,4 +49,32 @@
 		DCarouselSnap.End => "carousel-end",
 		_ => null
 	};
+
+	internal int Count => items.Count;
+
+	internal int IndexOf(DCarouselItem item) => items.IndexOf(item);
+
+	internal string SlideId(int index) => $"{uid}-{index + 1}";
+
+	/// <summary>The current page plus the slide's fragment; the index wraps around.</summary>
+	internal string Link(int index)
+	{
+		var path = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
+		var hash = path.IndexOf('#');
+		if (hash >= 0)
+			path = path[..hash];
+		return $"{path}#{SlideId((index % items.Count + items.Count) % items.Count)}";
+	}
+
+	internal void Add(DCarouselItem item)
+	{
+		items.Add(item);
+		StateHasChanged();
+	}
+
+	internal void Remove(DCarouselItem item)
+	{
+		items.Remove(item);
+		StateHasChanged();
+	}
 }

Components/Daisy/DataDisplay/DCarouselItem.razor

@@ -1,10 +1,28 @@
 @inherits DComponentBase
+@implements IDisposable
 
-@* One slide of a DCarousel. *@
+@* One slide of a DCarousel. It registers with the carousel for its id and, with ShowNavigation, draws the
-<div @attributes="AdditionalAttributes" class="@Cx("carousel-item", Class)">
+   previous/next links over itself. *@
+<div @attributes="AdditionalAttributes" id="@Id" class="@Cx("carousel-item", HasNavigation ? "relative" : null, Class)">
 	@ChildContent
+	@if (HasNavigation)
+	{
+		<div class="absolute inset-x-2 top-1/2 flex -translate-y-1/2 justify-between">
+			<a href="@Parent.Link(Index - 1)" class="btn btn-circle btn-sm" aria-label="@Parent.PreviousText">❮</a>
+			<a href="@Parent.Link(Index + 1)" class="btn btn-circle btn-sm" aria-label="@Parent.NextText">❯</a>
+		</div>
+	}
 </div>
 
 @code {
+	[CascadingParameter] DCarousel Parent { get; set; }
 	[Parameter] public RenderFragment ChildContent { get; set; }
+
+	int Index => Parent?.IndexOf(this) ?? -1;
+	string Id => Parent is null ? null : Parent.SlideId(Index);
+	bool HasNavigation => Parent is { ShowNavigation: true, Count: > 1 };
+
+	protected override void OnInitialized() => Parent?.Add(this);
+
+	public void Dispose() => Parent?.Remove(this);
 }

Components/Daisy/DataInput/DCheckbox.razor

@@ -1,7 +1,8 @@
 @inherits DInputBase<bool>
 
 @* daisyUI Checkbox: https://daisyui.com/components/checkbox/ . With LabelText the checkbox sits in a <label class="label">
-   followed by the text, as in daisyUI's fieldset examples. *@
+   followed by the text, as in daisyUI's fieldset examples. Indeterminate renders aria-checked="mixed", which daisyUI
+   draws like the :indeterminate state that only script could set. *@
 @if (LabelText is null)
 {
 	@Checkbox
@@ -18,11 +19,15 @@ else
 	[Parameter] public DColor Color { get; set; }
 	[Parameter] public DSize Size { get; set; }
 	[Parameter] public string LabelText { get; set; }
+	/// <summary>The mixed state; a click clears it and reports false through IndeterminateChanged.</summary>
+	[Parameter] public bool Indeterminate { get; set; }
+	[Parameter] public EventCallback<bool> IndeterminateChanged { get; set; }
 
 	string CssClassFull => Cx("checkbox", IsInvalid ? "checkbox-error" : ColorClass, SizeClass, CssClass);
 
-	RenderFragment Checkbox => @<input @attributes="InputAttributes" type="checkbox" class="@CssClassFull" name="@NameAttributeValue"
+	RenderFragment Checkbox => @<input @attributes="InputAttributes" type="checkbox" class="@CssClassFull" name="@NameAttribute"
-									   checked="@CurrentValue" @onchange="OnChange" aria-invalid="@(IsInvalid ? "true" : null)" />;
+									   checked="@CurrentValue" @onchange="OnChange" aria-checked="@(Indeterminate ? "mixed" : null)"
+									   aria-invalid="@(IsInvalid ? "true" : null)" />;
 
 	string ColorClass => Color switch
 	{
@@ -46,5 +51,13 @@ else
 		_ => null
 	};
 
-	void OnChange(ChangeEventArgs e) => CurrentValue = e.Value is true;
+	async Task OnChange(ChangeEventArgs e)
+	{
+		CurrentValue = e.Value is true;
+		if (Indeterminate)
+		{
+			Indeterminate = false;
+			await IndeterminateChanged.InvokeAsync(false);
+		}
+	}
 }

Components/Styleguide/DataInputSection.razor

@@ -120,6 +120,7 @@
 				<DCheckbox @bind-Value="check" disabled />
 			</div>
 			<DCheckbox @bind-Value="check" Color="DColor.Primary" LabelText="@($"Checked: {check}")" />
+			<DCheckbox @bind-Value="mixedCheck" @bind-Indeterminate="mixed" LabelText="@(mixed ? "Indeterminate (click to clear)" : $"Checked: {mixedCheck}")" />
 			<DCheckbox @bind-Value="model.Terms" LabelText="I accept the terms (must be checked)" />
 			<ValidationMessage For="() => model.Terms" class="text-error text-xs" />
 		</section>
@@ -333,6 +334,8 @@
 </EditForm>
 
 @code {
+	bool mixedCheck;
+	bool mixed = true;
 	class DemoModel
 	{
 		[Required] public string Name { get; set; }

Styles/neo.css

@@ -191,7 +191,7 @@
 
 /* Selectors: an inset well while unchecked; once checked they keep daisyUI's filled look. */
 @utility checkbox {
-	&:not(:where(:checked, :indeterminate, [aria-checked="true"], :disabled)) {
+	&:not(:where(:checked, :indeterminate, [aria-checked="true"], [aria-checked="mixed"], :disabled)) {
 		border-color: transparent;
 		background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
 		box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);