lightview 2.1.0 → 2.2.2

package/docs/components/checkbox.html

@@ -485,7 +485,7 @@ const reactiveDemo = {
                         {
                             p: {
                                 style: 'font-size: 0.875rem; font-family: monospace;',
-                                text: () => `Notifications: ${notifications.value}, Marketing: ${marketing.value}`
+                                children: [() => `Notifications: ${notifications.value}, Marketing: ${marketing.value}`]
                             }
                         },
                         {
@@ -493,7 +493,7 @@ const reactiveDemo = {
                                 class: 'btn btn-primary',
                                 style: () => `margin-top: 0.5rem; ${termsAccepted.value ? '' : 'opacity: 0.5; pointer-events: none;'}`,
                                 disabled: () => !termsAccepted.value,
-                                text: 'Submit'
+                                children: ['Submit']
                             }
                         }
                     ]
@@ -604,36 +604,56 @@ $('#example').content(reactiveDemo);</code></pre>
                         </table>
                     </div>
 
-                    <!-- Colors Example -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Colors</h2>
-                    <div style="display: flex; gap: 0.5rem; margin-bottom: 2rem;">
-                        <input type="checkbox" class="checkbox" checked />
-                        <input type="checkbox" class="checkbox checkbox-primary" checked />
-                        <input type="checkbox" class="checkbox checkbox-secondary" checked />
-                        <input type="checkbox" class="checkbox checkbox-accent" checked />
-                        <input type="checkbox" class="checkbox checkbox-success" checked />
-                        <input type="checkbox" class="checkbox checkbox-warning" checked />
-                        <input type="checkbox" class="checkbox checkbox-info" checked />
-                        <input type="checkbox" class="checkbox checkbox-error" checked />
+                    <!-- Custom Element Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Checkbox Gallery</h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Live examples using <code>&lt;lv-checkbox&gt;</code> custom elements.
+                    </p>
+
+                    <script type="module" src="/components/data-input/checkbox.js"></script>
+
+                    <!-- Colors -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Colors</h3>
+                    <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;">
+                        <lv-checkbox label="Default" checked></lv-checkbox>
+                        <lv-checkbox label="Primary" color="primary" checked></lv-checkbox>
+                        <lv-checkbox label="Secondary" color="secondary" checked></lv-checkbox>
+                        <lv-checkbox label="Accent" color="accent" checked></lv-checkbox>
+                        <lv-checkbox label="Info" color="info" checked></lv-checkbox>
+                        <lv-checkbox label="Success" color="success" checked></lv-checkbox>
+                        <lv-checkbox label="Warning" color="warning" checked></lv-checkbox>
+                        <lv-checkbox label="Error" color="error" checked></lv-checkbox>
+                    </div>
+
+                    <!-- Sizes -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Sizes</h3>
+                    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem;">
+                        <lv-checkbox size="xs" label="Extra Small" checked></lv-checkbox>
+                        <lv-checkbox size="sm" label="Small" checked></lv-checkbox>
+                        <lv-checkbox size="md" label="Medium" checked></lv-checkbox>
+                        <lv-checkbox size="lg" label="Large" checked></lv-checkbox>
                     </div>
 
-                    <!-- Sizes Example -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sizes</h2>
-                    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;">
-                        <input type="checkbox" class="checkbox checkbox-xs" checked />
-                        <input type="checkbox" class="checkbox checkbox-sm" checked />
-                        <input type="checkbox" class="checkbox checkbox-md" checked />
-                        <input type="checkbox" class="checkbox checkbox-lg" checked />
+                    <!-- States -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">States</h3>
+                    <div
+                        style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; max-width: 20rem;">
+                        <lv-checkbox label="Disabled Unchecked" disabled></lv-checkbox>
+                        <lv-checkbox label="Disabled Checked" checked disabled></lv-checkbox>
+                        <lv-checkbox label="Required Field" required></lv-checkbox>
+                        <lv-checkbox label="Indeterminate" indeterminate="true"></lv-checkbox>
                     </div>
 
-                    <!-- With Label -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">With Label</h2>
-                    <div style="display: flex; flex-direction: column; width: 13rem; margin-bottom: 2rem;">
-                        <label
-                            style="display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 0.5rem 0;">
-                            <span style="font-size: 0.875rem;">Remember me</span>
-                            <input type="checkbox" class="checkbox checkbox-primary" />
-                        </label>
+                    <!-- Descriptions -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">With Descriptions</h3>
+                    <div
+                        style="display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; max-width: 28rem;">
+                        <lv-checkbox label="Email Notifications"
+                            description="Receive updates about your account activity." color="primary" checked>
+                        </lv-checkbox>
+                        <lv-checkbox label="Marketing" description="We'll send you occasional promotions and news."
+                            color="secondary">
+                        </lv-checkbox>
                     </div>
                 </div>
             </div>

package/docs/components/collapse.html

@@ -203,8 +203,8 @@ const demo = {
                 Collapse: {
                     icon: 'arrow',
                     children: [
-                        { 'Collapse.Title': { text: '📖 Description' } },
-                        { 'Collapse.Content': { children: [{ p: { text: 'This is a detailed product description that can be expanded.' } }] } }
+                        { 'Collapse.Title': { children: ['📖 Description'] } },
+                        { 'Collapse.Content': { children: [{ p: { children: ['This is a detailed product description that can be expanded.'] } }] } }
                     ]
                 }
             },
@@ -212,8 +212,8 @@ const demo = {
                 Collapse: {
                     icon: 'arrow',
                     children: [
-                        { 'Collapse.Title': { text: '📦 Shipping Info' } },
-                        { 'Collapse.Content': { children: [{ p: { text: 'Free shipping on orders over $50. Delivery in 3-5 days.' } }] } }
+                        { 'Collapse.Title': { children: ['📦 Shipping Info'] } },
+                        { 'Collapse.Content': { children: [{ p: { children: ['Free shipping on orders over $50. Delivery in 3-5 days.'] } }] } }
                     ]
                 }
             },
@@ -221,8 +221,8 @@ const demo = {
                 Collapse: {
                     icon: 'arrow',
                     children: [
-                        { 'Collapse.Title': { text: '🔄 Returns' } },
-                        { 'Collapse.Content': { children: [{ p: { text: '30-day return policy for unused items in original packaging.' } }] } }
+                        { 'Collapse.Title': { children: ['🔄 Returns'] } },
+                        { 'Collapse.Content': { children: [{ p: { children: ['30-day return policy for unused items in original packaging.'] } }] } }
                     ]
                 }
             }

package/docs/components/countdown.html

@@ -167,9 +167,9 @@ const display = {
         style: 'display: flex; gap: 1.25rem',
         children: [
             { Countdown: { value: 15, class: 'font-mono text-4xl' } },
-            { span: { class: 'text-4xl', text: ':' } },
+            { span: { class: 'text-4xl', children: [':'] } },
             { Countdown: { value: 30, class: 'font-mono text-4xl' } },
-            { span: { class: 'text-4xl', text: ':' } },
+            { span: { class: 'text-4xl', children: [':'] } },
             { Countdown: { value: 45, class: 'font-mono text-4xl' } }
         ]
     }
@@ -389,8 +389,8 @@ const demo = {
                 div: {
                     style: 'display: flex; gap: 0.5rem',
                     children: [
-                        { Button: { color: () => running.value ? 'error' : 'primary', onclick: toggle, text: () => running.value ? 'Pause' : 'Start' } },
-                        { Button: { onclick: reset, text: 'Reset' } }
+                        { Button: { color: () => running.value ? 'error' : 'primary', onclick: toggle, children: [() => running.value ? 'Pause' : 'Start'] } },
+                        { Button: { onclick: reset, children: ['Reset'] } }
                     ]
                 }
             }
@@ -432,26 +432,26 @@ $('#example').content(demo);</code></pre>
                         style="display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 1.25rem; text-align: center; margin-bottom: 2rem;">
                         <div style="display: flex; flex-direction: column; padding: 0.5rem;"
                             class="bg-neutral rounded-box text-neutral-content">
-                            <span class="countdown font-mono text-5xl"><span id="cd-days"
-                                    style="--value:15;"></span></span>
+                            <span class="countdown font-mono text-5xl" style="line-height: 1.2em; height: 1.2em;"><span
+                                    id="cd-days" style="--value:15; height: 1.2em;"></span></span>
                             days
                         </div>
                         <div style="display: flex; flex-direction: column; padding: 0.5rem;"
                             class="bg-neutral rounded-box text-neutral-content">
-                            <span class="countdown font-mono text-5xl"><span id="cd-hours"
-                                    style="--value:10;"></span></span>
+                            <span class="countdown font-mono text-5xl" style="line-height: 1.2em; height: 1.2em;"><span
+                                    id="cd-hours" style="--value:10; height: 1.2em;"></span></span>
                             hours
                         </div>
                         <div style="display: flex; flex-direction: column; padding: 0.5rem;"
                             class="bg-neutral rounded-box text-neutral-content">
-                            <span class="countdown font-mono text-5xl"><span id="cd-min"
-                                    style="--value:24;"></span></span>
+                            <span class="countdown font-mono text-5xl" style="line-height: 1.2em; height: 1.2em;"><span
+                                    id="cd-min" style="--value:24; height: 1.2em;"></span></span>
                             min
                         </div>
                         <div style="display: flex; flex-direction: column; padding: 0.5rem;"
                             class="bg-neutral rounded-box text-neutral-content">
-                            <span class="countdown font-mono text-5xl"><span id="cd-sec"
-                                    style="--value:59;"></span></span>
+                            <span class="countdown font-mono text-5xl" style="line-height: 1.2em; height: 1.2em;"><span
+                                    id="cd-sec" style="--value:59; height: 1.2em;"></span></span>
                             sec
                         </div>
                     </div>

package/docs/components/dropdown.html

@@ -357,7 +357,7 @@ const demo = {
         style: 'display: flex; gap: 1rem; align-items: center; height: 12rem;',
         children: [
             dropdown,
-            { span: { style: 'font-size: 0.875rem; opacity: 0.7;', text: () => `Selected: ${selected.value}` } }
+            { span: { style: 'font-size: 0.875rem; opacity: 0.7;', children: [() => `Selected: ${selected.value}`] } }
         ]
     }
 };

package/docs/components/file-input.html

@@ -414,20 +414,20 @@ const reactiveDemo = {
             () => {
                 const files = selectedFiles.value;
                 if (files.length === 0) {
-                    return { p: { class: 'text-sm opacity-50', text: 'No files selected' } };
+                    return { p: { class: 'text-sm opacity-50', children: ['No files selected'] } };
                 }
                 return {
                     div: {
                         children: [
-                            { p: { class: 'text-sm font-semibold mb-2', text: `${files.length} file(s) selected:` } },
+                            { p: { class: 'text-sm font-semibold mb-2', children: [`${files.length} file(s) selected:`] } },
                             {
                                 ul: {
                                     class: 'text-xs font-mono', style: 'display: flex; flex-direction: column; gap: 0.25rem',
                                     children: files.map(f => ({
                                         li: {
                                             children: [
-                                                { span: { class: 'text-primary', text: f.name } },
-                                                { span: { class: 'opacity-50', text: ` (${(f.size / 1024).toFixed(1)} KB)` } }
+                                                { span: { class: 'text-primary', children: [f.name] } },
+                                                { span: { class: 'opacity-50', children: [` (${(f.size / 1024).toFixed(1)} KB)`] } }
                                             ]
                                         }
                                     }))

package/docs/components/footer.html

@@ -203,29 +203,29 @@ const footer = {
             {
                 'Footer.Nav': {
                     children: [
-                        { 'Footer.Title': { text: 'Services' } },
-                        { a: { class: 'link link-hover', text: 'Branding' } },
-                        { a: { class: 'link link-hover', text: 'Design' } },
-                        { a: { class: 'link link-hover', text: 'Marketing' } }
+                        { 'Footer.Title': { children: ['Services'] } },
+                        { a: { class: 'link link-hover', children: ['Branding'] } },
+                        { a: { class: 'link link-hover', children: ['Design'] } },
+                        { a: { class: 'link link-hover', children: ['Marketing'] } }
                     ]
                 }
             },
             {
                 'Footer.Nav': {
                     children: [
-                        { 'Footer.Title': { text: 'Company' } },
-                        { a: { class: 'link link-hover', text: 'About us' } },
-                        { a: { class: 'link link-hover', text: 'Contact' } },
-                        { a: { class: 'link link-hover', text: 'Jobs' } }
+                        { 'Footer.Title': { children: ['Company'] } },
+                        { a: { class: 'link link-hover', children: ['About us'] } },
+                        { a: { class: 'link link-hover', children: ['Contact'] } },
+                        { a: { class: 'link link-hover', children: ['Jobs'] } }
                     ]
                 }
             },
             {
                 'Footer.Nav': {
                     children: [
-                        { 'Footer.Title': { text: 'Legal' } },
-                        { a: { class: 'link link-hover', text: 'Terms of use' } },
-                        { a: { class: 'link link-hover', text: 'Privacy policy' } }
+                        { 'Footer.Title': { children: ['Legal'] } },
+                        { a: { class: 'link link-hover', children: ['Terms of use'] } },
+                        { a: { class: 'link link-hover', children: ['Privacy policy'] } }
                     ]
                 }
             }

package/docs/components/input.html

@@ -602,41 +602,57 @@ $('#example').content(reactiveDemo);</code></pre>
                         </table>
                     </div>
 
-                    <!-- Sizes Example -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sizes</h2>
-                    <div style="display: flex; align-items: flex-end; gap: 0.5rem; margin-bottom: 2rem;">
-                        <input type="text" placeholder="Extra small" class="input input-xs" />
-                        <input type="text" placeholder="Small" class="input input-sm" />
-                        <input type="text" placeholder="Medium" class="input" />
-                        <input type="text" placeholder="Large" class="input input-lg" />
+                    <!-- Custom Element Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Input Gallery</h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Live examples using <code>&lt;lv-input&gt;</code> custom elements.
+                    </p>
+
+                    <script type="module" src="/components/data-input/input.js"></script>
+
+                    <!-- Sizes -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Sizes</h3>
+                    <div style="display: flex; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;">
+                        <lv-input size="xs" placeholder="Extra small"></lv-input>
+                        <lv-input size="sm" placeholder="Small"></lv-input>
+                        <lv-input placeholder="Medium (default)"></lv-input>
+                        <lv-input size="lg" placeholder="Large"></lv-input>
                     </div>
 
-                    <!-- Colors Example -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Colors</h2>
+                    <!-- Colors -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Colors</h3>
                     <div
                         style="display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 2rem;">
-                        <input type="text" placeholder="Primary" class="input input-primary" />
-                        <input type="text" placeholder="Secondary" class="input input-secondary" />
-                        <input type="text" placeholder="Accent" class="input input-accent" />
-                        <input type="text" placeholder="Info" class="input input-info" />
-                        <input type="text" placeholder="Success" class="input input-success" />
-                        <input type="text" placeholder="Warning" class="input input-warning" />
-                        <input type="text" placeholder="Error" class="input input-error" />
-                        <input type="text" placeholder="Ghost" class="input input-ghost" />
+                        <lv-input color="primary" placeholder="Primary"></lv-input>
+                        <lv-input color="secondary" placeholder="Secondary"></lv-input>
+                        <lv-input color="accent" placeholder="Accent"></lv-input>
+                        <lv-input color="info" placeholder="Info"></lv-input>
+                        <lv-input color="success" placeholder="Success"></lv-input>
+                        <lv-input color="warning" placeholder="Warning"></lv-input>
+                        <lv-input color="error" placeholder="Error"></lv-input>
+                        <lv-input ghost="true" placeholder="Ghost Style"></lv-input>
                     </div>
 
-                    <!-- With Fieldset -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">With Label (Fieldset Pattern)</h2>
-                    <div style="max-width: 28rem; margin-bottom: 2rem;">
-                        <fieldset
-                            style="display: flex; flex-direction: column; gap: 0.5rem; border: none; padding: 0.5rem 0;">
-                            <legend
-                                style="font-size: 0.875rem; font-weight: 700; color: oklch(var(--bc)/0.8); padding: 0 0.5rem;">
-                                Email Address</legend>
-                            <input type="email" class="input" style="width: 100%;" placeholder="you@example.com" />
-                            <p style="font-size: 0.875rem; color: oklch(var(--bc)/0.6); padding: 0 0.5rem;">We'll never
-                                share your email.</p>
-                        </fieldset>
+                    <!-- Labels and Helpers -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Labels & Assistance</h3>
+                    <div
+                        style="display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; max-width: 28rem;">
+                        <lv-input label="Email Address" type="email" placeholder="you@example.com"
+                            helper="We'll never share your email address.">
+                        </lv-input>
+                        <lv-input label="Password" type="password" placeholder="Enter your password" required="true">
+                        </lv-input>
+                        <lv-input label="Error State" placeholder="Invalid input"
+                            error="This field has an error message.">
+                        </lv-input>
+                    </div>
+
+                    <!-- States -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">States</h3>
+                    <div
+                        style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; max-width: 28rem;">
+                        <lv-input label="Disabled Input" value="Cannot edit this" disabled="true"></lv-input>
+                        <lv-input label="Read Only (via value)" value="Static text" disabled="true"></lv-input>
                     </div>
                 </div>
             </div>

package/docs/components/join.html

@@ -212,9 +212,9 @@ const demo = {
             {
                 Join: {
                     children: [
-                        { Button: { class: 'join-item', text: 'Previous' } },
-                        { Button: { class: 'join-item', color: 'primary', text: 'Current' } },
-                        { Button: { class: 'join-item', text: 'Next' } }
+                        { Button: { class: 'join-item', children: ['Previous'] } },
+                        { Button: { class: 'join-item', color: 'primary', children: ['Current'] } },
+                        { Button: { class: 'join-item', children: ['Next'] } }
                     ]
                 }
             },
@@ -229,7 +229,7 @@ const demo = {
                                 oninput: (e) => { email.value = e.target.value; }
                             }
                         },
-                        { Button: { class: 'join-item', color: 'primary', text: 'Subscribe' } }
+                        { Button: { class: 'join-item', color: 'primary', children: ['Subscribe'] } }
                     ]
                 }
             }

package/docs/components/kbd.html

@@ -204,19 +204,19 @@ const shortcuts = {
             {
                 div: {
                     style: 'display: flex; gap: 0.5rem; align-items: center',
-                    children: [{ span: { text: 'Save: ' } }, { Kbd: { text: '⌘' } }, { Kbd: { text: 'S' } }]
+                    children: [{ span: { children: ['Save: '] } }, { Kbd: { children: ['⌘'] } }, { Kbd: { children: ['S'] } }]
                 }
             },
             {
                 div: {
                     style: 'display: flex; gap: 0.5rem; align-items: center',
-                    children: [{ span: { text: 'Undo: ' } }, { Kbd: { text: '⌘' } }, { Kbd: { text: 'Z' } }]
+                    children: [{ span: { children: ['Undo: '] } }, { Kbd: { children: ['⌘'] } }, { Kbd: { children: ['Z'] } }]
                 }
             },
             {
                 div: {
                     style: 'display: flex; gap: 0.5rem; align-items: center',
-                    children: [{ span: { text: 'Copy: ' } }, { Kbd: { text: '⌘' } }, { Kbd: { text: 'C' } }]
+                    children: [{ span: { children: ['Copy: '] } }, { Kbd: { children: ['⌘'] } }, { Kbd: { children: ['C'] } }]
                 }
             }
         ]

package/docs/components/loading.html

@@ -276,7 +276,8 @@ $('#example').content(loaders);</code></pre>
                                         scripts: ['/lightview.js', '/lightview-x.js'],
                                         styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
                                         type: 'module',
-                                        minHeight: 80
+                                        minHeight: 80,
+                                        autoRun: true
                                     });
                                 </script><code contenteditable="true">await import('/components/data-display/loading.js');
 await import('/components/actions/button.js');
@@ -286,15 +287,6 @@ const { div, span, Loading, Button } = tags;
 
 const isLoading = signal(false);
 
-const handleClick = async () => {
-                                </script><code contenteditable="true">import { signal, tags, $ } from '/lightview.js';
-import { Loading } from '/components/data-display/loading.js';
-import { Button } from '/components/actions/button.js';
-
-const { div, span } = tags;
-
-const isLoading = signal(false);
-
 const handleClick = async () => {
     isLoading.value = true;
     await new Promise(r => setTimeout(r, 2000));
@@ -324,12 +316,13 @@ $('#example').content(demo);</code></pre>
                                         scripts: ['/lightview.js', '/lightview-x.js'],
                                         styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
                                         type: 'module',
-                                        minHeight: 80
+                                        minHeight: 80,
+                                        autoRun: true
                                     });
-                                </script><code contenteditable="true">import { signal, $, tags } from '/lightview.js';
-import { Loading } from '/components/data-display/loading.js';
-import { Button } from '/components/actions/button.js';
-const { div, span } = tags;
+                                </script><code contenteditable="true">await import('/components/data-display/loading.js');
+await import('/components/actions/button.js');
+const { signal, tags, $ } = Lightview;
+const { div, span, Loading, Button } = tags;
 
 const isLoading = signal(false);
 
@@ -343,23 +336,20 @@ const demo = {
     tag: div,
     attributes: { style: 'display: flex; gap: 1rem; align-items: center;' },
     children: [
-        {
-            observable: isLoading,
-            callback: (loading) => loading
-                ? {
-                    tag: Button,
-                    attributes: { color: 'primary', disabled: true },
-                    children: [
-                        { tag: Loading, attributes: { type: 'spinner', size: 'sm' } },
-                        { tag: span, children: [' Processing...'] }
-                    ]
-                }
-                : {
-                    tag: Button,
-                    attributes: { color: 'primary', onclick: handleClick },
-                    children: ['Submit']
-                }
-        },
+        () => isLoading.value
+            ? {
+                tag: Button,
+                attributes: { color: 'primary', disabled: true },
+                children: [
+                    { tag: Loading, attributes: { type: 'spinner', size: 'sm' } },
+                    { tag: span, children: [' Processing...'] }
+                ]
+            }
+            : {
+                tag: Button,
+                attributes: { color: 'primary', onclick: handleClick },
+                children: ['Submit']
+            },
         {
             tag: span,
             attributes: { style: 'font-size: 0.875rem; opacity: 0.7;' },
@@ -379,11 +369,12 @@ $('#example').content(demo);</code></pre>
                                         scripts: ['/lightview.js', '/lightview-x.js'],
                                         styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
                                         type: 'module',
-                                        minHeight: 80
+                                        minHeight: 80,
+                                        autoRun: true
                                     });
-                                </script><code contenteditable="true">import { signal, $ } from '/lightview.js';
-import { Loading } from '/components/data-display/loading.js';
-import { Button } from '/components/actions/button.js';
+                                </script><code contenteditable="true">await import('/components/data-display/loading.js');
+await import('/components/actions/button.js');
+const { signal, $ } = Lightview;
 
 const isLoading = signal(false);
 
@@ -397,27 +388,24 @@ const demo = {
     div: {
         style: 'display: flex; gap: 1rem; align-items: center',
         children: [
-            {
-                observable: isLoading,
-                callback: (loading) => loading
-                    ? {
-                        Button: {
-                            color: 'primary',
-                            disabled: true,
-                            children: [
-                                { Loading: { type: 'spinner', size: 'sm' } },
-                                { span: { text: ' Processing...' } }
-                            ]
-                        }
-                    }
-                    : {
-                        Button: { color: 'primary', onclick: handleClick, text: 'Submit' }
+            () => isLoading.value
+                ? {
+                    Button: {
+                        color: 'primary',
+                        disabled: true,
+                        children: [
+                            { Loading: { type: 'spinner', size: 'sm' } },
+                            { span: { children: [' Processing...'] } }
+                        ]
                     }
-            },
+                }
+                : {
+                    Button: { color: 'primary', onclick: handleClick, children: ['Submit'] }
+                },
             {
                 span: {
                     style: 'font-size: 0.875rem; opacity: 0.7;',
-                    text: () => isLoading.value ? 'Please wait...' : 'Click the button'
+                    children: [() => isLoading.value ? 'Please wait...' : 'Click the button']
                 }
             }
         ]

package/docs/components/pagination.html

@@ -214,20 +214,20 @@ const demo = {
             {
                 Join: {
                     children: [
-                        { Button: { class: 'join-item', onclick: () => { if (page.value > 1) page.value--; }, text: '«' } },
+                        { Button: { class: 'join-item', onclick: () => { if (page.value > 1) page.value--; }, children: ['«'] } },
                         ...Array.from({ length: totalPages }, (_, i) => ({
                             Button: {
                                 class: 'join-item',
                                 color: () => page.value === i + 1 ? 'primary' : undefined,
                                 onclick: () => { page.value = i + 1; },
-                                text: i + 1
+                                children: [i + 1]
                             }
                         })),
-                        { Button: { class: 'join-item', onclick: () => { if (page.value < totalPages) page.value++; }, text: '»' } }
+                        { Button: { class: 'join-item', onclick: () => { if (page.value < totalPages) page.value++; }, children: ['»'] } }
                     ]
                 }
             },
-            { span: { class: 'text-sm opacity-70', text: () => `Page ${page.value} of ${totalPages}` } }
+            { span: { class: 'text-sm opacity-70', children: [() => `Page ${page.value} of ${totalPages}`] } }
         ]
     }
 };

package/docs/components/progress.html

@@ -425,9 +425,11 @@ const demo = {
             {
                 p: {
                     style: 'font-family: monospace; font-size: 0.875rem;',
-                    text: () => progress.value >= 100
-                        ? '✓ Complete!'
-                        : `Downloading: ${Math.round(progress.value)}%`
+                    children: [
+                        () => progress.value >= 100
+                            ? '✓ Complete!'
+                            : `Downloading: ${Math.round(progress.value)}%`
+                    ]
                 }
             },
             {
@@ -436,7 +438,7 @@ const demo = {
                     size: 'sm',
                     disabled: () => isRunning.value,
                     onclick: startDownload,
-                    text: () => isRunning.value ? 'Downloading...' : 'Start Download'
+                    children: [() => isRunning.value ? 'Downloading...' : 'Start Download']
                 }
             }
         ]