rapidoc 9.3.3 → 9.3.5

package/src/templates/code-samples-template.js

@@ -28,6 +28,7 @@ export default function codeSamplesTemplate(xCodeSamples) {
         <pre><code class="language">${Prism.languages[v.lang?.toLowerCase()] ? unsafeHTML(Prism.highlight(v.source, Prism.languages[v.lang?.toLowerCase()], v.lang?.toLowerCase())) : v.source}</code></pre>
       </div>`)
     }
+  </div>  
   </section>`;
 }
 /* eslint-enable indent */

package/src/templates/components-template.js

@@ -14,22 +14,20 @@ function schemaBodyTemplate(sComponent) {
   ${this.schemaStyle === 'table'
     ? html`
       <schema-table
-        render-style = '${this.renderStyle}'
         .data = '${schemaInObjectNotation(sComponent.component, {})}'
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
         schema-hide-read-only = "false"
         schema-hide-write-only = "${this.schemaHideWriteOnly}"
         exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-      > </schema-tree> `
+      > </schema-table>`
     : html`
       <schema-tree
-        render-style = '${this.renderStyle}'
         .data = '${schemaInObjectNotation(sComponent.component, {})}'
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
         schema-hide-read-only = "false"
         schema-hide-write-only = "${this.schemaHideWriteOnly}"
         exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"

package/src/templates/endpoint-template.js

@@ -12,14 +12,14 @@ function toggleExpand(path) {
   if (path.expanded) {
     path.expanded = false; // collapse
     if (this.updateRoute === 'true') {
-      window.history.replaceState(null, null, `${window.location.href.split('#')[0]}${this.routePrefix === '#' ? '' : `${this.routePrefix}`}`);
+      this.replaceHistoryState('');
     }
   } else {
     path.expanded = true; // Expand
     if (this.updateRoute === 'true') {
       const newHash = `${this.routePrefix || '#'}${path.elementId}`;
       if (window.location.hash !== newHash) {
-        window.history.replaceState(null, null, `${window.location.href.split('#')[0]}${newHash}`);
+        this.replaceHistoryState(path.elementId);
       }
     }
   }
@@ -109,6 +109,18 @@ function endpointBodyTemplate(path) {
       }
 
       ${path.description ? html`<div part="section-endpoint-body-description" class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
+      ${path.externalDocs?.url || path.externalDocs?.description
+        ? html`<div style="background-color:var(--bg3); padding:2px 8px 8px 8px; margin:8px 0; border-radius:var(--border-radius)"> 
+            <div class="m-markdown"> ${unsafeHTML(marked(path.externalDocs?.description || ''))} </div>
+            ${path.externalDocs?.url
+              ? html`<a style="font-family:var(--font-mono); font-size:var(--font-size-small)" href="${path.externalDocs?.url}" target="_blank"> 
+                  ${path.externalDocs?.url} <div style="transform: rotate(270deg) scale(1.5); display: inline-block; margin-left:5px">⇲</div>
+                </a>`
+              : ''
+            }
+          </div>`
+        : ''
+      }
       <slot name="${path.elementId}"></slot>
       ${pathSecurityTemplate.call(this, path.security)}
       ${codeSampleTabPanel}
@@ -119,7 +131,7 @@ function endpointBodyTemplate(path) {
           class = "${this.renderStyle}-mode ${this.layout}-layout"
           style = "width:100%;"
           webhook = "${path.isWebhook}"
-          method = "${path.method}", 
+          method = "${path.method}"
           path = "${path.path}"
           .security = "${path.security}"
           .parameters = "${path.parameters}"
@@ -130,6 +142,7 @@ function endpointBodyTemplate(path) {
           active-schema-tab = "${this.defaultSchemaTab}"
           fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
           allow-try = "${this.allowTry}"
+          show-curl-before-try = "${this.showCurlBeforeTry}"
           accept = "${accept}"
           render-style="${this.renderStyle}" 
           schema-style = "${this.schemaStyle}" 
@@ -139,33 +152,33 @@ function endpointBodyTemplate(path) {
           schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
           schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
           fetch-credentials = "${this.fetchCredentials}"
-          exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+          exportparts = "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,
             file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
             anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-        > </api-request>
+          > </api-request>
 
           ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
-      </div>  
+        </div>  
 
-      <api-response
-        class = "${this.renderStyle}-mode"
-        style = "width:100%;"
-        webhook = "${path.isWebhook}"
-        .responses="${path.responses}"
-        active-schema-tab = "${this.defaultSchemaTab}" 
-        render-style="${this.renderStyle}" 
-        schema-style="${this.schemaStyle}"
-        schema-expand-level = "${this.schemaExpandLevel}"
-        schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-        schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
-        schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
-        selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-        exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input, 
-        textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp,
-        schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-      > </api-response>
-    </div>
+        <api-response
+          class = "${this.renderStyle}-mode"
+          style = "width:100%;"
+          webhook = "${path.isWebhook}"
+          .responses="${path.responses}"
+          active-schema-tab = "${this.defaultSchemaTab}" 
+          render-style="${this.renderStyle}" 
+          schema-style="${this.schemaStyle}"
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
+          allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
+          schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
+          schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
+          selected-status = "${Object.keys(path.responses || {})[0] || ''}"
+          exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input, 
+          textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp,
+          schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
+        > </api-response>
+      </div>
   </div>`;
 }
 
@@ -191,7 +204,7 @@ export default function endpointTemplate(showExpandCollapse = true, showTags = t
         ? html` 
           <div class='regular-font section-gap section-tag ${tag.expanded ? 'expanded' : 'collapsed'}'> 
             <div class='section-tag-header' @click="${() => { tag.expanded = !tag.expanded; this.requestUpdate(); }}">
-              <div id='${tag.elementId}' class="sub-title tag" style="color:var(--primary-color)">${tag.name}</div>
+              <div id='${tag.elementId}' class="sub-title tag" style="color:var(--primary-color)">${tag.displayName}</div>
             </div>
             <div class='section-tag-body'>
               <slot name="${tag.elementId}"></slot>

package/src/templates/expanded-endpoint-template.js

@@ -15,7 +15,24 @@ function headingRenderer(tagElementId) {
   return renderer;
 }
 
-export function expandedEndpointBodyTemplate(path, tagName = '') {
+function expandCollapseTagDescription(e) {
+  const tagDescriptionEl = e.target.closest('.tag-container').querySelector('.tag-description');
+  const tagIconEl = e.target.closest('.tag-container').querySelector('.tag-icon');
+  if (tagDescriptionEl && tagIconEl) {
+    const isExpanded = tagDescriptionEl.classList.contains('expanded');
+    if (isExpanded) {
+      tagDescriptionEl.style.maxHeight = 0;
+      tagDescriptionEl.classList.replace('expanded', 'collapsed');
+      tagIconEl.classList.replace('expanded', 'collapsed');
+    } else {
+      tagDescriptionEl.style.maxHeight = `${tagDescriptionEl.scrollHeight}px`;
+      tagDescriptionEl.classList.replace('collapsed', 'expanded');
+      tagIconEl.classList.replace('collapsed', 'expanded');
+    }
+  }
+}
+
+export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription = '') {
   const acceptContentTypes = new Set();
   for (const respStatus in path.responses) {
     for (const acceptContentType in (path.responses[respStatus]?.content)) {
@@ -37,7 +54,26 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
   return html`
     ${this.renderStyle === 'read' ? html`<div class='divider' part="operation-divider"></div>` : ''}
     <div class='expanded-endpoint-body observe-me ${path.method} ${path.deprecated ? 'deprecated' : ''} ' part="section-operation ${path.elementId}" id='${path.elementId}'>
-      ${(this.renderStyle === 'focused' && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold" part="section-operation-tag"> ${tagName} </h3>` : ''}
+      ${(this.renderStyle === 'focused' && tagName !== 'General ⦂')
+        ? html`
+          <div class="tag-container" part="section-operation-tag"> 
+            <span class="upper" style="font-weight:bold; font-size:18px;"> ${tagName} </span>
+            ${tagDescription
+              ? html`
+                <svg class="tag-icon collapsed" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" fill="none" style="stroke:var(--primary-color); vertical-align:top; cursor:pointer"
+                @click="${(e) => { expandCollapseTagDescription.call(this, e); }}"
+                >
+                  <path d="M12 20h-6a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h8"></path><path d="M18 4v17"></path><path d="M15 18l3 3l3 -3"></path>
+                </svg>
+                <div class="tag-description collapsed" style="max-height:0px; overflow:hidden; margin-top:16px; border:1px solid var(--border-color)"> 
+                  <div class="m-markdown" style="padding:8px"> ${unsafeHTML(marked(tagDescription))}</div>  
+                </div>`
+              : ''
+            }  
+          </div>
+        `
+        : ''
+      }
       ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
       ${html`
         ${path.xBadges && path.xBadges?.length > 0
@@ -53,10 +89,10 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
         }
         <h2 part="section-operation-summary"> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
         ${path.isWebhook
-          ? html`<span part="section-operation-webhook style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
+          ? html`<span part="section-operation-webhook" style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
           : html`
-            <div class='mono-font part="section-operation-webhook-method" regular-font-size' style='text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)'> 
-              <span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span> 
+            <div part="section-operation-webhook-method" class="mono-font regular-font-size" style="text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)"> 
+              <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method}</span> 
               <span part="label-operation-path">${path.path}</span>
             </div>
           `
@@ -65,6 +101,18 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
       }
       ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
       ${pathSecurityTemplate.call(this, path.security)}
+      ${path.externalDocs?.url || path.externalDocs?.description
+        ? html`<div style="background-color:var(--bg3); padding:2px 8px 8px 8px; margin:8px 0; border-radius:var(--border-radius)"> 
+            <div class="m-markdown"> ${unsafeHTML(marked(path.externalDocs?.description || ''))} </div>
+            ${path.externalDocs?.url
+              ? html`<a style="font-family:var(--font-mono); font-size:var(--font-size-small)" href="${path.externalDocs?.url}" target="_blank">
+                  ${path.externalDocs?.url} <div style="transform: rotate(270deg) scale(1.5); display: inline-block; margin-left:5px">⇲</div>
+                </a>`
+              : ''
+            }
+          </div>`
+        : ''
+      }
       ${codeSampleTabPanel}
       <div class='expanded-req-resp-container'>
         <api-request
@@ -81,6 +129,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
           server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
           fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
           allow-try = "${this.allowTry}"
+          show-curl-before-try = "${this.showCurlBeforeTry}"
           accept = "${accept}"
           render-style="${this.renderStyle}" 
           schema-style = "${this.schemaStyle}"
@@ -91,7 +140,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
           schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
           schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
           fetch-credentials = "${this.fetchCredentials}"
-          exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+          exportparts = "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,
             file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
             anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
         > </api-request>
@@ -125,7 +174,7 @@ export default function expandedEndpointTemplate() {
   return html`
   ${this.resolvedSpec.tags.map((tag) => html`
     <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style="border-top:1px solid var(--primary-color);">
-      <div class="title tag" part="section-tag-title label-tag-title">${tag.name}</div>
+      <div class="title tag" part="section-tag-title label-tag-title">${tag.displayName}</div>
       <slot name="${tag.elementId}"></slot>
       <div class="regular-font-size">
       ${
@@ -136,8 +185,8 @@ export default function expandedEndpointTemplate() {
       }
       </div>
     </section>
-    <section class='regular-font section-gap--read-mode' part="section-operations-in-tag">
-      ${tag.paths.map((path) => expandedEndpointBodyTemplate.call(this, path, 'BBB'))}
+    <section class="regular-font section-gap--read-mode" part="section-operations-in-tag">
+      ${tag.paths.map((path) => expandedEndpointBodyTemplate.call(this, path))}
     </section>
     `)
   }

package/src/templates/focused-endpoint-template.js

@@ -38,7 +38,7 @@ function defaultContentTemplate() {
 /* eslint-disable indent */
 function focusedTagBodyTemplate(tag) {
   return html`
-    <h1 id="${tag.elementId}">${tag.name}</h1>
+    <h1 id="${tag.elementId}">${tag.displayName}</h1>
     ${this.onNavTagClick === 'show-description' && tag.description
       ? html`
         <div class="m-markdown">
@@ -96,7 +96,10 @@ export default function focusedEndpointTemplate() {
       // In focused mode we must expand the nav-bar tag element if it is collapsed
       const newNavEl = this.shadowRoot.getElementById(`link-${focusElId}`);
       expandCollapseNavBarTag(newNavEl, 'expand');
-      focusedTemplate = wrapFocusedTemplate.call(this, expandedEndpointBodyTemplate.call(this, selectedPathObj, selectedTagObj.name));
+      focusedTemplate = wrapFocusedTemplate.call(
+        this,
+        expandedEndpointBodyTemplate.call(this, selectedPathObj, (selectedTagObj.name || ''), (selectedTagObj.description || '')),
+      );
     } else {
       // if focusedElementId is not found then show the default content (overview or first-path)
       focusedTemplate = defaultContentTemplate.call(this);

package/src/templates/header-template.js

@@ -23,7 +23,7 @@ export default function headerTemplate() {
             part="textbox textbox-spec-url" 
             placeholder="Spec URL" 
             value="${this.specUrl || ''}" 
-            @change="${this.onSepcUrlChange}" 
+            @change="${this.onSpecUrlChange}" 
             spellcheck="false"
           >
           <div style="margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;">&#x21a9;</div> 
@@ -37,7 +37,7 @@ export default function headerTemplate() {
             type="file" 
             style="display:none" 
             value="${this.specFile || ''}" 
-            @change="${this.onSepcFileChange}" 
+            @change="${this.onSpecFileChange}" 
             spellcheck="false"
            >
           <button class="m-btn primary only-large-screen" style="margin-left:10px;" part="btn btn-fill" @click="${this.onFileLoadClick}"> LOCAL JSON FILE </button>

package/src/templates/json-schema-viewer-template.js

@@ -63,7 +63,7 @@ function jsonSchemaBodyTemplate() {
                 .data = "${schemaInObjectNotation(jSchemaBody.schema, {})}"
                 schema-expand-level = "${this.schemaExpandLevel}"
                 schema-description-expanded = "${this.schemaDescriptionExpanded}"
-                allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+                allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
                 schema-hide-read-only = "false"
                 schema-hide-write-only = "false"
               > </schema-tree>
@@ -113,6 +113,7 @@ export default function jsonSchemaViewerTemplate(isMini = false) {
     navHoverBgColor: isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',
     navHoverTextColor: isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : '',
     navAccentColor: isValidHexColor(this.navAccentColor) ? this.navAccentColor : '',
+    navAccenttextColor: isValidHexColor(this.navAccentTextColor) ? this.navAccentTextColor : '',
   };
   /* eslint-disable indent */
   if (this.resolvedSpec.specLoadError) {

package/src/templates/main-body-template.js

@@ -30,24 +30,25 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
     navHoverBgColor: isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',
     navHoverTextColor: isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : '',
     navAccentColor: isValidHexColor(this.navAccentColor) ? this.navAccentColor : '',
+    navAccentTextColor: isValidHexColor(this.navAccentTextColor) ? this.navAccentTextColor : '',
   };
   /* eslint-disable indent */
   if (this.resolvedSpec.specLoadError) {
     if (isMini) {
       return html`
         ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
-        <div style="display:flex; align-items:center; border:1px dashed var(--border-color); height:42px; padding:5px; font-size:var(--font-size-small); color:var(--red); font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
+        <div style='display:flex; align-items:center; border:1px dashed var(--border-color); height:42px; padding:5px; font-size:var(--font-size-small); color:var(--red); font-family:var(--font-mono)'> ${this.resolvedSpec.info.description} </div>
       `;
     }
     return html`
       ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
       <!-- Header -->
       ${headerTemplate.call(this)}
-      <main class="main-content regular-font" part="section-main-content">
+      <main class='main-content regular-font' part='section-main-content'>
         <slot></slot>
-        <div style="margin:24px; text-align: center;">
-          <h1 style="color: var(--red)"> ${this.resolvedSpec.info.title} </h1>
-          <div style="font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
+        <div style='margin:24px; text-align: center;'>
+          <h1 style='color: var(--red)'> ${this.resolvedSpec.info.title} </h1>
+          <div style='font-family:var(--font-mono)'> ${this.resolvedSpec.info.description} </div>
         </div>
       </main>  
     `;
@@ -55,12 +56,12 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
   if (this.resolvedSpec.isSpecLoading) {
     return html`
       ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}
-      <main class="main-content regular-font" part="section-main-content">
+      <main class='main-content regular-font' part='section-main-content'>
         <slot></slot>
-        <div class="main-content-inner--${this.renderStyle}-mode">
-          <div class="loader"></div>
+        <div class='main-content-inner--${this.renderStyle}-mode'>
+          <div class='loader'></div>
         </div>
-      </main>  
+      </main>
     `;
   }
 
@@ -73,7 +74,7 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
     <!-- Advanced Search -->
     ${this.allowAdvancedSearch === 'false' ? '' : advancedSearchTemplate.call(this)}
 
-    <div id='the-main-body' class="body ${this.cssClasses}" dir= ${this.pageDirection} >
+    <div id='the-main-body' class='body ${this.cssClasses}' dir='${this.pageDirection}' >
       <!-- Side Nav -->
       ${((this.renderStyle === 'read' || this.renderStyle === 'focused')
           && this.showSideNav === 'true'
@@ -82,24 +83,24 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
       }
 
       <!-- Main Content -->
-      <main class="main-content regular-font" part="section-main-content">
+      <main class='main-content regular-font' tabindex='-1' part='section-main-content'>
         <slot></slot>
-        <div class="main-content-inner--${this.renderStyle}-mode">
+        <div class='main-content-inner--${this.renderStyle}-mode'>
           ${this.loading === true
-            ? html`<div class="loader"></div>`
+            ? html`<div class='loader'></div>`
             : html`
               ${this.loadFailed === true
-                ? html`<div style="text-align: center;margin: 16px;"> Unable to load the Spec</div>`
+                ? html`<div style='text-align: center;margin: 16px;'> Unable to load the Spec</div>`
                 : html`
-                  <div class="operations-root" @click="${(e) => { this.handleHref(e); }}">
+                  <div class='operations-root' @click='${(e) => { this.handleHref(e); }}'>
                   ${this.renderStyle === 'focused'
                     ? html`${focusedEndpointTemplate.call(this)}`
                     : html`
                       ${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}
                       ${this.allowServerSelection === 'true' ? serverTemplate.call(this) : ''}
                       ${this.allowAuthentication === 'true' ? securitySchemeTemplate.call(this) : ''}
-                      <div id="operations-top" class="observe-me">
-                        <slot name="operations-top"></slot>
+                      <div id='operations-top' class='observe-me'>
+                        <slot name='operations-top'></slot>
                       </div>  
                       ${this.renderStyle === 'read'
                         ? expandedEndpointTemplate.call(this)
@@ -112,7 +113,7 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
               }`
           }
         </div>
-        <slot name="footer"></slot>
+        <slot name='footer'></slot>
       </main>
     </div>  
   `;