fix: listbox doc styles fixes

Author: tugcekucukoglu

apps/showcase/assets/menu/submenu/menu-headless.data.ts

@@ -151,10 +151,10 @@ export const headlessMenu = [
                 name: 'usePanel',
                 href: '/docs/headless/panel'
             },
-            {
-                name: 'useScrollArea',
-                href: '/docs/headless/scrollarea'
-            },
+            // {
+            //     name: 'useScrollArea',
+            //     href: '/docs/headless/scrollarea'
+            // },
             {
                 name: 'useSplitter',
                 href: '/docs/headless/splitter'
@@ -226,10 +226,10 @@ export const headlessMenu = [
     {
         name: 'Utilities',
         children: [
-            // {
-            //     name: 'useFocusTrap',
-            //     href: '/docs/headless/focustrap'
-            // },
+            {
+                name: 'useFocusTrap',
+                href: '/docs/headless/focustrap'
+            },
             {
                 name: 'useMotion',
                 href: '/docs/headless/motion'

apps/showcase/assets/menu/submenu/menu-primitives.data.ts

@@ -151,10 +151,10 @@ export const primitivesMenu = [
                 name: 'Panel',
                 href: '/docs/primitives/panel'
             },
-            {
-                name: 'ScrollArea',
-                href: '/docs/primitives/scrollarea'
-            },
+            // {
+            //     name: 'ScrollArea',
+            //     href: '/docs/primitives/scrollarea'
+            // },
             {
                 name: 'Splitter',
                 href: '/docs/primitives/splitter'
@@ -226,26 +226,26 @@ export const primitivesMenu = [
     {
         name: 'Utilities',
         children: [
-            // {
-            //     name: 'Backdrop',
-            //     href: '/docs/primitives/backdrop'
-            // },
-            // {
-            //     name: 'FocusTrap',
-            //     href: '/docs/primitives/focustrap'
-            // },
+            {
+                name: 'Backdrop',
+                href: '/docs/primitives/backdrop'
+            },
+            {
+                name: 'FocusTrap',
+                href: '/docs/primitives/focustrap'
+            },
             {
                 name: 'Motion',
                 href: '/docs/primitives/motion'
             },
             {
                 name: 'Portal',
                 href: '/docs/primitives/portal'
+            },
+            {
+                name: 'VisuallyHidden',
+                href: '/docs/primitives/visuallyhidden'
             }
-            // {
-            //     name: 'VisuallyHidden',
-            //     href: '/docs/primitives/visuallyhidden'
-            // }
         ]
     }
 ];

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

@@ -33,16 +33,16 @@ export default function BasicDemo() {
                 <span {...firstHiddenProps} tabIndex={0} style={visuallyHiddenStyle} />
                 <ul {...listProps} className="list-none m-0 p-1 outline-none">
                     {getOptions().map((option, index) => {
-                        const { optionProps, state } = useListboxOption({ option, index, context: listbox });
+                        const { optionProps, optionIndicatorProps } = useListboxOption({ option, index, context: listbox });
 
                         return (
                             <li
                                 key={index}
                                 {...optionProps}
-                                className={`flex items-center gap-2 px-3 py-2 rounded-md cursor-pointer select-none text-sm transition-colors ${state.selected ? 'bg-surface-100 dark:bg-surface-800 text-primary' : 'text-surface-700 dark:text-surface-0 hover:bg-surface-50 dark:hover:bg-surface-800'} ${state.focused ? 'outline-1 outline-primary -outline-offset-1' : 'outline-none'} ${state.disabled ? 'pointer-events-none opacity-60' : ''}`}
+                                className="flex items-center gap-2 px-3 py-2 my-0.5 rounded-md cursor-pointer select-none text-sm transition-colors text-surface-700 dark:text-surface-0 hover:bg-surface-50 dark:hover:bg-surface-800 outline-none aria-selected:bg-surface-100 aria-selected:dark:bg-surface-800 aria-selected:text-primary data-[focused]:bg-surface-100 data-[focused]:dark:bg-surface-800 data-[disabled]:pointer-events-none data-[disabled]:opacity-60"
                             >
-                                <span className="flex items-center justify-center w-4 h-4">
-                                    {state.selected && <Check className="w-3.5 h-3.5" />}
+                                <span {...optionIndicatorProps} className="flex items-center justify-center w-4 h-4 data-[unselected]:invisible">
+                                    <Check className="w-3.5 h-3.5" />
                                 </span>
                                 <span>{getOptionLabel(option)}</span>
                             </li>

apps/showcase/demo/primitives/listbox/basic-demo.module.css

@@ -23,6 +23,7 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 0.75rem;
+    margin-block: 0.25rem;
     border-radius: 0.375rem;
     cursor: pointer;
     user-select: none;
@@ -41,8 +42,7 @@
 }
 
 .option[data-focused] {
-    outline: 1px solid var(--p-primary-color);
-    outline-offset: -1px;
+    background-color: light-dark(var(--p-surface-100), var(--p-surface-800));
 }
 
 .option[data-disabled] {