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

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.8",
 	"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",