edu-webcomponents 1.15.4 → 1.17.0

package/.github/workflows/deploy-storybook-build-to-github-pages.yaml

@@ -1,28 +1,28 @@
-name: Build and Publish Storybook to GitHub Pages
-
-on:
-  push:
-    branches:
-      - 'main'
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '18.x'
-
-      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
-        with:
-          install_command: npm install
-          build_command: npm run build-storybook
-          path: storybook-static
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - 'main'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+        with:
+          install_command: npm install
+          build_command: npm run build-storybook
+          path: storybook-static
           checkout: false

package/.github/workflows/publish-packages-to-npm-registry.yaml

@@ -1,21 +1,21 @@
-name: Publish Package to npmjs
-on:
-  release:
-    types: [published]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20.x'
-          registry-url: 'https://registry.npmjs.org'
-      - run: npm install -g npm
-      - run: npm ci
-      - run: npm publish --provenance --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install -g npm
+      - run: npm ci
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/release-packages-to-github.yaml

@@ -1,19 +1,36 @@
-on: 
-  push:
-    branches:
-      - main
-      
-jobs:
-  release-on-merge:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-    env:
-      GITHUB_TOKEN: ${{ secrets.RELEASE }}
-    steps:
-      - name: release
-        uses: dexwritescode/release-on-merge-action@v1
-        with:
-          version-increment-strategy: minor
-          initial-version: '1.15.4'
-          tag-prefix: v
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Get version from package.json
+        id: version
+        run: echo "version=$(jq -r .version package.json)" >> $GITHUB_OUTPUT
+
+      - name: Create tag
+        run: |
+          git config user.name "github-actions"
+          git config user.email "github-actions@github.com"
+          git tag v${{ steps.version.outputs.version }}
+          git push origin v${{ steps.version.outputs.version }}
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: v${{ steps.version.outputs.version }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/CHANGELOG.md

@@ -1,61 +1,67 @@
-# CHANGELOG
-
-## 1.15.4 - 2025-08-02
-- Fix versioning of release
-
-## 1.15.3 - 2025-08-02
-- Fix EduButton is always disabled
-
-## 1.15.2 - 2025-08-02
-- Fix EduButton is always disabled
-
-## 1.15.1 - 2025-08-02
-- Fix EduButton is always disabled
-
-## 1.15.0 - 2025-08-02
-- Improve EduButton component by adding aria-label and type attributes, disabled state and styles
-
-## 1.14.0 - 2024-06-21
-- Update docs of publishing packages to npm registry with provenance
-
-## 1.13.0 - 2024-06-20
-- Fix provenance when publishing packages to npm registry
-
-## 1.12.0 - 2024-06-20
-- Update dependencies
-
-## 1.11.0 - 2024-06-19
-- Add provenance to packages in npm registry
-
-## 1.10.0 - 2024-06-17
-- Add keywords to the repository
-
-## 1.9.0 - 2024-06-16
-- Update dependencies
-
-## 1.8.0 - 2024-06-15
-- Setup [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) to manage updates of dependencies of package.json
-
-## 1.7.0 - 2024-06-02
-- Setup GitHub Actions to publish packages in npm registry
-
-## 1.6.0 - 2024-06-01
-- Setup GitHub Actions to tag and release after merge into main
-
-## 1.5.0 - 2024-05-30
-- Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages
-
-## 1.4.0 - 2024-05-30
-- Setup GitHub Actions to publish Storybook built artifacts in GitHub Pages
-
-## 1.3.0 - 2024-05-28
-- Setup Storybook
-
-## 1.2.0 - 2024-05-27
-- Setup the repository to be a library of web components
-
-## 1.1.0 - 2024-05-26
-- Setup Husky
-
-## 1.0.0 - 2024-05-25
+# CHANGELOG
+
+## 1.17.0 - 2025-08-02
+- Make releasing and tagging use the version from package.json
+
+## 1.16.1 - 2025-08-02
+- Fix versioning of release
+
+## 1.15.4 - 2025-08-02
+- Fix versioning of release
+
+## 1.15.3 - 2025-08-02
+- Fix EduButton is always disabled
+
+## 1.15.2 - 2025-08-02
+- Fix EduButton is always disabled
+
+## 1.15.1 - 2025-08-02
+- Fix EduButton is always disabled
+
+## 1.15.0 - 2025-08-02
+- Improve EduButton component by adding aria-label and type attributes, disabled state and styles
+
+## 1.14.0 - 2024-06-21
+- Update docs of publishing packages to npm registry with provenance
+
+## 1.13.0 - 2024-06-20
+- Fix provenance when publishing packages to npm registry
+
+## 1.12.0 - 2024-06-20
+- Update dependencies
+
+## 1.11.0 - 2024-06-19
+- Add provenance to packages in npm registry
+
+## 1.10.0 - 2024-06-17
+- Add keywords to the repository
+
+## 1.9.0 - 2024-06-16
+- Update dependencies
+
+## 1.8.0 - 2024-06-15
+- Setup [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) to manage updates of dependencies of package.json
+
+## 1.7.0 - 2024-06-02
+- Setup GitHub Actions to publish packages in npm registry
+
+## 1.6.0 - 2024-06-01
+- Setup GitHub Actions to tag and release after merge into main
+
+## 1.5.0 - 2024-05-30
+- Add docs to enable the deployment of GitHub Actions artifacts into GitHub Pages
+
+## 1.4.0 - 2024-05-30
+- Setup GitHub Actions to publish Storybook built artifacts in GitHub Pages
+
+## 1.3.0 - 2024-05-28
+- Setup Storybook
+
+## 1.2.0 - 2024-05-27
+- Setup the repository to be a library of web components
+
+## 1.1.0 - 2024-05-26
+- Setup Husky
+
+## 1.0.0 - 2024-05-25
 - (Initial commit) run npm init @open-wc and select these options: Scaffold a new project, scaffold a Web Component, add Linting (eslint & prettier) and Testing (web-test-runner), do not use typescript, use edu-webcomponents as tag name

package/README.md

@@ -1,62 +1,62 @@
-# Edu web components library
-
-This web components library follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
-
-## Installation
-
-```bash
-npm i edu-webcomponents
-```
-
-## Usage
-
-```html
-<script type="module">
-  import 'edu-webcomponents/index.js';
-</script>
-
-<webcomponent-tagname></webcomponent-tagname>
-```
-
-## Linting and formatting
-
-To scan the project for linting and formatting errors, run
-
-```bash
-npm run lint
-```
-
-To automatically fix linting and formatting errors, run
-
-```bash
-npm run format
-```
-
-## Testing with Web Test Runner
-
-To execute a single test run:
-
-```bash
-npm run test
-```
-
-To run the tests in interactive watch mode run:
-
-```bash
-npm run test:watch
-```
-
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
-
-## Local Demo with `web-dev-server`
-
-```bash
-npm start
-```
-
-To run a local development server that serves the basic demo located in `demo/index.html`
+# Edu web components library
+
+This web components library follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i edu-webcomponents
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'edu-webcomponents/index.js';
+</script>
+
+<webcomponent-tagname></webcomponent-tagname>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/index.html

@@ -1,29 +1,29 @@
-<!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>
-</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>
+</html>

package/docs/deploy-storybook-build-to-github-pages-docs.md

@@ -1,4 +1,4 @@
-# Deploy Storybook build to GitHub Pages by using GitHub Actions
-- Select "GitHub Actions" option as source below "Build and deployment" in your repository's Settings (see Pages in menu)
-- Use this workflow: https://storybook.js.org/docs/sharing/publish-storybook#github-pages
-- After that, deployment should work when running the ad hoc job
+# Deploy Storybook build to GitHub Pages by using GitHub Actions
+- Select "GitHub Actions" option as source below "Build and deployment" in your repository's Settings (see Pages in menu)
+- Use this workflow: https://storybook.js.org/docs/sharing/publish-storybook#github-pages
+- After that, deployment should work when running the ad hoc job

package/docs/husky-docs.md

@@ -1,12 +1,12 @@
-# Husky docs
-
-## Setup
-
-### Required
-- Node.js package: https://www.npmjs.com/package/husky
-- Version: 9.0.11
-
-### How to
-- Documentation followed: https://github.com/typicode/husky/blob/main/docs/get-started.md
-- Run this command to setup: npx husky init
-- Delete content in .husky/pre-commit and write: npm run format
+# Husky docs
+
+## Setup
+
+### Required
+- Node.js package: https://www.npmjs.com/package/husky
+- Version: 9.0.11
+
+### How to
+- Documentation followed: https://github.com/typicode/husky/blob/main/docs/get-started.md
+- Run this command to setup: npx husky init
+- Delete content in .husky/pre-commit and write: npm run format

package/docs/npm-check-updates-docs.md

@@ -1,11 +1,11 @@
-# npm-check-updates
-npm-check-updates is to manage updates of dependencies of package.json.
-
-Follow docs in npm registry to install and use: [npm-check-updates](https://www.npmjs.com/package/npm-check-updates).
-
-Useful commands:
-- check: ncu
-- check and upgrade: ncu -u
-
-Config file .ncurc.js:
+# npm-check-updates
+npm-check-updates is to manage updates of dependencies of package.json.
+
+Follow docs in npm registry to install and use: [npm-check-updates](https://www.npmjs.com/package/npm-check-updates).
+
+Useful commands:
+- check: ncu
+- check and upgrade: ncu -u
+
+Config file .ncurc.js:
 - Hook into npm-check-updates commands to manage, e.g. filtering.

package/docs/publish-packages-to-npm-registry-docs.md

@@ -1,46 +1,46 @@
-# Publish packages to npm registry by using GitHub Actions
-- Have an account in npm.com and create a PAT with write permissions
-- Add PAT created to GitHub secrets
-- Use workflow from [here](https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages#publishing-packages-to-the-npm-registry)
-
-## Provenance
-
-### What is is?
-
-You can generate provenance statements for the packages you publish. This allows you to publicly establish where a package was built and who published a package, which can increase supply-chain security for your packages.
-
-More info: [https://docs.npmjs.com/generating-provenance-statements](https://docs.npmjs.com/generating-provenance-statements).
-
-### How to
-Add permissions and provenance flag to the workflow job that publishes packages to npm registry, as you can see here:
-```
-name: Publish Package to npmjs
-on:
-  release:
-    types: [published]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20.x'
-          registry-url: 'https://registry.npmjs.org'
-      - run: npm install -g npm
-      - run: npm ci
-      - run: npm publish --provenance --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-```
-
-Add repository object with type and url properties to the package.json, as you can see here:
-```
- "repository": {
-    "type": "git",
-    "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
-  },
-```
+# Publish packages to npm registry by using GitHub Actions
+- Have an account in npm.com and create a PAT with write permissions
+- Add PAT created to GitHub secrets
+- Use workflow from [here](https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages#publishing-packages-to-the-npm-registry)
+
+## Provenance
+
+### What is is?
+
+You can generate provenance statements for the packages you publish. This allows you to publicly establish where a package was built and who published a package, which can increase supply-chain security for your packages.
+
+More info: [https://docs.npmjs.com/generating-provenance-statements](https://docs.npmjs.com/generating-provenance-statements).
+
+### How to
+Add permissions and provenance flag to the workflow job that publishes packages to npm registry, as you can see here:
+```
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install -g npm
+      - run: npm ci
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+```
+
+Add repository object with type and url properties to the package.json, as you can see here:
+```
+ "repository": {
+    "type": "git",
+    "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
+  },
+```

package/docs/release-packages-to-github-docs.md

@@ -1,4 +1,4 @@
-# Release and tag to GitHub by using GitHub Actions
-Use workflow from [here](https://github.com/marketplace/actions/release-on-merge-action) and:
-- Add corresponding inputs
-- Create the needed token and add it to GitHub secrets
+# Release and tag to GitHub by using GitHub Actions
+Use workflow from [here](https://github.com/marketplace/actions/release-on-merge-action) and:
+- Add corresponding inputs
+- Create the needed token and add it to GitHub secrets

package/index.js

@@ -1 +1 @@
-export { EduButton } from './src/EduButton.js';
+export { EduButton } from './src/EduButton.js';

package/package.json

@@ -1,73 +1,73 @@
-{
-  "name": "edu-webcomponents",
-  "description": "Webcomponent edu-webcomponents following open-wc recommendations",
-  "keywords": [
-    "web components library",
-    "web components catalog",
-    "webcomponents library",
-    "webcomponents catalog",
-    "web components",
-    "webcomponents"
-  ],
-  "license": "MIT",
-  "author": "edu-webcomponents",
-  "version": "1.15.4",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
-  },
-  "type": "module",
-  "main": "index.js",
-  "module": "index.js",
-  "exports": {
-    ".": "./index.js"
-  },
-  "scripts": {
-    "analyze": "cem analyze --litelement",
-    "start": "web-dev-server",
-    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
-    "test": "web-test-runner --coverage",
-    "test:watch": "web-test-runner --watch",
-    "prepare": "husky",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "lit": "^2.8.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.5.0",
-    "@custom-elements-manifest/analyzer": "^0.10.2",
-    "@open-wc/eslint-config": "^9.2.2",
-    "@open-wc/testing": "^3.2.2",
-    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-links": "^8.1.10",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
-    "@storybook/blocks": "^8.1.10",
-    "@storybook/test": "^8.1.10",
-    "@storybook/web-components": "^8.1.10",
-    "@storybook/web-components-webpack5": "^8.1.10",
-    "@web/dev-server": "^0.4.5",
-    "@web/test-runner": "^0.18.2",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8",
-    "storybook": "^8.1.10"
-  },
-  "customElements": "custom-elements.json",
-  "eslintConfig": {
-    "extends": [
-      "@open-wc",
-      "prettier",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  }
+{
+  "name": "edu-webcomponents",
+  "description": "Webcomponent edu-webcomponents following open-wc recommendations",
+  "keywords": [
+    "web components library",
+    "web components catalog",
+    "webcomponents library",
+    "webcomponents catalog",
+    "web components",
+    "webcomponents"
+  ],
+  "license": "MIT",
+  "author": "edu-webcomponents",
+  "version": "1.17.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eduardocruzpalacios/edu-webcomponents"
+  },
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "web-dev-server",
+    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
+    "test": "web-test-runner --coverage",
+    "test:watch": "web-test-runner --watch",
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "lit": "^2.8.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@custom-elements-manifest/analyzer": "^0.10.2",
+    "@open-wc/eslint-config": "^9.2.2",
+    "@open-wc/testing": "^3.2.2",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@storybook/web-components": "^8.1.10",
+    "@storybook/web-components-webpack5": "^8.1.10",
+    "@web/dev-server": "^0.4.5",
+    "@web/test-runner": "^0.18.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.8.8",
+    "storybook": "^8.1.10"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "extends": [
+      "@open-wc",
+      "prettier",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  }
 }

package/src/EduButton.js

@@ -1,57 +1,57 @@
-import { html, css, LitElement } from 'lit';
-
-export class EduButton extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-    }
-
-    button {
-      padding: 0.5rem 1rem;
-      font-size: 1rem;
-      border: none;
-      border-radius: 4px;
-      background-color: #007acc;
-      color: white;
-      cursor: pointer;
-      transition: background-color 0.2s ease-in-out;
-    }
-
-    button:hover:not(:disabled) {
-      background-color: #005fa3;
-    }
-
-    button:disabled {
-      background-color: #ccc;
-      cursor: not-allowed;
-    }
-  `;
-
-  static properties = {
-    text: { type: String },
-    type: { type: String },
-    ariaLabel: { type: String, attribute: 'aria-label' },
-    disabled: { type: Boolean, reflect: true },
-  };
-
-  constructor() {
-    super();
-    this.text = 'Default text';
-    this.type = 'button';
-    this.ariaLabel = this.text;
-  }
-
-  render() {
-    return html`
-      <button
-        type=${this.type}
-        aria-label=${this.ariaLabel}
-        ?disabled=${this.disabled}
-      >
-        ${this.text}
-      </button>
-    `;
-  }
-}
-
-window.customElements.define('edu-button', EduButton);
+import { html, css, LitElement } from 'lit';
+
+export class EduButton extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    button {
+      padding: 0.5rem 1rem;
+      font-size: 1rem;
+      border: none;
+      border-radius: 4px;
+      background-color: #007acc;
+      color: white;
+      cursor: pointer;
+      transition: background-color 0.2s ease-in-out;
+    }
+
+    button:hover:not(:disabled) {
+      background-color: #005fa3;
+    }
+
+    button:disabled {
+      background-color: #ccc;
+      cursor: not-allowed;
+    }
+  `;
+
+  static properties = {
+    text: { type: String },
+    type: { type: String },
+    ariaLabel: { type: String, attribute: 'aria-label' },
+    disabled: { type: Boolean, reflect: true },
+  };
+
+  constructor() {
+    super();
+    this.text = 'Default text';
+    this.type = 'button';
+    this.ariaLabel = this.text;
+  }
+
+  render() {
+    return html`
+      <button
+        type=${this.type}
+        aria-label=${this.ariaLabel}
+        ?disabled=${this.disabled}
+      >
+        ${this.text}
+      </button>
+    `;
+  }
+}
+
+window.customElements.define('edu-button', EduButton);