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

lego-dom 0.0.8 → 0.0.9

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 (119) hide show

package/docs/guide/cdn-usage.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # CDN Usage
-LegoJS works perfectly without any build tools. Just include it via CDN and start building!
+Lego works perfectly without any build tools. Just include it via CDN and start building!
 ## Quick Start
@@ -19,7 +19,7 @@ LegoJS works perfectly without any build tools. Just include it via CDN and star
   <!-- Use it -->
   <hello-world b-data="{ message: 'Hello from CDN!' }"></hello-world>
-  <!-- Include LegoJS -->
+  <!-- Include Lego -->
   <script src="https://unpkg.com/lego-dom/main.js"></script>
 </body>
 </html>
@@ -65,7 +65,7 @@ Here's a full working application using only CDN:
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Todo App - LegoJS</title>
+  <title>Todo App - Lego</title>
   <style>
     body {
       font-family: system-ui, sans-serif;
@@ -146,7 +146,7 @@ Here's a full working application using only CDN:
     Lego.define('todo-app', Lego.registry['todo-app'].innerHTML, {
       newTodo: '',
       todos: [
-        { text: 'Learn LegoJS', done: true },
+        { text: 'Learn Lego', done: true },
         { text: 'Build something awesome', done: false }
       ],
       addTodo() {
@@ -169,7 +169,7 @@ Here's a full working application using only CDN:
 ## Progressive Enhancement
-LegoJS is perfect for progressively enhancing existing sites:
+Lego is perfect for progressively enhancing existing sites:
 ```html
 <!-- Your existing page -->
@@ -213,14 +213,14 @@ LegoJS is perfect for progressively enhancing existing sites:
 ## Embedding in Existing Apps
-LegoJS components work alongside other frameworks:
+Lego components work alongside other frameworks:
 ```html
 <!-- Works fine with jQuery, Bootstrap, etc. -->
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://unpkg.com/lego-dom/main.js"></script>
-<!-- Your LegoJS component -->
+<!-- Your Lego component -->
 <my-component></my-component>
 <!-- Your jQuery code -->
@@ -271,7 +271,7 @@ For maximum security:
 ## Browser Compatibility
-LegoJS works in all modern browsers:
+Lego works in all modern browsers:
 - ✅ Chrome 63+
 - ✅ Firefox 63+

package/docs/guide/components.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Components
-Learn how to create and use components in LegoJS.
+Learn how to create and use components in Lego.
 ## What is a Component?

package/docs/guide/contributing.md CHANGED Viewed

@@ -1,12 +1,12 @@
 # Contributing
-Thank you for your interest in contributing to LegoJS!
+Thank you for your interest in contributing to Lego!
 ## Development Setup
 1. Clone the repository:
    ```bash
-   git clone https://github.com/rayattack/LegoJS.git
+   git clone https://github.com/rayattack/Lego.git
    ```
 2. Install dependencies:

package/docs/guide/directives.md CHANGED Viewed

@@ -243,7 +243,7 @@ Initialize component state.
 ```html
 <todo-list b-data="{
   todos: [
-    { text: 'Learn LegoJS', done: true },
+    { text: 'Learn Lego', done: true },
     { text: 'Build app', done: false }
   ],
   filter: 'all'

package/docs/guide/getting-started.md CHANGED Viewed

@@ -1,25 +1,25 @@
 # Getting Started
-Get up and running with LegoJS in under 5 minutes.
+Get up and running with Lego in under 5 minutes.
 ## Installation
 ### Option 1: CDN (No Build Tools)
-The fastest way to try LegoJS is via CDN:
+The fastest way to try Lego is via CDN:
 ```html
 <!DOCTYPE html>
 <html>
 <head>
-  <title>My LegoJS App</title>
+  <title>My Lego App</title>
 </head>
 <body>
   <my-component></my-component>
   <script src="https://unpkg.com/lego-dom/main.js"></script>
   <template b-id="my-component">
-    <h1>Hello LegoJS!</h1>
+    <h1>Hello Lego!</h1>
   </template>
 </body>
 </html>
@@ -41,7 +41,7 @@ Then import it:
 import { Lego } from 'lego-dom';
 Lego.define('my-component', `
-  <h1>Hello LegoJS!</h1>
+  <h1>Hello Lego!</h1>
 `);
 ```
@@ -220,7 +220,7 @@ Special attributes for common patterns:
 ## What You've Learned
-- ✅ Three different ways to install LegoJS
+- ✅ Three different ways to install Lego
 - ✅ How to create your first component
 - ✅ The basics of templates, state, and events
 - ✅ Available directives

package/docs/guide/index.md CHANGED Viewed

@@ -1,12 +1,12 @@
-# What is LegoJS?
+# What is Lego?
-LegoJS is a tiny, zero-dependency JavaScript library for building reactive Web Components directly in the browser.
+LegoDOM is a tiny, zero-dependency JavaScript library for building reactive Web Components directly in the browser.
 ## The Philosophy
-LegoJS is built on a simple belief: **the DOM is not your enemy**.
+LegoDOM is built on a simple belief: **the DOM is not your enemy**.
-Modern frameworks introduced virtual DOMs and compilation steps to solve problems that arose from trying to make the DOM do things it wasn't designed for. LegoJS takes a different approach—it embraces the DOM and Web Components as they were intended to be used.
+Modern frameworks introduced virtual DOMs and compilation steps to solve problems that arose from trying to make the DOM do things it wasn't designed for. Lego takes a different approach—it embraces the DOM and Web Components as they were intended to be used.
 ## Key Principles
@@ -17,7 +17,7 @@ There are no new concepts to learn. If you know:
 - JavaScript objects
 - Basic DOM events
-You already know LegoJS.
+You already know Lego.
 ### 2. No Build Step Required
@@ -34,7 +34,7 @@ component._studs.count++;
 ### 4. Web Standards First
-LegoJS uses:
+Lego uses:
 - **Web Components** - Standard custom elements
 - **Shadow DOM** - Native encapsulation
 - **ES6 Proxies** - For reactivity
@@ -42,9 +42,9 @@ LegoJS uses:
 No proprietary APIs. Everything is built on web standards.
-## When to Use LegoJS
+## When to Use Lego
-### ✅ LegoJS is Great For:
+### ✅ Lego is Great For:
 - **Small to medium applications** where framework overhead isn't worth it
 - **Embedded widgets** that need to work anywhere
@@ -74,7 +74,7 @@ Compare that to:
 ## What Makes It Different?
-| Aspect | LegoJS | Traditional Frameworks |
+| Aspect | Lego | Traditional Frameworks |
 |--------|--------|----------------------|
 | **Reactivity** | Direct object mutation | setState / dispatch / ref() |
 | **Templates** | HTML with `{{ }}` | JSX / template syntax |

package/docs/guide/lifecycle.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Lifecycle Hooks
-Learn about component lifecycle hooks in LegoJS.
+Learn about component lifecycle hooks in Lego.
 ## Overview

package/docs/guide/quick-start.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Quick Start
-The fastest way to get started with LegoJS is using the CDN. No build tools required!
+The fastest way to get started with Lego is using the CDN. No build tools required!
 ## 1. Create an HTML file
@@ -9,7 +9,7 @@ The fastest way to get started with LegoJS is using the CDN. No build tools requ
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>LegoJS Quick Start</title>
+    <title>Lego Quick Start</title>
 </head>
 <body>
     <!-- 2. Use your component -->
@@ -24,7 +24,7 @@ The fastest way to get started with LegoJS is using the CDN. No build tools requ
         <button @click="toggle()">Toggle Name</button>
     </template>
-    <!-- 4. Load LegoJS -->
+    <!-- 4. Load Lego -->
     <script src="https://unpkg.com/lego-dom/main.js"></script>
     <!-- 5. Define logic (Optional) -->
@@ -32,7 +32,7 @@ The fastest way to get started with LegoJS is using the CDN. No build tools requ
         document.querySelector('hello-world').state = {
             name: 'World',
             toggle() {
-                this.name = this.name === 'World' ? 'LegoJS' : 'World';
+                this.name = this.name === 'World' ? 'Lego' : 'World';
             }
         };
     </script>

package/docs/guide/reactivity.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Reactivity
-Understand how LegoJS makes your UI automatically update when data changes.
+Understand how Lego makes your UI automatically update when data changes.
 ## The Core Concept
@@ -15,7 +15,7 @@ No `setState()`, no `dispatch()`, no special syntax. Just mutate the data.
 ## How It Works
-LegoJS uses **ES6 Proxies** to track changes:
+Lego uses **ES6 Proxies** to track changes:
 ```js
 const reactive = (obj, el) => {
@@ -62,7 +62,7 @@ this.items.sort();            // ✅ Reactive
 this.user.profile.age = 30;   // ✅ Reactive
 ```
-LegoJS recursively wraps nested objects in proxies.
+Lego recursively wraps nested objects in proxies.
 ### ✅ Object Deletion
@@ -112,7 +112,7 @@ Initialize all properties upfront:
 ## Batching Updates
-LegoJS batches updates using `requestAnimationFrame`:
+Lego batches updates using `requestAnimationFrame`:
 ```js
 this.count = 1;
@@ -296,7 +296,7 @@ console.log(component._studs.count);  // Actual value
 const count = ref(0);
 count.value++;
-// LegoJS
+// Lego
 this.count++;
 ```
@@ -307,7 +307,7 @@ this.count++;
 const [count, setCount] = useState(0);
 setCount(count + 1);
-// LegoJS
+// Lego
 this.count++;
 ```
@@ -318,11 +318,11 @@ this.count++;
 let count = 0;
 count++;
-// LegoJS
+// Lego
 this.count++;
 ```
-LegoJS is closest to Svelte's model but uses Proxies instead of compilation.
+Lego is closest to Svelte's model but uses Proxies instead of compilation.
 ## Advanced Patterns

package/docs/guide/routing.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Routing
-LegoJS includes a built-in client-side router for building single-page applications.
+Lego includes a built-in client-side router for building single-page applications.
 ## Basic Setup
@@ -234,7 +234,7 @@ matchRoute(); // Initial check
 ## Nested Routes
-While LegoJS doesn't have built-in nested routing, you can implement it:
+While Lego doesn't have built-in nested routing, you can implement it:
 ```html
 <template b-id="blog-layout">
@@ -271,7 +271,7 @@ Example: `/search?q=legojs&page=2`
 ## Hash vs History Mode
-LegoJS uses History API (pushState) by default, giving you clean URLs:
+Lego uses History API (pushState) by default, giving you clean URLs:
 ✅ `/about`
 ✅ `/user/123`

package/docs/guide/sfc.md CHANGED Viewed

@@ -43,43 +43,6 @@ Here's a complete example (`user-card.lego`):
 ```html
 <template>
-  <style>
-    self {
-      display: block;
-      padding: 1.5rem;
-      border: 2px solid #ddd;
-      border-radius: 8px;
-      max-width: 300px;
-    }
-    .avatar {
-      width: 80px;
-      height: 80px;
-      border-radius: 50%;
-      object-fit: cover;
-    }
-    .name {
-      font-size: 1.5rem;
-      font-weight: bold;
-      margin: 0.5rem 0;
-    }
-    .bio {
-      color: #666;
-      margin: 0.5rem 0;
-    }
-    button {
-      background: #4CAF50;
-      color: white;
-      border: none;
-      padding: 0.5rem 1rem;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-  </style>
   <img class="avatar" src="{{ avatarUrl }}" alt="{{ name }}">
   <h2 class="name">{{ name }}</h2>
   <p class="bio">{{ bio }}</p>
@@ -89,6 +52,43 @@ Here's a complete example (`user-card.lego`):
   </button>
 </template>
+<style>
+  self {
+    display: block;
+    padding: 1.5rem;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    max-width: 300px;
+  }
+  .avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  .name {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin: 0.5rem 0;
+  }
+  .bio {
+    color: #666;
+    margin: 0.5rem 0;
+  }
+  button {
+    background: #4CAF50;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+</style>
 <script>
 export default {
   name: 'John Doe',
@@ -173,7 +173,7 @@ In your `index.html`:
 <!DOCTYPE html>
 <html>
 <head>
-  <title>My LegoJS App</title>
+  <title>My Lego App</title>
 </head>
 <body>
   <div id="app">
@@ -210,7 +210,7 @@ Component names **must**:
 ### Template Section
-Contains your component's HTML markup with LegoJS directives:
+Contains your component's HTML markup with Lego directives:
 ```html
 <template>

package/docs/guide/templating.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # Templating
-Learn about LegoJS templating features and syntax.
+Learn about Lego templating features and syntax.
 ## Interpolation
@@ -72,7 +72,7 @@ Interpolate in any attribute:
 ## Escaping
-LegoJS automatically escapes HTML to prevent XSS:
+Lego automatically escapes HTML to prevent XSS:
 ```js
 {

package/docs/index.md CHANGED Viewed

@@ -2,19 +2,19 @@
 layout: home
 hero:
-  name: LegoJS
+  name: LegoDOM
   text: Build Reactive Web Components
-  tagline: A tiny, zero-dependency JavaScript library for creating reactive Web Components directly in the browser
+  tagline: A tiny, zero-dependency Web library for creating reactive Web Components directly in the browser
   image:
     src: /logo.svg
-    alt: LegoJS
+    alt: Lego
   actions:
     - theme: brand
       text: Get Started
       link: /guide/getting-started
     - theme: alt
       text: View on GitHub
-      link: https://github.com/rayattack/LegoJS
+      link: https://github.com/rayattack/Lego
     - theme: alt
       text: Try Examples
       link: /examples/
@@ -87,7 +87,7 @@ features:
 That's it. No build step, no npm, no configuration.
-## Why LegoJS?
+## Why Lego?
 **For small projects**, you get reactive components without the overhead of a full framework.
@@ -97,7 +97,7 @@ That's it. No build step, no npm, no configuration.
 ## Comparison
-| Feature | LegoJS | Vue | React |
+| Feature | Lego | Vue | React |
 |---------|--------|-----|-------|
 | Size | < 17KB | ~33KB | ~40KB |
 | Dependencies | 0 | Many | Many |
@@ -110,7 +110,7 @@ That's it. No build step, no npm, no configuration.
 ## Browser Support
-LegoJS works in all modern browsers that support:
+Lego works in all modern browsers that support:
 - Web Components
 - Shadow DOM
 - ES6 Proxy
@@ -120,7 +120,7 @@ This includes Chrome 63+, Firefox 63+, Safari 11.1+, and Edge 79+.
 ## Community
-- 📖 [Documentation](https://rayattack.github.io/LegoJS/)
-- 💬 [Discussions](https://github.com/rayattack/LegoJS/discussions)
-- 🐛 [Issue Tracker](https://github.com/rayattack/LegoJS/issues)
+- 📖 [Documentation](https://rayattack.github.io/Lego/)
+- 💬 [Discussions](https://github.com/rayattack/Lego/discussions)
+- 🐛 [Issue Tracker](https://github.com/rayattack/Lego/issues)
 - 📦 [npm Package](https://www.npmjs.com/package/lego-dom)

package/docs/public/logo.svg CHANGED Viewed

@@ -1,38 +1,17 @@
-<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="blockGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#FF4B2B" />
-      <stop offset="100%" style="stop-color:#FF416C" />
-    </linearGradient>
-    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
-      <feOffset dx="2" dy="4" result="offsetblur" />
-      <feComponentTransfer>
-        <feFuncA type="linear" slope="0.2" />
-      </feComponentTransfer>
-      <feMerge>
-        <feMergeNode />
-        <feMergeNode in="SourceGraphic" />
-      </feMerge>
-    </filter>
-  </defs>
-  <g filter="url(#shadow)" transform="translate(40, 40)">
-    <path d="M60 80 L90 65 L90 95 L60 110 Z" fill="#D32F2F" />
-    <path d="M90 65 L120 80 L120 110 L90 95 Z" fill="#B71C1C" />
-    <path d="M60 80 L90 65 L120 80 L90 95 Z" fill="url(#blockGrad)" />
-    <circle cx="90" cy="80" r="4" fill="white" fill-opacity="0.3" />
-    <path d="M30 65 L60 50 L60 80 L30 95 Z" fill="#D32F2F" />
-    <path d="M60 50 L90 65 L90 95 L60 80 Z" fill="#B71C1C" />
-    <path d="M30 65 L60 50 L90 65 L60 80 Z" fill="url(#blockGrad)" />
-    <circle cx="60" cy="65" r="4" fill="white" fill-opacity="0.3" />
-    <path d="M30 35 L60 20 L60 50 L30 65 Z" fill="#D32F2F" />
-    <path d="M60 20 L90 35 L90 65 L60 50 Z" fill="#B71C1C" />
-    <path d="M30 35 L60 20 L90 35 L60 50 Z" fill="url(#blockGrad)" />
-    <circle cx="60" cy="35" r="4" fill="white" fill-opacity="0.3" />
-  </g>
-  <text x="100" y="180" font-family="Arial, sans-serif" font-weight="900" font-size="24" fill="#333" text-anchor="middle" letter-spacing="1">LEGO.JS</text>
-</svg>
+<svg width="270" height="270" viewBox="0 0 270 270" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.8 199H250.2C257.88 199 263 202.657 263 208.143V253.857C263 259.343 257.88 263 250.2 263H19.8C12.12 263 7.00001 259.343 7.00001 253.857V208.143C7.00001 202.657 12.12 199 19.8 199Z" fill="#FFCA28"/>
+<path d="M205.194 199H238.226V183C238.226 178.2 234.923 175 229.968 175H213.452C208.497 175 205.194 178.2 205.194 183V199Z" fill="#FFCA28"/>
+<path d="M147.387 199H180.419V183C180.419 178.2 177.116 175 172.161 175H155.645C150.69 175 147.387 178.2 147.387 183V199Z" fill="#FFCA28"/>
+<path d="M15.2581 143H106.097C111.052 143 114.355 146.2 114.355 151V191C114.355 195.8 111.052 199 106.097 199H15.2581C10.3032 199 7 195.8 7 191V151C7 146.2 10.3032 143 15.2581 143Z" fill="#FFCA28"/>
+<path d="M15.2581 87H106.097C111.052 87 114.355 90.2 114.355 95V135C114.355 139.8 111.052 143 106.097 143H15.2581C10.3032 143 7 139.8 7 135V95C7 90.2 10.3032 87 15.2581 87Z" fill="#FFCA28"/>
+<path d="M15.2581 31H106.097C111.052 31 114.355 34.2 114.355 39V79C114.355 83.8 111.052 87 106.097 87H15.2581C10.3032 87 7 83.8 7 79V39C7 34.2 10.3032 31 15.2581 31Z" fill="#FFCA28"/>
+<path d="M73.0645 31H106.097V15C106.097 10.2 102.794 7 97.8387 7H81.3226C76.3677 7 73.0645 10.2 73.0645 15V31Z" fill="#FFCA28"/>
+<path d="M15.2581 31H48.2903V15C48.2903 10.2 44.9871 7 40.0323 7H23.5161C18.5613 7 15.2581 10.2 15.2581 15V31Z" fill="#FFCA28"/>
+<path d="M256 208.143C256 207.853 255.974 207.612 255.411 207.21C254.671 206.682 253.019 206 250.2 206H19.7998C16.9807 206 15.3288 206.682 14.5889 207.21C14.0263 207.612 14 207.853 14 208.143V253.857C14 254.147 14.0263 254.388 14.5889 254.79C15.3288 255.318 16.9807 256 19.7998 256H250.2C253.019 256 254.671 255.318 255.411 254.79C255.974 254.388 256 254.147 256 253.857V208.143ZM173.419 183C173.419 182.606 173.352 182.39 173.319 182.308C173.302 182.265 173.29 182.243 173.285 182.236C173.281 182.23 173.278 182.228 173.277 182.228C173.275 182.226 173.266 182.217 173.244 182.203C173.22 182.188 173.174 182.163 173.098 182.135C172.946 182.078 172.647 182 172.161 182H155.646C155.16 182 154.861 182.078 154.709 182.135C154.632 182.163 154.585 182.188 154.562 182.203C154.538 182.218 154.529 182.227 154.528 182.228C154.527 182.228 154.526 182.23 154.521 182.236C154.517 182.243 154.504 182.264 154.486 182.308C154.453 182.39 154.387 182.606 154.387 183V192H173.419V183ZM231.226 183C231.226 182.606 231.159 182.39 231.126 182.308C231.109 182.264 231.095 182.243 231.091 182.236C231.087 182.23 231.085 182.228 231.084 182.228C231.082 182.226 231.073 182.217 231.051 182.203C231.027 182.188 230.981 182.163 230.904 182.135C230.752 182.078 230.453 182 229.968 182H213.451C212.966 182 212.666 182.078 212.515 182.135C212.438 182.163 212.392 182.188 212.368 182.203C212.345 182.218 212.336 182.227 212.335 182.228C212.334 182.228 212.332 182.23 212.328 182.236C212.324 182.243 212.31 182.264 212.293 182.308C212.26 182.39 212.193 182.606 212.193 183V192H231.226V183ZM107.354 151C107.354 150.606 107.288 150.39 107.255 150.308C107.238 150.264 107.224 150.243 107.22 150.236C107.216 150.23 107.214 150.228 107.213 150.228C107.211 150.226 107.202 150.217 107.18 150.203C107.156 150.188 107.109 150.163 107.033 150.135C106.881 150.078 106.582 150 106.097 150H15.2578C14.7724 150 14.4731 150.078 14.3213 150.135C14.2449 150.163 14.1986 150.188 14.1748 150.203C14.1521 150.217 14.143 150.226 14.1416 150.228C14.1408 150.228 14.139 150.23 14.1348 150.236C14.1304 150.243 14.1168 150.264 14.0996 150.308C14.0667 150.39 14 150.606 14 151V191C14 191.394 14.0667 191.61 14.0996 191.692C14.1168 191.736 14.1304 191.757 14.1348 191.764C14.139 191.77 14.1408 191.772 14.1416 191.772C14.143 191.774 14.1521 191.783 14.1748 191.797C14.1986 191.812 14.2449 191.837 14.3213 191.865C14.4731 191.922 14.7724 192 15.2578 192H106.097C106.582 192 106.881 191.922 107.033 191.865C107.109 191.837 107.156 191.812 107.18 191.797C107.202 191.783 107.211 191.774 107.213 191.772C107.214 191.772 107.216 191.77 107.22 191.764C107.224 191.757 107.238 191.736 107.255 191.692C107.288 191.61 107.354 191.394 107.354 191V151ZM107.354 95C107.354 94.6058 107.288 94.3904 107.255 94.3076C107.238 94.2644 107.224 94.2429 107.22 94.2363C107.216 94.2302 107.214 94.2283 107.213 94.2275C107.211 94.2257 107.202 94.2168 107.18 94.2031C107.156 94.1883 107.109 94.1632 107.033 94.1348C106.881 94.0782 106.582 94 106.097 94H15.2578C14.7724 94 14.4731 94.0782 14.3213 94.1348C14.2449 94.1632 14.1986 94.1883 14.1748 94.2031C14.1521 94.2173 14.143 94.2262 14.1416 94.2275C14.1408 94.2284 14.139 94.2301 14.1348 94.2363C14.1304 94.2429 14.1168 94.2643 14.0996 94.3076C14.0667 94.3904 14 94.6058 14 95V135C14 135.394 14.0667 135.61 14.0996 135.692C14.1168 135.736 14.1304 135.757 14.1348 135.764C14.139 135.77 14.1408 135.772 14.1416 135.772C14.143 135.774 14.1521 135.783 14.1748 135.797C14.1986 135.812 14.2449 135.837 14.3213 135.865C14.4731 135.922 14.7724 136 15.2578 136H106.097C106.582 136 106.881 135.922 107.033 135.865C107.109 135.837 107.156 135.812 107.18 135.797C107.202 135.783 107.211 135.774 107.213 135.772C107.214 135.772 107.216 135.77 107.22 135.764C107.224 135.757 107.238 135.736 107.255 135.692C107.288 135.61 107.354 135.394 107.354 135V95ZM107.354 39C107.354 38.6058 107.288 38.3904 107.255 38.3076C107.238 38.2644 107.224 38.2429 107.22 38.2363C107.216 38.2302 107.214 38.2283 107.213 38.2275C107.211 38.2257 107.202 38.2168 107.18 38.2031C107.156 38.1883 107.109 38.1632 107.033 38.1348C106.881 38.0782 106.582 38 106.097 38H15.2578C14.7724 38 14.4731 38.0782 14.3213 38.1348C14.2449 38.1632 14.1986 38.1883 14.1748 38.2031C14.1521 38.2173 14.143 38.2262 14.1416 38.2275C14.1408 38.2284 14.139 38.2301 14.1348 38.2363C14.1304 38.2429 14.1168 38.2643 14.0996 38.3076C14.0667 38.3904 14 38.6058 14 39V79C14 79.3942 14.0667 79.6096 14.0996 79.6924C14.1168 79.7357 14.1304 79.7571 14.1348 79.7637C14.139 79.7699 14.1408 79.7716 14.1416 79.7725C14.143 79.7738 14.1521 79.7827 14.1748 79.7969C14.1986 79.8117 14.2449 79.8368 14.3213 79.8652C14.4731 79.9218 14.7724 80 15.2578 80H106.097C106.582 80 106.881 79.9218 107.033 79.8652C107.109 79.8368 107.156 79.8117 107.18 79.7969C107.202 79.7832 107.211 79.7743 107.213 79.7725C107.214 79.7717 107.216 79.7698 107.22 79.7637C107.224 79.7571 107.238 79.7356 107.255 79.6924C107.288 79.6096 107.354 79.3942 107.354 79V39ZM41.29 15C41.29 14.6058 41.2233 14.3904 41.1904 14.3076C41.1732 14.2644 41.1596 14.2429 41.1553 14.2363C41.1511 14.2302 41.1493 14.2283 41.1484 14.2275C41.1466 14.2258 41.1372 14.2169 41.1152 14.2031C41.0914 14.1883 41.045 14.1632 40.9688 14.1348C40.8169 14.0782 40.5178 14 40.0322 14H23.5166C23.031 14 22.7309 14.0782 22.5791 14.1348C22.5027 14.1633 22.4563 14.1883 22.4326 14.2031C22.4092 14.2177 22.4004 14.2266 22.3994 14.2275C22.3986 14.2284 22.3968 14.23 22.3926 14.2363C22.3882 14.2429 22.3747 14.2643 22.3574 14.3076C22.3245 14.3904 22.2578 14.6058 22.2578 15V24H41.29V15ZM99.0967 15C99.0967 14.6058 99.03 14.3904 98.9971 14.3076C98.9799 14.2644 98.9663 14.2429 98.9619 14.2363C98.9577 14.2301 98.9559 14.2283 98.9551 14.2275C98.9535 14.2261 98.9443 14.2171 98.9219 14.2031C98.8981 14.1883 98.8517 14.1632 98.7754 14.1348C98.6236 14.0782 98.3244 14 97.8389 14H81.3223C80.8369 14 80.5375 14.0782 80.3857 14.1348C80.3094 14.1632 80.263 14.1883 80.2393 14.2031C80.2164 14.2174 80.2073 14.2263 80.2061 14.2275C80.2052 14.2284 80.2034 14.23 80.1992 14.2363C80.1948 14.2429 80.1813 14.2643 80.1641 14.3076C80.1312 14.3904 80.0645 14.6058 80.0645 15V24H99.0967V15ZM113.097 25.5107C114.495 26.1706 115.799 27.0527 116.954 28.1719C119.921 31.0462 121.354 34.9412 121.354 39V79C121.354 81.8462 120.648 84.6105 119.204 87C120.648 89.3895 121.354 92.1538 121.354 95V135C121.354 137.846 120.648 140.611 119.204 143C120.648 145.389 121.354 148.154 121.354 151V191C121.354 191.335 121.345 191.668 121.325 192H140.387V183C140.387 178.941 141.82 175.046 144.787 172.172C147.734 169.317 151.643 168 155.646 168H172.161C176.164 168 180.071 169.317 183.019 172.172C185.986 175.046 187.419 178.941 187.419 183V192H198.193V183C198.193 178.941 199.627 175.046 202.594 172.172C205.541 169.317 209.449 168 213.451 168H229.968C233.97 168 237.878 169.317 240.825 172.172C243.792 175.046 245.226 178.941 245.226 183V192H250.2C255.06 192 259.809 193.147 263.549 195.818C267.466 198.616 270 202.947 270 208.143V253.857C270 259.053 267.466 263.384 263.549 266.182C259.809 268.853 255.06 270 250.2 270H19.7998C14.9396 270 10.1913 268.853 6.45117 266.182C2.53412 263.384 8.92991e-05 259.053 0 253.857V208.143C5.4865e-05 204.95 0.95743 202.085 2.60352 199.701C0.853644 197.16 0 194.129 0 191V151C0 148.154 0.706222 145.389 2.15039 143C0.706222 140.611 0 137.846 0 135V95C0 92.1539 0.706222 89.3894 2.15039 87C0.706222 84.6106 0 81.8461 0 79V39C0 34.9412 1.43333 31.0462 4.40039 28.1719C5.55577 27.0526 6.85931 26.1706 8.25781 25.5107V15C8.25781 10.9412 9.69114 7.04622 12.6582 4.17188C15.6053 1.31691 19.5139 0 23.5166 0H40.0322C44.0348 0 47.9426 1.3171 50.8896 4.17188C53.8567 7.04622 55.29 10.9412 55.29 15V24H66.0645V15C66.0645 10.9412 67.4978 7.04622 70.4648 4.17188C73.4119 1.31705 77.3197 6.86267e-05 81.3223 0H97.8389C101.841 3.51509e-05 105.749 1.31707 108.696 4.17188C111.663 7.04622 113.097 10.9412 113.097 15V25.5107Z" fill="#3E3E3E"/>
+<path d="M151.988 148.804L143 48H241.76L232.76 148.788L192.32 160L151.988 148.804Z" fill="#E44F26"/>
+<path d="M192.381 151.432L225.061 142.372L232.749 56.2441H192.381V151.432Z" fill="#F1662A"/>
+<path d="M192.381 93.628H176.021L174.893 80.968H192.381V68.604H192.337H161.381L164.713 105.992H192.381V93.628Z" fill="#EBEBEB"/>
+<path d="M192.382 125.736L192.326 125.752L178.558 122.036L177.678 112.176H165.266L166.998 131.584L192.326 138.616L192.382 138.6V125.736Z" fill="#EBEBEB"/>
+<path d="M192.336 93.6279V105.992H207.56L206.128 122.028L192.336 125.748V138.612L217.684 131.584L217.868 129.496L220.772 96.9479L221.076 93.6279H192.336Z" fill="white"/>
+<path d="M192.337 68.604L192.336 80.968H222.2L223.308 68.604H192.337Z" fill="white"/>
+</svg>

package/examples/vite-app/README.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# LegoJS SFC and Vite Plugin Example
+# Lego SFC and Vite Plugin Example
-This example demonstrates how to use LegoJS with Single File Components (.lego files) and the Vite plugin.
+This example demonstrates how to use Lego with Single File Components (.lego files) and the Vite plugin.
 ## Setup

package/examples/vite-app/index.html CHANGED Viewed

@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>LegoJS Vite Example</title>
+  <title>Lego Vite Example</title>
   <style>
     body {
       font-family: system-ui, -apple-system, sans-serif;
@@ -28,9 +29,10 @@
     }
   </style>
 </head>
 <body>
-  <h1>LegoJS + Vite Example</h1>
+  <h1>Lego + Vite Example</h1>
   <div class="info">
     <p><strong>✨ These components are auto-discovered from .lego files!</strong></p>
     <p>The Vite plugin automatically finds all .lego files in <code>src/components/</code> and registers them.</p>
@@ -39,7 +41,9 @@
   <!-- These components are automatically discovered and hydrated -->
   <sample-component></sample-component>
   <greeting-card></greeting-card>
+  <todo-list></todo-list>
   <script type="module" src="/src/main.js"></script>
 </body>
-</html>
+</html>