openapi-explorer 2.3.777 → 2.4.780

package/dist/es/components/schema-table.js

@@ -56,7 +56,7 @@ export default class SchemaTable extends LitElement {
     this.interactive = true; // Note: interactive is not a reactive property
   }
   static finalizeStyles() {
-    return [FontStyles, KeyFrameStyles, SchemaStyles, css`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal}.key-type{display:flex}.key-type>.attributes{margin:.0625rem 0 0 .25rem}.obj-toggle{display:inline-flex;margin-left:-.8rem;margin-right:.8rem;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.tr+.object-body{overflow:hidden}.table:not(.interactive) .object-body{animation-duration:0s!important}.tr:not(.collapsed)+.object-body{animation:linear .2s expand-height}.tr.collapsed+.object-body{animation:linear .2s collapse-height;max-height:0}.obj-toggle{transition:transform .1s ease}.tr.collapsed .obj-toggle{transform:rotate(-90deg)}.tr.circular-object .obj-toggle{display:none}.tr.object .key-label{margin-left:-6px}`];
+    return [FontStyles, KeyFrameStyles, SchemaStyles, css`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal}.key-type{display:flex}.key-type>.attributes{margin:.0625rem 0 0 .25rem}.obj-toggle{display:inline-flex;margin-left:-.8rem;margin-right:.8rem;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.tr+.object-body{overflow:hidden}.table:not(.interactive) .object-body{animation-duration:0s!important}.tr:not(.collapsed)+.object-body{animation:linear .2s expand-height}.tr.collapsed+.object-body{animation:linear .2s collapse-height;max-height:0}.obj-toggle{transition:transform .1s ease}.tr.collapsed .obj-toggle{transform:rotate(-90deg)}.tr.object.circular-object .obj-toggle{display:none}.tr.object:not(.circular-object) .key-label{margin-left:-6px}`];
   }
 
   /* eslint-disable indent */
@@ -69,7 +69,7 @@ export default class SchemaTable extends LitElement {
       keyLabelMaxCharacterLength,
       typeMaxCharacterLength
     } = this.data ? this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type']) : {};
-    return html` ${displayLine ? html`<span class="m-markdown" style="padding-bottom:8px"> ${unsafeHTML(toMarkdown(displayLine))}</span>` : ''} <style>.table .key{width:${Math.max(240, (keyLabelMaxCharacterLength || 0) * 8) + 16}px;max-width:Min(400px,75%)}.table .key-type{width:${Math.max(150, (typeMaxCharacterLength || 0) * 8) + 16}px;max-width:25%}</style> <div class="table ${this.interactive ? 'interactive' : ''}"> <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" part="schema-key schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" part="schema-type schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" part="schema-description schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${result || ''} </div> </div> `;
+    return html` ${displayLine ? html`<span class="m-markdown" style="padding-bottom:8px"> ${unsafeHTML(toMarkdown(displayLine))}</span>` : ''} <style>.table .key{width:calc(var(--font-size-small) * ${Math.max(16, keyLabelMaxCharacterLength || 0)});max-width:Min(400px,75%)}.table .key-type{width:calc(var(--font-size-small) * ${Math.max(16, typeMaxCharacterLength || 0)});max-width:25%}</style> <div class="table ${this.interactive ? 'interactive' : ''}"> <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" part="schema-key schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" part="schema-type schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" part="schema-description schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${result || ''} </div> </div> `;
   }
   scrollToSchemaComponentByName(componentName) {
     this.dispatchEvent(new CustomEvent('scrollToSchemaComponentByName', {
@@ -166,7 +166,7 @@ export default class SchemaTable extends LitElement {
           return innerResult;
         });
       }
-      const displayLine = [title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
+      const displayLine = [title && !data['::link'] && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
       const detailObjTypeDisplay = data['::circular'] ? `{ Recursive: ${detailObjType} }` : detailObjType;
       const outerResult = html` ${newSchemaLevel >= 0 && key ? html` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? '' : 'collapsed'} ${data['::circular'] ? 'circular-object' : 'object'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td no-select key ${data['::deprecated'] ? 'deprecated' : ''}" part="schema-key" style="padding-left:${leftPadding}px;cursor:pointer" @click="${e => this.toggleObjectExpand(e)}"> <div style="display:flex;align-items:center"> ${keyLabel || keyDescr ? html`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? html`<span class="key-label requiredStar" style="display:inline-block" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : html`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type" part="schema-type"> ${displaySchemaLink ? html`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}"> ${dataType === 'array' ? '[' : ''}<span style="color:var(--secondary-color)">${detailObjTypeDisplay}</span>${dataType === 'array' ? ']' : ''} </div>` : html`<div>${(data['::type'] || '').includes('xxx-of') ? '' : `${dataType === 'array' ? '[' : ''}${detailObjTypeDisplay}${dataType === 'array' ? ']' : ''}`}</div>`} <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr" part="schema-description"> <span class="m-markdown-small">${unsafeHTML(toMarkdown(displayLine))}</span> ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''} </div> </div>` : html` ${data['::type'] === 'array' && dataType === 'array' ? html`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${recursiveResult} <div> </div></div>`;
       return {

package/dist/es/components/schema-tree.js

@@ -74,6 +74,13 @@ export default class SchemaTree extends LitElement {
     this.schemaDescriptionExpanded = !this.schemaDescriptionExpanded;
     this.requestUpdate();
   }
+  scrollToSchemaComponentByName(componentName) {
+    this.dispatchEvent(new CustomEvent('scrollToSchemaComponentByName', {
+      bubbles: true,
+      composed: true,
+      detail: componentName
+    }));
+  }
   generateTree(data, dataType = 'object', arrayType = '', flags = {}, key = '', title = '', description = '', schemaLevel = 0, indentLevel = 0) {
     if (!data) {
       return html`<div class="null" style="display:inline"> <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span> ${dataType === 'array' && html`<span class="mono-font"> [ ] </span>` || dataType === 'object' && html`<span class="mono-font"> { } </span>` || html`<span class="mono-font"> ${dataType} </span>`} </div>`;
@@ -95,53 +102,48 @@ export default class SchemaTree extends LitElement {
     const leftPadding = 16;
     // Min-width used for model keys: `td key `
     const minFieldColWidth = 300 - indentLevel * leftPadding;
-    let openBracket = '';
-    let closeBracket = '';
     const newSchemaLevel = data['::type'] === 'xxx-of-option' ? schemaLevel : schemaLevel + 1;
     const newIndentLevel = indentLevel + 1;
-    if (data['::type'] === 'array') {
-      if (dataType === 'array') {
-        const arrType = arrayType !== 'object' ? arrayType : '';
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[ ${arrType} </span>`;
-        } else {
-          openBracket = html`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[...]]</span>`;
+    const [openBracket, closeBracket] = (() => {
+      if (data['::circular']) {
+        const displaySchemaLink = data['::link'];
+        return [html`<span class="open-bracket object" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}"> <span>${dataType === 'array' ? '[' : ''}<span style="color:var(--secondary-color)">{${displaySchemaLink}}</span>${dataType === 'array' ? ']' : ''}</span> </span>`];
+      }
+      if (data['::type'] === 'array') {
+        if (dataType === 'array') {
+          const arrType = arrayType !== 'object' ? arrayType : '';
+          if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
+            return [html`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[ ${arrType} </span>`, ']]'];
+          }
+          return [html`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[...]]</span>`];
         }
-        closeBracket = ']]';
-      } else {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
-        } else {
-          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
+        if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
+          return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`, ']'];
         }
-        closeBracket = ']';
+        return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`];
       }
-    } else if (data['::type'] === 'xxx-of-option') {
-      if (dataType === 'array') {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
-        } else {
-          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
+      if (data['::type'] === 'xxx-of-option') {
+        if (dataType === 'array') {
+          if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
+            return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`, ']'];
+          }
+          return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`];
         }
-        closeBracket = ']';
       }
-    } else if (data['::type']) {
-      if (dataType === 'array') {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
-        } else {
-          openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
+      if (data['::type']) {
+        if (dataType === 'array') {
+          if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
+            return [html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`, '}]'];
+          }
+          return [html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`];
         }
-        closeBracket = '}]';
-      } else {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
-        } else {
-          openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
+        if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
+          return [html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`, '}'];
         }
-        closeBracket = '}';
+        return [html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`];
       }
-    }
+      return [''];
+    })();
     if (typeof data === 'object') {
       var _data$Metadata, _data$Metadata$constr;
       if (flags['🆁'] && this.schemaHideReadOnly === 'true') {
@@ -150,11 +152,11 @@ export default class SchemaTree extends LitElement {
       if (flags['🆆'] && this.schemaHideWriteOnly === 'true') {
         return undefined;
       }
-      const displayLine = [flags['🆁'] || flags['🆆'], title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
-      return html` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? '' : 'collapsed'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || 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"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span class="requiredStar" title="Required"></span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${unsafeHTML(toMarkdown(displayLine))} </span> ${this.schemaDescriptionExpanded ? html` ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}` : ''} </div> </div> <div class="inside-bracket-wrapper"> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? html`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : html` ${Object.keys(data).map(dataKey => {
+      const displayLine = [flags['🆁'] || flags['🆆'], title && !data['::link'] && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
+      return html` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? '' : 'collapsed'} ${data['::circular'] ? 'circular-object' : 'object'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || 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"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span class="requiredStar" title="Required"></span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${unsafeHTML(toMarkdown(displayLine))} </span> ${this.schemaDescriptionExpanded ? html` ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}` : ''} </div> </div> <div class="inside-bracket-wrapper"> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? html`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : html` ${Object.keys(data).map(dataKey => {
         var _data$dataKey;
-        return !['::metadata', '::title', '::description', '::type', '::link', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || (_data$dataKey = data[dataKey]) !== null && _data$dataKey !== void 0 && _data$dataKey['::type'] && !data[dataKey]['::type'].includes('xxx-of') ? html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '';
-      })}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : html`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
+        return !['::metadata', '::title', '::description', '::type', '::link', '::circular', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || (_data$dataKey = data[dataKey]) !== null && _data$dataKey !== void 0 && _data$dataKey['::type'] && !data[dataKey]['::type'].includes('xxx-of') ? html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '';
+      })}`} </div> ${!closeBracket || data['::type'] && data['::type'].includes('xxx-of') ? '' : html`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
     }
 
     // For Primitive Data types

package/dist/es/styles/font-styles.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.hover-bg:hover{background:var(--bg3)}::selection{background:var(--selection-bg);color:var(--selection-fg)}.regular-font{font-family:var(--font-regular)}.mono-font{font-family:var(--font-mono)}.title{font-size:calc(var(--font-size-small) + 1rem);font-weight:400}.sub-title{font-size:20px}.req-res-title{font-family:var(--font-regular);font-size:calc(var(--font-size-small) + 4px);font-weight:700}.tiny-title{font-size:calc(var(--font-size-small) + 1px);font-weight:700}.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)}.bold-text{font-weight:700}.gray-text{color:var(--light-fg)}.red-text{color:var(--red)}.blue-text{color:var(--blue)}.multiline{overflow:scroll;max-height:var(--resp-area-height,300px);color:var(--fg3)}.method-fg.put{color:var(--orange)}.method-fg.post{color:var(--green)}.method-fg.get,.method-fg.head{color:var(--blue)}.method-fg.delete{color:var(--red)}.method-fg.query{color:var(--purple)}.method-fg.trace{color:var(--purple)}.method-fg.options{color:var(--gray)}.method-fg.patch{color:var(--yellow)}h1{font-family:var(--font-regular);font-size:28px;padding-top:10px;letter-spacing:normal;font-weight:400}h2{font-family:var(--font-regular);font-size:24px;padding-top:10px;letter-spacing:normal;font-weight:400}h3{font-family:var(--font-regular);font-size:18px;padding-top:10px;letter-spacing:normal;font-weight:400}h4{font-family:var(--font-regular);font-size:16px;padding-top:10px;letter-spacing:normal;font-weight:400}h5{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h6{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h1,h2,h3,h4,h5{margin-block-end:.2em;margin-block-start:.5em}h3{margin-top:0}p{margin-block-start:.5em}a{color:var(--blue);cursor:pointer}a.inactive-link{color:var(--fg);text-decoration:none;cursor:text}code,pre,syntax-highlighter{margin:0;font-family:var(--font-mono);font-size:var(--font-size-mono)}.m-markdown syntax-highlighter{display:block}.m-markdown,.m-markdown-small{display:block}.m-markdown a,.m-markdown li,.m-markdown p,.m-markdown span{font-size:var(--font-size-regular);line-height:calc(var(--font-size-regular) + 6px)}.m-markdown-small a,.m-markdown-small li,.m-markdown-small p,.m-markdown-small span{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 6px)}.m-markdown p:not(:first-child){margin-block-start:12px}.m-markdown-small p:not(:first-child){margin-block-start:12px}.m-markdown :first-child,.m-markdown-small :first-child{margin-block-start:0}.m-markdown p,.m-markdown-small p{margin-block-end:0;overflow-wrap:anywhere}.toolbar .m-markdown p,.toolbar .m-markdown-small p{margin-block-start:0}.m-markdown code span{font-size:var(--font-size-mono)}.m-markdown code,.m-markdown syntax-highlighter,.m-markdown-small code{padding:1px 6px;border-radius:2px;color:var(--inline-code-fg);background-color:var(--bg3);font-size:calc(var(--font-size-mono));line-height:1.2}.m-markdown-small code,.m-markdown-small syntax-highlighter{font-size:var(--font-size-mono)}.m-markdown pre,.m-markdown syntax-highlighter,.m-markdown-small pre{white-space:pre-wrap;overflow-x:auto;line-height:normal;border-radius:2px;border:1px solid var(--code-border-color)}.m-markdown pre,.m-markdown syntax-highlighter{padding:8px;background-color:var(--bg2);color:var(--code-fg)}.m-markdown-small pre,.m-markdown-small syntax-highlighter{margin-top:4px;padding:2px 4px;background-color:var(--bg3);color:var(--fg2)}.m-markdown pre code,.m-markdown-small pre code{border:none;padding:0}.m-markdown pre code{color:var(--code-fg);background-color:var(--bg2);background-color:transparent}.m-markdown-small pre code,.m-markdown-small syntax-highlighter{color:var(--fg2);background-color:var(--bg3)}.m-markdown ol,.m-markdown ul{padding-inline-start:30px}.m-markdown-small ol,.m-markdown-small ul{padding-inline-start:20px}.m-markdown a,.m-markdown-small a{color:var(--blue)}.m-markdown img,.m-markdown-small img{max-width:100%}.m-markdown table,.m-markdown-small table{border-spacing:0;margin:10px 0;border-collapse:separate;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:calc(var(--font-size-small) + 1px);line-height:calc(var(--font-size-small) + 4px);max-width:100%}.m-markdown-small table{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 2px);margin:8px 0}.m-markdown td,.m-markdown th,.m-markdown-small td,.m-markdown-small th{vertical-align:top;border-top:1px solid var(--border-color);line-height:calc(var(--font-size-small) + 4px)}.m-markdown tr:first-child th,.m-markdown-small tr:first-child th{border-top:0 none}.m-markdown td,.m-markdown th{padding:10px 12px}.m-markdown-small td,.m-markdown-small th{padding:8px 8px}.m-markdown th,.m-markdown-small th{font-weight:600;background-color:var(--bg2);vertical-align:middle}.m-markdown-small table code{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown table code{font-size:var(--font-size-mono)}.m-markdown blockquote,.m-markdown-small blockquote{margin-inline-start:0;margin-inline-end:0;border-left:3px solid var(--border-color);padding:6px 0 6px 6px}`;
+export default css`.hover-bg:hover{background:var(--bg3)}::selection{background:var(--selection-bg);color:var(--selection-fg)}.regular-font{font-family:var(--font-regular)}.mono-font{font-family:var(--font-mono)}.title{font-size:calc(var(--font-size-small) + 1rem);font-weight:400}.sub-title{font-size:20px}.req-res-title{font-family:var(--font-regular);font-size:calc(var(--font-size-small) + 4px);font-weight:700}.tiny-title{font-size:calc(var(--font-size-small) + 1px);font-weight:700}.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)}.bold-text{font-weight:700}.gray-text{color:var(--light-fg)}.red-text{color:var(--red)}.blue-text{color:var(--blue)}.multiline{overflow:scroll;max-height:var(--resp-area-height,300px);color:var(--fg3)}.method-fg.put{color:var(--orange)}.method-fg.post{color:var(--green)}.method-fg.get,.method-fg.head{color:var(--blue)}.method-fg.delete{color:var(--red)}.method-fg.query{color:var(--purple)}.method-fg.trace{color:var(--purple)}.method-fg.options{color:var(--gray)}.method-fg.patch{color:var(--yellow)}h1{font-family:var(--font-regular);font-size:28px;padding-top:10px;letter-spacing:normal;font-weight:400}h2{font-family:var(--font-regular);font-size:24px;padding-top:10px;letter-spacing:normal;font-weight:400}h3{font-family:var(--font-regular);font-size:18px;padding-top:10px;letter-spacing:normal;font-weight:400}h4{font-family:var(--font-regular);font-size:16px;padding-top:10px;letter-spacing:normal;font-weight:400}h5{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h6{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h1,h2,h3,h4,h5{margin-block-end:.2em;margin-block-start:.5em;padding-top:0}h3{margin-top:0}p{margin-block-start:.5em}a{color:var(--blue);cursor:pointer}a.inactive-link{color:var(--fg);text-decoration:none;cursor:text}code,pre,syntax-highlighter{margin:0;font-family:var(--font-mono);font-size:var(--font-size-mono)}.m-markdown syntax-highlighter{display:block}.m-markdown,.m-markdown-small{display:block}.m-markdown a,.m-markdown li,.m-markdown p,.m-markdown span{font-size:var(--font-size-regular);line-height:calc(var(--font-size-regular) + 6px)}.m-markdown-small a,.m-markdown-small li,.m-markdown-small p,.m-markdown-small span{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 6px)}.m-markdown p:not(:first-child){margin-block-start:12px}.m-markdown-small p:not(:first-child){margin-block-start:12px}.m-markdown :first-child,.m-markdown-small :first-child{margin-block-start:0}.m-markdown p,.m-markdown-small p{margin-block-end:0;overflow-wrap:anywhere}.toolbar .m-markdown p,.toolbar .m-markdown-small p{margin-block-start:0}.m-markdown code span{font-size:var(--font-size-mono)}.m-markdown code,.m-markdown syntax-highlighter,.m-markdown-small code{padding:1px 6px;border-radius:2px;color:var(--inline-code-fg);background-color:var(--bg3);font-size:calc(var(--font-size-mono));line-height:1.2}.m-markdown-small code,.m-markdown-small syntax-highlighter{font-size:var(--font-size-mono)}.m-markdown pre,.m-markdown syntax-highlighter,.m-markdown-small pre{white-space:pre-wrap;overflow-x:auto;line-height:normal;border-radius:2px;border:1px solid var(--code-border-color)}.m-markdown pre,.m-markdown syntax-highlighter{padding:8px;background-color:var(--bg2);color:var(--code-fg)}.m-markdown-small pre,.m-markdown-small syntax-highlighter{margin-top:4px;padding:2px 4px;background-color:var(--bg3);color:var(--fg2)}.m-markdown pre code,.m-markdown-small pre code{border:none;padding:0}.m-markdown pre code{color:var(--code-fg);background-color:var(--bg2);background-color:transparent}.m-markdown-small pre code,.m-markdown-small syntax-highlighter{color:var(--fg2);background-color:var(--bg3)}.m-markdown ol,.m-markdown ul{padding-inline-start:30px}.m-markdown-small ol,.m-markdown-small ul{padding-inline-start:20px}.m-markdown a,.m-markdown-small a{color:var(--blue)}.m-markdown img,.m-markdown-small img{max-width:100%}.m-markdown table,.m-markdown-small table{border-spacing:0;margin:10px 0;border-collapse:separate;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:calc(var(--font-size-small) + 1px);line-height:calc(var(--font-size-small) + 4px);max-width:100%}.m-markdown-small table{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 2px);margin:8px 0}.m-markdown td,.m-markdown th,.m-markdown-small td,.m-markdown-small th{vertical-align:top;border-top:1px solid var(--border-color);line-height:calc(var(--font-size-small) + 4px)}.m-markdown tr:first-child th,.m-markdown-small tr:first-child th{border-top:0 none}.m-markdown td,.m-markdown th{padding:10px 12px}.m-markdown-small td,.m-markdown-small th{padding:8px 8px}.m-markdown th,.m-markdown-small th{font-weight:600;background-color:var(--bg2);vertical-align:middle}.m-markdown-small table code{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown table code{font-size:var(--font-size-mono)}.m-markdown blockquote,.m-markdown-small blockquote{margin-inline-start:0;margin-inline-end:0;border-left:3px solid var(--border-color);padding:6px 0 6px 6px}`;

package/dist/es/templates/expanded-endpoint-template.js

@@ -14,12 +14,14 @@ export function expandedEndpointBodyTemplate(path, tag) {
   // Filter API Keys that are non-empty and are applicable to the the path
   const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter(v => v.finalKeyValue && path.security && path.security.some(ps => ps[v.apiKeyId])) || [];
   const codeSampleTabPanel = path.xCodeSamples ? codeSamplesTemplate.call(this, path.xCodeSamples) : '';
-  return html` ${this.renderStyle === 'read' ? html`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tag && tag.name !== 'General ⦂' ? html`<div class="title tag-link" role="heading" aria-level="1" data-content-id="${tag.elementId}" @click="${e => this.scrollToEventTarget(e, false)}"> ${tag === null || tag === void 0 ? void 0 : tag.name} </div>` : ''} <slot name="${tag.elementId}"></slot> <div style="display:flex;justify-content:space-between"> <div style="flex-grow:1"> <h2 style="display:flex;align-items:center"> <div>${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</div> <div>${path.deprecated ? html`<div>&nbsp;-<span class="bold-text red-text" style="font-size:var(--font-size-regular)"> ${getI18nText('operations.deprecated')}</span></div>` : ''}</div> </h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? html`<span style="color:var(--primary-color)">${getI18nText('operations.webhook')}</span>` : ''} <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> </div> ${path.externalDocs ? html`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${unsafeHTML(toMarkdown(path.externalDocs.description || ''))} <a href="${getSanitizedUrl(path.externalDocs.url)}">Navigate to documentation ↗</a> </div>` : ''} </div> <div class="m-markdown" style="margin-right:2rem"> ${unsafeHTML(toMarkdown(path.description || ''))}</div> <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} <div class="expanded-req-resp-container"> <api-request class="request-panel" method="${path.method}" path="${path.path}" element-id="${path.elementId}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${((_path$servers = path.servers) === null || _path$servers === void 0 ? void 0 : (_path$servers$ = _path$servers[0]) === null || _path$servers$ === void 0 ? void 0 : _path$servers$.url) || ((_this$selectedServer = this.selectedServer) === null || _this$selectedServer === void 0 ? void 0 : _this$selectedServer.computedUrl)}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="${!this.hideExecution}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn, btn-fill, btn-outline, btn-try, schema-key, schema-type, schema-description, schema-table-header"> </api-request> ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''} <api-response class="response-panel" .responses="${path.responses}" display-nulls="${!!this.includeNulls}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn--resp, btn-fill--resp, btn-outline--resp, schema-key, schema-type, schema-description, schema-table-header"> </api-response> </div> </div>`;
+  const tagSummary = tag !== null && tag !== void 0 && tag.summary ? html`<small style="font-weight:400">- ${tag === null || tag === void 0 ? void 0 : tag.summary}</small>` : '';
+  return html` ${this.renderStyle === 'read' ? html`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tag && tag.name !== 'General ⦂' ? html`<h1 style="display:inline;align-self:center" class="title tag-link" role="heading" aria-level="1" data-content-id="${tag.elementId}" @click="${e => this.scrollToEventTarget(e, false)}"> ${tag === null || tag === void 0 ? void 0 : tag.name} ${tagSummary}</h1>` : ''} <slot name="${tag.elementId}"></slot> <div style="display:flex;justify-content:space-between"> <div style="flex-grow:1"> <h2 style="display:flex;align-items:center"> <div>${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</div> <div>${path.deprecated ? html`<div>&nbsp;-<span class="bold-text red-text" style="font-size:var(--font-size-regular)"> ${getI18nText('operations.deprecated')}</span></div>` : ''}</div> </h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? html`<span style="color:var(--primary-color)">${getI18nText('operations.webhook')}</span>` : ''} <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> </div> ${path.externalDocs ? html`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${unsafeHTML(toMarkdown(path.externalDocs.description || ''))} <a href="${getSanitizedUrl(path.externalDocs.url)}">Navigate to documentation ↗</a> </div>` : ''} </div> <div class="m-markdown" style="margin-right:2rem"> ${unsafeHTML(toMarkdown(path.description || ''))}</div> <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} <div class="expanded-req-resp-container"> <api-request class="request-panel" method="${path.method}" path="${path.path}" element-id="${path.elementId}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${((_path$servers = path.servers) === null || _path$servers === void 0 ? void 0 : (_path$servers$ = _path$servers[0]) === null || _path$servers$ === void 0 ? void 0 : _path$servers$.url) || ((_this$selectedServer = this.selectedServer) === null || _this$selectedServer === void 0 ? void 0 : _this$selectedServer.computedUrl)}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="${!this.hideExecution}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn, btn-fill, btn-outline, btn-try, schema-key, schema-type, schema-description, schema-table-header"> </api-request> ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''} <api-response class="response-panel" .responses="${path.responses}" display-nulls="${!!this.includeNulls}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn--resp, btn-fill--resp, btn-outline--resp, schema-key, schema-type, schema-description, schema-table-header"> </api-response> </div> </div>`;
 }
 export function expandedTagTemplate(tagId, subsectionFullId) {
   const tag = (this.resolvedSpec.tags || []).find(t => t.elementId === tagId);
   const subsectionId = subsectionFullId.replace(`${tagId}--`, '');
-  return html` <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style=""> <div class="title tag" part="label-tag-title" role="heading" aria-level="1">${tag.name}</div> <slot name="${tag.elementId}--subsection--${subsectionId}"> <div class="regular-font-size"> ${unsafeHTML(`
+  const tagSummary = tag.summary ? html`<h2 style="font-weight:400">${tag.summary}</h2>` : '';
+  return html` <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style=""> <h1 class="title tag" part="label-tag-title" role="heading" aria-level="1">${tag.name}</h1> ${tagSummary} <slot name="${tag.elementId}--subsection--${subsectionId}"> <div class="regular-font-size"> ${unsafeHTML(`
             <div class="m-markdown regular-font">
             ${toMarkdown(tag.description || '')}
           </div>`)} </div> </slot> <slot name="${tag.elementId}--body"></slot> <br> <strong>Operations</strong> <div class="nav-bar-paths-under-tag" style="max-width:300px"> ${tag.paths.map(p => html` <div class="nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}" role="link" tabindex="0" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {

package/dist/es/utils/schema-utils.js

@@ -412,7 +412,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
     }
     resultObj['::link'] = schema.title || '';
     resultObj['::circular'] = !!schema.circularReference;
-    resultObj['::type'] = schema.title || 'object';
+    resultObj['::type'] = 'object';
     resultObj['::flags'] = {
       '🆁': readOnly && '🆁',
       '🆆': writeOnly && '🆆'
@@ -481,7 +481,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
             },
             '::link': schema.title || '',
             '::circular': !!schema.circularReference,
-            '::type': schema.title || 'object',
+            '::type': 'object',
             '::deprecated': schema.deprecated || false,
             '::metadata': metadata
           };
@@ -531,7 +531,7 @@ export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '
     };
     obj['::link'] = schema.title || '';
     obj['::circular'] = !!schema.circularReference;
-    obj['::type'] = schema.title || 'object';
+    obj['::type'] = 'object';
     obj['::deprecated'] = schema.deprecated || false;
     obj['::metadata'] = metadata;
     for (const key in schemaProperties) {

package/dist/es/utils/spec-parser.js

@@ -3,6 +3,7 @@ import OpenApiResolver from 'openapi-resolver/dist/openapi-resolver.browser.js';
 import { marked } from 'marked';
 import { invalidCharsRegEx } from './common-utils.js';
 import cloneDeep from 'lodash.clonedeep';
+import toposort from 'toposort';
 export default async function ProcessSpec(specUrlOrObject, serverUrl = '') {
   var _jsonParsedSpec$info, _jsonParsedSpec$compo;
   const inputSpecIsAUrl = typeof specUrlOrObject === 'string' && specUrlOrObject.match(/^http/) || typeof specUrlOrObject === 'object' && typeof specUrlOrObject.href === 'string';
@@ -154,17 +155,27 @@ function getComponents(openApiSpec) {
 }
 function groupByTags(openApiSpec) {
   const supportedMethods = ['get', 'query', 'put', 'post', 'patch', 'delete', 'head', 'options']; // this is also used for ordering endpoints by methods
-  const tags = openApiSpec.tags && Array.isArray(openApiSpec.tags) ? openApiSpec.tags.map(t => {
+  const rawTags = openApiSpec.tags && Array.isArray(openApiSpec.tags) ? openApiSpec.tags : [];
+  const unsortedTags = rawTags
+  // Only support nav tags in grouping, because these tags will be used for navigation.
+  .filter(t => !t.kind || t.kind === 'nav').map(t => {
     const name = typeof t === 'string' ? t : t.name;
     return {
       elementId: `tag--${name.replace(invalidCharsRegEx, '-')}`,
       name: name,
+      summary: t.summary,
       description: t.description || '',
       headers: t.description ? getHeadersFromMarkdown(t.description) : [],
       paths: [],
       expanded: true
     };
-  }) : [];
+  });
+  const tagMap = unsortedTags.reduce((acc, t) => ({
+    ...acc,
+    [t.name]: t
+  }), {});
+  const tagDependencies = rawTags.map(t => t.parent && [t.parent, t.name] || [t.name, 'null']);
+  const tags = toposort(tagDependencies).map(tagName => tagMap[tagName]).filter(t => t);
   const pathsAndWebhooks = openApiSpec.paths || {};
   if (openApiSpec.webhooks) {
     for (const [key, value] of Object.entries(openApiSpec.webhooks)) {

package/dist/lib/components/schema-table.js

@@ -61,7 +61,7 @@ class SchemaTable extends _lit.LitElement {
     this.interactive = true; // Note: interactive is not a reactive property
   }
   static finalizeStyles() {
-    return [_fontStyles.default, _keyFrameStyles.default, _schemaStyles.default, (0, _lit.css)`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal}.key-type{display:flex}.key-type>.attributes{margin:.0625rem 0 0 .25rem}.obj-toggle{display:inline-flex;margin-left:-.8rem;margin-right:.8rem;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.tr+.object-body{overflow:hidden}.table:not(.interactive) .object-body{animation-duration:0s!important}.tr:not(.collapsed)+.object-body{animation:linear .2s expand-height}.tr.collapsed+.object-body{animation:linear .2s collapse-height;max-height:0}.obj-toggle{transition:transform .1s ease}.tr.collapsed .obj-toggle{transform:rotate(-90deg)}.tr.circular-object .obj-toggle{display:none}.tr.object .key-label{margin-left:-6px}`];
+    return [_fontStyles.default, _keyFrameStyles.default, _schemaStyles.default, (0, _lit.css)`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal}.key-type{display:flex}.key-type>.attributes{margin:.0625rem 0 0 .25rem}.obj-toggle{display:inline-flex;margin-left:-.8rem;margin-right:.8rem;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.tr+.object-body{overflow:hidden}.table:not(.interactive) .object-body{animation-duration:0s!important}.tr:not(.collapsed)+.object-body{animation:linear .2s expand-height}.tr.collapsed+.object-body{animation:linear .2s collapse-height;max-height:0}.obj-toggle{transition:transform .1s ease}.tr.collapsed .obj-toggle{transform:rotate(-90deg)}.tr.object.circular-object .obj-toggle{display:none}.tr.object:not(.circular-object) .key-label{margin-left:-6px}`];
   }
 
   /* eslint-disable indent */
@@ -74,7 +74,7 @@ class SchemaTable extends _lit.LitElement {
       keyLabelMaxCharacterLength,
       typeMaxCharacterLength
     } = this.data ? this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type']) : {};
-    return (0, _lit.html)` ${displayLine ? (0, _lit.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayLine))}</span>` : ''} <style>.table .key{width:${Math.max(240, (keyLabelMaxCharacterLength || 0) * 8) + 16}px;max-width:Min(400px,75%)}.table .key-type{width:${Math.max(150, (typeMaxCharacterLength || 0) * 8) + 16}px;max-width:25%}</style> <div class="table ${this.interactive ? 'interactive' : ''}"> <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" part="schema-key schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" part="schema-type schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" part="schema-description schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${result || ''} </div> </div> `;
+    return (0, _lit.html)` ${displayLine ? (0, _lit.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayLine))}</span>` : ''} <style>.table .key{width:calc(var(--font-size-small) * ${Math.max(16, keyLabelMaxCharacterLength || 0)});max-width:Min(400px,75%)}.table .key-type{width:calc(var(--font-size-small) * ${Math.max(16, typeMaxCharacterLength || 0)});max-width:25%}</style> <div class="table ${this.interactive ? 'interactive' : ''}"> <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" part="schema-key schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" part="schema-type schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" part="schema-description schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${result || ''} </div> </div> `;
   }
   scrollToSchemaComponentByName(componentName) {
     this.dispatchEvent(new CustomEvent('scrollToSchemaComponentByName', {
@@ -171,7 +171,7 @@ class SchemaTable extends _lit.LitElement {
           return innerResult;
         });
       }
-      const displayLine = [title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
+      const displayLine = [title && !data['::link'] && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
       const detailObjTypeDisplay = data['::circular'] ? `{ Recursive: ${detailObjType} }` : detailObjType;
       const outerResult = (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.html)` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? '' : 'collapsed'} ${data['::circular'] ? 'circular-object' : 'object'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td no-select key ${data['::deprecated'] ? 'deprecated' : ''}" part="schema-key" style="padding-left:${leftPadding}px;cursor:pointer" @click="${e => this.toggleObjectExpand(e)}"> <div style="display:flex;align-items:center"> ${keyLabel || keyDescr ? (0, _lit.html)`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? (0, _lit.html)`<span class="key-label requiredStar" style="display:inline-block" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : (0, _lit.html)`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type" part="schema-type"> ${displaySchemaLink ? (0, _lit.html)`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}"> ${dataType === 'array' ? '[' : ''}<span style="color:var(--secondary-color)">${detailObjTypeDisplay}</span>${dataType === 'array' ? ']' : ''} </div>` : (0, _lit.html)`<div>${(data['::type'] || '').includes('xxx-of') ? '' : `${dataType === 'array' ? '[' : ''}${detailObjTypeDisplay}${dataType === 'array' ? ']' : ''}`}</div>`} <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr" part="schema-description"> <span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayLine))}</span> ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''} </div> </div>` : (0, _lit.html)` ${data['::type'] === 'array' && dataType === 'array' ? (0, _lit.html)`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${recursiveResult} <div> </div></div>`;
       return {

package/dist/lib/components/schema-tree.js

@@ -79,6 +79,13 @@ class SchemaTree extends _lit.LitElement {
     this.schemaDescriptionExpanded = !this.schemaDescriptionExpanded;
     this.requestUpdate();
   }
+  scrollToSchemaComponentByName(componentName) {
+    this.dispatchEvent(new CustomEvent('scrollToSchemaComponentByName', {
+      bubbles: true,
+      composed: true,
+      detail: componentName
+    }));
+  }
   generateTree(data, dataType = 'object', arrayType = '', flags = {}, key = '', title = '', description = '', schemaLevel = 0, indentLevel = 0) {
     if (!data) {
       return (0, _lit.html)`<div class="null" style="display:inline"> <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span> ${dataType === 'array' && (0, _lit.html)`<span class="mono-font"> [ ] </span>` || dataType === 'object' && (0, _lit.html)`<span class="mono-font"> { } </span>` || (0, _lit.html)`<span class="mono-font"> ${dataType} </span>`} </div>`;
@@ -100,53 +107,48 @@ class SchemaTree extends _lit.LitElement {
     const leftPadding = 16;
     // Min-width used for model keys: `td key `
     const minFieldColWidth = 300 - indentLevel * leftPadding;
-    let openBracket = '';
-    let closeBracket = '';
     const newSchemaLevel = data['::type'] === 'xxx-of-option' ? schemaLevel : schemaLevel + 1;
     const newIndentLevel = indentLevel + 1;
-    if (data['::type'] === 'array') {
-      if (dataType === 'array') {
-        const arrType = arrayType !== 'object' ? arrayType : '';
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = (0, _lit.html)`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[ ${arrType} </span>`;
-        } else {
-          openBracket = (0, _lit.html)`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[...]]</span>`;
+    const [openBracket, closeBracket] = (() => {
+      if (data['::circular']) {
+        const displaySchemaLink = data['::link'];
+        return [(0, _lit.html)`<span class="open-bracket object" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}"> <span>${dataType === 'array' ? '[' : ''}<span style="color:var(--secondary-color)">{${displaySchemaLink}}</span>${dataType === 'array' ? ']' : ''}</span> </span>`];
+      }
+      if (data['::type'] === 'array') {
+        if (dataType === 'array') {
+          const arrType = arrayType !== 'object' ? arrayType : '';
+          if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
+            return [(0, _lit.html)`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[ ${arrType} </span>`, ']]'];
+          }
+          return [(0, _lit.html)`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[...]]</span>`];
         }
-        closeBracket = ']]';
-      } else {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = (0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
-        } else {
-          openBracket = (0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
+        if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
+          return [(0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`, ']'];
         }
-        closeBracket = ']';
+        return [(0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`];
       }
-    } else if (data['::type'] === 'xxx-of-option') {
-      if (dataType === 'array') {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = (0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
-        } else {
-          openBracket = (0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
+      if (data['::type'] === 'xxx-of-option') {
+        if (dataType === 'array') {
+          if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
+            return [(0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`, ']'];
+          }
+          return [(0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`];
         }
-        closeBracket = ']';
       }
-    } else if (data['::type']) {
-      if (dataType === 'array') {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = (0, _lit.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
-        } else {
-          openBracket = (0, _lit.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
+      if (data['::type']) {
+        if (dataType === 'array') {
+          if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
+            return [(0, _lit.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`, '}]'];
+          }
+          return [(0, _lit.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`];
         }
-        closeBracket = '}]';
-      } else {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = (0, _lit.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
-        } else {
-          openBracket = (0, _lit.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
+        if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
+          return [(0, _lit.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`, '}'];
         }
-        closeBracket = '}';
+        return [(0, _lit.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`];
       }
-    }
+      return [''];
+    })();
     if (typeof data === 'object') {
       var _data$Metadata, _data$Metadata$constr;
       if (flags['🆁'] && this.schemaHideReadOnly === 'true') {
@@ -155,11 +157,11 @@ class SchemaTree extends _lit.LitElement {
       if (flags['🆆'] && this.schemaHideWriteOnly === 'true') {
         return undefined;
       }
-      const displayLine = [flags['🆁'] || flags['🆆'], title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
-      return (0, _lit.html)` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? '' : 'collapsed'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? (0, _lit.html)`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? (0, _lit.html)`<span class="requiredStar" title="Required"></span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayLine))} </span> ${this.schemaDescriptionExpanded ? (0, _lit.html)` ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}` : ''} </div> </div> <div class="inside-bracket-wrapper"> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? (0, _lit.html)`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : (0, _lit.html)` ${Object.keys(data).map(dataKey => {
+      const displayLine = [flags['🆁'] || flags['🆆'], title && !data['::link'] && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
+      return (0, _lit.html)` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? '' : 'collapsed'} ${data['::circular'] ? 'circular-object' : 'object'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? (0, _lit.html)`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? (0, _lit.html)`<span class="requiredStar" title="Required"></span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayLine))} </span> ${this.schemaDescriptionExpanded ? (0, _lit.html)` ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}` : ''} </div> </div> <div class="inside-bracket-wrapper"> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? (0, _lit.html)`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : (0, _lit.html)` ${Object.keys(data).map(dataKey => {
         var _data$dataKey;
-        return !['::metadata', '::title', '::description', '::type', '::link', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || (_data$dataKey = data[dataKey]) !== null && _data$dataKey !== void 0 && _data$dataKey['::type'] && !data[dataKey]['::type'].includes('xxx-of') ? (0, _lit.html)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '';
-      })}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : (0, _lit.html)`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
+        return !['::metadata', '::title', '::description', '::type', '::link', '::circular', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || (_data$dataKey = data[dataKey]) !== null && _data$dataKey !== void 0 && _data$dataKey['::type'] && !data[dataKey]['::type'].includes('xxx-of') ? (0, _lit.html)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '';
+      })}`} </div> ${!closeBracket || data['::type'] && data['::type'].includes('xxx-of') ? '' : (0, _lit.html)`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
     }
 
     // For Primitive Data types

package/dist/lib/styles/font-styles.js

@@ -3,4 +3,4 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _lit = require("lit");
-var _default = exports.default = (0, _lit.css)`.hover-bg:hover{background:var(--bg3)}::selection{background:var(--selection-bg);color:var(--selection-fg)}.regular-font{font-family:var(--font-regular)}.mono-font{font-family:var(--font-mono)}.title{font-size:calc(var(--font-size-small) + 1rem);font-weight:400}.sub-title{font-size:20px}.req-res-title{font-family:var(--font-regular);font-size:calc(var(--font-size-small) + 4px);font-weight:700}.tiny-title{font-size:calc(var(--font-size-small) + 1px);font-weight:700}.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)}.bold-text{font-weight:700}.gray-text{color:var(--light-fg)}.red-text{color:var(--red)}.blue-text{color:var(--blue)}.multiline{overflow:scroll;max-height:var(--resp-area-height,300px);color:var(--fg3)}.method-fg.put{color:var(--orange)}.method-fg.post{color:var(--green)}.method-fg.get,.method-fg.head{color:var(--blue)}.method-fg.delete{color:var(--red)}.method-fg.query{color:var(--purple)}.method-fg.trace{color:var(--purple)}.method-fg.options{color:var(--gray)}.method-fg.patch{color:var(--yellow)}h1{font-family:var(--font-regular);font-size:28px;padding-top:10px;letter-spacing:normal;font-weight:400}h2{font-family:var(--font-regular);font-size:24px;padding-top:10px;letter-spacing:normal;font-weight:400}h3{font-family:var(--font-regular);font-size:18px;padding-top:10px;letter-spacing:normal;font-weight:400}h4{font-family:var(--font-regular);font-size:16px;padding-top:10px;letter-spacing:normal;font-weight:400}h5{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h6{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h1,h2,h3,h4,h5{margin-block-end:.2em;margin-block-start:.5em}h3{margin-top:0}p{margin-block-start:.5em}a{color:var(--blue);cursor:pointer}a.inactive-link{color:var(--fg);text-decoration:none;cursor:text}code,pre,syntax-highlighter{margin:0;font-family:var(--font-mono);font-size:var(--font-size-mono)}.m-markdown syntax-highlighter{display:block}.m-markdown,.m-markdown-small{display:block}.m-markdown a,.m-markdown li,.m-markdown p,.m-markdown span{font-size:var(--font-size-regular);line-height:calc(var(--font-size-regular) + 6px)}.m-markdown-small a,.m-markdown-small li,.m-markdown-small p,.m-markdown-small span{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 6px)}.m-markdown p:not(:first-child){margin-block-start:12px}.m-markdown-small p:not(:first-child){margin-block-start:12px}.m-markdown :first-child,.m-markdown-small :first-child{margin-block-start:0}.m-markdown p,.m-markdown-small p{margin-block-end:0;overflow-wrap:anywhere}.toolbar .m-markdown p,.toolbar .m-markdown-small p{margin-block-start:0}.m-markdown code span{font-size:var(--font-size-mono)}.m-markdown code,.m-markdown syntax-highlighter,.m-markdown-small code{padding:1px 6px;border-radius:2px;color:var(--inline-code-fg);background-color:var(--bg3);font-size:calc(var(--font-size-mono));line-height:1.2}.m-markdown-small code,.m-markdown-small syntax-highlighter{font-size:var(--font-size-mono)}.m-markdown pre,.m-markdown syntax-highlighter,.m-markdown-small pre{white-space:pre-wrap;overflow-x:auto;line-height:normal;border-radius:2px;border:1px solid var(--code-border-color)}.m-markdown pre,.m-markdown syntax-highlighter{padding:8px;background-color:var(--bg2);color:var(--code-fg)}.m-markdown-small pre,.m-markdown-small syntax-highlighter{margin-top:4px;padding:2px 4px;background-color:var(--bg3);color:var(--fg2)}.m-markdown pre code,.m-markdown-small pre code{border:none;padding:0}.m-markdown pre code{color:var(--code-fg);background-color:var(--bg2);background-color:transparent}.m-markdown-small pre code,.m-markdown-small syntax-highlighter{color:var(--fg2);background-color:var(--bg3)}.m-markdown ol,.m-markdown ul{padding-inline-start:30px}.m-markdown-small ol,.m-markdown-small ul{padding-inline-start:20px}.m-markdown a,.m-markdown-small a{color:var(--blue)}.m-markdown img,.m-markdown-small img{max-width:100%}.m-markdown table,.m-markdown-small table{border-spacing:0;margin:10px 0;border-collapse:separate;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:calc(var(--font-size-small) + 1px);line-height:calc(var(--font-size-small) + 4px);max-width:100%}.m-markdown-small table{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 2px);margin:8px 0}.m-markdown td,.m-markdown th,.m-markdown-small td,.m-markdown-small th{vertical-align:top;border-top:1px solid var(--border-color);line-height:calc(var(--font-size-small) + 4px)}.m-markdown tr:first-child th,.m-markdown-small tr:first-child th{border-top:0 none}.m-markdown td,.m-markdown th{padding:10px 12px}.m-markdown-small td,.m-markdown-small th{padding:8px 8px}.m-markdown th,.m-markdown-small th{font-weight:600;background-color:var(--bg2);vertical-align:middle}.m-markdown-small table code{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown table code{font-size:var(--font-size-mono)}.m-markdown blockquote,.m-markdown-small blockquote{margin-inline-start:0;margin-inline-end:0;border-left:3px solid var(--border-color);padding:6px 0 6px 6px}`;
+var _default = exports.default = (0, _lit.css)`.hover-bg:hover{background:var(--bg3)}::selection{background:var(--selection-bg);color:var(--selection-fg)}.regular-font{font-family:var(--font-regular)}.mono-font{font-family:var(--font-mono)}.title{font-size:calc(var(--font-size-small) + 1rem);font-weight:400}.sub-title{font-size:20px}.req-res-title{font-family:var(--font-regular);font-size:calc(var(--font-size-small) + 4px);font-weight:700}.tiny-title{font-size:calc(var(--font-size-small) + 1px);font-weight:700}.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)}.bold-text{font-weight:700}.gray-text{color:var(--light-fg)}.red-text{color:var(--red)}.blue-text{color:var(--blue)}.multiline{overflow:scroll;max-height:var(--resp-area-height,300px);color:var(--fg3)}.method-fg.put{color:var(--orange)}.method-fg.post{color:var(--green)}.method-fg.get,.method-fg.head{color:var(--blue)}.method-fg.delete{color:var(--red)}.method-fg.query{color:var(--purple)}.method-fg.trace{color:var(--purple)}.method-fg.options{color:var(--gray)}.method-fg.patch{color:var(--yellow)}h1{font-family:var(--font-regular);font-size:28px;padding-top:10px;letter-spacing:normal;font-weight:400}h2{font-family:var(--font-regular);font-size:24px;padding-top:10px;letter-spacing:normal;font-weight:400}h3{font-family:var(--font-regular);font-size:18px;padding-top:10px;letter-spacing:normal;font-weight:400}h4{font-family:var(--font-regular);font-size:16px;padding-top:10px;letter-spacing:normal;font-weight:400}h5{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h6{font-family:var(--font-regular);font-size:14px;padding-top:10px;letter-spacing:normal;font-weight:400}h1,h2,h3,h4,h5{margin-block-end:.2em;margin-block-start:.5em;padding-top:0}h3{margin-top:0}p{margin-block-start:.5em}a{color:var(--blue);cursor:pointer}a.inactive-link{color:var(--fg);text-decoration:none;cursor:text}code,pre,syntax-highlighter{margin:0;font-family:var(--font-mono);font-size:var(--font-size-mono)}.m-markdown syntax-highlighter{display:block}.m-markdown,.m-markdown-small{display:block}.m-markdown a,.m-markdown li,.m-markdown p,.m-markdown span{font-size:var(--font-size-regular);line-height:calc(var(--font-size-regular) + 6px)}.m-markdown-small a,.m-markdown-small li,.m-markdown-small p,.m-markdown-small span{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 6px)}.m-markdown p:not(:first-child){margin-block-start:12px}.m-markdown-small p:not(:first-child){margin-block-start:12px}.m-markdown :first-child,.m-markdown-small :first-child{margin-block-start:0}.m-markdown p,.m-markdown-small p{margin-block-end:0;overflow-wrap:anywhere}.toolbar .m-markdown p,.toolbar .m-markdown-small p{margin-block-start:0}.m-markdown code span{font-size:var(--font-size-mono)}.m-markdown code,.m-markdown syntax-highlighter,.m-markdown-small code{padding:1px 6px;border-radius:2px;color:var(--inline-code-fg);background-color:var(--bg3);font-size:calc(var(--font-size-mono));line-height:1.2}.m-markdown-small code,.m-markdown-small syntax-highlighter{font-size:var(--font-size-mono)}.m-markdown pre,.m-markdown syntax-highlighter,.m-markdown-small pre{white-space:pre-wrap;overflow-x:auto;line-height:normal;border-radius:2px;border:1px solid var(--code-border-color)}.m-markdown pre,.m-markdown syntax-highlighter{padding:8px;background-color:var(--bg2);color:var(--code-fg)}.m-markdown-small pre,.m-markdown-small syntax-highlighter{margin-top:4px;padding:2px 4px;background-color:var(--bg3);color:var(--fg2)}.m-markdown pre code,.m-markdown-small pre code{border:none;padding:0}.m-markdown pre code{color:var(--code-fg);background-color:var(--bg2);background-color:transparent}.m-markdown-small pre code,.m-markdown-small syntax-highlighter{color:var(--fg2);background-color:var(--bg3)}.m-markdown ol,.m-markdown ul{padding-inline-start:30px}.m-markdown-small ol,.m-markdown-small ul{padding-inline-start:20px}.m-markdown a,.m-markdown-small a{color:var(--blue)}.m-markdown img,.m-markdown-small img{max-width:100%}.m-markdown table,.m-markdown-small table{border-spacing:0;margin:10px 0;border-collapse:separate;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:calc(var(--font-size-small) + 1px);line-height:calc(var(--font-size-small) + 4px);max-width:100%}.m-markdown-small table{font-size:var(--font-size-small);line-height:calc(var(--font-size-small) + 2px);margin:8px 0}.m-markdown td,.m-markdown th,.m-markdown-small td,.m-markdown-small th{vertical-align:top;border-top:1px solid var(--border-color);line-height:calc(var(--font-size-small) + 4px)}.m-markdown tr:first-child th,.m-markdown-small tr:first-child th{border-top:0 none}.m-markdown td,.m-markdown th{padding:10px 12px}.m-markdown-small td,.m-markdown-small th{padding:8px 8px}.m-markdown th,.m-markdown-small th{font-weight:600;background-color:var(--bg2);vertical-align:middle}.m-markdown-small table code{font-size:calc(var(--font-size-mono) - 1px)}.m-markdown table code{font-size:var(--font-size-mono)}.m-markdown blockquote,.m-markdown-small blockquote{margin-inline-start:0;margin-inline-end:0;border-left:3px solid var(--border-color);padding:6px 0 6px 6px}`;

package/dist/lib/templates/expanded-endpoint-template.js

@@ -19,12 +19,14 @@ function expandedEndpointBodyTemplate(path, tag) {
   // Filter API Keys that are non-empty and are applicable to the the path
   const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter(v => v.finalKeyValue && path.security && path.security.some(ps => ps[v.apiKeyId])) || [];
   const codeSampleTabPanel = path.xCodeSamples ? _codeSamplesTemplate.default.call(this, path.xCodeSamples) : '';
-  return (0, _lit.html)` ${this.renderStyle === 'read' ? (0, _lit.html)`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tag && tag.name !== 'General ⦂' ? (0, _lit.html)`<div class="title tag-link" role="heading" aria-level="1" data-content-id="${tag.elementId}" @click="${e => this.scrollToEventTarget(e, false)}"> ${tag === null || tag === void 0 ? void 0 : tag.name} </div>` : ''} <slot name="${tag.elementId}"></slot> <div style="display:flex;justify-content:space-between"> <div style="flex-grow:1"> <h2 style="display:flex;align-items:center"> <div>${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</div> <div>${path.deprecated ? (0, _lit.html)`<div>&nbsp;-<span class="bold-text red-text" style="font-size:var(--font-size-regular)"> ${(0, _index.getI18nText)('operations.deprecated')}</span></div>` : ''}</div> </h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? (0, _lit.html)`<span style="color:var(--primary-color)">${(0, _index.getI18nText)('operations.webhook')}</span>` : ''} <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> </div> ${path.externalDocs ? (0, _lit.html)`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(path.externalDocs.description || ''))} <a href="${(0, _commonUtils.getSanitizedUrl)(path.externalDocs.url)}">Navigate to documentation ↗</a> </div>` : ''} </div> <div class="m-markdown" style="margin-right:2rem"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(path.description || ''))}</div> <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${_securitySchemeTemplate.pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} <div class="expanded-req-resp-container"> <api-request class="request-panel" method="${path.method}" path="${path.path}" element-id="${path.elementId}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${((_path$servers = path.servers) === null || _path$servers === void 0 ? void 0 : (_path$servers$ = _path$servers[0]) === null || _path$servers$ === void 0 ? void 0 : _path$servers$.url) || ((_this$selectedServer = this.selectedServer) === null || _this$selectedServer === void 0 ? void 0 : _this$selectedServer.computedUrl)}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="${!this.hideExecution}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn, btn-fill, btn-outline, btn-try, schema-key, schema-type, schema-description, schema-table-header"> </api-request> ${path.callbacks ? _callbackTemplate.default.call(this, path.callbacks) : ''} <api-response class="response-panel" .responses="${path.responses}" display-nulls="${!!this.includeNulls}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn--resp, btn-fill--resp, btn-outline--resp, schema-key, schema-type, schema-description, schema-table-header"> </api-response> </div> </div>`;
+  const tagSummary = tag !== null && tag !== void 0 && tag.summary ? (0, _lit.html)`<small style="font-weight:400">- ${tag === null || tag === void 0 ? void 0 : tag.summary}</small>` : '';
+  return (0, _lit.html)` ${this.renderStyle === 'read' ? (0, _lit.html)`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tag && tag.name !== 'General ⦂' ? (0, _lit.html)`<h1 style="display:inline;align-self:center" class="title tag-link" role="heading" aria-level="1" data-content-id="${tag.elementId}" @click="${e => this.scrollToEventTarget(e, false)}"> ${tag === null || tag === void 0 ? void 0 : tag.name} ${tagSummary}</h1>` : ''} <slot name="${tag.elementId}"></slot> <div style="display:flex;justify-content:space-between"> <div style="flex-grow:1"> <h2 style="display:flex;align-items:center"> <div>${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</div> <div>${path.deprecated ? (0, _lit.html)`<div>&nbsp;-<span class="bold-text red-text" style="font-size:var(--font-size-regular)"> ${(0, _index.getI18nText)('operations.deprecated')}</span></div>` : ''}</div> </h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? (0, _lit.html)`<span style="color:var(--primary-color)">${(0, _index.getI18nText)('operations.webhook')}</span>` : ''} <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> </div> ${path.externalDocs ? (0, _lit.html)`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(path.externalDocs.description || ''))} <a href="${(0, _commonUtils.getSanitizedUrl)(path.externalDocs.url)}">Navigate to documentation ↗</a> </div>` : ''} </div> <div class="m-markdown" style="margin-right:2rem"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(path.description || ''))}</div> <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${_securitySchemeTemplate.pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} <div class="expanded-req-resp-container"> <api-request class="request-panel" method="${path.method}" path="${path.path}" element-id="${path.elementId}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${((_path$servers = path.servers) === null || _path$servers === void 0 ? void 0 : (_path$servers$ = _path$servers[0]) === null || _path$servers$ === void 0 ? void 0 : _path$servers$.url) || ((_this$selectedServer = this.selectedServer) === null || _this$selectedServer === void 0 ? void 0 : _this$selectedServer.computedUrl)}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="${!this.hideExecution}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn, btn-fill, btn-outline, btn-try, schema-key, schema-type, schema-description, schema-table-header"> </api-request> ${path.callbacks ? _callbackTemplate.default.call(this, path.callbacks) : ''} <api-response class="response-panel" .responses="${path.responses}" display-nulls="${!!this.includeNulls}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn--resp, btn-fill--resp, btn-outline--resp, schema-key, schema-type, schema-description, schema-table-header"> </api-response> </div> </div>`;
 }
 function expandedTagTemplate(tagId, subsectionFullId) {
   const tag = (this.resolvedSpec.tags || []).find(t => t.elementId === tagId);
   const subsectionId = subsectionFullId.replace(`${tagId}--`, '');
-  return (0, _lit.html)` <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style=""> <div class="title tag" part="label-tag-title" role="heading" aria-level="1">${tag.name}</div> <slot name="${tag.elementId}--subsection--${subsectionId}"> <div class="regular-font-size"> ${(0, _unsafeHtml.unsafeHTML)(`
+  const tagSummary = tag.summary ? (0, _lit.html)`<h2 style="font-weight:400">${tag.summary}</h2>` : '';
+  return (0, _lit.html)` <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style=""> <h1 class="title tag" part="label-tag-title" role="heading" aria-level="1">${tag.name}</h1> ${tagSummary} <slot name="${tag.elementId}--subsection--${subsectionId}"> <div class="regular-font-size"> ${(0, _unsafeHtml.unsafeHTML)(`
             <div class="m-markdown regular-font">
             ${(0, _commonUtils.toMarkdown)(tag.description || '')}
           </div>`)} </div> </slot> <slot name="${tag.elementId}--body"></slot> <br> <strong>Operations</strong> <div class="nav-bar-paths-under-tag" style="max-width:300px"> ${tag.paths.map(p => (0, _lit.html)` <div class="nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}" role="link" tabindex="0" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {