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

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

site/src/components/docs/api-reference/ApiCSSVarsTable.astro

@@ -0,0 +1,41 @@
+---
+/**
+ * Renders the CSS custom properties table for API reference.
+ */
+import Table from '@/components/typography/Table.astro';
+import Tbody from '@/components/typography/Tbody.astro';
+import Th from '@/components/typography/Th.astro';
+import Thead from '@/components/typography/Thead.astro';
+import Tr from '@/components/typography/Tr.astro';
+import type { CSSVarDef } from '@/types/component-reference';
+import CSSVarRow from './CSSVarRow.astro';
+
+interface Props {
+  cssCustomProperties: Record<string, CSSVarDef>;
+  componentName: string;
+}
+
+const { cssCustomProperties, componentName } = Astro.props;
+
+const vars = Object.entries(cssCustomProperties);
+---
+
+<Table maxWidth={false} outerClass="my-6">
+    <Thead>
+        <Tr>
+            <Th>Variable</Th>
+            <Th />
+        </Tr>
+    </Thead>
+    <Tbody>
+        {
+            vars.map(([name, def]) => (
+                <CSSVarRow
+                    name={name}
+                    description={def.description}
+                    componentName={componentName}
+                />
+            ))
+        }
+    </Tbody>
+</Table>

site/src/components/docs/api-reference/CSSVarRow.astro

@@ -0,0 +1,21 @@
+---
+import MarkdownCode from '@/components/typography/MarkdownCode.astro';
+import Td from '@/components/typography/Td.astro';
+import DetailRow from './DetailRow.astro';
+
+interface Props {
+  name: string;
+  description?: string;
+  componentName: string;
+}
+
+const { name, description, componentName } = Astro.props;
+
+const id = `${componentName}-css-var-${name}`;
+---
+
+<DetailRow id={id} name={name} type="" description={description} colspan={2}>
+    <Td class="align-top">
+        <MarkdownCode>{name}</MarkdownCode>
+    </Td>
+</DetailRow>

site/src/components/docs/api-reference/ComponentReference.astro

@@ -11,6 +11,7 @@ import type { ComponentReference } from '@/types/component-reference';
 import { isValidFramework } from '@/types/docs';
 import { createComponentReferenceModel } from '@/utils/componentReferenceModel';
 import FrameworkCase from '../FrameworkCase.astro';
+import ApiCSSVarsTable from './ApiCSSVarsTable.astro';
 import ApiDataAttrsTable from './ApiDataAttrsTable.astro';
 import ApiPropsTable from './ApiPropsTable.astro';
 import ApiStateTable from './ApiStateTable.astro';
@@ -42,6 +43,9 @@ const singleStateSection = !apiReferenceModel.hasParts
 const singleDataAttributesSection = !apiReferenceModel.hasParts
   ? apiReferenceModel.sections.find((section) => section.key === 'dataAttributes')
   : null;
+const singleCssCustomPropertiesSection = !apiReferenceModel.hasParts
+  ? apiReferenceModel.sections.find((section) => section.key === 'cssCustomProperties')
+  : null;
 ---
 
 <ContentWidth>
@@ -52,9 +56,10 @@ const singleDataAttributesSection = !apiReferenceModel.hasParts
       const partPropsSection = part.sections.find((section) => section.key === 'props');
       const partStateSection = part.sections.find((section) => section.key === 'state');
       const partDataAttributesSection = part.sections.find((section) => section.key === 'dataAttributes');
+      const partCssCustomPropertiesSection = part.sections.find((section) => section.key === 'cssCustomProperties');
 
       return (
-        <>
+        <FrameworkCase frameworks={part.frameworks}>
           <H3 id={part.id}>
             <FrameworkCase frameworks={["react"]}>{part.labelByFramework.react}</FrameworkCase>
             <FrameworkCase frameworks={["html"]}>{part.labelByFramework.html}</FrameworkCase>
@@ -95,7 +100,14 @@ const singleDataAttributesSection = !apiReferenceModel.hasParts
               <ApiDataAttrsTable dataAttributes={part.data.dataAttributes} componentName={part.componentName} />
             </>
           )}
-        </>
+
+          {partCssCustomPropertiesSection && (
+            <>
+              <H4 id={partCssCustomPropertiesSection.id}>{partCssCustomPropertiesSection.title}</H4>
+              <ApiCSSVarsTable cssCustomProperties={part.data.cssCustomProperties} componentName={part.componentName} />
+            </>
+          )}
+        </FrameworkCase>
       );
     })
   ) : (
@@ -131,6 +143,13 @@ const singleDataAttributesSection = !apiReferenceModel.hasParts
           <ApiDataAttrsTable dataAttributes={apiReferenceModel.data.dataAttributes} componentName={component} />
         </>
       )}
+
+      {singleCssCustomPropertiesSection && (
+        <>
+          <H3 id={singleCssCustomPropertiesSection.id}>{singleCssCustomPropertiesSection.title}</H3>
+          <ApiCSSVarsTable cssCustomProperties={apiReferenceModel.data.cssCustomProperties} componentName={component} />
+        </>
+      )}
     </>
   )}
 </ContentWidth>