@14ch/svelte-ui 0.0.41 → 0.0.43

package/dist/components/Pagination.svelte

@@ -4,6 +4,7 @@
 	import Icon from './Icon.svelte';
 	import { announceToScreenReader } from '../utils/accessibility';
 	import { t } from '../i18n';
+	import type { BivariantValueHandler } from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -31,7 +32,7 @@
 		showTotal?: boolean;
 
 		// イベントハンドラー
-		onchange: (pageNum: number) => void;
+		onchange?: BivariantValueHandler<number>;
 	};
 
 	let {
@@ -151,7 +152,7 @@
 	});
 </script>
 
-<div class="pagination" {id}>
+<div class="pagination" {id} data-testid="pagination">
 	{#if showCount && rangeText}
 		<div class="pagination__count">{rangeText}</div>
 	{/if}

package/dist/components/Pagination.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { BivariantValueHandler } from '../types/callbackHandlers';
 export type PaginationProps = {
     /** Total number of items. */
     total: number;
@@ -14,7 +15,7 @@ export type PaginationProps = {
     showRange?: boolean;
     /** Shows total count. @default true */
     showTotal?: boolean;
-    onchange: (pageNum: number) => void;
+    onchange?: BivariantValueHandler<number>;
 };
 declare const Pagination: import("svelte").Component<PaginationProps, {}, "">;
 type Pagination = ReturnType<typeof Pagination>;

package/dist/components/Popup.svelte

@@ -551,6 +551,7 @@
 	aria-describedby={ariaDescribedby}
 	aria-modal={undefined}
 	id={popupId}
+	data-testid="popup"
 	use:clickOutside={() => {
 		close('outside');
 	}}

package/dist/components/PopupMenu.svelte

@@ -250,6 +250,7 @@
 		aria-activedescendant={activeIndex >= 0 ? getMenuItemId(activeIndex) : undefined}
 		tabindex="-1"
 		{id}
+		data-testid="popup-menu"
 		onclick={cancelParentEvent}
 		onkeydown={handleKeyDown}
 	>

package/dist/components/PopupMenuButton.svelte

@@ -47,6 +47,9 @@
 		/** Stops click event propagation to parent elements. @default false */
 		cancelParentClick?: boolean;
 
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+
 		// フォーカスイベント
 		onfocus?: FocusHandler;
 		onblur?: FocusHandler;
@@ -79,9 +82,6 @@
 		onpointerleave?: PointerHandler;
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
-
-		// ARIA/アクセシビリティ
-		ariaLabel?: string;
 	};
 
 	let {
@@ -106,6 +106,9 @@
 		mobileFullscreen = true,
 		cancelParentClick = false,
 
+		// ARIA/アクセシビリティ
+		ariaLabel,
+
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
 		onblur = () => {}, // No params for type inference
@@ -138,9 +141,6 @@
 		onpointerleave = () => {}, // No params for type inference
 		onpointermove = () => {}, // No params for type inference
 		onpointercancel = () => {}, // No params for type inference
-
-		// ARIA/アクセシビリティ
-		ariaLabel
 	}: PopupMenuButtonProps = $props();
 
 	let anchorRef: HTMLElement | undefined = $state();

package/dist/components/PopupMenuButton.svelte.d.ts

@@ -21,6 +21,7 @@ export type PopupMenuButtonProps = {
     mobileFullscreen?: boolean;
     /** Stops click event propagation to parent elements. @default false */
     cancelParentClick?: boolean;
+    ariaLabel?: string;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -44,7 +45,6 @@ export type PopupMenuButtonProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    ariaLabel?: string;
 };
 declare const PopupMenuButton: import("svelte").Component<PopupMenuButtonProps, {}, "">;
 type PopupMenuButton = ReturnType<typeof PopupMenuButton>;

package/dist/components/Radio.svelte

@@ -11,6 +11,7 @@
 		BivariantValueHandler
 	} from '../types/callbackHandlers';
 	import type { OptionValue } from '../types/options';
+	import type { ComponentSize } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -33,17 +34,19 @@
 
 		// スタイル/レイアウト
 		/** Radio button size. @default 'medium' */
-		size?: 'small' | 'medium' | 'large';
+		size?: ComponentSize;
 		customStyle?: string;
+		/** Stretches the radio to fill its container width. @default false */
+		fullWidth?: boolean;
 
 		// 状態/動作
 		/** Disables this radio button. @default false */
 		disabled?: boolean;
-		/** Stretches the radio to fill its container width. @default false */
-		fullWidth?: boolean;
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
+		/** Accessible label, used when no visible label (children) is provided. */
+		ariaLabel?: string;
 		/** Disables animations for users who prefer reduced motion. @default false */
 		reducedMotion?: boolean;
 
@@ -102,13 +105,14 @@
 		// スタイル/レイアウト
 		size = 'medium',
 		customStyle = '',
+		fullWidth = false,
 
 		// 状態/動作
 		disabled = false,
-		fullWidth = false,
 		required = false,
 
 		// ARIA/アクセシビリティ
+		ariaLabel,
 		reducedMotion = false,
 
 		// フォーカスイベント
@@ -337,6 +341,7 @@
 		{value}
 		{disabled}
 		{required}
+		aria-label={ariaLabel}
 		aria-describedby={undefined}
 		onfocus={handleFocus}
 		onblur={handleBlur}

package/dist/components/Radio.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type Snippet } from 'svelte';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { OptionValue } from '../types/options';
+import type { ComponentSize } from '../types/propOptions';
 export type RadioProps = {
     /** Label content displayed next to the radio button. */
     children?: Snippet;
@@ -12,13 +13,15 @@ export type RadioProps = {
     currentValue: OptionValue;
     id?: string;
     /** Radio button size. @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    size?: ComponentSize;
     customStyle?: string;
-    /** Disables this radio button. @default false */
-    disabled?: boolean;
     /** Stretches the radio to fill its container width. @default false */
     fullWidth?: boolean;
+    /** Disables this radio button. @default false */
+    disabled?: boolean;
     required?: boolean;
+    /** Accessible label, used when no visible label (children) is provided. */
+    ariaLabel?: string;
     /** Disables animations for users who prefer reduced motion. @default false */
     reducedMotion?: boolean;
     onfocus?: FocusHandler;

package/dist/components/RadioGroup.svelte

@@ -5,6 +5,7 @@
 	import Radio from './Radio.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 	import type { BivariantValueHandler } from '../types/callbackHandlers';
+	import type { ComponentSize } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -24,7 +25,7 @@
 		wrap?: boolean;
 		minOptionWidth?: string | number;
 		/** @default 'medium' */
-		size?: 'small' | 'medium' | 'large';
+		size?: ComponentSize;
 
 		// 状態/動作
 		disabled?: boolean;
@@ -82,6 +83,7 @@
 	style:--internal-radio-group-gap={gapStyle}
 	style:--internal-radio-group-wrap={wrap ? 'wrap' : 'none'}
 	style:--internal-radio-group-min-option-width={minOptionWidthStyle}
+	data-testid="radio-group"
 >
 	{#each options as option (option.value)}
 		<li class="radio-group__option">
@@ -104,12 +106,9 @@
 <style>
 	.radio-group {
 		display: flex;
-		flex-direction: var(
-			--internal-radio-group-flex-direction,
-			var(--svelte-ui-radio-group-flex-direction)
-		);
+		flex-direction: var(--internal-radio-group-flex-direction);
 		gap: var(--internal-radio-group-gap, var(--svelte-ui-radio-group-gap));
-		flex-wrap: var(--internal-radio-group-wrap, var(--svelte-ui-radio-group-wrap));
+		flex-wrap: var(--internal-radio-group-wrap);
 	}
 
 	.radio-group__option {

package/dist/components/RadioGroup.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Option, OptionValue } from '../types/options';
 import type { BivariantValueHandler } from '../types/callbackHandlers';
+import type { ComponentSize } from '../types/propOptions';
 export type RadioGroupProps = {
     name?: string;
     /** `{ label, value, disabled? }[]` */
@@ -12,7 +13,7 @@ export type RadioGroupProps = {
     wrap?: boolean;
     minOptionWidth?: string | number;
     /** @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    size?: ComponentSize;
     disabled?: boolean;
     required?: boolean;
     /** Disables animations for accessibility. @default false */

package/dist/components/SegmentedControl.svelte

@@ -9,8 +9,10 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler
+		PointerHandler,
+		BivariantValueHandler
 	} from '../types/callbackHandlers';
+	import type { ComponentSize } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -28,7 +30,7 @@
 
 		// スタイル/レイアウト
 		/** @default 'medium' */
-		size?: 'small' | 'medium' | 'large';
+		size?: ComponentSize;
 		fullWidth?: boolean;
 		/** Custom CSS color value. Overrides the theme color. */
 		color?: string;
@@ -51,7 +53,7 @@
 		reducedMotion?: boolean;
 
 		// 入力イベント
-		onchange?: (value: string) => void;
+		onchange?: BivariantValueHandler<string>;
 
 		// フォーカスイベント
 		onfocus?: FocusHandler;

package/dist/components/SegmentedControl.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { SegmentedControlItem } from '../types/segmentedControlItem';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
+import type { ComponentSize } from '../types/propOptions';
 export type SegmentedControlProps = {
     /** `{ label, value, icon?, disabled? }[]` */
     items: SegmentedControlItem[];
@@ -9,7 +10,7 @@ export type SegmentedControlProps = {
     id?: string;
     name?: string;
     /** @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    size?: ComponentSize;
     fullWidth?: boolean;
     /** Custom CSS color value. Overrides the theme color. */
     color?: string;
@@ -24,7 +25,7 @@ export type SegmentedControlProps = {
     ariaLabelledby?: string;
     /** Disables animations for accessibility. @default false */
     reducedMotion?: boolean;
-    onchange?: (value: string) => void;
+    onchange?: BivariantValueHandler<string>;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;

package/dist/components/Select.svelte

@@ -400,7 +400,6 @@ select--focus-{focusStyle}"
 		width: 32px;
 		height: 32px;
 		transform: translateY(-50%);
-		font-size: var(--svelte-ui-select-dropdown-icon-size);
 		color: var(--svelte-ui-select-dropdown-icon-color);
 		pointer-events: none;
 	}

package/dist/components/Slider.svelte

@@ -8,7 +8,8 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler
+		PointerHandler,
+		BivariantValueHandler
 	} from '../types/callbackHandlers';
 
 	// =========================================================================
@@ -75,8 +76,8 @@
 		onpointercancel?: PointerHandler;
 
 		// 入力イベント
-		onchange?: (value: number) => void;
-		oninput?: (value: number) => void;
+		onchange?: BivariantValueHandler<number>;
+		oninput?: BivariantValueHandler<number>;
 
 		// その他
 		[key: string]: any;

package/dist/components/Slider.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 export type SliderProps = {
     /** Supports `bind:value`. */
     value: number;
@@ -42,8 +42,8 @@ export type SliderProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    onchange?: (value: number) => void;
-    oninput?: (value: number) => void;
+    onchange?: BivariantValueHandler<number>;
+    oninput?: BivariantValueHandler<number>;
     [key: string]: any;
 };
 declare const Slider: import("svelte").Component<SliderProps, {}, "value">;

package/dist/components/SnackbarItem.svelte

@@ -114,7 +114,7 @@
 			const requiredMargin = -containerHeight;
 
 			snackbarRef.style.setProperty(
-				'--svelte-ui-snackbar-item-collapse-margin',
+				'--internal-snackbar-item-collapse-margin',
 				`${requiredMargin}px`
 			);
 
@@ -237,7 +237,7 @@
 		}
 		100% {
 			opacity: 0;
-			margin-bottom: var(--svelte-ui-snackbar-item-collapse-margin);
+			margin-bottom: var(--internal-snackbar-item-collapse-margin);
 		}
 	}
 
@@ -248,7 +248,7 @@
 		}
 		100% {
 			opacity: 0;
-			margin-top: var(--svelte-ui-snackbar-item-collapse-margin);
+			margin-top: var(--internal-snackbar-item-collapse-margin);
 		}
 	}
 

package/dist/components/Switch.svelte

@@ -7,8 +7,10 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler
+		PointerHandler,
+		BivariantValueHandler
 	} from '../types/callbackHandlers';
+	import type { ComponentSize } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -25,16 +27,18 @@
 		id?: string;
 		// スタイル/レイアウト
 		/** @default 'medium' */
-		size?: 'small' | 'medium' | 'large';
+		size?: ComponentSize;
 		customStyle?: string;
+		/** Stretches the switch to fill its container width. @default false */
+		fullWidth?: boolean;
 
 		// 状態/動作
 		disabled?: boolean;
-		/** Stretches the switch to fill its container width. @default false */
-		fullWidth?: boolean;
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
+		/** Accessible label, used when no visible label (children) is provided. */
+		ariaLabel?: string;
 		/** Disables animations for accessibility. @default false */
 		reducedMotion?: boolean;
 
@@ -72,7 +76,7 @@
 		onpointercancel?: PointerHandler;
 
 		// 入力イベント
-		onchange?: (value: boolean) => void;
+		onchange?: BivariantValueHandler<boolean>;
 
 		// その他
 		[key: string]: any;
@@ -91,13 +95,14 @@
 		// スタイル/レイアウト
 		size = 'medium',
 		customStyle = '',
+		fullWidth = false,
 
 		// 状態/動作
 		disabled = false,
-		fullWidth = false,
 		required = false,
 
 		// ARIA/アクセシビリティ
+		ariaLabel,
 		reducedMotion = false,
 
 		// フォーカスイベント
@@ -296,6 +301,7 @@
 		{disabled}
 		{required}
 		{id}
+		aria-label={ariaLabel}
 		onchange={handleChange}
 		onfocus={handleFocus}
 		onblur={handleBlur}

package/dist/components/Switch.svelte.d.ts

@@ -1,17 +1,20 @@
 import type { Snippet } from 'svelte';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
+import type { ComponentSize } from '../types/propOptions';
 export type SwitchProps = {
     children?: Snippet;
     /** Supports `bind:value`. */
     value: boolean;
     id?: string;
     /** @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    size?: ComponentSize;
     customStyle?: string;
-    disabled?: boolean;
     /** Stretches the switch to fill its container width. @default false */
     fullWidth?: boolean;
+    disabled?: boolean;
     required?: boolean;
+    /** Accessible label, used when no visible label (children) is provided. */
+    ariaLabel?: string;
     /** Disables animations for accessibility. @default false */
     reducedMotion?: boolean;
     onfocus?: FocusHandler;
@@ -37,7 +40,7 @@ export type SwitchProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    onchange?: (value: boolean) => void;
+    onchange?: BivariantValueHandler<boolean>;
     [key: string]: any;
 };
 declare const Switch: import("svelte").Component<SwitchProps, {}, "value">;

package/dist/components/Tab.svelte

@@ -82,13 +82,7 @@
 	}: TabProps = $props();
 </script>
 
-<div
-	class="tab"
-	style:--svelte-ui-nav-item-underline-text-color={textColor}
-	style:--svelte-ui-nav-item-underline-selected-text-color={selectedTextColor}
-	style:--svelte-ui-nav-item-underline-bar-color={selectedBarColor}
-	data-testid="tab"
->
+<div class="tab" data-testid="tab">
 	<Nav
 		navItems={tabItems}
 		variant="horizontal"
@@ -102,6 +96,9 @@
 		{iconGrade}
 		{iconOpticalSize}
 		{iconVariant}
+		{textColor}
+		{selectedTextColor}
+		{selectedBarColor}
 		{customContainerStyle}
 		{customItemStyle}
 		{customChildrenContainerStyle}

package/dist/components/Textarea.svelte

@@ -4,7 +4,7 @@
 	import IconButton from './IconButton.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 	import { t } from '../i18n';
-	import { convertToHtml, convertToHtmlWithLink } from '../utils/formatText';
+	import { escapeHtml, convertToLink } from '../utils/formatText';
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import type {
@@ -12,7 +12,8 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler
+		PointerHandler,
+		BivariantValueHandler
 	} from '../types/callbackHandlers';
 	import type { FocusStyle } from '../types/propOptions';
 
@@ -71,6 +72,10 @@
 		/** Converts URLs in the value to clickable links (non-focused view). @default false */
 		linkify?: boolean;
 
+		// ARIA/アクセシビリティ
+		/** Accessible label for the textarea, used when no associated visible label exists. */
+		ariaLabel?: string;
+
 		// フォーカスイベント
 		onfocus?: FocusHandler;
 		onblur?: FocusHandler;
@@ -105,8 +110,8 @@
 		onpointercancel?: PointerHandler;
 
 		// 入力イベント
-		onchange?: (value: string) => void;
-		oninput?: (value: string) => void;
+		onchange?: BivariantValueHandler<string>;
+		oninput?: BivariantValueHandler<string>;
 
 		// その他
 		[key: string]: any;
@@ -156,6 +161,9 @@
 		required = false,
 		linkify = false,
 
+		// ARIA/アクセシビリティ
+		ariaLabel,
+
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
 		onblur = () => {}, // No params for type inference
@@ -475,21 +483,14 @@
 		value !== null && value !== undefined && !(typeof value === 'string' && value === '')
 	);
 
-	// HTML表示用の値（autoResize時の高さ調整用）
+	// HTML表示用の値（pre-wrap で表示するため HTML エスケープのみ行う）
 	const displayValue = $derived.by(() => {
 		const normalizedValue = value ?? '';
 		if (normalizedValue !== '') {
-			const converted = convertToHtml(normalizedValue);
-			const html = String(converted ?? '');
-			// 最後の行が空だったら空白を追加（高さ調整のため）
-			const lines = html.split('<br />');
-			if (lines.length > 0 && lines[lines.length - 1] === '') {
-				return html + '&nbsp;';
-			}
-			return html;
+			return escapeHtml(normalizedValue);
 		}
 		// 値が空のとき: placeholder があればその幅・高さを確保して表示、なければ inline 時のみ &nbsp;
-		return placeholder ? convertToHtml(placeholder) : inline ? '&nbsp;' : '';
+		return placeholder ? escapeHtml(placeholder) : inline ? '&nbsp;' : '';
 	});
 
 	// URLをリンク化した表示用HTML（クリック検出用オーバーレイで使用）
@@ -498,8 +499,7 @@
 		if (!linkify || normalizedValue === '') {
 			return '';
 		}
-		const result = convertToHtmlWithLink(normalizedValue);
-		return String(result ?? '');
+		return convertToLink(escapeHtml(normalizedValue));
 	});
 
 	// --------------------------------
@@ -555,6 +555,7 @@
 			{readonly}
 			{required}
 			{maxlength}
+			aria-label={ariaLabel}
 			{tabindex}
 			{autocomplete}
 			{wrap}
@@ -631,6 +632,7 @@
 		position: relative;
 		width: auto;
 		max-width: 100%;
+		overflow: hidden;
 
 		&.textarea--full-height {
 			height: 100%;
@@ -699,6 +701,7 @@
 		transition: none;
 		overflow-y: auto;
 		overflow-x: hidden;
+		max-height: 100%;
 
 		&::before {
 			content: '';
@@ -709,13 +712,15 @@
 		}
 	}
 
-	/* display-text: スクロールバーの幅を確保しつつ透明にする（textarea と幅を一致させる） */
+	/* display-text: textarea の white-space: pre-wrap に合わせて空白・改行を同じルールで扱う */
 	.textarea__display-text {
+		white-space: pre-wrap;
 		scrollbar-color: transparent transparent;
 	}
 
-	/* link-text: 絶対配置のオーバーレイなのでスクロールバーを完全に非表示 */
+	/* link-text: 絶対配置オーバーレイ。pre-wrap で textarea と空白・改行を同じルールで扱う */
 	.textarea__link-text {
+		white-space: pre-wrap;
 		scrollbar-width: none;
 
 		&::-webkit-scrollbar {

package/dist/components/Textarea.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { FocusStyle } from '../types/propOptions';
 export type TextareaProps = {
     name?: string;
@@ -45,6 +45,8 @@ export type TextareaProps = {
     required?: boolean;
     /** Converts URLs in the value to clickable links (non-focused view). @default false */
     linkify?: boolean;
+    /** Accessible label for the textarea, used when no associated visible label exists. */
+    ariaLabel?: string;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -68,8 +70,8 @@ export type TextareaProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    onchange?: (value: string) => void;
-    oninput?: (value: string) => void;
+    onchange?: BivariantValueHandler<string>;
+    oninput?: BivariantValueHandler<string>;
     [key: string]: any;
 };
 declare const Textarea: import("svelte").Component<TextareaProps, {