From 385a3daac3fa110fb6750c9745b72111283eed41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Dev=20=F0=9F=87=B7=F0=9F=87=BC?=
 <kevinkalisa84@gmail.com>
Date: Wed, 15 Jul 2026 18:01:26 +0200
Subject: [PATCH] fix(docs-infra): fix chevron visibility in aria tree example

Ensure consistent alignment of tree items by always rendering the expand-icon
placeholder. Leaf nodes display the placeholder invisibly using visibility: hidden,
maintaining proper spacing that aligns with parent nodes.

This fixes the visual inconsistency where leaf nodes appeared misaligned compared
to parent nodes due to the missing chevron placeholder.
---
 .../aria/tree/src/single-select/basic/app/app.css      |  4 ++++
 .../aria/tree/src/single-select/basic/app/app.html     | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/adev/src/content/examples/aria/tree/src/single-select/basic/app/app.css b/adev/src/content/examples/aria/tree/src/single-select/basic/app/app.css
index fabb8511f8b6..4798de96f706 100644
--- a/adev/src/content/examples/aria/tree/src/single-select/basic/app/app.css
+++ b/adev/src/content/examples/aria/tree/src/single-select/basic/app/app.css
@@ -54,6 +54,10 @@
   transition: transform 0.2s ease;
 }
 
+.expand-icon.hidden {
+  visibility: hidden;
+}
+
 [ngTreeItem][aria-expanded='true'] .expand-icon {
   transform: rotate(90deg);
 }
diff --git a/adev/src/content/examples/aria/tree/src/single-select/basic/app/app.html b/adev/src/content/examples/aria/tree/src/single-select/basic/app/app.html
index 9710d95df31e..e6ea86c9cf54 100644
--- a/adev/src/content/examples/aria/tree/src/single-select/basic/app/app.html
+++ b/adev/src/content/examples/aria/tree/src/single-select/basic/app/app.html
@@ -16,9 +16,13 @@
       [(expanded)]="node.expanded"
       #treeItem="ngTreeItem"
     >
-      <span aria-hidden="true" class="material-symbols-outlined expand-icon" translate="no">{{
-        node.children ? 'chevron_right' : ''
-      }}</span>
+      <span
+        aria-hidden="true"
+        class="material-symbols-outlined expand-icon"
+        [class.hidden]="!node.children"
+        translate="no"
+        >chevron_right</span
+      >
       <span aria-hidden="true" class="material-symbols-outlined" translate="no">{{
         node.children ? 'folder' : 'docs'
       }}</span>