npm - lego-dom - Versions diffs - 0.0.5 → 0.0.8 - Mend

lego-dom 0.0.5 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

package/docs/.vitepress/dist/examples/index.html ADDED Viewed

@@ -0,0 +1,368 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Examples | LegoJS</title>
+  <meta name="description" content="A tiny, zero-dependency JavaScript library for building reactive Web Components">
+  <meta name="generator" content="VitePress v1.6.4">
+  <link rel="preload stylesheet" href="/LegoJS/assets/style.eycE2Jhw.css" as="style">
+  <link rel="preload stylesheet" href="/LegoJS/vp-icons.css" as="style">
+  <script type="module" src="/LegoJS/assets/app.BG5s3B0P.js"></script>
+  <link rel="preload" href="/LegoJS/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
+  <link rel="modulepreload" href="/LegoJS/assets/chunks/theme.DA-iSa9B.js">
+  <link rel="modulepreload" href="/LegoJS/assets/chunks/framework.B7OFBR9X.js">
+  <link rel="modulepreload" href="/LegoJS/assets/examples_index.md.BDEG_D4J.lean.js">
+  <script
+    id="check-dark-mode">(() => { const e = localStorage.getItem("vitepress-theme-appearance") || "auto", a = window.matchMedia("(prefers-color-scheme: dark)").matches; (!e || e === "auto" ? a : e === "dark") && document.documentElement.classList.add("dark") })();</script>
+  <script
+    id="check-mac-os">document.documentElement.classList.toggle("mac", /Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+</head>
+<body>
+  <div id="app">
+    <div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a
+        href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!---->
+      <header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad>
+        <div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345>
+          <div class="wrapper" data-v-6aa21345>
+            <div class="container" data-v-6aa21345>
+              <div class="title" data-v-6aa21345>
+                <div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/LegoJS/"
+                    data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/LegoJS/logo.svg" alt
+                      data-v-8426fc1a><!--]--><span data-v-1168a8e4>LegoJS</span><!--[--><!--]--></a></div>
+              </div>
+              <div class="content" data-v-6aa21345>
+                <div class="content-body" data-v-6aa21345><!--[--><!--]-->
+                  <div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!---->
+                    <div id="local-search"><button type="button" class="DocSearch DocSearch-Button"
+                        aria-label="Search"><span class="DocSearch-Button-Container"><span
+                            class="vp-icon DocSearch-Search-Icon"></span><span
+                            class="DocSearch-Button-Placeholder">Search</span></span><span
+                          class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd
+                            class="DocSearch-Button-Key">K</kbd></span></button></div><!--]-->
+                  </div>
+                  <nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963>
+                    <span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation
+                    </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/LegoJS/guide/" tabindex="0"
+                      data-v-dc692963 data-v-e56f3d57><!--[--><span
+                        data-v-e56f3d57>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink"
+                      href="/LegoJS/api/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span
+                        data-v-e56f3d57>API</span><!--]--></a><!--]--><!--[--><a
+                      class="VPLink link VPNavBarMenuLink active" href="/LegoJS/examples/" tabindex="0" data-v-dc692963
+                      data-v-e56f3d57><!--[--><span data-v-e56f3d57>Examples</span><!--]--></a><!--]--><!--[-->
+                    <div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-cf11d7a2><button type="button"
+                        class="button" aria-haspopup="true" aria-expanded="false" data-v-cf11d7a2><span class="text"
+                          data-v-cf11d7a2><!----><span data-v-cf11d7a2>v0.0.7</span><span
+                            class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button>
+                      <div class="menu" data-v-cf11d7a2>
+                        <div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113>
+                          <div class="items" data-v-b98bc113><!--[--><!--[-->
+                            <div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a
+                                class="VPLink link vp-external-link-icon"
+                                href="https://github.com/rayattack/LegoJS/releases" target="_blank" rel="noreferrer"
+                                data-v-35975db6><!--[--><span data-v-35975db6>Changelog</span><!--]--></a></div>
+                            <!--]--><!--]-->
+                          </div><!--[--><!--]-->
+                        </div>
+                      </div>
+                    </div><!--]--><!--]-->
+                  </nav><!---->
+                  <div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button
+                      class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false"
+                      data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span
+                          class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span
+                            class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div>
+                  <div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82
+                    data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/rayattack/LegoJS"
+                      aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span
+                        class="vpi-social-github"></span></a><!--]--></div>
+                  <div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button
+                      type="button" class="button" aria-haspopup="true" aria-expanded="false"
+                      aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon"
+                        data-v-cf11d7a2></span></button>
+                    <div class="menu" data-v-cf11d7a2>
+                      <div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!---->
+                        <div class="group" data-v-bb2aa2f0>
+                          <div class="item appearance" data-v-bb2aa2f0>
+                            <p class="label" data-v-bb2aa2f0>Appearance</p>
+                            <div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance"
+                                type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4
+                                data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon"
+                                    data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span
+                                      class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div>
+                          </div>
+                        </div>
+                        <div class="group" data-v-bb2aa2f0>
+                          <div class="item social-links" data-v-bb2aa2f0>
+                            <div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a
+                                class="VPSocialLink no-icon" href="https://github.com/rayattack/LegoJS"
+                                aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span
+                                  class="vpi-social-github"></span></a><!--]--></div>
+                          </div>
+                        </div><!--]--><!--]-->
+                      </div>
+                    </div>
+                  </div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger"
+                    aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345
+                    data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top"
+                        data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom"
+                        data-v-e5dd9c1c></span></span></button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="divider" data-v-6aa21345>
+            <div class="divider-line" data-v-6aa21345></div>
+          </div>
+        </div><!---->
+      </header>
+      <div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e>
+        <div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav"
+            data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text"
+              data-v-a6f0e41e>Menu</span></button>
+          <div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button
+              data-v-8a42e2b4>Return to top</button><!----></div>
+        </div>
+      </div>
+      <aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6>
+        <div class="curtain" data-v-319d5ca6></div>
+        <nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span
+            class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation
+          </span><!--[--><!--]--><!--[-->
+          <div class="no-transition group" data-v-c40bc020>
+            <section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8>
+              <div class="item" role="button" tabindex="0" data-v-b3fd67f8>
+                <div class="indicator" data-v-b3fd67f8></div>
+                <h2 class="text" data-v-b3fd67f8>Examples</h2><!---->
+              </div>
+              <div class="items" data-v-b3fd67f8><!--[-->
+                <div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8>
+                  <div class="item" data-v-b3fd67f8>
+                    <div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/LegoJS/examples/"
+                      data-v-b3fd67f8><!--[-->
+                      <p class="text" data-v-b3fd67f8>Overview</p><!--]-->
+                    </a><!---->
+                  </div><!---->
+                </div>
+                <div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8>
+                  <div class="item" data-v-b3fd67f8>
+                    <div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link"
+                      href="/LegoJS/examples/todo-app.html" data-v-b3fd67f8><!--[-->
+                      <p class="text" data-v-b3fd67f8>Todo App</p><!--]-->
+                    </a><!---->
+                  </div><!---->
+                </div>
+                <div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8>
+                  <div class="item" data-v-b3fd67f8>
+                    <div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link"
+                      href="/LegoJS/examples/routing.html" data-v-b3fd67f8><!--[-->
+                      <p class="text" data-v-b3fd67f8>Routing Demo</p><!--]-->
+                    </a><!---->
+                  </div><!---->
+                </div>
+                <div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8>
+                  <div class="item" data-v-b3fd67f8>
+                    <div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link"
+                      href="/LegoJS/examples/sfc-showcase.html" data-v-b3fd67f8><!--[-->
+                      <p class="text" data-v-b3fd67f8>SFC Showcase</p><!--]-->
+                    </a><!---->
+                  </div><!---->
+                </div>
+                <div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8>
+                  <div class="item" data-v-b3fd67f8>
+                    <div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link"
+                      href="/LegoJS/examples/form.html" data-v-b3fd67f8><!--[-->
+                      <p class="text" data-v-b3fd67f8>Form Validation</p><!--]-->
+                    </a><!---->
+                  </div><!---->
+                </div><!--]-->
+              </div>
+            </section>
+          </div><!--]--><!--[--><!--]-->
+        </nav>
+      </aside>
+      <div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186>
+        <div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]-->
+          <div class="container" data-v-39a288b8>
+            <div class="aside" data-v-39a288b8>
+              <div class="aside-curtain" data-v-39a288b8></div>
+              <div class="aside-container" data-v-39a288b8>
+                <div class="aside-content" data-v-39a288b8>
+                  <div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]-->
+                    <nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769
+                      data-v-a5bbad30>
+                      <div class="content" data-v-a5bbad30>
+                        <div class="outline-marker" data-v-a5bbad30></div>
+                        <div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading"
+                          data-v-a5bbad30>On this page</div>
+                        <ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul>
+                      </div>
+                    </nav><!--[--><!--]-->
+                    <div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]-->
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="content" data-v-39a288b8>
+              <div class="content-container" data-v-39a288b8><!--[--><!--]-->
+                <main class="main" data-v-39a288b8>
+                  <div style="position:relative;" class="vp-doc _LegoJS_examples_" data-v-39a288b8>
+                    <div>
+                      <h1 id="examples" tabindex="-1">Examples <a class="header-anchor" href="#examples"
+                          aria-label="Permalink to &quot;Examples&quot;"></a></h1>
+                      <p>Explore these hands-on examples to learn LegoJS patterns and best practices.</p>
+                      <h2 id="quick-examples" tabindex="-1">Quick Examples <a class="header-anchor"
+                          href="#quick-examples" aria-label="Permalink to &quot;Quick Examples&quot;"></a></h2>
+                      <h3 id="counter" tabindex="-1">Counter <a class="header-anchor" href="#counter"
+                          aria-label="Permalink to &quot;Counter&quot;"></a></h3>
+                      <p>A simple reactive counter demonstrating basic state and events.</p>
+                      <div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span
+                          class="lang">html</span>
+                        <pre class="shiki shiki-themes github-light github-dark vp-code"
+                          tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;click-counter&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">    button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Count: {{ count }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;count++&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Increment&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">click-counter</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ count: 0 }&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">click-counter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre>
+                      </div>
+                      <h3 id="input-binding" tabindex="-1">Input Binding <a class="header-anchor" href="#input-binding"
+                          aria-label="Permalink to &quot;Input Binding&quot;"></a></h3>
+                      <p>Two-way data binding with <code>b-sync</code>.</p>
+                      <div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span
+                          class="lang">html</span>
+                        <pre class="shiki shiki-themes github-light github-dark vp-code"
+                          tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;name-input&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-sync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;name&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Enter your name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hello, {{ name }}!&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">name-input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ name: &#39;&#39; }&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">name-input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre>
+                      </div>
+                      <h3 id="todo-list" tabindex="-1">Todo List <a class="header-anchor" href="#todo-list"
+                          aria-label="Permalink to &quot;Todo List&quot;"></a></h3>
+                      <p>Lists with <code>b-for</code>.</p>
+                      <div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span
+                          class="lang">html</span>
+                        <pre class="shiki shiki-themes github-light github-dark vp-code"
+                          tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;todo-list&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;todo in todos&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;checkbox&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-sync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;todo.done&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{{ todo.done ? &#39;done&#39; : &#39;&#39; }}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ todo.text }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">todo-list</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  todos: [</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    { text: &#39;Learn LegoJS&#39;, done: true },</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    { text: &#39;Build an app&#39;, done: false }</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">  ]</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">todo-list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre>
+                      </div>
+                      <h2 id="full-applications" tabindex="-1">Full Applications <a class="header-anchor"
+                          href="#full-applications" aria-label="Permalink to &quot;Full Applications&quot;"></a></h2>
+                      <h3 id="todo-app" tabindex="-1"><a href="/LegoJS/examples/todo-app.html">Todo App</a> <a
+                          class="header-anchor" href="#todo-app"
+                          aria-label="Permalink to &quot;[Todo App](/examples/todo-app)&quot;"></a></h3>
+                      <p>A complete todo application with:</p>
+                      <ul>
+                        <li>Add/remove todos</li>
+                        <li>Mark as complete</li>
+                        <li>Filter by status</li>
+                        <li>Local storage persistence</li>
+                      </ul>
+                      <h3 id="routing-demo" tabindex="-1"><a href="/LegoJS/examples/routing.html">Routing Demo</a> <a
+                          class="header-anchor" href="#routing-demo"
+                          aria-label="Permalink to &quot;[Routing Demo](/examples/routing)&quot;"></a></h3>
+                      <p>Single-page application with:</p>
+                      <ul>
+                        <li>Multiple pages</li>
+                        <li>Dynamic routes</li>
+                        <li>Navigation</li>
+                        <li>Route parameters</li>
+                      </ul>
+                      <h3 id="sfc-showcase" tabindex="-1"><a href="/LegoJS/examples/sfc-showcase.html">SFC Showcase</a>
+                        <a class="header-anchor" href="#sfc-showcase"
+                          aria-label="Permalink to &quot;[SFC Showcase](/examples/sfc-showcase)&quot;"></a></h3>
+                      <p>Using Single File Components:</p>
+                      <ul>
+                        <li>User cards</li>
+                        <li>Product grid</li>
+                        <li>Modal dialogs</li>
+                        <li>Form validation</li>
+                      </ul>
+                      <h3 id="form-validation" tabindex="-1"><a href="/LegoJS/examples/form.html">Form Validation</a> <a
+                          class="header-anchor" href="#form-validation"
+                          aria-label="Permalink to &quot;[Form Validation](/examples/form)&quot;"></a></h3>
+                      <p>Advanced form handling:</p>
+                      <ul>
+                        <li>Input validation</li>
+                        <li>Error messages</li>
+                        <li>Submit handling</li>
+                        <li>Reset functionality</li>
+                      </ul>
+                      <h2 id="codepen-examples" tabindex="-1">CodePen Examples <a class="header-anchor"
+                          href="#codepen-examples" aria-label="Permalink to &quot;CodePen Examples&quot;"></a></h2>
+                      <p>Try these examples directly in your browser:</p>
+                      <ul>
+                        <li><a href="https://codepen.io/ortserga/pen/counter" target="_blank" rel="noreferrer">Simple
+                            Counter</a></li>
+                        <li><a href="https://codepen.io/ortserga/pen/todo" target="_blank" rel="noreferrer">Todo App</a>
+                        </li>
+                        <li><a href="https://codepen.io/ortserga/pen/form" target="_blank" rel="noreferrer">Dynamic
+                            Form</a></li>
+                      </ul>
+                      <h2 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps"
+                          aria-label="Permalink to &quot;Next Steps&quot;"></a></h2>
+                      <ul>
+                        <li>Check the <a href="/LegoJS/api/">API Reference</a></li>
+                        <li>Read the <a href="/LegoJS/guide/">Guide</a></li>
+                        <li>View the <a href="https://github.com/rayattack/LegoJS" target="_blank"
+                            rel="noreferrer">source code</a></li>
+                      </ul>
+                    </div>
+                  </div>
+                </main>
+                <footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]-->
+                  <div class="edit-info" data-v-e257564d>
+                    <div class="edit-link" data-v-e257564d><a
+                        class="VPLink link vp-external-link-icon no-icon edit-link-button"
+                        href="https://github.com/rayattack/LegoJS/edit/main/docs/examples/index.md" target="_blank"
+                        rel="noreferrer" data-v-e257564d><!--[--><span class="vpi-square-pen edit-link-icon"
+                          data-v-e257564d></span> Edit this page on GitHub<!--]--></a></div><!---->
+                  </div>
+                  <nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span
+                      class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span>
+                    <div class="pager" data-v-e257564d><!----></div>
+                    <div class="pager" data-v-e257564d><a class="VPLink link pager-link next"
+                        href="/LegoJS/examples/todo-app.html" data-v-e257564d><!--[--><span class="desc"
+                          data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Todo
+                          App</span><!--]--></a></div>
+                  </nav>
+                </footer><!--[--><!--]-->
+              </div>
+            </div>
+          </div><!--[--><!--]-->
+        </div>
+      </div>
+      <footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad>
+        <div class="container" data-v-e315a0ad>
+          <p class="message" data-v-e315a0ad>Released under the MIT License.</p>
+          <p class="copyright" data-v-e315a0ad>Copyright © 2024-present</p>
+        </div>
+      </footer><!--[--><!--]-->
+    </div>
+  </div>
+  <script>window.__VP_HASH_MAP__ = JSON.parse("{\"api_define.md\":\"UA-ygUnQ\",\"api_directives.md\":\"BV-D251p\",\"api_globals.md\":\"DOjt7AV0\",\"api_index.md\":\"OS6h01ct\",\"api_lifecycle.md\":\"Ccm5xw6-\",\"api_route.md\":\"CAHf_KNp\",\"api_vite-plugin.md\":\"DNn9VhL5\",\"examples_form.md\":\"B3stGKbu\",\"examples_index.md\":\"BDEG_D4J\",\"examples_routing.md\":\"bqZ9DjDK\",\"examples_sfc-showcase.md\":\"DLXaUiop\",\"examples_todo-app.md\":\"D5RhZoo5\",\"guide_cdn-usage.md\":\"CAjf03Lr\",\"guide_components.md\":\"BIFWF1Hc\",\"guide_contributing.md\":\"BgbUN-Mr\",\"guide_directives.md\":\"Bi3ynu1d\",\"guide_getting-started.md\":\"2Nr1lp2z\",\"guide_index.md\":\"GvZq_Yf2\",\"guide_lifecycle.md\":\"B28j1OzS\",\"guide_quick-start.md\":\"CNk3VGTF\",\"guide_reactivity.md\":\"CVsaMaPv\",\"guide_routing.md\":\"DSpDP25o\",\"guide_sfc.md\":\"CVUP66tS\",\"guide_templating.md\":\"BgCGe4aa\",\"index.md\":\"xV1taCED\"}"); window.__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"LegoJS\",\"description\":\"A tiny, zero-dependency JavaScript library for building reactive Web Components\",\"base\":\"/LegoJS/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/\"},{\"text\":\"API\",\"link\":\"/api/\"},{\"text\":\"Examples\",\"link\":\"/examples/\"},{\"text\":\"v0.0.7\",\"items\":[{\"text\":\"Changelog\",\"link\":\"https://github.com/rayattack/LegoJS/releases\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is LegoJS?\",\"link\":\"/guide/\"},{\"text\":\"Getting Started\",\"link\":\"/guide/getting-started\"},{\"text\":\"Quick Start\",\"link\":\"/guide/quick-start\"},{\"text\":\"Contributing\",\"link\":\"/guide/contributing\"}]},{\"text\":\"Core Concepts\",\"items\":[{\"text\":\"Components\",\"link\":\"/guide/components\"},{\"text\":\"Templating\",\"link\":\"/guide/templating\"},{\"text\":\"Reactivity\",\"link\":\"/guide/reactivity\"},{\"text\":\"Directives\",\"link\":\"/guide/directives\"}]},{\"text\":\"Advanced\",\"items\":[{\"text\":\"Single File Components\",\"link\":\"/guide/sfc\"},{\"text\":\"Routing\",\"link\":\"/guide/routing\"},{\"text\":\"CDN Usage\",\"link\":\"/guide/cdn-usage\"},{\"text\":\"Lifecycle Hooks\",\"link\":\"/guide/lifecycle\"}]}],\"/api/\":[{\"text\":\"API Reference\",\"items\":[{\"text\":\"Overview\",\"link\":\"/api/\"},{\"text\":\"Lego.define()\",\"link\":\"/api/define\"},{\"text\":\"Lego.route()\",\"link\":\"/api/route\"},{\"text\":\"Lego.globals\",\"link\":\"/api/globals\"},{\"text\":\"Directives\",\"link\":\"/api/directives\"},{\"text\":\"Directives\",\"link\":\"/api/directives\"},{\"text\":\"Lifecycle Hooks\",\"link\":\"/api/lifecycle\"},{\"text\":\"Vite Plugin\",\"link\":\"/api/vite-plugin\"}]}],\"/examples/\":[{\"text\":\"Examples\",\"items\":[{\"text\":\"Overview\",\"link\":\"/examples/\"},{\"text\":\"Todo App\",\"link\":\"/examples/todo-app\"},{\"text\":\"Routing Demo\",\"link\":\"/examples/routing\"},{\"text\":\"SFC Showcase\",\"link\":\"/examples/sfc-showcase\"},{\"text\":\"Form Validation\",\"link\":\"/examples/form\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/rayattack/LegoJS\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024-present\"},\"search\":{\"provider\":\"local\"},\"editLink\":{\"pattern\":\"https://github.com/rayattack/LegoJS/edit/main/docs/:path\",\"text\":\"Edit this page on GitHub\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+</body>
+</html>