Update custom button styles

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.3.3] - 2026-04-27
+
+### Added
+- Add focus styles for custom buttons
+- Add `pointer-events: none` to disabled custom buttons
+
+### Changed
+- Custom buttons now use `:state(disabled)` instead of `:state(--disabled)`
+
 ## [v0.3.2] - 2026-04-10
 
 ### Changed

button.js

@@ -9,7 +9,7 @@ import {
 	btnLinkActive, linkColor,
 } from './palette/aegis.js';
 
-const DISABLED_STATE = SUPPORTS_CUSTOM_STATES ? ':state(--disabled)' : '._state--disabled';
+const DISABLED_STATE = SUPPORTS_CUSTOM_STATES ? ':state(disabled)' : '._state--disabled';
 
 const DISABLED = `:disabled, .disabled, ${DISABLED_STATE}`;
 const LAYER = 'components.aegisjsproject.button';
@@ -32,6 +32,10 @@ export const btn = css`@layer ${LAYER} {
 		transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out;
 	}
 
+	.btn${DISABLED} {
+		pointer-events: none;
+	}
+
 	.btn.btn-sm {
 		padding: 0.5em 1em;
 		font-size: 0.7rem;

custom-button.js

@@ -18,12 +18,35 @@ export const customButton = css`@layer components.aegisjsproject.button {
 		border-radius: 2px;
 		padding: 2px 6px;
 		font-family: system-ui, -apple-system, sans-serif;
+		font-size: small;
+	}
+
+	:host(:focus-visible) {
+		/* Universal fallback for older engines or high contrast overrides */
+		outline: auto;
+		outline: 2px solid CanvasText;
+		outline-offset: 2px;
+	}
+
+	/* WebKit & Blink (Chrome, Safari, Edge) native focus ring targeting */
+	@supports (outline-color: -webkit-focus-ring-color) {
+		:host(:focus-visible) {
+			outline: 5px auto -webkit-focus-ring-color;
+		}
+	}
+
+	/* Firefox cross-platform fallback (Windows, Android, Linux) */
+	@supports (-moz-appearance: none) {
+		:host(:focus-visible) {
+			outline: 2px solid AccentColor;
+		}
 	}
 
 	:host(${DISABLED_SELECTOR}) {
 		color: GrayText;
 		border-color: color-mix(in srgb, GrayText, transparent 50%);
 		background-color: color-mix(in srgb, ButtonFace, transparent 50%);
+		pointer-events: none;
 	}
 
 	:host(:hover:not(${DISABLED_SELECTOR})) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/styles",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Pre-made and reusable styles for `@aegisjsproject/core`",
   "keywords": [
     "aegis",

test/index.js

@@ -72,22 +72,38 @@ customElements.define('test-el', class TestElement extends HTMLElement {
 customElements.define('test-button', class TestButton extends HTMLElement {
 	#shadow = this.attachShadow({ mode: 'open' });
 	#internals = this.attachInternals();
+	#oldTabIndex = NaN;
+	#controller;
 
 	connectedCallback() {
 		const slot = document.createElement('slot');
 		slot.name = 'content';
 		slot.textContent = 'No content';
 		this.#shadow.append(slot);
 		this.#internals.role = 'button';
-		this.tabIndex = 0;
+		this.#controller = new AbortController();
+
+		if (! (this.hasAttribute('tabindex') || this.disabled)) {
+			this.tabIndex = 0;
+		}
+
 		this.#shadow.adoptedStyleSheets = [layers, customButton];
 
 		this.addEventListener('keydown', event => {
-			if (event.key === ' ' || event.key === 'Enter') {
+			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 });
 
 		this.addEventListener('click', ({ currentTarget }) => {
 			if (currentTarget.classList.contains('btn')) {
@@ -99,15 +115,30 @@ customElements.define('test-button', class TestButton extends HTMLElement {
 	}
 
 	attributeChangedCallback(name, oldVal, newVal) {
-		if (typeof newVal === 'string') {
-			this.#internals.states.add('disabled');
-			this.inert = true;
-		} else {
-			this.#internals.states.delete('disabled');
-			this.inert = false;
+		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.ownerDocument.activeElement.isSameNode(this)) {
+						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');
 	}