Add UTM params to share button & respect hidden attr

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v1.0.1] - 2026-05-03
+
+### Added
+- Add UTM params to share button
+
+### Fixed
+- Fixed overriding `hidden`
+
 ## [v1.0.0] - 2026-04-27
 
 Initial Release

base.js

@@ -2,7 +2,15 @@ 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];
+const sheet = new CSSStyleSheet();
+
+sheet.replace(`@layer components {
+	:host([hidden]) {
+		display: none;
+	}
+}`);
+
+const styles = [layers, reset, customButton, sheet];
 
 export class CustomButton extends HTMLElement {
 	#shadow = this.attachShadow({ mode: 'open' });
@@ -78,6 +86,10 @@ export class CustomButton extends HTMLElement {
 		this.toggleAttribute('disabled', val);
 	}
 
+	get signal() {
+		return this.#controller.signal;
+	}
+
 	static get observedAttributes() {
 		return ['disabled'];
 	}

index.html

@@ -15,7 +15,7 @@
 			<h1>Hello, World!</h1>
 		</header>
 		<nav id="nav">
-			<share-button hidden>Share</share-button>
+			<share-button data-utm-source="aegis-button" data-utm-term="foo" data-utm-campaign="bar" hidden>Share</share-button>
 			<print-button>Print</print-button>
 			<reload-button>Reload</reload-button>
 			<back-button>Back</back-button>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/button",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A simple base custom `<button>` element",
   "keywords": [],
   "type": "module",
@@ -76,7 +76,7 @@
     "@rollup/plugin-terser": "^1.0.0",
     "@shgysk8zer0/eslint-config": "^1.0.9",
     "@shgysk8zer0/http-server": "^1.1.2",
-    "@shgysk8zer0/importmap": "^1.9.8",
+    "@shgysk8zer0/importmap": "^1.9.10",
     "eslint": "^10.2.1",
     "rollup": "^4.60.2"
   }

share.js

@@ -1,36 +1,108 @@
 import { CustomButton } from './button.js';
 
+const sheet = new CSSStyleSheet();
+
+sheet.replace(`@layer components {
+	:host([hidden]) { display: none; }
+}`);
+
 export class ShareButton extends CustomButton {
 	constructor() {
 		super();
 
 		if (typeof navigator.share === 'function') {
 			this.hidden = false;
+		} else {
+			this.hidden = true;
+			this.disabled = true;
+		}
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+
+		if (typeof navigator.share === 'function') {
+			// Parent class creates controller and aborts on disconnect
+			this.addEventListener('click', ShareButton.#share, { signal: this.signal });
+		}
+	}
+
+	get shareText() {
+		return this.dataset.shareText;
+	}
+
+	set shareText(val) {
+		if (typeof val === 'string') {
+			this.dataset.shareText = val;
+		} else {
+			delete this.dataset.shareText;
+		}
+	}
+
+	get shareTitle() {
+		return this.dataset.shareTitle ?? document.title;
+	}
+
+	set shareTitle(val) {
+		if (typeof val === 'string') {
+			this.dataset.shareTitle = val;
+		} else {
+			delete this.dataset.shareTitle;
+		}
+	}
 
-			this.addEventListener('click', async event => {
-				const btn = event.currentTarget;
+	get shareURL() {
+		return this.dataset.shareUrl ?? location.href;
+	}
+
+	set shareURL(val) {
+		if (typeof val === 'string') {
+			this.dataset.shareUrl = val;
+		} else {
+			delete this.dataset.shareUrl;
+		}
+	}
 
-				if (! btn.disabled) {
-					btn.disabled = true;
+	static async #share(event) {
+		const btn = event.currentTarget;
 
-					try {
-						const {
-							shareTitle: title = document.title,
-							shareUrl: url = location.href,
-							shareText: text,
-						} = btn.dataset;
+		if (! btn.disabled) {
+			btn.disabled = true;
 
-						await navigator.share({ title, url, text });
-					} catch(error) {
-						btn.dispatchEvent(new ErrorEvent('error', { error, message: error.message }));
-					} finally {
-						btn.disabled = false;
+			try {
+				const {
+					shareTitle: title = document.title,
+					shareUrl = location.href,
+					shareText: text,
+					utmSource,
+					utmMedium = 'referrer',
+					utmCampaign,
+					utmContent = 'share-button',
+					utmTerm,
+				} = btn.dataset;
+
+				const url = new URL(shareUrl, document.baseURI);
+
+				if (typeof utmSource === 'string') {
+					url.searchParams.set('utm_source', utmSource);
+					url.searchParams.set('utm_medium', utmMedium);
+					url.searchParams.set('utm_content', utmContent);
+
+					if (typeof utmCampaign === 'string') {
+						url.searchParams.set('utm_campaign', utmCampaign);
+					}
+
+					if (typeof utmTerm === 'string') {
+						url.searchParams.set('utm_term', utmTerm);
 					}
 				}
-			});
-		} else {
-			this.hidden = true;
-			this.disabled = true;
+
+				await navigator.share({ title, url, text });
+			} catch(error) {
+				btn.dispatchEvent(new ErrorEvent('error', { error, message: error.message }));
+			} finally {
+				btn.disabled = false;
+			}
 		}
 	}