@pathscale/ui 2.5.0 → 2.6.0

package/dist/components/calendar/Calendar.generated.js

@@ -1,54 +1,32 @@
-import { createComponent, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Calendar.css";
-import { For, Show, createEffect, createMemo, createUniqueId, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { For, Show, createEffect, createMemo, createUniqueId, omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { DAYS_PER_WEEK, addDays, compareDates, getToday, normalizeDate, parseDate, shiftDateByMonths, toISODate, useCalendarNavigation, useCalendarState, useDateSelection } from "../../hooks/date/index.js";
 import { CLASSES, componentRecipe } from "./Calendar.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template('<div><div><div><button type=button><svg><path d="m15 18-6-6 6-6"></path></svg></button></div><div></div><div><button type=button><svg><path d="m9 18 6-6-6-6"></path></svg></button></div></div><div><div><div></div></div><div>'), _tmpl$2 = /*#__PURE__*/ template("<span>"), _tmpl$3 = /*#__PURE__*/ template("<div>"), _tmpl$4 = /*#__PURE__*/ template("<button type=button><span>");
+var _tmpl$ = /*#__PURE__*/ template('<div><div><div><button><svg><path d="m15 18-6-6 6-6"></path></svg></button></div><div></div><div><button><svg><path d="m9 18 6-6-6-6"></path></svg></button></div></div><div><div><div></div></div><div>'), _tmpl$2 = /*#__PURE__*/ template("<span>"), _tmpl$3 = /*#__PURE__*/ template("<div>"), _tmpl$4 = /*#__PURE__*/ template("<button><span>");
 const __solidLayoutCalendar = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "dataTheme",
-        "style",
-        "ref",
-        "selectionMode",
-        "value",
-        "defaultValue",
-        "onChange",
-        "rangeStart",
-        "rangeEnd",
-        "rangePreview",
-        "onDaySelect",
-        "onDayHover",
-        "minValue",
-        "maxValue",
-        "isDateUnavailable",
-        "locale",
-        "weekdayFormat",
-        "showOutsideDays",
-        "state",
-        "disabled"
-    ]);
-    const selectionMode = createMemo(()=>local.selectionMode ?? "single");
+    const others = omit(p, "class", "dataTheme", "style", "ref", "selectionMode", "value", "defaultValue", "onChange", "rangeStart", "rangeEnd", "rangePreview", "onDaySelect", "onDayHover", "minValue", "maxValue", "isDateUnavailable", "locale", "weekdayFormat", "showOutsideDays", "state", "disabled");
+    const selectionMode = createMemo(()=>p.selectionMode ?? "single");
     const dateSelection = useDateSelection({
-        value: ()=>local.value,
-        defaultValue: ()=>local.defaultValue,
-        onChange: ()=>local.onChange
+        value: ()=>p.value,
+        defaultValue: ()=>p.defaultValue,
+        onChange: ()=>p.onChange
     });
     const selectedDate = createMemo(()=>"single" === selectionMode() ? dateSelection.selectedDate() : null);
-    const rangeStart = createMemo(()=>normalizeDate(local.rangeStart));
-    const rangeEnd = createMemo(()=>normalizeDate(local.rangeEnd));
-    const rangePreview = createMemo(()=>normalizeDate(local.rangePreview));
-    const defaultReferenceDate = createMemo(()=>normalizeDate(local.defaultValue) ?? getToday());
-    const focusReferenceDate = createMemo(()=>selectedDate() ?? rangeEnd() ?? rangeStart() ?? normalizeDate(local.value) ?? defaultReferenceDate());
-    const minDate = createMemo(()=>normalizeDate(local.minValue));
-    const maxDate = createMemo(()=>normalizeDate(local.maxValue));
-    const locale = createMemo(()=>local.locale ?? "en-US");
-    const weekdayFormat = createMemo(()=>local.weekdayFormat ?? "short");
-    const showOutsideDays = createMemo(()=>local.showOutsideDays ?? true);
-    const isCalendarDisabled = createMemo(()=>Boolean("disabled" === local.state) || Boolean(local.disabled));
-    const isDateUnavailable = (date)=>Boolean(local.isDateUnavailable?.(date));
+    const rangeStart = createMemo(()=>normalizeDate(p.rangeStart));
+    const rangeEnd = createMemo(()=>normalizeDate(p.rangeEnd));
+    const rangePreview = createMemo(()=>normalizeDate(p.rangePreview));
+    const defaultReferenceDate = createMemo(()=>normalizeDate(p.defaultValue) ?? getToday());
+    const focusReferenceDate = createMemo(()=>selectedDate() ?? rangeEnd() ?? rangeStart() ?? normalizeDate(p.value) ?? defaultReferenceDate());
+    const minDate = createMemo(()=>normalizeDate(p.minValue));
+    const maxDate = createMemo(()=>normalizeDate(p.maxValue));
+    const locale = createMemo(()=>p.locale ?? "en-US");
+    const weekdayFormat = createMemo(()=>p.weekdayFormat ?? "short");
+    const showOutsideDays = createMemo(()=>p.showOutsideDays ?? true);
+    const isCalendarDisabled = createMemo(()=>Boolean("disabled" === p.state) || Boolean(p.disabled));
+    const isDateUnavailable = (date)=>Boolean(p.isDateUnavailable?.(date));
     const isDateDisabled = (date)=>{
         if (isCalendarDisabled()) return true;
         const min = minDate();
@@ -89,7 +67,7 @@ const __solidLayoutCalendar = (_stable, p)=>{
     };
     const selectDate = (date)=>{
         if (isDateDisabled(date)) return;
-        if ("function" == typeof local.onDaySelect) local.onDaySelect(date);
+        if ("function" == typeof p.onDaySelect) p.onDaySelect(date);
         else if ("single" === selectionMode()) dateSelection.setSelectedDate(date);
         navigation.setFocusedDate(date);
         navigation.setVisibleMonthFromDate(date);
@@ -153,267 +131,268 @@ const __solidLayoutCalendar = (_stable, p)=>{
     };
     const uniqueId = createUniqueId();
     const headingId = `calendar-heading-${uniqueId}`;
-    return (()=>{
-        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$3.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$2.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$1.nextSibling;
-        use((node)=>{
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$3.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$2.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$1.nextSibling;
+    ref(()=>(node)=>{
             rootRef = node;
-            if ("function" == typeof local.ref) local.ref(node);
+            if ("function" == typeof p.ref) p.ref(node);
         }, _el$);
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Root.base, isCalendarDisabled() && CLASSES.Root.flag.disabled, local.class)
-            }), {
-            "data-slot": "calendar",
-            get ["data-selection-mode"] () {
-                return selectionMode();
-            },
-            get ["data-disabled"] () {
-                return isCalendarDisabled() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get ["aria-disabled"] () {
-                return isCalendarDisabled() ? "true" : void 0;
-            }
-        }), false, true);
-        spread(_el$2, mergeProps(()=>({
-                class: CLASSES.Header.base
-            }), {
-            "data-slot": "calendar-header"
-        }), false, true);
-        spread(_el$3, mergeProps(()=>({
-                class: CLASSES.Nav.base
-            }), {
-            "data-slot": "calendar-nav"
-        }), false, true);
-        spread(_el$4, mergeProps(()=>({
-                class: CLASSES.NavButton.base
-            }), {
-            "data-slot": "calendar-nav-button",
-            "aria-label": "Previous month",
-            onClick: ()=>navigateMonth(-1),
-            get disabled () {
-                return isCalendarDisabled() || !navigation.canNavigatePrevious();
-            },
-            get ["data-disabled"] () {
-                return isCalendarDisabled() || !navigation.canNavigatePrevious() ? "true" : void 0;
-            }
-        }), false, true);
-        spread(_el$5, mergeProps(()=>({
-                class: CLASSES.NavButtonIcon.base
-            }), {
-            "data-slot": "calendar-nav-button-icon",
-            viewBox: "0 0 24 24",
-            "aria-hidden": "true",
-            fill: "none",
-            stroke: "currentColor",
-            "stroke-width": "2",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
-        }), true, true);
-        setAttribute(_el$6, "id", headingId);
-        spread(_el$6, mergeProps(()=>({
-                class: CLASSES.Heading.base
-            }), {
-            "data-slot": "calendar-heading",
-            "aria-live": "polite"
-        }), false, true);
-        insert(_el$6, ()=>calendarState.monthFormatter().format(navigation.visibleMonth()));
-        spread(_el$7, mergeProps(()=>({
-                class: CLASSES.Nav.base
-            }), {
-            "data-slot": "calendar-nav"
-        }), false, true);
-        spread(_el$8, mergeProps(()=>({
-                class: CLASSES.NavButton.base
-            }), {
-            "data-slot": "calendar-nav-button",
-            "aria-label": "Next month",
-            onClick: ()=>navigateMonth(1),
-            get disabled () {
-                return isCalendarDisabled() || !navigation.canNavigateNext();
-            },
-            get ["data-disabled"] () {
-                return isCalendarDisabled() || !navigation.canNavigateNext() ? "true" : void 0;
-            }
-        }), false, true);
-        spread(_el$9, mergeProps(()=>({
-                class: CLASSES.NavButtonIcon.base
-            }), {
-            "data-slot": "calendar-nav-button-icon",
-            viewBox: "0 0 24 24",
-            "aria-hidden": "true",
-            fill: "none",
-            stroke: "currentColor",
-            "stroke-width": "2",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
-        }), true, true);
-        spread(_el$0, mergeProps(()=>({
-                class: CLASSES.Grid.base
-            }), {
-            "data-slot": "calendar-grid",
-            role: "grid",
-            "aria-labelledby": headingId,
-            get ["aria-readonly"] () {
-                return isCalendarDisabled() ? "true" : void 0;
-            }
-        }), false, true);
-        spread(_el$1, mergeProps(()=>({
-                class: CLASSES.GridHeader.base
-            }), {
-            "data-slot": "calendar-grid-header",
-            role: "rowgroup"
-        }), false, true);
-        spread(_el$10, mergeProps(()=>({
-                class: CLASSES.GridRow.base
-            }), {
-            "data-slot": "calendar-grid-row",
-            role: "row"
-        }), false, true);
-        insert(_el$10, createComponent(For, {
-            get each () {
-                return calendarState.weekdayLabels();
-            },
-            children: (label)=>(()=>{
-                    var _el$12 = _tmpl$2();
-                    spread(_el$12, mergeProps(()=>({
-                            class: CLASSES.HeaderCell.base
-                        }), {
-                        "data-slot": "calendar-header-cell",
-                        role: "columnheader"
-                    }), false, true);
-                    insert(_el$12, label);
-                    return _el$12;
-                })()
-        }));
-        spread(_el$11, mergeProps(()=>({
-                class: CLASSES.GridBody.base
-            }), {
-            "data-slot": "calendar-grid-body",
-            role: "rowgroup",
-            onMouseLeave: ()=>local.onDayHover?.(void 0)
-        }), false, true);
-        insert(_el$11, createComponent(For, {
-            get each () {
-                return calendarState.calendarWeeks();
-            },
-            children: (week)=>(()=>{
-                    var _el$13 = _tmpl$3();
-                    spread(_el$13, mergeProps(()=>({
-                            class: CLASSES.GridRow.base
-                        }), {
-                        "data-slot": "calendar-grid-row",
-                        role: "row"
-                    }), false, true);
-                    insert(_el$13, createComponent(For, {
-                        each: week,
-                        children: (date)=>{
-                            const cellState = calendarState.getCellState(date);
-                            const isoDate = toISODate(date);
-                            return (()=>{
-                                var _el$14 = _tmpl$3();
-                                spread(_el$14, mergeProps(()=>({
-                                        class: CLASSES.DayWrapper.base
+    spread(_el$, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Root.base, isCalendarDisabled() && CLASSES.Root.flag.disabled, p.class)
+        }), {
+        "data-slot": "calendar",
+        get ["data-selection-mode"] () {
+            return selectionMode();
+        },
+        get ["data-disabled"] () {
+            return isCalendarDisabled() ? "true" : "false";
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        get ["aria-disabled"] () {
+            return isCalendarDisabled() ? "true" : void 0;
+        }
+    }), true);
+    spread(_el$2, mergeProps(()=>({
+            class: CLASSES.Header.base
+        }), {
+        "data-slot": "calendar-header"
+    }), true);
+    spread(_el$3, mergeProps(()=>({
+            class: CLASSES.Nav.base
+        }), {
+        "data-slot": "calendar-nav"
+    }), true);
+    spread(_el$4, mergeProps({
+        type: "button"
+    }, ()=>({
+            class: CLASSES.NavButton.base
+        }), {
+        "data-slot": "calendar-nav-button",
+        "aria-label": "Previous month",
+        onClick: ()=>navigateMonth(-1),
+        get disabled () {
+            return isCalendarDisabled() || !navigation.canNavigatePrevious();
+        },
+        get ["data-disabled"] () {
+            return isCalendarDisabled() || !navigation.canNavigatePrevious() ? "true" : void 0;
+        }
+    }), true);
+    spread(_el$5, mergeProps(()=>({
+            class: CLASSES.NavButtonIcon.base
+        }), {
+        "data-slot": "calendar-nav-button-icon",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }), true);
+    spread(_el$6, mergeProps({
+        id: headingId
+    }, ()=>({
+            class: CLASSES.Heading.base
+        }), {
+        "data-slot": "calendar-heading",
+        "aria-live": "polite"
+    }), true);
+    insert(_el$6, ()=>calendarState.monthFormatter().format(navigation.visibleMonth()));
+    spread(_el$7, mergeProps(()=>({
+            class: CLASSES.Nav.base
+        }), {
+        "data-slot": "calendar-nav"
+    }), true);
+    spread(_el$8, mergeProps({
+        type: "button"
+    }, ()=>({
+            class: CLASSES.NavButton.base
+        }), {
+        "data-slot": "calendar-nav-button",
+        "aria-label": "Next month",
+        onClick: ()=>navigateMonth(1),
+        get disabled () {
+            return isCalendarDisabled() || !navigation.canNavigateNext();
+        },
+        get ["data-disabled"] () {
+            return isCalendarDisabled() || !navigation.canNavigateNext() ? "true" : void 0;
+        }
+    }), true);
+    spread(_el$9, mergeProps(()=>({
+            class: CLASSES.NavButtonIcon.base
+        }), {
+        "data-slot": "calendar-nav-button-icon",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }), true);
+    spread(_el$0, mergeProps(()=>({
+            class: CLASSES.Grid.base
+        }), {
+        "data-slot": "calendar-grid",
+        role: "grid",
+        "aria-labelledby": headingId,
+        get ["aria-readonly"] () {
+            return isCalendarDisabled() ? "true" : void 0;
+        }
+    }), true);
+    spread(_el$1, mergeProps(()=>({
+            class: CLASSES.GridHeader.base
+        }), {
+        "data-slot": "calendar-grid-header",
+        role: "rowgroup"
+    }), true);
+    spread(_el$10, mergeProps(()=>({
+            class: CLASSES.GridRow.base
+        }), {
+        "data-slot": "calendar-grid-row",
+        role: "row"
+    }), true);
+    insert(_el$10, createComponent(For, {
+        get each () {
+            return calendarState.weekdayLabels();
+        },
+        children: (label)=>(()=>{
+                var _el$12 = _tmpl$2();
+                spread(_el$12, mergeProps(()=>({
+                        class: CLASSES.HeaderCell.base
+                    }), {
+                    "data-slot": "calendar-header-cell",
+                    role: "columnheader"
+                }), true);
+                insert(_el$12, label);
+                return _el$12;
+            })()
+    }));
+    spread(_el$11, mergeProps(()=>({
+            class: CLASSES.GridBody.base
+        }), {
+        "data-slot": "calendar-grid-body",
+        role: "rowgroup",
+        onMouseLeave: ()=>p.onDayHover?.(void 0)
+    }), true);
+    insert(_el$11, createComponent(For, {
+        get each () {
+            return calendarState.calendarWeeks();
+        },
+        children: (week)=>(()=>{
+                var _el$13 = _tmpl$3();
+                spread(_el$13, mergeProps(()=>({
+                        class: CLASSES.GridRow.base
+                    }), {
+                    "data-slot": "calendar-grid-row",
+                    role: "row"
+                }), true);
+                insert(_el$13, createComponent(For, {
+                    each: week,
+                    children: (date)=>{
+                        const cellState = calendarState.getCellState(date);
+                        const isoDate = toISODate(date);
+                        var _el$14 = _tmpl$3();
+                        spread(_el$14, mergeProps(()=>({
+                                class: CLASSES.DayWrapper.base
+                            }), {
+                            "data-slot": "calendar-day-wrapper",
+                            role: "presentation"
+                        }), true);
+                        insert(_el$14, createComponent(Show, {
+                            get when () {
+                                return showOutsideDays() || !cellState.isOutsideMonth;
+                            },
+                            get fallback () {
+                                var _el$17 = _tmpl$2();
+                                spread(_el$17, mergeProps(()=>({
+                                        class: CLASSES.DayPlaceholder.base
+                                    }), {
+                                    "data-slot": "calendar-day-placeholder",
+                                    "aria-hidden": "true"
+                                }), false);
+                                return _el$17;
+                            },
+                            get children () {
+                                var _el$15 = _tmpl$4(), _el$16 = _el$15.firstChild;
+                                spread(_el$15, mergeProps({
+                                    type: "button"
+                                }, ()=>({
+                                        class: twMerge(CLASSES.Cell.base, cellState.isSelected && CLASSES.Cell.flag.selected, cellState.isRangeStart && CLASSES.Cell.flag.rangeStart, cellState.isRangeEnd && CLASSES.Cell.flag.rangeEnd, cellState.isInCommittedRange && CLASSES.Cell.flag.inRange, cellState.isInPreviewRange && !cellState.isInCommittedRange && CLASSES.Cell.flag.inPreviewRange, cellState.isToday && CLASSES.Cell.flag.today, cellState.isOutsideMonth && CLASSES.Cell.flag.outsideMonth, cellState.isDisabled && CLASSES.Cell.flag.disabled, cellState.isUnavailable && CLASSES.Cell.flag.unavailable, cellState.isFocused && CLASSES.Cell.flag.focused)
                                     }), {
-                                    "data-slot": "calendar-day-wrapper",
-                                    role: "presentation"
-                                }), false, true);
-                                insert(_el$14, createComponent(Show, {
-                                    get when () {
-                                        return showOutsideDays() || !cellState.isOutsideMonth;
+                                    "data-slot": "calendar-cell",
+                                    "data-date": isoDate,
+                                    get ["data-selected"] () {
+                                        return cellState.isSelected ? "true" : "false";
+                                    },
+                                    get ["data-range-start"] () {
+                                        return cellState.isRangeStart ? "true" : "false";
+                                    },
+                                    get ["data-range-end"] () {
+                                        return cellState.isRangeEnd ? "true" : "false";
+                                    },
+                                    get ["data-in-range"] () {
+                                        return cellState.isInCommittedRange ? "true" : "false";
+                                    },
+                                    get ["data-in-preview-range"] () {
+                                        return cellState.isInPreviewRange ? "true" : "false";
+                                    },
+                                    get ["data-today"] () {
+                                        return cellState.isToday ? "true" : "false";
                                     },
-                                    get fallback () {
-                                        return (()=>{
-                                            var _el$17 = _tmpl$2();
-                                            spread(_el$17, mergeProps(()=>({
-                                                    class: CLASSES.DayPlaceholder.base
-                                                }), {
-                                                "data-slot": "calendar-day-placeholder",
-                                                "aria-hidden": "true"
-                                            }), false, false);
-                                            return _el$17;
-                                        })();
+                                    get ["data-outside-month"] () {
+                                        return cellState.isOutsideMonth ? "true" : "false";
                                     },
-                                    get children () {
-                                        var _el$15 = _tmpl$4(), _el$16 = _el$15.firstChild;
-                                        spread(_el$15, mergeProps(()=>({
-                                                class: twMerge(CLASSES.Cell.base, cellState.isSelected && CLASSES.Cell.flag.selected, cellState.isRangeStart && CLASSES.Cell.flag.rangeStart, cellState.isRangeEnd && CLASSES.Cell.flag.rangeEnd, cellState.isInCommittedRange && CLASSES.Cell.flag.inRange, cellState.isInPreviewRange && !cellState.isInCommittedRange && CLASSES.Cell.flag.inPreviewRange, cellState.isToday && CLASSES.Cell.flag.today, cellState.isOutsideMonth && CLASSES.Cell.flag.outsideMonth, cellState.isDisabled && CLASSES.Cell.flag.disabled, cellState.isUnavailable && CLASSES.Cell.flag.unavailable, cellState.isFocused && CLASSES.Cell.flag.focused)
-                                            }), {
-                                            "data-slot": "calendar-cell",
-                                            "data-date": isoDate,
-                                            get ["data-selected"] () {
-                                                return cellState.isSelected ? "true" : "false";
-                                            },
-                                            get ["data-range-start"] () {
-                                                return cellState.isRangeStart ? "true" : "false";
-                                            },
-                                            get ["data-range-end"] () {
-                                                return cellState.isRangeEnd ? "true" : "false";
-                                            },
-                                            get ["data-in-range"] () {
-                                                return cellState.isInCommittedRange ? "true" : "false";
-                                            },
-                                            get ["data-in-preview-range"] () {
-                                                return cellState.isInPreviewRange ? "true" : "false";
-                                            },
-                                            get ["data-today"] () {
-                                                return cellState.isToday ? "true" : "false";
-                                            },
-                                            get ["data-outside-month"] () {
-                                                return cellState.isOutsideMonth ? "true" : "false";
-                                            },
-                                            get ["data-disabled"] () {
-                                                return cellState.isDisabled ? "true" : "false";
-                                            },
-                                            get ["data-unavailable"] () {
-                                                return cellState.isUnavailable ? "true" : "false";
-                                            },
-                                            role: "gridcell",
-                                            get ["aria-label"] () {
-                                                return calendarState.dayLabelFormatter().format(date);
-                                            },
-                                            get ["aria-selected"] () {
-                                                return cellState.isAriaSelected ? "true" : "false";
-                                            },
-                                            get ["aria-disabled"] () {
-                                                return cellState.isDisabled ? "true" : "false";
-                                            },
-                                            get disabled () {
-                                                return cellState.isDisabled;
-                                            },
-                                            get tabIndex () {
-                                                return cellState.isFocused ? 0 : -1;
-                                            },
-                                            onClick: ()=>selectDate(date),
-                                            onFocus: ()=>navigation.setFocusedDate(date),
-                                            onMouseEnter: ()=>{
-                                                if (cellState.isDisabled) return;
-                                                local.onDayHover?.(date);
-                                            },
-                                            onKeyDown: handleCellKeyDown
-                                        }), false, true);
-                                        spread(_el$16, mergeProps(()=>({
-                                                class: CLASSES.Day.base
-                                            }), {
-                                            "data-slot": "calendar-day"
-                                        }), false, true);
-                                        insert(_el$16, ()=>date.getDate());
-                                        return _el$15;
-                                    }
-                                }));
-                                return _el$14;
-                            })();
-                        }
-                    }));
-                    return _el$13;
-                })()
-        }));
-        return _el$;
-    })();
+                                    get ["data-disabled"] () {
+                                        return cellState.isDisabled ? "true" : "false";
+                                    },
+                                    get ["data-unavailable"] () {
+                                        return cellState.isUnavailable ? "true" : "false";
+                                    },
+                                    role: "gridcell",
+                                    get ["aria-label"] () {
+                                        return calendarState.dayLabelFormatter().format(date);
+                                    },
+                                    get ["aria-selected"] () {
+                                        return cellState.isAriaSelected ? "true" : "false";
+                                    },
+                                    get ["aria-disabled"] () {
+                                        return cellState.isDisabled ? "true" : "false";
+                                    },
+                                    get disabled () {
+                                        return cellState.isDisabled;
+                                    },
+                                    get tabindex () {
+                                        return cellState.isFocused ? 0 : -1;
+                                    },
+                                    onClick: ()=>selectDate(date),
+                                    onFocus: ()=>navigation.setFocusedDate(date),
+                                    onMouseEnter: ()=>{
+                                        if (cellState.isDisabled) return;
+                                        p.onDayHover?.(date);
+                                    },
+                                    onKeyDown: handleCellKeyDown
+                                }), true);
+                                spread(_el$16, mergeProps(()=>({
+                                        class: CLASSES.Day.base
+                                    }), {
+                                    "data-slot": "calendar-day"
+                                }), true);
+                                insert(_el$16, ()=>date.getDate());
+                                return _el$15;
+                            }
+                        }));
+                        return _el$14;
+                    }
+                }));
+                return _el$13;
+            })()
+    }));
+    return _el$;
 };
 const Calendar = defineComponent({
     recipe: componentRecipe,

package/dist/components/calendar/Calendar.recipe.d.ts

@@ -60,7 +60,7 @@ export declare const CLASSES: {
         readonly base: "calendar__day";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "calendar";
     readonly slots: {
         readonly calendar: {};