@svar-ui/svelte-calendar 2.6.0 → 2.7.0

package/dist/components/Render/EventProjection.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">const { primitives, dx, dy } = $props();
+const gap = 2;
+function style(primitive) {
+	const left = primitive.x * dx + gap;
+	const top = primitive.y * dy + gap;
+	const width = Math.max(2, primitive.width * dx - gap * 2);
+	const height = Math.max(2, primitive.height * dy - gap * 2);
+	return `left:${left}px;top:${top}px;width:${width}px;height:${height}px`;
+}
+export {};
+</script>
+
+<div class="wx-event-placeholders" aria-hidden="true">
+	{#each primitives as primitive (primitive.id)}
+		<div class="wx-event-placeholder" style={style(primitive)}></div>
+	{/each}
+</div>
+
+<style>
+	.wx-event-placeholders {
+		position: absolute;
+		inset: 0;
+		z-index: 5;
+		pointer-events: none;
+	}
+
+	.wx-event-placeholder {
+		position: absolute;
+		box-sizing: border-box;
+		min-width: 2px;
+		min-height: 2px;
+		border: 2px solid var(--wx-color-primary);
+		border-radius: var(--wx-border-radius);
+		background: color-mix(in srgb, var(--wx-color-primary) 20%, var(--wx-background) 30%, transparent);
+	}
+</style>

package/dist/components/Render/EventProjection.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Primitive } from "@svar-ui/calendar-store";
+type $$ComponentProps = {
+    primitives: Primitive[];
+    dx: number;
+    dy: number;
+};
+declare const EventProjection: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventProjection = ReturnType<typeof EventProjection>;
+export default EventProjection;

package/dist/components/Render/GridSection.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { setID } from "@svar-ui/lib-dom";
-const { primitives, cells, dx, dy, cellCss, eventCss, eventContent, view, section, onoverflow } = $props();
+const { primitives, cells, dx, dy, cellCss, eventCss, eventContent, view, section, eventOverflow = "more", onoverflow } = $props();
 const laneHeight = 22;
 const gap = 2;
 const fullLaneHeight = laneHeight + gap * 2;
@@ -27,7 +27,7 @@ const rowLayout = $derived.by(() => {
 		// Only reserve space for "+more" label if lanes don't all fit
 		const allFit = Math.floor(groupHeight / fullLaneHeight) >= info.totalLanes;
 		const maxVisible = allFit ? info.totalLanes : Math.max(0, Math.floor((groupHeight - moreLabelHeight) / fullLaneHeight));
-		const isExpanded = expandedRows.has(y);
+		const isExpanded = eventOverflow === "expand" || expandedRows.has(y);
 		let extraHeight = 0;
 		if (isExpanded && info.totalLanes > maxVisible) {
 			// Extra pixels needed beyond the normal row height
@@ -298,6 +298,9 @@ function toggleRow(y) {
 		box-shadow: none;
 		border-radius: 0;
 	}
+	.wx-bar-single-day:global(.wx-dragging) {
+		background-color: var(--wx-background);
+	}
 	.wx-bar-single-day:hover {
 		background-color: var(--wx-color-secondary-hover);
 		box-shadow: none;

package/dist/components/Render/GridSection.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Primitive, GridCell, CellCss, EventCss } from "@svar-ui/calendar-store";
+import type { Primitive, GridCell, CellCss, EventCss, EventOverflowMode } from "@svar-ui/calendar-store";
 type $$ComponentProps = {
     primitives: Primitive[];
     cells: GridCell[];
@@ -9,6 +9,7 @@ type $$ComponentProps = {
     eventContent?: any;
     view: string;
     section: string;
+    eventOverflow?: EventOverflowMode;
     onoverflow?: (overflow: boolean) => void;
 };
 declare const GridSection: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Render/ScrollableSection.svelte

@@ -1,14 +1,16 @@
-<script lang="ts">import { getContext, onMount } from "svelte";
+<script lang="ts">import { getContext, onMount, untrack } from "svelte";
 import { drag } from "../../directives/drag.js";
 import { clickevent } from "../../directives/clickevent.js";
 import { clickdate } from "../../directives/clickdate.js";
 import { Popup } from "@svar-ui/svelte-core";
 import Headers from "./Headers.svelte";
 import SectionContent from "./SectionContent.svelte";
-import { useEventOverlay } from "./useEventOverlay.svelte.js";
+import EventProjection from "./EventProjection.svelte";
+import { resolveEventPosition } from "./resolveEventPosition.js";
+import { useEventOverlay } from "../useEventOverlay.svelte.js";
 const api = getContext("calendar-api");
 const { _view } = api.getReactiveState();
-const { data, cellCss, eventCss, eventContent, view, tooltip, eventPopup, readonly = false } = $props();
+const { data, cellCss, eventCss, eventContent, view, tooltip, eventPopup, readonly = false, eventProjection } = $props();
 const section = $derived(data[0]);
 const xHeaders = $derived(section?.xHeaders ?? null);
 const yHeaders = $derived(section?.yHeaders ?? null);
@@ -55,6 +57,16 @@ function getMinContentHeight() {
 }
 const minW = $derived(getMinContentWidth());
 const minH = $derived(getMinContentHeight());
+const projection = $derived.by(() => {
+	if (!eventProjection || !eventProjection.htmlEvent) return null;
+	const event = resolveEventPosition(eventProjection.htmlEvent, eventProjection.event, section, contentEl, dx, dy, $_view, document);
+	if (!event) return null;
+	// store calculated props on the original projection object
+	untrack(() => {
+		Object.assign(eventProjection.event, event);
+	});
+	return $_view.projectEvent(event).find((item) => item.section === section.name);
+});
 const overlay = useEventOverlay((id) => api.getEvent(id), () => section?.mode === "boxes" ? "right-start" : "bottom-start");
 // trackScroll exists in Popup but is missing from its .d.ts
 const popupExtra = { trackScroll: true };
@@ -124,6 +136,13 @@ const popupExtra = { trackScroll: true };
 					{view}
 					{tooltip}
 				/>
+				{#if projection}
+					<EventProjection
+						primitives={projection.primitives}
+						{dx}
+						{dy}
+					/>
+				{/if}
 			{/if}
 		</div>
 	</div>

package/dist/components/Render/ScrollableSection.svelte.d.ts

@@ -8,6 +8,7 @@ type $$ComponentProps = {
     tooltip?: any;
     eventPopup?: any;
     readonly?: boolean;
+    eventProjection?: any;
 };
 declare const ScrollableSection: import("svelte").Component<$$ComponentProps, {}, "">;
 type ScrollableSection = ReturnType<typeof ScrollableSection>;

package/dist/components/Render/SectionContent.svelte

@@ -25,6 +25,7 @@ const { section, dx, dy, scrollHeight, measured, cellCss, eventCss, eventContent
 				{eventContent}
 				{view}
 				section={section.name}
+				eventOverflow={section.ui?.eventOverflow}
 				{onoverflow}
 			/>
 		{:else}

package/dist/components/Render/Sections.svelte

@@ -1,14 +1,16 @@
-<script lang="ts">import { getContext, onMount, tick } from "svelte";
+<script lang="ts">import { getContext, onMount, tick, untrack } from "svelte";
 import { drag } from "../../directives/drag.js";
 import { clickevent } from "../../directives/clickevent.js";
 import { clickdate } from "../../directives/clickdate.js";
 import { Popup } from "@svar-ui/svelte-core";
 import Headers from "./Headers.svelte";
 import SectionContent from "./SectionContent.svelte";
-import { useEventOverlay } from "./useEventOverlay.svelte.js";
+import EventProjection from "./EventProjection.svelte";
+import { resolveEventPosition } from "./resolveEventPosition.js";
+import { useEventOverlay } from "../useEventOverlay.svelte.js";
 const api = getContext("calendar-api");
 const { _view } = api.getReactiveState();
-const { data, cellCss, eventCss, eventContent, view, tooltip, eventPopup, readonly = false } = $props();
+const { data, cellCss, eventCss, eventContent, view, tooltip, eventPopup, readonly = false, eventProjection } = $props();
 let ready = $state(false);
 let sectionEls = $state({});
 let contentEls = $state({});
@@ -84,6 +86,9 @@ function getBarSectionHeight(section) {
 		const lanes = p.totalLanes ?? 1;
 		if (lanes > maxLanes) maxLanes = lanes;
 	}
+	if (!maxLanes && projectionFor(section.name)) {
+		maxLanes = 1;
+	}
 	return maxLanes * BAR_LANE_HEIGHT;
 }
 function dy(name, section) {
@@ -98,7 +103,24 @@ function sectionMinHeight(section) {
 	}
 	return getMinContentHeight(section);
 }
-const visibleSections = $derived(data.filter((s) => s.size !== "content-optional" || s.primitives.length > 0));
+const projections = $derived.by(() => {
+	if (!eventProjection || !eventProjection.htmlEvent) return [];
+	let event;
+	for (let item of visibleSections) {
+		event = resolveEventPosition(eventProjection.htmlEvent, eventProjection.event, item, contentEls[item.name], dx(item.name), dy(item.name, item), $_view, document);
+		if (event) break;
+	}
+	if (!event) return [];
+	// store calculated props on the original projection object
+	untrack(() => {
+		Object.assign(eventProjection.event, event);
+	});
+	return $_view.projectEvent(event);
+});
+function projectionFor(section) {
+	return projections.find((item) => item.section === section);
+}
+const visibleSections = $derived(data.filter((s) => s.size !== "content-optional" || s.primitives.length > 0 || !!projectionFor(s.name)));
 // Sticky prefix: consecutive content-sized sections from the top.
 // The first non-content section ends the prefix; later content sections
 // (if any) scroll normally.
@@ -122,9 +144,13 @@ const stickyOffsets = $derived.by(() => {
 	}
 	return offsets;
 });
-let gridOverflow = $state(false);
-function onGridOverflow(overflow) {
-	gridOverflow = overflow;
+let gridOverflow = $state({});
+function onGridOverflow(section, overflow) {
+	if (!!gridOverflow[section] === overflow) return;
+	gridOverflow = {
+		...gridOverflow,
+		[section]: overflow
+	};
 }
 const hasYHeaders = $derived(visibleSections.some((s) => s.yHeaders !== null && s.yVisible !== false));
 const xHeaders = $derived(visibleSections.find((s) => s.xHeaders !== null && s.xVisible !== false)?.xHeaders ?? null);
@@ -160,11 +186,13 @@ const popupExtra = { trackScroll: true };
 		{@const secDx = dx(section.name)}
 		{@const secDy = dy(section.name, section)}
 		{@const minH = sectionMinHeight(section)}
+		{@const projection = projectionFor(section.name)}
 		<div
 			class="wx-section"
 			class:wx-section-last={idx === visibleSections.length - 1}
 			class:wx-section-sticky={sticky}
-			class:wx-section-grid={section.mode === "grid" && gridOverflow}
+			class:wx-section-grid={section.mode === "grid" &&
+				!!gridOverflow[section.name]}
 			class:wx-has-y-headers={hasYHeaders}
 			style:flex={sectionFlex(section, sticky)}
 			style:min-height={minH > 0 ? `${minH}px` : undefined}
@@ -221,8 +249,17 @@ const popupExtra = { trackScroll: true };
 					{eventContent}
 					{view}
 					{tooltip}
-					onoverflow={section.mode === "grid" ? onGridOverflow : undefined}
+					onoverflow={section.mode === "grid"
+						? overflow => onGridOverflow(section.name, overflow)
+						: undefined}
 				/>
+				{#if projection}
+					<EventProjection
+						primitives={projection.primitives}
+						dx={secDx}
+						dy={secDy}
+					/>
+				{/if}
 			</div>
 		</div>
 	{/each}

package/dist/components/Render/Sections.svelte.d.ts

@@ -8,6 +8,7 @@ type $$ComponentProps = {
     tooltip?: any;
     eventPopup?: any;
     readonly?: boolean;
+    eventProjection?: any;
 };
 declare const Sections: import("svelte").Component<$$ComponentProps, {}, "">;
 type Sections = ReturnType<typeof Sections>;

package/dist/components/Render/YearSection.svelte

@@ -85,7 +85,7 @@ function eventTitle(event) {
 
 <div
 	class="wx-year-grid"
-	style="grid-template-columns: repeat({columns}, 1fr)"
+	style="--wx-year-columns: {columns}"
 >
 	{#each months as month (month.month)}
 		<div class="wx-year-month">
@@ -163,10 +163,17 @@ function eventTitle(event) {
 <style>
 	.wx-year-grid {
 		display: grid;
+		grid-template-columns: repeat(var(--wx-year-columns, 3), 1fr);
 		gap: 16px;
 		padding: 16px;
 		position: relative;
 	}
+	:global(.wx-calendar--compact) {
+		.wx-year-grid {
+			display: flex;
+			flex-direction: column;
+		}
+	}
 	.wx-month-label {
 		font-weight: var(--wx-font-weight-md);
 		margin-bottom: 4px;

package/dist/components/Render/resolveEventPosition.d.ts

@@ -0,0 +1,5 @@
+import type { CalendarEvent, SectionResult, ViewModel } from "@svar-ui/calendar-store";
+import type { CalendarPoint } from "../../types.js";
+export declare function resolveEventPosition(point: CalendarPoint, event: Partial<CalendarEvent>, section: SectionResult, element: HTMLElement, dx: number, dy: number, model: ViewModel, doc: {
+    elementFromPoint: (x: number, y: number) => Element | null;
+}): Partial<CalendarEvent> | null;

package/dist/components/Render/resolveEventPosition.js

@@ -0,0 +1,35 @@
+export function resolveEventPosition(point, event, section, element, dx, dy, model, doc) {
+    const hit = doc.elementFromPoint(point.clientX, point.clientY);
+    if (!element.contains(hit))
+        return null;
+    if (section.mode === "list" ||
+        section.mode === "year" ||
+        dx <= 0 ||
+        dy <= 0) {
+        return null;
+    }
+    const rect = element.getBoundingClientRect();
+    if (point.clientX < rect.left ||
+        point.clientX > rect.right ||
+        point.clientY < rect.top ||
+        point.clientY > rect.bottom) {
+        return null;
+    }
+    const x = Math.max(0, Math.min(99.999, (point.clientX - rect.left + element.scrollLeft) / dx));
+    const y = Math.max(0, Math.min(99.999, (point.clientY - rect.top + element.scrollTop) / dy));
+    const duration = typeof event.duration === "number" && event.duration > 0
+        ? event.duration
+        : event.start instanceof Date && event.end instanceof Date
+            ? event.end.getTime() - event.start.getTime()
+            : 0;
+    const positioned = model.toPositionStart(section.name, x, y, event, true);
+    if (!(positioned.start instanceof Date))
+        return null;
+    if (duration > 0) {
+        positioned.end = new Date(positioned.start.getTime() + duration);
+    }
+    else {
+        delete positioned.end;
+    }
+    return positioned;
+}

package/dist/components/pro_RecurringForm.svelte

@@ -0,0 +1,346 @@
+<script>
+	import { getContext, setContext } from "svelte";
+	import {
+		DatePicker,
+		TimePicker,
+		Select,
+		Checkbox,
+		Counter,
+	} from "@svar-ui/svelte-core";
+	import {
+		parseRRule,
+		buildRRule,
+		WEEKDAYS,
+		weekdayOf,
+		weekdayName,
+		nthOf,
+		nthLabel,
+	} from "./pro_rrule-form";
+	
+	const locale = getContext("wx-i18n");
+	const _ = locale ? locale.getGroup("eventCalendar") : v => v;
+
+	setContext("wx-input-id", "");
+
+	let { value, error, onchange } = $props();
+
+	const update = part => onchange({ value: { ...value, ...part } });
+
+	function sameDay(a, b) {
+		return (
+			a.getFullYear() === b.getFullYear() &&
+			a.getMonth() === b.getMonth() &&
+			a.getDate() === b.getDate()
+		);
+	}
+
+	// calendar returns the picked day at midnight; keep the current time part
+	function pickDate(key, day) {
+		if (!day) return;
+		const current = value[key];
+		const next = new Date(day);
+		if (current) {
+			next.setHours(current.getHours(), current.getMinutes(), 0, 0);
+		}
+		if (key === "start" && sameDay(value.start, value.end)) {
+			const end = new Date(value.end);
+			end.setFullYear(next.getFullYear(), next.getMonth(), next.getDate());
+			update({ start: next, end });
+		} else {
+			update({ [key]: next });
+		}
+	}
+
+	// time picker returns hours/minutes only; keep the current date part
+	function pickTime(key, time) {
+		const current = value[key];
+		if (!current) return;
+		const next = new Date(current);
+		next.setHours(time.getHours(), time.getMinutes(), 0, 0);
+		update({ [key]: next });
+	}
+
+	// local editable model; buildRRule(form) may collapse a custom setup
+	// into an equivalent preset string (custom / every 1 day -> FREQ=DAILY),
+	// so re-seeding from the incoming rrule is skipped while it equals the
+	// last string this component emitted - otherwise the autoSave echo
+	// would flip the "Custom" select back to the preset
+	// svelte-ignore state_referenced_locally
+	let form = $state(parseRRule(value?.rrule, value?.start));
+	// svelte-ignore state_referenced_locally
+	let lastRRule = value?.rrule ?? "";
+
+	$effect.pre(() => {
+		const incoming = value?.rrule ?? "";
+		if (incoming !== lastRRule) {
+			lastRRule = incoming;
+			form = parseRRule(incoming, value?.start);
+		}
+	});
+
+	function applyForm(part) {
+		Object.assign(form, part);
+		const rrule = buildRRule(form, value.start);
+		lastRRule = rrule;
+		update({ rrule });
+	}
+
+	function setType(type) {
+		const part = { type };
+		// pre-seed the custom block so it opens in a sensible state
+		if (type === "custom" && !form.weekdays.length)
+			part.weekdays = [weekdayOf(value.start)];
+		applyForm(part);
+	}
+
+	function setEnds(ends) {
+		const part = { ends };
+		if (ends === "until" && !form.until) {
+			const d = new Date(value.start);
+			d.setMonth(d.getMonth() + 1);
+			part.until = d;
+		}
+		applyForm(part);
+	}
+
+	function toggleDay(id, checked) {
+		// unchecking all days is allowed - BYDAY is then omitted and the
+		// rule falls back to the start date's weekday
+		applyForm({
+			weekdays: checked
+				? [...form.weekdays, id]
+				: form.weekdays.filter(d => d !== id),
+		});
+	}
+
+	const repeatOptions = [
+		{ id: "never", label: _("Never") },
+		{ id: "daily", label: _("Daily") },
+		{ id: "weekly", label: _("Weekly") },
+		{ id: "monthly", label: _("Monthly") },
+		{ id: "yearly", label: _("Yearly") },
+		{ id: "workdays", label: _("Every workday") },
+		{ id: "custom", label: _("Custom") },
+	];
+	const unitOptions = [
+		{ id: "DAILY", label: _("day(s)") },
+		{ id: "WEEKLY", label: _("week(s)") },
+		{ id: "MONTHLY", label: _("month(s)") },
+		{ id: "YEARLY", label: _("year(s)") },
+	];
+	const endsOptions = [
+		{ id: "never", label: _("Never") },
+		{ id: "count", label: _("After") },
+		{ id: "until", label: _("On date") },
+	];
+
+	function formatLabel(template, values) {
+		return Object.entries(values).reduce(
+			(label, [key, value]) => label.replace(`%${key}`, String(value)),
+			template
+		);
+	}
+
+	// labels follow the current start date; a stored rule is re-derived
+	// from the new start only on the next recurrence edit
+	const monthModeOptions = $derived([
+		{
+			id: "day",
+			label: formatLabel(_("on day %d"), {
+				d: value?.start?.getDate() ?? 1,
+			}),
+		},
+		{
+			id: "weekday",
+			label: formatLabel(_("on the %n %d"), {
+				n: _(nthLabel(nthOf(value?.start))),
+				d: _(weekdayName(weekdayOf(value?.start))),
+			}),
+		},
+	]);
+</script>
+
+<div class="wx-recurrence" class:wx-error={!!error}>
+	<div class="wx-row">
+		<span class="wx-date-label">{_("Start date")}</span>
+		<div class="wx-date">
+			<DatePicker
+				value={value.start}
+				buttons={false}
+				onchange={ev => pickDate("start", ev.value)}
+			/>
+		</div>
+		{#if !value.allDay}
+			<div class="wx-time">
+				<TimePicker
+					value={value.start}
+					onchange={ev => pickTime("start", ev.value)}
+				/>
+			</div>
+		{/if}
+	</div>
+
+	<div class="wx-row">
+		<span class="wx-date-label">{_("End date")}</span>
+		<div class="wx-date">
+			<DatePicker
+				value={value.end}
+				buttons={false}
+				onchange={ev => pickDate("end", ev.value)}
+			/>
+		</div>
+		{#if !value.allDay}
+			<div class="wx-time">
+				<TimePicker
+					value={value.end}
+					onchange={ev => pickTime("end", ev.value)}
+				/>
+			</div>
+		{/if}
+	</div>
+
+	<div class="wx-row">
+		<span class="wx-date-label"></span>
+		<Checkbox
+			label={_("All day")}
+			value={!!value.allDay}
+			onchange={ev => update({ allDay: ev.value })}
+		/>
+	</div>
+
+	<div class="wx-row">
+		<span class="wx-label">{_("Repeat")}</span>
+		<div class="wx-control">
+			<Select
+				value={form.type}
+				options={repeatOptions}
+				onchange={ev => setType(ev.value)}
+			/>
+		</div>
+	</div>
+
+	{#if form.type === "custom"}
+		<div class="wx-row">
+			<span class="wx-label">{_("Every")}</span>
+			<div class="wx-counter">
+				<Counter
+					value={form.interval}
+					min={1}
+					max={999}
+					onchange={ev => !ev.input && applyForm({ interval: ev.value })}
+				/>
+			</div>
+			<div class="wx-control">
+				<Select
+					value={form.freq}
+					options={unitOptions}
+					onchange={ev => applyForm({ freq: ev.value })}
+				/>
+			</div>
+		</div>
+		{#if form.freq === "WEEKLY"}
+			<div class="wx-row">
+				<span class="wx-label"></span>
+				<div class="wx-days">
+					{#each WEEKDAYS as day (day.id)}
+						<Checkbox
+							label={_(day.label)}
+							value={form.weekdays.includes(day.id)}
+							onchange={ev => toggleDay(day.id, ev.value)}
+						/>
+					{/each}
+				</div>
+			</div>
+		{:else if form.freq === "MONTHLY" || form.freq === "YEARLY"}
+			<div class="wx-row">
+				<span class="wx-label"></span>
+				<div class="wx-control">
+					<Select
+						value={form.monthMode}
+						options={monthModeOptions}
+						onchange={ev => applyForm({ monthMode: ev.value })}
+					/>
+				</div>
+			</div>
+		{/if}
+	{/if}
+
+	{#if form.type !== "never"}
+		<div class="wx-row">
+			<span class="wx-label">{_("Ends")}</span>
+			<div class="wx-control">
+				<Select
+					value={form.ends}
+					options={endsOptions}
+					onchange={ev => setEnds(ev.value)}
+				/>
+			</div>
+			{#if form.ends === "count"}
+				<div class="wx-counter">
+					<Counter
+						value={form.count}
+						min={1}
+						max={999}
+						onchange={ev => !ev.input && applyForm({ count: ev.value })}
+					/>
+				</div>
+				<span class="wx-hint">{_("occurrence(s)")}</span>
+			{:else if form.ends === "until"}
+				<div class="wx-date">
+					<DatePicker
+						value={form.until}
+						onchange={ev => ev.value && applyForm({ until: ev.value })}
+					/>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.wx-recurrence {
+		display: flex;
+		flex-direction: column;
+		gap: var(--wx-padding);
+	}
+	.wx-row {
+		display: flex;
+		align-items: center;
+		gap: var(--wx-padding);
+	}
+	.wx-date-label,
+	.wx-label {
+		flex: none;
+		width: 52px;
+	}
+	.wx-date-label {
+		width: 72px;
+	}
+	.wx-control {
+		flex: 1;
+	}
+	.wx-date {
+		flex: 1;
+		min-width: 0;
+	}
+	.wx-time {
+		flex: none;
+		width: 96px;
+	}
+	.wx-counter {
+		flex: none;
+		width: 140px;
+	}
+	.wx-days {
+		flex: 1;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 12px;
+	}
+	.wx-hint {
+		white-space: nowrap;
+	}
+	.wx-error :global(.wx-input) {
+		border-color: var(--wx-color-danger);
+	}
+</style>