lightview 2.0.9 → 2.2.1

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/component-nav.html

@@ -20,7 +20,7 @@
             'Divider', 'Dock', 'Drawer', 'Dropdown', 'File Input', 'Footer', 'Hero',
             'Indicator', 'Input', 'Join', 'Kbd', 'Loading', 'Menu', 'Modal', 'Navbar',
             'Pagination', 'Progress', 'Radial Progress', 'Radio', 'Range', 'Rating',
-            'Select', 'Skeleton', 'Stats', 'Steps', 'Swap', 'Table', 'Tabs', 'Textarea',
+            'Select', 'Stats', 'Steps', 'Swap', 'Table', 'Tabs', 'Textarea',
             'Timeline', 'Toast', 'Toggle', 'Tooltip'
         ].sort(); // Sort alphabetically
 

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/divider.html

@@ -71,7 +71,7 @@
                             <!-- Tabs -->
                             <script>
                                 globalThis.switchSyntaxTab = (tabId) => {
-                                    const tabs = ['tagged', 'vdom', 'object'];
+                                    const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
                                         const contentEl = document.getElementById(`syntax-${t}`);
@@ -93,6 +93,8 @@
                                 <button id="tab-btn-object" role="tab" class="syntax-tab"
                                     onclick="switchSyntaxTab('object')">Object
                                     DOM</button>
+                                <button id="tab-btn-html" role="tab" class="syntax-tab"
+                                    onclick="switchSyntaxTab('html')">HTML</button>
                             </div>
 
                             <!-- Tagged Syntax -->
@@ -167,17 +169,39 @@ const demo = {
     div: {
         class: 'flex flex-col w-full',
         children: [
-            { div: { class: 'card bg-base-300 p-4 rounded-box', text: 'Content above' } },
-            { Divider: { text: 'OR' } },
-            { div: { class: 'card bg-base-300 p-4 rounded-box', text: 'Content below' } },
-            { Divider: { color: 'primary', text: 'Primary' } },
-            { div: { class: 'card bg-base-300 p-4 rounded-box', text: 'More content' } }
+            { div: { class: 'card bg-base-300 p-4 rounded-box', children: ['Content above'] } },
+            { Divider: { children: ['OR'] } },
+            { div: { class: 'card bg-base-300 p-4 rounded-box', children: ['Content below'] } },
+            { Divider: { color: 'primary', children: ['Primary'] } },
+            { div: { class: 'card bg-base-300 p-4 rounded-box', children: ['More content'] } }
         ]
     }
 };
 
 $('#example').content(demo);</code></pre>
                             </div>
+
+                            <!-- HTML Syntax -->
+                            <div id="syntax-html" style="display: none;">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                                        type: 'module',
+                                        language: 'html',
+                                        minHeight: 240
+                                    });
+                                </script><code contenteditable="true" class="language-html">&lt;script type="module" src="/components/layout/divider.js"&gt;&lt;/script&gt;
+
+&lt;div class="flex flex-col w-full"&gt;
+    &lt;div class="card bg-base-300 p-4 rounded-box"&gt;Content above&lt;/div&gt;
+    &lt;lv-divider&gt;OR&lt;/lv-divider&gt;
+    &lt;div class="card bg-base-300 p-4 rounded-box"&gt;Content below&lt;/div&gt;
+    &lt;lv-divider color="primary"&gt;Primary&lt;/lv-divider&gt;
+    &lt;div class="card bg-base-300 p-4 rounded-box"&gt;More content&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                            </div>
                         </div>
                     </div>
 
@@ -210,29 +234,49 @@ $('#example').content(demo);</code></pre>
                         </table>
                     </div>
 
-                    <!-- Static Examples -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Without Text</h2>
+                    <!-- Divider Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Divider Gallery</h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Live examples using <code>&lt;lv-divider&gt;</code> custom elements.
+                    </p>
+
+                    <script type="module" src="/components/layout/divider.js"></script>
+
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Basic Divider</h3>
                     <div style="display: flex; width: 100%; flex-direction: column; margin-bottom: 2rem;">
                         <div class="card bg-base-300 rounded-box p-4">Content</div>
-                        <div class="divider"></div>
+                        <lv-divider></lv-divider>
                         <div class="card bg-base-300 rounded-box p-4">Content</div>
                     </div>
 
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Vertical</h2>
-                    <div style="display: flex; width: 100%; margin-bottom: 2rem;">
-                        <div class="card bg-base-300 rounded-box p-4 flex-grow">Left</div>
-                        <div class="divider divider-horizontal">OR</div>
-                        <div class="card bg-base-300 rounded-box p-4 flex-grow">Right</div>
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">With Text</h3>
+                    <div style="display: flex; width: 100%; flex-direction: column; margin-bottom: 2rem;">
+                        <div class="card bg-base-300 rounded-box p-4">Login</div>
+                        <lv-divider>OR</lv-divider>
+                        <div class="card bg-base-300 rounded-box p-4">Sign Up</div>
+                    </div>
+
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Horizontal (Manual)</h3>
+                    <div style="display: flex; width: 100%; margin-bottom: 2rem; height: 100px;">
+                        <div class="card bg-base-300 rounded-box p-4 flex-grow place-items-center">Left</div>
+                        <lv-divider horizontal>OR</lv-divider>
+                        <div class="card bg-base-300 rounded-box p-4 flex-grow place-items-center">Right</div>
+                    </div>
+
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Colors</h3>
+                    <div style="display: flex; width: 100%; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem;">
+                        <lv-divider color="primary">Primary</lv-divider>
+                        <lv-divider color="secondary">Secondary</lv-divider>
+                        <lv-divider color="accent">Accent</lv-divider>
+                        <lv-divider color="success">Success</lv-divider>
+                        <lv-divider color="warning">Warning</lv-divider>
+                        <lv-divider color="error">Error</lv-divider>
                     </div>
 
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Colors</h2>
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Text Position</h3>
                     <div style="display: flex; width: 100%; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem;">
-                        <div class="divider divider-primary">Primary</div>
-                        <div class="divider divider-secondary">Secondary</div>
-                        <div class="divider divider-accent">Accent</div>
-                        <div class="divider divider-success">Success</div>
-                        <div class="divider divider-warning">Warning</div>
-                        <div class="divider divider-error">Error</div>
+                        <lv-divider position="start">Start</lv-divider>
+                        <lv-divider position="end">End</lv-divider>
                     </div>
                 </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/indicator.html

@@ -71,7 +71,7 @@
                             <!-- Tabs -->
                             <script>
                                 globalThis.switchSyntaxTab = (tabId) => {
-                                    const tabs = ['tagged', 'vdom', 'object'];
+                                    const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
                                         const contentEl = document.getElementById(`syntax-${t}`);
@@ -93,6 +93,8 @@
                                 <button id="tab-btn-object" role="tab" class="syntax-tab"
                                     onclick="switchSyntaxTab('object')">Object
                                     DOM</button>
+                                <button id="tab-btn-html" role="tab" class="syntax-tab"
+                                    onclick="switchSyntaxTab('html')">HTML</button>
                             </div>
 
                             <!-- Tagged Syntax -->
@@ -228,13 +230,13 @@ const demo = {
                     children: [
                         {
                             'Indicator.Item': {
-                                children: [{ Badge: { color: 'primary', text: () => count.value } }]
+                                children: [{ Badge: { color: 'primary', children: [() => count.value] } }]
                             }
                         },
                         {
                             Button: {
                                 onclick: () => { count.value++; },
-                                text: 'Messages'
+                                children: ['Messages']
                             }
                         }
                     ]
@@ -271,6 +273,38 @@ const demo = {
 
 $('#example').content(demo);</code></pre>
                             </div>
+
+                            <!-- HTML Syntax -->
+                            <div id="syntax-html" style="display: none;">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                                        type: 'module',
+                                        language: 'html',
+                                        minHeight: 100
+                                    });
+                                </script><code contenteditable="true" class="language-html">&lt;script type="module" src="/components/layout/indicator.js"&gt;&lt;/script&gt;
+&lt;script type="module" src="/components/data-display/badge.js"&gt;&lt;/script&gt;
+&lt;script type="module" src="/components/actions/button.js"&gt;&lt;/script&gt;
+
+&lt;div style="display: flex; gap: 2rem"&gt;
+    &lt;lv-indicator&gt;
+        &lt;item class="badge badge-primary"&gt;3&lt;/item&gt;
+        &lt;lv-button&gt;Messages&lt;/lv-button&gt;
+    &lt;/lv-indicator&gt;
+
+    &lt;lv-indicator&gt;
+        &lt;item position="bottom-end" class="badge badge-success badge-xs"&gt;&lt;/item&gt;
+        &lt;div class="avatar"&gt;
+            &lt;div class="w-12 rounded-full"&gt;
+                &lt;img src="https://i.pravatar.cc/100?img=5" /&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/lv-indicator&gt;
+&lt;/div&gt;</code></pre>
+                            </div>
                         </div>
                     </div>
 
@@ -299,42 +333,62 @@ $('#example').content(demo);</code></pre>
                         </table>
                     </div>
 
-                    <!-- Positions -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Positions</h2>
-                    <div class="example-flex" style="margin-bottom: 2rem;">
-                        <div class="indicator">
-                            <span
-                                class="indicator-item indicator-top indicator-start badge badge-secondary">top-start</span>
+                    <!-- Indicator Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Indicator Gallery</h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Live examples using <code>&lt;lv-indicator&gt;</code> custom elements.
+                    </p>
+
+                    <script type="module" src="/components/layout/indicator.js"></script>
+                    <script type="module" src="/components/data-display/badge.js"></script>
+
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Top Positions</h3>
+                    <div style="display: flex; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap;">
+                        <lv-indicator>
+                            <item position="top-start" class="badge badge-secondary">top-start</item>
                             <div class="bg-base-300 p-6 rounded-box">content</div>
-                        </div>
-                        <div class="indicator">
-                            <span
-                                class="indicator-item indicator-top indicator-center badge badge-secondary">top-center</span>
+                        </lv-indicator>
+                        <lv-indicator>
+                            <item position="top-center" class="badge badge-secondary">top-center</item>
                             <div class="bg-base-300 p-6 rounded-box">content</div>
-                        </div>
-                        <div class="indicator">
-                            <span
-                                class="indicator-item indicator-top indicator-end badge badge-secondary">top-end</span>
+                        </lv-indicator>
+                        <lv-indicator>
+                            <item position="top-end" class="badge badge-secondary">top-end</item>
                             <div class="bg-base-300 p-6 rounded-box">content</div>
-                        </div>
+                        </lv-indicator>
                     </div>
 
-                    <div class="example-flex" style="margin-bottom: 2rem;">
-                        <div class="indicator">
-                            <span
-                                class="indicator-item indicator-bottom indicator-start badge badge-secondary">bottom-start</span>
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Bottom Positions</h3>
+                    <div style="display: flex; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap;">
+                        <lv-indicator>
+                            <item position="bottom-start" class="badge badge-secondary">bottom-start</item>
                             <div class="bg-base-300 p-6 rounded-box">content</div>
-                        </div>
-                        <div class="indicator">
-                            <span
-                                class="indicator-item indicator-bottom indicator-center badge badge-secondary">bottom-center</span>
+                        </lv-indicator>
+                        <lv-indicator>
+                            <item position="bottom-center" class="badge badge-secondary">bottom-center</item>
                             <div class="bg-base-300 p-6 rounded-box">content</div>
-                        </div>
-                        <div class="indicator">
-                            <span
-                                class="indicator-item indicator-bottom indicator-end badge badge-secondary">bottom-end</span>
+                        </lv-indicator>
+                        <lv-indicator>
+                            <item position="bottom-end" class="badge badge-secondary">bottom-end</item>
                             <div class="bg-base-300 p-6 rounded-box">content</div>
-                        </div>
+                        </lv-indicator>
+                    </div>
+
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Common Use Cases</h3>
+                    <div style="display: flex; gap: 3rem; margin-bottom: 2rem; align-items: center;">
+                        <lv-indicator>
+                            <item class="badge badge-primary">99+</item>
+                            <lv-button>Inbox</lv-button>
+                        </lv-indicator>
+
+                        <lv-indicator>
+                            <item position="bottom-end" class="badge badge-success badge-xs"></item>
+                            <div class="avatar">
+                                <div class="w-12 rounded-full">
+                                    <img src="https://i.pravatar.cc/100?img=8" />
+                                </div>
+                            </div>
+                        </lv-indicator>
                     </div>
                 </div>
             </div>