edu-webcomponents 1.22.0 → 1.24.0

package/CHANGELOG.md

@@ -4,9 +4,23 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v1.24.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.23.0...v1.24.0)
+
+- docs: improve README.md [`f14c2e0`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/f14c2e0201036091fb21e1f649be85ea63f6ffaa)
+
+#### [v1.23.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.22.0...v1.23.0)
+
+> 8 January 2026
+
+- docs: improve demo [`af75a42`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/af75a42432fbd667f97a1e8c05ea4a32f0bcdfa6)
+- chore: release v1.23.0 [`5244437`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/5244437248594e8bf1f31985358b74c52c8ad330)
+
 #### [v1.22.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.21.0...v1.22.0)
 
-- feat: add edu-skeleton-text component [`0003c11`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/0003c1130e907cafd720e847fa994c16f88d0741)
+> 7 January 2026
+
+- feat: add edu-skeleton-text component [`8192e1c`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/8192e1c2687445369ab7c6b41eb28fcdb615c726)
+- chore: release v1.22.0 [`347cf37`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/347cf37914aa1e42a90b9c1eca4963e528bdb005)
 
 #### [v1.21.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.20.0...v1.21.0)
 

package/README.md

@@ -1,62 +1,356 @@
-# Edu web components library
+# 🎨 Edu Web Components Library
 
-This web components library follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+[![npm version](https://img.shields.io/npm/v/edu-webcomponents.svg)](https://www.npmjs.com/package/edu-webcomponents)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Built with Lit](https://img.shields.io/badge/Built%20with-Lit-324FFF.svg)](https://lit.dev)
 
-## Installation
+A modern, lightweight collection of reusable web components built with [Lit](https://lit.dev) following [open-wc](https://github.com/open-wc/open-wc) recommendations.
+
+**[📖 View Live Demo & Documentation](https://eduardocruzpalacios.github.io/edu-webcomponents/)**
+
+## ✨ Features
+
+- 🚀 **Lightweight** - Built with Lit for minimal bundle size
+- ♿ **Accessible** - ARIA-compliant components with keyboard support
+- 🎯 **Framework-agnostic** - Works with any JavaScript framework or vanilla JS
+- 🎨 **Customizable** - CSS custom properties for easy theming
+- 📦 **Tree-shakeable** - Import only what you need
+- ✅ **Well-tested** - Comprehensive test coverage
+
+## 📦 Installation
 
 ```bash
-npm i edu-webcomponents
+npm install edu-webcomponents
 ```
 
-## Usage
+## 🚀 Quick Start
+
+Import all components:
 
 ```html
 <script type="module">
   import 'edu-webcomponents/index.js';
 </script>
 
-<webcomponent-tagname></webcomponent-tagname>
+<edu-button text="Click me"></edu-button>
+```
+
+Or import individual components:
+
+```html
+<script type="module">
+  import 'edu-webcomponents/src/edu-button/index.js';
+</script>
+
+<edu-button text="Click me"></edu-button>
+```
+
+## 📚 Components
+
+### 🔘 Button
+
+A customizable button component with hover effects and disabled state.
+
+**Properties:**
+- `text` (String) - Button text content (default: `'Default text'`)
+- `type` (String) - Button type attribute (default: `'button'`)
+- `disabled` (Boolean) - Whether the button is disabled (default: `false`)
+- `aria-label` (String) - Accessibility label
+
+**Usage:**
+
+```html
+<!-- Basic button -->
+<edu-button text="Click me"></edu-button>
+
+<!-- Disabled button -->
+<edu-button text="Disabled" disabled></edu-button>
+
+<!-- Submit button with aria-label -->
+<edu-button 
+  text="Submit Form" 
+  type="submit" 
+  aria-label="Submit the form">
+</edu-button>
+```
+
+**JavaScript:**
+
+```javascript
+import { EduButton } from 'edu-webcomponents';
+
+const button = document.querySelector('edu-button');
+button.addEventListener('click', () => {
+  console.log('Button clicked!');
+});
+```
+
+---
+
+### ➖ Divider
+
+A horizontal divider to visually separate content sections.
+
+**Properties:**
+- `label` (String) - Optional text label displayed in the center (default: `''`)
+
+**Usage:**
+
+```html
+<!-- Simple divider -->
+<edu-divider></edu-divider>
+
+<!-- Divider with label -->
+<edu-divider label="OR"></edu-divider>
+```
+
+---
+
+### ⏳ Loading Spinner
+
+An animated circular loading spinner with smooth rotation animation.
+
+**Properties:**
+None - displays a default 60x60px spinner.
+
+**Usage:**
+
+```html
+<edu-loading-spinner></edu-loading-spinner>
+```
+
+---
+
+### 📊 Progress Bar
+
+A progress bar component to visualize task completion or loading progress.
+
+**Properties:**
+- `value` (Number) - Current progress value (default: `0`)
+- `max` (Number) - Maximum value (default: `100`)
+- `showLabel` (Boolean) - Whether to display percentage label (default: `false`)
+- `progressbarName` (String) - Accessibility label (default: `'Progress bar'`)
+
+**Usage:**
+
+```html
+<!-- Basic progress bar -->
+<edu-progress-bar value="50" max="100"></edu-progress-bar>
+
+<!-- With percentage label -->
+<edu-progress-bar 
+  value="75" 
+  max="100" 
+  showLabel>
+</edu-progress-bar>
+
+<!-- Custom accessibility label -->
+<edu-progress-bar 
+  value="3" 
+  max="5" 
+  showLabel 
+  progressbarName="File upload progress">
+</edu-progress-bar>
+```
+
+**JavaScript:**
+
+```javascript
+const progressBar = document.querySelector('edu-progress-bar');
+let progress = 0;
+
+const interval = setInterval(() => {
+  progress += 10;
+  progressBar.value = progress;
+  
+  if (progress >= 100) {
+    clearInterval(interval);
+  }
+}, 500);
+```
+
+---
+
+### 💀 Skeleton Text
+
+Animated skeleton loader for content placeholders during loading states.
+
+**Properties:**
+- `width` (String) - Width of skeleton lines (default: `'100%'`)
+- `lineHeight` (String) - Height of each line (default: `'1em'`)
+- `lines` (Number) - Number of skeleton lines to display (default: `1`)
+
+**Usage:**
+
+```html
+<!-- Single line skeleton -->
+<edu-skeleton-text></edu-skeleton-text>
+
+<!-- Multiple lines -->
+<edu-skeleton-text lines="3"></edu-skeleton-text>
+
+<!-- Custom width and height -->
+<edu-skeleton-text 
+  width="60%" 
+  lineHeight="1.5em" 
+  lines="2">
+</edu-skeleton-text>
+```
+
+**Common Patterns:**
+
+```html
+<!-- Loading a card -->
+<div class="card">
+  <edu-skeleton-text width="80%" lineHeight="2em" lines="1"></edu-skeleton-text>
+  <edu-skeleton-text width="100%" lines="3"></edu-skeleton-text>
+</div>
+
+<!-- Loading a profile -->
+<div class="profile">
+  <edu-skeleton-text width="150px" lineHeight="150px" lines="1"></edu-skeleton-text>
+  <edu-skeleton-text width="200px" lines="2"></edu-skeleton-text>
+</div>
+```
+
+---
+
+### 💬 Tooltip
+
+A flexible tooltip component that displays contextual information on hover.
+
+**Properties:**
+- `text` (String) - Tooltip content to display
+- `position` (String) - Tooltip position: `'top'`, `'bottom'`, `'left'`, or `'right'` (default: `'bottom'`)
+
+**Usage:**
+
+```html
+<!-- Bottom tooltip (default) -->
+<edu-tooltip text="This is helpful information">
+  <button>Hover me</button>
+</edu-tooltip>
+
+<!-- Top tooltip -->
+<edu-tooltip text="Tooltip on top" position="top">
+  <span>🎯 Target element</span>
+</edu-tooltip>
+
+<!-- Left and right tooltips -->
+<edu-tooltip text="Left side tooltip" position="left">
+  <edu-button text="Button with tooltip"></edu-button>
+</edu-tooltip>
+
+<edu-tooltip text="Right side tooltip" position="right">
+  <a href="#">Link with tooltip</a>
+</edu-tooltip>
+```
+
+---
+
+## 🎨 Theming
+
+Components use CSS custom properties for easy theming. Override these in your CSS:
+
+```css
+:root {
+  --primary: #1976d2;
+  --primaryHover: #1565c0;
+  --primaryForeground: #ffffff;
+  --disabled: #bdbdbd;
+  --greyLight: #e0e0e0;
+  --greyDark: #757575;
+  --blackLight: #424242;
+}
 ```
 
-## Linting and formatting
+## 🧪 Development
+
+### Local Demo
 
-To scan the project for linting and formatting errors, run
+Run the local development server with live demo:
 
 ```bash
-npm run lint
+npm start
 ```
 
-To automatically fix linting and formatting errors, run
+Opens a development server at http://localhost:8000 with the demo page.
+
+### Storybook
+
+View components in Storybook with interactive controls:
 
 ```bash
-npm run format
+npm run storybook
 ```
 
-## Testing with Web Test Runner
+Build Storybook for deployment:
 
-To execute a single test run:
+```bash
+npm run build-storybook
+```
+
+### Testing
+
+Run tests once:
 
 ```bash
 npm run test
 ```
 
-To run the tests in interactive watch mode run:
+Run tests in watch mode:
 
 ```bash
 npm run test:watch
 ```
 
+### Linting & Formatting
 
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
+Check for linting/formatting errors:
 
-If you customize the configuration a lot, you can consider moving them to individual files.
+```bash
+npm run lint
+```
 
-## Local Demo with `web-dev-server`
+Auto-fix linting/formatting errors:
 
 ```bash
-npm start
+npm run format
 ```
 
-To run a local development server that serves the basic demo located in `demo/index.html`
+## 📝 Browser Support
+
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Modern browsers with ES2015+ support
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🔗 Links
+
+- 📖 [Live Demo & Storybook](https://eduardocruzpalacios.github.io/edu-webcomponents/)
+- 📦 [npm Package](https://www.npmjs.com/package/edu-webcomponents)
+- 💻 [GitHub Repository](https://github.com/eduardocruzpalacios/edu-webcomponents)
+- 🔥 [Lit Documentation](https://lit.dev)
+- 🌐 [Open Web Components](https://open-wc.org)
+
+## 🙏 Acknowledgments
+
+Built with [Lit](https://lit.dev) and following [open-wc](https://github.com/open-wc/open-wc) recommendations for modern web component development.
+
+---
+
+Made with ❤️ by [Eduardo de la Cruz Palacios](https://github.com/eduardocruzpalacios)

package/demo/index.html

@@ -1,29 +1,293 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo"></div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../index.js';
-
-    const textButton = 'This is a button';
-    render(
-      html`
-        <h1>Edu web components library</h1>
-        <edu-button .text=${textButton}>
-        </edu-button>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Edu Web Components - Demo</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        background: #fafafa;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+          'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+          'Helvetica Neue', sans-serif;
+        margin: 0;
+        padding: 2rem;
+        line-height: 1.6;
+      }
+
+      #demo {
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 0.5rem;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 2rem;
+        font-size: 1.1rem;
+      }
+
+      .section {
+        background: white;
+        border-radius: 8px;
+        padding: 2rem;
+        margin-bottom: 2rem;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .section h2 {
+        color: #333;
+        margin-top: 0;
+        margin-bottom: 1rem;
+        font-size: 1.5rem;
+        border-bottom: 2px solid #e0e0e0;
+        padding-bottom: 0.5rem;
+      }
+
+      .section p {
+        color: #666;
+        margin-bottom: 1.5rem;
+      }
+
+      .demo-item {
+        margin-top: 1.5rem;
+      }
+
+      .demo-label {
+        font-weight: 600;
+        color: #555;
+        margin-bottom: 0.5rem;
+      }
+
+      .button-group {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+      }
+
+      .progress-group {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .skeleton-group {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+      }
+
+      .tooltip-group {
+        display: flex;
+        gap: 2rem;
+        flex-wrap: wrap;
+        align-items: flex-start;
+      }
+
+      code {
+        background: #f4f4f4;
+        padding: 0.2rem 0.4rem;
+        border-radius: 3px;
+        font-size: 0.9em;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="demo"></div>
+
+    <script type="module">
+      import { html, render } from 'lit';
+      import '../index.js';
+
+      render(
+        html`
+          <h1>Edu Web Components Library</h1>
+          <p class="subtitle">
+            A collection of reusable web components built with Lit
+          </p>
+
+          <!-- Button Component -->
+          <section class="section">
+            <h2>Button</h2>
+            <p>A customizable button component with different states.</p>
+
+            <div class="demo-item">
+              <div class="demo-label">Default Button</div>
+              <div class="button-group">
+                <edu-button .text=${'Click Me'}></edu-button>
+              </div>
+            </div>
+
+            <div class="demo-item">
+              <div class="demo-label">Disabled Button</div>
+              <div class="button-group">
+                <edu-button .text=${'Disabled'} .disabled=${true}></edu-button>
+              </div>
+            </div>
+          </section>
+
+          <!-- Divider Component -->
+          <section class="section">
+            <h2>Divider</h2>
+            <p>A horizontal divider to separate content sections.</p>
+
+            <div class="demo-item">
+              <div class="demo-label">Simple Divider</div>
+              <edu-divider></edu-divider>
+            </div>
+
+            <div class="demo-item">
+              <div class="demo-label">Divider with Label</div>
+              <edu-divider .label=${'OR'}></edu-divider>
+            </div>
+
+            <div class="demo-item">
+              <div class="demo-label">Divider with Text</div>
+              <edu-divider .label=${'Section Break'}></edu-divider>
+            </div>
+          </section>
+
+          <!-- Loading Spinner Component -->
+          <section class="section">
+            <h2>Loading Spinner</h2>
+            <p>An animated loading spinner for indicating loading states.</p>
+
+            <div class="demo-item">
+              <div class="demo-label">Default Spinner</div>
+              <edu-loading-spinner></edu-loading-spinner>
+            </div>
+          </section>
+
+          <!-- Progress Bar Component -->
+          <section class="section">
+            <h2>Progress Bar</h2>
+            <p>A progress bar to visualize completion or loading progress.</p>
+
+            <div class="demo-item">
+              <div class="demo-label">Progress at 25%</div>
+              <edu-progress-bar
+                .value=${25}
+                .max=${100}
+                .showLabel=${true}
+              ></edu-progress-bar>
+            </div>
+
+            <div class="demo-item">
+              <div class="demo-label">Progress at 50%</div>
+              <edu-progress-bar
+                .value=${50}
+                .max=${100}
+                .showLabel=${true}
+              ></edu-progress-bar>
+            </div>
+
+            <div class="demo-item">
+              <div class="demo-label">Progress at 75%</div>
+              <edu-progress-bar
+                .value=${75}
+                .max=${100}
+                .showLabel=${true}
+              ></edu-progress-bar>
+            </div>
+
+            <div class="demo-item">
+              <div class="demo-label">Complete (100%)</div>
+              <edu-progress-bar
+                .value=${100}
+                .max=${100}
+                .showLabel=${true}
+              ></edu-progress-bar>
+            </div>
+          </section>
+
+          <!-- Skeleton Text Component -->
+          <section class="section">
+            <h2>Skeleton Text</h2>
+            <p>Skeleton loaders to show content placeholders during loading.</p>
+
+            <div class="demo-item">
+              <div class="demo-label">Single Line</div>
+              <edu-skeleton-text
+                .width=${'100%'}
+                .lines=${1}
+              ></edu-skeleton-text>
+            </div>
+
+            <div class="demo-item">
+              <div class="demo-label">Three Lines</div>
+              <edu-skeleton-text
+                .width=${'100%'}
+                .lines=${3}
+              ></edu-skeleton-text>
+            </div>
+
+            <div class="demo-item">
+              <div class="demo-label">Short Width</div>
+              <edu-skeleton-text
+                .width=${'50%'}
+                .lines=${2}
+              ></edu-skeleton-text>
+            </div>
+          </section>
+
+          <!-- Tooltip Component -->
+          <section class="section">
+            <h2>Tooltip</h2>
+            <p>Hover over elements to see tooltips in different positions.</p>
+
+            <div class="tooltip-group">
+              <div class="demo-item">
+                <div class="demo-label">Bottom (default)</div>
+                <edu-tooltip
+                  .text=${'This is a bottom tooltip'}
+                  .position=${'bottom'}
+                >
+                  <edu-button .text=${'Hover me'}></edu-button>
+                </edu-tooltip>
+              </div>
+
+              <div class="demo-item">
+                <div class="demo-label">Top</div>
+                <edu-tooltip
+                  .text=${'This is a top tooltip'}
+                  .position=${'top'}
+                >
+                  <edu-button .text=${'Hover me'}></edu-button>
+                </edu-tooltip>
+              </div>
+
+              <div class="demo-item">
+                <div class="demo-label">Left</div>
+                <edu-tooltip
+                  .text=${'This is a left tooltip'}
+                  .position=${'left'}
+                >
+                  <edu-button .text=${'Hover me'}></edu-button>
+                </edu-tooltip>
+              </div>
+
+              <div class="demo-item">
+                <div class="demo-label">Right</div>
+                <edu-tooltip
+                  .text=${'This is a right tooltip'}
+                  .position=${'right'}
+                >
+                  <edu-button .text=${'Hover me'}></edu-button>
+                </edu-tooltip>
+              </div>
+            </div>
+          </section>
+        `,
+        document.querySelector('#demo')
+      );
+    </script>
+  </body>
 </html>

package/package.json

@@ -11,7 +11,7 @@
   ],
   "license": "MIT",
   "author": "edu-webcomponents",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"