rapidoc 9.3.5 → 9.3.7

package/src/components/api-response.js

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
-import { schemaInObjectNotation, generateExample } from '~/utils/schema-utils';
+import { schemaInObjectNotation, generateExample, standardizeExample } from '~/utils/schema-utils';
 import FontStyles from '~/styles/font-styles';
 import FlexStyles from '~/styles/flex-styles';
 import TableStyles from '~/styles/table-styles';
@@ -92,7 +92,7 @@ export default class ApiResponse extends LitElement {
       </div>
       <div>
         ${this.responseTemplate()}
-      <div>  
+      </div>  
     </div>  
     `;
   }
@@ -121,8 +121,8 @@ export default class ApiResponse extends LitElement {
         const respExamples = generateExample(
           mimeRespObj.schema,
           mimeResp,
-          mimeRespObj.examples,
-          mimeRespObj.example,
+          standardizeExample(mimeRespObj.examples),
+          standardizeExample(mimeRespObj.example),
           this.callback === 'true' || this.webhook === 'true' ? false : true, // eslint-disable-line no-unneeded-ternary
           this.callback === 'true' || this.webhook === 'true' ? true : false, // eslint-disable-line no-unneeded-ternary
           mimeResp.includes('json') ? 'json' : 'text',
@@ -165,10 +165,9 @@ export default class ApiResponse extends LitElement {
                   ${respStatus} 
                 </button>`
               }`)
-          }`
+          }</div>`
         : html`<span>${Object.keys(this.responses)[0]}</span>`
       }
-      </div>
 
       ${Object.keys(this.responses).map((status) => html`
         <div style = 'display: ${status === this.selectedStatus ? 'block' : 'none'}' >
@@ -202,7 +201,7 @@ export default class ApiResponse extends LitElement {
                 }
               </div>
             `
-          }`)
+          }</div>`)
         }
     `;
   }

package/src/components/schema-table.js

@@ -199,7 +199,7 @@ export default class SchemaTable extends LitElement {
         ${newSchemaLevel >= 0 && key
           ? html`
             <div class='tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}' data-obj='${keyLabel}' title="${isDeprecated || data['::deprecated'] ? 'Deprecated' : ''}">
-              <div class="td key ${isDeprecated || data['::deprecated'] ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
+              <div class="td key ${(isDeprecated || data['::deprecated']) ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
                 ${(keyLabel || keyDescr)
                   ? html`
                     <span class='obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}' data-obj='${keyLabel}'>
@@ -210,8 +210,8 @@ export default class SchemaTable extends LitElement {
                 ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION')
                   ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>`
                   : keyLabel.endsWith('*')
-                    ? html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${isDeprecated || data['::deprecated'] ? '✗' : ''} ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
-                    : html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${isDeprecated || data['::deprecated'] ? '✗' : ''} ${keyLabel === '::props' ? '' : keyLabel}</span>`
+                    ? html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${(isDeprecated || data['::deprecated']) ? '✗' : ''} ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
+                    : html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${(isDeprecated || data['::deprecated']) ? '✗' : ''} ${keyLabel === '::props' ? '' : keyLabel}</span>`
                 }
                 ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} 
               </div>
@@ -250,6 +250,7 @@ export default class SchemaTable extends LitElement {
                       newSchemaLevel,
                       newIndentLevel,
                       data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
+                      (isDeprecated || data[dataKey]['::deprecated']),
                     )}`
                   : ''
                 : html`${this.generateTree(
@@ -261,13 +262,13 @@ export default class SchemaTable extends LitElement {
                   newSchemaLevel,
                   newIndentLevel,
                   data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
-                  isDeprecated || data[dataKey]['::deprecated'],
+                  (isDeprecated || data[dataKey]['::deprecated']),
                 )}`
               }
             `)}
           `
         }
-        <div>
+        </div>
       `;
     }
 

package/src/components/schema-tree.js

@@ -121,7 +121,7 @@ export default class SchemaTree extends LitElement {
     `;
   }
 
-  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0, readOrWrite = '') {
+  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0, readOrWrite = '', isDeprecated = false) {
     if (this.schemaHideReadOnly === 'true') {
       if (dataType === 'array') {
         if (readOrWrite === 'readonly') {
@@ -212,15 +212,15 @@ export default class SchemaTree extends LitElement {
     }
     if (typeof data === 'object') {
       return html`
-        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}${data['::nullable'] ? ' nullable' : ''}" title="${data['::deprecated'] ? 'Deprecated' : ''}">
-          <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style='min-width:${minFieldColWidth}px'>
+        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}${data['::nullable'] ? ' nullable' : ''}" title="${(isDeprecated || data['::deprecated']) ? 'Deprecated' : ''}">
+          <div class="td key ${(isDeprecated || data['::deprecated']) ? 'deprecated' : ''}" style='min-width:${minFieldColWidth}px'>
             ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION')
               ? html`<span class='key-label xxx-of-key'> ${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
               : keyLabel === '::props' || keyLabel === '::ARRAY~OF'
                 ? ''
                 : schemaLevel > 0
                   ? html`<span class="key-label" title="${readOrWrite === 'readonly' ? 'Read-Only' : readOrWrite === 'writeonly' ? 'Write-Only' : ''}">
-                      ${data['::deprecated'] ? '✗' : ''}
+                      ${(isDeprecated || data['::deprecated']) ? '✗' : ''}
                       ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span style="color:var(--red)">*</span>` : ''}${readOrWrite === 'readonly' ? html` 🆁` : readOrWrite === 'writeonly' ? html` 🆆` : readOrWrite}:
                     </span>`
                   : ''
@@ -231,7 +231,7 @@ export default class SchemaTree extends LitElement {
         </div>
         <div class='inside-bracket ${data['::type'] || 'no-type-info'}' style='padding-left:${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' ? 0 : leftPadding}px;'>
           ${Array.isArray(data) && data[0]
-            ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, data[0]['::readwrite'])}`
+            ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, data[0]['::readwrite'], (isDeprecated || data[0]['::deprecated']))}`
             : html`
               ${Object.keys(data).map((dataKey) => html`
                 ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite', '::dataTypeLabel', '::nullable'].includes(dataKey)
@@ -245,6 +245,7 @@ export default class SchemaTree extends LitElement {
                         newSchemaLevel,
                         newIndentLevel,
                         data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
+                        (isDeprecated || data[dataKey]['::deprecated']),
                       )}`
                     : ''
                   : html`${this.generateTree(
@@ -256,6 +257,7 @@ export default class SchemaTree extends LitElement {
                     newSchemaLevel,
                     newIndentLevel,
                     data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
+                    (isDeprecated || data[dataKey]['::deprecated']),
                   )}`
                 }
               `)}
@@ -300,8 +302,8 @@ export default class SchemaTree extends LitElement {
 
     return html`
       <div class = "tr primitive" title="${deprecated ? 'Deprecated' : ''}">
-        <div class="td key ${deprecated}" style='min-width:${minFieldColWidth}px'>
-          ${deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
+        <div class="td key ${isDeprecated || deprecated}" style='min-width:${minFieldColWidth}px'>
+          ${isDeprecated || deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
           ${keyLabel.endsWith('*')
             ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>:`
             : key.startsWith('::OPTION')

package/src/json-schema-viewer.js

@@ -98,6 +98,7 @@ export default class JsonSchemaViewer extends LitElement {
         color:var(--fg);
         background-color:var(--bg);
         font-family:var(--font-regular);
+        container-type: inline-size;
       }
       .body {
         display:flex;
@@ -163,11 +164,11 @@ export default class JsonSchemaViewer extends LitElement {
         height: 36px;
         animation: spin 2s linear infinite;
       }
-      @media only screen and (min-width: 768px) {
+      @container (min-width: 768px) {
         .only-large-screen{
           display:block;
         }
-        .only-large-screen-flex{
+        .only-large-screen-flex {
           display:flex;
         }
       }`,
@@ -289,6 +290,9 @@ export default class JsonSchemaViewer extends LitElement {
         this.sortTags === 'true',
         this.sortSchemas === 'true',
         this.getAttribute('sort-endpoints-by'),
+        this.getAttribute('match-paths'),
+        this.getAttribute('match-type'),
+        this.getAttribute('remove-endpoints-with-badge-label-as'),
       );
       this.loading = false;
       this.afterSpecParsedAndValidated(spec);

package/src/rapidoc-mini.js

@@ -84,6 +84,7 @@ export default class RapiDocMini extends LitElement {
       // Filters
       matchPaths: { type: String, attribute: 'match-paths' },
       matchType: { type: String, attribute: 'match-type' },
+      removeEndpointsWithBadgeLabelAs: { type: String, attribute: 'remove-endpoints-with-badge-label-as' },
 
       // Internal Properties
       loading: { type: Boolean }, // indicates spec is being loaded
@@ -115,13 +116,14 @@ export default class RapiDocMini extends LitElement {
         color:var(--fg);
         background-color:var(--bg);
         font-family:var(--font-regular);
+        container-type: inline-size;
       }
 
-      @media only screen and (min-width: 768px) {
-        .only-large-screen{
+      @container (min-width: 768px) {
+        .only-large-screen {
           display:block;
         }
-        .only-large-screen-flex{
+        .only-large-screen-flex {
           display:flex;
         }
       }`,
@@ -181,7 +183,10 @@ export default class RapiDocMini extends LitElement {
     if (!this.sortTags || !'true, false,'.includes(`${this.sortTags},`)) { this.sortTags = 'false'; }
     if (!this.sortEndpointsBy || !'method, path, summary,'.includes(`${this.sortEndpointsBy},`)) { this.sortEndpointsBy = 'path'; }
     if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }
+
     if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }
+    if (!this.matchPaths) { this.matchPaths = ''; }
+    if (!this.removeEndpointsWithBadgeLabelAs) { this.removeEndpointsWithBadgeLabelAs = ''; }
 
     if (!this.allowSchemaDescriptionExpandToggle || !'true, false,'.includes(`${this.allowSchemaDescriptionExpandToggle},`)) { this.allowSchemaDescriptionExpandToggle = 'true'; }
     if (!this.fetchCredentials || !'omit, same-origin, include,'.includes(`${this.fetchCredentials},`)) { this.fetchCredentials = ''; }
@@ -197,7 +202,7 @@ export default class RapiDocMini extends LitElement {
   }
 
   render() {
-    return mainBodyTemplate.call(this, true, false, false, this.pathsExpanded);
+    return mainBodyTemplate.call(this, true, this.pathsExpanded);
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
@@ -209,6 +214,13 @@ export default class RapiDocMini extends LitElement {
         }, 0);
       }
     }
+    if (name === 'match-paths' || name === 'match-type' || name === 'remove-endpoints-with-badge-label-as') {
+      if (oldVal !== newVal) {
+        window.setTimeout(async () => {
+          await this.loadSpec(this.specUrl);
+        }, 0);
+      }
+    }
     if (name === 'api-key-name' || name === 'api-key-location' || name === 'api-key-value') {
       let updateSelectedApiKey = false;
       let apiKeyName = '';
@@ -287,11 +299,15 @@ export default class RapiDocMini extends LitElement {
         specUrl,
         this.generateMissingTags === 'true',
         this.sortTags === 'true',
+        this.sortSchemas === 'true',
         this.getAttribute('sort-endpoints-by'),
         this.getAttribute('api-key-name'),
         this.getAttribute('api-key-location'),
         this.getAttribute('api-key-value'),
         this.getAttribute('server-url'),
+        this.matchPaths,
+        this.matchType,
+        this.removeEndpointsWithBadgeLabelAs,
       );
       this.loading = false;
       this.afterSpecParsedAndValidated(spec);

package/src/rapidoc.js

@@ -23,7 +23,7 @@ import NavStyles from '~/styles/nav-styles';
 import InfoStyles from '~/styles/info-styles';
 import CustomStyles from '~/styles/custom-styles';
 // import { expandCollapseNavBarTag } from '@/templates/navbar-template';
-import { advancedSearch, pathIsInSearch, componentIsInSearch, rapidocApiKey, sleep } from '~/utils/common-utils';
+import { advancedSearch, getMatchedPaths, getMatchedComponents, rapidocApiKey, sleep } from '~/utils/common-utils';
 import ProcessSpec from '~/utils/spec-parser';
 import mainBodyTemplate from '~/templates/main-body-template';
 import { applyApiKey, onClearAllApiKeys } from '~/templates/security-scheme-template';
@@ -134,12 +134,14 @@ export default class RapiDoc extends LitElement {
       // Filters
       matchPaths: { type: String, attribute: 'match-paths' },
       matchType: { type: String, attribute: 'match-type' },
+      removeEndpointsWithBadgeLabelAs: { type: String, attribute: 'remove-endpoints-with-badge-label-as' },
 
       // Internal Properties
       loading: { type: Boolean }, // indicates spec is being loaded
       focusedElementId: { type: String }, // updating the focusedElementId will automatically render appropriate section in focused mode
       showAdvancedSearchDialog: { type: Boolean },
       advancedSearchMatches: { type: Object },
+      searchVal: { type: String },
     };
   }
 
@@ -168,6 +170,7 @@ export default class RapiDoc extends LitElement {
         color:var(--fg);
         background-color:var(--bg);
         font-family:var(--font-regular);
+        container-type: inline-size;
       }
       :where(button, input[type="checkbox"], [tabindex="0"]):focus-visible { box-shadow: var(--focus-shadow); }
       :where(input[type="text"], input[type="password"], select, textarea):focus-visible { border-color: var(--primary-color); }
@@ -216,11 +219,11 @@ export default class RapiDoc extends LitElement {
         cursor: n-resize;
         padding: 12px 0;
       }
-      .collapsed .section-tag-header:hover{
+      .collapsed .section-tag-header:hover {
         cursor: s-resize;
       }
 
-      .section-tag-header:hover{
+      .section-tag-header:hover {
         background-image: linear-gradient(to right, rgba(0,0,0,0), var(--border-color), rgba(0,0,0,0));
       }
 
@@ -255,7 +258,7 @@ export default class RapiDoc extends LitElement {
         margin-left:5px; 
       }
       .only-large-screen-flex,
-      .only-large-screen{
+      .only-large-screen {
         display:none;
       }
       .tag.title {
@@ -375,15 +378,15 @@ export default class RapiDoc extends LitElement {
         background-color: var(--yellow); 
       }
 
-      @media only screen and (min-width: 768px) {
+      @container (min-width: 768px) {
         .nav-bar {
           width: 260px;
           display:flex;
         }
-        .only-large-screen{
+        .only-large-screen {
           display:block;
         }
-        .only-large-screen-flex{
+        .only-large-screen-flex {
           display:flex;
         }
         .section-gap { 
@@ -401,7 +404,7 @@ export default class RapiDoc extends LitElement {
         }
       }
 
-      @media only screen and (min-width: 1024px) {
+      @container (min-width: 1024px) {
         .nav-bar {
           width: ${unsafeCSS(this.fontSize === 'default' ? '300px' : this.fontSize === 'large' ? '315px' : '330px')};
           display:flex;
@@ -513,9 +516,11 @@ export default class RapiDoc extends LitElement {
     if (!this.showComponents || !'true false'.includes(this.showComponents)) { this.showComponents = 'false'; }
     if (!this.infoDescriptionHeadingsInNavBar || !'true, false,'.includes(`${this.infoDescriptionHeadingsInNavBar},`)) { this.infoDescriptionHeadingsInNavBar = 'false'; }
     if (!this.fetchCredentials || !'omit, same-origin, include,'.includes(`${this.fetchCredentials},`)) { this.fetchCredentials = ''; }
-    if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }
     if (!this.scrollBehavior || !'smooth, auto,'.includes(`${this.scrollBehavior},`)) { this.scrollBehavior = 'auto'; }
 
+    if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }
+    if (!this.matchPaths) { this.matchPaths = ''; }
+    if (!this.removeEndpointsWithBadgeLabelAs) { this.removeEndpointsWithBadgeLabelAs = ''; }
     if (!this.showAdvancedSearchDialog) { this.showAdvancedSearchDialog = false; }
 
     if (!this.cssFile) { this.cssFile = null; }
@@ -580,6 +585,13 @@ export default class RapiDoc extends LitElement {
         }, 0);
       }
     }
+    if (name === 'match-paths' || name === 'match-type' || name === 'remove-endpoints-with-badge-label-as') {
+      if (oldVal !== newVal) {
+        window.setTimeout(async () => {
+          await this.loadSpec(this.specUrl);
+        }, 0);
+      }
+    }
     if (name === 'render-style') {
       if (newVal === 'read') {
         window.setTimeout(() => {
@@ -657,7 +669,7 @@ export default class RapiDoc extends LitElement {
         const specObj = JSON.parse(reader.result);
         this.loadSpec(specObj);
         this.shadowRoot.getElementById('spec-url').value = '';
-      } catch (err) {
+      } catch {
         console.error('RapiDoc: Unable to read or parse json'); // eslint-disable-line no-console
       }
     };
@@ -670,18 +682,18 @@ export default class RapiDoc extends LitElement {
   }
 
   onSearchChange(e) {
-    this.matchPaths = e.target.value;
-    this.resolvedSpec.tags.forEach((tag) => tag.paths.filter((v) => {
-      if (this.matchPaths) {
-        // v.expanded = false;
-        if (pathIsInSearch(this.matchPaths, v, this.matchType)) {
+    // this.matchPaths = e.target.value;
+    this.searchVal = e.target.value;
+    this.resolvedSpec.tags.forEach((tag) => tag.paths.filter((path) => {
+      if (this.searchVal) {
+        if (getMatchedPaths(this.searchVal, path, tag.name)) {
           tag.expanded = true;
         }
       }
     }));
     this.resolvedSpec.components.forEach((component) => component.subComponents.filter((v) => {
       v.expanded = false;
-      if (!this.matchPaths || componentIsInSearch(this.matchPaths, v)) {
+      if (getMatchedComponents(this.searchVal, v)) {
         v.expanded = true;
       }
     }));
@@ -691,7 +703,7 @@ export default class RapiDoc extends LitElement {
   onClearSearch() {
     const searchEl = this.shadowRoot.getElementById('nav-bar-search');
     searchEl.value = '';
-    this.matchPaths = '';
+    this.searchVal = '';
     this.resolvedSpec.components.forEach((component) => component.subComponents.filter((v) => {
       v.expanded = true;
     }));
@@ -716,7 +728,7 @@ export default class RapiDoc extends LitElement {
     if (!specUrl) {
       return;
     }
-    this.matchPaths = '';
+    this.searchVal = '';
     try {
       this.resolvedSpec = {
         specLoadError: false,
@@ -736,6 +748,9 @@ export default class RapiDoc extends LitElement {
         this.getAttribute('api-key-location'),
         this.getAttribute('api-key-value'),
         this.getAttribute('server-url'),
+        this.matchPaths,
+        this.matchType,
+        this.removeEndpointsWithBadgeLabelAs,
       );
       this.loading = false;
       this.afterSpecParsedAndValidated(spec);

package/src/styles/border-styles.js

@@ -15,10 +15,10 @@ export default css`
 .pad-8-16{
   padding: 8px 16px;
 }
-.pad-top-8{
+.pad-top-8 {
   padding-top: 8px;
 }
-.mar-top-8{
+.mar-top-8 {
   margin-top: 8px;
 }
 `;

package/src/styles/endpoint-styles.js

@@ -1,8 +1,11 @@
 import { css } from 'lit';
 
 export default css`
+:host {
+  container-type: inline-size;
+}
 .only-large-screen { display:none; }
-.endpoint-head .path{
+.endpoint-head .path {
   display: flex;
   font-family:var(--font-mono);
   font-size: var(--font-size-small);
@@ -21,7 +24,7 @@ export default css`
   display:none;
 }
 
-.m-endpoint.expanded{margin-bottom:16px; }
+.m-endpoint.expanded { margin-bottom:16px; }
 .m-endpoint > .endpoint-head{
   border-width:1px 1px 1px 5px;
   border-style:solid;
@@ -33,7 +36,7 @@ export default css`
   cursor: pointer;
 }
 .m-endpoint > .endpoint-head.put:hover,
-.m-endpoint > .endpoint-head.put.expanded{
+.m-endpoint > .endpoint-head.put.expanded {
   border-color:var(--orange); 
   background-color:var(--light-orange); 
 }
@@ -78,20 +81,20 @@ export default css`
 }
 .m-endpoint .endpoint-body.delete{ border-color:var(--red); }
 .m-endpoint .endpoint-body.put{ border-color:var(--orange); }
-.m-endpoint .endpoint-body.post{border-color:var(--green);}
-.m-endpoint .endpoint-body.get{ border-color:var(--blue); }
+.m-endpoint .endpoint-body.post { border-color:var(--green); }
+.m-endpoint .endpoint-body.get { border-color:var(--blue); }
 .m-endpoint .endpoint-body.head,
 .m-endpoint .endpoint-body.patch,
 .m-endpoint .endpoint-body.options { 
   border-color:var(--yellow); 
 }
 
-.m-endpoint .endpoint-body.deprecated{ 
+.m-endpoint .endpoint-body.deprecated { 
   border-color:var(--border-color);
   filter:opacity(0.6);
 }
 
-.endpoint-head .deprecated{
+.endpoint-head .deprecated {
   color: var(--light-fg);
   filter:opacity(0.6);
 }
@@ -99,13 +102,13 @@ export default css`
 .summary{
   padding:8px 8px;
 }
-.summary .title{
+.summary .title {
   font-size:calc(var(--font-size-regular) + 2px);
   margin-bottom: 6px;
   word-break: break-all;
 }
 
-.endpoint-head .method{
+.endpoint-head .method {
   padding:2px 5px;
   vertical-align: middle;
   font-size:var(--font-size-small);
@@ -169,7 +172,7 @@ api-response.view-mode {
   border-color:var(--red); 
 }
 
-@media only screen and (min-width: 1024px) {
+@container (min-width: 1024px) {
   .only-large-screen { display:block; }
   .endpoint-head .path{
     font-size: var(--font-size-regular);

package/src/styles/flex-styles.js

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 
 export default css`
-.row, .col{
+.row, .col {
   display:flex;
 } 
 .row {

package/src/styles/font-styles.js

@@ -1,14 +1,14 @@
 import { css } from 'lit';
 
 export default css`
-  .hover-bg:hover{
+  .hover-bg:hover {
     background: var(--bg3);
   }
   ::selection {
     background: var(--selection-bg);
     color: var(--selection-fg);
   }
-  .regular-font{ 
+  .regular-font { 
     font-family:var(--font-regular); 
   }
   .mono-font { 
@@ -18,7 +18,7 @@ export default css`
     font-size: calc(var(--font-size-small) + 18px);
     font-weight: normal 
   }
-  .sub-title{ font-size: 20px;}
+  .sub-title{ font-size: 20px; }
   .req-res-title {
     font-family: var(--font-regular);
     font-size: calc(var(--font-size-small) + 4px);
@@ -33,11 +33,11 @@ export default css`
   .regular-font-size { font-size: var(--font-size-regular); }
   .small-font-size { font-size: var(--font-size-small); }
   .upper { text-transform: uppercase; }
-  .primary-text{ color: var(--primary-color); }
+  .primary-text { color: var(--primary-color); }
   .bold-text { font-weight:bold; }
   .gray-text { color: var(--light-fg); }
-  .red-text {color: var(--red)}
-  .blue-text {color: var(--blue)}
+  .red-text { color: var(--red) }
+  .blue-text { color: var(--blue) }
   .multiline {
     overflow: scroll;
     max-height: var(--resp-area-height, 400px);
@@ -53,14 +53,14 @@ export default css`
     color: var(--yellow); 
   }
 
-  h1{ font-family:var(--font-regular); font-size:28px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
-  h2{ font-family:var(--font-regular); font-size:24px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
-  h3{ font-family:var(--font-regular); font-size:18px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
-  h4{ font-family:var(--font-regular); font-size:16px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
-  h5{ font-family:var(--font-regular); font-size:14px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
-  h6{ font-family:var(--font-regular); font-size:14px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h1 { font-family:var(--font-regular); font-size:28px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h2 { font-family:var(--font-regular); font-size:24px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h3 { font-family:var(--font-regular); font-size:18px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h4 { font-family:var(--font-regular); font-size:16px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h5 { font-family:var(--font-regular); font-size:14px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
+  h6 { font-family:var(--font-regular); font-size:14px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
 
-  h1,h2,h3,h4,h5,h5{
+  h1,h2,h3,h4,h5,h5 {
     margin-block-end: 0.2em;
   }
   p { margin-block-start: 0.5em; }

package/src/styles/input-styles.js

@@ -37,14 +37,14 @@ export default css`
 .m-btn.nav:hover { 
   background-color: var(--nav-accent-color);
 }
-.m-btn:disabled{ 
+.m-btn:disabled { 
   background-color: var(--bg3);
   color: var(--fg3);
   border-color: var(--fg3);
   cursor: not-allowed;
   opacity: 0.4;
 }
-.toolbar-btn{
+.toolbar-btn {
   cursor: pointer;
   padding: 4px;
   margin:0 2px;

package/src/styles/nav-styles.js

@@ -29,7 +29,7 @@ export default css`
   flex-wrap:nowrap;
   word-break:break-word;
 }
-::slotted([slot=nav-logo]){
+::slotted([slot=nav-logo]) {
   padding:16px 16px 0 16px;
 }
 .nav-scroll {