@human-kit/svelte-components 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/button/README.md

@@ -0,0 +1,48 @@
+# Button
+
+## Description
+
+`Button` is a headless native button with RAC-aligned pending semantics, pressed-state exposure, and modality-aware focus data attributes.
+
+## Anatomy
+
+- `Button.Root`
+
+```svelte
+<Button.Root>
+	{#snippet children({ isPending, isPressed })}
+		{#if isPending}
+			<SavingSpinner />
+		{:else}
+			<span class:is-pressed={isPressed}>Save</span>
+		{/if}
+	{/snippet}
+</Button.Root>
+```
+
+## Usage guidelines
+
+- Use native button props such as `type`, `name`, `value`, and form attributes directly on `Button.Root`.
+- Use `isPending` to keep the button focusable while blocking activation and hover state.
+- Style interaction states with `data-hovered`, `data-pressed`, `data-focused`, `data-focus-visible`, `data-disabled`, and `data-pending`.
+
+## API reference
+
+`Button.Root` supports:
+
+- `isPending?: boolean`
+- `isDisabled?: boolean`
+- `children?: Snippet<[ButtonRenderState]> | Snippet`
+- `type?: 'button' | 'submit' | 'reset'`
+- `...restProps: HTMLButtonAttributes`
+
+## Accessibility
+
+- `Button.Root` renders a native `<button>`.
+- `isPending` applies `aria-disabled="true"`, preserves focusability, blocks press behavior, and announces the pending state through an internal polite live region.
+- `data-focus-visible` follows the shared modality contract and is only exposed for keyboard or virtual focus.
+
+## Notes
+
+- When `type="submit"` and `isPending` is true, the rendered button type switches to `button` to prevent implicit and explicit form submission.
+- Pending does not serialize `data-disabled`; it is represented by `data-pending`.

package/dist/button/TODO.md

@@ -0,0 +1,13 @@
+# Button TODO
+
+## Goal
+
+Track Button work with a single mandatory TODO format.
+
+## Backlog
+
+- [x] [S][P0][Area: Architecture][Owner: Unassigned][Target: Done] Create base `root` part with namespace exports.
+- [x] [S][P0][Area: Interaction][Owner: Unassigned][Target: Done] Implement native press, hover, focus, and focus-visible state exposure.
+- [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Match RAC-style pending semantics with `aria-disabled`, live announcement, and submit suppression.
+- [x] [S][P0][Area: Testing][Owner: Unassigned][Target: Done] Add baseline tests for press, pending, disabled, focus, and form behavior.
+- [ ] [S][P1][Area: API][Owner: Unassigned][Target: TBD] Evaluate whether to expose a dedicated `pendingLabel` override if consumers need localized announcement text without custom child content.

package/dist/button/index.d.ts

@@ -0,0 +1,5 @@
+export * as Button from './index.parts.js';
+export { default as ButtonRoot } from './root/button-root.svelte';
+export type { ButtonRenderState } from './root/button-root.svelte';
+import * as ButtonParts from './index.parts.js';
+export default ButtonParts;

package/dist/button/index.js

@@ -0,0 +1,4 @@
+export * as Button from './index.parts.js';
+export { default as ButtonRoot } from './root/button-root.svelte';
+import * as ButtonParts from './index.parts.js';
+export default ButtonParts;

package/dist/button/index.parts.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './root/button-root.svelte';

package/dist/button/index.parts.js

@@ -0,0 +1 @@
+export { default as Root } from './root/button-root.svelte';

package/dist/button/root/README.md

@@ -0,0 +1,43 @@
+# Button Root
+
+## API reference
+
+### Button.Root
+
+Name: `Button.Root`  
+Description: Native button root with pressed, hovered, focused, focus-visible, disabled, and pending render state.
+
+| Prop           | Type                                      | Default       | Description                                                                                          |
+| -------------- | ----------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------- |
+| `id`           | `string`                                  | `$props.id()` | Stable id for the native button and pending announcement labelling.                                  |
+| `type`         | `'button' \| 'submit' \| 'reset'`         | `'button'`    | Native button type. While pending, `submit` is rendered as `button`.                                 |
+| `isPending`    | `boolean`                                 | `false`       | Keeps the button focusable while disabling press and hover behavior.                                 |
+| `isDisabled`   | `boolean`                                 | `false`       | Disables the native button.                                                                          |
+| `children`     | `Snippet<[ButtonRenderState]> \| Snippet` | `undefined`   | Optional renderer receiving the current interaction state.                                           |
+| `class`        | `string`                                  | `''`          | CSS class names applied to the button element.                                                       |
+| `...restProps` | `HTMLButtonAttributes`                    | `-`           | Additional native button attributes forwarded to the element, excluding reserved disabled semantics. |
+
+### Types
+
+Name: `ButtonRenderState`  
+Description: Render-state payload available to the `children` snippet.
+
+| Prop             | Type      | Default | Description                                                           |
+| ---------------- | --------- | ------- | --------------------------------------------------------------------- |
+| `isHovered`      | `boolean` | `false` | Whether the button is currently hovered by a mouse.                   |
+| `isPressed`      | `boolean` | `false` | Whether the button is currently being pressed. Cleared while pending. |
+| `isFocused`      | `boolean` | `false` | Whether the button currently holds DOM focus.                         |
+| `isFocusVisible` | `boolean` | `false` | Whether focus is visibly keyboard or virtual driven.                  |
+| `isDisabled`     | `boolean` | `false` | Whether the button is disabled.                                       |
+| `isPending`      | `boolean` | `false` | Whether the button is pending.                                        |
+
+```svelte
+<Button.Root type="submit" isPending={saving} aria-label="Save changes">
+	{#snippet children({ isPending, isPressed })}
+		<span class:opacity-0={isPending}>Save</span>
+		{#if isPending}
+			<ProgressCircle aria-label="Saving" isIndeterminate />
+		{/if}
+	{/snippet}
+</Button.Root>
+```

package/dist/button/root/button-root.svelte

@@ -0,0 +1,362 @@
+<script lang="ts">
+	import { untrack, type Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+	import { cn } from '../../utils/cn';
+
+	export type ButtonRenderState = {
+		isHovered: boolean;
+		isPressed: boolean;
+		isFocused: boolean;
+		isFocusVisible: boolean;
+		isDisabled: boolean;
+		isPending: boolean;
+	};
+
+	type ButtonRootProps = Omit<
+		HTMLButtonAttributes,
+		'children' | 'class' | 'disabled' | 'aria-disabled'
+	> & {
+		children?: Snippet<[ButtonRenderState]> | Snippet;
+		class?: string;
+		isPending?: boolean;
+		isDisabled?: boolean;
+		element?: HTMLButtonElement | null;
+		pressed?: boolean;
+	};
+
+	function composeEventHandlers<TEvent extends Event>(
+		internalHandler: ((event: TEvent) => void) | undefined,
+		externalHandler: ((event: TEvent) => void) | undefined,
+		options?: { skipExternalOnDefaultPrevented?: boolean }
+	): (event: TEvent) => void {
+		return (event: TEvent) => {
+			let preventDefaultCalled = false;
+			const originalPreventDefault = event.preventDefault.bind(event);
+			event.preventDefault = () => {
+				preventDefaultCalled = true;
+				originalPreventDefault();
+			};
+
+			internalHandler?.(event);
+			event.preventDefault = originalPreventDefault;
+
+			if (
+				options?.skipExternalOnDefaultPrevented &&
+				(event.defaultPrevented || preventDefaultCalled)
+			) {
+				return;
+			}
+
+			externalHandler?.(event);
+		};
+	}
+
+	const generatedId = $props.id();
+
+	let {
+		id,
+		type = 'button',
+		children,
+		class: className = '',
+		isPending = false,
+		isDisabled = false,
+		element = $bindable<HTMLButtonElement | null>(null),
+		pressed: pressedOverride,
+		onclick: onClickExternal,
+		onfocus: onFocusExternal,
+		onblur: onBlurExternal,
+		onkeydown: onKeyDownExternal,
+		onkeyup: onKeyUpExternal,
+		onpointerdown: onPointerDownExternal,
+		onpointerup: onPointerUpExternal,
+		onpointercancel: onPointerCancelExternal,
+		onpointerenter: onPointerEnterExternal,
+		onpointerleave: onPointerLeaveExternal,
+		onmousedown: onMouseDownExternal,
+		onmouseup: onMouseUpExternal,
+		onmouseenter: onMouseEnterExternal,
+		onmouseleave: onMouseLeaveExternal,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		...restProps
+	}: ButtonRootProps = $props();
+
+	const resolvedId = untrack(() => id) ?? generatedId;
+
+	let buttonRef: HTMLButtonElement | null = $state(null);
+	let hovered = $state(false);
+	let pressed = $state(false);
+	let focused = $state(false);
+	let focusVisible = $state(false);
+	let pressedKey: 'Enter' | 'Space' | null = $state(null);
+
+	const renderedType = $derived(type === 'submit' && isPending ? 'button' : type);
+	const renderedPressed = $derived(
+		pressedOverride !== undefined ? Boolean(pressedOverride) && !isPending : pressed && !isPending
+	);
+	const renderState = $derived.by<ButtonRenderState>(() => ({
+		isHovered: hovered,
+		isPressed: renderedPressed,
+		isFocused: focused,
+		isFocusVisible: focusVisible,
+		isDisabled,
+		isPending
+	}));
+	const pendingAnnouncement = $derived.by(() =>
+		isPending ? `${resolveButtonLabel() || 'Button'}, pending` : ''
+	);
+
+	function resolveReferencedLabel(ids: string | null | undefined): string {
+		if (!ids || !buttonRef) return '';
+		const ownerDocument = buttonRef.ownerDocument;
+		return ids
+			.split(/\s+/)
+			.map((token) => ownerDocument.getElementById(token)?.textContent?.trim() ?? '')
+			.filter(Boolean)
+			.join(' ')
+			.trim();
+	}
+
+	function resolveButtonLabel(): string {
+		const directLabel = ariaLabel?.trim();
+		if (directLabel) return directLabel;
+
+		const labelledByLabel = resolveReferencedLabel(ariaLabelledby);
+		if (labelledByLabel) return labelledByLabel;
+
+		if (!buttonRef) return '';
+
+		const liveRegion = buttonRef.querySelector('[data-button-live-region="true"]');
+		return Array.from(buttonRef.childNodes)
+			.filter((node) => node !== liveRegion)
+			.map((node) => node.textContent?.trim() ?? '')
+			.filter(Boolean)
+			.join(' ')
+			.trim();
+	}
+
+	function clearInteractionState() {
+		hovered = false;
+		pressed = false;
+		pressedKey = null;
+	}
+
+	$effect(() => {
+		element = buttonRef;
+	});
+
+	$effect(() => {
+		if (!isPending && !isDisabled) return;
+		clearInteractionState();
+		if (isDisabled) {
+			focusVisible = false;
+		}
+	});
+
+	function handlePointerDown(event: PointerEvent) {
+		trackInteractionModality(event, buttonRef);
+		focusVisible = false;
+
+		if (isDisabled || isPending) {
+			event.preventDefault();
+			clearInteractionState();
+			return;
+		}
+
+		if (event.button !== 0) return;
+		pressed = true;
+		pressedKey = null;
+	}
+
+	function handlePointerUp(event: PointerEvent) {
+		if (event.button !== 0) return;
+		pressed = false;
+		pressedKey = null;
+	}
+
+	function handlePointerCancel() {
+		pressed = false;
+		pressedKey = null;
+	}
+
+	function handlePointerEnter(event: PointerEvent) {
+		if (isDisabled || isPending) return;
+
+		if ((event.buttons & 1) === 1 && pressedKey === null) {
+			pressed = true;
+		}
+	}
+
+	function handlePointerLeave() {
+		if (pressedKey === null) {
+			pressed = false;
+		}
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		trackInteractionModality(event, buttonRef);
+		focusVisible = false;
+
+		if (isDisabled || isPending) {
+			event.preventDefault();
+			clearInteractionState();
+			return;
+		}
+
+		if (event.button !== 0) return;
+		pressed = true;
+		pressedKey = null;
+	}
+
+	function handleMouseUp(event: MouseEvent) {
+		if (event.button !== 0) return;
+		if (pressedKey === null) {
+			pressed = false;
+		}
+	}
+
+	function handleMouseEnter() {
+		if (isDisabled || isPending) {
+			hovered = false;
+			return;
+		}
+
+		hovered = true;
+	}
+
+	function handleMouseLeave() {
+		hovered = false;
+	}
+
+	function handleFocus() {
+		focused = true;
+		focusVisible = shouldShowFocusVisible(buttonRef);
+	}
+
+	function handleBlur() {
+		focused = false;
+		focusVisible = false;
+		clearInteractionState();
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		const key =
+			event.key === 'Enter'
+				? 'Enter'
+				: event.key === ' ' || event.key === 'Spacebar'
+					? 'Space'
+					: null;
+
+		if (!key) return;
+
+		trackInteractionModality(event, buttonRef);
+		focusVisible = focused ? true : shouldShowFocusVisible(buttonRef);
+
+		if (isDisabled || isPending) {
+			event.preventDefault();
+			clearInteractionState();
+			return;
+		}
+
+		if (event.repeat && pressed && pressedKey === key) return;
+
+		pressed = true;
+		pressedKey = key;
+	}
+
+	function handleKeyUp(event: KeyboardEvent) {
+		const key =
+			event.key === 'Enter'
+				? 'Enter'
+				: event.key === ' ' || event.key === 'Spacebar'
+					? 'Space'
+					: null;
+
+		if (!key) return;
+
+		trackInteractionModality(event, buttonRef);
+		focusVisible = focused ? true : shouldShowFocusVisible(buttonRef);
+
+		if (isDisabled || isPending) {
+			event.preventDefault();
+			clearInteractionState();
+			return;
+		}
+
+		if (pressedKey === key) {
+			pressed = false;
+			pressedKey = null;
+		}
+	}
+
+	function handleClick(event: MouseEvent) {
+		if (event.detail > 0) {
+			trackInteractionModality(event, buttonRef);
+		}
+
+		if (isPending) {
+			event.preventDefault();
+			clearInteractionState();
+		}
+	}
+</script>
+
+<button
+	{...restProps}
+	bind:this={buttonRef}
+	id={resolvedId}
+	type={renderedType}
+	disabled={isDisabled}
+	aria-label={ariaLabel}
+	aria-labelledby={ariaLabelledby}
+	aria-disabled={isPending ? 'true' : undefined}
+	data-button-root="true"
+	data-disabled={isDisabled || undefined}
+	data-pending={isPending || undefined}
+	data-hovered={hovered || undefined}
+	data-pressed={renderedPressed || undefined}
+	data-focused={focused || undefined}
+	data-focus-visible={focusVisible || undefined}
+	class={cn('outline-none', className)}
+	onclick={composeEventHandlers(handleClick, onClickExternal ?? undefined, {
+		skipExternalOnDefaultPrevented: true
+	})}
+	onfocus={composeEventHandlers(handleFocus, onFocusExternal ?? undefined)}
+	onblur={composeEventHandlers(handleBlur, onBlurExternal ?? undefined)}
+	onkeydown={composeEventHandlers(handleKeyDown, onKeyDownExternal ?? undefined, {
+		skipExternalOnDefaultPrevented: true
+	})}
+	onkeyup={composeEventHandlers(handleKeyUp, onKeyUpExternal ?? undefined, {
+		skipExternalOnDefaultPrevented: true
+	})}
+	onpointerdown={composeEventHandlers(handlePointerDown, onPointerDownExternal ?? undefined, {
+		skipExternalOnDefaultPrevented: true
+	})}
+	onpointerup={composeEventHandlers(handlePointerUp, onPointerUpExternal ?? undefined)}
+	onpointercancel={composeEventHandlers(handlePointerCancel, onPointerCancelExternal ?? undefined)}
+	onpointerenter={composeEventHandlers(handlePointerEnter, onPointerEnterExternal ?? undefined)}
+	onpointerleave={composeEventHandlers(handlePointerLeave, onPointerLeaveExternal ?? undefined)}
+	onmousedown={composeEventHandlers(handleMouseDown, onMouseDownExternal ?? undefined, {
+		skipExternalOnDefaultPrevented: true
+	})}
+	onmouseup={composeEventHandlers(handleMouseUp, onMouseUpExternal ?? undefined)}
+	onmouseenter={composeEventHandlers(handleMouseEnter, onMouseEnterExternal ?? undefined)}
+	onmouseleave={composeEventHandlers(handleMouseLeave, onMouseLeaveExternal ?? undefined)}
+>
+	{#if children}
+		{@render (children as Snippet<[ButtonRenderState]>)(renderState)}
+	{/if}
+
+	<span
+		data-button-live-region="true"
+		role="status"
+		aria-live="polite"
+		aria-atomic="true"
+		style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
+		>{pendingAnnouncement}</span
+	>
+</button>

package/dist/button/root/button-root.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export type ButtonRenderState = {
+    isHovered: boolean;
+    isPressed: boolean;
+    isFocused: boolean;
+    isFocusVisible: boolean;
+    isDisabled: boolean;
+    isPending: boolean;
+};
+type ButtonRootProps = Omit<HTMLButtonAttributes, 'children' | 'class' | 'disabled' | 'aria-disabled'> & {
+    children?: Snippet<[ButtonRenderState]> | Snippet;
+    class?: string;
+    isPending?: boolean;
+    isDisabled?: boolean;
+    element?: HTMLButtonElement | null;
+    pressed?: boolean;
+};
+declare const ButtonRoot: import("svelte").Component<ButtonRootProps, {}, "element">;
+type ButtonRoot = ReturnType<typeof ButtonRoot>;
+export default ButtonRoot;

package/dist/button/root/button-test.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Button } from '../index';
+
+	type Props = {
+		isDisabled?: boolean;
+		isPending?: boolean;
+		type?: 'button' | 'submit' | 'reset';
+		ariaLabel?: string;
+		onMouseEnter?: (event: MouseEvent) => void;
+		onFocus?: (event: FocusEvent) => void;
+	};
+
+	let {
+		isDisabled = false,
+		isPending = false,
+		type = 'button',
+		ariaLabel = 'Save',
+		onMouseEnter,
+		onFocus
+	}: Props = $props();
+
+	let pendingOverride = $state<boolean | null>(null);
+	let clickCount = $state(0);
+	let submitCount = $state(0);
+	const pending = $derived(pendingOverride ?? isPending);
+
+	function handleClick() {
+		clickCount += 1;
+	}
+
+	function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		submitCount += 1;
+	}
+</script>
+
+<form onsubmit={handleSubmit}>
+	<label for="name">Name</label>
+	<input id="name" type="text" />
+
+	<Button.Root
+		{type}
+		{isDisabled}
+		isPending={pending}
+		onclick={handleClick}
+		onmouseenter={onMouseEnter}
+		onfocus={onFocus}
+		aria-label={ariaLabel}
+		class="inline-flex items-center"
+	>
+		{#snippet children(state)}
+			<span data-button-label>{pending ? 'Saving' : 'Save'}</span>
+			<span
+				data-render-state="true"
+				data-render-pressed={state.isPressed || undefined}
+				data-render-hovered={state.isHovered || undefined}
+				data-render-pending={state.isPending || undefined}
+				data-render-focused={state.isFocused || undefined}
+				data-render-focus-visible={state.isFocusVisible || undefined}
+			>
+				{state.isPressed ? 'pressed' : state.isPending ? 'pending' : 'idle'}
+			</span>
+		{/snippet}
+	</Button.Root>
+
+	<button type="button" data-set-pending onclick={() => (pendingOverride = true)}
+		>Set pending</button
+	>
+	<button type="button" data-clear-pending onclick={() => (pendingOverride = false)}>
+		Clear pending
+	</button>
+
+	<output data-click-count>{String(clickCount)}</output>
+	<output data-submit-count>{String(submitCount)}</output>
+	<output data-pending-state>{String(pending)}</output>
+</form>

package/dist/button/root/button-test.svelte.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    isDisabled?: boolean;
+    isPending?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    ariaLabel?: string;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onFocus?: (event: FocusEvent) => void;
+};
+declare const ButtonTest: import("svelte").Component<Props, {}, "">;
+type ButtonTest = ReturnType<typeof ButtonTest>;
+export default ButtonTest;

package/dist/calendar/trigger-next/calendar-trigger-next.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { ButtonRoot } from '../../button/index.js';
 	import { useCalendarContext } from '../root/context';
 
-	type CalendarTriggerNextProps = Omit<HTMLButtonAttributes, 'children'> & {
+	type CalendarTriggerNextProps = Omit<
+		HTMLButtonAttributes,
+		'children' | 'class' | 'disabled' | 'aria-disabled'
+	> & {
+		class?: string;
 		children?: Snippet;
 	};
 
@@ -22,11 +27,11 @@
 	}
 </script>
 
-<button
+<ButtonRoot
 	type="button"
 	class={className}
 	aria-label="Next page"
-	disabled={isDisabled}
+	{isDisabled}
 	onclick={handleClick}
 	{...restProps}
 >
@@ -35,4 +40,4 @@
 	{:else}
 		Next
 	{/if}
-</button>
+</ButtonRoot>

package/dist/calendar/trigger-next/calendar-trigger-next.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type CalendarTriggerNextProps = Omit<HTMLButtonAttributes, 'children'> & {
+type CalendarTriggerNextProps = Omit<HTMLButtonAttributes, 'children' | 'class' | 'disabled' | 'aria-disabled'> & {
+    class?: string;
     children?: Snippet;
 };
 declare const CalendarTriggerNext: import("svelte").Component<CalendarTriggerNextProps, {}, "">;

package/dist/calendar/trigger-previous/calendar-trigger-previous.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { ButtonRoot } from '../../button/index.js';
 	import { useCalendarContext } from '../root/context';
 
-	type CalendarTriggerPreviousProps = Omit<HTMLButtonAttributes, 'children'> & {
+	type CalendarTriggerPreviousProps = Omit<
+		HTMLButtonAttributes,
+		'children' | 'class' | 'disabled' | 'aria-disabled'
+	> & {
+		class?: string;
 		children?: Snippet;
 	};
 
@@ -22,11 +27,11 @@
 	}
 </script>
 
-<button
+<ButtonRoot
 	type="button"
 	class={className}
 	aria-label="Previous page"
-	disabled={isDisabled}
+	{isDisabled}
 	onclick={handleClick}
 	{...restProps}
 >
@@ -35,4 +40,4 @@
 	{:else}
 		Prev
 	{/if}
-</button>
+</ButtonRoot>

package/dist/calendar/trigger-previous/calendar-trigger-previous.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type CalendarTriggerPreviousProps = Omit<HTMLButtonAttributes, 'children'> & {
+type CalendarTriggerPreviousProps = Omit<HTMLButtonAttributes, 'children' | 'class' | 'disabled' | 'aria-disabled'> & {
+    class?: string;
     children?: Snippet;
 };
 declare const CalendarTriggerPrevious: import("svelte").Component<CalendarTriggerPreviousProps, {}, "">;

package/dist/combobox/button/combobox-button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { ButtonRoot } from '../../button/index.js';
 	import { useComboBoxContext } from '../root/context';
 
 	type ComboBoxButtonProps = HTMLButtonAttributes & {
@@ -26,14 +27,14 @@
 
 <!-- * CHANGE: CHANGE NAME FROM BUTTON TO TRIGGER -->
 
-<button
+<ButtonRoot
 	type="button"
 	{tabindex}
 	aria-label={ctx.isOpen ? 'Close menu' : 'Open menu'}
 	aria-expanded={ctx.isOpen}
 	aria-controls={`combobox-listbox-${ctx.instanceId}`}
-	disabled={ctx.isDisabled}
-	data-pressed={ctx.isOpen}
+	isDisabled={ctx.isDisabled}
+	pressed={ctx.isOpen}
 	onmousedown={handleMouseDown}
 	class={className}
 	{...restProps}
@@ -56,4 +57,4 @@
 			<path d="m6 9 6 6 6-6" />
 		</svg>
 	{/if}
-</button>
+</ButtonRoot>

package/dist/combobox/list/combobox-listbox.svelte.d.ts

@@ -17,7 +17,7 @@ declare function $$render<T extends object = object>(): {
     } & {
         context?: ListBoxContext;
         element?: HTMLElement;
-    }, "children" | "id" | "value" | "selectionMode" | "selectionBehavior" | "defaultValue" | "onChange" | "items" | "context" | "element"> & {
+    }, "children" | "value" | "id" | "element" | "selectionMode" | "selectionBehavior" | "defaultValue" | "onChange" | "items" | "context"> & {
         /** Optional items for dynamic rendering - overrides items from ComboBox context */
         items?: Iterable<T>;
         /** Content of the listbox. Receives item in dynamic mode. */

package/dist/combobox/popover/combobox-popover.svelte

@@ -26,11 +26,41 @@
 	}
 
 	function handleOpenChange(open: boolean, details?: PopoverOpenChangeDetails) {
-		if (!open && details?.reason === 'outside-press') {
-			const target = resolveFocusTarget(details);
-			if (target) {
-				focusWithModality(target, 'pointer' satisfies InputModality);
+		if (!open) {
+			// Cancel Popover.Root's close to prevent scheduleTriggerCloseFocus from
+			// setting stale data-focused on the trigger. The combobox passes triggerRef
+			// via prop (not Popover.Trigger), so Popover.Root never registers a
+			// blur-cleanup listener and any data-focused it sets persists forever.
+			//
+			// IMPORTANT: the actual state change is deferred to a microtask so that
+			// when Popover.Root's closePopover re-reads `isOpen` after the callback,
+			// the derived value is still `true` and the guard succeeds. A synchronous
+			// ctx.onOpenChange(false) would update the upstream signal immediately,
+			// making the derived `false` and bypassing the guard despite the cancel.
+			details?.cancel();
+
+			if (details?.reason === 'outside-press') {
+				const target = resolveFocusTarget(details);
+				queueMicrotask(() => {
+					ctx.onOpenChange(false);
+
+					if (target) {
+						focusWithModality(target, 'pointer' satisfies InputModality);
+					}
+
+					// If focus is still on the input (non-focusable target), blur it
+					// so focusWithin becomes false.
+					if (document.activeElement === ctx.inputRef) {
+						ctx.inputRef?.blur();
+					}
+				});
+				return;
 			}
+
+			queueMicrotask(() => {
+				ctx.onOpenChange(false);
+			});
+			return;
 		}
 
 		ctx.onOpenChange(open);

package/dist/combobox/root/combobox.svelte

@@ -346,6 +346,13 @@
 			!!wrapperRef && !!document.activeElement && wrapperRef.contains(document.activeElement);
 		if (!focusWithin) {
 			focusVisible = false;
+			// Clean up stale data-focused/data-focus-visible that Popover.Root's
+			// focus-state module may have set imperatively on the wrapper (the
+			// wrapper is briefly used as triggerRef before the input overrides it).
+			if (wrapperRef) {
+				delete wrapperRef.dataset.focused;
+				delete wrapperRef.dataset.focusVisible;
+			}
 		}
 	}
 
@@ -717,6 +724,7 @@
 	aria-labelledby={ariaLabelledby}
 	class={className}
 	data-combobox
+	data-focused={focusWithin || undefined}
 	data-disabled={isDisabled || undefined}
 	data-readonly={isReadOnly || undefined}
 	data-focus-within={focusWithin || undefined}

package/dist/combobox/tag-remove/combobox-tag-remove.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { getContext } from 'svelte';
+	import { ButtonRoot } from '../../button/index.js';
 	import { cn } from '../../utils/cn';
 	import { TAG_CONTEXT_KEY, type TagContext } from '../tag/combobox-tag.svelte';
 
@@ -27,7 +28,7 @@
 </script>
 
 {#if !tagCtx.disabled}
-	<button
+	<ButtonRoot
 		type="button"
 		onclick={handleClick}
 		aria-label={`Remove ${tagCtx.label}`}
@@ -49,5 +50,5 @@
 				/>
 			</svg>
 		{/if}
-	</button>
+	</ButtonRoot>
 {/if}

package/dist/datepicker/trigger/date-picker-trigger.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { ButtonRoot } from '../../button/index.js';
 	import { useDatePickerContext } from '../root/context';
 	import {
 		shouldShowFocusVisible,
@@ -86,14 +87,13 @@
 </script>
 
 {#if !datePicker.isReadOnly}
-	<button
-		bind:this={buttonRef}
+	<ButtonRoot
+		bind:element={buttonRef}
 		type="button"
-		disabled={datePicker.isDisabled}
+		isDisabled={datePicker.isDisabled}
 		class={className}
 		aria-haspopup="dialog"
 		aria-expanded={datePicker.open}
-		data-disabled={datePicker.isDisabled || undefined}
 		data-focused={isFocused || undefined}
 		data-focus-visible={isFocused && datePicker.focusVisible ? 'true' : undefined}
 		onmousedown={handleMouseDown}
@@ -106,5 +106,5 @@
 		{#if children}
 			{@render children()}
 		{/if}
-	</button>
+	</ButtonRoot>
 {/if}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { Button } from './button/index.js';
 export { Checkbox } from './checkbox/index.js';
 export { ComboBox } from './combobox/index.js';
 export { Calendar } from './calendar/index.js';
@@ -13,6 +14,7 @@ export { default as Label } from './label/index.js';
 export { default as LocaleProvider } from './locale-provider/index.js';
 export { Portal } from './portal/index.js';
 export * from './locale-provider/index.js';
+export * from './button/index.js';
 export * from './checkbox/index.js';
 export * from './combobox/index.js';
 export * from './calendar/index.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 // Main library entry point
 // Components (namespace exports)
+export { Button } from './button/index.js';
 export { Checkbox } from './checkbox/index.js';
 export { ComboBox } from './combobox/index.js';
 export { Calendar } from './calendar/index.js';
@@ -17,6 +18,7 @@ export { default as LocaleProvider } from './locale-provider/index.js';
 export { Portal } from './portal/index.js';
 export * from './locale-provider/index.js';
 // Re-export named exports from components
+export * from './button/index.js';
 export * from './checkbox/index.js';
 export * from './combobox/index.js';
 export * from './calendar/index.js';

package/dist/listbox/item/README.md

@@ -5,7 +5,7 @@
 ### ListBox.Item
 
 Name: `ListBox.Item`  
-Description: Selectable option element with built-in selected, focused, hovered, and disabled states.
+Description: Selectable option element with built-in selected, focused, hovered, pressed, and disabled states.
 
 | Prop                   | Type                             | Default              | Description                                              |
 | ---------------------- | -------------------------------- | -------------------- | -------------------------------------------------------- |
@@ -21,4 +21,5 @@ Description: Selectable option element with built-in selected, focused, hovered,
 | `onResolvedTextValue`  | `(label: string) => void`        | `undefined`          | Called when item text value is resolved.                 |
 | `scrollOnFocus`        | `boolean`                        | `false`              | Scrolls item into view when focused.                     |
 | `isParentDisabled`     | `boolean`                        | `false`              | Additional disabled state inherited from parent wrapper. |
+| `pressed`              | `boolean`                        | `undefined`          | Forces the visual pressed state from parent composition. |
 | `...restProps`         | `HTMLAttributes<HTMLDivElement>` | `-`                  | Additional option attributes.                            |

package/dist/listbox/item/listbox-item.svelte

@@ -34,6 +34,8 @@
 		scrollOnFocus?: boolean;
 		/** Additional disabled state from parent. */
 		isParentDisabled?: boolean;
+		/** Override the visual pressed state. When provided, this value is used instead of internal press tracking. */
+		pressed?: boolean;
 	};
 
 	let {
@@ -50,6 +52,7 @@
 		onResolvedTextValue,
 		scrollOnFocus = false,
 		isParentDisabled = false,
+		pressed: pressedOverride,
 		...restProps
 	}: ListBoxItemProps = $props();
 
@@ -59,6 +62,8 @@
 	let isSelected = $state(false);
 	let isFocused = $state(false);
 	let isHovered = $state(false);
+	let isPressed = $state(false);
+	let pressedKey: 'Enter' | 'Space' | null = $state(null);
 
 	// Focus: use override if provided, otherwise use internal state
 	const isFocusedComputed = $derived(
@@ -67,6 +72,11 @@
 	const isDisabledComputed = $derived(
 		disabled || listboxCtx.disabledIds.has(id) || isParentDisabled
 	);
+	const isPressedComputed = $derived(
+		pressedOverride !== undefined
+			? Boolean(pressedOverride) && !isDisabledComputed
+			: isPressed && !isDisabledComputed
+	);
 
 	// ID: use custom if provided, otherwise generate
 	const uniqueId = $derived(customId ?? `listbox-item-${id}`);
@@ -113,6 +123,17 @@
 		}
 	});
 
+	$effect(() => {
+		if (!isDisabledComputed) return;
+		clearPressedState();
+		isHovered = false;
+	});
+
+	function clearPressedState() {
+		isPressed = false;
+		pressedKey = null;
+	}
+
 	function handleClick() {
 		if (isDisabledComputed) return;
 
@@ -135,6 +156,42 @@
 
 	function handleBlur() {}
 
+	function handlePointerDown(event: PointerEvent) {
+		if (isDisabledComputed) {
+			event.preventDefault();
+			clearPressedState();
+			return;
+		}
+
+		if (event.button !== 0) return;
+		isPressed = true;
+		pressedKey = null;
+	}
+
+	function handlePointerUp(event: PointerEvent) {
+		if (event.button !== 0) return;
+		isPressed = false;
+		pressedKey = null;
+	}
+
+	function handlePointerCancel() {
+		clearPressedState();
+	}
+
+	function handlePointerEnter(event: PointerEvent) {
+		if (isDisabledComputed) return;
+
+		if ((event.buttons & 1) === 1 && pressedKey === null) {
+			isPressed = true;
+		}
+	}
+
+	function handlePointerLeave() {
+		if (pressedKey === null) {
+			isPressed = false;
+		}
+	}
+
 	function handleMouseEnter() {
 		if (!isDisabledComputed) {
 			isHovered = true;
@@ -143,17 +200,80 @@
 
 	function handleMouseLeave() {
 		isHovered = false;
+		if (pressedKey === null) {
+			isPressed = false;
+		}
 	}
 
 	// Keyboard is handled by parent container
-	function handleKeydown() {}
+	function handleKeydown(event: KeyboardEvent) {
+		const key =
+			event.key === 'Enter'
+				? 'Enter'
+				: event.key === ' ' || event.key === 'Spacebar'
+					? 'Space'
+					: null;
+
+		if (!key) return;
+
+		if (isDisabledComputed) {
+			event.preventDefault();
+			clearPressedState();
+			return;
+		}
+
+		if (event.repeat && isPressed && pressedKey === key) return;
+
+		isPressed = true;
+		pressedKey = key;
+	}
+
+	function handleKeyup(event: KeyboardEvent) {
+		const key =
+			event.key === 'Enter'
+				? 'Enter'
+				: event.key === ' ' || event.key === 'Spacebar'
+					? 'Space'
+					: null;
+
+		if (!key) return;
+
+		if (isDisabledComputed) {
+			event.preventDefault();
+			clearPressedState();
+			return;
+		}
+
+		if (pressedKey === key) {
+			clearPressedState();
+		}
+	}
+
 	function handleMouseDown(event: MouseEvent) {
 		// Prevent focus stealing when used in ComboBox (disableFocusHandling=true)
 		// This keeps the focus on the input while allowing click selection
+		if (isDisabledComputed) {
+			event.preventDefault();
+			clearPressedState();
+			return;
+		}
+
+		if (event.button === 0) {
+			isPressed = true;
+			pressedKey = null;
+		}
+
 		if (disableFocusHandling) {
 			event.preventDefault();
 		}
 	}
+
+	function handleMouseUp(event: MouseEvent) {
+		if (event.button !== 0) return;
+		if (pressedKey === null) {
+			clearPressedState();
+		}
+	}
 </script>
 
 <div
@@ -171,9 +291,17 @@
 	data-disabled={isDisabledComputed || undefined}
 	data-focused={isFocusedComputed || undefined}
 	data-hovered={isHovered || undefined}
+	data-pressed={isPressedComputed || undefined}
+	onpointerdown={handlePointerDown}
+	onpointerup={handlePointerUp}
+	onpointercancel={handlePointerCancel}
+	onpointerenter={handlePointerEnter}
+	onpointerleave={handlePointerLeave}
 	onmousedown={handleMouseDown}
+	onmouseup={handleMouseUp}
 	onclick={handleClick}
 	onkeydown={handleKeydown}
+	onkeyup={handleKeyup}
 	onfocus={handleFocus}
 	onblur={handleBlur}
 	onmouseenter={handleMouseEnter}

package/dist/listbox/item/listbox-item.svelte.d.ts

@@ -28,6 +28,8 @@ type ListBoxItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children'>
     scrollOnFocus?: boolean;
     /** Additional disabled state from parent. */
     isParentDisabled?: boolean;
+    /** Override the visual pressed state. When provided, this value is used instead of internal press tracking. */
+    pressed?: boolean;
 };
 declare const ListboxItem: import("svelte").Component<ListBoxItemProps, {}, "">;
 type ListboxItem = ReturnType<typeof ListboxItem>;

package/dist/listbox/root/listbox-test.svelte

@@ -5,9 +5,17 @@
 		selectionMode?: 'single' | 'multiple';
 		selectionBehavior?: 'toggle' | 'replace';
 		disabledIds?: Iterable<string | number>;
+		pressedIds?: Iterable<string | number>;
 	};
 
-	let { selectionMode = 'single', selectionBehavior = 'toggle', disabledIds }: Props = $props();
+	let {
+		selectionMode = 'single',
+		selectionBehavior = 'toggle',
+		disabledIds,
+		pressedIds
+	}: Props = $props();
+
+	const pressedIdSet = $derived(new Set(pressedIds ?? []));
 
 	const fruits = [
 		{ id: 'apple', name: 'Apple' },
@@ -20,7 +28,11 @@
 
 <ListBox.Root {selectionMode} {selectionBehavior} {disabledIds} aria-label="Fruits list">
 	{#each fruits as fruit (fruit.id)}
-		<ListBox.Item id={fruit.id} textValue={fruit.name}>
+		<ListBox.Item
+			id={fruit.id}
+			textValue={fruit.name}
+			pressed={pressedIdSet.has(fruit.id) ? true : undefined}
+		>
 			{fruit.name}
 		</ListBox.Item>
 	{/each}

package/dist/listbox/root/listbox-test.svelte.d.ts

@@ -2,6 +2,7 @@ type Props = {
     selectionMode?: 'single' | 'multiple';
     selectionBehavior?: 'toggle' | 'replace';
     disabledIds?: Iterable<string | number>;
+    pressedIds?: Iterable<string | number>;
 };
 declare const ListboxTest: import("svelte").Component<Props, {}, "">;
 type ListboxTest = ReturnType<typeof ListboxTest>;

package/dist/listbox/root/listbox.svelte.d.ts

@@ -31,7 +31,7 @@ declare function $$render<T extends object = object>(): {
         element?: HTMLElement;
     };
     exports: {};
-    bindings: "value" | "context" | "element";
+    bindings: "value" | "element" | "context";
     slots: {};
     events: {};
 };
@@ -39,7 +39,7 @@ declare class __sveltets_Render<T extends object = object> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "value" | "context" | "element";
+    bindings(): "value" | "element" | "context";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/popover/trigger/popover-trigger-button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { ButtonRoot } from '../../button/index.js';
 	import { getPopoverContext } from '../root/context';
 
 	type PopoverTriggerButtonProps = Omit<
@@ -30,8 +31,8 @@
 	}
 </script>
 
-<button
-	bind:this={buttonRef}
+<ButtonRoot
+	bind:element={buttonRef}
 	class={className}
 	type="button"
 	aria-expanded={ctx?.isOpen ?? false}
@@ -42,4 +43,4 @@
 	{#if children}
 		{@render children()}
 	{/if}
-</button>
+</ButtonRoot>

package/dist/table/root/table-root.svelte.d.ts

@@ -24,6 +24,6 @@ type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
     context?: TableContext;
     element?: HTMLTableElement;
 };
-declare const TableRoot: import("svelte").Component<TableRootProps, {}, "context" | "element" | "hiddenColumns" | "selectedKeys" | "sortDescriptor" | "columnWidths">;
+declare const TableRoot: import("svelte").Component<TableRootProps, {}, "element" | "context" | "hiddenColumns" | "selectedKeys" | "sortDescriptor" | "columnWidths">;
 type TableRoot = ReturnType<typeof TableRoot>;
 export default TableRoot;

package/dist/timepicker/trigger/time-picker-trigger.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { ButtonRoot } from '../../button/index.js';
 	import { useTimePickerContext } from '../root/context';
 	import {
 		shouldShowFocusVisible,
@@ -94,14 +95,13 @@
 </script>
 
 {#if !timePicker.isReadOnly}
-	<button
-		bind:this={buttonRef}
+	<ButtonRoot
+		bind:element={buttonRef}
 		type="button"
-		disabled={timePicker.isDisabled}
+		isDisabled={timePicker.isDisabled}
 		class={className}
 		aria-haspopup="dialog"
 		aria-expanded={timePicker.open}
-		data-disabled={timePicker.isDisabled || undefined}
 		data-focused={isFocused || undefined}
 		data-focus-visible={isFocused && timePicker.focusVisible ? 'true' : undefined}
 		{...restProps}
@@ -118,5 +118,5 @@
 		{#if children}
 			{@render children()}
 		{/if}
-	</button>
+	</ButtonRoot>
 {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-kit/svelte-components",
-	"version": "1.0.0-alpha.6",
+	"version": "1.0.0-alpha.7",
 	"license": "MIT",
 	"type": "module",
 	"svelte": "./dist/index.js",
@@ -11,6 +11,11 @@
 			"svelte": "./dist/index.js",
 			"default": "./dist/index.js"
 		},
+		"./button": {
+			"types": "./dist/button/index.d.ts",
+			"svelte": "./dist/button/index.js",
+			"default": "./dist/button/index.js"
+		},
 		"./checkbox": {
 			"types": "./dist/checkbox/index.d.ts",
 			"svelte": "./dist/checkbox/index.js",