Updateing Docs

docs/components/select.md

@@ -1,6 +1,6 @@
 # Select
 
-Dropdown select component with full DaisyUI styling, reactive options, and form integration.
+Dropdown select component with full DaisyUI styling, reactive items, and form integration.
 
 ## Tag
 
@@ -11,7 +11,7 @@ Dropdown select component with full DaisyUI styling, reactive options, and form
 | Prop         | Type                                    | Default             | Description                                      |
 | :----------- | :-------------------------------------- | :------------------ | :----------------------------------------------- |
 | `label`      | `string`                                | `-`                 | Label text above select                          |
-| `options`    | `Array<{value: string, label: string}>` | `[]`                | Array of options with value and label            |
+| `items`    | `Array<{value: string, label: string}>` | `[]`                | Array of items with value and label            |
 | `value`      | `string \| Signal<string>`              | `''`                | Selected value                                   |
 | `class`      | `string`                                | `''`                | Additional CSS classes (DaisyUI + Tailwind)      |
 | `disabled`   | `boolean \| Signal<boolean>`            | `false`             | Disabled state                                   |
@@ -34,7 +34,7 @@ const BasicDemo = () => {
   
   return Select({
     label: 'Choose a fruit',
-    options: [
+    items: [
       { value: 'apple', label: '🍎 Apple' },
       { value: 'banana', label: '🍌 Banana' },
       { value: 'orange', label: '🍊 Orange' },
@@ -59,11 +59,10 @@ $mount(BasicDemo, '#demo-basic');
 ```javascript
 const ReactiveDemo = () => {
   const selected = $('small');
-  
   return Div({ class: 'flex flex-col gap-4 w-full' }, [
     Select({
       label: 'Select size',
-      options: [
+      items: [
         { value: 'small', label: 'Small' },
         { value: 'medium', label: 'Medium' },
         { value: 'large', label: 'Large' }
@@ -72,7 +71,7 @@ const ReactiveDemo = () => {
       onchange: (e) => selected(e.target.value)
     }),
     Div({ class: 'alert alert-info' }, [
-      `You selected: ${selected()}`
+      () => `You selected: ${selected()}`
     ])
   ]);
 };
@@ -92,7 +91,7 @@ $mount(ReactiveDemo, '#demo-reactive');
 const DisabledDemo = () => {
   return Select({
     label: 'Country (disabled)',
-    options: [
+    items: [
       { value: 'mx', label: 'Mexico' },
       { value: 'us', label: 'United States' },
       { value: 'ca', label: 'Canada' }
@@ -104,7 +103,7 @@ const DisabledDemo = () => {
 $mount(DisabledDemo, '#demo-disabled');
 ```
 
-### Dynamic Options
+### Dynamic items
 
 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
   <div class="card-body">
@@ -117,7 +116,7 @@ $mount(DisabledDemo, '#demo-disabled');
 const DynamicDemo = () => {
   const category = $('fruits');
   
-  const options = {
+  const items = {
     fruits: [
       { value: 'apple', label: '🍎 Apple' },
       { value: 'banana', label: '🍌 Banana' }
@@ -131,7 +130,7 @@ const DynamicDemo = () => {
   return Div({ class: 'flex flex-col gap-4 w-full' }, [
     Select({
       label: 'Category',
-      options: [
+      items: [
         { value: 'fruits', label: 'Fruits' },
         { value: 'vegetables', label: 'Vegetables' }
       ],
@@ -140,7 +139,7 @@ const DynamicDemo = () => {
     }),
     Select({
       label: 'Item',
-      options: () => options[category()] || [],
+      items: () => items[category()] || [],
       value: $(''),
       onchange: (e) => console.log('Selected:', e.target.value)
     })
@@ -168,7 +167,7 @@ const VariantsDemo = () => {
     Select({
       label: 'Primary Select',
       class: 'select-primary',
-      options: [
+      items: [
         { value: 'option1', label: 'Option 1' },
         { value: 'option2', label: 'Option 2' },
         { value: 'option3', label: 'Option 3' }
@@ -179,7 +178,7 @@ const VariantsDemo = () => {
     Select({
       label: 'Secondary Select',
       class: 'select-secondary',
-      options: [
+      items: [
         { value: 'option1', label: 'Option 1' },
         { value: 'option2', label: 'Option 2' }
       ],
@@ -189,7 +188,7 @@ const VariantsDemo = () => {
     Select({
       label: 'Ghost Select',
       class: 'select-ghost',
-      options: [
+      items: [
         { value: '', label: 'Select an option' },
         { value: 'opt1', label: 'Option 1' },
         { value: 'opt2', label: 'Option 2' }
@@ -214,7 +213,7 @@ $mount(VariantsDemo, '#demo-variants');
           
           return Select({
             label: 'Choose a fruit',
-            options: [
+            items: [
               { value: 'apple', label: '🍎 Apple' },
               { value: 'banana', label: '🍌 Banana' },
               { value: 'orange', label: '🍊 Orange' },
@@ -236,7 +235,7 @@ $mount(VariantsDemo, '#demo-variants');
           return Div({ class: 'flex flex-col gap-4 w-full' }, [
             Select({
               label: 'Select size',
-              options: [
+              items: [
                 { value: 'small', label: 'Small' },
                 { value: 'medium', label: 'Medium' },
                 { value: 'large', label: 'Large' }
@@ -258,7 +257,7 @@ $mount(VariantsDemo, '#demo-variants');
         const DisabledDemo = () => {
           return Select({
             label: 'Country (disabled)',
-            options: [
+            items: [
               { value: 'mx', label: 'Mexico' },
               { value: 'us', label: 'United States' },
               { value: 'ca', label: 'Canada' }
@@ -270,13 +269,13 @@ $mount(VariantsDemo, '#demo-variants');
         $mount(DisabledDemo, disabledTarget);
       }
 
-      // 4. Dynamic Options
+      // 4. Dynamic items
       const dynamicTarget = document.querySelector('#demo-dynamic');
       if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
         const DynamicDemo = () => {
           const category = $('fruits');
           
-          const options = {
+          const items = {
             fruits: [
               { value: 'apple', label: '🍎 Apple' },
               { value: 'banana', label: '🍌 Banana' }
@@ -290,7 +289,7 @@ $mount(VariantsDemo, '#demo-variants');
           return Div({ class: 'flex flex-col gap-4 w-full' }, [
             Select({
               label: 'Category',
-              options: [
+              items: [
                 { value: 'fruits', label: 'Fruits' },
                 { value: 'vegetables', label: 'Vegetables' }
               ],
@@ -299,7 +298,7 @@ $mount(VariantsDemo, '#demo-variants');
             }),
             Select({
               label: 'Item',
-              options: () => options[category()] || [],
+              items: () => items[category()] || [],
               value: $(''),
               onchange: (e) => console.log('Selected:', e.target.value)
             })
@@ -320,7 +319,7 @@ $mount(VariantsDemo, '#demo-variants');
             Select({
               label: 'Primary Select',
               class: 'select-primary',
-              options: [
+              items: [
                 { value: 'option1', label: 'Option 1' },
                 { value: 'option2', label: 'Option 2' },
                 { value: 'option3', label: 'Option 3' }
@@ -331,7 +330,7 @@ $mount(VariantsDemo, '#demo-variants');
             Select({
               label: 'Secondary Select',
               class: 'select-secondary',
-              options: [
+              items: [
                 { value: 'option1', label: 'Option 1' },
                 { value: 'option2', label: 'Option 2' }
               ],
@@ -341,7 +340,7 @@ $mount(VariantsDemo, '#demo-variants');
             Select({
               label: 'Ghost Select',
               class: 'select-ghost',
-              options: [
+              items: [
                 { value: '', label: 'Select an option' },
                 { value: 'opt1', label: 'Option 1' },
                 { value: 'opt2', label: 'Option 2' }