docs: show HTML attribute name in API prop details (#817)

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

@@ -15,9 +15,10 @@ import PropRow from './PropRow.astro';
 interface Props {
   props: Record<string, PropDef>;
   componentName: string;
+  showAttributeName?: boolean;
 }
 
-const { props, componentName } = Astro.props;
+const { props, componentName, showAttributeName } = Astro.props;
 ---
 
 <Table maxWidth={false} outerClass="my-6">
@@ -39,6 +40,7 @@ const { props, componentName } = Astro.props;
           description={prop.description}
           defaultValue={prop.default}
           required={prop.required}
+          showAttributeName={showAttributeName}
           componentName={componentName}
         />
       ))

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

@@ -33,6 +33,7 @@ if (!apiRef) return;
 
 const apiReferenceModel = createComponentReferenceModel(component, apiRef);
 if (!apiReferenceModel) return;
+const showAttributeName = framework === 'html';
 
 const singlePropsSection = !apiReferenceModel.hasParts
   ? apiReferenceModel.sections.find((section) => section.key === 'props')
@@ -90,6 +91,7 @@ const singleCssCustomPropertiesSection = !apiReferenceModel.hasParts
                 <ApiPropsTable
                   props={part.data.props}
                   componentName={part.componentName}
+                  showAttributeName={showAttributeName}
                 />
               </>
             )}
@@ -149,6 +151,7 @@ const singleCssCustomPropertiesSection = !apiReferenceModel.hasParts
             <ApiPropsTable
               props={apiReferenceModel.data.props}
               componentName={component}
+              showAttributeName={showAttributeName}
             />
           </>
         )}

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

@@ -19,14 +19,15 @@ interface Props {
   id: string;
   name: string;
   type: string;
+  attributeName?: string;
   detailedType?: string;
   description?: string;
   colspan: number;
 }
 
-const { id, name, type, detailedType, description, colspan } = Astro.props;
+const { id, name, type, attributeName, detailedType, description, colspan } = Astro.props;
 
-const hasDetail = Boolean(detailedType || description);
+const hasDetail = Boolean(attributeName || detailedType || description);
 ---
 
 <Tr
@@ -68,6 +69,15 @@ const hasDetail = Boolean(detailedType || description);
             class="grid grid-cols-(--cols) gap-x-6 gap-y-3"
             style="--cols: auto 1fr"
           >
+            {attributeName && (
+              <>
+                <dt class="font-bold">Attribute</dt>
+                <dd>
+                  <MarkdownCode>{attributeName}</MarkdownCode>
+                </dd>
+              </>
+            )}
+
             {description && (
               <>
                 <dt class="font-bold">Description</dt>

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

@@ -1,4 +1,5 @@
 ---
+import { kebabCase } from 'es-toolkit/string';
 import MarkdownCode from '@/components/typography/MarkdownCode.astro';
 import Td from '@/components/typography/Td.astro';
 import DetailRow from './DetailRow.astro';
@@ -10,18 +11,21 @@ interface Props {
   description?: string;
   defaultValue?: string;
   required?: boolean;
+  showAttributeName?: boolean;
   componentName: string;
 }
 
-const { name, type, detailedType, description, defaultValue, required, componentName } = Astro.props;
+const { name, type, detailedType, description, defaultValue, required, showAttributeName, componentName } = Astro.props;
 
 const id = `${componentName}-${name}`;
+const attributeName = showAttributeName ? kebabCase(name) : undefined;
 ---
 
 <DetailRow
   id={id}
   name={name}
   type={type}
+  attributeName={attributeName}
   detailedType={detailedType}
   description={description}
   colspan={4}