rapidoc 12.0.0 → 12.1.0

package/src/styles/flow-styles.js

@@ -0,0 +1,248 @@
+import { css } from "lit";
+
+/**
+ * Styles for the workflow diagram drawn by utils/arazzo/svg.js. Shared by <rapi-flow> and by
+ * build-time pages (@rapidoc/prerender `getFlowCss()`), so selectors are plain classes, not :host.
+ */
+export default css`
+  .rf-svg {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-description);
+    overflow: visible;
+  }
+  .rf-node rect {
+    fill: var(--card);
+    stroke: var(--border);
+    stroke-width: 1.25;
+  }
+  .rf-io rect {
+    fill: var(--muted);
+  }
+  .rf-title {
+    fill: color-mix(in srgb, var(--primary) 65%, var(--foreground));
+    font-weight: 600;
+    font-size: var(--font-size-regular);
+  }
+  .rf-sub {
+    fill: var(--muted-foreground);
+  }
+  .rf-io-title,
+  .rf-criteria {
+    fill: var(--muted-foreground);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .rf-criteria {
+    text-transform: none;
+    letter-spacing: normal;
+  }
+  .rf-path,
+  .rf-method,
+  .rf-unresolved {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-small);
+  }
+  .rf-path {
+    fill: var(--foreground);
+  }
+  .rf-method {
+    font-weight: 700;
+    fill: var(--method-default);
+  }
+  .rf-method-get { fill: var(--method-get); }
+  .rf-method-post { fill: var(--method-post); }
+  .rf-method-put { fill: var(--method-put); }
+  .rf-method-delete { fill: var(--method-delete); }
+  .rf-method-patch { fill: var(--method-patch); }
+  .rf-method-head { fill: var(--method-head); }
+  .rf-method-options { fill: var(--method-options); }
+  .rf-method-trace { fill: var(--method-trace); }
+  .rf-method-query { fill: var(--method-query); }
+  .rf-unresolved {
+    fill: var(--muted-foreground);
+    font-style: italic;
+  }
+  .rf-jump {
+    cursor: pointer;
+    outline: none;
+  }
+  .rf-jump:hover .rf-step-name,
+  .rf-tag.rf-jump:hover,
+  .rf-tag.rf-jump:focus-visible {
+    text-decoration: underline;
+  }
+  .rf-clickable {
+    cursor: pointer;
+    outline: none;
+  }
+  .rf-clickable:hover rect,
+  .rf-clickable:focus-visible rect {
+    stroke: var(--primary);
+    stroke-width: 2;
+  }
+  .rf-selected rect {
+    stroke: var(--primary);
+    stroke-width: 2;
+  }
+  .rf-seq {
+    fill: none;
+    stroke: var(--muted-foreground);
+    stroke-width: 1.25;
+  }
+  .rf-head-seq {
+    fill: var(--muted-foreground);
+  }
+  .rf-data {
+    fill: none;
+    stroke: var(--primary);
+    stroke-width: 1.5;
+    stroke-dasharray: 5 4;
+  }
+  .rf-head-data {
+    fill: var(--primary);
+  }
+  .rf-data.rf-to-output {
+    stroke: var(--muted-foreground);
+  }
+  .rf-head-output {
+    fill: var(--muted-foreground);
+  }
+  .rf-sep {
+    fill: none;
+    stroke: var(--border);
+    stroke-width: 1;
+  }
+  .rf-row {
+    font-size: var(--font-size-small);
+  }
+  .rf-in-name,
+  .rf-out-name,
+  .rf-bind-name,
+  .rf-bind-val,
+  .rf-act-when,
+  .rf-act-then {
+    fill: var(--foreground);
+  }
+  .rf-bind-name,
+  .rf-bind-val,
+  .rf-kw,
+  .rf-in-type,
+  .rf-in-default,
+  .rf-in-enum {
+    font-family: var(--font-mono);
+  }
+  .rf-in-type,
+  .rf-in-default,
+  .rf-in-enum,
+  .rf-out-from,
+  .rf-out-kind,
+  .rf-act-name,
+  .rf-more,
+  .rf-tag,
+  .rf-sec-title {
+    fill: var(--muted-foreground);
+  }
+  .rf-kw,
+  .rf-out-kind {
+    font-weight: 600;
+  }
+  /* Step names are the step color wherever they appear: box titles, value lines, outputs */
+  /* --primary mixed toward the text color keeps the hue and reads at 4.5:1 on light cards */
+  .rf-step-name,
+  .rf-kw-step,
+  .rf-tag.rf-out-step,
+  .rf-row.rf-linked .rf-out-name {
+    fill: color-mix(in srgb, var(--primary) 65%, var(--foreground));
+  }
+  .rf-tag.rf-out-step {
+    font-size: var(--font-size-small);
+    font-weight: 600;
+  }
+  /* Hover linking (<rapi-flow>): a step, its lines and its rows in the outputs box */
+  .rf-step.rf-linked rect {
+    stroke: var(--primary);
+    stroke-width: 2;
+  }
+  .rf-data.rf-linked {
+    stroke-width: 2.5;
+  }
+  /* A run in <rapi-flow>: the step whose request is in flight */
+  .rf-step.rf-running rect {
+    stroke: var(--primary);
+    stroke-width: 2;
+    stroke-dasharray: 6 4;
+    animation: rf-march 1s linear infinite;
+  }
+  @keyframes rf-march {
+    to {
+      stroke-dashoffset: -20;
+    }
+  }
+  .rf-io .rf-sep {
+    stroke: var(--muted-foreground);
+    stroke-opacity: 0.35;
+  }
+  .rf-out-from {
+    font-family: var(--font-mono);
+  }
+  .rf-kw-input {
+    fill: var(--blue);
+  }
+  .rf-kw-value,
+  .rf-kw-expression {
+    fill: var(--muted-foreground);
+  }
+  .rf-req {
+    fill: var(--destructive);
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+  }
+  .rf-more,
+  .rf-tag,
+  .rf-sec-title {
+    font-size: var(--font-size-xs);
+  }
+  .rf-sec-title {
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .rf-check-type {
+    fill: var(--muted-foreground);
+  }
+  .rf-check-type,
+  .rf-check {
+    font-family: var(--font-mono);
+  }
+  .rf-check {
+    fill: var(--foreground);
+  }
+  .rf-data-label rect {
+    fill: var(--background);
+    stroke: var(--primary);
+    stroke-width: 1;
+  }
+  .rf-data-label text {
+    fill: var(--foreground);
+    font-size: var(--font-size-xs);
+  }
+  .rf-goto {
+    fill: none;
+    stroke-width: 1.5;
+  }
+  .rf-goto.rf-success {
+    stroke: var(--green);
+  }
+  .rf-goto.rf-failure {
+    stroke: var(--destructive);
+  }
+  .rf-head-success {
+    fill: var(--green);
+  }
+  .rf-head-failure {
+    fill: var(--destructive);
+  }
+`;

package/src/styles/nav-styles.js

@@ -59,6 +59,8 @@ export default css`
     border: 1px solid var(--input);
     border-radius: var(--radius);
     background: var(--input-background);
+    /* Inputs do not inherit the page font; getNavCss() puts this on a page, outside the element's input styles. */
+    font-family: inherit;
     font-size: calc(var(--font-size-small) + 1px);
     box-sizing: border-box;
     transition:
@@ -175,15 +177,34 @@ export default css`
     justify-content: space-between;
     flex-direction: row;
   }
-  .nav-bar-paths-under-tag {
+  /* Collapsing a tag or tag group slides its body shut: height auto -> 0 (interpolate-size lets the
+     keyword animate; browsers without it switch at once). The body goes visibility: hidden once
+     closed, so its links leave the tab order; opening shows it at once. */
+  .nav-bar-paths-under-tag,
+  .nav-bar-tags-under-group {
+    interpolate-size: allow-keywords;
+    height: auto;
     overflow: hidden;
-    padding-left: 10px;
+    transition:
+      height 0.25s ease,
+      visibility 0s;
   }
-  .collapsed .nav-bar-paths-under-tag,
-  .nav-bar-tag-and-paths.collapsed .nav-bar-paths-under-tag {
-    display: none;
+  .nav-bar-tag-and-paths.collapsed .nav-bar-paths-under-tag,
+  .nav-bar-tag-group.collapsed .nav-bar-tags-under-group {
+    height: 0;
     visibility: hidden;
-    max-height: 0;
+    transition:
+      height 0.25s ease,
+      visibility 0s linear 0.25s;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nav-bar-paths-under-tag,
+    .nav-bar-tags-under-group {
+      transition: none;
+    }
+  }
+  .nav-bar-paths-under-tag {
+    padding-left: 10px;
   }
 
   .nav-bar-expand-all {
@@ -268,7 +289,7 @@ export default css`
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: var(--foreground);
+    color: var(--sidebar-foreground);
     cursor: pointer;
     user-select: none;
     border-inline-start: 4px solid transparent;
@@ -277,15 +298,12 @@ export default css`
       color 0.15s ease;
   }
   .nav-bar-tag-group-header:hover {
-    color: var(--foreground);
+    color: var(--sidebar-accent-foreground);
   }
   .nav-bar-tag-group-title {
     flex: 1;
     min-width: 0;
   }
-  .nav-bar-tag-group.collapsed .nav-bar-tags-under-group {
-    display: none;
-  }
   .nav-bar-tags-under-group {
     border-inline-start: 1px solid var(--border);
     margin-inline-start: 10px;
@@ -313,6 +331,10 @@ export default css`
     color: inherit;
     text-decoration: none;
   }
+  /* a description-only tag (show-unused-tags) is itself the link */
+  a.nav-bar-tag {
+    text-decoration: none;
+  }
 
   .nav-bar-components,
   .nav-bar-h1,
@@ -322,11 +344,15 @@ export default css`
   .nav-bar-path {
     display: flex;
     cursor: pointer;
+    /* Border-box and no underline here too: getNavCss() (@rapidoc/prerender) styles these on a page
+       without the component's global box-sizing reset and link styles */
+    box-sizing: border-box;
     width: 100%;
     border: none;
-    color: var(--foreground);
+    color: var(--sidebar-foreground);
     background: transparent;
     border-inline-start: 4px solid transparent;
+    text-decoration: none;
     transition:
       background 0.15s ease,
       color 0.15s ease;
@@ -338,11 +364,9 @@ export default css`
     justify-content: space-between;
     gap: 8px;
     min-width: 0;
-    box-sizing: border-box;
-    text-decoration: none;
   }
 
-  .nav-bar-path:hover,
+  a.nav-bar-info:hover,
   a.nav-bar-path:hover {
     text-decoration: none;
   }

package/src/styles/schema-styles.js

@@ -47,7 +47,7 @@ export default css`
     gap: 4px;
     align-items: flex-start;
     overflow: hidden;
-    display: none;
+    display: flex;
 
     /* in the description box's start padding, so descriptions line up whether or not a row shows its arrow */
     & .descr-expand-toggle {
@@ -239,7 +239,7 @@ export default css`
   .int3,
   .floa,
   .doub,
-  .deci .blue {
+  .deci {
     color: var(--blue);
   }
   .null {
@@ -280,9 +280,17 @@ export default css`
     text-transform: uppercase;
   }
 
-  @container (min-width: 500px) {
-    .key-descr {
-      display: flex;
+  /* Narrow schemas (phones): a description gets a line of its own under its field instead of a column (#1074) */
+  @container (width < 500px) {
+    .tr {
+      flex-wrap: wrap;
+    }
+    .tr > .key-descr {
+      flex-basis: 100%;
+
+      &:empty {
+        display: none;
+      }
     }
   }
 `;

package/src/styles/theme-tokens.js

@@ -214,7 +214,7 @@ export function isLightColor(color) {
 export function applyCustomTheme(element, themeVal) {
   if (!element || !element.style) return;
   if (
-    !themeVal ||
+    typeof themeVal !== "string" ||
     THEME_PRESETS.includes(themeVal.trim().toLowerCase()) ||
     !isValidHexColor(themeVal)
   ) {
@@ -571,7 +571,7 @@ export default css`
       --syntax-inserted: #116329;
       --syntax-deleted: #cf222e;
 
-      --code-bg: color-mix(in srgb, var(--background) 94%, var(--foreground));
+      --code-bg: color-mix(in srgb, var(--background) 96%, var(--foreground));
     }
   }
 

package/src/templates/README.md

@@ -0,0 +1,89 @@
+# `src/templates` — `<rapi-doc>` render templates
+
+## Overview
+
+Lit `html` template functions, no classes. Each is called with `this` bound to its host, so
+`this.*` is the host's reactive state and methods. `main-body-template.js` is the entry used by
+`<rapi-doc>`, `<rapi-doc-mini>` and the static renderer (`@rapidoc/prerender`, `packages/rapidoc-prerender/src/`). Three files render inside
+`<api-request>` (`src/components/`): `request-params-template.js`, `request-body-template.js`,
+`api-response-template.js`.
+
+Templates read `this.resolvedSpec` (built by `utils/spec-parser.js`) and compose the elements in
+`src/components/`. They do not parse specs or define styles. The exception to "render only" is
+`security-scheme-template.js`, which also owns API key and OAuth logic (token fetch, popup,
+persistence).
+
+## Interface
+
+Default exports are section templates; named exports are helpers used by other templates or hosts.
+
+- `mainBodyTemplate(isMini, pathsExpanded)`: page shell; picks layout from `this.renderStyle`.
+- Sections: `headerTemplate`, `navbarTemplate`, `overviewTemplate`, `downloadsTemplate`,
+  `serverTemplate`, `securitySchemeTemplate`, `endpointTemplate` (view mode),
+  `expandedEndpointTemplate` (read mode), `focusedEndpointTemplate`, `componentsTemplate`,
+  `callbackTemplate`, `codeSamplesTemplate`, `advancedSearchDialogTemplate`, `logoTemplate`.
+- Used by hosts: `setApiServer` (`server-template.js`); `applyApiKey`, `onClearAllApiKeys`,
+  `recoverPersistedApiKeys` (`security-scheme-template.js`); `expandedEndpointBodyTemplate`
+  (static renderer); navbar helpers such as `expandCollapseNavBarTag` (`utils/bind-navbar.js`).
+- Inside `<api-request>`: `inputParametersTemplate`, `requestBodyTemplate`, `apiCallTemplate`.
+- Events (all `bubbles`, `composed`): `api-server-change` (`[server-template.js:setApiServer]`);
+  `before-authorize`, cancelable, for `authorizationCode` and `implicit` flows; and
+  `before-token-request`, cancelable, before each token fetch (listeners may edit
+  `detail.request`), both in `security-scheme-template.js`.
+
+## Invariants
+
+- **Headings.** Titles are real `<h1>`–`<h6>` with `class="rapidoc-heading"` and
+  `part="heading heading-N"`, never styled divs; the outline is checked by
+  `tests/unit/semantic-markup.test.js`.
+- **Exported parts.** A part added inside `<api-request>` / `<api-response>` must be added to the
+  `exportparts` lists in `endpoint-template.js`, `expanded-endpoint-template.js` and
+  `callback-template.js` (the lists differ today); the semantic-markup test catches omissions.
+- **String flags.** Host flags are compared as exact strings (`=== "true"` or `=== "false"`),
+  never by truthiness; `[focused-endpoint-template.js:focusedEndpointTemplate]` also accepts
+  boolean `false` for `showInfo`.
+- **Markdown.** Every `marked` result passes through `sanitizeHTML` before `unsafeHTML`.
+- **Loading states.** `mainBodyTemplate` returns `""` without `resolvedSpec`, then renders
+  `#spec-not-found` on `specLoadError`, a loader while loading, and an error on `loadFailed`.
+  `navbarTemplate` returns a stub `<nav part="section-navbar">` in those cases.
+- **Navigation ids.** An operation root has `id="${path.elementId}"`; its nav link is
+  `id="link-${elementId}"` with `data-content-id` on navigate items (expandable tags carry
+  `data-first-path-id` instead).
+- **Schema hide flags.** In `endpoint-template.js` and `expanded-endpoint-template.js`, `"never"`
+  yields `"false"`; otherwise requests hide read-only and responses hide write-only fields,
+  inverted for webhooks. `callback-template.js` always uses the webhook direction.
+- **Auth.** `[security-scheme-template.js:applyApiKey]` returns `false` for an unknown scheme or an
+  empty value, so an empty value never clears a key. OAuth uses a fresh `state` and `nonce` per
+  sign-in and PKCE (`S256`) when its checkbox is checked; a reply is accepted only when
+  `isExpectedOAuthReply` matches. Relative OAuth URLs resolve against the selected server's
+  `computedUrl` (or its origin).
+- **Persistence.** With `persistAuth === "true"`, `localStorage["rapidoc"]` holds
+  `{ securitySchemeId, value }` per apiKey / bearer scheme; Basic credentials are never stored.
+  `removeApiKey` deletes one entry; `[security-scheme-template.js:onClearAllApiKeys]` empties it.
+- **Server variables.** `[server-template.js:onApiServerVarChange]` reads every input in the
+  enclosing `<ul class="server-vars">` and recomputes `selectedServer.computedUrl`; the list
+  class is what it looks up, so keep it.
+
+## Side Effects
+
+- Render writes host state: `mainBodyTemplate` calls `recoverPersistedApiKeys` on every render
+  (before the `specLoadError` check), which can call `requestUpdate()` during render;
+  `requestBodyTemplate` sets the selected body type and example when unset;
+  `focusedEndpointTemplate` sets `focusedElementId` and expands its nav item.
+- Handlers mutate `resolvedSpec` (`expanded` flags in `endpoint-template.js`; scheme values in
+  `security-scheme-template.js`) and host tab state, then call `requestUpdate()`.
+- `localStorage` key `rapidoc` (see Persistence); no `sessionStorage`.
+- `security-scheme-template.js`: `fetch` to the token URL, `window.open` for sign-in
+  (`console.error` if blocked), a `BroadcastChannel` and `window` `message` listener while
+  waiting, `document` `keydown` listener for popovers.
+- Clipboard, downloads and new tabs through `utils/common-utils.js`; navbar handlers toggle
+  classes and `aria-expanded` directly in the DOM.
+
+## Verification
+
+- `npm run test:unit` (repo root; tests in `tests/unit/`): `semantic-markup.test.js` (outline,
+  `exportparts`), `auth-host-note.test.js`, `request-body-form.test.js`,
+  `multipart-part-types.test.js`, `example-dropdown.test.js`, `query-json-array.test.js`,
+  `param-content-example.test.js`, `server-description.test.js`, `unused-tags.test.js`,
+  `spec-parser-tag-groups.test.js`.
+- After edits: `npm run build:rapidoc`, `npm run lint`, `npm run format-fix`.

package/src/templates/api-response-template.js

@@ -179,19 +179,23 @@ export function apiCallTemplate() {
         <div class="try-actions">
           ${
             this.parameters.length > 0 || this.request_body
-              ? html` <button
-                    class="btn btn-outline"
-                    part="btn btn-outline btn-fill"
-                    ?disabled="${this.loading}"
-                    @click="${this.onFillRequestData}"
-                    title="Fills with example data (if provided)"
-                  >
-                    FILL EXAMPLE
-                  </button>
+              ? html`${
+                  this.hasExampleToFill
+                    ? html`<button
+                          class="btn btn-outline"
+                          part="btn btn-outline btn-fill btn-fill-example"
+                          ?disabled="${this.loading}"
+                          @click="${this.onFillRequestData}"
+                          title="Fills the request fields with their examples"
+                        >
+                          FILL EXAMPLE
+                        </button>`
+                    : ""
+                }
                   <button
                     class="btn btn-outline"
                     part="btn btn-outline btn-clear"
-                    ?disabled="${this.loading}"
+                    ?disabled="${this.loading || !this.hasValueToClear}"
                     @click="${this.onClearRequestData}"
                   >
                     CLEAR

package/src/templates/callback-template.js

@@ -45,7 +45,7 @@ export default function callbackTemplate(callbacks) {
                           schema-hide-write-only="${this.schemaHideWriteOnly === "never" ? "false" : "true"}"
                           fetch-credentials="${this.fetchCredentials}"
                           exportparts="section-request-title:section-request-title, heading:heading, heading-4:heading-4, heading-5:heading-5, heading-6:heading-6,
-            wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+            wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-fill-example:btn-fill-example, btn-clear-resp:btn-clear-resp,
                           tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-content:tab-content, 
                           file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
                           anchor:anchor, anchor-param-example:anchor-param-example, anchor-param-constraint:anchor-param-constraint, param-list:param-list, param:param, param-label:param-label, param-name:param-name, param-type:param-type, param-input:param-input, param-constraint:param-constraint, param-constraint-label:param-constraint-label, param-details:param-details, param-example-list:param-example-list, value-list:value-list, value-list-label:value-list-label, value-list-items:value-list-items, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"

package/src/templates/downloads-template.js

@@ -4,12 +4,11 @@
  */
 import { html } from "lit";
 import { downloadResource, viewResource } from "~/utils/common-utils";
-import { parseMcpTargets, MCP_TARGET_LABELS } from "~/utils/mcp-generator";
+import { parseMcpEnabled } from "~/utils/mcp-generator";
 
 export default function downloadsTemplate() {
-  const mcpTargets = parseMcpTargets(this.mcp);
   const showSpecDownload = this.specUrl && this.allowSpecFileDownload === "true";
-  const showMcpExport = mcpTargets.length > 0;
+  const showMcpExport = parseMcpEnabled(this.mcp);
 
   if (!showSpecDownload && !showMcpExport) {
     return "";
@@ -54,30 +53,16 @@ export default function downloadsTemplate() {
       }
       ${
         showMcpExport
-          ? mcpTargets.length === 1
-            ? html`<button
-                class="btn btn-outline download-btn"
-                part="btn btn-outline btn-mcp-export"
-                @click="${() => {
-                  this.downloadMcpServer(mcpTargets[0]);
-                }}"
-              >
-                Export MCP Server (${MCP_TARGET_LABELS[mcpTargets[0]] || mcpTargets[0]})
-              </button>`
-            : html`<select
-                class="btn btn-outline download-select"
-                part="btn btn-outline btn-mcp-export"
-                @change="${(e) => {
-                  const target = e.target.value;
-                  if (target) {
-                    this.downloadMcpServer(target);
-                    e.target.value = "";
-                  }
-                }}"
-              >
-                <option value="" disabled selected>Export MCP Server</option>
-                ${mcpTargets.map((t) => html`<option value="${t}">Export ${MCP_TARGET_LABELS[t] || t}</option>`)}
-              </select>`
+          ? html`<button
+              class="btn btn-outline download-btn"
+              part="btn btn-outline btn-mcp-export"
+              title="Download an MCP server project (manifest, runtime and stdio server) as a zip"
+              @click="${() => {
+                this.downloadMcpServer();
+              }}"
+            >
+              Export MCP Server
+            </button>`
           : ""
       }
     </section>

package/src/templates/endpoint-template.js

@@ -30,28 +30,19 @@ function toggleExpand(path) {
   this.requestUpdate();
 }
 
-export function expandCollapseAll(operationsRootEl, action = "expand-all") {
-  const groupList = [...operationsRootEl.querySelectorAll(".section-tag-group")];
-  const elList = [...operationsRootEl.querySelectorAll(".section-tag")];
-  if (action === "expand-all") {
-    groupList.forEach((el) => {
-      el.classList.replace("collapsed", "expanded");
+// Sets `expanded` on every tag group and tag, so a tag's own toggle starts from what is shown
+export function expandCollapseAll(action = "expand-all") {
+  const expanded = action === "expand-all";
+  (this.resolvedSpec.tagGroups || []).forEach((group) => {
+    group.expanded = expanded;
+    (group.tags || []).forEach((tag) => {
+      tag.expanded = expanded;
     });
-    elList.forEach((el) => {
-      el.classList.replace("collapsed", "expanded");
-    });
-  } else {
-    groupList.forEach((el) => {
-      el.classList.replace("expanded", "collapsed");
-    });
-    elList.forEach((el) => {
-      el.classList.replace("expanded", "collapsed");
-    });
-  }
-}
-
-function onExpandCollapseAll(e, action = "expand-all") {
-  expandCollapseAll.call(this, e.target.closest(".operations-root"), action);
+  });
+  (this.resolvedSpec.tags || []).forEach((tag) => {
+    tag.expanded = expanded;
+  });
+  this.requestUpdate();
 }
 
 function endpointHeadTemplate(path, pathsExpanded = false) {
@@ -201,7 +192,7 @@ function endpointBodyTemplate(path) {
           schema-hide-write-only="${this.schemaHideWriteOnly === "never" ? "false" : path.isWebhook ? "true" : "false"}"
           fetch-credentials="${this.fetchCredentials}"
           exportparts="section-request-title:section-request-title, heading:heading, heading-4:heading-4, heading-5:heading-5, heading-6:heading-6,
-            wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+            wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-fill-example:btn-fill-example, btn-clear-resp:btn-clear-resp,
           tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-content:tab-content, 
           file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
           anchor:anchor, anchor-param-example:anchor-param-example, anchor-param-constraint:anchor-param-constraint, param-list:param-list, param:param, param-label:param-label, param-name:param-name, param-type:param-type, param-input:param-input, param-constraint:param-constraint, param-constraint-label:param-constraint-label, param-details:param-details, param-example-list:param-example-list, value-list:value-list, value-list-label:value-list-label, value-list-items:value-list-items, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
@@ -336,9 +327,9 @@ export default function endpointTemplate(isMini = false, pathsExpanded = false)
     isMini
       ? ""
       : html`<div class="section-expand-collapse-container">
-          <span @click="${(e) => onExpandCollapseAll(e, "expand-all")}" style="color:var(--primary); cursor:pointer;"> Expand all </span>
+          <span @click="${() => expandCollapseAll.call(this, "expand-all")}" style="color:var(--primary); cursor:pointer;"> Expand all </span>
           &nbsp;|&nbsp;
-          <span @click="${(e) => onExpandCollapseAll(e, "collapse-all")}" style="color:var(--primary); cursor:pointer;">
+          <span @click="${() => expandCollapseAll.call(this, "collapse-all")}" style="color:var(--primary); cursor:pointer;">
             Collapse all
           </span>
           &nbsp; sections