lightview 2.0.9 → 2.2.1

package/docs/components/progress.html

@@ -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>
@@ -422,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)}%`
+                    ]
                 }
             },
             {
@@ -433,7 +438,7 @@ const demo = {
                     size: 'sm',
                     disabled: () => isRunning.value,
                     onclick: startDownload,
-                    text: () => isRunning.value ? 'Downloading...' : 'Start Download'
+                    children: [() => isRunning.value ? 'Downloading...' : 'Start Download']
                 }
             }
         ]
@@ -509,6 +514,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>

package/docs/components/radial-progress.html

@@ -410,24 +410,44 @@ $('#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>

package/docs/components/radio.html

@@ -613,41 +613,52 @@ $('#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="radio" class="radio" checked name="color-demo" />
-                    <input type="radio" class="radio radio-primary" checked name="color-demo2" />
-                    <input type="radio" class="radio radio-secondary" checked name="color-demo3" />
-                    <input type="radio" class="radio radio-accent" checked name="color-demo4" />
-                    <input type="radio" class="radio radio-success" checked name="color-demo5" />
-                    <input type="radio" class="radio radio-warning" checked name="color-demo6" />
-                    <input type="radio" class="radio radio-info" checked name="color-demo7" />
-                    <input type="radio" class="radio radio-error" checked name="color-demo8" />
+                <!-- Custom Element Gallery -->
+                <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Radio Gallery</h2>
+                <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                    Live examples using <code>&lt;lv-radio&gt;</code> and <code>&lt;lv-radio-group&gt;</code> custom
+                    elements.
+                </p>
+
+                <script type="module" src="/components/data-input/radio.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-radio label="Default" checked name="color-gallery"></lv-radio>
+                    <lv-radio label="Primary" color="primary" checked name="color-gallery-1"></lv-radio>
+                    <lv-radio label="Secondary" color="secondary" checked name="color-gallery-2"></lv-radio>
+                    <lv-radio label="Accent" color="accent" checked name="color-gallery-3"></lv-radio>
+                    <lv-radio label="Success" color="success" checked name="color-gallery-4"></lv-radio>
+                    <lv-radio label="Warning" color="warning" checked name="color-gallery-5"></lv-radio>
+                    <lv-radio label="Info" color="info" checked name="color-gallery-6"></lv-radio>
+                    <lv-radio label="Error" color="error" checked name="color-gallery-7"></lv-radio>
                 </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="radio" class="radio radio-xs" checked name="size-demo" />
-                    <input type="radio" class="radio radio-sm" checked name="size-demo2" />
-                    <input type="radio" class="radio radio-md" checked name="size-demo3" />
-                    <input type="radio" class="radio radio-lg" checked name="size-demo4" />
+                <!-- 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-radio size="xs" label="Extra Small" checked name="size-gallery-1"></lv-radio>
+                    <lv-radio size="sm" label="Small" checked name="size-gallery-2"></lv-radio>
+                    <lv-radio size="md" label="Medium" checked name="size-gallery-3"></lv-radio>
+                    <lv-radio size="lg" label="Large" checked name="size-gallery-4"></lv-radio>
                 </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;">Option 1</span>
-                        <input type="radio" name="label-demo" class="radio radio-primary" checked />
-                    </label>
-                    <label
-                        style="display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 0.5rem 0;">
-                        <span style="font-size: 0.875rem;">Option 2</span>
-                        <input type="radio" name="label-demo" class="radio radio-primary" />
-                    </label>
+                <!-- Radio Groups -->
+                <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Radio Groups</h3>
+                <div style="display: flex; flex-direction: column; gap: 2rem; margin-bottom: 2rem; max-width: 28rem;">
+                    <lv-radio-group label="Vertical Group (Default)" name="vertical-gallery"
+                        options='["Option 1", "Option 2", "Option 3"]' color="primary">
+                    </lv-radio-group>
+
+                    <lv-radio-group label="Horizontal Group" name="horizontal-gallery" horizontal="true"
+                        options='["Small", "Medium", "Large"]' color="secondary">
+                    </lv-radio-group>
+
+                    <lv-radio-group label="With Descriptions" name="desc-gallery"
+                        options='[{"value":"standard","label":"Standard","description":"Ships in 3-5 days"},{"value":"express","label":"Express","description":"Ships in 1-2 days"}]'
+                        color="accent">
+                    </lv-radio-group>
                 </div>
             </div>
         </div>

package/docs/components/select.html

@@ -625,70 +625,59 @@ $('#example').content(reactiveDemo);</code></pre>
                         </table>
                     </div>
 
-                    <!-- Sizes Example -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sizes</h2>
+                    <!-- Custom Element Gallery -->
+                    <h2 class="text-xl font-bold" style="margin-top: 2rem; margin-bottom: 1rem;">Select Gallery</h2>
+                    <p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Live examples using <code>&lt;lv-select&gt;</code> custom elements.
+                    </p>
+
+                    <script type="module" src="/components/data-input/select.js"></script>
+
+                    <!-- Sizes -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Sizes</h3>
+                    <div
+                        style="display: flex; flex-direction: column; gap: 1rem; max-width: 20rem; margin-bottom: 2rem;">
+                        <lv-select size="xs" options='["Extra Small"]'></lv-select>
+                        <lv-select size="sm" options='["Small"]'></lv-select>
+                        <lv-select options='["Medium (default)"]'></lv-select>
+                        <lv-select size="lg" options='["Large"]'></lv-select>
+                    </div>
+
+                    <!-- Colors -->
+                    <h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Colors</h3>
                     <div
-                        style="display: flex; flex-direction: column; gap: 0.5rem; max-width: 20rem; margin-bottom: 2rem;">
-                        <select class="select select-xs">
-                            <option>Extra Small</option>
-                        </select>
-                        <select class="select select-sm">
-                            <option>Small</option>
-                        </select>
-                        <select class="select">
-                            <option>Medium</option>
-                        </select>
-                        <select class="select select-lg">
-                            <option>Large</option>
-                        </select>
+                        style="display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 2rem;">
+                        <lv-select color="primary" options='["Primary"]'></lv-select>
+                        <lv-select color="secondary" options='["Secondary"]'></lv-select>
+                        <lv-select color="accent" options='["Accent"]'></lv-select>
+                        <lv-select color="info" options='["Info"]'></lv-select>
+                        <lv-select color="success" options='["Success"]'></lv-select>
+                        <lv-select color="warning" options='["Warning"]'></lv-select>
+                        <lv-select color="error" options='["Error"]'></lv-select>
+                        <lv-select ghost="true" options='["Ghost Style"]'></lv-select>
                     </div>
 
-                    <!-- Colors Example -->
-                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Colors</h2>
-                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem;">
-                        <select class="select select-primary">
-                            <option>Primary</option>
-                        </select>
-                        <select class="select select-secondary">
-                            <option>Secondary</option>
-                        </select>
-                        <select class="select select-accent">
-                            <option>Accent</option>
-                        </select>
-                        <select class="select select-info">
-                            <option>Info</option>
-                        </select>
-                        <select class="select select-success">
-                            <option>Success</option>
-                        </select>
-                        <select class="select select-warning">
-                            <option>Warning</option>
-                        </select>
-                        <select class="select select-error">
-                            <option>Error</option>
-                        </select>
-                        <select class="select select-ghost">
-                            <option>Ghost</option>
-                        </select>
+                    <!-- 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-select label="Country" placeholder="Select your country"
+                            options='["United States", "United Kingdom", "Canada", "Other"]'
+                            helper="Used for shipping calculations.">
+                        </lv-select>
+                        <lv-select label="Required Field" placeholder="Must choose one"
+                            options='["Choice A", "Choice B"]' required="true">
+                        </lv-select>
+                        <lv-select label="Error State" options='["Option 1", "Option 2"]'
+                            error="Selection is required.">
+                        </lv-select>
                     </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;">
-                                Country</legend>
-                            <select class="select" style="width: 100%;">
-                                <option disabled selected>Select your country</option>
-                                <option>United States</option>
-                                <option>United Kingdom</option>
-                                <option>Canada</option>
-                            </select>
-                            <p style="font-size: 0.875rem; color: oklch(var(--bc)/0.6); padding: 0 0.5rem;">Used for
-                                shipping calculations.</p>
-                        </fieldset>
+                    <!-- 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-select label="Disabled Select" options='["Locked value"]' disabled="true"></lv-select>
                     </div>
                 </div>
             </div>