Support css part for navbar-section-header. fix #227.

CHANGELOG.md

@@ -8,6 +8,7 @@ This package follows standard semvar, `<major>.<minor>.<build>`. No breaking cha
 * Hide security options display for endpoint when none is required.
 * Correctly display the schema title in the schema-tree.
 * Add links to component schema when clicked in bodies of objects.
+* Deprecate `navbar-operations-header` in favor of `navbar-section-header`. Will be removed in a future version.
 
 ## 2.0
 * `show-server-selection` has now be inverted to be `hide-server-selection` this brings it in line with how html boolean attributes are supposed to work. If you set this value to false previously, now you can hide the section using the new property.

docs/styling.md

@@ -64,7 +64,7 @@ There are many available `::part` selectors and many ways of styling based on pa
 Explorer location   | CSS ::part selector
 --------------------|--------------------
 Sections            | `section-navbar` `section-header` `section-main-content` `section-logo` `section-overview` `section-auth` `section-auth-scopes` `section-servers` `section-tag` `section-operations-in-tag` `section-operation`
-Navbar              | `navbar-scroll` `navbar-operations-header`
+Navbar              | `navbar-scroll` `navbar-section-header`
 Labels              | `label-header-title` `label-overview-title` `label-selected-server` `label-tag-title` `label-operations-method` `label-operation-path`
 Buttons             | `btn` `btn-fill` `btn-outline` `btn-search`
 Checkboxes/ Toggles | `checkbox` `checkbox-auth-scope`

src/templates/navbar-template.js

@@ -74,7 +74,7 @@ export default function navbarTemplate() {
       <slot name="nav-section" class="custom-nav-section" data-content-id='section' @click = '${(e) => this.scrollToCustomNavSectionTarget(e, false)}'></slot>
 
       <div class="sticky-scroll-element ${this.operationsCollapsed ? 'collapsed' : ''}" @click="${() => { expandCollapseAll.call(this); }}">
-        <div class='nav-bar-section' part="navbar-operations-header">
+        <div class='nav-bar-section' part="navbar-section-header navbar-operations-header">
           <slot name="operations-header">
             <div class='nav-bar-section-title'>${getI18nText('menu.operations')}</div>  
           </slot>
@@ -147,7 +147,7 @@ export default function navbarTemplate() {
       ${this.resolvedSpec.components?.length && !this.hideComponents
         ? html`
           <div class="sticky-scroll-element"">
-            <div id='link-components' class='nav-bar-section'>
+            <div id='link-components' class='nav-bar-section' part="navbar-section-header">
               <slot name="components-header">
                 <div class='nav-bar-section-title'>${getI18nText('menu.components')}</div>
               </slot>