@axium/client 0.15.0 → 0.15.2

package/assets/styles.css

@@ -69,6 +69,8 @@ button.reset {
 textarea {
 	background: var(--bg-normal);
 	border: 1px solid var(--border-accent);
+	font-family: inherit;
+	font-size: inherit;
 }
 
 input,

package/lib/Icon.svelte

@@ -4,7 +4,7 @@
 	const href = $derived(`/icons/${style}.svg#${id}`);
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" {...rest}>
+<svg class="Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" {...rest}>
 	<use {href} />
 </svg>
 

package/lib/Popover.svelte

@@ -1,13 +1,25 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	import Icon from './Icon.svelte';
-	const { children, toggle, showToggle }: { children(): any; toggle?(): any; showToggle?: 'hover' | 'always' } = $props();
+	const {
+		children,
+		toggle,
+		showToggle,
+		popover,
+		...rest
+	}: {
+		children(): any;
+		toggle?(): any;
+		showToggle?: 'hover' | 'always';
+		popover?: 'auto' | 'hint' | 'manual';
+	} & HTMLAttributes<HTMLDivElement> = $props();
 
-	let popover = $state<HTMLDivElement>();
+	let popoverElement = $state<HTMLDivElement>();
 
 	function onclick(e: MouseEvent) {
 		e.stopPropagation();
 		// @ts-expect-error 2345
-		popover?.togglePopover({ source: e.currentTarget });
+		popoverElement?.togglePopover({ source: e.currentTarget });
 	}
 </script>
 
@@ -20,7 +32,7 @@
 		</span>
 	{/if}
 
-	<div popover bind:this={popover}>
+	<div popover={popover || 'auto'} bind:this={popoverElement} {...rest}>
 		{@render children()}
 	</div>
 </div>

package/lib/UserDiscovery.svelte

@@ -24,7 +24,7 @@
 	let value = $state<string>();
 	let gotError = $state<boolean>(false);
 
-	async function onchange() {
+	async function oninput() {
 		if (!value || !value.length) {
 			results = [];
 			return;
@@ -55,7 +55,7 @@
 	}
 </script>
 
-<input bind:value type="text" placeholder="Add users and roles" {onchange} onkeyup={onchange} />
+<input bind:value type="text" placeholder="Add users and roles" {oninput} />
 {#if !gotError && value}
 	<!-- Don't show results when we can't use the discovery API -->
 	<div class="results">

package/lib/ZodInput.svelte

@@ -87,14 +87,14 @@
 		updateValue(rootValue);
 	}
 
-	const onkeyup = onchange;
+	const oninput = onchange;
 </script>
 
 {#snippet _in(rest: HTMLInputAttributes)}
 	<div class="ZodInput">
 		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
 		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
-		<input {id} {...rest} bind:value {onchange} {onkeyup} required={!optional} {defaultValue} class={[error && 'error']} />
+		<input {id} {...rest} bind:value {onchange} {oninput} required={!optional} {defaultValue} class={[error && 'error']} />
 	</div>
 {/snippet}
 
@@ -107,7 +107,7 @@
 {:else if schema.type == 'boolean'}
 	<div class="ZodInput">
 		{#if !noLabel}<label for="{id}:checkbox">{label || path}</label>{/if}
-		<input bind:checked={value} id="{id}:checkbox" type="checkbox" {onchange} {onkeyup} required={!optional} />
+		<input bind:checked={value} id="{id}:checkbox" type="checkbox" {onchange} required={!optional} />
 		<label for="{id}:checkbox" {id} class="checkbox">
 			{#if value}<Icon i="check" --size="1.3em" />{/if}
 		</label>
@@ -123,7 +123,7 @@
 {:else if schema.type == 'literal'}
 	<div class="ZodInput">
 		<label for={id}>{label || path}</label>
-		<select bind:value {id} {onchange} {onkeyup} required={!optional}>
+		<select bind:value {id} {oninput} required={!optional}>
 			{#each schema.values as value}
 				<option {value} selected={value === value}>{value}</option>
 			{/each}
@@ -143,15 +143,7 @@
 		<div class="ZodInput-array">
 			{#each value, i}
 				<div class="ZodInput-element">
-					<input
-						id="{id}.{i}"
-						bind:value={value[i]}
-						{onchange}
-						{onkeyup}
-						required={!optional}
-						{defaultValue}
-						class={[error && 'error']}
-					/>
+					<input id="{id}.{i}" bind:value={value[i]} {oninput} required={!optional} {defaultValue} class={[error && 'error']} />
 					<button
 						onclick={e => {
 							value.splice(i, 1);
@@ -192,7 +184,7 @@
 	<div class="ZodInput">
 		{#if !noLabel}<label for={id}>{label || path}</label>{/if}
 		{#if error}<span class="ZodInput-error error-text">{error}</span>{/if}
-		<select {id} {onchange} {onkeyup} bind:value required={!optional}>
+		<select {id} {onchange} bind:value required={!optional}>
 			{#each Object.entries(schema.enum) as [key, value]}
 				<option {value} selected={value === value}>{key}</option>
 			{/each}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.15.0",
+	"version": "0.15.2",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -42,7 +42,7 @@
 	},
 	"peerDependencies": {
 		"@axium/core": ">=0.19.0",
-		"utilium": "^2.3.8",
+		"utilium": "^2.6.3",
 		"zod": "^4.0.5",
 		"svelte": "^5.36.0"
 	},