@salesforcedevs/docs-components 1.27.16 → 1.27.18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.27.16",
+    "version": "1.27.18",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "92787faed8b31ef7128f8cee6421a06857def418"
+    "gitHead": "39f762aa6e34b9a3607c0f3ce4c1ad445c79c3bc"
 }

package/src/modules/doc/amfReference/amfReference.html

@@ -10,6 +10,7 @@
         onexpandcollapse={onExpandCollapse}
         toc-title={tocTitle}
         toc-options={tocOptions}
+        toc-aria-level={tocAriaLevel}
         enable-slot-change="true"
         languages={languages}
         language={language}

package/src/modules/doc/amfReference/amfReference.ts

@@ -44,6 +44,7 @@ export default class AmfReference extends LightningElement {
     @api sidebarHeader!: string;
     @api tocTitle?: string;
     @api tocOptions?: string;
+    @api tocAriaLevel?: string;
     @api languages!: OptionWithLink[];
     @api language!: string;
     @api hideFooter = false;

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -76,6 +76,12 @@ export default class ContentLayout extends LightningElement {
         this._tocOptions = toJson(value);
     }
 
+    /**
+     * The aria-level to filter headings by when building the TOC.
+     * Defaults to "2" (H2 headings).
+     */
+    @api tocAriaLevel: string = "2";
+
     @api
     setSidebarInputValue(searchTerm: string): void {
         (this.template.querySelector("dx-sidebar") as any)?.setInputValue(
@@ -393,19 +399,25 @@ export default class ContentLayout extends LightningElement {
     updateTocItems(headingElements: any): void {
         const tocOptions = [];
 
+        const maxLevel = Number.parseInt(this.tocAriaLevel, 10) || 2;
+        const minLevel = 2;
+
         for (const headingElement of headingElements as any) {
             headingElement.id = headingElement.hash;
 
-            // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
+            // Update tocOptions from anchorTags for aria-levels 2..tocAriaLevel (inclusive)
             const headingAriaLevel =
                 headingElement.attributes["aria-level"]?.nodeValue || "2";
-            const isH2 = headingAriaLevel === "2";
+            const headingLevel = Number.parseInt(headingAriaLevel, 10) || 2;
+            const matchesLevel =
+                headingLevel >= minLevel && headingLevel <= maxLevel;
 
-            if (isH2) {
+            if (matchesLevel) {
                 const tocItem = {
                     anchor: `#${headingElement.hash}`,
                     id: headingElement.id,
-                    label: headingElement.header
+                    label: headingElement.header,
+                    level: headingLevel
                 };
                 tocOptions.push(tocItem);
                 this.tocOptionIdsSet.add(headingElement.id);