@salesforcedevs/docs-components 1.18.6-dynamic-pg-border1 → 1.18.6-dynamic-pg-border2

package/package.json

@@ -1,15 +1,12 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.18.6-dynamic-pg-border1",
+    "version": "1.18.6-dynamic-pg-border2",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
     "engines": {
         "node": "20.x"
     },
-    "publishConfig": {
-        "access": "public"
-    },
     "dependencies": {
         "@api-components/amf-helper-mixin": "4.5.29",
         "classnames": "2.5.1",

package/src/modules/doc/contentMedia/contentMedia.css

@@ -29,7 +29,7 @@
 
 .content-media-iframe {
     position: relative;
-    padding-bottom: calc(var(--aspect-ratio, 0.5625) * 100%);
+    padding-bottom: calc(var(--aspect-ratio, 0.5626) * 100%);
     height: 0;
 }
 

package/src/modules/doc/lwcContentLayout/lwcContentLayout.css

@@ -1 +1,9 @@
 @import "docHelpers/contentLayoutStyle";
+
+.fixed-right-nav-bar {
+    width: 180px;
+}
+
+.content-body-no-rnb {
+    max-width: 1220px;
+}

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -19,7 +19,7 @@
             <slot name="doc-phase"></slot>
             <slot name="version-banner"></slot>
             <div class="content-body-container">
-                <div class="content-body">
+                <div class={contentBodyClasses}>
                     <doc-breadcrumbs
                         lwc:if={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
@@ -29,7 +29,7 @@
                         lwc:if={shouldDisplayFeedback}
                     ></doc-sprig-survey>
                 </div>
-                <div lwc:if={showToc} class="right-nav-bar is-sticky">
+                <div lwc:if={showToc} class={rightNavBarClasses}>
                     <dx-toc
                         header={tocTitle}
                         options={tocOptions}

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -1,4 +1,5 @@
 import ContentLayout from "doc/contentLayout";
+import cx from "classnames";
 
 const TOC_HEADER_TAG = "doc-heading";
 const RNB_BY_TAB = "docs-tab";
@@ -23,6 +24,18 @@ export default class LwcContentLayout extends ContentLayout {
         return this.rnbByTab;
     }
 
+    get rightNavBarClasses() {
+        return cx(
+            "right-nav-bar",
+            "is-sticky",
+            this.showTabBasedRNB && "fixed-right-nav-bar"
+        );
+    }
+
+    get contentBodyClasses() {
+        return cx("content-body", !this.showToc && "content-body-no-rnb");
+    }
+
     /**
      * Check if the main slot contains doc-specification-content
      * Uses caching to avoid repeated DOM queries

package/src/modules/doc/specificationContent/specificationContent.html

@@ -7,6 +7,11 @@
             if:true={isLoading}
         ></dx-spinner>
         <dx-error-fallback lwc:if={showError}></dx-error-fallback>
+        <dx-error-fallback
+            lwc:if={showNoSpecifications}
+            title="No specifications to show"
+            description="No specifications are available for this component or API module. When specifications are defined, they'll appear here."
+        ></dx-error-fallback>
         <template lwc:if={hasAttributes}>
             <doc-heading
                 header="Attributes"

package/src/modules/doc/specificationContent/specificationContent.ts

@@ -108,6 +108,17 @@ export default class SpecificationContent extends LightningElement {
         return this.events?.length > 0;
     }
 
+    get showNoSpecifications() {
+        return (
+            !this.showError &&
+            !this.isLoading &&
+            !this.hasAttributes &&
+            !this.hasMethods &&
+            !this.hasSlots &&
+            !this.hasEvents
+        );
+    }
+
     renderedCallback(): void {
         if (this.data) {
             this.debouncedNotifyDataRendered();

package/src/modules/docHelpers/amfStyle/amfStyle.css

@@ -174,8 +174,6 @@ api-security-documentation {
     --http-code-snippet-container-background-color: rgb(250 250 250);
     --http-code-snippet-container-padding: var(--dx-g-spacing-md);
 
-    /* prism */
-
     /* --code-operator-value-background-color */
 }
 

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -74,7 +74,7 @@ dx-toc {
 
 .content-body {
     margin: var(--dx-g-spacing-md) 0 0;
-    max-width: 900px;
+    max-width: 1000px;
     flex: 1;
     width: 0;
 }
@@ -116,6 +116,7 @@ dx-toc {
 
     .content-body-container {
         padding-right: 0;
+        padding-left: 0;
         overflow-x: auto;
         margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
     }