noph-ui 0.4.1 → 0.4.2

package/dist/text-field/TextField.svelte

@@ -16,19 +16,19 @@
 		noAsterisk = false,
 		variant = 'filled',
 		placeholder = ' ',
+		element = $bindable(),
 		...attributes
 	}: TextFieldProps = $props()
 
-	let contentEl: HTMLInputElement | HTMLTextAreaElement | undefined = $state()
 	let errorTextRaw = $state(errorText)
 
 	$effect(() => {
-		if (contentEl) {
-			contentEl.form?.addEventListener('reset', () => {
+		if (element) {
+			element.form?.addEventListener('reset', () => {
 				error = false
 				value = ''
 			})
-			contentEl.addEventListener('invalid', (event) => {
+			element.addEventListener('invalid', (event) => {
 				event.preventDefault()
 				const { currentTarget } = event as Event & {
 					currentTarget: HTMLInputElement | HTMLTextAreaElement
@@ -42,7 +42,7 @@
 				}
 			})
 
-			contentEl.addEventListener('change', (event) => {
+			element.addEventListener('change', (event) => {
 				const { currentTarget } = event as Event & {
 					currentTarget: HTMLInputElement | HTMLTextAreaElement
 				}
@@ -68,7 +68,7 @@
 		if (attributes.disabled) {
 			return
 		}
-		contentEl?.focus()
+		element?.focus()
 	}}
 >
 	<div
@@ -117,7 +117,7 @@
 							<textarea
 								{...attributes}
 								bind:value
-								bind:this={contentEl}
+								bind:this={element}
 								class="input"
 								aria-label={label}
 								{placeholder}
@@ -133,7 +133,7 @@
 								<input
 									{...attributes}
 									bind:value
-									bind:this={contentEl}
+									bind:this={element}
 									class="input"
 									{placeholder}
 									aria-label={label}

package/dist/text-field/TextField.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TextFieldProps } from './types.ts';
-declare const TextField: import("svelte").Component<TextFieldProps, {}, "value">;
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/dist/text-field/types.d.ts

@@ -12,6 +12,7 @@ export interface InputFieldProps extends Omit<HTMLInputAttributes, 'class'> {
     start?: Snippet;
     end?: Snippet;
     noAsterisk?: boolean;
+    element?: HTMLInputElement;
 }
 export interface TextAreaFieldProps extends Omit<HTMLTextareaAttributes, 'class'> {
     label?: string;
@@ -25,5 +26,6 @@ export interface TextAreaFieldProps extends Omit<HTMLTextareaAttributes, 'class'
     start?: Snippet;
     end?: Snippet;
     noAsterisk?: boolean;
+    element?: HTMLTextAreaElement;
 }
 export type TextFieldProps = InputFieldProps | TextAreaFieldProps;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "noph-ui",
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {