rapidoc 9.1.7 → 9.3.0

package/src/styles/tab-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .tab-panel {
@@ -41,5 +41,6 @@ export default css`
 .tab-content {
   margin:-1px 0 0 0;
   position:relative;
+  min-height: 50px;
 }
 `;

package/src/styles/table-styles.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
 .m-table {

package/src/templates/advance-search-template.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '~/components/dialog-box';
 
 /* eslint-disable indent */

package/src/templates/callback-template.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 /* eslint-disable indent */
 export default function callbackTemplate(callbacks) {
@@ -29,6 +29,7 @@ export default function callbackTemplate(callbacks) {
                       .parameters = "${method[1]?.parameters || ''}" 
                       .request_body = "${method[1]?.requestBody || ''}"
                       fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
+                      use-summary-to-list-example = "${this.useSummaryToListExamples}"
                       allow-try = "false"
                       render-style="${this.renderStyle}" 
                       schema-style = "${this.schemaStyle}"
@@ -36,9 +37,12 @@ export default function callbackTemplate(callbacks) {
                       schema-expand-level = "${this.schemaExpandLevel}"
                       schema-description-expanded = "${this.schemaDescriptionExpanded}"
                       allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
-                      schema-hide-read-only = "${this.schemaHideReadOnly}"
+                      schema-hide-read-only = "false"
+                      schema-hide-write-only = "${this.schemaHideWriteOnly}"
                       fetch-credentials = "${this.fetchCredentials}"
-                      exportparts="btn btn-fill btn-outline btn-try"
+                      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,
+                        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-response
@@ -52,7 +56,10 @@ export default function callbackTemplate(callbacks) {
                       schema-expand-level = "${this.schemaExpandLevel}"
                       schema-description-expanded = "${this.schemaDescriptionExpanded}"
                       allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-                      exportparts = "btn--resp btn-fill--resp btn-outline--resp"
+                      schema-hide-read-only = "${this.schemaHideReadOnly}"
+                      schema-hide-write-only = "false"
+                      exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy,
+                      schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
                     > </api-response>
                   </div>
                 </div>  

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

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import Prism from 'prismjs';
 import { copyToClipboard } from '~/utils/common-utils';
 

package/src/templates/components-template.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import { schemaInObjectNotation } from '~/utils/schema-utils';
 import '~/components/json-tree';
@@ -21,6 +21,7 @@ function schemaBodyTemplate(sComponent) {
         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> `
     : html`
       <schema-tree
@@ -31,6 +32,7 @@ function schemaBodyTemplate(sComponent) {
         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>`
 }
   </div>`;

package/src/templates/endpoint-template.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import '~/components/api-request';
 import '~/components/api-response';
@@ -46,9 +46,9 @@ function onExpandCollapseAll(e, action = 'expand-all') {
 /* eslint-disable indent */
 function endpointHeadTemplate(path, pathsExpanded = false) {
   return html`
-  <summary @click="${(e) => { toggleExpand.call(this, path, e); }}" class='endpoint-head ${path.method} ${path.deprecated ? 'deprecated' : ''} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
-    <div class="method ${path.method} ${path.deprecated ? 'deprecated' : ''}"> ${path.method} </div> 
-    <div class="path ${path.deprecated ? 'deprecated' : ''}"> 
+  <summary @click="${(e) => { toggleExpand.call(this, path, e); }}" part="section-endpoint-head-${path.expanded ? 'expanded' : 'collapsed'}" class='endpoint-head ${path.method} ${path.deprecated ? 'deprecated' : ''} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
+    <div part="section-endpoint-head-method" class="method ${path.method} ${path.deprecated ? 'deprecated' : ''}"> ${path.method} </div> 
+    <div  part="section-endpoint-head-path" class="path ${path.deprecated ? 'deprecated' : ''}"> 
       ${path.path} 
       ${path.isWebhook ? html`<span style="font-family: var(--font-regular); font-size: var(--); font-size: var(--font-size-small); color:var(--primary-color); margin-left: 16px"> Webhook</span>` : ''}
     </div>
@@ -62,7 +62,7 @@ function endpointHeadTemplate(path, pathsExpanded = false) {
     ${this.showSummaryWhenCollapsed
       ? html`
         <div class="only-large-screen" style="min-width:60px; flex:1"></div>
-        <div class="descr">${path.summary || path.shortSummary} </div>`
+        <div part="section-endpoint-head-description" class="descr">${path.summary || path.shortSummary} </div>`
       : ''
     }
   </summary>
@@ -88,19 +88,19 @@ function endpointBodyTemplate(path) {
 
   const codeSampleTabPanel = path.xCodeSamples ? codeSamplesTemplate(path.xCodeSamples) : '';
   return html`
-  <div class='endpoint-body ${path.method} ${path.deprecated ? 'deprecated' : ''}'>
+  <div part="section-endpoint-body-${path.expanded ? 'expanded' : 'collapsed'}" class='endpoint-body ${path.method} ${path.deprecated ? 'deprecated' : ''}'>
     <div class="summary">
       ${path.summary
-        ? html`<div class="title">${path.summary}<div>`
+        ? html`<div class="title" part="section-endpoint-body-title">${path.summary}<div>`
         : path.shortSummary !== path.description
-          ? html`<div class="title">${path.shortSummary}</div>`
+          ? html`<div class="title" part="section-endpoint-body-title">${path.shortSummary}</div>`
           : ''
       }
       ${path.xBadges && path.xBadges?.length > 0
         ? html`
           <div style="display:flex; flex-wrap:wrap;font-size: var(--font-size-small);">
             ${path.xBadges.map((v) => (
-                html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
+                html`<span part="endpoint-badge" style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
               ))
             }
           </div>
@@ -108,7 +108,7 @@ function endpointBodyTemplate(path) {
         : ''
       }
 
-      ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
+      ${path.description ? html`<div part="section-endpoint-body-description" class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
       <slot name="${path.elementId}"></slot>
       ${pathSecurityTemplate.call(this, path.security)}
       ${codeSampleTabPanel}
@@ -128,6 +128,7 @@ function endpointBodyTemplate(path) {
           server-url = "${path.servers && path.servers.length > 0 ? path.servers[0].url : this.selectedServer.computedUrl}" 
           active-schema-tab = "${this.defaultSchemaTab}"
           fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
+          use-summary-to-list-example = "${this.useSummaryToListExamples}"
           allow-try = "${this.allowTry}"
           accept = "${accept}"
           render-style="${this.renderStyle}" 
@@ -135,9 +136,12 @@ function endpointBodyTemplate(path) {
           schema-expand-level = "${this.schemaExpandLevel}"
           schema-description-expanded = "${this.schemaDescriptionExpanded}"
           allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-          schema-hide-read-only = "${this.schemaHideReadOnly}"
+          schema-hide-read-only = "${path.isWebhook ? this.schemaHideWriteOnly : this.schemaHideReadOnly}"
+          schema-hide-write-only = "${path.isWebhook ? this.schemaHideReadOnly : this.schemaHideWriteOnly}"
           fetch-credentials = "${this.fetchCredentials}"
-          exportparts="btn btn-fill btn-outline btn-try"
+          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,
+            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>
 
           ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
@@ -153,9 +157,12 @@ function endpointBodyTemplate(path) {
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
         allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-        schema-hide-write-only = "${this.schemaHideWriteOnly}"
+        schema-hide-read-only = "${path.isWebhook ? this.schemaHideWriteOnly : this.schemaHideReadOnly}"
+        schema-hide-write-only = "${path.isWebhook ? this.schemaHideReadOnly : this.schemaHideWriteOnly}"
         selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-        exportparts = "btn--resp btn-fill--resp btn-outline--resp"
+        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>`;
@@ -196,7 +203,7 @@ export default function endpointTemplate(showExpandCollapse = true, showTags = t
                 }
                 return true;
                 }).map((path) => html`
-                <section id='${path.elementId}' class='m-endpoint regular-font ${path.method} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
+                <section part="section-endpoint" id='${path.elementId}' class='m-endpoint regular-font ${path.method} ${pathsExpanded || path.expanded ? 'expanded' : 'collapsed'}'>
                   ${endpointHeadTemplate.call(this, path, pathsExpanded)}      
                   ${pathsExpanded || path.expanded ? endpointBodyTemplate.call(this, path) : ''}
                 </section>`)

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

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import { rapidocApiKey } from '~/utils/common-utils';
 import { pathSecurityTemplate } from '~/templates/security-scheme-template';
@@ -37,79 +37,85 @@ 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"> ${tagName} </h3>` : ''}
-    ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
-    ${html`
-      ${path.xBadges && path.xBadges?.length > 0
-        ? html`
-          <div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
-            ${path.xBadges.map((v) => (
-                html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
-              ))
-            }
-          </div>
+      ${(this.renderStyle === 'focused' && tagName !== 'General ⦂') ? html`<h3 class="upper" style="font-weight:bold" part="section-operation-tag"> ${tagName} </h3>` : ''}
+      ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''}
+      ${html`
+        ${path.xBadges && path.xBadges?.length > 0
+          ? html`
+            <div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
+              ${path.xBadges.map((v) => (
+                  html`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px;  background-color: var(--light-${v.color}, var(--input-bg)); color:var(--${v.color}); border:1px solid var(--${v.color})">${v.label}</span>`
+                ))
+              }
+            </div>
+            `
+          : ''
+        }
+        <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`
+            <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> 
+              <span part="label-operation-path">${path.path}</span>
+            </div>
           `
-        : ''
+        }
+        <slot name="${path.elementId}"></slot>`
       }
-      <h2> ${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2>
-      ${path.isWebhook
-        ? html`<span style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`
-        : html`
-          <div class='mono-font part="section-operation-url" 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>
-        `
-      }
-      <slot name="${path.elementId}"></slot>`
-    }
-    ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
-    ${pathSecurityTemplate.call(this, path.security)}
-    ${codeSampleTabPanel}
-    <div class='expanded-req-resp-container'>
-      <api-request
-        class = "${this.renderStyle}-mode"
-        style = "width:100%;"
-        method = "${path.method}"
-        path = "${path.path}"
-        .security = "${path.security}"
-        .parameters = "${path.parameters}"
-        .request_body = "${path.requestBody}"
-        .api_keys = "${nonEmptyApiKeys}"
-        .servers = "${path.servers}"
-        server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
-        fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
-        allow-try = "${this.allowTry}"
-        accept = "${accept}"
-        render-style="${this.renderStyle}" 
-        schema-style = "${this.schemaStyle}"
-        active-schema-tab = "${this.defaultSchemaTab}"
-        schema-expand-level = "${this.schemaExpandLevel}"
-        schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-        schema-hide-read-only = "${this.schemaHideReadOnly}"
-        fetch-credentials = "${this.fetchCredentials}"
-        exportparts = "btn btn-fill btn-outline btn-try"
-      > </api-request>
+      ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(path.description))}</div>` : ''}
+      ${pathSecurityTemplate.call(this, path.security)}
+      ${codeSampleTabPanel}
+      <div class='expanded-req-resp-container'>
+        <api-request
+          class = "${this.renderStyle}-mode"
+          style = "width:100%;"
+          method = "${path.method}"
+          path = "${path.path}"
+          .security = "${path.security}"
+          .parameters = "${path.parameters}"
+          .request_body = "${path.requestBody}"
+          .api_keys = "${nonEmptyApiKeys}"
+          .servers = "${path.servers}"
+          server-url = "${path.servers?.[0]?.url || this.selectedServer.computedUrl}"
+          fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
+          use-summary-to-list-example = "${this.useSummaryToListExamples}"
+          allow-try = "${this.allowTry}"
+          accept = "${accept}"
+          render-style="${this.renderStyle}" 
+          schema-style = "${this.schemaStyle}"
+          active-schema-tab = "${this.defaultSchemaTab}"
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
+          allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
+          schema-hide-read-only = "${path.isWebhook ? false : this.schemaHideReadOnly}"
+          schema-hide-write-only = "${path.isWebhook ? this.schemaHideWriteOnly : 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,
+            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>
 
-      ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
+        ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''}
 
-      <api-response
-        class = "${this.renderStyle}-mode"
-        style = "width:100%;"
-        .responses = "${path.responses}"
-        render-style = "${this.renderStyle}"
-        schema-style = "${this.schemaStyle}"
-        active-schema-tab = "${this.defaultSchemaTab}"
-        schema-expand-level = "${this.schemaExpandLevel}"
-        schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
-        schema-hide-write-only = "${this.schemaHideWriteOnly}"
-        selected-status = "${Object.keys(path.responses || {})[0] || ''}"
-        exportparts = "btn--resp btn-fill--resp btn-outline--resp"
-      > </api-response>
+        <api-response
+          class = "${this.renderStyle}-mode"
+          style = "width:100%;"
+          .responses = "${path.responses}"
+          render-style = "${this.renderStyle}"
+          schema-style = "${this.schemaStyle}"
+          active-schema-tab = "${this.defaultSchemaTab}"
+          schema-expand-level = "${this.schemaExpandLevel}"
+          schema-description-expanded = "${this.schemaDescriptionExpanded}"
+          allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
+          schema-hide-read-only = "${path.isWebhook ? this.schemaHideReadOnly : false}"
+          schema-hide-write-only = "${path.isWebhook ? false : this.schemaHideWriteOnly}"
+          selected-status = "${Object.keys(path.responses || {})[0] || ''}"
+          exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy,
+          schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
+        > </api-response>
+      </div>
     </div>
-  </div>
   `;
 }
 
@@ -118,7 +124,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="label-tag-title">${tag.name}</div>
+      <div class="title tag" part="section-tag-title label-tag-title">${tag.name}</div>
       <slot name="${tag.elementId}"></slot>
       <div class="regular-font-size">
       ${

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

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import { expandedEndpointBodyTemplate } from '~/templates/expanded-endpoint-template';
 import '~/components/api-request';

package/src/templates/header-template.js

@@ -1,10 +1,10 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import logoTemplate from '~/templates/logo-template';
 
 /* eslint-disable indent */
 export default function headerTemplate() {
   return html`
-  <header class="row header regular-font" part="section-header" style="padding:8px 4px 8px 4px;min-height:48px;">
+  <header class="row main-header regular-font" part="section-header" style="padding:8px 4px 8px 4px;min-height:48px;">
     <div class="only-large-screen-flex" style="align-items: center;">
       <slot name="logo" class="logo" part="section-logo">
         ${logoTemplate('height:36px;width:36px;margin-left:5px')}

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

@@ -1,6 +1,6 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 
 // Templates
 import overviewTemplate from '~/templates/overview-template';
@@ -154,7 +154,7 @@ export default function jsonSchemaViewerTemplate(isMini = false) {
     <!-- Header -->
     ${this.showHeader === 'false' ? '' : headerTemplate.call(this)}
     
-    <div id='the-main-body' class="body" dir= ${this.pageDirection}>
+    <div id='the-main-body' class="body ${this.cssClasses}" dir= ${this.pageDirection}>
 
       <!-- Side Nav -->
       ${jsonSchemaNavTemplate.call(this)}

package/src/templates/logo-template.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 /* eslint-disable indent */
 export default function logoTemplate(style) {

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

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 // Templates
 import expandedEndpointTemplate from '~/templates/expanded-endpoint-template';
@@ -73,7 +73,7 @@ export default function mainBodyTemplate(isMini = false, showExpandCollapse = tr
     <!-- Advanced Search -->
     ${this.allowAdvancedSearch === 'false' ? '' : advancedSearchTemplate.call(this)}
 
-    <div id='the-main-body' class="body" 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'

package/src/templates/navbar-template.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { marked } from 'marked';
 import { pathIsInSearch } from '~/utils/common-utils';
 
@@ -50,7 +50,7 @@ export default function navbarTemplate() {
     ${(this.allowSearch === 'false' && this.allowAdvancedSearch === 'false')
       ? ''
       : html`
-        <div style="display:flex; flex-direction:row; justify-content:center; align-items:center; padding:8px 24px 12px 24px; ${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}">
+        <div style="display:flex; flex-direction:row; justify-content:center; align-items:stretch; padding:8px 24px 12px 24px; ${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}">
           ${this.allowSearch === 'false'
             ? ''
             : html`
@@ -67,7 +67,9 @@ export default function navbarTemplate() {
               </div>  
               ${this.matchPaths
                 ? html`
-                  <div @click = '${this.onClearSearch}' style='margin-left:5px; cursor:pointer; align-self:center; color:var(--nav-text-color)' class='small-font-size primary-text bold-text'> CLEAR </div>`
+                  <button @click = '${this.onClearSearch}' class="m-btn thin-border" style="margin-left:5px; color:var(--nav-text-color); width:75px; padding:6px 8px;" part="btn btn-outline btn-clear-filter">
+                    CLEAR
+                  </button>`
                 : ''
               }
             `
@@ -75,8 +77,8 @@ export default function navbarTemplate() {
           ${this.allowAdvancedSearch === 'false' || this.matchPaths
             ? ''
             : html`
-              <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px;" @click="${this.onShowSearchModalClicked}">
-                Search
+              <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px; padding:6px 8px; width:75px" @click="${this.onShowSearchModalClicked}">
+                SEARCH
               </button>
             `
           }
@@ -89,7 +91,12 @@ export default function navbarTemplate() {
         : html`
           ${(this.infoDescriptionHeadingsInNavBar === 'true')
             ? html`
-              ${this.resolvedSpec.infoDescriptionHeaders.length > 0 ? html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}' > Overview </div>` : ''}
+              ${this.resolvedSpec.infoDescriptionHeaders.length > 0
+                ? html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}'> 
+                    ${this.resolvedSpec.info?.title?.trim() || 'Overview'}
+                  </div>`
+                : ''
+              }
               <div class="overview-headers">
                 ${this.resolvedSpec.infoDescriptionHeaders.map((header) => html`
                   <div 
@@ -104,7 +111,9 @@ export default function navbarTemplate() {
               </div>
               ${this.resolvedSpec.infoDescriptionHeaders.length > 0 ? html`<hr style='border-top: 1px solid var(--nav-hover-bg-color); border-width:1px 0 0 0; margin: 15px 0 0 0'/>` : ''}
             `
-            : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}'> Overview </div>`
+            : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}'> 
+            ${this.resolvedSpec.info?.title?.trim() || 'Overview'} 
+              </div>`
           }
         `
       }
@@ -197,10 +206,14 @@ export default function navbarTemplate() {
                   this.scrollToEventTarget(e, false);
                 }}'
               >
-                <span style = "${p.deprecated ? 'filter:opacity(0.5)' : ''}">
+                <span style = "display:flex; align-items:start; ${p.deprecated ? 'filter:opacity(0.5)' : ''}">
+                  ${html`<span class="nav-method ${this.showMethodInNavBar} ${p.method}">
+                      ${this.showMethodInNavBar === 'as-colored-block' ? p.method.substring(0, 3).toUpperCase() : p.method.toUpperCase()}
+                    </span>`
+                  }
                   ${p.isWebhook ? html`<span style="font-weight:bold; margin-right:8px; font-size: calc(var(--font-size-small) - 2px)">WEBHOOK</span>` : ''}
                   ${this.usePathInNavBar === 'true'
-                    ? html`<span class='mono-font'>${p.method.toUpperCase()} ${p.path}</span>`
+                    ? html`<span class='mono-font'>${p.path}</span>`
                     : p.summary || p.shortSummary
                   }
                 </span>

package/src/templates/overview-template.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
 import { downloadResource, viewResource } from '~/utils/common-utils';
 
@@ -16,7 +16,7 @@ export default function overviewTemplate() {
       class="observe-me ${this.renderStyle === 'view' ? 'section-gap' : 'section-gap--read-mode'}">
       ${this.resolvedSpec?.info
         ? html`
-          <div id="api-title" part="label-overview-title" style="font-size:32px">
+          <div id="api-title" part="section-overview-title" style="font-size:32px">
             ${this.resolvedSpec.info.title}
             ${!this.resolvedSpec.info.version ? '' : html`
               <span style = 'font-size:var(--font-size-small);font-weight:bold'>