@pb33f/cowboy-components 0.7.17 → 0.8.0

package/dist/components/model-renderer/components.js

@@ -21,10 +21,15 @@ import modelSharedCss from "./model-shared.css.js";
 import listsCss from "../../css/lists.css.js";
 import formattingCss from "../../css/formatting.css.js";
 import linksCss from "../../css/links.css.js";
-import { ProblemDrawerEventType } from "../problem-list/details-drawer.js";
-import { OpenProblemDrawer } from "../../events/doctor.js";
+import { DrawerContentType } from "../../model/drawer-content.js";
+import { OpenDrawer } from "../../events/doctor.js";
 import { extractExtensions } from "../../model/media-type.js";
 let RenderedComponentsNodeComponent = class RenderedComponentsNodeComponent extends ClickableRef {
+    willUpdate(changedProps) {
+        if (changedProps.has('components')) {
+            this.resetExpandedSections();
+        }
+    }
     render() {
         let schemas = html ``;
         let responses = html ``;
@@ -45,271 +50,330 @@ let RenderedComponentsNodeComponent = class RenderedComponentsNodeComponent exte
                 <hr class="hr-nopadding">`;
         }
         if (this.components?.schemas) {
+            const schemasId = 'components_schemas';
             schemas = html `
                     <div id="schemas">
-                        <h3 class="label"><sl-icon name="box" class="icon-vertical"></sl-icon> 
-                            <a href="#" @click="${() => this.toggleSection(`components_schemas`)}">Schemas / Models</a>
+                        <h3 class="label"><sl-icon name="box" class="icon-vertical"></sl-icon>
+                            <a href="#" @click="${() => this.toggleExpanded(schemasId)}">SCHEMAS / MODELS</a>
                             <sl-icon-button class="section-control"
-                                            @click="${() => this.toggleSection(`components_schemas`)}"
-                                            name="chevron-right" id="components_schemas-toggle"></sl-icon-button>
+                                            aria-expanded="${this.isExpanded(schemasId) ? 'true' : 'false'}"
+                                            @click="${() => this.toggleExpanded(schemasId)}"
+                                            name="chevron-${this.isExpanded(schemasId) ? 'down' : 'right'}"
+                                            label="Toggle section"></sl-icon-button>
                         </h3>
-                        <div id="components_schemas" class="closed">
+                        ${this.isExpanded(schemasId) ? html `
+                        <div>
                             ${Object.keys(this.components.schemas).map((key) => {
                 if (this.components && this.components.schemas && this.components.schemas[key]) {
                     const schema = this.components.schemas[key];
+                    const schemaId = `components_schemas_${key}`;
                     return html `
                                         <div style="${style}">
                                             <div class="model-item">
                                                 <sl-icon name="box" class="icon-vertical secondary"></sl-icon>
-                                                <a href="#" @click="${() => this.toggleSection(`components_schemas_${key}`)}">${key}</a>
+                                                <a href="#" @click="${() => this.toggleExpanded(schemaId)}">${key}</a>
                                                 <sl-icon-button class="section-control"
-                                                                @click="${() => this.toggleSection(`components_schemas_${key}`)}"
-                                                                name="chevron-right"
-                                                                id="components_schemas_${key}-toggle"></sl-icon-button>
-                                                
-                                                <div id="components_schemas_${key}" class="closed margin-top">
+                                                                aria-expanded="${this.isExpanded(schemaId) ? 'true' : 'false'}"
+                                                                @click="${() => this.toggleExpanded(schemaId)}"
+                                                                name="chevron-${this.isExpanded(schemaId) ? 'down' : 'right'}"
+                                                                label="Toggle section"></sl-icon-button>
+                                                ${this.isExpanded(schemaId) ? html `
+                                                <div class="margin-top">
                                                     <pb33f-rendered-schema-node .schema="${schema}" renderType></pb33f-rendered-schema-node>
                                                 </div>
+                                                ` : ''}
                                             </div>
                                         </div>`;
                 }
             })}
                             <hr class="margin-bottom"/>
                         </div>
+                        ` : ''}
                     </div>`;
         }
         if (this.components?.parameters) {
+            const paramsId = 'components_parameters';
             parameters = html `
                     <div id="parameters">
-                        <h3 class="label"><sl-icon name="braces-asterisk" class="icon-vertical"></sl-icon> 
-                            <a href="#" @click="${() => this.toggleSection(`components_parameters`)}">Parameters</a>
+                        <h3 class="label"><sl-icon name="braces-asterisk" class="icon-vertical"></sl-icon>
+                            <a href="#" @click="${() => this.toggleExpanded(paramsId)}">PARAMETERS</a>
                             <sl-icon-button class="section-control"
-                                            @click="${() => this.toggleSection(`components_parameters`)}"
-                                            name="chevron-right" id="components_parameters-toggle"></sl-icon-button>
+                                            aria-expanded="${this.isExpanded(paramsId) ? 'true' : 'false'}"
+                                            @click="${() => this.toggleExpanded(paramsId)}"
+                                            name="chevron-${this.isExpanded(paramsId) ? 'down' : 'right'}"
+                                            label="Toggle section"></sl-icon-button>
                         </h3>
-                        <div id="components_parameters" class="closed">
+                        ${this.isExpanded(paramsId) ? html `
+                        <div>
                             ${Object.keys(this.components.parameters).map((key) => {
                 if (this.components && this.components.parameters && this.components.parameters[key]) {
                     const param = this.components.parameters[key];
+                    const paramId = `components_parameters_${key}`;
                     return html `
                                         <div style="${style}">
                                             <div class="margin-bottom model-item">
                                                 <sl-icon name="braces-asterisk" class="icon-vertical secondary"></sl-icon>
-                                                <a href="#" @click="${() => this.toggleSection(`components_parameters_${key}`)}">${key}</a>
+                                                <a href="#" @click="${() => this.toggleExpanded(paramId)}">${key}</a>
                                                 <sl-icon-button class="section-control"
-                                                                @click="${() => this.toggleSection(`components_parameters_${key}`)}"
-                                                                name="chevron-right"
-                                                                id="components_parameters_${key}-toggle"></sl-icon-button>
-                                                
-                                                <div id="components_parameters_${key}" class="closed margin-top">
+                                                                aria-expanded="${this.isExpanded(paramId) ? 'true' : 'false'}"
+                                                                @click="${() => this.toggleExpanded(paramId)}"
+                                                                name="chevron-${this.isExpanded(paramId) ? 'down' : 'right'}"
+                                                                label="Toggle section"></sl-icon-button>
+                                                ${this.isExpanded(paramId) ? html `
+                                                <div class="margin-top">
                                                     <pb33f-rendered-parameter-node .parameter="${param}" name="${key}"></pb33f-rendered-parameter-node>
                                                 </div>
+                                                ` : ''}
                                             </div>
                                         </div>`;
                 }
             })}
                             <hr class="margin-bottom"/>
                         </div>
+                        ` : ''}
                     </div>
                 `;
         }
         if (this.components?.headers) {
+            const headersId = 'components_headers';
             headers = html `
                     <div id="headers">
-                        <h3 class="label"><sl-icon name="envelope" class="icon-vertical"></sl-icon> 
-                            <a href="#" @click="${() => this.toggleSection(`components_headers`)}">Headers</a>
+                        <h3 class="label"><sl-icon name="envelope" class="icon-vertical"></sl-icon>
+                            <a href="#" @click="${() => this.toggleExpanded(headersId)}">HEADERS</a>
                             <sl-icon-button class="section-control"
-                                            @click="${() => this.toggleSection(`components_headers`)}"
-                                            name="chevron-right" id="components_headers-toggle"></sl-icon-button>
+                                            aria-expanded="${this.isExpanded(headersId) ? 'true' : 'false'}"
+                                            @click="${() => this.toggleExpanded(headersId)}"
+                                            name="chevron-${this.isExpanded(headersId) ? 'down' : 'right'}"
+                                            label="Toggle section"></sl-icon-button>
                         </h3>
-                        <div id="components_headers" class="closed">
+                        ${this.isExpanded(headersId) ? html `
+                        <div>
                             ${Object.keys(this.components.headers).map((key) => {
                 if (this.components && this.components.headers && this.components.headers[key]) {
                     const header = this.components.headers[key];
+                    const headerId = `components_headers_${key}`;
                     return html `
                                         <div style="${style}">
                                             <div class="model-item">
                                                 <sl-icon name="envelope" class="icon-vertical secondary"></sl-icon>
-                                                <a href="#" @click="${() => this.toggleSection(`components_headers_${key}`)}">${key}</a>
+                                                <a href="#" @click="${() => this.toggleExpanded(headerId)}">${key}</a>
                                                 <sl-icon-button class="section-control"
-                                                                @click="${() => this.toggleSection(`components_headers_${key}`)}"
-                                                                name="chevron-right"
-                                                                id="components_headers_${key}-toggle"></sl-icon-button>
-                                                
-                                                <div id="components_headers_${key}" class="closed margin-top">
+                                                                aria-expanded="${this.isExpanded(headerId) ? 'true' : 'false'}"
+                                                                @click="${() => this.toggleExpanded(headerId)}"
+                                                                name="chevron-${this.isExpanded(headerId) ? 'down' : 'right'}"
+                                                                label="Toggle section"></sl-icon-button>
+                                                ${this.isExpanded(headerId) ? html `
+                                                <div class="margin-top">
                                                     <pb33f-rendered-header-node .header="${header}" name="${key}"></pb33f-rendered-header-node>
                                                 </div>
+                                                ` : ''}
                                             </div>
                                         </div>`;
                 }
             })}
                             <hr class="margin-bottom"/>
                         </div>
+                        ` : ''}
                     </div>
                 `;
         }
         if (this.components?.requestBodies) {
+            const reqBodiesId = 'components_requestBodies';
             requestBodies = html `
                     <div id="requestBodies">
-                        <h3 class="label"><sl-icon name="box-arrow-in-right" class="icon-vertical"></sl-icon> 
-                            <a href="#" @click="${() => this.toggleSection(`components_requestBodies`)}">Request Bodies</a>
+                        <h3 class="label"><sl-icon name="box-arrow-in-right" class="icon-vertical"></sl-icon>
+                            <a href="#" @click="${() => this.toggleExpanded(reqBodiesId)}">REQUEST BODIES</a>
                             <sl-icon-button class="section-control"
-                                            @click="${() => this.toggleSection(`components_requestBodies`)}"
-                                            name="chevron-right" id="components_requestBodies-toggle"></sl-icon-button>
+                                            aria-expanded="${this.isExpanded(reqBodiesId) ? 'true' : 'false'}"
+                                            @click="${() => this.toggleExpanded(reqBodiesId)}"
+                                            name="chevron-${this.isExpanded(reqBodiesId) ? 'down' : 'right'}"
+                                            label="Toggle section"></sl-icon-button>
                         </h3>
-                        <div id="components_requestBodies" class="closed">
+                        ${this.isExpanded(reqBodiesId) ? html `
+                        <div>
                             ${Object.keys(this.components.requestBodies).map((key) => {
                 if (this.components && this.components.requestBodies && this.components.requestBodies[key]) {
                     const requestBody = this.components.requestBodies[key];
+                    const reqBodyId = `components_requestBodies_${key}`;
                     return html `
                                         <div style="${style}">
                                             <div class="model-item">
                                                 <sl-icon name="box-arrow-in-right" class="icon-vertical secondary"></sl-icon>
-                                                <a href="#" @click="${() => this.toggleSection(`components_requestBodies_${key}`)}">${key}</a>
+                                                <a href="#" @click="${() => this.toggleExpanded(reqBodyId)}">${key}</a>
                                                 <sl-icon-button class="section-control"
-                                                                @click="${() => this.toggleSection(`components_requestBodies_${key}`)}"
-                                                                name="chevron-right"
-                                                                id="components_requestBodies_${key}-toggle"></sl-icon-button>
-                                                
-                                                <div id="components_requestBodies_${key}" class="closed margin-top">
+                                                                aria-expanded="${this.isExpanded(reqBodyId) ? 'true' : 'false'}"
+                                                                @click="${() => this.toggleExpanded(reqBodyId)}"
+                                                                name="chevron-${this.isExpanded(reqBodyId) ? 'down' : 'right'}"
+                                                                label="Toggle section"></sl-icon-button>
+                                                ${this.isExpanded(reqBodyId) ? html `
+                                                <div class="margin-top">
                                                     <pb33f-rendered-requestbody-node .requestBody="${requestBody}" name="${key}"></pb33f-rendered-requestbody-node>
                                                 </div>
+                                                ` : ''}
                                             </div>
                                         </div>`;
                 }
             })}
                             <hr class="margin-bottom"/>
                         </div>
+                        ` : ''}
                     </div>
                 `;
         }
         if (this.components?.responses) {
+            const responsesId = 'components_responses';
             responses = html `
                     <div id="responses">
-                        <h3 class="label"><sl-icon name="box-arrow-left" class="icon-vertical"></sl-icon> 
-                            <a href="#" @click="${() => this.toggleSection(`components_responses`)}">Responses</a>
+                        <h3 class="label"><sl-icon name="box-arrow-left" class="icon-vertical"></sl-icon>
+                            <a href="#" @click="${() => this.toggleExpanded(responsesId)}">RESPONSES</a>
                             <sl-icon-button class="section-control"
-                                            @click="${() => this.toggleSection(`components_responses`)}"
-                                            name="chevron-right" id="components_responses-toggle"></sl-icon-button>
+                                            aria-expanded="${this.isExpanded(responsesId) ? 'true' : 'false'}"
+                                            @click="${() => this.toggleExpanded(responsesId)}"
+                                            name="chevron-${this.isExpanded(responsesId) ? 'down' : 'right'}"
+                                            label="Toggle section"></sl-icon-button>
                         </h3>
-                        <div id="components_responses" class="closed">
+                        ${this.isExpanded(responsesId) ? html `
+                        <div>
                             ${Object.keys(this.components.responses).map((key) => {
                 if (this.components && this.components.responses && this.components.responses[key]) {
                     const response = this.components.responses[key];
+                    const responseId = `components_responses_${key}`;
                     return html `
                                         <div style="${style}">
                                             <div class="model-item">
                                                 <sl-icon name="box-arrow-left" class="icon-vertical secondary"></sl-icon>
-                                                <a href="#" @click="${() => this.toggleSection(`components_responses_${key}`)}">${key}</a>
+                                                <a href="#" @click="${() => this.toggleExpanded(responseId)}">${key}</a>
                                                 <sl-icon-button class="section-control"
-                                                                @click="${() => this.toggleSection(`components_responses_${key}`)}"
-                                                                name="chevron-right"
-                                                                id="components_responses_${key}-toggle"></sl-icon-button>
-                                                
-                                                <div id="components_responses_${key}" class="closed margin-top">
+                                                                aria-expanded="${this.isExpanded(responseId) ? 'true' : 'false'}"
+                                                                @click="${() => this.toggleExpanded(responseId)}"
+                                                                name="chevron-${this.isExpanded(responseId) ? 'down' : 'right'}"
+                                                                label="Toggle section"></sl-icon-button>
+                                                ${this.isExpanded(responseId) ? html `
+                                                <div class="margin-top">
                                                     <pb33f-rendered-response-node .response="${response}" name="${key}"></pb33f-rendered-response-node>
                                                 </div>
+                                                ` : ''}
                                             </div>
                                         </div>`;
                 }
             })}
                             <hr class="margin-bottom"/>
                         </div>
+                        ` : ''}
                     </div>
                 `;
         }
         if (this.components?.securitySchemes) {
+            const secSchemesId = 'components_securitySchemes';
             securitySchemes = html `
-                    <div id="responses">
-                        <h3 class="label"><sl-icon name="shield-lock" class="icon-vertical"></sl-icon> 
-                            <a href="#" @click="${() => this.toggleSection(`components_securitySchemes`)}">Security Schemes</a>
+                    <div id="securitySchemes">
+                        <h3 class="label"><sl-icon name="shield-lock" class="icon-vertical"></sl-icon>
+                            <a href="#" @click="${() => this.toggleExpanded(secSchemesId)}">SECURITY SCHEMES</a>
                             <sl-icon-button class="section-control"
-                                            @click="${() => this.toggleSection(`components_securitySchemes`)}"
-                                            name="chevron-right" id="components_securitySchemes-toggle"></sl-icon-button>
+                                            aria-expanded="${this.isExpanded(secSchemesId) ? 'true' : 'false'}"
+                                            @click="${() => this.toggleExpanded(secSchemesId)}"
+                                            name="chevron-${this.isExpanded(secSchemesId) ? 'down' : 'right'}"
+                                            label="Toggle section"></sl-icon-button>
                         </h3>
-                        <div id="components_securitySchemes" class="closed">
+                        ${this.isExpanded(secSchemesId) ? html `
+                        <div>
                             ${Object.keys(this.components.securitySchemes).map((key) => {
                 if (this.components && this.components.securitySchemes && this.components.securitySchemes[key]) {
                     const scheme = this.components.securitySchemes[key];
+                    const schemeId = `components_securitySchemes_${key}`;
                     return html `
                                         <div style="${style}">
                                             <div class="model-item">
                                                 <sl-icon name="shield-lock" class="icon-vertical secondary"></sl-icon>
-                                                <a href="#" @click="${() => this.toggleSection(`components_responses_${key}`)}">${key}</a>
+                                                <a href="#" @click="${() => this.toggleExpanded(schemeId)}">${key}</a>
                                                 <sl-icon-button class="section-control"
-                                                                @click="${() => this.toggleSection(`components_responses_${key}`)}"
-                                                                name="chevron-right"
-                                                                id="components_responses_${key}-toggle"></sl-icon-button>
-                                                
-                                                <div id="components_responses_${key}" class="closed margin-top">
+                                                                aria-expanded="${this.isExpanded(schemeId) ? 'true' : 'false'}"
+                                                                @click="${() => this.toggleExpanded(schemeId)}"
+                                                                name="chevron-${this.isExpanded(schemeId) ? 'down' : 'right'}"
+                                                                label="Toggle section"></sl-icon-button>
+                                                ${this.isExpanded(schemeId) ? html `
+                                                <div class="margin-top">
                                                     <pb33f-rendered-securityscheme-node .securityScheme="${scheme}" name="${key}"></pb33f-rendered-securityscheme-node>
                                                 </div>
+                                                ` : ''}
                                             </div>
                                         </div>`;
                 }
             })}
                             <hr class="margin-bottom"/>
                         </div>
+                        ` : ''}
                     </div>
                 `;
         }
         if (this.components?.callbacks) {
+            const callbacksId = 'components_callbacks';
             callbacks = html `
                     <div id="callbacks">
-                        <h3 class="label"><sl-icon name="telephone-outbound" class="icon-vertical"></sl-icon> 
-                            <a href="#" @click="${() => this.toggleSection(`components_callbacks`)}">Callbacks</a>
+                        <h3 class="label"><sl-icon name="telephone-outbound" class="icon-vertical"></sl-icon>
+                            <a href="#" @click="${() => this.toggleExpanded(callbacksId)}">CALLBACKS</a>
                             <sl-icon-button class="section-control"
-                                            @click="${() => this.toggleSection(`components_callbacks`)}"
-                                            name="chevron-right" id="components_callbacks-toggle"></sl-icon-button>
+                                            aria-expanded="${this.isExpanded(callbacksId) ? 'true' : 'false'}"
+                                            @click="${() => this.toggleExpanded(callbacksId)}"
+                                            name="chevron-${this.isExpanded(callbacksId) ? 'down' : 'right'}"
+                                            label="Toggle section"></sl-icon-button>
                         </h3>
-                        <div id="components_callbacks" class="closed">
+                        ${this.isExpanded(callbacksId) ? html `
+                        <div>
                             ${Object.keys(this.components.callbacks).map((key) => {
                 if (this.components && this.components.callbacks && this.components.callbacks[key]) {
                     const callback = this.components.callbacks[key];
+                    const callbackId = `components_callbacks_${key}`;
                     return html `
                                         <div style="${style}">
                                             <div class="model-item">
                                                 <sl-icon name="telephone-outbound" class="icon-vertical secondary"></sl-icon>
-                                                <a href="#" @click="${() => this.toggleSection(`components_callbacks_${key}`)}">${key}</a>
+                                                <a href="#" @click="${() => this.toggleExpanded(callbackId)}">${key}</a>
                                                 <sl-icon-button class="section-control"
-                                                                @click="${() => this.toggleSection(`components_callbacks_${key}`)}"
-                                                                name="chevron-right"
-                                                                id="components_callbacks_${key}-toggle"></sl-icon-button>
-                                                
-                                                <div id="components_callbacks_${key}" class="closed margin-top">
+                                                                aria-expanded="${this.isExpanded(callbackId) ? 'true' : 'false'}"
+                                                                @click="${() => this.toggleExpanded(callbackId)}"
+                                                                name="chevron-${this.isExpanded(callbackId) ? 'down' : 'right'}"
+                                                                label="Toggle section"></sl-icon-button>
+                                                ${this.isExpanded(callbackId) ? html `
+                                                <div class="margin-top">
                                                     <pb33f-rendered-callback-node .callback="${callback}" name="${key}"></pb33f-rendered-callback-node>
                                                 </div>
+                                                ` : ''}
                                             </div>
                                         </div>`;
                 }
             })}
                             <hr class="margin-bottom"/>
                         </div>
+                        ` : ''}
                     </div>
                 `;
         }
         if (this.components?.examples) {
             const renderExampleInDrawer = (example, key) => {
-                this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+                this.dispatchEvent(new CustomEvent(OpenDrawer, {
                     bubbles: true,
                     composed: true,
                     detail: {
-                        type: ProblemDrawerEventType.RENDERED_EXAMPLE,
-                        customTitle: key,
-                        render: JSON.stringify(example, null, 2)
+                        type: DrawerContentType.RENDERED_EXAMPLE,
+                        title: key,
+                        json: JSON.stringify(example, null, 2)
                     }
                 }));
-                return;
             };
+            const examplesId = 'components_examples';
             examples = html `
-                    <div id="responses">
-                        <h3 class="label"><sl-icon name="chat-left-quote" class="icon-vertical"></sl-icon> 
-                            <a href="#" @click="${() => this.toggleSection(`components_examples`)}">Examples</a>
+                    <div id="examples">
+                        <h3 class="label"><sl-icon name="chat-left-quote" class="icon-vertical"></sl-icon>
+                            <a href="#" @click="${() => this.toggleExpanded(examplesId)}">EXAMPLES</a>
                             <sl-icon-button class="section-control"
-                                            @click="${() => this.toggleSection(`components_examples`)}"
-                                            name="chevron-right" id="components_examples-toggle"></sl-icon-button>
+                                            aria-expanded="${this.isExpanded(examplesId) ? 'true' : 'false'}"
+                                            @click="${() => this.toggleExpanded(examplesId)}"
+                                            name="chevron-${this.isExpanded(examplesId) ? 'down' : 'right'}"
+                                            label="Toggle section"></sl-icon-button>
                         </h3>
-                        <div id="components_examples" class="closed">
+                        ${this.isExpanded(examplesId) ? html `
+                        <div>
                             ${Object.keys(this.components.examples).map((key) => {
                 if (this.components && this.components.examples && this.components.examples[key]) {
                     const example = this.components.examples[key];
@@ -321,87 +385,103 @@ let RenderedComponentsNodeComponent = class RenderedComponentsNodeComponent exte
                                                 <sl-icon-button class="section-control"
                                                                 @click="${() => renderExampleInDrawer(example, key)}"
                                                                 name="chevron-right"
-                                                                id="components_examples_${key}-toggle"></sl-icon-button>
-                                                
+                                                                label="Toggle section"></sl-icon-button>
                                             </div>
                                         </div>`;
                 }
             })}
                             <hr class="margin-bottom"/>
                         </div>
+                        ` : ''}
                     </div>
                 `;
         }
         if (this.components?.links) {
+            const linksId = 'components_links';
             links = html `
                     <div id="links">
-                        <h3 class="label"><sl-icon name="link" class="icon-vertical"></sl-icon> 
-                            <a href="#" @click="${() => this.toggleSection(`components_links`)}">Links</a>
+                        <h3 class="label"><sl-icon name="link" class="icon-vertical"></sl-icon>
+                            <a href="#" @click="${() => this.toggleExpanded(linksId)}">LINKS</a>
                             <sl-icon-button class="section-control"
-                                            @click="${() => this.toggleSection(`components_links`)}"
-                                            name="chevron-right" id="components_links-toggle"></sl-icon-button>
+                                            aria-expanded="${this.isExpanded(linksId) ? 'true' : 'false'}"
+                                            @click="${() => this.toggleExpanded(linksId)}"
+                                            name="chevron-${this.isExpanded(linksId) ? 'down' : 'right'}"
+                                            label="Toggle section"></sl-icon-button>
                         </h3>
-                        <div id="components_links" class="closed">
+                        ${this.isExpanded(linksId) ? html `
+                        <div>
                             ${Object.keys(this.components.links).map((key) => {
                 if (this.components && this.components.links && this.components.links[key]) {
                     const link = this.components.links[key];
+                    const linkId = `components_links_${key}`;
                     return html `
                                         <div style="${style}">
                                             <div class="model-item">
                                                 <sl-icon name="link" class="icon-vertical secondary"></sl-icon>
-                                                <a href="#" @click="${() => this.toggleSection(`components_links_${key}`)}">${key}</a>
+                                                <a href="#" @click="${() => this.toggleExpanded(linkId)}">${key}</a>
                                                 <sl-icon-button class="section-control"
-                                                                @click="${() => this.toggleSection(`components_links_${key}`)}"
-                                                                name="chevron-right"
-                                                                id="components_links_${key}-toggle"></sl-icon-button>
-                                                
-                                                <div id="components_links_${key}" class="closed margin-top">
+                                                                aria-expanded="${this.isExpanded(linkId) ? 'true' : 'false'}"
+                                                                @click="${() => this.toggleExpanded(linkId)}"
+                                                                name="chevron-${this.isExpanded(linkId) ? 'down' : 'right'}"
+                                                                label="Toggle section"></sl-icon-button>
+                                                ${this.isExpanded(linkId) ? html `
+                                                <div class="margin-top">
                                                     <pb33f-rendered-link-node .link="${link}" name="${key}"></pb33f-rendered-link-node>
                                                 </div>
+                                                ` : ''}
                                             </div>
                                         </div>`;
                 }
             })}
                             <hr class="margin-bottom"/>
                         </div>
+                        ` : ''}
                     </div>
                 `;
         }
         if (this.components?.pathItems) {
+            const pathItemsId = 'components_pathItems';
             pathItems = html `
-                    <div id="links">
-                        <h3 class="label"><sl-icon name="geo" class="icon-vertical"></sl-icon> 
-                            <a href="#" @click="${() => this.toggleSection(`components_pathItems`)}">Path Items</a>
+                    <div id="pathItems">
+                        <h3 class="label"><sl-icon name="geo" class="icon-vertical"></sl-icon>
+                            <a href="#" @click="${() => this.toggleExpanded(pathItemsId)}">PATH ITEMS</a>
                             <sl-icon-button class="section-control"
-                                            @click="${() => this.toggleSection(`components_pathItems`)}"
-                                            name="chevron-right" id="components_pathItems-toggle"></sl-icon-button>
+                                            aria-expanded="${this.isExpanded(pathItemsId) ? 'true' : 'false'}"
+                                            @click="${() => this.toggleExpanded(pathItemsId)}"
+                                            name="chevron-${this.isExpanded(pathItemsId) ? 'down' : 'right'}"
+                                            label="Toggle section"></sl-icon-button>
                         </h3>
-                        <div id="components_pathItems" class="closed">
+                        ${this.isExpanded(pathItemsId) ? html `
+                        <div>
                             ${Object.keys(this.components.pathItems).map((key) => {
                 if (this.components && this.components.pathItems && this.components.pathItems[key]) {
                     const pathItem = this.components.pathItems[key];
                     const pathKey = super.encodeToSelectorID(key);
+                    const pathItemId = `components_pathItems_${pathKey}`;
                     return html `
                                         <div style="${style}">
                                             <div class="model-item">
                                                 <sl-icon name="geo" class="icon-vertical secondary"></sl-icon>
-                                                <a href="#" @click="${() => this.toggleSection(`components_pathItems_${pathKey}`)}">
+                                                <a href="#" @click="${() => this.toggleExpanded(pathItemId)}">
                                                     <pb33f-render-operation-path path="${key}"></pb33f-render-operation-path>
                                                 </a>
                                                 <sl-icon-button class="section-control"
-                                                                @click="${() => this.toggleSection(`components_pathItems_${pathKey}`)}"
-                                                                name="chevron-right"
-                                                                id="components_pathItems_${pathKey}-toggle"></sl-icon-button>
-                                                
-                                                <div id="components_pathItems_${pathKey}" class="closed margin-top">
+                                                                aria-expanded="${this.isExpanded(pathItemId) ? 'true' : 'false'}"
+                                                                @click="${() => this.toggleExpanded(pathItemId)}"
+                                                                name="chevron-${this.isExpanded(pathItemId) ? 'down' : 'right'}"
+                                                                label="Toggle section"></sl-icon-button>
+                                                ${this.isExpanded(pathItemId) ? html `
+                                                <div class="margin-top">
                                                     <pb33f-rendered-pathitem-node .pathItem="${pathItem}" name="${pathKey}"></pb33f-rendered-pathitem-node>
                                                 </div>
+                                                ` : ''}
                                             </div>
                                         </div>`;
                 }
             })}
                             <hr class="margin-bottom"/>
                         </div>
+                        ` : ''}
                     </div>
                 `;
         }

package/dist/components/model-renderer/contact.js

@@ -39,11 +39,11 @@ let RenderedContactNodeComponent = class RenderedContactNodeComponent extends Cl
                 <hr class="hr-nopadding">`;
         }
         if (this.contact?.email) {
-            email = html `<div class="margin-bottom"><span class="list-key">Email:</span> 
+            email = html `<div class="margin-bottom"><span class="list-key">EMAIL:</span> 
                 <span class="list-value"><a href="mailto:${this.contact.email}">${this.contact.email}</a></span></div>`;
         }
         if (this.contact?.name) {
-            name = html `<div class="margin-bottom"><span class="list-key">Name:</span> 
+            name = html `<div class="margin-bottom"><span class="list-key">NAME:</span> 
                 <span class="list-value">${this.contact.name}</span></div>`;
         }
         if (this.contact?.url) {

package/dist/components/model-renderer/description.css.js

@@ -18,4 +18,6 @@ export default css `
         vertical-align: middle;
         font-size: 1rem;
     }
+    
+   
 `;