noph-ui 0.33.4 → 0.34.0

package/dist/autocomplete/AutoComplete.svelte

@@ -134,7 +134,6 @@
 	{...attributes}
 	autocomplete="off"
 	{variant}
-	type="text"
 	populated={finalPopulated}
 	bind:clientWidth
 	bind:value

package/dist/autocomplete/types.d.ts

@@ -1,4 +1,4 @@
-import type { InputFieldProps } from '../types.ts';
+import type { TextFieldProps } from '../types.ts';
 import type { Snippet } from 'svelte';
 export interface AutoCompleteOption {
     value?: string | number;
@@ -7,13 +7,11 @@ export interface AutoCompleteOption {
     end?: Snippet;
     supportingText?: string;
 }
-export interface AutoCompleteProps extends Omit<InputFieldProps, 'clientWidth' | 'clientHeight'> {
+export interface AutoCompleteProps extends Omit<TextFieldProps, 'clientWidth' | 'clientHeight'> {
     options: AutoCompleteOption[];
     optionsFilter?: (option: AutoCompleteOption) => boolean;
     onoptionselect?: (option: AutoCompleteOption, menuElement: HTMLDivElement) => void;
     clampMenuWidth?: boolean;
-    showPopover?: () => void;
-    hidePopover?: () => void;
     virtualThreshold?: number;
     menuOpen?: boolean;
 }

package/dist/button/Button.svelte

@@ -3,7 +3,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import { onMount } from 'svelte'
-	import type { HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { ButtonProps } from './types.ts'
 
 	let {
@@ -86,6 +86,7 @@
 			size,
 			selected ? 'square' : shape,
 			toggle && 'toggle',
+			selected && 'selected',
 			'enabled',
 			variant,
 			pressed && 'pressed',
@@ -110,8 +111,7 @@
 			} else {
 				handlePress()
 			}
-			// prettier-ignore
-			;(attributes.onclick as MouseEventHandler<HTMLButtonElement>)?.(event)
+			attributes.onclick?.(event)
 		}}
 		class={[
 			'np-button',

package/dist/button/IconButton.svelte

@@ -3,7 +3,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import { onMount } from 'svelte'
-	import type { HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { IconButtonProps } from './types.ts'
 
 	let {
@@ -103,8 +103,7 @@
 			} else {
 				handlePress()
 			}
-			// prettier-ignore
-			;(attributes.onclick as MouseEventHandler<HTMLButtonElement>)?.(event)
+			attributes.onclick?.(event)
 		}}
 		class={[
 			'np-icon-button',

package/dist/button/types.d.ts

@@ -1,58 +1,27 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-interface ButtonButtonProps extends HTMLButtonAttributes {
-    variant?: 'text' | 'filled' | 'outlined' | 'elevated' | 'tonal';
-    start?: Snippet | undefined;
-    end?: Snippet | undefined;
+export type ButtonElement = HTMLButtonElement | HTMLAnchorElement;
+interface BaseButtonProps extends HTMLAttributes<ButtonElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
     element?: HTMLElement;
     disabled?: boolean;
     loading?: boolean;
     loadingAriaLabel?: string;
-    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
     toggle?: boolean;
-    shape?: 'round' | 'square';
     selected?: boolean;
+    shape?: 'round' | 'square';
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
 }
-interface ButtonAnchorProps extends HTMLAnchorAttributes {
+export interface ButtonProps extends BaseButtonProps {
     variant?: 'text' | 'filled' | 'outlined' | 'elevated' | 'tonal';
     start?: Snippet;
     end?: Snippet;
-    element?: HTMLElement;
-    disabled?: boolean;
-    loading?: boolean;
-    loadingAriaLabel?: string;
-    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
-    toggle?: boolean;
-    shape?: 'round' | 'square';
-    selected?: boolean;
-}
-interface IconButtonButtonProps extends HTMLButtonAttributes {
-    variant?: 'text' | 'filled' | 'outlined' | 'tonal';
-    element?: HTMLElement;
-    toggle?: boolean;
-    selected?: boolean;
-    loading?: boolean;
-    loadingAriaLabel?: string;
-    selectedIcon?: Snippet;
-    shape?: 'round' | 'square';
-    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
-    width?: 'narrow' | 'wide' | 'default';
 }
-interface IconButtonAnchorProps extends HTMLAnchorAttributes {
+export interface IconButtonProps extends BaseButtonProps {
     variant?: 'text' | 'filled' | 'outlined' | 'tonal';
-    element?: HTMLElement;
-    disabled?: boolean;
-    loading?: boolean;
-    loadingAriaLabel?: string;
-    toggle?: boolean;
-    selected?: boolean;
     selectedIcon?: Snippet;
-    shape?: 'round' | 'square';
-    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
     width?: 'narrow' | 'wide' | 'default';
 }
-export type IconButtonProps = IconButtonButtonProps | IconButtonAnchorProps;
-export type ButtonProps = ButtonButtonProps | ButtonAnchorProps;
 export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
     name: string;
     multiSelect?: boolean;

package/dist/card/Card.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { FocusEventHandler } from 'svelte/elements'
 	import type { CardProps } from './types.ts'
 
 	let {
@@ -15,6 +14,7 @@
 		children,
 		onfocus,
 		onblur,
+		type,
 		...attributes
 	}: CardProps = $props()
 
@@ -60,12 +60,12 @@
 			<div class="np-card-action">{@render action()}</div>
 		{/if}
 	</div>
-	{#if !disabled && attributes.type !== 'text'}
+	{#if !disabled && type !== 'text'}
 		<Ripple forceHover={focused} />
 	{/if}
 {/snippet}
 
-{#if attributes.type === 'text'}
+{#if type === 'text'}
 	<div
 		{...attributes}
 		bind:this={element}
@@ -79,18 +79,19 @@
 	>
 		{@render content()}
 	</div>
-{:else if attributes.type === 'button'}
+{:else if type === 'button'}
 	<button
 		aria-disabled={disabled}
 		{...attributes}
+		type="button"
 		bind:this={element}
 		onfocus={(event) => {
 			focused = true
-			;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
+			onfocus?.(event)
 		}}
 		onblur={(event) => {
 			focused = false
-			;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
+			onblur?.(event)
 		}}
 		{disabled}
 		class={[
@@ -102,7 +103,7 @@
 	>
 		{@render content()}
 	</button>
-{:else if attributes.type === 'link'}
+{:else if type === 'link'}
 	<a
 		{...attributes}
 		bind:this={element}
@@ -111,11 +112,11 @@
 		role="link"
 		onfocus={(event) => {
 			focused = true
-			;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
+			onfocus?.(event)
 		}}
 		onblur={(event) => {
 			focused = false
-			;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
+			onblur?.(event)
 		}}
 		class={[
 			'np-card-container',

package/dist/card/types.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-interface TextProps extends HTMLAttributes<HTMLDivElement> {
+export type CardElement = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;
+export interface CardProps extends HTMLAttributes<CardElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
     variant?: 'elevated' | 'filled' | 'outlined';
     disabled?: boolean;
     image?: string | null;
@@ -9,29 +10,5 @@ interface TextProps extends HTMLAttributes<HTMLDivElement> {
     subhead?: string | null;
     supportingText?: string | null;
     action?: Snippet<[]>;
-    type: 'text';
+    type: 'text' | 'button' | 'link';
 }
-interface ButtonProps extends HTMLButtonAttributes {
-    variant?: 'elevated' | 'filled' | 'outlined';
-    disabled?: boolean;
-    image?: string | null;
-    element?: HTMLElement;
-    headline?: string | null;
-    subhead?: string | null;
-    supportingText?: string | null;
-    action?: Snippet<[]>;
-    type: 'button';
-}
-interface AnchorProps extends HTMLAnchorAttributes {
-    variant?: 'elevated' | 'filled' | 'outlined';
-    disabled?: boolean;
-    image?: string | null;
-    element?: HTMLElement;
-    headline?: string | null;
-    subhead?: string | null;
-    supportingText?: string | null;
-    action?: Snippet<[]>;
-    type: 'link';
-}
-export type CardProps = TextProps | ButtonProps | AnchorProps;
-export {};

package/dist/chip/types.d.ts

@@ -1,23 +1,16 @@
+import type { ButtonElement, ButtonProps } from '../button/types.ts';
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLAttributes, MouseEventHandler } from 'svelte/elements';
 export interface ChipSetProps extends HTMLAttributes<HTMLDivElement> {
     chipsCount?: number;
 }
-interface AssistChipButtonProps extends HTMLButtonAttributes {
+export interface AssistChipProps extends Omit<ButtonProps, 'variant' | 'start' | 'end' | 'element'> {
     elevated?: boolean;
     disabled?: boolean;
     label?: string;
     icon?: Snippet;
     element?: HTMLDivElement;
 }
-interface AssistChipAnchorProps extends HTMLAnchorAttributes {
-    elevated?: boolean;
-    disabled?: boolean;
-    label?: string;
-    icon?: Snippet;
-    element?: HTMLDivElement;
-}
-export type AssistChipProps = AssistChipButtonProps | AssistChipAnchorProps;
 export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
     removable?: boolean;
@@ -31,9 +24,7 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     value?: string;
     group?: (string | number)[] | null;
     defaultSelected?: boolean | null;
-    onremove?: (event: MouseEvent & {
-        currentTarget: EventTarget & HTMLButtonElement;
-    }) => void;
+    onremove?: MouseEventHandler<ButtonElement>;
 }
 export interface InputChipProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
@@ -44,9 +35,7 @@ export interface InputChipProps extends HTMLAttributes<HTMLDivElement> {
     element?: HTMLDivElement;
     name?: string;
     value?: string | number;
-    onremove?: (event: MouseEvent & {
-        currentTarget: EventTarget & HTMLButtonElement;
-    }) => void;
+    onremove?: MouseEventHandler<ButtonElement>;
 }
 export interface ChipSetContext {
     chips: {
@@ -55,4 +44,3 @@ export interface ChipSetContext {
         value: string | number | undefined;
     }[];
 }
-export {};

package/dist/dialog/Dialog.svelte

@@ -4,8 +4,6 @@
 
 	let {
 		element = $bindable(),
-		showPopover = $bindable(),
-		hidePopover = $bindable(),
 		quick = false,
 		children,
 		headline,
@@ -18,11 +16,11 @@
 
 	const uid = $props.id()
 
-	showPopover = () => {
+	export function showPopover() {
 		element?.showPopover()
 	}
 
-	hidePopover = () => {
+	export function hidePopover() {
 		element?.hidePopover()
 	}
 </script>

package/dist/dialog/Dialog.svelte.d.ts

@@ -1,4 +1,7 @@
 import type { DialogProps } from './types.ts';
-declare const Dialog: import("svelte").Component<DialogProps, {}, "element" | "showPopover" | "hidePopover">;
+declare const Dialog: import("svelte").Component<DialogProps, {
+    showPopover: () => void;
+    hidePopover: () => void;
+}, "element">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/dialog/types.d.ts

@@ -8,6 +8,4 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'popov
     actions?: Snippet;
     quick?: boolean;
     element?: HTMLElement;
-    showPopover?: () => void;
-    hidePopover?: () => void;
 }

package/dist/icons/Icon.svelte

@@ -47,4 +47,4 @@
 		writing-mode: horizontal-tb;
 		position: relative;
 	}
-</style>
+</style>

package/dist/list/Item.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
 	import { onMount } from 'svelte'
-	import type { FocusEventHandler } from 'svelte/elements'
 	import type { ItemProps } from './types.ts'
 
 	let {
@@ -86,11 +85,11 @@
 		type={attributes.type ?? 'button'}
 		onfocus={(event) => {
 			focused = true
-			;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
+			onfocus?.(event)
 		}}
 		onblur={(event) => {
 			focused = false
-			;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
+			onblur?.(event)
 		}}
 		class={['np-item', selected && 'selected', attributes.class]}
 		bind:this={element}
@@ -105,11 +104,11 @@
 		{...attributes}
 		onfocus={(event) => {
 			focused = true
-			;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
+			onfocus?.(event)
 		}}
 		onblur={(event) => {
 			focused = false
-			;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
+			onblur?.(event)
 		}}
 		class={['np-item', selected && 'selected', attributes.class]}
 		bind:this={element}

package/dist/list/ListItem.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { ListItemProps } from './types.ts';
-declare const ListItem: import("svelte").Component<ListItemProps, {}, "">;
+declare const ListItem: import("svelte").Component<import("./types.ts").ItemProps, {}, "">;
 type ListItem = ReturnType<typeof ListItem>;
 export default ListItem;

package/dist/list/types.d.ts

@@ -1,37 +1,18 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-interface ButtonProps extends HTMLButtonAttributes {
-    selected?: boolean;
-    start?: Snippet;
-    end?: Snippet;
-    variant: 'button';
-    supportingText?: Snippet;
-    softFocus?: boolean;
-    lazy?: boolean;
-}
-interface AnchorProps extends HTMLAnchorAttributes {
-    selected?: boolean;
-    start?: Snippet;
-    end?: Snippet;
-    disabled?: boolean;
-    variant: 'link';
-    supportingText?: Snippet;
-    softFocus?: boolean;
-    lazy?: boolean;
-}
-interface TextProps extends HTMLAttributes<HTMLDivElement> {
+export type ItemElement = HTMLButtonElement | HTMLAnchorElement | HTMLDivElement;
+export interface ItemProps extends HTMLAttributes<ItemElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
     selected?: boolean;
     start?: Snippet;
     end?: Snippet;
     disabled?: boolean;
-    variant?: 'text';
+    variant?: 'button' | 'link' | 'text';
     supportingText?: Snippet;
     softFocus?: boolean;
     lazy?: boolean;
+    type?: 'submit' | 'reset' | 'button' | null;
 }
-export type ItemProps = ButtonProps | AnchorProps | TextProps;
-export type ListItemProps = ButtonProps | AnchorProps | TextProps;
+export type ListItemProps = ItemProps;
 export interface ListProps extends HTMLAttributes<HTMLUListElement> {
     element?: HTMLUListElement;
 }
-export {};

package/dist/menu/Menu.svelte

@@ -5,8 +5,6 @@
 	let {
 		children,
 		element = $bindable(),
-		showPopover = $bindable(),
-		hidePopover = $bindable(),
 		open = $bindable(),
 		style,
 		popover = 'auto',
@@ -19,11 +17,11 @@
 	let clientHeight = $state(0)
 	let innerHeight = $state(0)
 
-	showPopover = () => {
+	export function showPopover() {
 		element?.showPopover()
 	}
 
-	hidePopover = () => {
+	export function hidePopover() {
 		element?.hidePopover()
 	}
 	const refreshValues = () => {

package/dist/menu/Menu.svelte.d.ts

@@ -1,4 +1,7 @@
 import type { MenuProps } from './types.ts';
-declare const Menu: import("svelte").Component<MenuProps, {}, "element" | "showPopover" | "hidePopover" | "open">;
+declare const Menu: import("svelte").Component<MenuProps, {
+    showPopover: () => void;
+    hidePopover: () => void;
+}, "element" | "open">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/menu/MenuItem.svelte

@@ -1,20 +1,15 @@
 <script lang="ts">
 	import Item from '../list/Item.svelte'
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
 	import type { MenuItemProps } from './types.ts'
 
 	let { ...attributes }: MenuItemProps = $props()
-
-	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
-		return (obj as HTMLAnchorAttributes).href === undefined
-	}
 </script>
 
 <li class="np-menu-item" role="menuitem">
-	{#if isButton(attributes)}
-		<Item {...attributes} variant="button" />
-	{:else}
+	{#if 'href' in attributes}
 		<Item {...attributes} variant="link" />
+	{:else}
+		<Item {...attributes} variant="button" />
 	{/if}
 </li>
 

package/dist/menu/types.d.ts

@@ -1,27 +1,10 @@
+import type { ItemProps } from '../list/types.ts';
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLAttributes } from 'svelte/elements';
 export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
     anchor?: HTMLElement | undefined;
-    showPopover?: () => void;
-    hidePopover?: () => void;
     element?: HTMLDivElement;
     open?: boolean;
 }
-interface ButtonProps extends HTMLButtonAttributes {
-    selected?: boolean;
-    start?: Snippet;
-    end?: Snippet;
-    supportingText?: Snippet;
-    lazy?: boolean;
-}
-interface AnchorProps extends HTMLAnchorAttributes {
-    selected?: boolean;
-    start?: Snippet;
-    end?: Snippet;
-    disabled?: boolean;
-    supportingText?: Snippet;
-    lazy?: boolean;
-}
-export type MenuItemProps = ButtonProps | AnchorProps;
-export {};
+export type MenuItemProps = Omit<ItemProps, 'variant' | 'softFocus'>;

package/dist/navigation-drawer/types.d.ts

@@ -6,17 +6,11 @@ export interface NavigationDrawerProps extends HTMLAttributes<HTMLElement> {
     element?: HTMLElement;
     direction?: 'rtl' | 'ltr';
 }
-interface NavigationDrawerItemButton extends HTMLButtonAttributes {
+export type NavigationDrawerItemElement = HTMLButtonElement | HTMLAnchorElement;
+export interface NavigationDrawerItemProps extends HTMLAttributes<NavigationDrawerItemElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
     icon?: Snippet;
     label: string;
     selected?: boolean;
     badgeLabelText?: string;
+    type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
 }
-interface NavigationDrawerItemLink extends HTMLAnchorAttributes {
-    icon?: Snippet;
-    label: string;
-    selected?: boolean;
-    badgeLabelText?: string;
-}
-export type NavigationDrawerItemProps = NavigationDrawerItemButton | NavigationDrawerItemLink;
-export {};

package/dist/navigation-rail/types.d.ts

@@ -1,15 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export type NavigationRailProps = HTMLAttributes<HTMLElement>;
-interface NavigationRailItemButton extends HTMLButtonAttributes {
+export type NavigationRailItemElement = HTMLButtonElement | HTMLAnchorElement;
+export interface NavigationRailItemProps extends HTMLAttributes<NavigationRailItemElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
     icon: Snippet;
     label: string;
     selected?: boolean;
+    type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
 }
-interface NavigationRailItemLink extends HTMLAnchorAttributes {
-    icon: Snippet;
-    label: string;
-    selected?: boolean;
-}
-export type NavigationRailItemProps = NavigationRailItemButton | NavigationRailItemLink;
-export {};

package/dist/snackbar/Snackbar.svelte

@@ -12,8 +12,6 @@
 		onIconClick = () => {
 			element?.hidePopover()
 		},
-		showPopover = $bindable(),
-		hidePopover = $bindable(),
 		open = $bindable(false),
 		onbeforetoggle,
 		timeout = 4000,
@@ -25,11 +23,11 @@
 	let timeoutId: number | undefined = $state()
 	const uid = $props.id()
 
-	showPopover = () => {
+	export function showPopover() {
 		element?.showPopover()
 	}
 
-	hidePopover = () => {
+	export function hidePopover() {
 		element?.hidePopover()
 	}
 </script>

package/dist/snackbar/Snackbar.svelte.d.ts

@@ -1,4 +1,7 @@
 import type { SnackbarProps } from './types.ts';
-declare const Snackbar: import("svelte").Component<SnackbarProps, {}, "element" | "showPopover" | "hidePopover" | "open">;
+declare const Snackbar: import("svelte").Component<SnackbarProps, {
+    showPopover: () => void;
+    hidePopover: () => void;
+}, "element" | "open">;
 type Snackbar = ReturnType<typeof Snackbar>;
 export default Snackbar;

package/dist/snackbar/types.d.ts

@@ -8,8 +8,6 @@ export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
     onActionClick?: (event: Event) => void;
     icon?: Snippet | undefined;
     onIconClick?: (event: Event) => void;
-    showPopover?: () => void;
-    hidePopover?: () => void;
     timeout?: number;
     element?: HTMLElement;
     popover?: 'auto' | 'manual';

package/dist/text-field/TextField.svelte

@@ -107,8 +107,7 @@
 								bind:value
 								bind:this={inputElement}
 								class="input"
-								rows={attributes.rows || 2}
-							></textarea>
+								rows={attributes.rows || 2}></textarea>
 						{:else}
 							<div class="input-wrapper">
 								{#if suffixText}

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { HTMLInputAttributes, HTMLTextareaAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLInputAttributes, HTMLTextareaAttributes } from 'svelte/elements';
 interface FieldProps {
     label?: string;
     supportingText?: string;
@@ -19,11 +19,16 @@ interface FieldProps {
     clientHeight?: number;
     focused?: boolean;
 }
+export type TextFieldType = 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'datetime-local' | 'date' | 'datetime' | 'time';
+export type TextFieldElement = HTMLInputElement | HTMLTextAreaElement;
 export interface InputFieldProps extends HTMLInputAttributes, FieldProps {
-    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'datetime-local' | 'date' | 'datetime' | 'time';
+    type?: TextFieldType;
 }
 export interface TextAreaFieldProps extends HTMLTextareaAttributes, FieldProps {
     type: 'textarea';
 }
-export type TextFieldProps = InputFieldProps | TextAreaFieldProps;
+export interface TextFieldProps extends HTMLAttributes<TextFieldElement>, Omit<HTMLInputAttributes, keyof HTMLAttributes<HTMLInputElement> | 'type' | 'value' | 'defaultValue' | 'defaultvalue'>, Omit<HTMLTextareaAttributes, keyof HTMLAttributes<HTMLTextAreaElement> | 'value' | 'defaultValue' | 'defaultvalue'>, FieldProps {
+    type?: TextFieldType | 'textarea';
+    value?: string;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "noph-ui",
-	"version": "0.33.4",
+	"version": "0.34.0",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {
@@ -10,6 +10,10 @@
 	"author": {
 		"name": "cnolte"
 	},
+	"imports": {
+		"#lib": "./src/lib/index.js",
+		"#lib/*": "./src/lib/*"
+	},
 	"keywords": [
 		"svelte",
 		"svelte 5",
@@ -71,27 +75,28 @@
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
 		"@materialx/material-color-utilities": "^0.4.8",
-		"@playwright/test": "^1.59.1",
-		"@sveltejs/adapter-auto": "^7.0.1",
-		"@sveltejs/kit": "^2.57.1",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^7.0.0",
+		"@playwright/test": "^1.61.1",
+		"@sveltejs/adapter-vercel": "7.0.0-next.2",
+		"@sveltejs/kit": "3.0.0-next.11",
+		"@sveltejs/package": "3.0.0-next.3",
+		"@sveltejs/vite-plugin-svelte": "7.2.0",
 		"@types/eslint": "^9.6.1",
-		"eslint": "^10.2.1",
+		"eslint": "^10.7.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.17.1",
-		"globals": "^17.5.0",
-		"prettier": "^3.8.3",
-		"prettier-plugin-svelte": "^3.5.1",
-		"publint": "^0.3.18",
-		"svelte": "^5.55.4",
-		"svelte-check": "^4.4.6",
+		"eslint-plugin-svelte": "^3.22.0",
+		"globals": "^17.7.0",
+		"prettier": "^3.9.6",
+		"prettier-plugin-svelte": "^4.1.1",
+		"publint": "^0.3.21",
+		"svelte": "^5.56.7",
+		"svelte-check": "^4.7.3",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.59.0",
-		"vite": "8.0.10",
-		"vitest": "^4.1.5"
+		"typescript-eslint": "^8.65.0",
+		"vite": "8.1.5",
+		"vitest": "^4.1.10"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
-	"type": "module"
+	"type": "module",
+	"packageManager": "pnpm@11.9.0"
 }