BeAPI · firestar300 · Jul 21, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,40 +5,60 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 2.0.1 - 2026-07-21
+
+### Added
+
+- Toggle: add `onBlur` and `onEscPressed` callback options
+- Demo site: add GitHub and documentation links on the home page and every example page
+- Demo site: add favicon
+
+### Fixed
+
+- Link: support initializing on the `a[target="_blank"]` element itself (not only descendants), and process every matching link when `hasIcon` is `false` (early `return` stopped after the first link)
+- Toggle: prevent an unintended `onClick` call when closing with Escape
+- Demo site: scope toggle `[aria-hidden="true"]` styles to `#toggle-*` targets so unrelated hidden content is not affected
+
+### Changed
+
+- Move pnpm configuration (`overrides`, `peerDependencyRules`) from `package.json` to `pnpm-workspace.yaml`
+- Add `homepage` field to `package.json` (`https://beapi.github.io/be-a11y/`)
+- Bump development dependencies (`postcss`, Vite, `@babel/core`)
+
 ## 2.0.0 - 2026-04-13
 
 First stable release of the 2.x line. All changes from `2.0.0-beta.1` through `2.0.0-beta.7` are included; see those sections for detailed component and API notes.
 
-### Changed (2026-04-13)
+### Changed
 
 - CI: Publish to npm from `main` via GitHub Actions using npm Trusted Publishing (OIDC)
 - Pin Node.js to 22.14.0 via Volta (required for npm Trusted Publishing CLI requirements)
 - Playwright: use `defineConfig` in `playwright.config.ts` for current `@playwright/test` exports
 - Align on Vite 7.3.x for library build, dev server, and demo site (single toolchain)
 
-### Fixed (2026-04-13)
+### Fixed
 
 - Tests: resolve duplicate Playwright test title in `Dropdown.test.ts`
 
 ## 2.0.0-beta.7 - 2026-01-08
 
-### Fixed (2026-01-08)
+### Fixed
 
 - Fix `aria-expanded` attribute not updating correctly when closing panels in Accordion component
   - When opening a new panel with `allowMultiple: false`, previously opened panels now correctly have their trigger's `aria-expanded` set to `false`
   - Added test to verify this behavior
 
 ## 2.0.0-beta.6 - 2025-12-17
 
-### Fixed (2025-12-17)
+### Fixed
 
 - Fix `closeOnBlur` behavior in Toggle component
   - Toggle no longer closes when focus moves to an element inside the toggled target
   - Added `focusout` listener on target to properly close when focus leaves the entire toggle area
 
 ## 2.0.0-beta.5 - 2025-12-15
 
-### Changed (2025-12-15)
+### Changed
 
 - Improve TypeScript build configuration for NPM package compatibility
   - Add `tsconfig.build.json` for generating type declarations (`.d.ts`)
@@ -48,7 +68,7 @@ First stable release of the 2.x line. All changes from `2.0.0-beta.1` through `2
 
 ## 2.0.0-beta.4 - 2025-12-13
 
-### Added (2025-12-13)
+### Added
 
 - Add new Dialog component based on native HTML `<dialog>` element
   - Leverages native browser capabilities (`show()`, `showModal()`, `close()` methods)
@@ -60,7 +80,7 @@ First stable release of the 2.x line. All changes from `2.0.0-beta.1` through `2
 - Add complete Dialog documentation with usage examples
 - Add comparison between Dialog and Modal components in documentation
 
-### Fixed (2025-12-13)
+### Fixed
 
 - Fix TypeScript/ESLint errors in Accordion component
   - Add null safety checks for media query pattern matching

diff --git a/examples/accessible-accordion/index.html b/examples/accessible-accordion/index.html
@@ -3,6 +3,7 @@
 
     <head>
         <meta charset="UTF-8">
+        <link rel="icon" href="../../src/favicon.png" type="image/png">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Accessible Accordion</title>
@@ -22,6 +23,17 @@
                         <li><a href="../accessible-slider/index.html">Slider</a></li>
                         <li><a href="../accessible-tabs/index.html">Tabs</a></li>
                         <li><a href="../accessible-toggle/index.html">Toggle</a></li>
+                        <li>
+                            <a class="github-button" href="https://github.com/BeAPI/be-a11y" target="_blank"
+                                rel="noopener noreferrer">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
+                                    fill="currentColor" aria-hidden="true" focusable="false">
+                                    <path
+                                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                                </svg>
+                                GitHub
+                            </a>
+                        </li>
                     </ul>
                 </nav>
             </aside>
@@ -33,6 +45,17 @@ <h1>Accessible Accordion</h1>
                     collapsed independently, allowing users to focus on specific content while reducing visual clutter.
                 </p>
 
+                <a class="github-button"
+                    href="https://github.com/BeAPI/be-a11y/blob/main/examples/accessible-accordion/README.md"
+                    target="_blank" rel="noopener noreferrer">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
+                        fill="currentColor" aria-hidden="true" focusable="false">
+                        <path
+                            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                    </svg>
+                    Documentation
+                </a>
+
                 <div id="tab" class="tabs">
                     <div class="tabs__tablist" role="tablist" aria-label="Tabs component">
                         <button class="tabs__tab core-tab" role="tab" aria-selected="true"
@@ -826,14 +849,16 @@ <h3>
             </div>
 
             <script type="module">
-                import { Accordion, Tabs } from '../../be-a11y.ts'
+                import { Accordion, Link, Tabs } from '../../be-a11y.ts'
                 import '../../src/css/index.css'
                 import './style.css'
 
                 Tabs.init('#tab', {
                     tabListSelector: '.core-tab'
                 })
 
+                Link.init('a.github-button')
+
                 Accordion.preset = {
                     '#accordion-demo-1': {},
                     '#accordion-demo-2': { hasAnimation: true },

diff --git a/examples/accessible-dialog/index.html b/examples/accessible-dialog/index.html
@@ -3,6 +3,7 @@
 
     <head>
         <meta charset="UTF-8">
+        <link rel="icon" href="../../src/favicon.png" type="image/png">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Accessible Modal</title>
@@ -22,6 +23,17 @@
                         <li><a href="../accessible-slider/index.html">Slider</a></li>
                         <li><a href="../accessible-tabs/index.html">Tabs</a></li>
                         <li><a href="../accessible-toggle/index.html">Toggle</a></li>
+                        <li>
+                            <a class="github-button" href="https://github.com/BeAPI/be-a11y" target="_blank"
+                                rel="noopener noreferrer">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
+                                    fill="currentColor" aria-hidden="true" focusable="false">
+                                    <path
+                                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                                </svg>
+                                GitHub
+                            </a>
+                        </li>
                     </ul>
                 </nav>
             </aside>
@@ -34,6 +46,17 @@ <h1>Accessible Dialog</h1>
                     mechanisms for dismissal, making it fully accessible to screen reader users and keyboard-only
                     navigation.</p>
 
+                <a class="github-button"
+                    href="https://github.com/BeAPI/be-a11y/blob/main/examples/accessible-dialog/README.md"
+                    target="_blank" rel="noopener noreferrer">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
+                        fill="currentColor" aria-hidden="true" focusable="false">
+                        <path
+                            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                    </svg>
+                    Documentation
+                </a>
+
                 <div id="tab" class="tabs">
                     <div class="tabs__tablist" role="tablist" aria-label="Tabs component">
                         <button class="tabs__tab core-tab" role="tab" aria-selected="true"
@@ -175,14 +198,16 @@ <h3 class="dialog__title">Add delivery address</h3>
             </div>
 
             <script type="module">
-                import { Dialog, Tabs } from '../../be-a11y.ts'
+                import { Dialog, Link, Tabs } from '../../be-a11y.ts'
                 import '../../src/css/index.css'
                 import './style.css'
 
                 Tabs.init('#tab', {
                     tabListSelector: '.core-tab'
                 })
 
+                Link.init('a.github-button')
+
                 Dialog.preset = {
                     '#demo-1': {
                         closeButtonSelector: '.dialog__close',

diff --git a/examples/accessible-dropdown/index.html b/examples/accessible-dropdown/index.html
@@ -3,6 +3,7 @@
 
     <head>
         <meta charset="UTF-8">
+        <link rel="icon" href="../../src/favicon.png" type="image/png">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Accessible Dropdown</title>
@@ -22,6 +23,17 @@
                         <li><a href="../accessible-slider/index.html">Slider</a></li>
                         <li><a href="../accessible-tabs/index.html">Tabs</a></li>
                         <li><a href="../accessible-toggle/index.html">Toggle</a></li>
+                        <li>
+                            <a class="github-button" href="https://github.com/BeAPI/be-a11y" target="_blank"
+                                rel="noopener noreferrer">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
+                                    fill="currentColor" aria-hidden="true" focusable="false">
+                                    <path
+                                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                                </svg>
+                                GitHub
+                            </a>
+                        </li>
                     </ul>
                 </nav>
             </aside>
@@ -32,6 +44,17 @@ <h1>Accessible Dropdown</h1>
                     screen reader support. Users can select from a list of options that appears when triggered, with
                     customizable behavior for selection, events, and responsive design.</p>
 
+                <a class="github-button"
+                    href="https://github.com/BeAPI/be-a11y/blob/main/examples/accessible-dropdown/README.md"
+                    target="_blank" rel="noopener noreferrer">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
+                        fill="currentColor" aria-hidden="true" focusable="false">
+                        <path
+                            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                    </svg>
+                    Documentation
+                </a>
+
                 <div id="tab" class="tabs">
                     <div class="tabs__tablist" role="tablist" aria-label="Tabs component">
                         <button class="tabs__tab core-tab" role="tab" aria-selected="true"
@@ -184,14 +207,16 @@ <h2>Dropdown closed on focus out</h2>
             </div>
 
             <script type="module">
-                import { Dropdown, Tabs } from '../../be-a11y.ts'
+                import { Dropdown, Link, Tabs } from '../../be-a11y.ts'
                 import '../../src/css/index.css'
                 import './style.css'
 
                 Tabs.init('#tab', {
                     tabListSelector: '.core-tab'
                 })
 
+                Link.init('a.github-button')
+
                 Dropdown.preset = {
                     '#dropdown-1': {},
                     '#dropdown-2': {

diff --git a/examples/accessible-link/index.html b/examples/accessible-link/index.html
@@ -3,6 +3,7 @@
 
     <head>
         <meta charset="UTF-8">
+        <link rel="icon" href="../../src/favicon.png" type="image/png">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Accessible Link</title>
@@ -22,6 +23,17 @@
                         <li><a href="../accessible-slider/index.html">Slider</a></li>
                         <li><a href="../accessible-tabs/index.html">Tabs</a></li>
                         <li><a href="../accessible-toggle/index.html">Toggle</a></li>
+                        <li>
+                            <a class="github-button" href="https://github.com/BeAPI/be-a11y" target="_blank"
+                                rel="noopener noreferrer">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
+                                    fill="currentColor" aria-hidden="true" focusable="false">
+                                    <path
+                                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                                </svg>
+                                GitHub
+                            </a>
+                        </li>
                     </ul>
                 </nav>
             </aside>
@@ -33,6 +45,17 @@ <h1>Accessible new tab link</h1>
                     is particularly useful for screen reader users, as it provides them with additional information
                     about the link's behavior.</p>
 
+                <a class="github-button"
+                    href="https://github.com/BeAPI/be-a11y/blob/main/examples/accessible-link/README.md" target="_blank"
+                    rel="noopener noreferrer">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
+                        fill="currentColor" aria-hidden="true" focusable="false">
+                        <path
+                            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                    </svg>
+                    Documentation
+                </a>
+
                 <div id="tab" class="tabs">
                     <div class="tabs__tablist" role="tablist" aria-label="Tabs component">
                         <button class="tabs__tab core-tab" role="tab" aria-selected="true"
@@ -87,6 +110,8 @@ <h2>With a custom icon</h2>
                     tabListSelector: '.core-tab'
                 })
 
+                Link.init('a.github-button')
+
                 Link.preset = {
                     '#link-1': {},
                     '#link-2': {