Initial Release

CHANGELOG.md

@@ -7,93 +7,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-### Added
-- Add `@aegisjsproject/dev-server`
-
-### Changed
-- Update CSP, template, etc
-
-## [v1.1.3] - 2025-11-21
-
-### Added
-- Add `npm start` script
-
-### Changed
-- Update npm publishing
-
-## [v1.1.2] - 2025-05-01
-
-### Changed
-- Use `eslint` & `rollup` directly instead of by other packages
-- Update node version via `.npmrc`
-- Update Node CI workflow
-- Install & use `@shgysk8zer0/eslint-config`
-- Add support for `node --test`, including ignoring tests for publishing
-- Update ESLint & super-linter
-- Switch to more basic Rollup config
-- Update `exports` and `main` accordingly
-
-### Fixed
-- Fix missed renaming in README
-
-## Removed
-- Remove old ESLint config files
-
-## [v1.1.1] - 2023-09-24
-
-### Added
-- Add `unpkg` to `package.json`
-- Add badges in README
-
-### Changed
-- Update `exports` to `package.json` to handle wider variety
-
-### Fixed
-- Fix typo in `fix:js` script
-
-### [v1.1.0] - 2023-07-03
-
-### Changed
-- Update to node 20
-- Update npm publishing GH Action
-
-## [v1.0.5] - 2023-07-02
-
-### Added
-- Add `funding`
-
-### Changed
-- Updated GitHub Actions workflows 
-- Update versioning & lock-file scripts
-- Update `.npmignore` & `.gitignore`
-
-## [v1.0.4] - 2023-06-08
-
-### Added
-- Install `@shgysk8zer0/npm-utils`
-- Add `exports` to package config
-
-### Removed
-- Uninstall `rollup`, `eslint`
-
-### Changed
-- Use `getConfig()` from `@shgysk8zer0/js-utils/rollup` for rollup config
-
-## [v1.0.3] - 2023-06-01
-
-### Fixed
-- Revert to old Release Action, now with permissions & link to changelog
-
-## [v1.0.2] - 2023-06-01
-
-### Fixed
-- Fix `changelog-entry` to match `[$version]` instead of `$version`
-
-## [v1.0.1] - 2023-05-31
-
-### Fixed
-- Update GitHub Release workflow to use [Auto Release](https://github.com/marketplace/actions/auto-release)
-
-## [v1.0.0] - 2023-05-31
+## [v1.0.0] - 2026-04-27
 
 Initial Release

README.md

@@ -1,24 +1,24 @@
-# npm-template
+# `@aegisjsproject/button`
 
-A template repo for npm packages
+A simple base custom `<button>` element because Safari does not support `<button is="...">`
 
-[![CodeQL](https://github.com/shgysk8zer0/npm-template/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/shgysk8zer0/npm-template/actions/workflows/codeql-analysis.yml)
-![Node CI](https://github.com/shgysk8zer0/npm-template/workflows/Node%20CI/badge.svg)
-![Lint Code Base](https://github.com/shgysk8zer0/npm-template/workflows/Lint%20Code%20Base/badge.svg)
+[![CodeQL](https://github.com/AegisJSProject/button/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/AegisJSProject/button/actions/workflows/codeql-analysis.yml)
+![Node CI](https://github.com/AegisJSProject/button/workflows/Node%20CI/badge.svg)
+![Lint Code Base](https://github.com/AegisJSProject/button/workflows/Lint%20Code%20Base/badge.svg)
 
-[![GitHub license](https://img.shields.io/github/license/shgysk8zer0/npm-template.svg)](https://github.com/shgysk8zer0/npm-template/blob/master/LICENSE)
-[![GitHub last commit](https://img.shields.io/github/last-commit/shgysk8zer0/npm-template.svg)](https://github.com/shgysk8zer0/npm-template/commits/master)
-[![GitHub release](https://img.shields.io/github/release/shgysk8zer0/npm-template?logo=github)](https://github.com/shgysk8zer0/npm-template/releases)
+[![GitHub license](https://img.shields.io/github/license/AegisJSProject/button.svg)](https://github.com/AegisJSProject/button/blob/master/LICENSE)
+[![GitHub last commit](https://img.shields.io/github/last-commit/AegisJSProject/button.svg)](https://github.com/AegisJSProject/button/commits/master)
+[![GitHub release](https://img.shields.io/github/release/AegisJSProject/button?logo=github)](https://github.com/AegisJSProject/button/releases)
 [![GitHub Sponsors](https://img.shields.io/github/sponsors/shgysk8zer0?logo=github)](https://github.com/sponsors/shgysk8zer0)
 
-[![npm](https://img.shields.io/npm/v/@shgysk8zer0/npm-template)](https://www.npmjs.com/package/@shgysk8zer0/npm-template)
-![node-current](https://img.shields.io/node/v/@shgysk8zer0/npm-template)
-![npm bundle size gzipped](https://img.shields.io/bundlephobia/minzip/@shgysk8zer0/npm-template)
-[![npm](https://img.shields.io/npm/dw/@shgysk8zer0/npm-template?logo=npm)](https://www.npmjs.com/package/@shgysk8zer0/npm-template)
+[![npm](https://img.shields.io/npm/v/@aegisjsproject/button)](https://www.npmjs.com/package/@aegisjsproject/button)
+![node-current](https://img.shields.io/node/v/@aegisjsproject/button)
+![npm bundle size gzipped](https://img.shields.io/bundlephobia/minzip/@aegisjsproject/button)
+[![npm](https://img.shields.io/npm/dw/@aegisjsproject/button?logo=npm)](https://www.npmjs.com/package/@aegisjsproject/button)
 
-[![GitHub followers](https://img.shields.io/github/followers/shgysk8zer0.svg?style=social)](https://github.com/shgysk8zer0)
-![GitHub forks](https://img.shields.io/github/forks/shgysk8zer0/npm-template.svg?style=social)
-![GitHub stars](https://img.shields.io/github/stars/shgysk8zer0/npm-template.svg?style=social)
+[![GitHub followers](https://img.shields.io/github/followers/AegisJSProject.svg?style=social)](https://github.com/shgysk8zer0)
+![GitHub forks](https://img.shields.io/github/forks/AegisJSProject/button.svg?style=social)
+![GitHub stars](https://img.shields.io/github/stars/AegisJSProject/button.svg?style=social)
 [![Twitter Follow](https://img.shields.io/twitter/follow/shgysk8zer0.svg?style=social)](https://twitter.com/shgysk8zer0)
 
 [![Donate using Liberapay](https://img.shields.io/liberapay/receives/shgysk8zer0.svg?logo=liberapay)](https://liberapay.com/shgysk8zer0/donate "Donate using Liberapay")
@@ -27,3 +27,11 @@ A template repo for npm packages
 - [Code of Conduct](./.github/CODE_OF_CONDUCT.md)
 - [Contributing](./.github/CONTRIBUTING.md)
 <!-- - [Security Policy](./.github/SECURITY.md) -->
+
+```html
+<share-button data-share-title="Example" data-share-url="https://example.com/hello" data-share-text="Hello, World!">Share</share-button>
+<print-button>Print</print-button>
+<reload-button>Reload</reload-button>
+<back-button>Back</back-button>
+<forward-button>Forward</forward-button>
+```

back.js

@@ -0,0 +1,17 @@
+import { CustomButton } from './button.js';
+
+export class BackButton extends CustomButton {
+	constructor() {
+		super();
+
+		this.addEventListener('click', ({ currentTarget }) => {
+			if (! currentTarget.disabled) {
+				history.back();
+			}
+		});
+	}
+
+	static {
+		this.register('back-button');
+	}
+}

base.js

@@ -0,0 +1,88 @@
+import { reset } from '@aegisjsproject/styles/reset.js';
+import { layers } from '@aegisjsproject/styles/layers.js';
+import { customButton } from '@aegisjsproject/styles/custom-button.js';
+
+const styles = [layers, reset, customButton];
+
+export class CustomButton extends HTMLElement {
+	#shadow = this.attachShadow({ mode: 'open' });
+	#internals = this.attachInternals();
+	#oldTabIndex = NaN;
+	#controller;
+
+	constructor() {
+		super();
+
+		this.#shadow.adoptedStyleSheets = styles;
+		this.#internals.role = 'button';
+	}
+
+	connectedCallback() {
+		this.#controller = new AbortController();
+
+		if (this.#shadow.childElementCount === 0) {
+			this.#shadow.append(document.createElement('slot'));
+		}
+
+		if (! (this.hasAttribute('tabindex') || this.disabled)) {
+			this.tabIndex = 0;
+		}
+
+		this.addEventListener('keydown', event => {
+			if (event.key === 'Enter' && ! this.disabled) {
+				event.preventDefault();
+				event.currentTarget.click();
+			} else if (event.key === ' ' && ! this.disabled) {
+				event.preventDefault();
+			}
+		}, { signal: this.#controller.signal });
+
+		this.addEventListener('keyup', event => {
+			if (event.key === ' ' && ! this.disabled) {
+				event.preventDefault();
+				event.currentTarget.click();
+			}
+		}, { signal: this.#controller.signal });
+	}
+
+	attributeChangedCallback(name, oldVal, newVal) {
+		switch(name) {
+			case 'disabled':
+				if (typeof newVal === 'string') {
+					this.#oldTabIndex = this.hasAttribute('tabindex') ? this.tabIndex : 0;
+					this.tabIndex = -1;
+					this.#internals.states.add('disabled');
+					this.#internals.ariaDisabled = 'true';
+
+					if (this.isSameNode(this.ownerDocument.activeElement)) {
+						this.blur();
+					}
+				} else {
+					this.#internals.states.delete('disabled');
+					this.#internals.ariaDisabled = null;
+					this.tabIndex = Number.isNaN(this.#oldTabIndex) ? 0 : this.#oldTabIndex;
+				}
+				break;
+		}
+	}
+
+	disconnectedCallback() {
+		this.#controller.abort();
+	}
+
+	get disabled() {
+		return this.hasAttribute('disabled');
+	}
+
+	set disabled(val) {
+		this.toggleAttribute('disabled', val);
+	}
+
+	static get observedAttributes() {
+		return ['disabled'];
+	}
+
+	static register(tag) {
+		customElements.define(tag, this);
+	}
+}

button.js

@@ -0,0 +1,6 @@
+export { CustomButton } from './base.js';
+export { ShareButton } from './share.js';
+export { PrintButton } from './print.js';
+export { BackButton } from './back.js';
+export { ForwardButton } from './forward.js';
+export { ReloadButton } from './reload.js';

eslint.config.js

@@ -1,3 +1,3 @@
-import { node } from '@shgysk8zer0/eslint-config';
+import { browser } from '@shgysk8zer0/eslint-config';
 
-export default node({ files: ['**/*.js'], ignores: ['**/*.min.js', '**/*.cjs', '**/*.mjs'] });
+export default browser({ files: ['**/*.js'], ignores: ['**/*.min.js', '**/*.cjs', '**/*.mjs'] });

forward.js

@@ -0,0 +1,17 @@
+import { CustomButton } from './button.js';
+
+export class ForwardButton extends CustomButton {
+	constructor() {
+		super();
+
+		this.addEventListener('click', ({ currentTarget }) => {
+			if (! currentTarget.disabled) {
+				history.forward();
+			}
+		});
+	}
+
+	static {
+		this.register('forward-button');
+	}
+}

http.config.js

@@ -1,5 +1,4 @@
 import { imports } from '@shgysk8zer0/importmap';
-import { checkCacheItem, setCacheItem } from '@aegisjsproject/http-utils/cache.js';
 import { addTrustedTypePolicy, addScriptSrc, useDefaultCSP } from '@aegisjsproject/http-utils/csp.js';
 
 addScriptSrc(
@@ -17,7 +16,6 @@ export default {
 	open: true,
 	requestPreprocessors: [
 		'@aegisjsproject/http-utils/request-id.js',
-		checkCacheItem,
 	],
 	responsePostprocessors: [
 		'@aegisjsproject/http-utils/compression.js',
@@ -28,6 +26,5 @@ export default {
 				response.headers.append('Link', `<${imports['@shgysk8zer0/polyfills']}>; rel="preload"; as="script"; fetchpriority="high"; crossorigin="anonymous"; referrerpolicy="no-referrer"`);
 			}
 		},
-		setCacheItem,
 	],
 };

index.html

@@ -8,12 +8,19 @@
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any" />
 		<script type="importmap" integrity="{{ INTEGRITY }}">{{ IMPORTMAP }}</script>
 		<script src="{{ POLYFILLS }}" referrerpolicy="no-referrer" crossorigin="anonymous" defer=""></script>
+		<script type="module" src="/button.min.js" referrerpolicy="no-referrer"></script>
 	</head>
 	<body>
 		<header id="header">
 			<h1>Hello, World!</h1>
 		</header>
-		<nav id="nav"></nav>
+		<nav id="nav">
+			<share-button hidden>Share</share-button>
+			<print-button>Print</print-button>
+			<reload-button>Reload</reload-button>
+			<back-button>Back</back-button>
+			<forward-button>Forward</forward-button>
+		</nav>
 		<main id="main">
 			<details>
 				<summary>Request</summary>