Fix showcase API mismatches

- Select/Combobox: options → items
- Listbox: add missing items prop
- Slider: onChange → onValueChange
- TextField: validationState="invalid" → invalid (boolean)
- ToggleGroup: add required type="single"
- Pagination: rewrite with page/totalPages/onPageChange + children
- CommandPalette: wrap in Show instead of non-existent open prop
- Toggle/ToggleGroup.Item: data-[pressed] → data-[state=on]
- Tabs.Tab: data-[selected] → data-[state=active]
- Wizard.StepTrigger: data-[active/completed] → data-[state=active/completed]
- Listbox.Item: data-[selected] → aria-selected

packages/showcase/src/sections/inputs-basic.tsx

@@ -24,7 +24,7 @@ const TextFieldDemo = () => (
       <TextField.Input placeholder="Enter your name" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
       <TextField.Description class="text-xs text-gray-400">Your full name</TextField.Description>
     </TextField>
-    <TextField validationState="invalid" class="flex flex-col gap-1">
+    <TextField invalid class="flex flex-col gap-1">
       <TextField.Label class="text-sm font-medium text-red-600">Email</TextField.Label>
       <TextField.Input value="not-an-email" class="border border-red-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500" />
       <TextField.ErrorMessage class="text-xs text-red-500">Invalid email address</TextField.ErrorMessage>
@@ -77,7 +77,7 @@ const SwitchDemo = () => (
 
 /** Toggle demo with pressed/unpressed states. */
 const ToggleDemo = () => (
-  <Toggle class="px-3 py-1.5 text-sm border rounded transition-colors data-[pressed]:bg-indigo-100 data-[pressed]:text-indigo-700 data-[pressed]:border-indigo-300 border-gray-300 hover:bg-gray-50">
+  <Toggle class="px-3 py-1.5 text-sm border rounded transition-colors data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-700 data-[state=on]:border-indigo-300 border-gray-300 hover:bg-gray-50">
     Bold
   </Toggle>
 );

packages/showcase/src/sections/inputs-selection.tsx

@@ -31,10 +31,10 @@ function RadioGroupDemo() {
 /** ToggleGroup demo with single selection alignment. */
 function ToggleGroupDemo() {
   const content = (
-    <ToggleGroup defaultValue="center" class="flex gap-1">
+    <ToggleGroup type="single" defaultValue="center" class="flex gap-1">
-      <ToggleGroup.Item value="left" class="px-3 py-1.5 text-sm border rounded-l transition-colors data-[pressed]:bg-indigo-100 data-[pressed]:text-indigo-700 data-[pressed]:border-indigo-300 border-gray-300">Left</ToggleGroup.Item>
+      <ToggleGroup.Item value="left" class="px-3 py-1.5 text-sm border rounded-l transition-colors data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-700 data-[state=on]:border-indigo-300 border-gray-300">Left</ToggleGroup.Item>
-      <ToggleGroup.Item value="center" class="px-3 py-1.5 text-sm border-y transition-colors data-[pressed]:bg-indigo-100 data-[pressed]:text-indigo-700 data-[pressed]:border-indigo-300 border-gray-300">Center</ToggleGroup.Item>
+      <ToggleGroup.Item value="center" class="px-3 py-1.5 text-sm border-y transition-colors data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-700 data-[state=on]:border-indigo-300 border-gray-300">Center</ToggleGroup.Item>
-      <ToggleGroup.Item value="right" class="px-3 py-1.5 text-sm border rounded-r transition-colors data-[pressed]:bg-indigo-100 data-[pressed]:text-indigo-700 data-[pressed]:border-indigo-300 border-gray-300">Right</ToggleGroup.Item>
+      <ToggleGroup.Item value="right" class="px-3 py-1.5 text-sm border rounded-r transition-colors data-[state=on]:bg-indigo-100 data-[state=on]:text-indigo-700 data-[state=on]:border-indigo-300 border-gray-300">Right</ToggleGroup.Item>
     </ToggleGroup>
   );
   return content;
@@ -43,7 +43,7 @@ function ToggleGroupDemo() {
 /** Select demo with fruit dropdown. */
 function SelectDemo() {
   const content = (
-    <Select options={fruits} placeholder="Pick a fruit" class="relative w-48">
+    <Select items={fruits} class="relative w-48">
       <SelectTrigger class="w-full flex items-center justify-between border border-gray-300 rounded px-3 py-1.5 text-sm hover:bg-gray-50">
         <SelectValue class="text-gray-700" placeholder="Pick a fruit" />
         <span class="text-gray-400">▾</span>
@@ -63,7 +63,7 @@ function SelectDemo() {
 /** Combobox demo with searchable fruit list. */
 function ComboboxDemo() {
   const content = (
-    <Combobox options={fruits} placeholder="Search fruits..." class="relative w-48">
+    <Combobox items={fruits} class="relative w-48">
       <div class="flex items-center border border-gray-300 rounded">
         <ComboboxInput class="w-full px-3 py-1.5 text-sm rounded focus:outline-none" placeholder="Search fruits..." />
         <ComboboxTrigger class="px-2 text-gray-400">▾</ComboboxTrigger>
@@ -83,10 +83,10 @@ function ComboboxDemo() {
 /** Listbox demo with inline selectable items. */
 function ListboxDemo() {
   const content = (
-    <Listbox class="w-48 border border-gray-200 rounded overflow-hidden">
+    <Listbox items={fruits} class="w-48 border border-gray-200 rounded overflow-hidden">
       <For each={fruits}>
         {(fruit) => (
-          <Listbox.Item value={fruit} class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer data-[highlighted]:bg-indigo-50 data-[selected]:bg-indigo-100 data-[selected]:text-indigo-700">{fruit}</Listbox.Item>
+          <Listbox.Item value={fruit} class="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer data-[highlighted]:bg-indigo-50 aria-selected:bg-indigo-100 aria-selected:text-indigo-700">{fruit}</Listbox.Item>
         )}
       </For>
     </Listbox>
@@ -103,7 +103,7 @@ function SliderDemo() {
         <span>Volume</span>
         <span>{value()}%</span>
       </div>
-      <Slider value={value()} onChange={setValue} min={0} max={100} class="relative h-5 flex items-center">
+      <Slider value={value()} onValueChange={setValue} min={0} max={100} class="relative h-5 flex items-center">
         <Slider.Track class="h-1.5 w-full bg-gray-200 rounded-full relative">
           <Slider.Range class="absolute h-full bg-indigo-600 rounded-full" />
         </Slider.Track>

packages/showcase/src/sections/navigation.tsx

@@ -1,4 +1,4 @@
-import { For } from "solid-js";
+import { createSignal, For } from "solid-js";
 import { Link } from "pettyui/link";
 import { Breadcrumbs } from "pettyui/breadcrumbs";
 import { Tabs } from "pettyui/tabs";
@@ -46,9 +46,9 @@ function TabsDemo() {
   const content = (
     <Tabs defaultValue="tab-1" class="w-full">
       <Tabs.List class="flex border-b border-gray-200">
-        <Tabs.Tab value="tab-1" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[selected]:border-indigo-600 data-[selected]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Account</Tabs.Tab>
+        <Tabs.Tab value="tab-1" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Account</Tabs.Tab>
-        <Tabs.Tab value="tab-2" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[selected]:border-indigo-600 data-[selected]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Password</Tabs.Tab>
+        <Tabs.Tab value="tab-2" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Password</Tabs.Tab>
-        <Tabs.Tab value="tab-3" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[selected]:border-indigo-600 data-[selected]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Settings</Tabs.Tab>
+        <Tabs.Tab value="tab-3" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Settings</Tabs.Tab>
       </Tabs.List>
       <Tabs.Panel value="tab-1" class="p-4 text-sm text-gray-700">Account settings content</Tabs.Panel>
       <Tabs.Panel value="tab-2" class="p-4 text-sm text-gray-700">Password settings content</Tabs.Panel>
@@ -103,7 +103,14 @@ function CollapsibleDemo() {
 
 /** Pagination demo with page navigation. */
 function PaginationDemo() {
-  const content = <Pagination count={50} itemsPerPage={10} class="flex items-center gap-1" />;
+  const [page, setPage] = createSignal(1);
+  const content = (
+    <Pagination page={page()} totalPages={5} onPageChange={setPage} class="flex items-center gap-1">
+      <Pagination.Previous class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Prev</Pagination.Previous>
+      <Pagination.Items class="px-2 py-1 text-sm rounded cursor-pointer hover:bg-indigo-50 data-[current]:bg-indigo-600 data-[current]:text-white" />
+      <Pagination.Next class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Next</Pagination.Next>
+    </Pagination>
+  );
   return content;
 }
 
@@ -142,7 +149,7 @@ function WizardDemo() {
           {(label, i) => (
             <Wizard.Step index={i()}>
               <div class="flex items-center gap-2">
-                <Wizard.StepTrigger class="w-7 h-7 rounded-full border-2 flex items-center justify-center text-xs font-medium data-[active]:border-indigo-600 data-[active]:text-indigo-600 data-[completed]:bg-indigo-600 data-[completed]:text-white data-[completed]:border-indigo-600 border-gray-300 text-gray-400">
+                <Wizard.StepTrigger class="w-7 h-7 rounded-full border-2 flex items-center justify-center text-xs font-medium data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 data-[state=completed]:bg-indigo-600 data-[state=completed]:text-white data-[state=completed]:border-indigo-600 border-gray-300 text-gray-400">
                   {i() + 1}
                 </Wizard.StepTrigger>
                 <span class="text-sm text-gray-600">{label}</span>

packages/showcase/src/sections/overlays.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js";
+import { createSignal, Show } from "solid-js";
 import { Dialog } from "pettyui/dialog";
 import { AlertDialog } from "pettyui/alert-dialog";
 import { Drawer } from "pettyui/drawer";
@@ -155,8 +155,11 @@ function CommandPaletteDemo() {
   const [open, setOpen] = createSignal(false);
   const content = (
     <div>
-      <button type="button" class={triggerBtn} onClick={() => setOpen(true)}>Open Command Palette</button>
+      <button type="button" class={triggerBtn} onClick={() => setOpen((v) => !v)}>
-      <CommandPalette open={open()} onOpenChange={setOpen} class={`${modalPos} bg-white border border-gray-200 rounded-lg shadow-xl z-50`}>
+        {open() ? "Close" : "Open"} Command Palette
+      </button>
+      <Show when={open()}>
+        <CommandPalette class={`${modalPos} bg-white border border-gray-200 rounded-lg shadow-xl z-50`}>
           <CommandPalette.Input placeholder="Type a command..." class="w-full px-4 py-3 text-sm border-b border-gray-200 focus:outline-none" />
           <CommandPalette.List class="max-h-60 overflow-y-auto p-2">
             <CommandPalette.Group>
@@ -167,6 +170,7 @@ function CommandPaletteDemo() {
             <CommandPalette.Empty class="px-3 py-4 text-sm text-gray-400 text-center">No results found</CommandPalette.Empty>
           </CommandPalette.List>
         </CommandPalette>
+      </Show>
     </div>
   );
   return content;