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

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/index.d.ts

@@ -1,8 +1,8 @@
-export * as Popover from './index.parts.ts';
+export * as Popover from './index.parts.js';
 export { default as PopoverRoot } from './root/popover-root.svelte';
 export { default as PopoverContent } from './content/popover-content.svelte';
 export { default as PopoverTrigger } from './trigger/popover-trigger.svelte';
 export { default as PopoverTriggerButton } from './trigger/popover-trigger-button.svelte';
-export { getPopoverContext, setPopoverContext, type PopoverContext, type PopoverCanonicalCloseReason, type PopoverCloseReason, type PopoverOpenReason, type PopoverChangeReason, type PopoverOpenChangeDetails } from './root/context.ts';
-import * as PopoverParts from './index.parts.ts';
+export { getPopoverContext, setPopoverContext, type PopoverContext, type PopoverCanonicalCloseReason, type PopoverCloseReason, type PopoverOpenReason, type PopoverChangeReason, type PopoverOpenChangeDetails } from './root/context.js';
+import * as PopoverParts from './index.parts.js';
 export default PopoverParts;

package/dist/popover/index.js

@@ -1,12 +1,12 @@
 // Namespace export for component composition: <Popover.Root>, <Popover.Trigger>, etc.
-export * as Popover from './index.parts.ts';
+export * as Popover from './index.parts.js';
 // Direct named exports for individual imports
 export { default as PopoverRoot } from './root/popover-root.svelte';
 export { default as PopoverContent } from './content/popover-content.svelte';
 export { default as PopoverTrigger } from './trigger/popover-trigger.svelte';
 export { default as PopoverTriggerButton } from './trigger/popover-trigger-button.svelte';
 // Context and types
-export { getPopoverContext, setPopoverContext } from './root/context.ts';
+export { getPopoverContext, setPopoverContext } from './root/context.js';
 // Default export as namespace object
-import * as PopoverParts from './index.parts.ts';
+import * as PopoverParts from './index.parts.js';
 export default PopoverParts;

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/index.d.ts

@@ -1,4 +1,4 @@
-export * as Table from './index.parts.ts';
+export * as Table from './index.parts.js';
 export { default as TableRoot } from './root/table-root.svelte';
 export { default as TableColumn } from './column/table-column.svelte';
 export { default as TableHeader } from './header/table-header.svelte';
@@ -11,6 +11,6 @@ export { default as TableColumnResizer } from './column-resizer/table-column-res
 export { default as TableCheckbox } from './checkbox/table-checkbox.svelte';
 export { default as TableCheckboxIndicator } from './checkbox-indicator/table-checkbox-indicator.svelte';
 export { default as TableCell } from './cell/table-cell.svelte';
-export { createTableContext, getTableContext, setTableContext, useTableContext, getTableSectionContext, setTableSectionContext, useTableSectionContext, getTableRowContext, setTableRowContext, useTableRowContext, getTableColumnContext, setTableColumnContext, useTableColumnContext, type TableContext, type TableSelectionBehavior, type TableSelectionCheckboxState, type TableSelectionKey, type TableSelectionMode, type TableSortDirection, type TableSortDescriptor, type TableColumnWidth, type TableGridCoord, type TableColumnRegistration, type TableSectionKind, type TableSectionContext, type TableRowContext, type TableColumnContext, type CreateTableContextOptions } from './root/context';
-import * as TableParts from './index.parts.ts';
+export { createTableContext, getTableContext, setTableContext, useTableContext, getTableSectionContext, setTableSectionContext, useTableSectionContext, getTableRowContext, setTableRowContext, useTableRowContext, getTableColumnContext, setTableColumnContext, useTableColumnContext, type TableContext, type TableSelectionBehavior, type TableSelectionCheckboxState, type TableSelectionKey, type TableSelectionMode, type TableSortDirection, type TableSortDescriptor, type TableColumnWidth, type TableGridCoord, type TableColumnRegistration, type TableSectionKind, type TableSectionContext, type TableRowContext, type TableColumnContext, type CreateTableContextOptions } from './root/context.js';
+import * as TableParts from './index.parts.js';
 export default TableParts;

package/dist/table/index.js

@@ -1,4 +1,4 @@
-export * as Table from './index.parts.ts';
+export * as Table from './index.parts.js';
 export { default as TableRoot } from './root/table-root.svelte';
 export { default as TableColumn } from './column/table-column.svelte';
 export { default as TableHeader } from './header/table-header.svelte';
@@ -11,6 +11,6 @@ export { default as TableColumnResizer } from './column-resizer/table-column-res
 export { default as TableCheckbox } from './checkbox/table-checkbox.svelte';
 export { default as TableCheckboxIndicator } from './checkbox-indicator/table-checkbox-indicator.svelte';
 export { default as TableCell } from './cell/table-cell.svelte';
-export { createTableContext, getTableContext, setTableContext, useTableContext, getTableSectionContext, setTableSectionContext, useTableSectionContext, getTableRowContext, setTableRowContext, useTableRowContext, getTableColumnContext, setTableColumnContext, useTableColumnContext } from './root/context';
-import * as TableParts from './index.parts.ts';
+export { createTableContext, getTableContext, setTableContext, useTableContext, getTableSectionContext, setTableSectionContext, useTableSectionContext, getTableRowContext, setTableRowContext, useTableRowContext, getTableColumnContext, setTableColumnContext, useTableColumnContext } from './root/context.js';
+import * as TableParts from './index.parts.js';
 export default TableParts;

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/index.d.ts

@@ -1,4 +1,4 @@
-export * as TimePicker from './index.parts.ts';
+export * as TimePicker from './index.parts.js';
 export { default as TimePickerRoot } from './root/time-picker-root.svelte';
 export { default as TimePickerInput } from './input/time-picker-input.svelte';
 export { default as TimePickerSegment } from './segment/time-picker-segment.svelte';
@@ -7,8 +7,8 @@ export { default as TimePickerPopover } from './popover/time-picker-popover.svel
 export { default as TimePickerClock } from './clock/time-picker-clock.svelte';
 export { default as TimePickerWheelColumn } from '../clock/wheel-column/clock-wheel-column.svelte';
 export { default as TimePickerWheelItem } from '../clock/wheel-item/clock-wheel-item.svelte';
-export { getTimePickerContext, setTimePickerContext, useTimePickerContext, type TimePickerContext, type TimePickerOpenChangeDetails, type TimePickerOpenChangeReason, type TimePickerSegmentPart, type TimePickerSegmentType, type TimePickerEditableSegmentType } from './root/context.ts';
-export { type TimePickerGranularity, type TimePickerHourCycle, type TimePickerTimeValue } from './root/time-utils';
-export { type ClockColumnInfo } from '../clock/root/resolve-visible-columns';
-import * as TimePickerParts from './index.parts.ts';
+export { getTimePickerContext, setTimePickerContext, useTimePickerContext, type TimePickerContext, type TimePickerOpenChangeDetails, type TimePickerOpenChangeReason, type TimePickerSegmentPart, type TimePickerSegmentType, type TimePickerEditableSegmentType } from './root/context.js';
+export { type TimePickerGranularity, type TimePickerHourCycle, type TimePickerTimeValue } from './root/time-utils.js';
+export { type ClockColumnInfo } from '../clock/root/resolve-visible-columns.js';
+import * as TimePickerParts from './index.parts.js';
 export default TimePickerParts;

package/dist/timepicker/index.js

@@ -1,4 +1,4 @@
-export * as TimePicker from './index.parts.ts';
+export * as TimePicker from './index.parts.js';
 export { default as TimePickerRoot } from './root/time-picker-root.svelte';
 export { default as TimePickerInput } from './input/time-picker-input.svelte';
 export { default as TimePickerSegment } from './segment/time-picker-segment.svelte';
@@ -7,8 +7,8 @@ export { default as TimePickerPopover } from './popover/time-picker-popover.svel
 export { default as TimePickerClock } from './clock/time-picker-clock.svelte';
 export { default as TimePickerWheelColumn } from '../clock/wheel-column/clock-wheel-column.svelte';
 export { default as TimePickerWheelItem } from '../clock/wheel-item/clock-wheel-item.svelte';
-export { getTimePickerContext, setTimePickerContext, useTimePickerContext } from './root/context.ts';
-export {} from './root/time-utils';
-export {} from '../clock/root/resolve-visible-columns';
-import * as TimePickerParts from './index.parts.ts';
+export { getTimePickerContext, setTimePickerContext, useTimePickerContext } from './root/context.js';
+export {} from './root/time-utils.js';
+export {} from '../clock/root/resolve-visible-columns.js';
+import * as TimePickerParts from './index.parts.js';
 export default TimePickerParts;

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.5",
+	"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",