@octane-xplat/ui 0.9.0 → 0.11.0

package/dist/web/Calendar.web.tsrx.js

@@ -0,0 +1,568 @@
+import { Icon } from "./Icon.web.tsrx.js";
+import { cx } from "./cx.js";
+import { dateMessages } from "./date-messages.js";
+import { DATE_FORMAT_WITH_WEEKDAY, normalizeDayOfWeek, plainDateAddDays, plainDateAddMonths, plainDateFormat, plainDateFromISO, plainDateGetWeekNumber, plainDateIsBefore, plainDateToDate, plainDateToISO, resolveLocale } from "./datetime.js";
+import { calendarKeyTarget, isDateComposing } from "./date-keyboard.js";
+import { applyRangePick, buildMonthGrid, computeCellRounding, computeDayCellState, createDateDisabledCheck, dayCarriesBand, getInitialFocusDate, monthLabel, monthStart, navigationBounds } from "./calendar-core.js";
+import { __s, bag0, bag3, bag5, bag6, bagOf, child, clone, componentSlot, createElement, createScopedElement, createScopedValue, delegateEvents, hookSlots, ifBlock, mapSlot, markDangerouslySetInnerHTMLChildren, markWarm, positionalChildren, registerWarmPlan, setAriaAttribute, setBooleanAttribute, setEventHandler, sibling, snapshotSpread, template, useEffect, useImperativeHandle, useRef, useState, warmChild } from "octane";
+import { bindSignalAttribute, bindSignalChild, bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish, hookMemoPublish1, hookMemoPublish3 } from "octane/internal/client";
+//#region src/Calendar.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["click"]);
+var _t$0 = /* @__PURE__ */ template("<span class=\"vx-calendar-weeknumber vx-calendar-weeknumber--head\"></span>");
+var _t$1 = /* @__PURE__ */ template("<span class=\"vx-calendar-weekname\" role=\"columnheader\"></span>");
+var _t$2 = /* @__PURE__ */ template("<span class=\"vx-calendar-weeknumber\" role=\"rowheader\"></span>");
+var _t$3 = /* @__PURE__ */ template("<div class=\"vx-calendar-week\" role=\"row\"><!><!></div>");
+var _t$4 = /* @__PURE__ */ template("<div class=\"vx-calendar-month\" role=\"grid\"><div class=\"vx-calendar-weeknames\" role=\"row\"><!><!></div><!></div>");
+var _t$5 = /* @__PURE__ */ template("<div><div class=\"vx-calendar-header\"><button type=\"button\" class=\"vx-calendar-nav vx-calendar-nav--prev\"></button><div class=\"vx-calendar-title\" aria-hidden=\"true\"></div><button type=\"button\" class=\"vx-calendar-nav vx-calendar-nav--next\"></button></div><div class=\"vx-calendar-months\"><!></div><div class=\"vx-calendar-live\" aria-live=\"polite\" role=\"status\"></div></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(14);
+var _key$3 = (grid) => `${grid.year}-${grid.month}`;
+function __then$5(__props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		const _root = clone(_t$0);
+		_b = bag0(__s, _root);
+	}
+}
+var _key$7 = (name, i) => i;
+function __item$8(name, __s, __extra) {
+	__s.block.itemIndex;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$1);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, name, "b:8ac3d1f6", null, void 0, void 0, void 0, true);
+}
+var _key$11 = (week, w) => w;
+function __then$13(__props, __s, __extra) {
+	const week = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$2);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, plainDateGetWeekNumber(week[0].date), "b:10911e65", null, void 0, void 0, void 0, true);
+}
+function __item$12(week, __s, __extra) {
+	const __block = __s.block;
+	const grid = __extra[0];
+	const props = __extra[1];
+	const renderDay = __extra[2];
+	__block.itemIndex;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2;
+		const _root = clone(_t$3);
+		_m0 = _root;
+		const _el0 = child(_root);
+		_m1 = _el0;
+		_m2 = sibling(_el0, 1);
+		_b = bag5(__s, _root, _m0, _m1, _m2, null, void 0);
+	}
+	{
+		const __ifCondition = props.hasWeekNumbers;
+		ifBlock(__s, 1, _b.a, __ifCondition, __then$13, null, _b.b, __ifCondition ? [week] : void 0);
+	}
+	_b.f = bindSignalChild(__s, _b.f, 2, _b.a, week.map((day) => renderDay(grid, day)), "b:74c23b49", _b.c, true, void 0, void 0, void 0);
+}
+function __item$4(grid, __s, __extra) {
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 1);
+	const __memoCommitted$ = __memoRegion.auto;
+	let __memoCache$ = __memoCommitted$ === void 0 ? [] : __memoCommitted$;
+	let __mapItems;
+	let __mapMethod$;
+	let __mapItems$;
+	let __mapMethod$2;
+	const locale = __extra[0];
+	const props = __extra[1];
+	const renderDay = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m2, _m3, _m4, _m5;
+		const _root = clone(_t$4);
+		_m1 = _root;
+		const _el0 = child(_root);
+		_m2 = _el0;
+		_m3 = sibling(child(_el0), 1);
+		_m4 = sibling(_el0, 1);
+		_m5 = child(_el0);
+		_b = bag6(__s, _root, void 0, _m1, _m2, _m3, _m4, _m5);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "aria-label", monthLabel(grid.year, grid.month, locale), "b:0bbb522b", setAriaAttribute);
+	ifBlock(__s, 1, _b.c, props.hasWeekNumbers, __then$5, null, _b.f);
+	{
+		const _v = (__mapItems$ = grid.dayNames, __mapMethod$2 = __mapItems$.map, __mapItems$);
+		const __mapNative = mapSlot(_v, __mapMethod$2);
+		{
+			const __memoDep = _v;
+			if (__s.slots[2] === void 0 || !__mapNative || __memoCache$[1] !== true || !hookMemoEqual(__memoCache$[0], __memoDep)) {
+				mapSlot(__s, 2, _b.c, _v, __mapMethod$2, __mapNative, (name, i) => createScopedElement("span", {
+					key: i,
+					className: "vx-calendar-weekname",
+					role: "columnheader"
+				}, () => name), _key$7, __item$8, 19, void 0, _b.d, 1);
+				if (__memoCache$ === __memoCommitted$) __memoCache$ = __memoCache$.slice();
+				__memoCache$[0] = __memoDep;
+				__memoCache$[1] = __mapNative;
+			}
+		}
+	}
+	mapSlot(__s, 3, _b.b, (__mapItems = grid.weeks, __mapMethod$ = __mapItems.map, __mapItems), __mapMethod$, (week, w) => createScopedElement("div", {
+		key: w,
+		className: "vx-calendar-week",
+		role: "row"
+	}, () => positionalChildren([props.hasWeekNumbers ? createScopedElement("span", {
+		className: "vx-calendar-weeknumber",
+		role: "rowheader"
+	}, () => plainDateGetWeekNumber(week[0].date)) : null, week.map((day) => renderDay(grid, day))])), _key$11, __item$12, 18, [
+		grid,
+		props,
+		renderDay
+	], _b.e, 1);
+	if (__memoCache$ !== __memoCommitted$) __memoRegion.auto = __memoCache$;
+}
+var _rm$20 = [
+	"s",
+	"j",
+	"i"
+];
+var Calendar = /* @__PURE__ */ __s(/* @__PURE__ */ markWarm(function Calendar(props, __s, __extra) {
+	const __memoRegion$ = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion$.hooks;
+	if (__hk === void 0) __memoRegion$.hooks = __hk = hookMemoCreate(27);
+	let __hkd0, __hkd0$, __hkd0$2, __hkd1, __hkd2, __hkd3, __hkd4, __hkd0$3, __hkd1$, __hkd2$, __hkd3$, __hkd4$, __hkd5, __hkd6, __hkd0$4, __hkd1$2, __hkd2$2;
+	let __mapMethod;
+	const mode = props.mode ?? "single";
+	const numberOfMonths = props.numberOfMonths === 2 ? 2 : 1;
+	const weekStartsOn = normalizeDayOfWeek(props.weekStartsOn);
+	const locale = (__hkd0 = props, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) ? hookMemoPublish1(__hk, 0, resolveLocale(props.locale), __hkd0) : __hk[2]);
+	const messages = (__hkd0$ = props, __hk[3] !== true || !hookMemoEqual(__hk[4], __hkd0$) ? hookMemoPublish1(__hk, 3, dateMessages(props.messages), __hkd0$) : __hk[5]);
+	const controlled = props.value !== void 0;
+	const [internalValue, setInternalValue] = useState(props.defaultValue, _hs$ + 0);
+	const currentValue = controlled ? props.value : internalValue;
+	const [rangeAnchor, setRangeAnchor] = useState(null, _hs$ + 1);
+	const [hoveredIso, setHoveredIso] = useState(null, _hs$ + 2);
+	const [announcement, setAnnouncement] = useState("", _hs$ + 3);
+	const [focusIso, setFocusIso] = useState(null, _hs$ + 4);
+	const [pendingFocus, setPendingFocus] = useState(null, _hs$ + 5);
+	const focusControlled = props.focusDate !== void 0;
+	const [internalBase, setInternalBase] = useState(() => monthStart(getInitialFocusDate({
+		focusDate: props.focusDate,
+		value: currentValue,
+		min: props.min,
+		max: props.max,
+		numberOfMonths
+	})), _hs$ + 6);
+	const baseMonth = focusControlled ? monthStart(plainDateFromISO(props.focusDate) ?? internalBase) : internalBase;
+	const setBaseMonth = (next, opts) => {
+		if (opts?.focusIso) setPendingFocus(opts.focusIso);
+		if (!focusControlled) setInternalBase(next);
+		props.onFocusDateChange?.(plainDateToISO(next));
+	};
+	const months = (__hkd0$2 = baseMonth, __hkd1 = numberOfMonths, __hkd2 = weekStartsOn, __hkd3 = props.hasVariableRowCount, __hkd4 = locale, __hk[6] !== true || !hookMemoEqual(__hk[7], __hkd0$2) || !hookMemoEqual(__hk[8], __hkd1) || !hookMemoEqual(__hk[9], __hkd2) || !hookMemoEqual(__hk[10], __hkd3) || !hookMemoEqual(__hk[11], __hkd4) ? hookMemoPublish(__hk, 6, Array.from({ length: numberOfMonths }, (_, i) => buildMonthGrid(plainDateAddMonths(baseMonth, i).year, plainDateAddMonths(baseMonth, i).month, weekStartsOn, props.hasVariableRowCount ?? false, locale)), __hkd0$2, __hkd1, __hkd2, __hkd3, __hkd4) : __hk[12]);
+	const isDateDisabled = (__hkd0$3 = props.min, __hkd1$ = props.max, __hkd2$ = props.dateConstraints, __hkd3$ = props.maxRangeSpan, __hkd4$ = props.minRangeSpan, __hkd5 = rangeAnchor, __hkd6 = mode, __hk[13] !== true || !hookMemoEqual(__hk[14], __hkd0$3) || !hookMemoEqual(__hk[15], __hkd1$) || !hookMemoEqual(__hk[16], __hkd2$) || !hookMemoEqual(__hk[17], __hkd3$) || !hookMemoEqual(__hk[18], __hkd4$) || !hookMemoEqual(__hk[19], __hkd5) || !hookMemoEqual(__hk[20], __hkd6) ? hookMemoPublish(__hk, 13, createDateDisabledCheck({
+		min: props.min,
+		max: props.max,
+		dateConstraints: props.dateConstraints,
+		maxRangeSpan: props.maxRangeSpan,
+		minRangeSpan: props.minRangeSpan,
+		rangeAnchor: mode === "range" ? rangeAnchor : null
+	}), __hkd0$3, __hkd1$, __hkd2$, __hkd3$, __hkd4$, __hkd5, __hkd6) : __hk[21]);
+	const bounds = (__hkd0$4 = baseMonth, __hkd1$2 = numberOfMonths, __hkd2$2 = props, __hk[22] !== true || !hookMemoEqual(__hk[23], __hkd0$4) || !hookMemoEqual(__hk[24], __hkd1$2) || !hookMemoEqual(__hk[25], __hkd2$2) ? hookMemoPublish3(__hk, 22, navigationBounds(baseMonth, numberOfMonths, props.min, props.max), __hkd0$4, __hkd1$2, __hkd2$2) : __hk[26]);
+	const monthYearLabel = months.map((m) => monthLabel(m.year, m.month, locale)).join(" – ");
+	const firstLabel = useRef(true, _hs$ + 7);
+	useEffect(() => {
+		if (firstLabel.current) {
+			firstLabel.current = false;
+			return;
+		}
+		setAnnouncement(monthYearLabel);
+	}, [monthYearLabel], _hs$ + 8);
+	const root = useRef(null, _hs$ + 9);
+	useEffect(() => {
+		if (!pendingFocus || !root.current) return;
+		const el = root.current.querySelector(`button[data-date="${pendingFocus}"]:not([disabled])`);
+		if (!el) return;
+		el.focus();
+		setFocusIso(pendingFocus);
+		setPendingFocus(null);
+	}, [pendingFocus, months], _hs$ + 10);
+	const navApi = useRef({ navigateTo: (_) => {} }, _hs$ + 11);
+	navApi.current = { navigateTo: (iso) => {
+		const pd = plainDateFromISO(iso);
+		if (pd) setBaseMonth(monthStart(pd));
+	} };
+	useImperativeHandle(props.ref, () => ({ navigateTo: (iso) => navApi.current.navigateTo(iso) }), [], _hs$ + 12);
+	const pick = (iso) => {
+		const pd = plainDateFromISO(iso);
+		if (!pd || isDateDisabled(pd)) return;
+		if (mode === "single") {
+			setAnnouncement(messages.selected(plainDateFormat(pd, DATE_FORMAT_WITH_WEEKDAY, locale)));
+			if (!controlled) setInternalValue(iso);
+			props.onChange?.(iso, plainDateToDate(pd));
+			return;
+		}
+		if (rangeAnchor === null) {
+			setRangeAnchor(iso);
+			setAnnouncement(messages.rangeStart(plainDateFormat(pd, DATE_FORMAT_WITH_WEEKDAY, locale)));
+			return;
+		}
+		const result = applyRangePick(rangeAnchor, iso, props.minRangeSpan);
+		if (result.kind === "cancel") {
+			setRangeAnchor(null);
+			setAnnouncement(messages.rangeCleared);
+			return;
+		}
+		if (result.kind === "commit") {
+			setRangeAnchor(null);
+			if (!controlled) setInternalValue(result.range);
+			props.onChange?.(result.range);
+			setAnnouncement(messages.rangeSelected(plainDateFormat(plainDateFromISO(result.range.start), DATE_FORMAT_WITH_WEEKDAY, locale), plainDateFormat(plainDateFromISO(result.range.end), DATE_FORMAT_WITH_WEEKDAY, locale)));
+		}
+	};
+	const enabledCells = months.flatMap((grid) => grid.weeks.flat()).filter((day) => !day.isOutsideMonth && !isDateDisabled(day.date));
+	const selectedIso = typeof currentValue === "string" ? currentValue : currentValue?.start;
+	const tabbable = enabledCells.find((day) => day.iso === focusIso)?.iso ?? enabledCells.find((day) => day.iso === selectedIso)?.iso ?? enabledCells.find((day) => day.isToday)?.iso ?? enabledCells[0]?.iso;
+	useEffect(() => {
+		if ((root.current?.querySelector("button[data-date]:focus"))?.disabled && tabbable) (root.current?.querySelector(`button[data-date="${tabbable}"]`))?.focus();
+	}, [tabbable, isDateDisabled], _hs$ + 13);
+	const handleKeyDown = (e) => {
+		if (e.defaultPrevented || isDateComposing(e)) return;
+		const active = e.target?.closest?.("button[data-date]");
+		if (!active || !root.current?.contains(active)) return;
+		if (mode === "range" && rangeAnchor !== null && e.key === "Escape") {
+			setRangeAnchor(null);
+			setAnnouncement(messages.rangeCleared);
+			e.preventDefault();
+			e.stopPropagation();
+			return;
+		}
+		if (![
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown",
+			"Home",
+			"End",
+			"PageUp",
+			"PageDown"
+		].includes(e.key)) return;
+		const direction = props.direction ?? getComputedStyle(root.current).direction;
+		const iso = calendarKeyTarget({
+			iso: active.dataset.date,
+			event: e,
+			months,
+			isDisabled: isDateDisabled,
+			rtl: direction === "rtl",
+			min: props.min,
+			max: props.max
+		});
+		e.preventDefault();
+		if (!iso) return;
+		const target = plainDateFromISO(iso);
+		const pane = monthStart(target);
+		if (plainDateIsBefore(pane, baseMonth) || plainDateIsBefore(monthStart(plainDateAddMonths(baseMonth, numberOfMonths - 1)), pane)) {
+			setBaseMonth(pane, { focusIso: iso });
+			return;
+		}
+		setFocusIso(iso);
+		(root.current?.querySelector(`button[data-date="${iso}"]`))?.focus();
+	};
+	const previewEnd = mode === "range" && rangeAnchor && hoveredIso ? hoveredIso : null;
+	const previewRange = previewEnd && rangeAnchor ? rangeAnchor <= previewEnd ? {
+		start: rangeAnchor,
+		end: previewEnd
+	} : {
+		start: previewEnd,
+		end: rangeAnchor
+	} : void 0;
+	const bandRange = previewRange ?? (typeof currentValue === "object" && currentValue ? currentValue : void 0);
+	const renderDay = (grid, day) => {
+		const state = computeDayCellState(day, {
+			mode,
+			value: currentValue,
+			rangeAnchor: mode === "range" ? rangeAnchor : null,
+			isDateDisabled
+		});
+		if (previewRange && !day.isOutsideMonth && !state.isDisabled) {
+			if (day.iso >= previewRange.start && day.iso <= previewRange.end && day.iso !== rangeAnchor) state.isInRange = true;
+			if (day.iso === previewRange.end && day.iso !== previewRange.start) state.isRangeEnd = true;
+		}
+		const bandNeighbor = (iso) => {
+			if (!bandRange) return false;
+			const pd = plainDateFromISO(iso);
+			if (!pd) return false;
+			if (pd.month !== grid.month || pd.year !== grid.year) return false;
+			if (isDateDisabled(pd)) return false;
+			return iso >= bandRange.start && iso <= bandRange.end;
+		};
+		const rounding = computeCellRounding(state, {
+			before: bandNeighbor(plainDateToISO(plainDateAddDays(day.date, -1))),
+			after: bandNeighbor(plainDateToISO(plainDateAddDays(day.date, 1)))
+		});
+		if (day.isOutsideMonth) return props.hasOutsideDays ?? true ? createScopedValue(() => createScopedElement("span", {
+			key: day.iso,
+			role: "gridcell",
+			className: "vx-calendar-day vx-calendar-day--outside",
+			"data-date": day.iso
+		}, () => day.dayOfMonth)) : createScopedValue(() => createElement("span", {
+			key: day.iso,
+			role: "gridcell",
+			className: "vx-calendar-day vx-calendar-day--empty"
+		}));
+		const isTabbable = tabbable === day.iso;
+		const dateLabel = plainDateFormat(day.date, DATE_FORMAT_WITH_WEEKDAY, locale);
+		const fullLabel = state.isPendingStart || state.isRangeStart ? messages.rangeStart(dateLabel) : state.isRangeEnd ? messages.rangeEnd(dateLabel) : state.isInRange ? messages.inRange(dateLabel) : state.isSelected ? messages.selected(dateLabel) : dateLabel;
+		return createScopedValue(() => createScopedElement("div", {
+			key: day.iso,
+			className: "vx-calendar-cell",
+			role: "gridcell",
+			"aria-selected": dayCarriesBand(state) || state.isSelected
+		}, () => createScopedValue(() => createScopedElement("button", {
+			type: "button",
+			"data-date": day.iso,
+			className: cx("vx-calendar-day", state.isSelected && "vx-calendar-day--selected", state.isRangeStart && "vx-calendar-day--range-start", state.isRangeEnd && "vx-calendar-day--range-end", state.isInRange && "vx-calendar-day--in-range", state.isPendingStart && "vx-calendar-day--pending", state.isDisabled && "vx-calendar-day--disabled", day.isToday && "vx-calendar-day--today", day.isWeekend && "vx-calendar-day--weekend", day.isSunday && "vx-calendar-day--sunday", day.isFirstWeekOfMonth && "vx-calendar-day--first-week", day.isLastWeekOfMonth && "vx-calendar-day--last-week", rounding === "both" && "vx-calendar-day--round-both", rounding === "start" && "vx-calendar-day--round-start", rounding === "end" && "vx-calendar-day--round-end"),
+			tabIndex: isTabbable ? 0 : -1,
+			disabled: state.isDisabled || void 0,
+			"aria-label": fullLabel,
+			"aria-current": day.isToday ? "date" : void 0,
+			onClick: () => pick(day.iso),
+			onFocus: () => setFocusIso(day.iso),
+			onMouseEnter: () => mode === "range" && rangeAnchor && setHoveredIso(day.iso),
+			onMouseLeave: () => setHoveredIso(null)
+		}, () => day.dayOfMonth))));
+	};
+	const __warmPlan = Calendar.__warm;
+	if (typeof __warmPlan === "function") registerWarmPlan(__warmPlan, props);
+	else registerWarmPlan(() => {
+		warmChild(Icon, {
+			name: "xplat-chevron-left",
+			size: 16
+		});
+		warmChild(Icon, {
+			name: "xplat-chevron-right",
+			size: 16
+		});
+	}, void 0);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m11, _m14, _m16, _m17, _m18, _m21;
+		const _root = clone(_t$5);
+		_m0 = (el) => {
+			root.current = el;
+		};
+		_m1 = props.direction;
+		_m2 = locale;
+		_m3 = props.id;
+		_m4 = cx("vx-calendar", mode === "range" && "vx-calendar--range", numberOfMonths === 2 && "vx-calendar--two-months", props.className);
+		_m5 = props.style;
+		_m6 = handleKeyDown;
+		_m7 = snapshotSpread(props.web);
+		_m8 = _root;
+		_m9 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"dir",
+				_m1
+			],
+			[
+				false,
+				"lang",
+				_m2
+			],
+			[
+				false,
+				"id",
+				_m3
+			],
+			[
+				false,
+				"className",
+				_m4
+			],
+			[
+				false,
+				"style",
+				_m5
+			],
+			[
+				false,
+				"onKeyDown",
+				_m6
+			],
+			[true, _m7]
+		], "b:149809a3", true);
+		const _el0 = child(_root);
+		const _el1 = child(_el0);
+		_m11 = _el1;
+		setEventHandler(_el1, "$$click", () => bounds.canNavigatePrevious && setBaseMonth(monthStart(plainDateAddMonths(baseMonth, -1))));
+		const _el2 = sibling(_el1, 2);
+		_m14 = _el2;
+		setEventHandler(_el2, "$$click", () => bounds.canNavigateNext && setBaseMonth(monthStart(plainDateAddMonths(baseMonth, 1))));
+		markDangerouslySetInnerHTMLChildren(_root);
+		const _el3 = sibling(_el0, 1);
+		_m16 = _el3;
+		_m17 = child(_el3);
+		_m18 = sibling(_el1, 1);
+		_m21 = sibling(_el3, 1);
+		_b = bagOf(__s, _root, {
+			a: _m0,
+			b: _m1,
+			c: _m2,
+			d: _m3,
+			e: _m4,
+			f: _m5,
+			g: _m6,
+			h: _m7,
+			i: _m8,
+			j: _m9,
+			k: void 0,
+			l: _m11,
+			m: void 0,
+			n: void 0,
+			o: _m14,
+			p: void 0,
+			q: _m16,
+			r: _m17,
+			s: _m18,
+			t: null,
+			u: void 0,
+			v: _m21,
+			w: null,
+			x: void 0
+		});
+		__s.refFields = _rm$20;
+	} else {
+		{
+			const _v = (el) => {
+				root.current = el;
+			};
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = props.direction;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = locale;
+			if (_b.c !== _v) _b.c = _v;
+		}
+		{
+			const _v = props.id;
+			if (_b.d !== _v) _b.d = _v;
+		}
+		{
+			const _v = cx("vx-calendar", mode === "range" && "vx-calendar--range", numberOfMonths === 2 && "vx-calendar--two-months", props.className);
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.style;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = handleKeyDown;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		_b.h = snapshotSpread(props.web);
+		_b.j = bindSignalHostPropSources(__s, _b.j, _b.i, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"dir",
+				_b.b
+			],
+			[
+				false,
+				"lang",
+				_b.c
+			],
+			[
+				false,
+				"id",
+				_b.d
+			],
+			[
+				false,
+				"className",
+				_b.e
+			],
+			[
+				false,
+				"style",
+				_b.f
+			],
+			[
+				false,
+				"onKeyDown",
+				_b.g
+			],
+			[true, _b.h]
+		], "b:149809a3", true);
+		setEventHandler(_b.l, "$$click", () => bounds.canNavigatePrevious && setBaseMonth(monthStart(plainDateAddMonths(baseMonth, -1))));
+		setEventHandler(_b.o, "$$click", () => bounds.canNavigateNext && setBaseMonth(monthStart(plainDateAddMonths(baseMonth, 1))));
+	}
+	_b.k = bindSignalAttribute(__s, _b.k, _b.l, "aria-label", messages.previousMonth, "b:f0bc3a66", setAriaAttribute);
+	_b.m = bindSignalAttribute(__s, _b.m, _b.l, "disabled", !bounds.canNavigatePrevious || void 0, "b:df4712ee", setBooleanAttribute);
+	_b.n = bindSignalAttribute(__s, _b.n, _b.o, "aria-label", messages.nextMonth, "b:d704f1b2", setAriaAttribute);
+	_b.p = bindSignalAttribute(__s, _b.p, _b.o, "disabled", !bounds.canNavigateNext || void 0, "b:c1a5cbee", setBooleanAttribute);
+	componentSlot(__s, 1, _b.l, Icon, {
+		"name": "xplat-chevron-left",
+		"size": 16
+	}, void 0, void 0, 2, void 0, void 0, "c:787d76d4");
+	_b.y = bindSignalChild(__s, _b.y, 2, _b.s, monthYearLabel, "b:2d60bdbc", null, void 0, void 0, void 0, true);
+	componentSlot(__s, 3, _b.o, Icon, {
+		"name": "xplat-chevron-right",
+		"size": 16
+	}, void 0, void 0, 2, void 0, void 0, "c:f5782ea8");
+	mapSlot(__s, 4, _b.q, (__mapMethod = months.map, months), __mapMethod, (grid) => createScopedElement("div", {
+		key: `${grid.year}-${grid.month}`,
+		className: "vx-calendar-month",
+		role: "grid",
+		"aria-label": monthLabel(grid.year, grid.month, locale)
+	}, () => positionalChildren([createScopedElement("div", {
+		className: "vx-calendar-weeknames",
+		role: "row"
+	}, () => positionalChildren([props.hasWeekNumbers ? createElement("span", { className: "vx-calendar-weeknumber vx-calendar-weeknumber--head" }) : null, grid.dayNames.map((name, i) => createScopedElement("span", {
+		key: i,
+		className: "vx-calendar-weekname",
+		role: "columnheader"
+	}, () => name))])), grid.weeks.map((week, w) => createScopedElement("div", {
+		key: w,
+		className: "vx-calendar-week",
+		role: "row"
+	}, () => positionalChildren([props.hasWeekNumbers ? createScopedElement("span", {
+		className: "vx-calendar-weeknumber",
+		role: "rowheader"
+	}, () => plainDateGetWeekNumber(week[0].date)) : null, week.map((day) => renderDay(grid, day))])))])), _key$3, __item$4, 26, [
+		locale,
+		props,
+		renderDay
+	], _b.r, 1);
+	_b.z = bindSignalChild(__s, _b.z, 5, _b.v, announcement, "b:dd954d76", null, void 0, void 0, void 0, true);
+}, (__wp) => {
+	warmChild(Icon, {
+		name: "xplat-chevron-left",
+		size: 16
+	});
+	warmChild(Icon, {
+		name: "xplat-chevron-right",
+		size: 16
+	});
+}));
+//#endregion
+export { Calendar };

package/dist/web/Card.web.tsrx.js

@@ -1,6 +1,6 @@
 import { applyEscapeProps } from "./escape-props.web.js";
-import { __s, bag10, bag3, child, clone, ifBlock, queueRefAttach, queueRefDetach, setStyle, sibling, template } from "octane";
-import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+import { __s, bag15, bag3, child, clone, ifBlock, queueRefAttach, queueRefDetach, setStyle, setStyleProperty, sibling, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, canSplitStyleProperties, enableSignalBindings, replaceRef, setPlainAttribute, styleObjectPrototype, updateFreshClassName } from "octane/internal/client";
 //#region src/Card.web.tsrx
 enableSignalBindings(1, true);
 var _t$0 = /* @__PURE__ */ template("<div class=\"vx-card-header\"></div>");
@@ -15,7 +15,7 @@ function __then$0(__props, __s, __extra) {
 		_m0 = _root;
 		_b = bag3(__s, _root, _m0, null, void 0);
 	}
-	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.header, "b:dc519a69", null, void 0, void 0, void 0, true);
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.header, "b:fd43f338", null, void 0, void 0, void 0, true);
 }
 function __then$4(__props, __s, __extra) {
 	const props = __extra[0];
@@ -26,7 +26,7 @@ function __then$4(__props, __s, __extra) {
 		_m0 = _root;
 		_b = bag3(__s, _root, _m0, null, void 0);
 	}
-	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.footer, "b:b6594fd8", null, void 0, void 0, void 0, true);
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.footer, "b:0bac15e9", null, void 0, void 0, void 0, true);
 }
 var _rm$7 = [
 	"r",
@@ -36,37 +36,72 @@ var _rm$7 = [
 var Card = /* @__PURE__ */ __s(function Card(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1, _m5, _m6, _m7;
+		let _m0, _m1, _m10, _m11, _m12;
 		const _root = clone(_t$2);
 		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
 		const _el0 = child(_root);
-		_m5 = _el0;
-		_m6 = sibling(_el0, 2);
-		_m7 = sibling(_el0, 1);
-		_b = bag10(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, _m6, _m7, null, void 0);
+		_m10 = _el0;
+		_m11 = sibling(_el0, 2);
+		_m12 = sibling(_el0, 1);
+		_b = bag15(__s, _root, _m0, _m1, void 0, void 0, __s, void 0, void 0, void 0, void 0, void 0, _m10, _m11, _m12, null, void 0);
 		__s.refFields = _rm$7;
 	} else {
 		const _r = (e) => applyEscapeProps(e, props);
 		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 	}
 	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:f4037cad", setPlainAttribute);
-	_b.d = updateFreshClassName(["vx-card", props.className], _b.d, _b.a);
+	_b.d = updateFreshClassName([
+		"vx-card",
+		props.variant && `vx-card--${props.variant}`,
+		props.elevation && `vx-card--elev-${props.elevation}`,
+		props.className
+	], _b.d, _b.a);
 	{
-		const _v = props.style;
-		if (_b.e !== _v) {
-			setStyle(_b.a, _v, _b.e);
-			_b.e = _v;
+		const __styleSpread = { ...props.style };
+		const __styleValue = props.padding == null ? void 0 : props.padding * 4;
+		const __styleValue$ = props.width;
+		const __styleValue$2 = props.height;
+		const __styleValue$3 = props.maxWidth;
+		const __styleFull = "padding" in __styleSpread || "width" in __styleSpread || "height" in __styleSpread || "maxWidth" in __styleSpread || !canSplitStyleProperties();
+		if (_b.e === __s || __styleFull || _b.f) {
+			const __styleObject = __styleFull && !("padding" in styleObjectPrototype || "width" in styleObjectPrototype || "height" in styleObjectPrototype || "maxWidth" in styleObjectPrototype) ? (__styleSpread["padding"] = __styleValue, __styleSpread["width"] = __styleValue$, __styleSpread["height"] = __styleValue$2, __styleSpread["maxWidth"] = __styleValue$3, __styleSpread) : {
+				...__styleSpread,
+				"padding": __styleValue,
+				"width": __styleValue$,
+				"height": __styleValue$2,
+				"maxWidth": __styleValue$3
+			};
+			setStyle(_b.a, __styleObject, _b.e === __s ? void 0 : _b.f ? _b.e : {
+				..._b.e,
+				"padding": _b.g,
+				"width": _b.h,
+				"height": _b.i,
+				"maxWidth": _b.j
+			});
+			_b.e = __styleFull ? __styleObject : __styleSpread;
+		} else {
+			setStyle(_b.a, __styleSpread, _b.e);
+			if (_b.g !== __styleValue) setStyleProperty(_b.a, "padding", __styleValue, "", _b.g);
+			if (_b.h !== __styleValue$) setStyleProperty(_b.a, "width", __styleValue$, "", _b.h);
+			if (_b.i !== __styleValue$2) setStyleProperty(_b.a, "height", __styleValue$2, "", _b.i);
+			if (_b.j !== __styleValue$3) setStyleProperty(_b.a, "maxWidth", __styleValue$3, "", _b.j);
+			_b.e = __styleSpread;
 		}
+		_b.f = __styleFull;
+		_b.g = __styleValue;
+		_b.h = __styleValue$;
+		_b.i = __styleValue$2;
+		_b.j = __styleValue$3;
 	}
 	{
 		const __ifCondition = props.header != null;
-		ifBlock(__s, 1, _b.a, __ifCondition, __then$0, null, _b.f, __ifCondition ? [props] : void 0);
+		ifBlock(__s, 1, _b.a, __ifCondition, __then$0, null, _b.k, __ifCondition ? [props] : void 0);
 	}
-	_b.k = bindSignalChild(__s, _b.k, 2, _b.h, props.children, "b:cd506c3e", null, void 0, void 0, void 0, true);
+	_b.p = bindSignalChild(__s, _b.p, 2, _b.m, props.children, "b:a04a94bf", null, void 0, void 0, void 0, true);
 	{
 		const __ifCondition$ = props.footer != null;
-		ifBlock(__s, 3, _b.a, __ifCondition$, __then$4, null, _b.g, __ifCondition$ ? [props] : void 0);
+		ifBlock(__s, 3, _b.a, __ifCondition$, __then$4, null, _b.l, __ifCondition$ ? [props] : void 0);
 	}
 });
 //#endregion