wx-svelte-core 2.0.0-beta-2 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-core",
-	"version": "2.0.0-beta-2",
+	"version": "2.0.0",
 	"description": "SVAR Svelte Core library, a collection of form controls and UI components",
 	"productTag": "core",
 	"productTrial": false,
@@ -23,9 +23,18 @@
 		"./package.json": "./package.json"
 	},
 	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/svar-widgets/core.git"
+	},
+	"bugs": {
+		"url": "https://forum.svar.dev"
+	},
+	"homepage": "https://svar.dev/svelte/core/",
 	"dependencies": {
-		"wx-core-locales": "2.0.0-beta-2",
-		"wx-lib-dom": "0.6.0"
+		"wx-core-locales": "2.0.0",
+		"wx-lib-dom": "0.7.0",
+		"wx-lib-svelte": "0.5.0"
 	},
 	"files": [
 		"src",

package/src/components/Checkbox.svelte

@@ -4,7 +4,7 @@
 	let {
 		id = uid(),
 		label = "",
-		name = "",
+		inputValue = "",
 		value = $bindable(false),
 		style = "",
 		disabled = false,
@@ -13,7 +13,7 @@
 
 	function handlerChange({ target }) {
 		value = target.checked;
-		onchange && onchange({ value, name });
+		onchange && onchange({ value, inputValue });
 	}
 </script>
 
@@ -23,7 +23,7 @@
 		{id}
 		{disabled}
 		checked={value}
-		value={name}
+		value={inputValue}
 		onchange={handlerChange}
 	/>
 	<label for={id}>

package/src/components/CheckboxGroup.svelte

@@ -1,11 +1,12 @@
 <script>
 	import Checkbox from "./Checkbox.svelte";
 
-	let { options = [], value = $bindable([]), type = "" } = $props();
+	let { options = [], value = $bindable([]), type = "", onchange } = $props();
 
 	function handleChange(obj) {
-		if (obj.value) value = [...value, obj.name];
-		else value = value.filter(a => a != obj.name);
+		if (obj.value) value = [...value, obj.inputValue];
+		else value = value.filter(a => a != obj.inputValue);
+		onchange && onchange({ value });
 	}
 </script>
 
@@ -14,8 +15,8 @@
 		<div class="wx-item">
 			<Checkbox
 				label={option.label}
-				name={option.value}
-				value={value.includes(option.value)}
+				inputValue={option.id}
+				value={value.includes(option.id)}
 				onchange={handleChange}
 			/>
 		</div>
@@ -41,7 +42,7 @@
 		padding-right: var(--wx-field-gutter);
 	}
 
-	.wx-checkboxgroup.grid .wx-item {
+	.wx-checkboxgroup.wx-grid .wx-item {
 		flex: 0 0 50%;
 		max-width: 50%;
 		padding-right: var(--wx-field-gutter);

package/src/components/ColorBoard.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount } from "svelte";
+	import { onMount, getContext } from "svelte";
 	import Button from "./Button.svelte";
 
 	//helpers
@@ -11,6 +11,8 @@
 
 	let block;
 
+	const _ = getContext("wx-i18n").getGroup("core");
+
 	const BLOCK = "Block";
 	const LINE = "Line";
 
@@ -54,6 +56,7 @@
 		}
 
 		value = colorTransformator.hvsToHex(hueColor, _sValue, _vValue);
+		onchange && onchange({ value, input: true });
 	}
 
 	function moveLineSlider(dx) {
@@ -92,6 +95,7 @@
 		const newColor = parseColor(target.value);
 
 		value = newColor;
+		onchange && onchange({ value, input: true });
 		if (newColor) {
 			setSlidersPosition();
 		}
@@ -185,7 +189,7 @@
 		<input type="text" class="wx-text" bind:value onchange={handleChange} />
 	</div>
 	{#if button}
-		<Button onclick={handleSelect} type="secondary">Select</Button>
+		<Button onclick={handleSelect} type="secondary">{_("select")}</Button>
 	{/if}
 </div>
 

package/src/components/ColorPicker.svelte

@@ -10,6 +10,7 @@
 		title = "",
 		disabled = false,
 		error = false,
+		clear = false,
 		onchange,
 	} = $props();
 
@@ -20,8 +21,17 @@
 		popup = true;
 	}
 
-	function selectColor({ value }) {
+	function selectColor(ev) {
+		if (ev.input) return;
+
 		popup = false;
+		value = ev.value;
+		onchange && onchange({ value });
+	}
+
+	function unselectColor(ev) {
+		ev.stopPropagation();
+		value = "";
 		onchange && onchange({ value });
 	}
 </script>
@@ -41,8 +51,12 @@
 	/>
 	<div class="wx-color" style="background: {value}"></div>
 
+	{#if clear && !disabled && value}
+		<i class="wxi-close" onclick={unselectColor}></i>
+	{/if}
+
 	{#if popup}
-		<Dropdown cancel={() => (popup = false)}>
+		<Dropdown oncancel={() => (popup = false)}>
 			<ColorBoard {value} button="true" onchange={selectColor} />
 		</Dropdown>
 	{/if}
@@ -111,4 +125,28 @@
 		border-color: var(--wx-color-danger);
 		color: var(--wx-color-danger);
 	}
+
+	.wxi-close {
+		position: absolute;
+		right: var(--wx-input-icon-indent);
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: var(--wx-input-icon-size);
+		line-height: 1;
+		width: var(--wx-input-icon-size);
+		height: var(--wx-input-icon-size);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		user-select: none;
+		color: var(--wx-input-icon-color);
+		cursor: pointer;
+	}
+	.wxi-close:before {
+		display: block;
+	}
+	.wxi-close:hover {
+		background: var(--wx-background-hover);
+		border-radius: var(--wx-icon-border-radius);
+	}
 </style>

package/src/components/ColorSelect.svelte

@@ -16,24 +16,26 @@
 		colors = defaultColors,
 		value = $bindable(""),
 		id = uid(),
-		clear = true,
+		clear = false,
 		placeholder = "",
 		title = "",
 		disabled = false,
 		error = false,
+		onchange,
 	} = $props();
 
 	let popup = $state(false);
 
 	function selectColor(ev, color) {
 		ev.stopPropagation();
-
 		value = color;
 		popup = false;
+		onchange && onchange({ value });
 	}
-	function handleClear(ev) {
+	function unselectColor(ev) {
 		ev.stopPropagation();
-		value = null;
+		value = "";
+		onchange && onchange({ value });
 	}
 	function handlePopup() {
 		if (disabled) return false;
@@ -58,7 +60,7 @@
 	{#if clear && value && !disabled}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<i class="wx-clear wxi-close" onclick={handleClear}></i>
+		<i class="wx-clear wxi-close" onclick={unselectColor}></i>
 	{/if}
 
 	{#if value}
@@ -71,7 +73,7 @@
 	{/if}
 
 	{#if popup}
-		<Dropdown cancel={() => (popup = false)}>
+		<Dropdown oncancel={() => (popup = false)}>
 			<div class="wx-colors">
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -182,7 +184,7 @@
 		user-select: none;
 	}
 
-	.wx-clear {
+	.wxi-close {
 		position: absolute;
 		right: var(--wx-input-icon-indent);
 		top: 50%;
@@ -198,7 +200,8 @@
 		color: var(--wx-input-icon-color);
 		cursor: pointer;
 	}
-	.wx-clear:hover {
+	.wxi-close:hover {
 		background: var(--wx-background-hover);
+		border-radius: var(--wx-icon-border-radius);
 	}
 </style>

package/src/components/Combo.svelte

@@ -11,7 +11,7 @@
 		title = "",
 		disabled = false,
 		error = false,
-		clearButton = false,
+		clear = false,
 		children: kids,
 		onchange,
 	} = $props();
@@ -50,7 +50,7 @@
 
 	function selectByText(chunk) {
 		if (!options.length) return;
-		if (chunk === "" && clearButton) {
+		if (chunk === "" && clear) {
 			doUnselect();
 			return;
 		}
@@ -75,7 +75,7 @@
 
 			if (value !== selected.id) {
 				value = selected.id;
-				onchange && onchange({ value: selected });
+				onchange && onchange({ value });
 			}
 		}
 
@@ -87,7 +87,7 @@
 
 		value = "";
 		filterActive = false;
-		onchange && onchange({ value: null });
+		onchange && onchange({ value });
 	}
 
 	function oninput() {
@@ -124,7 +124,7 @@
 		{oninput}
 	/>
 
-	{#if clearButton && !disabled && value}
+	{#if clear && !disabled && value}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<i class="wx-icon wxi-close" onclick={doUnselect}></i>
@@ -133,7 +133,9 @@
 	{#if !disabled}
 		<List items={filteredOptions} onready={ready} onselect={selectByEvent}>
 			{#snippet children({ option })}
-				{#if kids}{@render kids({ option })}{:else}{option.name}{/if}
+				{#if kids}{@render kids({ option })}{:else}{option[
+						textField
+					]}{/if}
 			{/snippet}
 		</List>
 	{/if}
@@ -215,9 +217,11 @@
 
 	.wx-icon.wxi-close {
 		pointer-events: all;
+		cursor: pointer;
 	}
 
 	.wx-icon.wxi-close:hover {
-		color: var(--wx-color-danger);
+		background: var(--wx-background-hover);
+		border-radius: var(--wx-icon-border-radius);
 	}
 </style>

package/src/components/DatePicker.svelte

@@ -19,6 +19,7 @@
 		css = "",
 		title = "",
 		editable = false,
+		clear = false,
 		onchange: change,
 	} = $props();
 
@@ -30,7 +31,7 @@
 
 	let popup = $state();
 
-	function cancel() {
+	function oncancel() {
 		popup = false;
 	}
 
@@ -44,17 +45,17 @@
 
 		value = v;
 		if (!skipEvent) {
-			change && change({ selected: v });
+			change && change({ value });
 		}
 
 		// fire after on-click finished
-		setTimeout(cancel, 1);
+		setTimeout(oncancel, 1);
 	}
 
 	const formattedValue = $derived(value ? dateFormat(value) : "");
 
 	function onchange({ value: v, input }) {
-		if (!editable) return;
+		if (!editable && !clear) return;
 		if (input) return;
 
 		// convert to date, but ignore empty string input
@@ -73,7 +74,7 @@
 	}
 </script>
 
-<svelte:window onscroll={cancel} />
+<svelte:window onscroll={oncancel} />
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -87,14 +88,15 @@
 		{disabled}
 		{error}
 		{placeholder}
-		oninput={cancel}
+		oninput={oncancel}
 		{onchange}
 		icon="wxi-calendar"
 		inputStyle="cursor: pointer; width: 100%; padding-right: calc(var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2);"
+		{clear}
 	/>
 
 	{#if popup && !disabled}
-		<Dropdown {cancel} {width} {align} autoFit={!!align}>
+		<Dropdown {oncancel} {width} {align} autoFit={!!align}>
 			<Calendar {buttons} {value} onchange={e => doChange(e.value)} />
 		</Dropdown>
 	{/if}

package/src/components/DateRangePicker.svelte

@@ -21,6 +21,7 @@
 		months = 2,
 		buttons = true,
 		editable = false,
+		clear = false,
 		onchange,
 	} = $props();
 
@@ -31,7 +32,7 @@
 		typeof f === "function" ? f : dateToString(f, calendarLocale);
 	let popup = $state();
 
-	function cancel() {
+	function oncancel() {
 		popup = false;
 	}
 
@@ -50,13 +51,13 @@
 		// fire after on-click finished
 		if ((d.start && d.end) || (!d.start && !d.end)) {
 			// FIXME - select event will trigger even if the same value
-			onchange && onchange({ selected: value });
-			setTimeout(cancel, 1);
+			onchange && onchange({ value });
+			setTimeout(oncancel, 1);
 		}
 	}
 
 	function doInputChange(ev) {
-		if (!editable) return;
+		if (!editable && !clear) return;
 
 		const { value: v, input } = ev;
 		if (input) return;
@@ -84,7 +85,7 @@
 	const end = $derived(value ? value.end || null : null);
 </script>
 
-<svelte:window onscroll={cancel} />
+<svelte:window onscroll={oncancel} />
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -106,13 +107,14 @@
 		onchange={doInputChange}
 		icon="wxi-calendar"
 		inputStyle="cursor: pointer; width: 100%; padding-right: calc(var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2);"
+		{clear}
 	/>
 
 	{#if popup && !disabled}
-		<Dropdown {cancel} {width} {align} autoFit={!!align}>
+		<Dropdown {oncancel} {width} {align} autoFit={!!align}>
 			<RangeCalendar
 				{done}
-				{cancel}
+				{oncancel}
 				{buttons}
 				{start}
 				{end}

package/src/components/Dropdown.svelte

@@ -5,7 +5,7 @@
 		position = "bottom",
 		align = "start",
 		autoFit = true,
-		cancel = null,
+		oncancel = null,
 		width = "100%",
 		children,
 	} = $props();
@@ -28,7 +28,7 @@
 	});
 
 	function down(e) {
-		if (cancel) cancel(e);
+		oncancel && oncancel(e);
 	}
 </script>
 

package/src/components/Globals.svelte

@@ -46,8 +46,8 @@
 	<Modal
 		title={modal.title}
 		buttons={modal.buttons}
-		ok={modal.resolve}
-		cancel={modal.reject}
+		onconfirm={modal.resolve}
+		oncancel={modal.reject}
 	>
 		{modal.message}
 	</Modal>

package/src/components/Modal.svelte

@@ -7,28 +7,37 @@
 
 	const {
 		title = "",
-		ok,
-		cancel,
 		buttons = ["cancel", "ok"],
 		header,
 		children,
 		footer,
+		onconfirm,
+		oncancel,
 	} = $props();
 
-	function keydown(e) {
-		switch (e.code) {
+	function keydown(ev) {
+		switch (ev.code) {
 			case "Enter": {
-				const from = e.target.tagName;
+				const from = ev.target.tagName;
 				if (from === "TEXTAREA" || from === "BUTTON") return;
-				ok();
+				onconfirm && onconfirm({ ev });
 				break;
 			}
 			case "Escape":
-				cancel();
+				oncancel && oncancel({ ev });
 				break;
 		}
 	}
 
+	function onclick(ev, button) {
+		const pack = { ev, button };
+		if (button === "cancel") {
+			oncancel && oncancel(pack);
+		} else {
+			onconfirm && onconfirm(pack);
+		}
+	}
+
 	let modal;
 	onMount(() => {
 		modal.focus();
@@ -63,7 +72,7 @@
 							type="block {button === 'ok'
 								? 'primary'
 								: 'secondary'}"
-							onclick={() => (button === "ok" ? ok() : cancel())}
+							onclick={ev => onclick(ev, button)}
 						>
 							{_(button)}
 						</Button>

package/src/components/MultiCombo.svelte

@@ -14,7 +14,6 @@
 		error = false,
 		checkboxes = false,
 		onchange: change,
-		onselect: select,
 		children,
 	} = $props();
 
@@ -58,7 +57,6 @@
 			}
 
 			value = next;
-			select && select({ selected });
 			change && change({ value });
 		}
 	}
@@ -97,7 +95,9 @@
 					{#if !disabled}
 						<!-- svelte-ignore a11y_click_events_have_key_events -->
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<i class="wxi-close" onclick={ev => remove(tag.id, ev)}
+						<i
+							class="wx-icon wxi-close"
+							onclick={ev => remove(tag.id, ev)}
 						></i>
 					{/if}
 				</div>
@@ -128,7 +128,7 @@
 				{/if}
 				{#if children}{@render children({
 						option,
-					})}{:else}{option.name}{/if}
+					})}{:else}{option[textField]}{/if}
 			{/snippet}
 		</List>
 	{/if}
@@ -159,7 +159,7 @@
 		cursor: not-allowed;
 		color: var(--wx-color-font-disabled);
 	}
-	.wx-multicombo.wx-disabled .wx-icon {
+	.wx-multicombo.wx-disabled .wx-icon.wxi-angle-down {
 		color: var(--wx-color-font-disabled);
 	}
 	.wx-multicombo.wx-error .wx-wrapper {
@@ -168,7 +168,7 @@
 	.wx-multicombo.wx-error input {
 		color: var(--wx-color-danger);
 	}
-	.wx-multicombo.wx-error .wx-icon {
+	.wx-multicombo.wx-error .wx-icon.wxi-angle-down {
 		color: var(--wx-color-danger);
 	}
 	.wx-multicombo.wx-not-empty .wx-tags {
@@ -214,8 +214,7 @@
 		background: var(--wx-multicombo-tag-background);
 		padding: var(--wx-multicombo-tag-pading);
 	}
-
-	.wxi-close {
+	.wx-icon {
 		position: absolute;
 		right: var(--wx-input-icon-indent);
 		top: 50%;
@@ -227,12 +226,21 @@
 		align-items: center;
 		width: var(--wx-input-icon-size);
 		height: var(--wx-input-icon-size);
-		border-radius: var(--wx-input-border-radius);
+		pointer-events: none;
+		user-select: none;
 		color: var(--wx-input-icon-color);
+	}
+	.wx-icon:before {
+		display: block;
+	}
+
+	.wxi-close {
+		pointer-events: all;
 		cursor: pointer;
 	}
 	.wxi-close:hover {
-		color: var(--wx-color-primary);
+		background: var(--wx-background-hover);
+		border-radius: var(--wx-icon-border-radius);
 	}
 
 	.wx-select {
@@ -261,24 +269,4 @@
 		text-overflow: ellipsis;
 		cursor: pointer;
 	}
-
-	.wx-icon {
-		position: absolute;
-		right: var(--wx-input-icon-indent);
-		top: 50%;
-		transform: translateY(-50%);
-		font-size: var(--wx-input-icon-size);
-		line-height: 1;
-		width: var(--wx-input-icon-size);
-		height: var(--wx-input-icon-size);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		pointer-events: none;
-		user-select: none;
-		color: var(--wx-input-icon-color);
-	}
-	.wx-icon:before {
-		display: block;
-	}
 </style>

package/src/components/Notice.svelte

@@ -17,7 +17,7 @@
 	<div class="wx-button">
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<i class="wx-close wxi-close" onclick={onRemove}></i>
+		<i class="wxi-close" onclick={onRemove}></i>
 	</div>
 </div>
 
@@ -82,7 +82,7 @@
 		);
 	}
 
-	.wx-close {
+	.wxi-close {
 		position: relative;
 		display: flex;
 		justify-content: center;
@@ -94,11 +94,11 @@
 		color: var(--wx-notice-type-icon-color);
 		cursor: pointer;
 	}
-	.wx-close:before {
+	.wxi-close:before {
 		display: block;
 		z-index: 1;
 	}
-	.wx-close:after {
+	.wxi-close:after {
 		content: "";
 		display: block;
 		position: absolute;
@@ -107,9 +107,9 @@
 		transform: translate(-50%, -50%);
 		width: calc(100% + 4px);
 		height: calc(100% + 4px);
-		border-radius: 50%;
+		border-radius: var(--wx-icon-border-radius);
 	}
-	.wx-close:hover:after {
+	.wxi-close:hover:after {
 		background: var(--wx-background-hover);
 	}
 
@@ -137,10 +137,10 @@
 		background: var(--wx-color-danger);
 	}
 
-	.wx-notice.wx-info .wx-close:after,
-	.wx-notice.wx-warning .wx-close:after,
-	.wx-notice.wx-success .wx-close:after,
-	.wx-notice.wx-danger .wx-close:after {
+	.wx-notice.wx-info .wxi-close:after,
+	.wx-notice.wx-warning .wxi-close:after,
+	.wx-notice.wx-success .wxi-close:after,
+	.wx-notice.wx-danger .wxi-close:after {
 		opacity: var(--wx-notice-type-close-hover-opacity);
 	}
 </style>

package/src/components/Popup.svelte

@@ -7,7 +7,7 @@
 		top = 0,
 		at = "bottom",
 		parent = null,
-		cancel,
+		oncancel,
 		mount,
 		children,
 	} = $props();
@@ -33,7 +33,7 @@
 	});
 
 	function down(e) {
-		if (cancel) cancel(e);
+		oncancel && oncancel(e);
 	}
 </script>
 

package/src/components/RadioButton.svelte

@@ -4,15 +4,16 @@
 	let {
 		id = uid(),
 		label = "",
-		value = "",
-		groupValue = $bindable(""),
+		value = $bindable(""),
 		name = "",
+		inputValue = "",
 		disabled = false,
-		checked = false,
+		onchange,
 	} = $props();
 
 	function handlerChange(ev) {
-		if (ev.target.checked) groupValue = value;
+		value = ev.target.checked;
+		if (value) onchange && onchange({ value: true, inputValue });
 	}
 </script>
 
@@ -20,10 +21,10 @@
 	<input
 		type="radio"
 		{id}
-		{value}
 		{disabled}
 		{name}
-		{checked}
+		value={inputValue}
+		checked={value}
 		onchange={handlerChange}
 	/>
 	<label for={id}>

package/src/components/RadioButtonGroup.svelte

@@ -2,9 +2,19 @@
 	import { uid } from "wx-lib-dom";
 	import RadioButton from "./RadioButton.svelte";
 
-	let { options = [{}], value = $bindable(""), type = "" } = $props();
+	let {
+		options = [{}],
+		value = $bindable(""),
+		type = "",
+		onchange,
+	} = $props();
 
 	const name = uid();
+
+	function handleChange(ev) {
+		value = ev.inputValue;
+		onchange && onchange({ value });
+	}
 </script>
 
 <div class="wx-radiogroup {type && `wx-${type}`}">
@@ -12,10 +22,10 @@
 		<div class="wx-item">
 			<RadioButton
 				label={option.label}
-				value={option.value}
-				checked={value === option.value}
-				bind:groupValue={value}
+				inputValue={option.id}
+				value={value === option.id}
 				{name}
+				onchange={handleChange}
 			/>
 		</div>
 	{/each}

package/src/components/RichSelect.svelte

@@ -4,10 +4,12 @@
 	let {
 		value = $bindable(""),
 		options = [],
-		placeholder = "Click to select",
+		placeholder = "",
 		disabled = false,
 		error = false,
 		title = "",
+		textField = "label",
+		clear = false,
 		children: kids,
 		onchange,
 	} = $props();
@@ -26,13 +28,18 @@
 	function select({ id }) {
 		if (id || id === 0) {
 			value = id;
-			const obj = options.find(a => a.id === id);
 
 			navigate(null);
-			onchange && onchange({ value: obj });
+			onchange && onchange({ value });
 		}
 	}
 
+	function unselect(ev) {
+		ev.stopPropagation();
+		value = "";
+		onchange && onchange({ value });
+	}
+
 	const index = () => options.findIndex(a => a.id === value);
 </script>
 
@@ -50,18 +57,22 @@
 >
 	<div class="wx-label">
 		{#if selected}
-			{#if kids}{@render kids(selected)}{:else}{selected.name}{/if}
+			{#if kids}{@render kids(selected)}{:else}{selected[textField]}{/if}
 		{:else if placeholder}
 			<span class="wx-placeholder">{placeholder}</span>
 		{:else}&nbsp;{/if}
 	</div>
 
-	<i class="wx-icon wxi-angle-down"></i>
+	{#if clear && !disabled && value}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<i class="wx-icon wxi-close" onclick={unselect}></i>
+	{:else}<i class="wx-icon wxi-angle-down"></i>{/if}
 
 	{#if !disabled}
 		<List items={options} onready={ready} onselect={select}>
 			{#snippet children({ option })}
-				{#if kids}{@render kids(option)}{:else}{option.name}{/if}
+				{#if kids}{@render kids(option)}{:else}{option[textField]}{/if}
 			{/snippet}
 		</List>
 	{/if}
@@ -141,6 +152,13 @@
 	.wx-icon:before {
 		display: block;
 	}
+	.wx-icon.wxi-close {
+		pointer-events: all;
+	}
+	.wx-icon.wxi-close:hover {
+		background: var(--wx-background-hover);
+		border-radius: var(--wx-icon-border-radius);
+	}
 
 	.wx-nowrap .wx-label {
 		white-space: nowrap;

package/src/components/Segmented.svelte

@@ -9,7 +9,7 @@
 
 	function handleClick(id) {
 		value = id;
-		onchange && onchange({ id });
+		onchange && onchange({ value });
 	}
 </script>
 
@@ -17,19 +17,19 @@
 	{#each options as option (option.id)}
 		<button
 			css={option.css}
-			title={option.title || option.name}
+			title={option.title || option.label}
 			class:wx-selected={option.id == value}
 			onclick={() => handleClick(option.id)}
 		>
 			{#if children}{@render children({ option })}{:else}
 				{#if option.icon}
 					<i
-						class="wx-icon {option.icon} {!option.name
+						class="wx-icon {option.icon} {!option.label
 							? 'wx-only'
 							: ''}"
 					></i>
 				{/if}
-				{#if option.name}<span class="wx-label">{option.name}</span
+				{#if option.label}<span class="wx-label">{option.label}</span
 					>{/if}
 			{/if}
 		</button>

package/src/components/Select.svelte

@@ -2,27 +2,50 @@
 	import { uid } from "wx-lib-dom";
 
 	let {
-		label = "label",
 		value = $bindable(""),
 		options = [],
 		placeholder = "",
 		title = "",
 		disabled = false,
 		error = false,
+		textField = "label",
+		clear = false,
 		id = uid(),
+		onchange,
 	} = $props();
+
+	function unselect() {
+		value = "";
+		onchange && onchange({ value });
+	}
+
+	function handleChange() {
+		onchange && onchange({ value });
+	}
 </script>
 
 <div class="wx-select">
-	<select {id} bind:value {disabled} class:wx-error={error} {title}>
+	<select
+		{id}
+		bind:value
+		{disabled}
+		class:wx-error={error}
+		{title}
+		onchange={handleChange}
+	>
 		{#each options as option (option.id)}
-			<option value={option.id}>{option[label]}</option>
+			<option value={option.id}>{option[textField]}</option>
 		{/each}
 	</select>
 	{#if !value && value !== 0}
 		<div class="wx-placeholder">{placeholder}</div>
 	{/if}
-	<i class="wx-icon wxi-angle-down"></i>
+
+	{#if clear && !disabled && value}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<i class="wx-icon wxi-close" onclick={unselect}></i>
+	{:else}<i class="wx-icon wxi-angle-down"></i>{/if}
 </div>
 
 <style>
@@ -123,4 +146,12 @@
 	.wx-icon:before {
 		display: block;
 	}
+	.wx-icon.wxi-close {
+		pointer-events: all;
+		cursor: pointer;
+	}
+	.wx-icon.wxi-close:hover {
+		background: var(--wx-background-hover);
+		border-radius: var(--wx-icon-border-radius);
+	}
 </style>

package/src/components/SideArea.svelte

@@ -2,12 +2,12 @@
 	import { clickOutside } from "wx-lib-dom";
 	import { fly } from "svelte/transition";
 
-	let { position = "right", children, onclose } = $props();
+	let { position = "right", children, oncancel } = $props();
 </script>
 
 <div
 	class="wx-sidearea wx-pos-{position}"
-	use:clickOutside={() => onclose && onclose()}
+	use:clickOutside={() => oncancel && oncancel()}
 	transition:fly={{ x: 650, opacity: 1 }}
 >
 	{@render children?.()}

package/src/components/Slider.svelte

@@ -31,9 +31,8 @@
 		}
 	}
 	function onchange({ target }) {
-		const v = target.value * 1;
-		change && change({ value: v });
-		value = v;
+		value = target.value * 1;
+		change && change({ value });
 	}
 </script>
 
@@ -50,7 +49,7 @@
 			{value}
 			{oninput}
 			{onchange}
-			style={bgStyle}
+			style={bgStyle()}
 		/>
 	</div>
 </div>

package/src/components/Switch.svelte

@@ -15,7 +15,13 @@
 </script>
 
 <label class="wx-switch">
-	<input type="checkbox" onchange={onChange} {disabled} {id} />
+	<input
+		type="checkbox"
+		checked={value}
+		onchange={onChange}
+		{disabled}
+		{id}
+	/>
 	<span></span>
 </label>
 

package/src/components/Text.svelte

@@ -14,13 +14,18 @@
 		error = false,
 		inputStyle = "",
 		title = "",
-		css = $bindable(""),
+		css = "",
 		icon,
+		clear = false,
 		onchange: change,
 	} = $props();
 
-	if (icon && css.indexOf("wx-icon-left") === -1)
-		css = "wx-icon-right " + css;
+	let cssString = $derived(
+		icon && css.indexOf("wx-icon-left") === -1
+			? "wx-icon-right " + css
+			: css
+	);
+	let hasLeftIcon = $derived(icon && css.indexOf("wx-icon-left") !== -1);
 
 	// svelte-ignore non_reactive_update
 	let input;
@@ -34,9 +39,20 @@
 
 	const oninput = () => change && change({ value, input: true });
 	const onchange = () => change && change({ value });
+
+	function clearValue(ev) {
+		ev.stopPropagation();
+		value = "";
+		change && change({ value });
+	}
 </script>
 
-<div class="wx-text {css}" class:wx-error={error} class:wx-disabled={disabled}>
+<div
+	class="wx-text {cssString}"
+	class:wx-error={error}
+	class:wx-disabled={disabled}
+	class:wx-clear={clear}
+>
 	{#if type == "password"}
 		<input
 			bind:value
@@ -80,7 +96,12 @@
 		/>
 	{/if}
 
-	{#if icon}<i class="wx-icon {icon}"></i>{/if}
+	{#if clear && !disabled && value}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<i class="wx-icon wxi-close" onclick={clearValue}></i>
+		{#if hasLeftIcon}<i class="wx-icon {icon}"></i>{/if}
+	{:else if icon}<i class="wx-icon {icon}"></i>{/if}
 </div>
 
 <style>
@@ -114,11 +135,20 @@
 		display: block;
 	}
 
-	.wx-icon-left .wx-icon {
+	.wx-icon-left .wx-icon:not(.wxi-close) {
 		right: auto;
 		left: var(--wx-input-icon-indent);
 	}
 
+	.wx-icon.wxi-close {
+		pointer-events: all;
+		cursor: pointer;
+	}
+	.wx-icon.wxi-close:hover {
+		background: var(--wx-background-hover);
+		border-radius: var(--wx-icon-border-radius);
+	}
+
 	input {
 		display: block;
 		width: var(--wx-input-width);
@@ -150,7 +180,8 @@
 			var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2
 		);
 	}
-	.wx-icon-right input {
+	.wx-icon-right input,
+	.wx-text.wx-clear input {
 		padding-right: calc(
 			var(--wx-input-icon-size) + var(--wx-input-icon-indent) * 2
 		);

package/src/components/{Timepicker.svelte → TimePicker.svelte}

@@ -18,6 +18,7 @@
 		disabled = false,
 		error = false,
 		format = "",
+		onchange,
 	} = $props();
 
 	const { calendar: calendarLocale, formats } =
@@ -51,6 +52,7 @@
 		const next = new Date(safeValue);
 		next.setHours(next.getHours() + (pm ? -12 : 12));
 		value = next;
+		onchange && onchange({ value });
 	}
 	function setHours({ value: v }) {
 		if (safeValue.getHours() === v) return;
@@ -58,6 +60,7 @@
 		const next = new Date(safeValue);
 		next.setHours(v);
 		value = next;
+		onchange && onchange({ value });
 	}
 	function setMinutes({ value: v }) {
 		if (safeValue.getMinutes() === v) return;
@@ -65,6 +68,7 @@
 		const next = new Date(safeValue);
 		next.setMinutes(v);
 		value = next;
+		onchange && onchange({ value });
 	}
 	function formatH(v) {
 		if (h12) {
@@ -95,7 +99,7 @@
 		return (v < 10 && zeroBased ? `0${v}` : `${v}`).slice(-2);
 	}
 
-	function cancel() {
+	function oncancel() {
 		popup = null;
 	}
 
@@ -129,7 +133,7 @@
 	/>
 
 	{#if popup && !disabled}
-		<Dropdown {cancel} width={"unset"}>
+		<Dropdown {oncancel} width={"unset"}>
 			<div class="wx-wrapper">
 				<div class="wx-timer">
 					<input

package/src/components/TwoState.svelte

@@ -14,6 +14,7 @@
 		textActive = "",
 		children,
 		active,
+		onchange,
 	} = $props();
 
 	let typeStr = $derived((value ? "pressed" : "") + (type ? " " + type : ""));
@@ -21,7 +22,10 @@
 	function handleClick(ev) {
 		let next = !value;
 		if (onclick) onclick(ev);
-		if (!ev.defaultPrevented) value = next;
+		if (!ev.defaultPrevented) {
+			value = next;
+			onchange && onchange({ value });
+		}
 	}
 </script>
 

package/src/components/calendar/Duodecade.svelte

@@ -35,7 +35,7 @@
 
 		if (part === "normal") value = new Date(current);
 
-		oncancel();
+		oncancel && oncancel();
 	}
 </script>
 

package/src/components/helpers/SuggestDropdown.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount } from "svelte";
+	import { onMount, getContext } from "svelte";
 	import { getListHandlers } from "./listnav";
 	import Dropdown from "../Dropdown.svelte";
 
@@ -8,6 +8,8 @@
 	let list = $state();
 	let navIndex = $state(null);
 
+	const _ = getContext("wx-i18n").getGroup("core");
+
 	const { move, keydown, init, navigate } = getListHandlers();
 
 	const selectItem = ev => {
@@ -24,7 +26,7 @@
 </script>
 
 {#if navIndex !== null}
-	<Dropdown cancel={() => navigate(null)}>
+	<Dropdown oncancel={() => navigate(null)}>
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
@@ -42,11 +44,11 @@
 					>
 						{#if children}{@render children({
 								option: data,
-							})}{:else}{data.name}{/if}
+							})}{:else}{data.label}{/if}
 					</div>
 				{/each}
 			{:else}
-				<div class="wx-no-data">No data</div>
+				<div class="wx-no-data">{_("No data")}</div>
 			{/if}
 		</div>
 	</Dropdown>

package/src/components/helpers/listnav.js

@@ -53,11 +53,12 @@ export function getListHandlers() {
 	const keydown = (ev, position) => {
 		switch (ev.code) {
 			case "Enter":
-				isVisible ? selectCallback() : setNav(0);
+				if (isVisible) selectCallback();
+				else setNav(0);
 				break;
 
 			case "Space":
-				isVisible ? null : setNav(0);
+				if (!isVisible) setNav(0);
 				break;
 
 			case "Escape":

package/src/index.js

@@ -1,6 +1,4 @@
-import Area from "./components/Area.svelte";
-export { Area, Area as Textarea };
-
+export { default as TextArea } from "./components/TextArea.svelte";
 export { default as Button } from "./components/Button.svelte";
 export { default as Checkbox } from "./components/Checkbox.svelte";
 export { default as CheckboxGroup } from "./components/CheckboxGroup.svelte";
@@ -30,7 +28,7 @@ export { default as Field } from "./components/Field.svelte";
 export { default as Calendar } from "./components/Calendar.svelte";
 export { default as Month } from "./components/calendar/Month.svelte";
 export { default as RangeCalendar } from "./components/RangeCalendar.svelte";
-export { default as Timepicker } from "./components/Timepicker.svelte";
+export { default as TimePicker } from "./components/TimePicker.svelte";
 export { default as TwoState } from "./components/TwoState.svelte";
 export { default as Modal } from "./components/Modal.svelte";
 export { default as ModalArea } from "./components/ModalArea.svelte";
@@ -48,3 +46,7 @@ export { popupContainer } from "./components/helpers";
 export { default as SuggestDropdown } from "./components/helpers/SuggestDropdown.svelte";
 
 export { en } from "wx-core-locales";
+
+import { setEnv } from "wx-lib-dom";
+import { env } from "wx-lib-svelte";
+setEnv(env);

package/src/themes/Material.svelte

@@ -74,6 +74,7 @@
 		/* icons */
 		--wx-icon-color: var(--wx-color-font-alt);
 		--wx-icon-size: var(--wx-line-height);
+		--wx-icon-border-radius: 2px;
 		/* end icons */
 
 		/* other */

package/src/themes/Willow.svelte

@@ -71,6 +71,7 @@
 		/* icons */
 		--wx-icon-color: #9fa1ae;
 		--wx-icon-size: var(--wx-line-height);
+		--wx-icon-border-radius: 2px;
 		/* end icons */
 
 		/* other */

package/src/themes/WillowDark.svelte

@@ -71,6 +71,7 @@
 		/* icons */
 		--wx-icon-color: #c0c3ce;
 		--wx-icon-size: var(--wx-line-height);
+		--wx-icon-border-radius: 2px;
 		/* end icons */
 
 		/* other */

package/whatsnew.md

@@ -1,3 +1,14 @@
+### 2.0.0
+
+-   [add] Svelte 5 support
+-   [update] controls with options define them as `id, label`
+-   [update] dropdown controls have change event with value instead of selected
+-   [update] Area renamed to TextArea
+-   [update] Timepicker renamed to TimePicker
+-   [update] Sidearea: close event renamed to cancel
+-   [update] ColorBoard: change event has extra input parameter
+-   [update] Modal boxes: cancel and ok properties renamed to cancel and confirm events
+
 ### 1.3.1
 
 -   [fix] locale object lacks language marker