lightview 2.0.9 → 2.2.1

package/docs/components/alert.html

@@ -192,10 +192,10 @@ const alerts = {
     div: {
         style: 'display: flex; flex-direction: column; gap: 1rem;',
         children: [
-            { Alert: { color: 'info', icon: 'info', children: [{ span: { text: 'New update available! Click to learn more.' } }] } },
-            { Alert: { color: 'success', icon: 'success', children: [{ span: { text: 'Your order has been placed successfully!' } }] } },
-            { Alert: { color: 'warning', icon: 'warning', children: [{ span: { text: 'Please review your information before proceeding.' } }] } },
-            { Alert: { color: 'error', icon: 'error', children: [{ span: { text: 'Unable to connect to server. Please try again.' } }] } }
+            { Alert: { color: 'info', icon: 'info', children: ['New update available! Click to learn more.'] } },
+            { Alert: { color: 'success', icon: 'success', children: ['Your order has been placed successfully!'] } },
+            { Alert: { color: 'warning', icon: 'warning', children: ['Please review your information before proceeding.'] } },
+            { Alert: { color: 'error', icon: 'error', children: ['Unable to connect to server. Please try again.'] } }
         ]
     }
 };
@@ -376,8 +376,8 @@ const demo = {
                         color: 'success',
                         icon: 'success',
                         children: [
-                            { span: { text: 'Message sent successfully!' } },
-                            { Button: { size: 'sm', color: 'ghost', onclick: () => { visible.value = false; }, text: '✕' } }
+                            'Message sent successfully!',
+                            { Button: { size: 'sm', color: 'ghost', onclick: () => { visible.value = false; }, children: ['✕'] } }
                         ]
                     }
                 }
@@ -385,8 +385,8 @@ const demo = {
                     div: {
                         style: 'display: flex; gap: 0.5rem;',
                         children: [
-                            { span: { style: 'font-size: 0.875rem; opacity: 0.5;', text: 'Alert dismissed' } },
-                            { Button: { size: 'sm', color: 'primary', onclick: () => { visible.value = true; }, text: 'Show again' } }
+                            { span: { style: 'font-size: 0.875rem; opacity: 0.5;', children: ['Alert dismissed'] } },
+                            { Button: { size: 'sm', color: 'primary', onclick: () => { visible.value = true; }, children: ['Show again'] } }
                         ]
                     }
                 }

package/docs/components/avatar.html

@@ -501,9 +501,17 @@ $('#example').content(demo);</code></pre>
                         </table>
                     </div>
 
+                    <!-- Custom Element Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Avatar Gallery</h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Live examples using <code>&lt;lv-avatar&gt;</code> custom elements.
+                    </p>
+
+                    <script type="module" src="/components/data-display/avatar.js"></script>
+
                     <!-- Shapes -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Shapes</h2>
-                    <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;">
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Shapes</h3>
+                    <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;">
                         <lv-avatar src="https://i.pravatar.cc/100?img=1" size="w-16" shape="circle"></lv-avatar>
                         <lv-avatar src="https://i.pravatar.cc/100?img=2" size="w-16" shape="rounded"></lv-avatar>
                         <lv-avatar src="https://i.pravatar.cc/100?img=3" size="w-16" shape="squircle"></lv-avatar>
@@ -511,75 +519,37 @@ $('#example').content(demo);</code></pre>
                         <lv-avatar src="https://i.pravatar.cc/100?img=5" size="w-16" shape="triangle"></lv-avatar>
                     </div>
 
-                    <pre class="code-block" style="margin-bottom: 2rem;"><code>&lt;!-- Tagged Syntax --&gt;
-Avatar({ src: '...', shape: 'squircle' })
-
-&lt;!-- HTML Syntax --&gt;
-&lt;lv-avatar src="..." shape="squircle"&gt;&lt;/lv-avatar&gt;</code></pre>
-
-                    <!-- With Ring -->
-                    <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">With Ring</h2>
-                    <div style="margin-bottom: 1.5rem;">
-                        <lv-avatar src="https://i.pravatar.cc/100?img=6" size="w-16" ring
-                            ringColor="ring-primary"></lv-avatar>
-                    </div>
-                    <pre class="code-block" style="margin-bottom: 2rem;"><code>&lt;!-- Tagged Syntax --&gt;
-Avatar({ src: '...', ring: true, ringColor: 'ring-primary' })
-
-&lt;!-- HTML Syntax --&gt;
-&lt;lv-avatar src="..." ring ring-color="ring-primary"&gt;&lt;/lv-avatar&gt;</code></pre>
-
                     <!-- Online/Offline Status -->
-                    <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Online/Offline Status
-                    </h2>
-                    <div style="display: flex; gap: 1rem; margin-bottom: 1.5rem;">
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Status Indicators</h3>
+                    <div style="display: flex; gap: 1rem; margin-bottom: 2rem;">
                         <lv-avatar src="https://i.pravatar.cc/100?img=7" size="w-16" online></lv-avatar>
                         <lv-avatar src="https://i.pravatar.cc/100?img=8" size="w-16" offline></lv-avatar>
+                        <lv-avatar src="https://i.pravatar.cc/100?img=9" size="w-16" ring
+                            ring-color="ring-primary"></lv-avatar>
                     </div>
-                    <pre class="code-block" style="margin-bottom: 2rem;"><code>&lt;!-- Tagged Syntax --&gt;
-Avatar({ src: '...', online: true })
 
-&lt;!-- HTML Syntax --&gt;
-&lt;lv-avatar src="..." online&gt;&lt;/lv-avatar&gt;</code></pre>
-
-                    <!-- Placeholder -->
-                    <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Placeholder</h2>
-                    <div style="display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem;">
+                    <!-- Placeholders -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Placeholders</h3>
+                    <div style="display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem;">
                         <lv-avatar placeholder="AI" size="w-12"
                             style="--lv-avatar-bg: oklch(var(--n)); --lv-avatar-text: oklch(var(--nc));"></lv-avatar>
-                        <lv-avatar placeholder="AV" size="w-20" shape="squircle"
+                        <lv-avatar placeholder="JD" size="w-16" shape="squircle"
                             style="--lv-avatar-bg: oklch(var(--p)); --lv-avatar-text: oklch(var(--pc));"></lv-avatar>
-                        <lv-avatar placeholder="LRG" size="w-32" shape="hexagon"
+                        <lv-avatar placeholder="LR" size="w-20" shape="hexagon"
                             style="--lv-avatar-bg: oklch(var(--s)); --lv-avatar-text: oklch(var(--sc));"></lv-avatar>
                     </div>
-                    <pre class="code-block" style="margin-bottom: 2rem;"><code>&lt;!-- Tagged Syntax --&gt;
-Avatar({ placeholder: 'AI', size: 'w-12' })
-Avatar({ placeholder: 'AV', size: 'w-20', shape: 'squircle' })
-
-&lt;!-- HTML Syntax --&gt;
-&lt;lv-avatar placeholder="LRG" size="w-32" shape="hexagon"&gt;&lt;/lv-avatar&gt;</code></pre>
 
-                    <!-- Avatar Group -->
-                    <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Avatar Group</h2>
-                    <div style="margin-bottom: 1.5rem;">
+                    <!-- Grouping -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Avatar Group</h3>
+                    <div style="margin-bottom: 2rem;">
                         <lv-avatar-group>
                             <lv-avatar src="https://i.pravatar.cc/100?img=10" size="w-12"></lv-avatar>
                             <lv-avatar src="https://i.pravatar.cc/100?img=11" size="w-12"></lv-avatar>
                             <lv-avatar src="https://i.pravatar.cc/100?img=12" size="w-12"></lv-avatar>
-                            <lv-avatar placeholder="+99" size="w-12"></lv-avatar>
+                            <lv-avatar placeholder="+99" size="w-12"
+                                style="--lv-avatar-bg: oklch(var(--n)); --lv-avatar-text: oklch(var(--nc));"></lv-avatar>
                         </lv-avatar-group>
                     </div>
-                    <pre class="code-block" style="margin-bottom: 2rem;"><code>&lt;!-- Tagged Syntax --&gt;
-Avatar.Group({},
-    Avatar({ src: '...', size: 'w-12' }),
-    Avatar({ placeholder: '+99', size: 'w-12' })
-)
-
-&lt;!-- HTML Syntax --&gt;
-&lt;lv-avatar-group&gt;
-    &lt;lv-avatar src="..." size="w-12"&gt;&lt;/lv-avatar&gt;
-    &lt;lv-avatar placeholder="+99" size="w-12"&gt;&lt;/lv-avatar&gt;
-&lt;/lv-avatar-group&gt;</code></pre>
                 </div>
             </div>
         </div>

package/docs/components/badge.html

@@ -204,14 +204,14 @@ const badges = {
                 div: {
                     style: 'display: flex; flex-direction: row; gap: 0.5rem;',
                     children: [
-                        { Badge: { text: 'Default' } },
-                        { Badge: { color: 'primary', text: 'Primary' } },
-                        { Badge: { color: 'secondary', text: 'Secondary' } },
-                        { Badge: { color: 'accent', text: 'Accent' } },
-                        { Badge: { color: 'info', text: 'Info' } },
-                        { Badge: { color: 'success', text: 'Success' } },
-                        { Badge: { color: 'warning', text: 'Warning' } },
-                        { Badge: { color: 'error', text: 'Error' } }
+                        { Badge: { children: ['Default'] } },
+                        { Badge: { color: 'primary', children: ['Primary'] } },
+                        { Badge: { color: 'secondary', children: ['Secondary'] } },
+                        { Badge: { color: 'accent', children: ['Accent'] } },
+                        { Badge: { color: 'info', children: ['Info'] } },
+                        { Badge: { color: 'success', children: ['Success'] } },
+                        { Badge: { color: 'warning', children: ['Warning'] } },
+                        { Badge: { color: 'error', children: ['Error'] } }
                     ]
                 }
             },
@@ -219,9 +219,9 @@ const badges = {
                 div: {
                     style: 'display: flex; flex-direction: row; gap: 0.5rem;',
                     children: [
-                        { Badge: { variant: 'outline', text: 'Outline' } },
-                        { Badge: { variant: 'soft', color: 'primary', text: 'Soft' } },
-                        { Badge: { variant: 'dash', color: 'secondary', text: 'Dash' } }
+                        { Badge: { variant: 'outline', children: ['Outline'] } },
+                        { Badge: { variant: 'soft', color: 'primary', children: ['Soft'] } },
+                        { Badge: { variant: 'dash', color: 'secondary', children: ['Dash'] } }
                     ]
                 }
             }
@@ -410,7 +410,7 @@ const demo = {
                     size: 'sm',
                     color: 'primary',
                     onclick: () => { count.value++; },
-                    text: '+ Add Message'
+                    children: ['+ Add Message']
                 }
             },
             {
@@ -421,7 +421,7 @@ const demo = {
                             Badge: {
                                 color: 'secondary',
                                 style: 'margin-left: 0.5rem;',
-                                text: () => count.value > 99 ? '99+' : count.value
+                                children: [() => count.value > 99 ? '99+' : count.value]
                             }
                         }
                     ]
@@ -431,7 +431,7 @@ const demo = {
                 Button: {
                     size: 'sm',
                     onclick: () => { count.value = 0; },
-                    text: 'Clear'
+                    children: ['Clear']
                 }
             }
         ]
@@ -524,6 +524,61 @@ $('#example').content(demo);</code></pre>
                             <div class="badge badge-secondary">+99</div>
                         </button>
                     </div>
+
+                    <!-- Custom Element Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Custom Element Gallery</h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">
+                        Live examples using <code>&lt;lv-badge&gt;</code> custom elements with various options.
+                    </p>
+
+                    <script type="module" src="/components/data-display/badge.js"></script>
+
+                    <!-- All Colors -->
+                    <h3 class="text-lg font-semibold" style="margin-top: 1.5rem; margin-bottom: 0.75rem;">All Colors
+                    </h3>
+                    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
+                        <lv-badge>Default</lv-badge>
+                        <lv-badge color="neutral">Neutral</lv-badge>
+                        <lv-badge color="primary">Primary</lv-badge>
+                        <lv-badge color="secondary">Secondary</lv-badge>
+                        <lv-badge color="accent">Accent</lv-badge>
+                        <lv-badge color="ghost">Ghost</lv-badge>
+                        <lv-badge color="info">Info</lv-badge>
+                        <lv-badge color="success">Success</lv-badge>
+                        <lv-badge color="warning">Warning</lv-badge>
+                        <lv-badge color="error">Error</lv-badge>
+                    </div>
+
+                    <!-- All Sizes -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">All Sizes</h3>
+                    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+                        <lv-badge size="xs" color="primary">Extra Small</lv-badge>
+                        <lv-badge size="sm" color="primary">Small</lv-badge>
+                        <lv-badge size="md" color="primary">Medium</lv-badge>
+                        <lv-badge size="lg" color="primary">Large</lv-badge>
+                    </div>
+
+                    <!-- All Variants -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">All Variants</h3>
+                    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
+                        <lv-badge color="primary">Solid</lv-badge>
+                        <lv-badge variant="outline" color="primary">Outline</lv-badge>
+                        <lv-badge variant="soft" color="primary">Soft</lv-badge>
+                        <lv-badge variant="dash" color="primary">Dash</lv-badge>
+                    </div>
+
+                    <!-- Mixed Combinations -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Mixed Combinations</h3>
+                    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem;">
+                        <lv-badge size="xs" color="success">New</lv-badge>
+                        <lv-badge size="sm" variant="outline" color="info">Beta</lv-badge>
+                        <lv-badge variant="soft" color="warning">Hot</lv-badge>
+                        <lv-badge size="lg" variant="dash" color="error">Sale</lv-badge>
+                        <lv-badge color="secondary">v2.0</lv-badge>
+                        <lv-badge size="xs" variant="outline" color="accent">Pro</lv-badge>
+                        <lv-badge size="sm" variant="soft" color="success">Updated</lv-badge>
+                        <lv-badge variant="dash" color="neutral">Draft</lv-badge>
+                    </div>
                 </div>
             </div>
         </div>

package/docs/components/breadcrumbs.html

@@ -72,7 +72,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}`);
@@ -94,6 +94,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 -->
@@ -196,6 +198,28 @@ const breadcrumbs = {
 
 $('#example').content(breadcrumbs);</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: 75
+                                    });
+                                </script><code contenteditable="true" class="language-html">&lt;!-- Import the component (registers lv-breadcrumbs) --&gt;
+&lt;script type="module" src="/components/navigation/breadcrumbs.js"&gt;&lt;/script&gt;
+
+&lt;lv-breadcrumbs style="font-size: 0.75rem"&gt;
+    &lt;lv-breadcrumbs-item href="/"&gt;Home&lt;/lv-breadcrumbs-item&gt;
+    &lt;lv-breadcrumbs-item href="/products"&gt;Products&lt;/lv-breadcrumbs-item&gt;
+    &lt;lv-breadcrumbs-item href="/products/electronics"&gt;Electronics&lt;/lv-breadcrumbs-item&gt;
+    &lt;lv-breadcrumbs-item&gt;Phones&lt;/lv-breadcrumbs-item&gt;
+&lt;/lv-breadcrumbs&gt;</code></pre>
+                            </div>
                         </div>
                     </div>
 
@@ -243,36 +267,78 @@ $('#example').content(breadcrumbs);</code></pre>
                         </table>
                     </div>
 
+                    <!-- Custom Element Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Breadcrumbs Gallery
+                    </h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Live examples using <code>&lt;lv-breadcrumbs&gt;</code> and
+                        <code>&lt;lv-breadcrumbs-item&gt;</code> custom elements.
+                    </p>
+
+                    <script type="module" src="/components/navigation/breadcrumbs.js"></script>
+
+                    <!-- Basic -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Basic</h3>
+                    <div style="margin-bottom: 2rem;">
+                        <lv-breadcrumbs>
+                            <lv-breadcrumbs-item href="/">Home</lv-breadcrumbs-item>
+                            <lv-breadcrumbs-item href="/docs">Docs</lv-breadcrumbs-item>
+                            <lv-breadcrumbs-item>Breadcrumbs</lv-breadcrumbs-item>
+                        </lv-breadcrumbs>
+                    </div>
+
                     <!-- With Icons -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">With Icons</h2>
-                    <div class="breadcrumbs" style="font-size: 0.875rem; margin-bottom: 2rem;">
-                        <ul>
-                            <li>
-                                <a>
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                        style="width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 2;">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z">
-                                        </path>
-                                    </svg>
-                                    Home
-                                </a>
-                            </li>
-                            <li>
-                                <a>
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                        style="width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 2;">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z">
-                                        </path>
-                                    </svg>
-                                    Documents
-                                </a>
-                            </li>
-                            <li>Add Document</li>
-                        </ul>
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">With Icons</h3>
+                    <div style="margin-bottom: 2rem;">
+                        <lv-breadcrumbs>
+                            <lv-breadcrumbs-item href="/">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    class="w-4 h-4 mr-2 stroke-current">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z">
+                                    </path>
+                                </svg>
+                                Home
+                            </lv-breadcrumbs-item>
+                            <lv-breadcrumbs-item href="/docs">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    class="w-4 h-4 mr-2 stroke-current">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z">
+                                    </path>
+                                </svg>
+                                Documents
+                            </lv-breadcrumbs-item>
+                            <lv-breadcrumbs-item>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    class="w-4 h-4 mr-2 stroke-current">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
+                                    </path>
+                                </svg>
+                                Add Document
+                            </lv-breadcrumbs-item>
+                        </lv-breadcrumbs>
+                    </div>
+
+                    <!-- Sizes -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Sizes</h3>
+                    <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">
+                        <lv-breadcrumbs class="text-xs">
+                            <lv-breadcrumbs-item href="/">Home</lv-breadcrumbs-item>
+                            <lv-breadcrumbs-item>Extra Small</lv-breadcrumbs-item>
+                        </lv-breadcrumbs>
+                        <lv-breadcrumbs class="text-sm">
+                            <lv-breadcrumbs-item href="/">Home</lv-breadcrumbs-item>
+                            <lv-breadcrumbs-item>Small</lv-breadcrumbs-item>
+                        </lv-breadcrumbs>
+                        <lv-breadcrumbs class="text-lg">
+                            <lv-breadcrumbs-item href="/">Home</lv-breadcrumbs-item>
+                            <lv-breadcrumbs-item>Large</lv-breadcrumbs-item>
+                        </lv-breadcrumbs>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </div>
+</div>