Small design adjustments to API page

Author: JesusValeraDev

css/components/dark-mode.css

@@ -421,8 +421,22 @@
   color: var(--color-phel-accent);
 }
 
+.dark .api-namespace-toggle-text {
+  color: var(--color-phel-accent);
+  opacity: 0.8;
+}
+
+.dark .api-namespace-toggle:hover .api-namespace-toggle-text {
+  opacity: 1;
+}
+
 .dark .api-namespace-icon {
   color: var(--color-phel-accent);
+  opacity: 0.8;
+}
+
+.dark .api-namespace-toggle:hover .api-namespace-icon {
+  opacity: 1;
 }
 
 .dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content::after {
@@ -431,6 +445,13 @@
     var(--color-dark-bg) 100%);
 }
 
+.dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow {
+  background: linear-gradient(to bottom,
+    rgba(255, 255, 255, 0.02) 0%,
+    rgba(255, 255, 255, 0.04) 50%,
+    rgba(255, 255, 255, 0.05) 100%);
+}
+
 .dark .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow::before {
   background: var(--color-phel-accent);
   color: var(--color-dark-bg);

css/components/documentation.css

@@ -232,22 +232,73 @@
   margin: 0;
   padding: 0;
   letter-spacing: -0.02em;
+  line-height: 1;
+}
+
+.api-namespace-toggle-indicator {
+  display: none;
+  align-items: flex-end;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+
+/* Only show indicator when there's overflow */
+.api-index__entry:has(.api-namespace-content.has-overflow) .api-namespace-toggle-indicator {
+  display: flex;
+}
+
+.api-namespace-toggle-text {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-phel-primary);
+  opacity: 0.8;
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.api-namespace-toggle:hover .api-namespace-toggle-text {
+  opacity: 1;
+  color: var(--color-phel-primary);
+}
+
+/* When hovering over collapsed area, highlight the toggle text */
+.api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow:hover ~ .api-namespace-toggle .api-namespace-toggle-text,
+.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-toggle-text {
+  opacity: 1;
+  color: var(--color-phel-primary);
+}
+
+/* Update text content based on state */
+.api-namespace-toggle[aria-expanded="true"] .api-namespace-toggle-text::before {
+  content: "Show less";
+}
+
+.api-namespace-toggle[aria-expanded="false"] .api-namespace-toggle-text::before {
+  content: "Show all";
 }
 
 .api-namespace-icon {
   flex-shrink: 0;
   color: var(--color-phel-primary);
   transition: transform var(--duration-normal) var(--ease-out);
-  display: none;
+  opacity: 0.8;
+  width: 24px;
+  height: 24px;
 }
 
-/* Only show icon when there's overflow */
-.api-index__entry:has(.api-namespace-content.has-overflow) .api-namespace-icon {
-  display: block;
+.api-namespace-toggle:hover .api-namespace-icon {
+  opacity: 1;
+  color: var(--color-phel-primary-hover);
+}
+
+/* When hovering over collapsed area, highlight the icon */
+.api-index__entry:has(.api-namespace-content.has-overflow:hover) .api-namespace-icon {
+  opacity: 1;
+  color: var(--color-phel-primary-hover);
 }
 
-.api-namespace-toggle[aria-expanded="false"] .api-namespace-icon {
-  transform: rotate(-90deg);
+/* Collapsed (closed) = chevron down (V), Expanded (open) = chevron up (^) */
+.api-namespace-toggle[aria-expanded="true"] .api-namespace-icon {
+  transform: rotate(180deg);
 }
 
 .api-namespace-content {
@@ -284,6 +335,12 @@
 /* Make entire collapsed area clickable */
 .api-namespace-toggle[aria-expanded="false"] + .api-namespace-content.has-overflow {
   cursor: pointer;
+  background: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0.01) 0%,
+    rgba(0, 0, 0, 0.03) 50%,
+    rgba(0, 0, 0, 0.04) 100%);
+  border-radius: var(--radius-lg);
+  width: calc(100% + var(--space-md) * 2);
 }
 
 /* Disable pill interactions when collapsed and has overflow */
@@ -328,7 +385,7 @@
   box-shadow: var(--shadow-lg);
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--duration-fast) var(--ease-out);
+  transition: opacity var(--duration-normal) var(--ease-in);
   z-index: 10;
 }
 
@@ -356,7 +413,7 @@
 
 .api-index__entry > ul a {
   display: inline-block;
-  padding: var(--space-xs) var(--space-lg);
+  padding: var(--space-xs) var(--space-md);
   background: var(--color-light-bg-secondary);
   color: var(--color-light-text-secondary);
   font-size: var(--text-sm);

templates/page-api.html

@@ -13,9 +13,12 @@ <h1>{{page.title}}</h1>
         <li class="api-index__entry">
             <button class="api-namespace-toggle" aria-expanded="false">
                 <h2 class="api-namespace-title">{{ namespace.title }}</h2>
-                <svg class="api-namespace-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
+                <div class="api-namespace-toggle-indicator">
+                    <span class="api-namespace-toggle-text"></span>
+                    <svg class="api-namespace-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </div>
             </button>
             <ul class="api-namespace-content">
             {% for fn in namespace.children %}