From 687fed63b3b32984df0720228e12ba8f7aa3434a Mon Sep 17 00:00:00 2001 From: Andrea De Pirro Date: Fri, 16 Oct 2026 15:03:49 +0200 Subject: [PATCH 1/8] Show open API nodes as nested boxes instead of guide lines The guide line stops at each open node, so the open path through a deep schema is hard to follow. An open node now sits in an outlined box headed by its toggle, and the innermost open box gets a darker border. Co-Authored-By: Claude Sonnet 5.5 --- .../Assets/api-docs.css | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/src/Elastic.Documentation.Site/Assets/api-docs.css b/src/Elastic.Documentation.Site/Assets/api-docs.css index ffb4a1bf7d..413bb14b68 100644 --- a/src/Elastic.Documentation.Site/Assets/api-docs.css +++ b/src/Elastic.Documentation.Site/Assets/api-docs.css @@ -4292,3 +4292,47 @@ html:has(.api-page-shell) { } } } + +/* Open nodes sit in nested boxes instead of guide lines: the toggle is the box's header, and the innermost open + box gets the darker border, so the open path reads from the outlines alone. */ +.property-item::before, +.property-item::after, +.nested-properties::before, +.expand-toggle-row::before, +.expand-toggle-row::after, +.union-expand-toggle::before, +.union-expand-toggle::after { + display: none; +} + +.property-item.depth-1, +.property-item.depth-2, +.property-item.depth-3, +.property-item.depth-4 { + padding-left: 0.25rem; +} + +.property-item.expanded > .expand-toggle-row, +.union-variant-item.expanded > .union-expand-toggle { + margin: 0.5rem 0 0; + padding: 0.375rem 0.5rem 0; + border: 1px solid var(--color-grey-20); + border-bottom: 0; + border-radius: 6px 6px 0 0; +} + +.property-item.expanded > .nested-properties, +.union-variant-item.expanded > .nested-properties { + margin: 0 0 0.25rem; + padding: 0.25rem 0.5rem; + border: 1px solid var(--color-grey-20); + border-top: 0; + border-radius: 0 0 6px 6px; +} + +.property-item.expanded:not(:has(.expanded)) > .expand-toggle-row, +.property-item.expanded:not(:has(.expanded)) > .nested-properties, +.union-variant-item.expanded:not(:has(.expanded)) > .union-expand-toggle, +.union-variant-item.expanded:not(:has(.expanded)) > .nested-properties { + border-color: var(--color-grey-60); +} From a35fc580daaebccde30ab2d8c50d405373fb3c7b Mon Sep 17 00:00:00 2001 From: Andrea De Pirro Date: Fri, 16 Oct 2026 15:09:22 +0200 Subject: [PATCH 2/8] Keep the show/hide properties toggle still when a box opens A folded toggle now has the box's margin, padding and border under a transparent border, so opening it no longer nudges the toggle sideways. Co-Authored-By: Claude Sonnet 5.5 --- src/Elastic.Documentation.Site/Assets/api-docs.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/api-docs.css b/src/Elastic.Documentation.Site/Assets/api-docs.css index 413bb14b68..617ecb32e4 100644 --- a/src/Elastic.Documentation.Site/Assets/api-docs.css +++ b/src/Elastic.Documentation.Site/Assets/api-docs.css @@ -4312,15 +4312,21 @@ html:has(.api-page-shell) { padding-left: 0.25rem; } -.property-item.expanded > .expand-toggle-row, -.union-variant-item.expanded > .union-expand-toggle { +/* A folded toggle keeps the box's metrics under a transparent border, so opening it does not move the toggle. */ +.property-item > .expand-toggle-row, +.union-variant-item > .union-expand-toggle { margin: 0.5rem 0 0; padding: 0.375rem 0.5rem 0; - border: 1px solid var(--color-grey-20); + border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; } +.property-item.expanded > .expand-toggle-row, +.union-variant-item.expanded > .union-expand-toggle { + border-color: var(--color-grey-20); +} + .property-item.expanded > .nested-properties, .union-variant-item.expanded > .nested-properties { margin: 0 0 0.25rem; From f8884b1c08d67bca952af0f36e26018552f35ffb Mon Sep 17 00:00:00 2001 From: Andrea De Pirro Date: Fri, 16 Oct 2026 15:19:47 +0200 Subject: [PATCH 3/8] Put the show/hide properties toggle on the box's top edge The toggle label now interrupts the top line of its box, like a fieldset legend, instead of sitting in a header row above the contents. The row keeps one height folded or open, so the toggle stays put. Co-Authored-By: Claude Sonnet 5.5 --- .../Assets/api-docs.css | 42 +++++++++++++------ 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/api-docs.css b/src/Elastic.Documentation.Site/Assets/api-docs.css index 617ecb32e4..13271d3b29 100644 --- a/src/Elastic.Documentation.Site/Assets/api-docs.css +++ b/src/Elastic.Documentation.Site/Assets/api-docs.css @@ -4293,14 +4293,13 @@ html:has(.api-page-shell) { } } -/* Open nodes sit in nested boxes instead of guide lines: the toggle is the box's header, and the innermost open - box gets the darker border, so the open path reads from the outlines alone. */ +/* Open nodes sit in nested boxes instead of guide lines. The toggle sits on the box's top edge and cuts the line behind + its text, like a fieldset legend; the innermost open box gets the darker border, so the open path reads from the + outlines alone. The row keeps one height folded or open, so the toggle does not move. */ .property-item::before, .property-item::after, .nested-properties::before, -.expand-toggle-row::before, .expand-toggle-row::after, -.union-expand-toggle::before, .union-expand-toggle::after { display: none; } @@ -4312,18 +4311,34 @@ html:has(.api-page-shell) { padding-left: 0.25rem; } -/* A folded toggle keeps the box's metrics under a transparent border, so opening it does not move the toggle. */ .property-item > .expand-toggle-row, .union-variant-item > .union-expand-toggle { margin: 0.5rem 0 0; - padding: 0.375rem 0.5rem 0; - border: 1px solid transparent; - border-bottom: 0; - border-radius: 6px 6px 0 0; + padding: 0.25rem calc(0.875rem + 1px); + + &::before { + content: ''; + position: absolute; + inset: 50% 0 0; + height: auto; + width: auto; + border: 1px solid transparent; + border-bottom: 0; + border-radius: 6px 6px 0 0; + opacity: 1; + } + + > .expand-toggle { + position: relative; + z-index: 1; + margin-left: -0.375rem; + padding: 0 0.375rem; + background: var(--color-white, #fff); + } } -.property-item.expanded > .expand-toggle-row, -.union-variant-item.expanded > .union-expand-toggle { +.property-item.expanded > .expand-toggle-row::before, +.union-variant-item.expanded > .union-expand-toggle::before { border-color: var(--color-grey-20); } @@ -4336,9 +4351,10 @@ html:has(.api-page-shell) { border-radius: 0 0 6px 6px; } -.property-item.expanded:not(:has(.expanded)) > .expand-toggle-row, +.property-item.expanded:not(:has(.expanded)) > .expand-toggle-row::before, .property-item.expanded:not(:has(.expanded)) > .nested-properties, -.union-variant-item.expanded:not(:has(.expanded)) > .union-expand-toggle, +.union-variant-item.expanded:not(:has(.expanded)) + > .union-expand-toggle::before, .union-variant-item.expanded:not(:has(.expanded)) > .nested-properties { border-color: var(--color-grey-60); } From 26be2503b56f46fd6f704f0d3c680fd77c8b0d19 Mon Sep 17 00:00:00 2001 From: Andrea De Pirro Date: Fri, 16 Oct 2026 15:23:05 +0200 Subject: [PATCH 4/8] Balance the padding inside open API boxes The first row's own top padding left about 20px under the top edge against 9px above the bottom edge. The gap under the top edge is now 13px and the bottom gap 12px. Co-Authored-By: Claude Sonnet 5.5 --- src/Elastic.Documentation.Site/Assets/api-docs.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Elastic.Documentation.Site/Assets/api-docs.css b/src/Elastic.Documentation.Site/Assets/api-docs.css index 13271d3b29..96bbe6c447 100644 --- a/src/Elastic.Documentation.Site/Assets/api-docs.css +++ b/src/Elastic.Documentation.Site/Assets/api-docs.css @@ -4345,10 +4345,15 @@ html:has(.api-page-shell) { .property-item.expanded > .nested-properties, .union-variant-item.expanded > .nested-properties { margin: 0 0 0.25rem; - padding: 0.25rem 0.5rem; + padding: 0.25rem 0.5rem 0.5rem; border: 1px solid var(--color-grey-20); border-top: 0; border-radius: 0 0 6px 6px; + + /* The first row's own top padding already leaves a gap under the edge. */ + > .property-list { + margin-top: -0.5rem; + } } .property-item.expanded:not(:has(.expanded)) > .expand-toggle-row::before, From c9242e7485c4a65b5ced29dccdb3f6a347f71d89 Mon Sep 17 00:00:00 2001 From: Andrea De Pirro Date: Fri, 16 Oct 2026 15:38:41 +0200 Subject: [PATCH 5/8] Drop the guide line from API reference links The reference link still drew the old L-shaped branch, which leads nowhere now that open nodes sit in boxes. It stays above the toggle and lines up with the toggle's icon. Co-Authored-By: Claude Sonnet 5.5 --- src/Elastic.Documentation.Site/Assets/api-docs.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/Elastic.Documentation.Site/Assets/api-docs.css b/src/Elastic.Documentation.Site/Assets/api-docs.css index 96bbe6c447..6c96506edc 100644 --- a/src/Elastic.Documentation.Site/Assets/api-docs.css +++ b/src/Elastic.Documentation.Site/Assets/api-docs.css @@ -4311,6 +4311,16 @@ html:has(.api-page-shell) { padding-left: 0.25rem; } +/* The reference link has no branch to hang from; it lines up with the toggle label below it. */ +.property-list .reference-link-row { + padding-left: calc(0.875rem + 1px); + + &::before, + &::after { + display: none; + } +} + .property-item > .expand-toggle-row, .union-variant-item > .union-expand-toggle { margin: 0.5rem 0 0; From 56980133b828d2c0959d528af560eb18c1ff264c Mon Sep 17 00:00:00 2001 From: Andrea De Pirro Date: Fri, 16 Oct 2026 15:43:14 +0200 Subject: [PATCH 6/8] Match the gap under a box's top edge to the gap above its bottom edge Measured from the line the toggle sits on, the first row started 26px below it and the last ended 12px above the bottom edge. Both gaps are now 16px. Co-Authored-By: Claude Sonnet 5.5 --- src/Elastic.Documentation.Site/Assets/api-docs.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/api-docs.css b/src/Elastic.Documentation.Site/Assets/api-docs.css index 6c96506edc..985c449289 100644 --- a/src/Elastic.Documentation.Site/Assets/api-docs.css +++ b/src/Elastic.Documentation.Site/Assets/api-docs.css @@ -4355,14 +4355,14 @@ html:has(.api-page-shell) { .property-item.expanded > .nested-properties, .union-variant-item.expanded > .nested-properties { margin: 0 0 0.25rem; - padding: 0.25rem 0.5rem 0.5rem; + padding: 0 0.5rem 0.75rem; border: 1px solid var(--color-grey-20); border-top: 0; border-radius: 0 0 6px 6px; - /* The first row's own top padding already leaves a gap under the edge. */ - > .property-list { - margin-top: -0.5rem; + /* The first row's usual top padding would leave twice the gap under the edge that the bottom edge has. */ + > .property-list > .property-item:first-child > dt { + --property-row-pad: 2px; } } From d7f416db3c0bdde37e0e197074d618664337a2d6 Mon Sep 17 00:00:00 2001 From: Andrea De Pirro Date: Fri, 16 Oct 2026 15:44:02 +0200 Subject: [PATCH 7/8] Give open API boxes a little more room inside The gap between a box's top edge and its first row, and between its last row and the bottom edge, grows from 16px to 20px. Co-Authored-By: Claude Sonnet 5.5 --- src/Elastic.Documentation.Site/Assets/api-docs.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Elastic.Documentation.Site/Assets/api-docs.css b/src/Elastic.Documentation.Site/Assets/api-docs.css index 985c449289..5c14dfaedc 100644 --- a/src/Elastic.Documentation.Site/Assets/api-docs.css +++ b/src/Elastic.Documentation.Site/Assets/api-docs.css @@ -4355,14 +4355,14 @@ html:has(.api-page-shell) { .property-item.expanded > .nested-properties, .union-variant-item.expanded > .nested-properties { margin: 0 0 0.25rem; - padding: 0 0.5rem 0.75rem; + padding: 0 0.5rem 1rem; border: 1px solid var(--color-grey-20); border-top: 0; border-radius: 0 0 6px 6px; /* The first row's usual top padding would leave twice the gap under the edge that the bottom edge has. */ > .property-list > .property-item:first-child > dt { - --property-row-pad: 2px; + --property-row-pad: 6px; } } From c347419b932cb9f16d488c03084843dae9ac9d24 Mon Sep 17 00:00:00 2001 From: Andrea De Pirro Date: Fri, 16 Oct 2026 16:27:12 +0200 Subject: [PATCH 8/8] Align a lone reference link with the description A reference link with no toggle below it sat indented as if it hung from the toggle. It now starts at the description's left edge. Co-Authored-By: Claude Sonnet 5.5 --- src/Elastic.Documentation.Site/Assets/api-docs.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Elastic.Documentation.Site/Assets/api-docs.css b/src/Elastic.Documentation.Site/Assets/api-docs.css index 5c14dfaedc..08bf69ba3a 100644 --- a/src/Elastic.Documentation.Site/Assets/api-docs.css +++ b/src/Elastic.Documentation.Site/Assets/api-docs.css @@ -4319,6 +4319,11 @@ html:has(.api-page-shell) { &::after { display: none; } + + /* With no toggle below it, the link reads as part of the description. */ + &:not(:has(+ .expand-toggle-row)) { + padding-left: 0; + } } .property-item > .expand-toggle-row,