edu-webcomponents 1.24.0 → 1.26.0

package/CHANGELOG.md

@@ -4,9 +4,24 @@ 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.26.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.25.0...v1.26.0)
+
+- feat: improve accessibility of EduButton according to 2.5.5 in WCAG 2.1 and 2.4.7 in WCAG 2.2 [`969a143`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/969a143fee573fcb0d93072de73a143a2e2116b6)
+- refactor: code [`65c723d`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/65c723dc344e9b8bb9da515b76e465c21eab3097)
+
+#### [v1.25.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.24.0...v1.25.0)
+
+> 11 January 2026
+
+- feat: implement dark mode [`a5470d0`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/a5470d0e3d7428ae6084dc3a1c4389ab4223517e)
+- chore: release v1.25.0 [`3e2bbc7`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/3e2bbc709607880488b421e48d3dc353d7870034)
+
 #### [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)
+> 9 January 2026
+
+- docs: improve README.md [`9300008`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/9300008a5fe9dedd24bc8b2ee39b663d01b9ef85)
+- chore: release v1.24.0 [`c66fe45`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/c66fe45ca3b150cb62126dfbd102b2244f59802b)
 
 #### [v1.23.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.22.0...v1.23.0)
 

package/README.md

@@ -14,6 +14,7 @@ A modern, lightweight collection of reusable web components built with [Lit](htt
 - ♿ **Accessible** - ARIA-compliant components with keyboard support
 - 🎯 **Framework-agnostic** - Works with any JavaScript framework or vanilla JS
 - 🎨 **Customizable** - CSS custom properties for easy theming
+- 🌓 **Dark mode support** - Automatic theme switching with `@media (prefers-color-scheme: dark)`
 - 📦 **Tree-shakeable** - Import only what you need
 - ✅ **Well-tested** - Comprehensive test coverage
 
@@ -261,9 +262,33 @@ Components use CSS custom properties for easy theming. Override these in your CS
   --greyLight: #e0e0e0;
   --greyDark: #757575;
   --blackLight: #424242;
+  --skeletonBase: #e0e0e0;
+  --skeletonHighlight: #f0f0f0;
 }
 ```
 
+### 🌓 Dark Mode Support
+
+All components automatically support dark mode via `@media (prefers-color-scheme: dark)`. When your operating system or browser is set to dark mode, the components will automatically adapt with optimized color schemes:
+
+```css
+@media (prefers-color-scheme: dark) {
+  :host {
+    --primary: #4db8ff;
+    --primaryHover: #66c2ff;
+    --primaryForeground: #000;
+    --blackLight: #e0e0e0;
+    --greyLight: #3d3d3d;
+    --greyDark: #666;
+    --disabled: #555;
+    --skeletonBase: #3d3d3d;
+    --skeletonHighlight: #4d4d4d;
+  }
+}
+```
+
+No additional configuration required - dark mode works out of the box!
+
 ## 🧪 Development
 
 ### Local Demo

package/package.json

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

package/src/edu-button/src/EduButton.js

@@ -1,9 +1,10 @@
 import { html, css, LitElement } from 'lit';
-import { colorsConstants } from '../../stylesConstants.js';
+import { colorsConstants, typographyConstants } from '../../stylesConstants.js';
 
 export class EduButton extends LitElement {
   static styles = [
     colorsConstants,
+    typographyConstants,
     css`
       :host {
         display: block;
@@ -18,12 +19,21 @@ export class EduButton extends LitElement {
         color: var(--primaryForeground);
         cursor: pointer;
         transition: background-color 0.2s ease-in-out;
+        font-family: inherit;
+        line-height: var(--lineHeight);
+        min-height: 44px;
+        min-width: 44px;
       }
 
       button:hover:not(:disabled) {
         background-color: var(--primaryHover);
       }
 
+      button:focus-visible {
+        outline: 2px solid var(--primary);
+        outline-offset: 2px;
+      }
+
       button:disabled {
         background-color: var(--disabled);
         cursor: not-allowed;
@@ -42,15 +52,16 @@ export class EduButton extends LitElement {
     super();
     this.text = 'Default text';
     this.type = 'button';
-    this.ariaLabel = this.text;
+    this.ariaLabel = '';
   }
 
   render() {
     return html`
       <button
         type=${this.type}
-        aria-label=${this.ariaLabel}
+        aria-label=${this.ariaLabel || this.text}
         ?disabled=${this.disabled}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
       >
         ${this.text}
       </button>
@@ -58,4 +69,4 @@ export class EduButton extends LitElement {
   }
 }
 
-window.customElements.define('edu-button', EduButton);
+customElements.define('edu-button', EduButton);

package/src/edu-button/test/EduButton.test.js

@@ -45,7 +45,7 @@ describe('EduButton', () => {
     expect(button.getAttribute('aria-label')).to.equal(textDefault);
   });
 
-  it('allows overriding aria-label via attribute', async () => {
+  it('allows overriding aria-label via ariaLabel property', async () => {
     const ariaLabel = 'Custom label';
     const el = await fixture(
       html`<edu-button aria-label=${ariaLabel}></edu-button>`

package/src/edu-loading-spinner/src/EduLoadingSpinner.js

@@ -6,7 +6,7 @@ export class EduLoadingSpinner extends LitElement {
     colorsConstants,
     css`
       .spinner {
-        border: 8px solid var(--primaryForeground);
+        border: 8px solid var(--greyLight);
         border-top: 8px solid var(--primary);
         border-radius: 50%;
         width: 60px;

package/src/edu-progress-bar/src/EduProgressBar.js

@@ -53,10 +53,14 @@ export class EduProgressBar extends LitElement {
     this.progressbarName = 'Progress bar';
   }
 
-  render() {
+  _calculatePercentage() {
     const safeMax = this.max > 0 ? this.max : 100;
     const safeValue = Math.max(0, this.value);
-    const percentage = Math.min(100, (safeValue / safeMax) * 100);
+    return Math.min(100, (safeValue / safeMax) * 100);
+  }
+
+  render() {
+    const percentage = this._calculatePercentage();
     const label = `${Math.round(percentage)}%`;
 
     return html`
@@ -64,8 +68,11 @@ export class EduProgressBar extends LitElement {
         class="bar-container"
         role="progressbar"
         aria-valuemin="0"
-        aria-valuemax="${safeMax}"
-        aria-valuenow="${Math.min(safeValue, safeMax)}"
+        aria-valuemax="${this.max > 0 ? this.max : 100}"
+        aria-valuenow="${Math.min(
+          Math.max(0, this.value),
+          this.max > 0 ? this.max : 100
+        )}"
         aria-label="${this.progressbarName}"
       >
         <div class="bar-fill" style="width: ${percentage}%"></div>

package/src/edu-skeleton-text/src/EduSkeletonText.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { colorsConstants } from '../../stylesConstants.js';
 
 export class EduSkeletonText extends LitElement {
   static properties = {
@@ -14,34 +15,42 @@ export class EduSkeletonText extends LitElement {
     this.lines = 1;
   }
 
-  static styles = css`
-    :host {
-      display: grid;
-      gap: 0.5em;
-    }
-
-    .line {
-      border-radius: 4px;
-      background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 37%, #e0e0e0 63%);
-      background-size: 400% 100%;
-      animation: shimmer 1.4s ease infinite;
-    }
-
-    @keyframes shimmer {
-      0% {
-        background-position: 100% 0;
+  static styles = [
+    colorsConstants,
+    css`
+      :host {
+        display: grid;
+        gap: 0.5em;
       }
-      100% {
-        background-position: -100% 0;
-      }
-    }
 
-    @media (prefers-reduced-motion: reduce) {
       .line {
-        animation: none;
+        border-radius: 4px;
+        background: linear-gradient(
+          90deg,
+          var(--skeletonBase) 25%,
+          var(--skeletonHighlight) 37%,
+          var(--skeletonBase) 63%
+        );
+        background-size: 400% 100%;
+        animation: shimmer 1.4s ease infinite;
+      }
+
+      @keyframes shimmer {
+        0% {
+          background-position: 100% 0;
+        }
+        100% {
+          background-position: -100% 0;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .line {
+          animation: none;
+        }
       }
-    }
-  `;
+    `,
+  ];
 
   render() {
     return html`
@@ -57,4 +66,4 @@ export class EduSkeletonText extends LitElement {
   }
 }
 
-window.customElements.define('edu-skeleton-text', EduSkeletonText);
+customElements.define('edu-skeleton-text', EduSkeletonText);

package/src/edu-tooltip/src/EduTooltip.js

@@ -8,12 +8,10 @@ const POSITION = {
   RIGHT: 'right',
 };
 
-function getPositions() {
-  return Object.values(POSITION);
-}
+const VALID_POSITIONS = Object.values(POSITION);
 
 function isPositionValid(position) {
-  return getPositions().includes(position.toLowerCase());
+  return VALID_POSITIONS.includes(position.toLowerCase());
 }
 
 export class EduTooltip extends LitElement {

package/src/stylesConstants.js

@@ -12,5 +12,32 @@ export const colorsConstants = css`
     --greyDark: #aaa;
 
     --disabled: #ccc;
+
+    --skeletonBase: #e0e0e0;
+    --skeletonHighlight: #f0f0f0;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --primary: #4db8ff;
+      --primaryHover: #66c2ff;
+      --primaryForeground: #000;
+
+      --blackLight: #e0e0e0;
+
+      --greyLight: #3d3d3d;
+      --greyDark: #666;
+
+      --disabled: #555;
+
+      --skeletonBase: #3d3d3d;
+      --skeletonHighlight: #4d4d4d;
+    }
+  }
+`;
+
+export const typographyConstants = css`
+  :host {
+    --lineHeight: 1.5;
   }
 `;