From d8ac5e4cb6b45b90e6bcf33358375483c3876694 Mon Sep 17 00:00:00 2001
From: Mats Bosson <mats.bosson@gmail.com>
Date: Mon, 30 Mar 2026 04:03:37 +0700
Subject: [PATCH] =?UTF-8?q?Fix=20showcase=20API=20mismatches=20-=20Select/?=
 =?UTF-8?q?Combobox:=20options=20=E2=86=92=20items=20-=20Listbox:=20add=20?=
 =?UTF-8?q?missing=20items=20prop=20-=20Slider:=20onChange=20=E2=86=92=20o?=
 =?UTF-8?q?nValueChange=20-=20TextField:=20validationState=3D"invalid"=20?=
 =?UTF-8?q?=E2=86=92=20invalid=20(boolean)=20-=20ToggleGroup:=20add=20requ?=
 =?UTF-8?q?ired=20type=3D"single"=20-=20Pagination:=20rewrite=20with=20pag?=
 =?UTF-8?q?e/totalPages/onPageChange=20+=20children=20-=20CommandPalette:?=
 =?UTF-8?q?=20wrap=20in=20Show=20instead=20of=20non-existent=20open=20prop?=
 =?UTF-8?q?=20-=20Toggle/ToggleGroup.Item:=20data-[pressed]=20=E2=86=92=20?=
 =?UTF-8?q?data-[state=3Don]=20-=20Tabs.Tab:=20data-[selected]=20=E2=86=92?=
 =?UTF-8?q?=20data-[state=3Dactive]=20-=20Wizard.StepTrigger:=20data-[acti?=
 =?UTF-8?q?ve/completed]=20=E2=86=92=20data-[state=3Dactive/completed]=20-?=
 =?UTF-8?q?=20Listbox.Item:=20data-[selected]=20=E2=86=92=20aria-selected?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../showcase/src/sections/inputs-basic.tsx    |  4 +--
 .../src/sections/inputs-selection.tsx         | 18 +++++------
 packages/showcase/src/sections/navigation.tsx | 19 ++++++++----
 packages/showcase/src/sections/overlays.tsx   | 30 +++++++++++--------
 4 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/packages/showcase/src/sections/inputs-basic.tsx b/packages/showcase/src/sections/inputs-basic.tsx
index 8bbe323..f1c925b 100644
--- a/packages/showcase/src/sections/inputs-basic.tsx
+++ b/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>
 );
diff --git a/packages/showcase/src/sections/inputs-selection.tsx b/packages/showcase/src/sections/inputs-selection.tsx
index 78b2460..4a3f88e 100644
--- a/packages/showcase/src/sections/inputs-selection.tsx
+++ b/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.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="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="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 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-[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-[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-[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>
diff --git a/packages/showcase/src/sections/navigation.tsx b/packages/showcase/src/sections/navigation.tsx
index 8ff34a3..53870e4 100644
--- a/packages/showcase/src/sections/navigation.tsx
+++ b/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-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-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-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-[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-[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>
diff --git a/packages/showcase/src/sections/overlays.tsx b/packages/showcase/src/sections/overlays.tsx
index 16a7479..3c146fe 100644
--- a/packages/showcase/src/sections/overlays.tsx
+++ b/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,18 +155,22 @@ function CommandPaletteDemo() {
   const [open, setOpen] = createSignal(false);
   const content = (
     <div>
-      <button type="button" class={triggerBtn} onClick={() => setOpen(true)}>Open Command Palette</button>
-      <CommandPalette open={open()} onOpenChange={setOpen} 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>
-            <CommandPalette.Item value="new-file" class="px-3 py-1.5 text-sm rounded hover:bg-indigo-50 cursor-pointer">New File</CommandPalette.Item>
-            <CommandPalette.Item value="open-file" class="px-3 py-1.5 text-sm rounded hover:bg-indigo-50 cursor-pointer">Open File</CommandPalette.Item>
-            <CommandPalette.Item value="save" class="px-3 py-1.5 text-sm rounded hover:bg-indigo-50 cursor-pointer">Save</CommandPalette.Item>
-          </CommandPalette.Group>
-          <CommandPalette.Empty class="px-3 py-4 text-sm text-gray-400 text-center">No results found</CommandPalette.Empty>
-        </CommandPalette.List>
-      </CommandPalette>
+      <button type="button" class={triggerBtn} onClick={() => setOpen((v) => !v)}>
+        {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>
+              <CommandPalette.Item value="new-file" class="px-3 py-1.5 text-sm rounded hover:bg-indigo-50 cursor-pointer">New File</CommandPalette.Item>
+              <CommandPalette.Item value="open-file" class="px-3 py-1.5 text-sm rounded hover:bg-indigo-50 cursor-pointer">Open File</CommandPalette.Item>
+              <CommandPalette.Item value="save" class="px-3 py-1.5 text-sm rounded hover:bg-indigo-50 cursor-pointer">Save</CommandPalette.Item>
+            </CommandPalette.Group>
+            <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;