feat(site): add TimeSlider, VolumeSlider, Popover API references (#685)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

site/src/utils/componentReferenceModel.js

@@ -29,6 +29,12 @@ const API_REFERENCE_SUBSECTIONS = Object.freeze([
     singleId: 'data-attributes',
     suffix: 'data-attributes',
   },
+  {
+    key: 'cssCustomProperties',
+    title: 'CSS custom properties',
+    singleId: 'css-custom-properties',
+    suffix: 'css-custom-properties',
+  },
 ]);
 
 export const API_REFERENCE_SUBSECTION_TITLES = Object.freeze(API_REFERENCE_SUBSECTIONS.map((section) => section.title));
@@ -93,6 +99,7 @@ export function createComponentReferenceModel(componentName, apiReference) {
         react: part.name,
         html: part.platforms?.html?.tagName ?? part.name,
       },
+      frameworks: [...(part.platforms?.html ? ['html'] : []), ...(part.platforms?.react ? ['react'] : [])],
       sections: createSections(part, { forPart: true, partId }),
       data: part,
     }));
@@ -146,18 +153,23 @@ export function buildComponentReferenceTocHeadings(apiReferenceModel) {
 
   if (apiReferenceModel.hasParts) {
     for (const part of apiReferenceModel.parts) {
-      headings.push({
-        depth: 3,
-        text: part.labelByFramework.react,
-        slug: part.id,
-        frameworks: ['react'],
-      });
-      headings.push({
-        depth: 3,
-        text: part.labelByFramework.html,
-        slug: part.id,
-        frameworks: ['html'],
-      });
+      // Only emit headings for frameworks the part supports
+      if (part.frameworks.includes('react')) {
+        headings.push({
+          depth: 3,
+          text: part.labelByFramework.react,
+          slug: part.id,
+          frameworks: ['react'],
+        });
+      }
+      if (part.frameworks.includes('html')) {
+        headings.push({
+          depth: 3,
+          text: part.labelByFramework.html,
+          slug: part.id,
+          frameworks: ['html'],
+        });
+      }
 
       for (const section of part.sections) {
         headings.push({
@@ -165,6 +177,7 @@ export function buildComponentReferenceTocHeadings(apiReferenceModel) {
           text: section.title,
           slug: section.id,
           tocKind: section.tocKind,
+          ...(part.frameworks.length < 2 ? { frameworks: part.frameworks } : {}),
         });
       }
     }

site/src/utils/tests/componentReferenceModel.test.ts

@@ -51,6 +51,7 @@ describe('createComponentReferenceModel', () => {
       props: {},
       state: {},
       dataAttributes: {},
+      cssCustomProperties: {},
       platforms: {},
       parts: {
         root: {
@@ -67,10 +68,12 @@ describe('createComponentReferenceModel', () => {
               description: 'Visible',
             },
           },
+          cssCustomProperties: {},
           platforms: {
             html: {
               tagName: 'media-controls',
             },
+            react: {},
           },
         },
         group: {
@@ -78,7 +81,10 @@ describe('createComponentReferenceModel', () => {
           props: {},
           state: {},
           dataAttributes: {},
-          platforms: {},
+          cssCustomProperties: {},
+          platforms: {
+            react: {},
+          },
         },
       },
     };
@@ -99,6 +105,7 @@ describe('createComponentReferenceModel', () => {
             react: 'Root',
             html: 'media-controls',
           },
+          frameworks: ['html', 'react'],
           componentName: 'Controls.Root',
           sections: [
             {
@@ -123,6 +130,7 @@ describe('createComponentReferenceModel', () => {
             react: 'Group',
             html: 'Group',
           },
+          frameworks: ['react'],
           componentName: 'Controls.Group',
           sections: [],
         },
@@ -138,6 +146,7 @@ describe('buildComponentReferenceTocHeadings', () => {
       props: {},
       state: {},
       dataAttributes: {},
+      cssCustomProperties: {},
       platforms: {},
       parts: {
         root: {
@@ -153,10 +162,12 @@ describe('buildComponentReferenceTocHeadings', () => {
               description: 'Visible',
             },
           },
+          cssCustomProperties: {},
           platforms: {
             html: {
               tagName: 'media-controls',
             },
+            react: {},
           },
         },
       },
@@ -197,4 +208,53 @@ describe('buildComponentReferenceTocHeadings', () => {
       },
     ]);
   });
+
+  it('filters part headings by framework and adds frameworks to single-platform subsections', () => {
+    const apiReference = {
+      name: 'Popover',
+      props: {},
+      state: {},
+      dataAttributes: {},
+      cssCustomProperties: {},
+      platforms: {},
+      parts: {
+        trigger: {
+          name: 'Trigger',
+          props: {
+            onClick: { type: '() => void' },
+          },
+          state: {},
+          dataAttributes: {},
+          cssCustomProperties: {},
+          platforms: {
+            react: {},
+          },
+        },
+      },
+    };
+
+    const model = createComponentReferenceModel('Popover', apiReference);
+    const headings = buildComponentReferenceTocHeadings(model);
+
+    expect(headings).toEqual([
+      {
+        depth: 2,
+        text: 'API Reference',
+        slug: 'api-reference',
+      },
+      {
+        depth: 3,
+        text: 'Trigger',
+        slug: 'trigger',
+        frameworks: ['react'],
+      },
+      {
+        depth: 4,
+        text: 'Props',
+        slug: 'trigger-props',
+        tocKind: 'api-reference-subsection',
+        frameworks: ['react'],
+      },
+    ]);
+  });
 });