edu-webcomponents 1.19.24 → 1.21.0

package/CHANGELOG.md

@@ -4,8 +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.21.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.20.0...v1.21.0)
+
+- feat: add edu-divider component [`8f3f11b`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/8f3f11bc870afffff30438eea32036ff5f02f2b4)
+- feat: add edu-divider component [`eb8dc7d`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/eb8dc7dfb2579ed8cca86fbc1f2bcbeafaeac142)
+
+#### [v1.20.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.24...v1.20.0)
+
+> 6 January 2026
+
+- feat: add edu-loading-button component [`5532533`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/55325337b53a8ccd1f03d39cc7594ab56bdcdd0d)
+- chore: release v1.20.0 [`7fe2f7c`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/7fe2f7c9b1ad12a8c28f7d983ef7047ea9a49bc1)
+
 #### [v1.19.24](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.23...v1.19.24)
 
+> 5 January 2026
+
+- chore: release v1.19.24 [`5d069ba`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/5d069ba71b1183b05b75f4ca9b4dc3fb3ead85d6)
+
 #### [v1.19.23](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.19.22...v1.19.23)
 
 > 5 January 2026

package/index.js

@@ -1,3 +1,5 @@
 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';
 export { EduProgressBar } from './src/edu-progress-bar/index.js';
 export { EduTooltip } from './src/edu-tooltip/index.js';

package/package.json

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

package/src/edu-divider/EduDivider.stories.js

@@ -0,0 +1,39 @@
+import { html } from 'lit';
+import './index.js';
+
+export default {
+  title: 'Edu web components/EduDivider',
+  tags: ['autodocs'],
+};
+
+const createStory = args => {
+  const story = ({ label } = args) => html`
+    <div style="width: 400px;">
+      <edu-divider .label=${label}></edu-divider>
+    </div>
+  `;
+  story.parameters = {
+    controls: { expanded: true },
+    docs: { source: { type: 'code' } },
+  };
+  story.argTypes = {
+    label: {
+      control: 'text',
+      description: 'Optional label text to display in the divider',
+      name: 'label',
+    },
+  };
+  story.args = args;
+  return story;
+};
+
+const defaultArgs = {
+  label: '',
+};
+
+export const Default = createStory({ ...defaultArgs });
+
+export const WithLabel = createStory({
+  ...defaultArgs,
+  label: 'Section Label',
+});

package/src/edu-divider/index.js

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

package/src/edu-divider/src/EduDivider.js

@@ -0,0 +1,50 @@
+import { LitElement, html, css } from 'lit';
+import { colorsConstants } from '../../stylesConstants.js';
+
+export class EduDivider extends LitElement {
+  static properties = {
+    label: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.label = '';
+  }
+
+  static styles = [
+    colorsConstants,
+    css`
+      .divider {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: var(--greyDark);
+        font-size: 0.875rem;
+        width: 100%;
+      }
+
+      .line {
+        flex: 1;
+        height: 2px;
+        background-color: var(--greyDark);
+      }
+
+      .label {
+        padding: 0 0.75rem;
+        white-space: nowrap;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="divider" role="separator" aria-orientation="horizontal">
+        <div class="line"></div>
+        ${this.label ? html`<span class="label">${this.label}</span>` : null}
+        <div class="line"></div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('edu-divider', EduDivider);

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

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+import './index.js';
+
+export default {
+  title: 'Edu web components/EduLoadingSpinner',
+  tags: ['autodocs'],
+};
+
+const createStory = args => {
+  const story = () => html` <edu-loading-spinner></edu-loading-spinner> `;
+  story.parameters = {
+    controls: { expanded: true },
+    docs: { source: { type: 'code' } },
+  };
+  story.argTypes = {};
+  story.args = args;
+  return story;
+};
+
+const defaultArgs = {};
+
+export const EduLoadingSpinnerDefault = createStory({ ...defaultArgs });

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

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

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

@@ -0,0 +1,33 @@
+import { html, css, LitElement } from 'lit';
+import { colorsConstants } from '../../stylesConstants.js';
+
+export class EduLoadingSpinner extends LitElement {
+  static styles = [
+    colorsConstants,
+    css`
+      .spinner {
+        border: 8px solid var(--primaryForeground);
+        border-top: 8px solid var(--primary);
+        border-radius: 50%;
+        width: 60px;
+        height: 60px;
+        animation: spin 1.5s linear infinite;
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+  ];
+
+  render() {
+    return html` <div class="spinner"></div> `;
+  }
+}
+
+customElements.define('edu-loading-spinner', EduLoadingSpinner);

package/src/stylesConstants.js

@@ -8,7 +8,8 @@ export const colorsConstants = css`
 
     --blackLight: #333;
 
-    --greyLight: #eee;
+    --greyLight: #ddd;
+    --greyDark: #aaa;
 
     --disabled: #ccc;
   }