lightview 2.0.8 → 2.1.0

package/docs/components/pagination.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -70,7 +70,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -276,4 +276,4 @@ $('#example').content(demo);</code></pre>
                 </div>
             </div>
         </div>
-    </div>
+    </div>

package/docs/components/progress.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -70,7 +70,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -206,9 +206,12 @@ $('#example').content(progressBars);</code></pre>
 
 &lt;div style="display: flex; flex-direction: column; gap: 1rem; width: 16rem;"&gt;
     &lt;lv-progress value="30" color="primary"&gt;&lt;/lv-progress&gt;
-    &lt;lv-progress value="50" color="secondary"&gt;&lt;/lv-progress&gt;
-    &lt;lv-progress value="70" color="accent"&gt;&lt;/lv-progress&gt;
-    &lt;lv-progress value="90" color="success"&gt;&lt;/lv-progress&gt;
+    &lt;lv-progress value="40" color="secondary"&gt;&lt;/lv-progress&gt;
+    &lt;lv-progress value="50" color="accent"&gt;&lt;/lv-progress&gt;
+    &lt;lv-progress value="60" color="info"&gt;&lt;/lv-progress&gt;
+    &lt;lv-progress value="70" color="success"&gt;&lt;/lv-progress&gt;
+    &lt;lv-progress value="80" color="warning"&gt;&lt;/lv-progress&gt;
+    &lt;lv-progress value="90" color="error"&gt;&lt;/lv-progress&gt;
 &lt;/div&gt;</code></pre>
                             </div>
                         </div>
@@ -223,7 +226,7 @@ $('#example').content(progressBars);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-reactive-${t}`);
@@ -509,6 +512,44 @@ $('#example').content(demo);</code></pre>
                     </div>
 
                     >
+
+                    <!-- Custom Element Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-top: 3rem; margin-bottom: 1rem;">Custom Element Gallery
+                    </h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Live examples using <code>&lt;lv-progress&gt;</code> custom elements.
+                    </p>
+
+                    <script type="module" src="/components/data-display/progress.js"></script>
+
+                    <!-- All Colors -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">All Colors</h3>
+                    <div style="display: flex; flex-direction: column; gap: 0.5rem; width: 16rem; margin-bottom: 2rem;">
+                        <lv-progress value="30" color="primary"></lv-progress>
+                        <lv-progress value="40" color="secondary"></lv-progress>
+                        <lv-progress value="50" color="accent"></lv-progress>
+                        <lv-progress value="60" color="info"></lv-progress>
+                        <lv-progress value="70" color="success"></lv-progress>
+                        <lv-progress value="80" color="warning"></lv-progress>
+                        <lv-progress value="90" color="error"></lv-progress>
+                    </div>
+
+                    <!-- Different Values -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Different Values</h3>
+                    <div style="display: flex; flex-direction: column; gap: 0.5rem; width: 16rem; margin-bottom: 2rem;">
+                        <lv-progress value="10" color="primary"></lv-progress>
+                        <lv-progress value="25" color="primary"></lv-progress>
+                        <lv-progress value="50" color="primary"></lv-progress>
+                        <lv-progress value="75" color="primary"></lv-progress>
+                        <lv-progress value="100" color="primary"></lv-progress>
+                    </div>
+
+                    <!-- Indeterminate -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Indeterminate (No Value)</h3>
+                    <div style="width: 16rem; margin-bottom: 2rem;">
+                        <lv-progress color="primary"></lv-progress>
+                    </div>
+
                 </div>
             </div>
-        </div>
+        </div>

package/docs/components/radial-progress.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -70,7 +70,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -410,25 +410,45 @@ $('#example').content(demo);</code></pre>
                 </table>
             </div>
 
-            <!-- Colors -->
-            <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Colors</h2>
+            <!-- Radial Progress Gallery -->
+            <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Radial Progress Gallery</h2>
+            <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                Live examples using <code>&lt;lv-radial-progress&gt;</code> custom elements.
+            </p>
+
+            <script type="module" src="/components/data-display/radial-progress.js"></script>
+
+            <!-- Different Values -->
+            <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Different Values</h3>
+            <div style="display: flex; gap: 1rem; margin-bottom: 2rem;">
+                <lv-radial-progress value="0">0%</lv-radial-progress>
+                <lv-radial-progress value="25">25%</lv-radial-progress>
+                <lv-radial-progress value="50">50%</lv-radial-progress>
+                <lv-radial-progress value="75">75%</lv-radial-progress>
+                <lv-radial-progress value="100">100%</lv-radial-progress>
+            </div>
+
+            <!-- All Colors -->
+            <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">All Colors</h3>
             <div style="display: flex; gap: 1rem; margin-bottom: 2rem;">
-                <div class="radial-progress text-primary" style="--value:70;" role="progressbar">70%</div>
-                <div class="radial-progress text-secondary" style="--value:70;" role="progressbar">70%</div>
-                <div class="radial-progress text-accent" style="--value:70;" role="progressbar">70%</div>
-                <div class="radial-progress text-success" style="--value:70;" role="progressbar">70%</div>
+                <lv-radial-progress value="70" color="text-primary">70%</lv-radial-progress>
+                <lv-radial-progress value="70" color="text-secondary">70%</lv-radial-progress>
+                <lv-radial-progress value="70" color="text-accent">70%</lv-radial-progress>
+                <lv-radial-progress value="70" color="text-success">70%</lv-radial-progress>
+                <lv-radial-progress value="70" color="text-warning">70%</lv-radial-progress>
+                <lv-radial-progress value="70" color="text-error">70%</lv-radial-progress>
             </div>
 
             <!-- Custom Size & Thickness -->
-            <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Custom Size & Thickness</h2>
+            <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Custom Size & Thickness</h3>
             <div style="display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem;">
-                <div class="radial-progress" style="--value:70; --size:8rem;" role="progressbar">70%</div>
-                <div class="radial-progress" style="--value:70; --size:8rem; --thickness:2px;" role="progressbar">70%
-                </div>
-                <div class="radial-progress" style="--value:70; --size:8rem; --thickness:1rem;" role="progressbar">70%
-                </div>
+                <lv-radial-progress value="70" size="6rem">70%</lv-radial-progress>
+                <lv-radial-progress value="70" size="8rem" thickness="2px">70%</lv-radial-progress>
+                <lv-radial-progress value="70" size="10rem" thickness="1rem"
+                    color="text-success">70%</lv-radial-progress>
             </div>
+
         </div>
     </div>
 </div>
-</div>
+</div>

package/docs/components/radio.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -70,7 +70,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -303,7 +303,7 @@ $('#example').content({
 
                         <!-- Tabs -->
                         <script>
-                            window.switchReactiveSyntaxTab = (tabId) => {
+                            globalThis.switchReactiveSyntaxTab = (tabId) => {
                                 const tabs = ['tagged', 'vdom', 'object'];
                                 tabs.forEach(t => {
                                     const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -652,4 +652,4 @@ $('#example').content(reactiveDemo);</code></pre>
             </div>
         </div>
     </div>
-</div>
+</div>

package/docs/components/range.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -71,7 +71,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -261,7 +261,7 @@ $('#example').content({
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -608,4 +608,4 @@ $('#example').content(reactiveDemo);</code></pre>
                 </div>
             </div>
         </div>
-    </div>
+    </div>

package/docs/components/rating.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -70,7 +70,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -259,7 +259,7 @@ $('#example').content({
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -639,4 +639,4 @@ $('#example').content(reactiveDemo);</code></pre>
                 </div>
             </div>
         </div>
-    </div>
+    </div>

package/docs/components/select.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -71,7 +71,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -303,7 +303,7 @@ $('#example').content(demo);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -693,4 +693,4 @@ $('#example').content(reactiveDemo);</code></pre>
                 </div>
             </div>
         </div>
-    </div>
+    </div>

package/docs/components/sidebar-setup.js

@@ -45,7 +45,7 @@ export function initSidebar() {
      */
     function updateSidebarUI() {
         sidebar.className = `gallery-sidebar ${sidebarOpen.value ? 'open' : 'closed'}`;
-        main.className = `gallery-main ${sidebarOpen.value ? '' : 'sidebar-closed'}`;
+        main.className = `gallery-main ${sidebarOpen.value ? 'sidebar-open' : ''}`;
         overlay.className = `sidebar-overlay ${sidebarOpen.value ? 'active' : ''}`;
         toggleIcon.setAttribute('class', `toggle-icon ${sidebarOpen.value ? '' : 'rotated'}`);
     }

package/docs/components/spinner.html

@@ -1,10 +1,10 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
-        window.location.replace('/docs/components/loading');
+    if (globalThis.LightviewRouter) {
+        globalThis.location.replace('/docs/components/loading');
     } else {
-        window.location.href = 'loading.html';
+        globalThis.location.href = 'loading.html';
     }
 </script>
 
@@ -65,4 +65,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

package/docs/components/stats.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -69,7 +69,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -239,7 +239,7 @@ $('#example').content(stats);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -483,4 +483,4 @@ $('#example').content(stats);</code></pre>
     </div>
 </div>
 </div>
-</div>
+</div>

package/docs/components/steps.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -69,7 +69,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -353,4 +353,4 @@ $('#example').content(demo);</code></pre>
             </div>
         </div>
     </div>
-</div>
+</div>