@vanilla-bean/components 1.0.0

package/components/Button/Button.js

@@ -0,0 +1,53 @@
+import { TooltipWrapper } from '../TooltipWrapper';
+
+const defaultOptions = { tag: 'button' };
+
+/**
+ * Interactive button component with keyboard accessibility and tooltip support.
+ *
+ * Extends TooltipWrapper to provide button-specific behavior including keyboard
+ * activation (Space/Enter keys) and proper semantic button element.
+ * @param {object} [options={}] - Button configuration options
+ * @param {string} [options.tag='button'] - HTML tag name, defaults to button for proper semantics
+ * @param {Function} [options.onPointerPress] - Handler called when button is activated via click, touch, or keyboard
+ * @param {string} [options.textContent] - Button label text
+ * @param {string} [options.icon] - FontAwesome icon name (without 'fa-' prefix)
+ * @param {string} [options.tooltip] - Tooltip text shown on hover
+ * @param {boolean} [options.disabled] - Whether button is disabled
+ * @param {...(Component|HTMLElement|string)} children - Child elements to append
+ * @returns {Button} Button component instance
+ * @example
+ * // Basic button
+ * new Button({
+ *   textContent: 'Click me',
+ *   onPointerPress: () => console.log('clicked')
+ * });
+ *
+ * // Button with tooltip
+ * new Button({
+ *   textContent: 'Save',
+ *   tooltip: 'Save current changes',
+ *   onPointerPress: handleSave
+ * });
+ */
+export default class Button extends TooltipWrapper {
+	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
+
+	constructor(options = {}, ...children) {
+		const userOnKeyUp = options.onKeyUp;
+
+		super(
+			{
+				...defaultOptions,
+				...options,
+				onKeyUp: event => {
+					userOnKeyUp?.call(this, event);
+					if (event.code === 'Space' || event.code === 'Enter') {
+						this.options.onPointerPress?.(event);
+					}
+				},
+			},
+			...children,
+		);
+	}
+}

package/components/Button/Button.lld.md

@@ -0,0 +1,21 @@
+# Button
+
+> ./Button.js
+
+Activatable element that unifies pointer and keyboard interaction under one handler. The design decision is that activation, regardless of whether it came from a click, touch, Space, or Enter, always routes through `onPointerPress`. Callers write one handler, not three.
+
+## Keyboard and pointer share one activation handler
+
+- Space and Enter activate the button the same way a click does; the caller registers one `onPointerPress` and it fires for all input types
+  - does pressing Enter on a focused Button invoke onPointerPress?
+  - does clicking a Button invoke onPointerPress?
+
+## Caller-provided onKeyUp is preserved alongside activation logic
+
+- a caller-provided `onKeyUp` runs alongside the built-in keyboard activation; registering both handlers does not suppress either
+  - does providing a custom onKeyUp still trigger onPointerPress on Space/Enter?
+
+## Tooltip is automatic — no setup beyond the tooltip option
+
+- Button extends TooltipWrapper; a `tooltip` option produces tooltip behavior with no additional wiring
+  - does a Button with a tooltip option show a tooltip on hover?

package/components/Button/index.js

@@ -0,0 +1 @@
+export { default as Button } from './Button';