Merge branch 'deiteris-stage' into develop

Author: jarrodek

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-body-document",
   "description": "A component to render HTTP method body documentation based on AMF model",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

package.json

@@ -559,7 +559,7 @@ export class ApiBodyDocumentElement extends AmfHelperMixin(LitElement) {
       title="Toggle body details"
       ?data-opened="${opened}"
     >
-      <div class="table-title" role="heading" aria-level="${headerLevel}">Body</div>
+      <div class="heading3" role="heading" aria-level="${headerLevel}">Body</div>
       <div class="title-area-actions">
         <anypoint-button
           class="toggle-button"

src/ApiBodyDocumentElement.js

@@ -16,25 +16,16 @@ export default css`
   display: flex;
   flex-direction: row;
   align-items: center;
+  border-bottom: 1px var(--api-body-document-title-border-color, var(--api-parameters-document-title-border-color, #e5e5e5)) solid;
   cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
-  border-bottom: 1px var(--api-body-document-title-border-color, #e5e5e5) solid;
   transition: border-bottom-color 0.15s ease-in-out;
 }
 
 .section-title-area[data-opened] {
   border-bottom-color: transparent;
 }
 
-.section-title-area .table-title {
-  flex: 1;
-  flex-basis: 0.000000001px;
-  font-size: var(--api-body-document-title-narrow-font-size, initial);
-}
-
 .toggle-button {
   outline: none;
 }
@@ -49,14 +40,16 @@ export default css`
   transform: rotateZ(-180deg);
 }
 
-.table-title {
+.heading3 {
+  flex: 1;
+  color: var(--arc-font-subhead-color);
   font-size: var(--arc-font-subhead-font-size);
   font-weight: var(--arc-font-subhead-font-weight);
   line-height: var(--arc-font-subhead-line-height);
 }
 
-:host([narrow]) .table-title {
-  font-size: var(--api-body-document-title-narrow-font-size, initial);
+:host([narrow]) .heading3 {
+  font-size: var(--api-body-document-title-narrow-font-size, var(--arc-font-subhead-narrow-font-size, 17px));
 }
 
 .type-title {

src/Styles.js

@@ -228,8 +228,8 @@ describe('ApiBodyDocumentElement', () => {
         });
 
         it('Narrow style is applied to the URI title', () => {
-          element.style.setProperty('--api-body-document-title-narrow-font-size', '16px');
-          const title = element.shadowRoot.querySelector('.table-title');
+          element.style.setProperty('--arc-font-subhead-narrow-font-size', '16px');
+          const title = element.shadowRoot.querySelector('.heading3');
           const { fontSize } = getComputedStyle(title);
           assert.equal(fontSize, '16px');
         });