updating from auto to none, and some placement of the control fixes

Author: kgeller

src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css

@@ -40,7 +40,6 @@
 
 .carousel-control {
 	position: absolute;
-	top: 100px; /* Fixed distance from top */
 	background-color: rgba(0, 0, 0, 0.5);
 	border: none;
 	color: white;
@@ -93,6 +92,21 @@
 	background-color: black;
 }
 
+/* Small carousel styles */
+.carousel-container[data-max-height][style*="350px"] .carousel-control {
+	top: 150px;
+}
+
+/* Medium carousel styles */
+.carousel-container[data-max-height][style*="750px"] .carousel-control {
+	top: 200px;
+}
+
+/* None (no max-height) carousel styles */
+.carousel-container[data-none-height] .carousel-control {
+	top: 500px;
+}
+
 /* Max height carousel styles */
 .carousel-container[data-max-height] {
 	padding-bottom: 40px; /* Space for indicators */
@@ -111,12 +125,12 @@
 	margin: 0 auto;
 }
 
-/* Auto height carousel styles - images at natural size */
-.carousel-container[data-auto-height] {
+/* None height carousel styles - images at natural size */
+.carousel-container[data-none-height] {
 	padding-bottom: 40px; /* Space for indicators */
 }
 
-.carousel-container[data-auto-height] .carousel-image-reference img {
+.carousel-container[data-none-height] .carousel-image-reference img {
 	max-width: 100%;
 	height: auto;
 	display: block;

src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselBlock.cs

@@ -27,10 +27,10 @@ public override void FinalizeAndValidate(ParserContext context)
 		// Validate max-height option
 		if (!string.IsNullOrEmpty(MaxHeight))
 		{
-			var validHeights = new[] { "auto", "small", "medium" };
+			var validHeights = new[] { "none", "small", "medium" };
 			if (!validHeights.Contains(MaxHeight.ToLower()))
 			{
-				this.EmitWarning($"Invalid max-height value '{MaxHeight}'. Valid options are: auto, small, medium. Defaulting to 'auto'.");
+				this.EmitWarning($"Invalid max-height value '{MaxHeight}'. Valid options are: none, small, medium. Defaulting to 'none'.");
 			}
 		}
 

src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml

@@ -6,14 +6,14 @@
     {
         "small" => "350px",
         "medium" => "750px",
-        "auto" => "none",  // Auto means no max-height constraint
+        "none" => "none",  // None means no max-height constraint
         null or "" => null,
         _ => null // Default to none for invalid values
     };
 
-    var hasMaxHeight = !string.IsNullOrEmpty(pixelHeight) && maxHeightValue != null;
+    var hasMaxHeight = !string.IsNullOrEmpty(pixelHeight) && maxHeightValue != null && maxHeightValue != "none";
     var containerStyle = hasMaxHeight ? $"--carousel-max-height: {pixelHeight};" : "";
-    var dataAttribute = maxHeightValue == "auto" ? "data-auto-height" : (hasMaxHeight ? "data-max-height" : "");
+    var dataAttribute = maxHeightValue == "none" ? "data-none-height" : (hasMaxHeight ? "data-max-height" : "");
 }
 <div class="carousel-container" @dataAttribute style="@containerStyle">
     <div class="carousel-track">

tests/Elastic.Markdown.Tests/Directives/ImageCarouselTests.cs

@@ -85,7 +85,7 @@ public void ParsesSmallMaxHeight()
 public class ImageCarouselWithAutoHeightTests(ITestOutputHelper output) : DirectiveTest<ImageCarouselBlock>(output,
 """
 :::{carousel}
-:max-height: auto
+:max-height: none
 
 ```{image} img/auto.png
 :alt: Auto height image
@@ -98,9 +98,9 @@ protected override void AddToFileSystem(MockFileSystem fileSystem) =>
 		fileSystem.AddFile(@"docs/img/auto.png", "");
 
 	[Fact]
-	public void ParsesAutoMaxHeight()
+	public void ParsesNoneMaxHeight()
 	{
-		Block!.MaxHeight.Should().Be("auto");
+		Block!.MaxHeight.Should().Be("none");
 		Collector.Diagnostics.Count.Should().Be(0);
 	}
 }
@@ -130,7 +130,7 @@ public void WarnsOnInvalidMaxHeight()
 
 		var warning = Collector.Diagnostics.First();
 		warning.Message.Should().Contain("Invalid max-height value 'large'");
-		warning.Message.Should().Contain("Valid options are: auto, small, medium");
+		warning.Message.Should().Contain("Valid options are: none, small, medium");
 	}
 }