@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/RangeCalendar.js

@@ -1,18 +1,40 @@
-import { dataAttr, useIsHydrated, useRenderProps } from "./utils.js";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Calendar.tsx
+import { coerceDomRecord, dataAttr, useRenderProps } from "./utils.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
-import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
-import { For, Index, Show, createContext, createMemo, createSignal, splitProps, useContext } from "solid-js";
-import { createCalendarGrid, createHover, createRangeCalendar, createRangeCalendarCell } from "@proyecto-viviana/solidaria";
+import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, mergeProps, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, style, template } from "@solidjs/web";
+import { For, Show, createContext, createMemo, createSignal, useContext } from "solid-js";
+import { createCalendarGrid, createHover, createRangeCalendar, createRangeCalendarCell, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createRangeCalendarState, endOfMonth, isSameMonth } from "@proyecto-viviana/solid-stately";
 //#region src/RangeCalendar.tsx
 /**
 * RangeCalendar component for solidaria-components
 *
 * Pre-wired headless range calendar component that combines aria hooks.
-* Port of react-aria-components/src/RangeCalendar.tsx
+* Solid adaptation of the pinned RangeCalendar implementation.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div class="solidaria-RangeCalendar solidaria-RangeCalendar--placeholder"aria-hidden=true>`), _tmpl$2 = /*#__PURE__*/ template(`<h2>`), _tmpl$3 = /*#__PURE__*/ template(`<button tabindex=-1>`), _tmpl$4 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /*#__PURE__*/ template(`<h2 aria-live=polite>`), _tmpl$6 = /*#__PURE__*/ template(`<button>`), _tmpl$7 = /*#__PURE__*/ template(`<table><thead><tr></tr></thead><tbody>`), _tmpl$8 = /*#__PURE__*/ template(`<th scope=col>`), _tmpl$9 = /*#__PURE__*/ template(`<tr>`), _tmpl$0 = /*#__PURE__*/ template(`<td>`), _tmpl$1 = /*#__PURE__*/ template(`<td><div>`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<h2>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button tabindex=-1>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<h2 aria-live=polite>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<table><thead><tr></tr></thead><tbody>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<th scope=col>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<tr>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<td>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<td><div>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -45,24 +67,13 @@ function useRangeCalendarContext() {
 */
 function RangeCalendar(props) {
 	const inheritedState = useContext(RangeCalendarContext);
-	const isHydrated = useIsHydrated();
 	return createComponent(Show, {
-		get when() {
-			return isHydrated();
-		},
+		when: inheritedState,
 		get fallback() {
-			return getNextElement(_tmpl$);
+			return createComponent(RangeCalendarInner, props);
 		},
 		get children() {
-			return createComponent(Show, {
-				when: inheritedState,
-				get fallback() {
-					return createComponent(RangeCalendarInner, props);
-				},
-				get children() {
-					return createComponent(RangeCalendarWithState, mergeProps({ state: inheritedState }, props));
-				}
-			});
+			return createComponent(RangeCalendarWithState, mergeProps({ state: inheritedState }, props));
 		}
 	});
 }
@@ -102,7 +113,8 @@ function RangeCalendarWithState(props) {
 		"firstDayOfWeek"
 	]);
 	const state = () => props.state;
-	const calendarAria = createRangeCalendar(rest, state());
+	const [calendarEl, setCalendarEl] = createSignal(null);
+	const calendarAria = createRangeCalendar(rest, state(), calendarEl);
 	const renderValues = createMemo(() => ({
 		isDisabled: state().isDisabled(),
 		isReadOnly: state().isReadOnly(),
@@ -114,61 +126,78 @@ function RangeCalendarWithState(props) {
 		style: local.style,
 		defaultClassName: "solidaria-RangeCalendar"
 	}, renderValues);
-	return createComponent(RangeCalendarStateContext.Provider, {
+	return createComponent(RangeCalendarStateContext, {
 		get value() {
 			return state();
 		},
 		get children() {
-			return createComponent(RangeCalendarContext.Provider, {
+			return createComponent(RangeCalendarContext, {
 				get value() {
 					return state();
 				},
 				get children() {
-					var _el$2 = getNextElement(_tmpl$4), _el$5 = _el$2.firstChild, [_el$6, _co$] = getNextMarker(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$2] = getNextMarker(_el$7.nextSibling), _el$9 = _el$8.nextSibling, [_el$0, _co$3] = getNextMarker(_el$9.nextSibling);
-					use((el) => assignRef(local.ref, el), _el$2);
-					spread(_el$2, mergeProps(() => calendarAria.calendarProps, {
-						get ["class"]() {
+					var _el$ = getNextElement(_tmpl$3);
+					var _el$3 = _el$.firstChild;
+					var [_el$4, _el$5] = getNextMarker(_el$3.nextSibling);
+					var _el$6 = _el$4.nextSibling;
+					var [_el$7, _el$8] = getNextMarker(_el$6.nextSibling);
+					var _el$10 = _el$7.nextSibling;
+					var [_el$11, _el$12] = getNextMarker(_el$10.nextSibling);
+					ref(() => {
+						return (el) => {
+							setCalendarEl(el ?? null);
+							assignRef$1(local.ref, el);
+						};
+					}, _el$);
+					spread(_el$, [() => {
+						return calendarAria.calendarProps;
+					}, {
+						get "class"() {
 							return renderProps.class();
 						},
 						get style() {
 							return renderProps.style();
 						},
-						get ["data-disabled"]() {
+						get "data-disabled"() {
 							return dataAttr(state().isDisabled());
 						},
-						get ["data-readonly"]() {
+						get "data-readonly"() {
 							return dataAttr(state().isReadOnly());
 						},
-						get ["data-invalid"]() {
+						get "data-invalid"() {
 							return dataAttr(state().isValueInvalid());
 						},
-						get ["data-dragging"]() {
+						get "data-dragging"() {
 							return dataAttr(state().isDragging());
 						}
-					}), false, true);
-					insert(_el$2, createComponent(VisuallyHidden, { get children() {
-						var _el$3 = getNextElement(_tmpl$2);
-						insert(_el$3, () => String(calendarAria.calendarProps["aria-label"] ?? ""));
-						return _el$3;
-					} }), _el$6, _co$);
-					insert(_el$2, () => props.children, _el$8, _co$2);
-					insert(_el$2, createComponent(VisuallyHidden, { get children() {
-						var _el$4 = getNextElement(_tmpl$3);
-						_el$4.$$click = () => state().focusNextPage();
-						effect((_p$) => {
-							var _v$ = String(calendarAria.nextButtonProps["aria-label"] ?? ""), _v$2 = Boolean(calendarAria.nextButtonProps.disabled);
-							_v$ !== _p$.e && setAttribute(_el$4, "aria-label", _p$.e = _v$);
-							_v$2 !== _p$.t && setProperty(_el$4, "disabled", _p$.t = _v$2);
-							return _p$;
-						}, {
-							e: void 0,
-							t: void 0
+					}], true);
+					insert(_el$, createComponent(VisuallyHidden, { get children() {
+						var _el$2 = getNextElement(_tmpl$);
+						insert(_el$2, scope(() => {
+							return String(calendarAria.calendarProps["aria-label"] ?? "");
+						}));
+						return _el$2;
+					} }), _el$4, _el$5);
+					insert(_el$, scope(() => {
+						return props.children;
+					}), _el$7, _el$8);
+					insert(_el$, createComponent(VisuallyHidden, { get children() {
+						var _el$9 = getNextElement(_tmpl$2);
+						_el$9._$$click = () => state().focusNextPage();
+						effect(() => {
+							return {
+								e: String(calendarAria.nextButtonProps["aria-label"] ?? ""),
+								t: Boolean(calendarAria.nextButtonProps.disabled)
+							};
+						}, ({ e, t }, _p$) => {
+							e !== _p$?.e && setAttribute(_el$9, "aria-label", e);
+							t !== _p$?.t && setAttribute(_el$9, "disabled", t);
 						});
 						runHydrationEvents();
-						return _el$4;
-					} }), _el$0, _co$3);
+						return _el$9;
+					} }), _el$11, _el$12);
 					runHydrationEvents();
-					return _el$2;
+					return _el$;
 				}
 			});
 		}
@@ -207,7 +236,8 @@ function RangeCalendarInner(props) {
 		"firstDayOfWeek"
 	]);
 	const state = createRangeCalendarState(stateProps);
-	const calendarAria = createRangeCalendar(rest, state);
+	const [calendarEl, setCalendarEl] = createSignal(null);
+	const calendarAria = createRangeCalendar(rest, state, calendarEl);
 	const renderValues = createMemo(() => ({
 		isDisabled: state.isDisabled(),
 		isReadOnly: state.isReadOnly(),
@@ -219,57 +249,74 @@ function RangeCalendarInner(props) {
 		style: local.style,
 		defaultClassName: "solidaria-RangeCalendar"
 	}, renderValues);
-	return createComponent(RangeCalendarStateContext.Provider, {
+	return createComponent(RangeCalendarStateContext, {
 		value: state,
 		get children() {
-			return createComponent(RangeCalendarContext.Provider, {
+			return createComponent(RangeCalendarContext, {
 				value: state,
 				get children() {
-					var _el$1 = getNextElement(_tmpl$4), _el$12 = _el$1.firstChild, [_el$13, _co$4] = getNextMarker(_el$12.nextSibling), _el$14 = _el$13.nextSibling, [_el$15, _co$5] = getNextMarker(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$6] = getNextMarker(_el$16.nextSibling);
-					use((el) => assignRef(local.ref, el), _el$1);
-					spread(_el$1, mergeProps(() => calendarAria.calendarProps, {
-						get ["class"]() {
+					var _el$13 = getNextElement(_tmpl$3);
+					var _el$15 = _el$13.firstChild;
+					var [_el$16, _el$17] = getNextMarker(_el$15.nextSibling);
+					var _el$18 = _el$16.nextSibling;
+					var [_el$19, _el$20] = getNextMarker(_el$18.nextSibling);
+					var _el$22 = _el$19.nextSibling;
+					var [_el$23, _el$24] = getNextMarker(_el$22.nextSibling);
+					ref(() => {
+						return (el) => {
+							setCalendarEl(el ?? null);
+							assignRef$1(local.ref, el);
+						};
+					}, _el$13);
+					spread(_el$13, [() => {
+						return calendarAria.calendarProps;
+					}, {
+						get "class"() {
 							return renderProps.class();
 						},
 						get style() {
 							return renderProps.style();
 						},
-						get ["data-disabled"]() {
+						get "data-disabled"() {
 							return dataAttr(state.isDisabled());
 						},
-						get ["data-readonly"]() {
+						get "data-readonly"() {
 							return dataAttr(state.isReadOnly());
 						},
-						get ["data-invalid"]() {
+						get "data-invalid"() {
 							return dataAttr(state.isValueInvalid());
 						},
-						get ["data-dragging"]() {
+						get "data-dragging"() {
 							return dataAttr(state.isDragging());
 						}
-					}), false, true);
-					insert(_el$1, createComponent(VisuallyHidden, { get children() {
-						var _el$10 = getNextElement(_tmpl$2);
-						insert(_el$10, () => String(calendarAria.calendarProps["aria-label"] ?? ""));
-						return _el$10;
-					} }), _el$13, _co$4);
-					insert(_el$1, () => props.children, _el$15, _co$5);
-					insert(_el$1, createComponent(VisuallyHidden, { get children() {
-						var _el$11 = getNextElement(_tmpl$3);
-						_el$11.$$click = () => state.focusNextPage();
-						effect((_p$) => {
-							var _v$3 = String(calendarAria.nextButtonProps["aria-label"] ?? ""), _v$4 = Boolean(calendarAria.nextButtonProps.disabled);
-							_v$3 !== _p$.e && setAttribute(_el$11, "aria-label", _p$.e = _v$3);
-							_v$4 !== _p$.t && setProperty(_el$11, "disabled", _p$.t = _v$4);
-							return _p$;
-						}, {
-							e: void 0,
-							t: void 0
+					}], true);
+					insert(_el$13, createComponent(VisuallyHidden, { get children() {
+						var _el$14 = getNextElement(_tmpl$);
+						insert(_el$14, scope(() => {
+							return String(calendarAria.calendarProps["aria-label"] ?? "");
+						}));
+						return _el$14;
+					} }), _el$16, _el$17);
+					insert(_el$13, scope(() => {
+						return props.children;
+					}), _el$19, _el$20);
+					insert(_el$13, createComponent(VisuallyHidden, { get children() {
+						var _el$21 = getNextElement(_tmpl$2);
+						_el$21._$$click = () => state.focusNextPage();
+						effect(() => {
+							return {
+								e: String(calendarAria.nextButtonProps["aria-label"] ?? ""),
+								t: Boolean(calendarAria.nextButtonProps.disabled)
+							};
+						}, ({ e, t }, _p$) => {
+							e !== _p$?.e && setAttribute(_el$21, "aria-label", e);
+							t !== _p$?.t && setAttribute(_el$21, "disabled", t);
 						});
 						runHydrationEvents();
-						return _el$11;
-					} }), _el$17, _co$6);
+						return _el$21;
+					} }), _el$23, _el$24);
 					runHydrationEvents();
-					return _el$1;
+					return _el$13;
 				}
 			});
 		}
@@ -280,20 +327,20 @@ function RangeCalendarInner(props) {
 */
 function RangeCalendarHeading(props) {
 	const state = useRangeCalendarContext();
-	return (() => {
-		var _el$18 = getNextElement(_tmpl$5);
-		insert(_el$18, () => state.title());
-		effect((_p$) => {
-			var _v$5 = props.class ?? "solidaria-RangeCalendarHeading", _v$6 = props.style;
-			_v$5 !== _p$.e && className(_el$18, _p$.e = _v$5);
-			_p$.t = style(_el$18, _v$6, _p$.t);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		});
-		return _el$18;
-	})();
+	var _el$25 = getNextElement(_tmpl$4);
+	insert(_el$25, scope(() => {
+		return state.title();
+	}));
+	effect(() => {
+		return {
+			e: readShallow(props.class ?? "solidaria-RangeCalendarHeading"),
+			t: readShallow(props.style)
+		};
+	}, ({ e, t }, _p$) => {
+		className(_el$25, e, _p$?.e);
+		style(_el$25, t, _p$?.t);
+	});
+	return _el$25;
 }
 /**
 * A button for navigating the range calendar.
@@ -306,26 +353,26 @@ function RangeCalendarButton(props) {
 		return calendarAria.nextButtonProps;
 	});
 	const isDisabled = createMemo(() => props.isDisabled || Boolean(buttonProps().disabled) || state.isDisabled());
-	return (() => {
-		var _el$19 = getNextElement(_tmpl$6);
-		spread(_el$19, mergeProps(buttonProps, {
-			get ["class"]() {
-				return props.class ?? "solidaria-RangeCalendarButton";
-			},
-			get style() {
-				return props.style;
-			},
-			get disabled() {
-				return isDisabled();
-			},
-			get tabindex() {
-				return isDisabled() ? void 0 : 0;
-			}
-		}), false, true);
-		insert(_el$19, () => props.children);
-		runHydrationEvents();
-		return _el$19;
-	})();
+	var _el$26 = getNextElement(_tmpl$5);
+	spread(_el$26, [buttonProps, {
+		get "class"() {
+			return props.class ?? "solidaria-RangeCalendarButton";
+		},
+		get style() {
+			return props.style;
+		},
+		get disabled() {
+			return isDisabled();
+		},
+		get tabindex() {
+			return isDisabled() ? void 0 : 0;
+		}
+	}], true);
+	insert(_el$26, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$26;
 }
 /**
 * Displays a grid of range calendar cells.
@@ -356,58 +403,69 @@ function RangeCalendarGrid(props) {
 		for (let weekIndex = 0; weekIndex < numWeeks; weekIndex++) weekDates.push(state.getDatesInWeek(weekIndex, monthStart));
 		return weekDates;
 	});
-	return createComponent(RangeCalendarGridMonthContext.Provider, {
+	return createComponent(RangeCalendarGridMonthContext, {
 		value: startDate,
 		get children() {
-			var _el$20 = getNextElement(_tmpl$7), _el$21 = _el$20.firstChild, _el$22 = _el$21.firstChild, _el$23 = _el$21.nextSibling;
-			use(setGridRef, _el$20);
-			spread(_el$20, mergeProps(() => gridAria.gridProps, {
-				get ["class"]() {
+			var _el$27 = getNextElement(_tmpl$6);
+			var _el$28 = _el$27.firstChild;
+			var _el$29 = _el$28.firstChild;
+			var _el$30 = _el$28.nextSibling;
+			ref(() => {
+				return setGridRef;
+			}, _el$27);
+			spread(_el$27, [() => {
+				return coerceDomRecord(gridAria.gridProps);
+			}, {
+				get "class"() {
 					return renderProps.class();
 				},
 				get style() {
 					return renderProps.style();
 				}
-			}), false, true);
-			spread(_el$21, mergeProps(() => gridAria.headerProps), false, true);
-			insert(_el$22, createComponent(For, {
+			}], true);
+			spread(_el$28, () => {
+				return coerceDomRecord(gridAria.headerProps);
+			}, true);
+			insert(_el$29, createComponent(For, {
 				get each() {
 					return gridAria.weekDays;
 				},
 				children: (day) => (() => {
-					var _el$24 = getNextElement(_tmpl$8);
-					insert(_el$24, day);
-					effect((_p$) => {
-						var _v$7 = props.headerCellClass ?? "solidaria-RangeCalendarHeaderCell", _v$8 = props.headerCellStyle;
-						_v$7 !== _p$.e && className(_el$24, _p$.e = _v$7);
-						_p$.t = style(_el$24, _v$8, _p$.t);
-						return _p$;
-					}, {
-						e: void 0,
-						t: void 0
+					var _el$31 = getNextElement(_tmpl$7);
+					insert(_el$31, day);
+					effect(() => {
+						return {
+							e: readShallow(props.headerCellClass ?? "solidaria-RangeCalendarHeaderCell"),
+							t: readShallow(props.headerCellStyle)
+						};
+					}, ({ e, t }, _p$) => {
+						className(_el$31, e, _p$?.e);
+						style(_el$31, t, _p$?.t);
 					});
-					return _el$24;
+					return _el$31;
 				})()
 			}));
-			insert(_el$23, createComponent(Index, {
+			insert(_el$30, createComponent(For, {
 				get each() {
 					return allDates();
 				},
+				keyed: false,
 				children: (weekDates, weekIndex) => (() => {
-					var _el$25 = getNextElement(_tmpl$9);
-					insert(_el$25, createComponent(Index, {
+					var _el$32 = getNextElement(_tmpl$8);
+					insert(_el$32, createComponent(For, {
 						get each() {
 							return weekDates();
 						},
+						keyed: false,
 						children: (date, dayIndex) => createComponent(Show, {
 							get when() {
 								return date();
 							},
 							get fallback() {
-								return getNextElement(_tmpl$0);
+								return getNextElement(_tmpl$9);
 							},
 							get children() {
-								return createComponent(RangeCalendarGridCellPositionContext.Provider, {
+								return createComponent(RangeCalendarGridCellPositionContext, {
 									value: () => ({
 										weekIndex,
 										dayIndex,
@@ -420,11 +478,11 @@ function RangeCalendarGrid(props) {
 							}
 						})
 					}));
-					return _el$25;
+					return _el$32;
 				})()
 			}));
 			runHydrationEvents();
-			return _el$20;
+			return _el$27;
 		}
 	});
 }
@@ -452,6 +510,7 @@ function RangeCalendarCell(props) {
 		isSelectionStart: cellAria.isSelectionStart,
 		isSelectionEnd: cellAria.isSelectionEnd,
 		isFocused: cellAria.isFocused,
+		isFocusVisible: cellAria.isFocusVisible,
 		isDisabled: cellAria.isDisabled,
 		isUnavailable: cellAria.isUnavailable,
 		isInvalid: cellAria.isInvalid,
@@ -479,65 +538,75 @@ function RangeCalendarCell(props) {
 		defaultClassName: "solidaria-RangeCalendarCellWrapper"
 	}, renderValues);
 	const getChildren = () => {
-		if (typeof props.children === "function") return renderProps.renderChildren();
+		if (typeof props.children === "function") return renderProps.renderChildrenStable();
 		return cellAria.formattedDate;
 	};
-	return (() => {
-		var _el$27 = getNextElement(_tmpl$1), _el$28 = _el$27.firstChild;
-		spread(_el$27, mergeProps(() => cellAria.cellProps, {
-			get ["class"]() {
-				return cellRenderProps.class();
-			},
-			get style() {
-				return cellRenderProps.style();
-			}
-		}), false, true);
-		use(setCellRef, _el$28);
-		spread(_el$28, mergeProps(() => cellAria.buttonProps, hoverProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get ["data-selected"]() {
-				return dataAttr(cellAria.isSelected);
-			},
-			get ["data-selection-start"]() {
-				return dataAttr(cellAria.isSelectionStart);
-			},
-			get ["data-selection-end"]() {
-				return dataAttr(cellAria.isSelectionEnd);
-			},
-			get ["data-focused"]() {
-				return dataAttr(cellAria.isFocused);
-			},
-			get ["data-disabled"]() {
-				return dataAttr(cellAria.isDisabled);
-			},
-			get ["data-unavailable"]() {
-				return dataAttr(cellAria.isUnavailable);
-			},
-			get ["data-invalid"]() {
-				return dataAttr(cellAria.isInvalid);
-			},
-			get ["data-outside-month"]() {
-				return dataAttr(cellAria.isOutsideMonth);
-			},
-			get ["data-today"]() {
-				return dataAttr(cellAria.isToday);
-			},
-			get ["data-pressed"]() {
-				return dataAttr(cellAria.isPressed);
-			},
-			get ["data-hovered"]() {
-				return dataAttr(isHovered());
-			}
-		}), false, true);
-		insert(_el$28, getChildren);
-		runHydrationEvents();
-		return _el$27;
-	})();
+	var _el$34 = getNextElement(_tmpl$10);
+	var _el$35 = _el$34.firstChild;
+	spread(_el$34, [() => {
+		return coerceDomRecord(cellAria.cellProps);
+	}, {
+		get "class"() {
+			return cellRenderProps.class();
+		},
+		get style() {
+			return cellRenderProps.style();
+		}
+	}], true);
+	ref(() => {
+		return setCellRef;
+	}, _el$35);
+	spread(_el$35, [() => {
+		return mergeProps$1(cellAria.buttonProps, hoverProps);
+	}, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get "data-selected"() {
+			return dataAttr(cellAria.isSelected);
+		},
+		get "data-selection-start"() {
+			return dataAttr(cellAria.isSelectionStart);
+		},
+		get "data-selection-end"() {
+			return dataAttr(cellAria.isSelectionEnd);
+		},
+		get "data-focused"() {
+			return dataAttr(cellAria.isFocused);
+		},
+		get "data-focus-visible"() {
+			return dataAttr(cellAria.isFocusVisible);
+		},
+		get "data-disabled"() {
+			return dataAttr(cellAria.isDisabled);
+		},
+		get "data-unavailable"() {
+			return dataAttr(cellAria.isUnavailable);
+		},
+		get "data-invalid"() {
+			return dataAttr(cellAria.isInvalid);
+		},
+		get "data-outside-month"() {
+			return dataAttr(cellAria.isOutsideMonth);
+		},
+		get "data-today"() {
+			return dataAttr(cellAria.isToday);
+		},
+		get "data-pressed"() {
+			return dataAttr(cellAria.isPressed);
+		},
+		get "data-hovered"() {
+			return dataAttr(isHovered());
+		}
+	}], true);
+	insert(_el$35, scope(() => {
+		return getChildren();
+	}));
+	runHydrationEvents();
+	return _el$34;
 }
 delegateEvents(["click"]);
 //#endregion