edu-webcomponents 1.30.1 → 1.31.0

package/CHANGELOG.md

@@ -4,10 +4,17 @@ 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.31.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.30.1...v1.31.0)
+
+- feat: add EduLabel component [`d8945dd`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/d8945dd56f839fe34010f1859d99b54e3367bbd1)
+
 #### [v1.30.1](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.30.0...v1.30.1)
 
-- docs: include accessibility features in README.md [`938258a`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/938258ad9c4977d4f41a5e30d837c840e894bee4)
-- fix: format code [`f244d97`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/f244d9758426d3d8e0e051f222ff6ad05f3077a9)
+> 20 January 2026
+
+- docs: include accessibility features in README.md [`0876421`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/08764219fa28a92d178d398efe0b2f2ca83375d3)
+- chore: release v1.30.1 [`1c13ee8`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/1c13ee8b6ec7af8f380af0c38b88136897125b27)
+- fix: format code [`7e6c4bb`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/7e6c4bbde4565d526962650f2cabf339aff36a3a)
 
 #### [v1.30.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.29.0...v1.30.0)
 

package/README.md

@@ -48,6 +48,72 @@ Or import individual components:
 
 ## 📚 Components
 
+### 🏷️ Badge
+
+A small status indicator or label component perfect for displaying counts, categories, or status information.
+
+**Properties:**
+- `text` (String) - Badge text content (default: `''`)
+- `variant` (String) - Color variant: `'default'`, `'primary'`, `'success'`, `'warning'`, `'error'`, or `'info'` (default: `'default'`)
+- `size` (String) - Size variant: `'small'`, `'medium'`, or `'large'` (default: `'medium'`)
+- `aria-label` (String) - Accessibility label
+- `aria-live` (String) - Announces dynamic changes to screen readers: `'polite'` or `'assertive'`
+- `decorative` (Boolean) - Marks badge as decorative (hidden from screen readers)
+
+**Accessibility:**
+- Uses `role="status"` for screen reader announcements (non-decorative badges)
+- Supports `aria-live` attribute for dynamic content announcements
+- Automatically adds `aria-atomic="true"` when `aria-live` is set
+- Decorative mode (`decorative` property) hides badge from screen readers with `aria-hidden="true"`
+- Customizable ARIA labels for better context
+- Semantic color choices with sufficient contrast ratios
+- Full dark mode support with optimized color schemes
+
+**Usage:**
+
+```html
+<!-- Basic badge -->
+<edu-badge text="New"></edu-badge>
+
+<!-- Colored variants -->
+<edu-badge text="Active" variant="success"></edu-badge>
+<edu-badge text="Pending" variant="warning"></edu-badge>
+<edu-badge text="Error" variant="error"></edu-badge>
+<edu-badge text="Info" variant="info"></edu-badge>
+<edu-badge text="Primary" variant="primary"></edu-badge>
+
+<!-- Different sizes -->
+<edu-badge text="Small" size="small" variant="primary"></edu-badge>
+<edu-badge text="Medium" size="medium" variant="primary"></edu-badge>
+<edu-badge text="Large" size="large" variant="primary"></edu-badge>
+
+<!-- Notification count with live updates -->
+<span>Messages 
+  <edu-badge 
+    text="5" 
+    variant="primary" 
+    size="small"
+    aria-live="polite"
+    aria-label="5 unread messages">
+  </edu-badge>
+</span>
+
+<!-- Decorative badge (category tag) -->
+<edu-badge text="JavaScript" variant="info" decorative></edu-badge>
+```
+
+**JavaScript:**
+
+```javascript
+import { EduBadge } from 'edu-webcomponents';
+
+const badge = document.querySelector('edu-badge');
+badge.text = '10';
+badge.variant = 'error';
+```
+
+---
+
 ### 🔘 Button
 
 A customizable button component with hover effects and disabled state.

package/demo/index.html

@@ -114,6 +114,51 @@
             A collection of reusable web components built with Lit
           </p>
 
+          <!-- Badge Component -->
+          <section class="section">
+            <h2>Badge</h2>
+            <p>Small status indicators and labels for displaying counts, categories, or status.</p>
+
+            <div class="demo-item">
+              <div class="demo-label">All Variants</div>
+              <div class="button-group">
+                <edu-badge .text=${'Default'} .variant=${'default'}></edu-badge>
+                <edu-badge .text=${'Primary'} .variant=${'primary'}></edu-badge>
+                <edu-badge .text=${'Success'} .variant=${'success'}></edu-badge>
+                <edu-badge .text=${'Warning'} .variant=${'warning'}></edu-badge>
+                <edu-badge .text=${'Error'} .variant=${'error'}></edu-badge>
+                <edu-badge .text=${'Info'} .variant=${'info'}></edu-badge>
+              </div>
+            </div>
+
+            <div class="demo-item">
+              <div class="demo-label">All Sizes</div>
+              <div class="button-group">
+                <edu-badge .text=${'Small'} .variant=${'primary'} .size=${'small'}></edu-badge>
+                <edu-badge .text=${'Medium'} .variant=${'primary'} .size=${'medium'}></edu-badge>
+                <edu-badge .text=${'Large'} .variant=${'primary'} .size=${'large'}></edu-badge>
+              </div>
+            </div>
+
+            <div class="demo-item">
+              <div class="demo-label">Notification Counts</div>
+              <div class="button-group">
+                <span>Messages <edu-badge .text=${'5'} .variant=${'primary'} .size=${'small'}></edu-badge></span>
+                <span>Alerts <edu-badge .text=${'12'} .variant=${'error'} .size=${'small'}></edu-badge></span>
+                <span>Updates <edu-badge .text=${'3'} .variant=${'info'} .size=${'small'}></edu-badge></span>
+              </div>
+            </div>
+
+            <div class="demo-item">
+              <div class="demo-label">Status Badges</div>
+              <div class="button-group">
+                <edu-badge .text=${'Active'} .variant=${'success'}></edu-badge>
+                <edu-badge .text=${'Pending'} .variant=${'warning'}></edu-badge>
+                <edu-badge .text=${'Inactive'} .variant=${'error'}></edu-badge>
+              </div>
+            </div>
+          </section>
+
           <!-- Button Component -->
           <section class="section">
             <h2>Button</h2>

package/index.js

@@ -1,3 +1,4 @@
+export { EduBadge } from './src/edu-badge/index.js';
 export { EduButton } from './src/edu-button/index.js';
 export { EduDivider } from './src/edu-divider/index.js';
 export { EduLoadingSpinner } from './src/edu-loading-spinner/index.js';

package/package.json

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

package/src/edu-badge/EduBadge.stories.js

@@ -0,0 +1,171 @@
+import { html } from 'lit';
+import './index.js';
+
+export default {
+  title: 'Edu web components/EduBadge',
+  tags: ['autodocs'],
+};
+
+const createStory = args => {
+  const story = ({ text, variant, size } = args) => html`
+    <edu-badge .text=${text} .variant=${variant} .size=${size}></edu-badge>
+  `;
+  story.parameters = {
+    controls: { expanded: true },
+    docs: { source: { type: 'code' } },
+  };
+  story.argTypes = {
+    text: {
+      control: 'text',
+      description: 'Badge text content',
+      name: 'text',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'success', 'warning', 'error', 'info'],
+      description:
+        'Color variant: default / primary / success / warning / error / info',
+      name: 'variant',
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Size variant: small / medium / large',
+      name: 'size',
+    },
+  };
+  story.args = args;
+  return story;
+};
+
+const defaultArgs = {
+  text: 'Badge',
+  variant: 'default',
+  size: 'medium',
+};
+
+export const EduBadgeDefault = createStory({ ...defaultArgs });
+export const EduBadgePrimary = createStory({
+  ...defaultArgs,
+  variant: 'primary',
+});
+export const EduBadgeSuccess = createStory({
+  ...defaultArgs,
+  variant: 'success',
+});
+export const EduBadgeWarning = createStory({
+  ...defaultArgs,
+  variant: 'warning',
+});
+export const EduBadgeError = createStory({ ...defaultArgs, variant: 'error' });
+export const EduBadgeInfo = createStory({ ...defaultArgs, variant: 'info' });
+
+export const EduBadgeSmall = createStory({
+  ...defaultArgs,
+  variant: 'primary',
+  size: 'small',
+});
+export const EduBadgeLarge = createStory({
+  ...defaultArgs,
+  variant: 'primary',
+  size: 'large',
+});
+
+export const AllVariants = () => {
+  const story = () => html`
+    <div
+      style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;"
+    >
+      <edu-badge text="Default" variant="default"></edu-badge>
+      <edu-badge text="Primary" variant="primary"></edu-badge>
+      <edu-badge text="Success" variant="success"></edu-badge>
+      <edu-badge text="Warning" variant="warning"></edu-badge>
+      <edu-badge text="Error" variant="error"></edu-badge>
+      <edu-badge text="Info" variant="info"></edu-badge>
+    </div>
+  `;
+  story.parameters = {
+    controls: { disable: true },
+    docs: { source: { type: 'code' } },
+  };
+  return story();
+};
+
+export const AllSizes = () => {
+  const story = () => html`
+    <div
+      style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;"
+    >
+      <edu-badge text="Small" variant="primary" size="small"></edu-badge>
+      <edu-badge text="Medium" variant="primary" size="medium"></edu-badge>
+      <edu-badge text="Large" variant="primary" size="large"></edu-badge>
+    </div>
+  `;
+  story.parameters = {
+    controls: { disable: true },
+    docs: { source: { type: 'code' } },
+  };
+  return story();
+};
+
+export const UseCases = () => {
+  const story = () => html`
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+      <div>
+        <h3>Status Indicators</h3>
+        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+          <edu-badge text="Active" variant="success"></edu-badge>
+          <edu-badge text="Pending" variant="warning"></edu-badge>
+          <edu-badge text="Inactive" variant="error"></edu-badge>
+        </div>
+      </div>
+
+      <div>
+        <h3>Notification Counts</h3>
+        <div
+          style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;"
+        >
+          <span
+            >Messages
+            <edu-badge text="5" variant="primary" size="small"></edu-badge
+          ></span>
+          <span
+            >Alerts
+            <edu-badge text="12" variant="error" size="small"></edu-badge
+          ></span>
+          <span
+            >Updates <edu-badge text="3" variant="info" size="small"></edu-badge
+          ></span>
+        </div>
+      </div>
+
+      <div>
+        <h3>Category Tags</h3>
+        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+          <edu-badge text="JavaScript" variant="info" size="small"></edu-badge>
+          <edu-badge
+            text="Web Components"
+            variant="primary"
+            size="small"
+          ></edu-badge>
+          <edu-badge text="Lit" variant="success" size="small"></edu-badge>
+          <edu-badge text="CSS" variant="warning" size="small"></edu-badge>
+        </div>
+      </div>
+
+      <div>
+        <h3>Version Badge</h3>
+        <div style="display: flex; gap: 1rem;">
+          <edu-badge text="v1.0.0" variant="default"></edu-badge>
+          <edu-badge text="Beta" variant="warning"></edu-badge>
+          <edu-badge text="New" variant="success"></edu-badge>
+        </div>
+      </div>
+    </div>
+  `;
+  story.parameters = {
+    controls: { disable: true },
+    docs: { source: { type: 'code' } },
+  };
+  return story();
+};

package/src/edu-badge/index.js

@@ -0,0 +1 @@
+export { EduBadge } from './src/EduBadge.js';

package/src/edu-badge/src/EduBadge.js

@@ -0,0 +1,164 @@
+import { html, css, LitElement } from 'lit';
+import { colorsConstants, typographyConstants } from '../../stylesConstants.js';
+
+export class EduBadge extends LitElement {
+  static styles = [
+    colorsConstants,
+    typographyConstants,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-family: inherit;
+        font-weight: 600;
+        border-radius: 12px;
+        white-space: nowrap;
+        line-height: 1;
+        transition: background-color 0.2s ease-in-out;
+      }
+
+      /* Size variants */
+      .badge--small {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.75rem;
+      }
+
+      .badge--medium {
+        padding: 0.375rem 0.75rem;
+        font-size: 0.875rem;
+      }
+
+      .badge--large {
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+      }
+
+      /* Color variants - Light mode */
+      .badge--default {
+        background-color: var(--greyLight);
+        color: var(--blackLight);
+      }
+
+      .badge--primary {
+        background-color: var(--primary);
+        color: var(--primaryForeground);
+      }
+
+      .badge--success {
+        background-color: #4caf50;
+        color: #ffffff;
+      }
+
+      .badge--warning {
+        background-color: #ff9800;
+        color: #000000;
+      }
+
+      .badge--error {
+        background-color: #f44336;
+        color: #ffffff;
+      }
+
+      .badge--info {
+        background-color: #2196f3;
+        color: #ffffff;
+      }
+
+      /* Dark mode support */
+      @media (prefers-color-scheme: dark) {
+        .badge--default {
+          background-color: var(--greyLight);
+          color: var(--primaryForeground);
+        }
+
+        .badge--primary {
+          background-color: #4db8ff;
+          color: #000000;
+        }
+
+        .badge--success {
+          background-color: #66bb6a;
+          color: #000000;
+        }
+
+        .badge--warning {
+          background-color: #ffa726;
+          color: #000000;
+        }
+
+        .badge--error {
+          background-color: #ef5350;
+          color: #ffffff;
+        }
+
+        .badge--info {
+          background-color: #42a5f5;
+          color: #000000;
+        }
+      }
+    `,
+  ];
+
+  static properties = {
+    text: { type: String },
+    variant: { type: String },
+    size: { type: String },
+    ariaLabel: { type: String, attribute: 'aria-label' },
+    ariaLive: { type: String, attribute: 'aria-live' },
+    decorative: { type: Boolean },
+  };
+
+  constructor() {
+    super();
+    this.text = '';
+    this.variant = 'default';
+    this.size = 'medium';
+    this.ariaLabel = '';
+    this.ariaLive = '';
+    this.decorative = false;
+  }
+
+  render() {
+    const classes = `badge badge--${this.size} badge--${this.variant}`;
+
+    // Decorative badges should be hidden from screen readers
+    if (this.decorative) {
+      return html`
+        <span class=${classes} aria-hidden="true"> ${this.text} </span>
+      `;
+    }
+
+    // Accessibility attributes
+    const ariaAttrs = {
+      role: 'status',
+      'aria-label': this.ariaLabel || this.text,
+    };
+
+    // Add aria-live for dynamic content (like notification counts)
+    if (this.ariaLive) {
+      ariaAttrs['aria-live'] = this.ariaLive;
+      ariaAttrs['aria-atomic'] = 'true';
+    } else {
+      ariaAttrs['aria-live'] = 'off';
+    }
+
+    return html`
+      <span
+        class=${classes}
+        role=${ariaAttrs.role}
+        aria-label=${ariaAttrs['aria-label']}
+        aria-live=${ariaAttrs['aria-live']}
+        ?aria-atomic=${!!ariaAttrs['aria-atomic']}
+      >
+        ${this.text}
+      </span>
+    `;
+  }
+}
+
+customElements.define('edu-badge', EduBadge);

package/src/edu-badge/test/EduBadge.test.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+
+import '../index.js';
+
+describe('EduBadge', () => {
+  it('renders the text content', async () => {
+    const text = 'Test Badge';
+    const el = await fixture(html`<edu-badge text=${text}></edu-badge>`);
+
+    const badge = el.shadowRoot.querySelector('.badge');
+    expect(badge.textContent.trim()).to.equal(text);
+  });
+
+  it('passes the a11y audit', async () => {
+    const el = await fixture(html`<edu-badge text="Badge"></edu-badge>`);
+
+    await expect(el).shadowDom.to.be.accessible();
+  });
+});