rapidoc 9.3.2 → 9.3.4

package/src/components/tag-input.js

@@ -6,12 +6,12 @@ export default class TagInput extends LitElement {
     let tagItemTmpl = '';
     if (Array.isArray(this.value)) {
       tagItemTmpl = html`${this.value
-        .filter((v) => v.trim() !== '')
+        .filter((v) => typeof v === 'string' && v.trim() !== '')
         .map((v) => html`<span class='tag'>${v}</span>`)
       }`;
     }
     return html`
-      <div class='tags' tabindex="0">
+      <div class='tags'>
         ${tagItemTmpl}
         <input type="text" class='editor' @paste="${(e) => this.afterPaste(e)}" @keydown="${this.afterKeyDown}" @blur="${this.onBlur}" placeholder="${this.placeholder || ''}">
       </div>
@@ -84,7 +84,7 @@ export default class TagInput extends LitElement {
 
   static get styles() {
     return [css`
-      .tags{
+      .tags {
         display:flex;
         flex-wrap: wrap;
         outline: none;
@@ -110,7 +110,7 @@ export default class TagInput extends LitElement {
       .tag:hover ~ #cursor {
         display: block;
       }
-      .editor{
+      .editor {
         flex:1;
         border:1px solid transparent;
         color:var(--fg);
@@ -121,6 +121,9 @@ export default class TagInput extends LitElement {
         background:transparent;
         font-size: calc(var(--font-size-small) + 1px);
       }
+      .editor:focus-visible {
+        outline: 1px solid;
+      }
       .editor::placeholder {
         color: var(--placeholder-color);
         opacity:1;

package/src/json-schema-viewer.js

@@ -229,7 +229,6 @@ export default class JsonSchemaViewer extends LitElement {
     if (!this.allowSearch || !'true, false,'.includes(`${this.allowSearch},`)) { this.allowSearch = 'true'; }
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
     if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'false'; }
-    if (!this.responseAreaHeight) { this.responseAreaHeight = '300px'; }
     if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }
     if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }
     if (!this.allowSchemaDescriptionExpandToggle || !'true, false,'.includes(`${this.allowSchemaDescriptionExpandToggle},`)) { this.allowSchemaDescriptionExpandToggle = 'true'; }
@@ -260,7 +259,7 @@ export default class JsonSchemaViewer extends LitElement {
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
-  onSepcUrlChange() {
+  onSpecUrlChange() {
     this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
   }
 

package/src/rapidoc-mini.js

@@ -51,7 +51,6 @@ export default class RapiDocMini extends LitElement {
       responseAreaHeight: { type: String, attribute: 'response-area-height' },
       showSummaryWhenCollapsed: { type: String, attribute: 'show-summary-when-collapsed' },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
-      useSummaryToListExamples: { type: String, attribute: 'use-summary-to-list-example' },
       persistAuth: { type: String, attribute: 'persist-auth' },
 
       // Schema Styles
@@ -170,7 +169,6 @@ export default class RapiDocMini extends LitElement {
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
     if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'false'; }
     if (!this.fillRequestFieldsWithExample || !'true, false,'.includes(`${this.fillRequestFieldsWithExample},`)) { this.fillRequestFieldsWithExample = 'true'; }
-    if (!this.useSummaryToListExamples || !'true, false,'.includes(`${this.useSummaryToListExamples},`)) { this.useSummaryToListExamples = 'false'; }
     if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }
     if (!this.responseAreaHeight) { this.responseAreaHeight = '300px'; }
 
@@ -266,7 +264,7 @@ export default class RapiDocMini extends LitElement {
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
-  onSepcUrlChange() {
+  onSpecUrlChange() {
     this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
   }
 

package/src/rapidoc.js

@@ -38,7 +38,9 @@ export default class RapiDoc extends LitElement {
       threshold: 0,
     };
     this.showSummaryWhenCollapsed = true;
-    this.isIntersectionObserverActive = true;
+    // Will activate intersection observer only after spec load and hash analyze
+    // to scroll to the proper element without being reverted by observer behavior
+    this.isIntersectionObserverActive = false;
     this.intersectionObserver = new IntersectionObserver((entries) => { this.onIntersect(entries); }, intersectionObserverOptions);
   }
 
@@ -63,7 +65,6 @@ export default class RapiDoc extends LitElement {
       defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
       responseAreaHeight: { type: String, attribute: 'response-area-height' },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
-      useSummaryToListExamples: { type: String, attribute: 'use-summary-to-list-example' },
       persistAuth: { type: String, attribute: 'persist-auth' },
       onNavTagClick: { type: String, attribute: 'on-nav-tag-click' },
 
@@ -88,6 +89,7 @@ export default class RapiDoc extends LitElement {
       showInfo: { type: String, attribute: 'show-info' },
       allowAuthentication: { type: String, attribute: 'allow-authentication' },
       allowTry: { type: String, attribute: 'allow-try' },
+      showCurlBeforeTry: { type: String, attribute: 'show-curl-before-try' },
       allowSpecUrlLoad: { type: String, attribute: 'allow-spec-url-load' },
       allowSpecFileLoad: { type: String, attribute: 'allow-spec-file-load' },
       allowSpecFileDownload: { type: String, attribute: 'allow-spec-file-download' },
@@ -117,6 +119,8 @@ export default class RapiDoc extends LitElement {
       navHoverBgColor: { type: String, attribute: 'nav-hover-bg-color' },
       navHoverTextColor: { type: String, attribute: 'nav-hover-text-color' },
       navAccentColor: { type: String, attribute: 'nav-accent-color' },
+      navAccentTextColor: { type: String, attribute: 'nav-accent-text-color' },
+      navActiveItemMarker: { type: String, attribute: 'nav-active-item-marker' },
       navItemSpacing: { type: String, attribute: 'nav-item-spacing' },
       showMethodInNavBar: { type: String, attribute: 'show-method-in-nav-bar' },
       usePathInNavBar: { type: String, attribute: 'use-path-in-nav-bar' },
@@ -163,13 +167,14 @@ export default class RapiDoc extends LitElement {
         background-color:var(--bg);
         font-family:var(--font-regular);
       }
-      .body {
+      :where(button, input[type="checkbox"], [tabindex="0"]):focus-visible { box-shadow: var(--focus-shadow); }
+      :where(input[type="text"], input[type="password"], select, textarea):focus-visible { border-color: var(--primary-color); }
+    .body {
         display:flex;
         height:100%;
         width:100%;
         overflow:hidden;
       }
-
       .main-content { 
         margin:0;
         padding: 0; 
@@ -283,11 +288,21 @@ export default class RapiDoc extends LitElement {
         height: 36px;
         animation: spin 2s linear infinite;
       }
-      .expanded-endpoint-body{ 
+      .expanded-endpoint-body { 
         position: relative;
         padding: 6px 0px; 
       }
-      .expanded-endpoint-body.deprecated{ filter:opacity(0.6); }
+      .expanded-endpoint-body .tag-description {
+        background: var(--code-bg);
+        border-radius: var(--border-radius);
+        transition: max-height .2s ease-out;
+      }
+      .expanded-endpoint-body .tag-icon {
+        transition: transform .2s ease-out;
+      }
+      .expanded-endpoint-body .tag-icon.expanded {
+        transform: rotate(180deg);
+      }
       .divider { 
         border-top: 2px solid var(--border-color);
         margin: 24px 0;
@@ -346,6 +361,9 @@ export default class RapiDoc extends LitElement {
         border-radius: 4px 0 0 4px;
         color: #000;
       }
+      .colored-block .nav-method.as-colored-block {
+        outline: 1px solid;
+      }
 
       .nav-method.as-colored-block.get { background-color: var(--blue); }
       .nav-method.as-colored-block.put { background-color: var(--orange); }
@@ -439,7 +457,7 @@ export default class RapiDoc extends LitElement {
     }
 
     if (!this.layout || !'row, column,'.includes(`${this.layout},`)) { this.layout = 'row'; }
-    if (!this.renderStyle || !'read, view, focused,'.includes(`${this.renderStyle},`)) { this.renderStyle = 'read'; }
+    if (!this.renderStyle || !'read, view, focused,'.includes(`${this.renderStyle},`)) { this.renderStyle = 'focused'; }
     if (!this.schemaStyle || !'tree, table,'.includes(`${this.schemaStyle},`)) { this.schemaStyle = 'tree'; }
     if (!this.theme || !'light, dark,'.includes(`${this.theme},`)) {
       this.theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark';
@@ -451,23 +469,14 @@ export default class RapiDoc extends LitElement {
     }
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
     if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'false'; }
-    const writeMethodsWithBody = ['post', 'put', 'patch'];
-    if (!this.schemaHideReadOnly) {
-      this.schemaHideReadOnly = writeMethodsWithBody;
-    } else if (this.schemaHideReadOnly !== 'never') {
-      this.schemaHideReadOnly = writeMethodsWithBody.filter((value) => this.schemaHideReadOnly.includes(value));
-      if (this.schemaHideReadOnly.length === 0) {
-        this.schemaHideReadOnly = writeMethodsWithBody;
-      }
-    }
-    this.schemaHideReadOnly += ['get', 'head', 'delete', 'options'];
-    this.schemaHideWriteOnly = this.schemaHideWriteOnly !== 'never';
+
+    if (!this.schemaHideReadOnly || !'default, never,'.includes(`${this.schemaHideReadOnly},`)) { this.schemaHideReadOnly = 'default'; }
+    if (!this.schemaHideWriteOnly || !'default, never,'.includes(`${this.schemaHideWriteOnly},`)) { this.schemaHideWriteOnly = 'default'; }
+
     if (!this.fillRequestFieldsWithExample || !'true, false,'.includes(`${this.fillRequestFieldsWithExample},`)) { this.fillRequestFieldsWithExample = 'true'; }
-    if (!this.useSummaryToListExamples || !'true, false,'.includes(`${this.useSummaryToListExamples},`)) { this.useSummaryToListExamples = 'false'; }
     if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }
-    if (!this.onNavTagClick || !'expand-collapse, show-description,'.includes(`${this.onNavTagClick},`)) { this.onNavTagClick = 'expand-collapse'; }
     if (!this.responseAreaHeight) {
-      this.responseAreaHeight = '300px';
+      this.responseAreaHeight = '400px';
     }
 
     if (!this.allowSearch || !'true, false,'.includes(`${this.allowSearch},`)) { this.allowSearch = 'true'; }
@@ -484,11 +493,14 @@ export default class RapiDoc extends LitElement {
     if (!this.sortTags || !'true, false,'.includes(`${this.sortTags},`)) { this.sortTags = 'false'; }
     if (!this.generateMissingTags || !'true, false,'.includes(`${this.generateMissingTags},`)) { this.generateMissingTags = 'false'; }
     if (!this.sortEndpointsBy || !'method, path, summary, none,'.includes(`${this.sortEndpointsBy},`)) { this.sortEndpointsBy = 'path'; }
+
+    if (!this.onNavTagClick || !'expand-collapse, show-description,'.includes(`${this.onNavTagClick},`)) { this.onNavTagClick = 'expand-collapse'; }
     if (!this.navItemSpacing || !'compact, relaxed, default,'.includes(`${this.navItemSpacing},`)) { this.navItemSpacing = 'default'; }
     if (!this.showMethodInNavBar || !'false, as-plain-text, as-colored-text, as-colored-block,'.includes(`${this.showMethodInNavBar},`)) { this.showMethodInNavBar = 'false'; }
     if (!this.usePathInNavBar || !'true, false,'.includes(`${this.usePathInNavBar},`)) { this.usePathInNavBar = 'false'; }
-    if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }
+    if (!this.navActiveItemMarker || !'left-bar, colored-block'.includes(`${this.navActiveItemMarker},`)) { this.navActiveItemMarker = 'left-bar'; }
 
+    if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }
     if (!this.showInfo || !'true, false,'.includes(`${this.showInfo},`)) { this.showInfo = 'true'; }
     if (!this.allowServerSelection || !'true, false,'.includes(`${this.allowServerSelection},`)) { this.allowServerSelection = 'true'; }
     if (!this.allowAuthentication || !'true, false,'.includes(`${this.allowAuthentication},`)) { this.allowAuthentication = 'true'; }
@@ -515,9 +527,7 @@ export default class RapiDoc extends LitElement {
     });
 
     window.addEventListener('hashchange', () => {
-      const regEx = new RegExp(`^${this.routePrefix}`, 'i');
-      const elementId = window.location.hash.replace(regEx, '');
-      this.scrollTo(elementId);
+      this.scrollToPath(this.getElementIDFromURL());
     }, true);
   }
 
@@ -561,7 +571,7 @@ export default class RapiDoc extends LitElement {
           await this.loadSpec(newVal);
           // If goto-path is provided and no location-hash is present then try to scroll there
           if (this.gotoPath && !window.location.hash) {
-            this.scrollTo(this.gotoPath);
+            this.scrollToPath(this.gotoPath);
           }
         }, 0);
       }
@@ -630,11 +640,11 @@ export default class RapiDoc extends LitElement {
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
-  onSepcUrlChange() {
+  onSpecUrlChange() {
     this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
   }
 
-  onSepcFileChange(e) {
+  onSpecFileChange(e) {
     this.setAttribute('spec-file', this.shadowRoot.getElementById('spec-file').value);
     const specFile = e.target.files[0];
     const reader = new FileReader();
@@ -763,20 +773,60 @@ export default class RapiDoc extends LitElement {
       this.observeExpandedContent(); // This will auto-highlight the selected nav-item in read-mode
     }
 
+    this.isIntersectionObserverActive = true;
+
     // On first time Spec load, try to navigate to location hash if provided
-    const locationHash = window.location.hash?.substring(1);
-    if (locationHash) {
-      const regEx = new RegExp(`^${this.routePrefix}`, 'i');
-      const elementId = window.location.hash.replace(regEx, '');
+    const elementId = this.getElementIDFromURL();
+
+    if (elementId) {
       if (this.renderStyle === 'view') {
         this.expandAndGotoOperation(elementId, true, true);
       } else {
-        this.scrollTo(elementId);
+        this.scrollToPath(elementId);
       }
     } else if (this.renderStyle === 'focused') {
-      const defaultElementId = this.showInfo ? 'overview' : this.resolvedSpec.tags[0]?.paths[0];
-      this.scrollTo(defaultElementId);
+      // If goto-path is provided and no location-hash is present then try to scroll to default element
+      if (!this.gotoPath) {
+        const defaultElementId = this.showInfo ? 'overview' : this.resolvedSpec.tags[0]?.paths[0];
+        this.scrollToPath(defaultElementId);
+      }
+    }
+  }
+
+  /**
+   * Return the URL from where is served the RapiDoc component, removing any hash and route prefix
+   */
+  getComponentBaseURL() {
+    const { href } = window.location;
+
+    // Remove end of string # or /
+    const cleanRouterPrefix = this.routePrefix.replace(/(#|\/)$/, '');
+
+    if (!cleanRouterPrefix) {
+      return href.split('#')[0];
     }
+
+    const indexOfRoutePrefix = href.lastIndexOf(cleanRouterPrefix);
+
+    if (indexOfRoutePrefix === -1) {
+      return href;
+    }
+
+    return href.slice(0, indexOfRoutePrefix);
+  }
+
+  /**
+   * From the URL return the ID of the element whether it is in the hash or if used a router prefix without a hash
+   */
+  getElementIDFromURL() {
+    const baseURL = this.getComponentBaseURL();
+    const elementId = window.location.href.replace(baseURL + this.routePrefix, '');
+    return elementId;
+  }
+
+  replaceHistoryState(hashId) {
+    const baseURL = this.getComponentBaseURL();
+    window.history.replaceState(null, null, `${baseURL}${this.routePrefix || '#'}${hashId}`);
   }
 
   expandAndGotoOperation(elementId, scrollToElement = true) {
@@ -812,7 +862,7 @@ export default class RapiDoc extends LitElement {
         if (gotoEl) {
           gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });
           if (this.updateRoute === 'true') {
-            window.history.replaceState(null, null, `${this.routePrefix || '#'}${tmpElementId}`);
+            this.replaceHistoryState(tmpElementId);
           }
         }
       }, isExpandingNeeded ? 150 : 0);
@@ -843,6 +893,7 @@ export default class RapiDoc extends LitElement {
     if (this.isIntersectionObserverActive === false) {
       return;
     }
+
     entries.forEach((entry) => {
       if (entry.isIntersecting && entry.intersectionRatio > 0) {
         const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active, .operations.active');
@@ -851,14 +902,18 @@ export default class RapiDoc extends LitElement {
         // Add active class in the new element
         if (newNavEl) {
           if (this.updateRoute === 'true') {
-            window.history.replaceState(null, null, `${window.location.href.split('#')[0]}${this.routePrefix || '#'}${entry.target.id}`);
+            this.replaceHistoryState(entry.target.id);
           }
           newNavEl.scrollIntoView({ behavior: 'auto', block: 'center' });
           newNavEl.classList.add('active');
+          newNavEl.part.add('section-navbar-active-item');
         }
+
         // Remove active class from previous element
-        if (oldNavEl) {
+        // if it is different from the new one (edge case on loading in read render style)
+        if (oldNavEl && oldNavEl !== newNavEl) {
           oldNavEl.classList.remove('active');
+          oldNavEl.part.remove('section-navbar-active-item');
         }
       }
     });
@@ -888,19 +943,28 @@ export default class RapiDoc extends LitElement {
    *
   */
   async scrollToEventTarget(event, scrollNavItemToView = true) {
-    const navEl = event.currentTarget;
+    if (!(event.type === 'click' || (event.type === 'keyup' && event.keyCode === 13))) {
+      return;
+    }
+    const navEl = event.target;
     if (!navEl.dataset.contentId) {
       return;
     }
     this.isIntersectionObserverActive = false;
-    this.scrollTo(navEl.dataset.contentId, true, scrollNavItemToView);
+    if (this.renderStyle === 'focused') {
+      const requestEl = this.shadowRoot.querySelector('api-request');
+      if (requestEl) {
+        requestEl.beforeNavigationFocusedMode();
+      }
+    }
+    this.scrollToPath(navEl.dataset.contentId, true, scrollNavItemToView);
     setTimeout(() => {
       this.isIntersectionObserverActive = true;
     }, 300);
   }
 
   // Public Method (scrolls to a given path and highlights the left-nav selection)
-  async scrollTo(elementId, expandPath = true, scrollNavItemToView = true) {
+  async scrollToPath(elementId, expandPath = true, scrollNavItemToView = true) {
     if (this.renderStyle === 'focused') {
       // for focused mode update this.focusedElementId to update the rendering, else it wont find the needed html elements
       // focusedElementId will get validated in the template
@@ -923,7 +987,7 @@ export default class RapiDoc extends LitElement {
         if (this.renderStyle === 'focused') {
           const requestEl = this.shadowRoot.querySelector('api-request');
           if (requestEl) {
-            requestEl.resetRequestBodySelection();
+            requestEl.afterNavigationFocusedMode();
           }
           const responseEl = this.shadowRoot.querySelector('api-response');
           if (responseEl) {
@@ -933,7 +997,7 @@ export default class RapiDoc extends LitElement {
 
         // Update Location Hash
         if (this.updateRoute === 'true') {
-          window.history.replaceState(null, null, `${this.routePrefix || '#'}${elementId}`);
+          this.replaceHistoryState(elementId);
         }
 
         // Update NavBar View and Styles
@@ -947,8 +1011,11 @@ export default class RapiDoc extends LitElement {
           const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active, .operations.active');
           if (oldNavEl) {
             oldNavEl.classList.remove('active');
+            oldNavEl.part.remove('active');
+            oldNavEl.part.remove('section-navbar-active-item');
           }
           newNavEl.classList.add('active'); // must add the class after scrolling
+          newNavEl.part.add('section-navbar-active-item');
           // this.requestUpdate();
         }
       }
@@ -987,8 +1054,8 @@ export default class RapiDoc extends LitElement {
       } else {
         searchInputEl = eventTargetEl.closest('.advanced-search-options').querySelector('input[type=text]');
       }
-      const searcOptions = [...eventTargetEl.closest('.advanced-search-options').querySelectorAll('input:checked')].map((v) => v.id);
-      this.advancedSearchMatches = advancedSearch(searchInputEl.value, this.resolvedSpec.tags, searcOptions);
+      const searchOptions = [...eventTargetEl.closest('.advanced-search-options').querySelectorAll('input:checked')].map((v) => v.id);
+      this.advancedSearchMatches = advancedSearch(searchInputEl.value, this.resolvedSpec.tags, searchOptions);
     }, delay);
   }
 }

package/src/styles/endpoint-styles.js

@@ -130,7 +130,7 @@ export default css`
   border: 2px solid var(--yellow); 
 }
 
-.req-resp-container{
+.req-resp-container {
   display: flex;
   margin-top:16px;
   align-items: stretch;

package/src/styles/font-styles.js

@@ -40,7 +40,7 @@ export default css`
   .blue-text {color: var(--blue)}
   .multiline {
     overflow: scroll;
-    max-height: var(--resp-area-height, 300px);
+    max-height: var(--resp-area-height, 400px);
     color: var(--fg3);  
   }
   .method-fg.put { color: var(--orange); }

package/src/styles/info-styles.js

@@ -2,7 +2,8 @@ import { css } from 'lit';
 
 export default css`
 #api-info {
-  font-size:calc(var(--font-size-regular) - 1px);margin-top:8px
+  font-size: calc(var(--font-size-regular) - 1px);
+  margin-top: 8px;
   margin-left: -15px;
 }
 

package/src/styles/input-styles.js

@@ -105,15 +105,6 @@ input[type="password"]::placeholder {
   opacity:1;
 }
 
-select:focus,
-textarea:focus,
-input[type="text"]:focus,
-input[type="password"]:focus,
-textarea:active,
-input[type="text"]:active,
-input[type="password"]:active {
-  border:1px solid var(--primary-color);
-}
 
 input[type="file"]{
   font-family: var(--font-regular);
@@ -167,10 +158,6 @@ textarea::-webkit-scrollbar-thumb {
   margin-bottom:2px;
 }
 
-input[type="checkbox"]:focus{
-  outline:0;
-}
-
 /* Toggle Body */
 input[type="checkbox"] {
   appearance: none;
@@ -203,7 +190,7 @@ input[type="checkbox"]:after {
 
 /* Toggle Body - Checked */
 input[type="checkbox"]:checked {
-  box-shadow: inset 0 0 0 13px var(--green);
+  background-color: var(--green);
   border-color: var(--green);
 }
 /* Toggle Thumb - Checked*/
@@ -212,5 +199,4 @@ input[type="checkbox"]:checked:after {
   left: 16px;
   right: 1px;
   transition: border .25s, left .15s .25s, right .25s .175s;
-}
-`;
+}`;

package/src/styles/nav-styles.js

@@ -1,6 +1,20 @@
 import { css } from 'lit';
 
 export default css`
+.nav-bar-info:focus-visible,
+.nav-bar-tag:focus-visible,
+.nav-bar-path:focus-visible {
+  outline: 1px solid;
+  box-shadow: none;
+  outline-offset: -4px;
+}
+.nav-bar-expand-all:focus-visible,
+.nav-bar-collapse-all:focus-visible,
+.nav-bar-tag-icon:focus-visible {
+  outline: 1px solid;
+  box-shadow: none;
+  outline-offset: 2px;
+}
 .nav-bar {
   width:0;
   height:100%;
@@ -35,6 +49,26 @@ export default css`
 .nav-bar.read .nav-bar-tag-icon {
   display:none;
 }
+.nav-bar-paths-under-tag {
+  overflow:hidden;
+  transition: max-height .2s ease-out, visibility .3s;
+}
+.collapsed .nav-bar-paths-under-tag {
+  visibility: hidden;
+}
+
+.nav-bar-expand-all {
+  transform: rotate(90deg); 
+  cursor:pointer; 
+  margin-right:10px;
+}
+.nav-bar-collapse-all {
+  transform: rotate(270deg); 
+  cursor:pointer;
+}
+.nav-bar-expand-all:hover, .nav-bar-collapse-all:hover {
+  color: var(--primary-color);
+}
 
 .nav-bar-tag-icon {
   color: var(--nav-text-color);
@@ -43,9 +77,6 @@ export default css`
 .nav-bar-tag-icon:hover {
   color:var(--nav-hover-text-color);
 }
-.nav-bar.focused .nav-bar-tag-and-paths.collapsed .nav-bar-paths-under-tag {
-  display:none;
-}
 .nav-bar.focused .nav-bar-tag-and-paths.collapsed .nav-bar-tag-icon::after {
   content: '⌵';
   width:16px;
@@ -89,7 +120,12 @@ export default css`
 .nav-bar-tag,
 .nav-bar-path {
   display:flex;
-  cursor:pointer;
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  border-radius:4px; 
+  color: var(--nav-text-color);
+  background: transparent;
   border-left:4px solid transparent;
 }
 
@@ -130,16 +166,27 @@ export default css`
 }
 .nav-bar-h2 {margin-left:12px;}
 
-.nav-bar-h1.active,
-.nav-bar-h2.active,
-.nav-bar-info.active,
-.nav-bar-tag.active,
-.nav-bar-path.active,
-.nav-bar-section.operations.active {
+.nav-bar-h1.left-bar.active,
+.nav-bar-h2.left-bar.active,
+.nav-bar-info.left-bar.active,
+.nav-bar-tag.left-bar.active,
+.nav-bar-path.left-bar.active,
+.nav-bar-section.left-bar.operations.active {
   border-left:4px solid var(--nav-accent-color);
   color:var(--nav-hover-text-color);
 }
 
+.nav-bar-h1.colored-block.active,
+.nav-bar-h2.colored-block.active,
+.nav-bar-info.colored-block.active,
+.nav-bar-tag.colored-block.active,
+.nav-bar-path.colored-block.active,
+.nav-bar-section.colored-block.operations.active {
+  background-color: var(--nav-accent-color);
+  color: var(--nav-accent-text-color);
+  border-radius: 0;
+}
+
 .nav-bar-h1:hover,
 .nav-bar-h2:hover,
 .nav-bar-info:hover,