fix: new docs fixes

Author: tugcekucukoglu

apps/showcase/demo/headless/accordion/basic-demo.tsx

@@ -18,11 +18,11 @@ export default function BasicDemo() {
     return (
         <div {...accordion.rootProps} className="max-w-md mx-auto">
             {items.map(({ panel, title, content }) => (
-                <div key={title} {...panel.panelProps} className="border-b border-gray-200 dark:border-gray-700">
+                <div key={title} {...panel.panelProps} className="border-b border-surface-200 dark:border-surface-700">
                     <div {...panel.headerProps}>
                         <button
                             {...panel.triggerProps}
-                            className="flex items-center justify-between w-full py-3 px-4 text-left cursor-pointer hover:bg-gray-50 transition focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary"
+                            className="flex items-center justify-between w-full py-3 px-4 text-left cursor-pointer text-muted-color hover:text-color transition focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary"
                         >
                             <span>{title}</span>
                             <span
@@ -35,7 +35,7 @@ export default function BasicDemo() {
                         </button>
                     </div>
                     {panel.state.open && (
-                        <div {...panel.contentProps} className="px-4 pb-3 text-gray-600 dark:text-gray-300 text-sm">
+                        <div {...panel.contentProps} className="px-4 pb-3 text-surface-600 dark:text-surface-300 text-sm">
                             {content}
                         </div>
                     )}

apps/showcase/docs/headless/accordion/features.mdx

@@ -26,7 +26,7 @@ const { panelProps, headerProps, triggerProps, contentProps, indicatorProps, sta
                 <span {...indicatorProps} />
             </button>
         </div>
-        {state.open && <div {...contentProps}>...</div>}
+        {state.open && <div {...contentProps}></div>}
     </div>
 </div>;
 ```

apps/showcase/docs/headless/autocomplete/features.mdx

@@ -16,7 +16,7 @@ const { rootProps, inputProps, triggerProps, listProps, positionerProps, popupPr
 
 <div {...rootProps}>
     <input {...inputProps} />
-    <button {...triggerProps}>Toggle</button>
+    <button {...triggerProps}></button>
     <div {...positionerProps}>
         <div {...popupProps}>
             <ul {...listProps}>...</ul>

apps/showcase/docs/headless/avatar/features.mdx

@@ -19,7 +19,7 @@ React.useEffect(() => {
     return () => handleImageUnload();
 }, []);
 
-<div {...rootProps}>{state.load ? <img src="..." /> : <span>AB</span>}</div>;
+<div {...rootProps}>{state.load ? <img src="..." /> : <span></span>}</div>;
 ```
 
 `useAvatar` manages the image loading lifecycle while `useAvatarGroup` provides root props for grouping — see [Primitives](/docs/primitives/avatar) for a component-based API.

apps/showcase/docs/headless/badge/features.mdx

@@ -13,7 +13,7 @@ import { useBadge } from '@primereact/headless/badge';
 
 const { rootProps } = useBadge();
 
-<span {...rootProps}>4</span>;
+<span {...rootProps}></span>;
 ```
 
 `useBadge` returns spread-ready `rootProps` with data attributes for styling — see [Primitives](/docs/primitives/badge) for a component-based API.

apps/showcase/docs/headless/button/features.mdx

@@ -13,7 +13,7 @@ import { useButton } from '@primereact/headless/button';
 
 const { rootProps } = useButton();
 
-<button {...rootProps}>Submit</button>;
+<button {...rootProps}></button>;
 ```
 
 `useButton` returns spread-ready `rootProps` with data attributes for styling — see [Primitives](/docs/primitives/button) for a component-based API.

apps/showcase/docs/headless/card/features.mdx

@@ -14,8 +14,8 @@ import { useCard } from '@primereact/headless/card';
 const { rootProps } = useCard();
 
 <div {...rootProps}>
-    <div>Title</div>
-    <p>Content goes here.</p>
+    <div></div>
+    <p></p>
 </div>;
 ```
 

apps/showcase/docs/headless/checkbox/features.mdx

@@ -17,7 +17,7 @@ const { rootProps, inputProps, boxProps, indicatorProps, state } = useCheckbox({
 
 <div {...rootProps}>
     <input {...inputProps} className="sr-only" />
-    <div {...boxProps}>{state.checked && <span {...indicatorProps}>✓</span>}</div>
+    <div {...boxProps}>{state.checked && <span {...indicatorProps}></span>}</div>
 </div>;
 ```
 

apps/showcase/docs/headless/chip/features.mdx

@@ -16,8 +16,8 @@ const { rootProps, removeProps, state, close } = useChip({ onRemove: (e) => {} }
 {
     state.visible && (
         <div {...rootProps}>
-            <span>Label</span>
-            <span {...removeProps}>x</span>
+            <span></span>
+            <span {...removeProps}></span>
         </div>
     );
 }

apps/showcase/docs/headless/commandmenu/features.mdx

@@ -23,7 +23,7 @@ const commandmenu = useCommandMenu({
     <input {...commandmenu.inputProps} />
     <ul {...commandmenu.listProps}>
         {commandmenu.filteredOptions.map((item, index) => (
-            <li {...commandmenu.getItemProps(item, index)}>...</li>
+            <li {...commandmenu.getItemProps(item, index)}></li>
         ))}
     </ul>
 </div>;