@super-calendar/dom 2.1.5 → 2.2.0

package/src/MonthView.tsx

@@ -25,14 +25,36 @@ import {
   dayBadgeKind,
   type DateRange,
   type DateSelectionConstraints,
+  type EventAccessibilityLabeler,
   groupEventsByDay,
+  isAllDayEvent,
   type MonthGridDay,
   monthVisibleCount,
   rangeBandKind,
+  type WeekdayFormat,
   type WeekStartsOn,
 } from "@super-calendar/core";
+import { createSlots, dataState, type SlotDefault, type SlotStyleProps } from "./slots";
 import { type DomCalendarTheme, mergeDomTheme } from "./theme";
 
+/**
+ * Styleable parts of {@link MonthView}. Pass a class or inline style per slot via
+ * the `classNames` / `styles` props to restyle just that part.
+ */
+export type MonthViewSlot =
+  | "title"
+  | "weekdays"
+  | "weekday"
+  | "grid"
+  | "week"
+  | "day"
+  | "dayBadge"
+  | "rangeBand"
+  | "events"
+  | "chipButton"
+  | "chip"
+  | "more";
+
 // Chip metrics for the events layout (when `events` is provided).
 const DATE_ROW = 24;
 const CHIP_HEIGHT = 18;
@@ -51,11 +73,14 @@ export interface DomMonthEventArgs<T = unknown> {
 export type DomMonthEvent<T = unknown> = ComponentType<DomMonthEventArgs<T>>;
 
 /** Props for {@link MonthView}. */
-export interface MonthViewProps<T = unknown> extends DateSelectionConstraints {
+export interface MonthViewProps<T = unknown>
+  extends DateSelectionConstraints, SlotStyleProps<MonthViewSlot> {
   /** Any day within the month to render. */
   date: Date;
   /** First day of the week. Sunday = 0 (default) … Saturday = 6. */
   weekStartsOn?: WeekStartsOn;
+  /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat;
   /**
    * Events to render as chips in each day cell. Passing this (even `[]`) switches
    * the grid to the calendar layout (date in the corner, chips below); omit it for
@@ -64,6 +89,12 @@ export interface MonthViewProps<T = unknown> extends DateSelectionConstraints {
   events?: CalendarEvent<T>[];
   /** Custom chip renderer; falls back to the built-in titled chip. */
   renderEvent?: DomMonthEvent<T>;
+  /**
+   * Override the screen-reader label for each event chip. Receives the event and a
+   * `{ mode: "month", isAllDay, ampm: false }` context; return the full text to
+   * announce. Defaults to the event title and day (e.g. "Standup, 15 July").
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler<T>;
   /** Max chips shown per day before a "+N more" row (default 3). */
   maxVisibleEventCount?: number;
   /** Template for the overflow row; `{moreCount}` is replaced (default "{moreCount} More"). */
@@ -93,6 +124,14 @@ export interface MonthViewProps<T = unknown> extends DateSelectionConstraints {
   theme?: Partial<DomCalendarTheme>;
   /** Fired when a selectable day is clicked. */
   onPressDay?: (date: Date) => void;
+  /**
+   * In events mode, enables drag-to-create: press on a day and drag across others
+   * to sketch a span, then release to fire this with the all-day range (`start` at
+   * midnight of the first day, `end` at midnight after the last, exclusive). A plain
+   * click without dragging still fires `onPressDay`, not this. Days being sketched
+   * carry `data-creating` for styling.
+   */
+  onCreateEvent?: (start: Date, end: Date) => void;
   /**
    * When events are shown, also make the day cells keyboard-navigable: a single
    * roving tab stop, arrow keys move the focus, Enter opens the day (`onPressDay`).
@@ -106,35 +145,43 @@ export interface MonthViewProps<T = unknown> extends DateSelectionConstraints {
   style?: CSSProperties;
 }
 
-function dayCellStyle(day: MonthGridDay, theme: DomCalendarTheme): CSSProperties {
+// Each helper returns the slot's built-in styling split into `base` (structural,
+// always applied) and `themed` (colour/type/spacing, dropped when a class is set).
+
+function dayCellDefault(day: MonthGridDay, theme: DomCalendarTheme): SlotDefault {
   return {
-    position: "relative",
-    height: theme.cellHeight,
-    border: "none",
-    // The range band is a separate layer; the cell only carries the weekend tint.
-    background: day.isWeekend && !day.isInRange ? theme.weekendBackground : "transparent",
-    font: "inherit",
-    fontSize: 15,
-    color: day.isDisabled ? theme.textDisabled : theme.text,
-    cursor: day.isDisabled ? "default" : "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 0,
-    WebkitTapHighlightColor: "transparent",
+    base: {
+      position: "relative",
+      height: theme.cellHeight,
+      border: "none",
+      font: "inherit",
+      cursor: day.isDisabled ? "default" : "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 0,
+      WebkitTapHighlightColor: "transparent",
+    },
+    themed: {
+      // The range band is a separate layer; the cell only carries the weekend tint.
+      background: day.isWeekend && !day.isInRange ? theme.weekendBackground : "transparent",
+      fontSize: 15,
+      color: day.isDisabled ? theme.textDisabled : theme.text,
+    },
   };
 }
 
 /**
  * The range band behind a day, rendered as its own layer so it can be a centered
  * rounded strip (the default) or fill the whole cell (`fillCell`). Returns null
- * for days with no band. Endpoints get the leading/trailing pill rounding.
+ * for days with no band. Endpoints get the leading/trailing pill rounding. Its
+ * geometry is structural; only the fill colour is themed.
  */
-function rangeBandStyle(
+function rangeBandDefault(
   day: MonthGridDay,
   theme: DomCalendarTheme,
   fillCell: boolean,
-): CSSProperties | null {
+): SlotDefault | null {
   const kind = rangeBandKind(day, fillCell);
   if (kind === "none") return null;
   const fill = kind === "fill";
@@ -145,27 +192,26 @@ function rangeBandStyle(
   // outer edge (half a badge in from the cell centre) rather than spilling to the
   // cell edge, so no band shows in the empty space beside the day circles.
   const cap = `calc(50% - ${theme.dayBadgeSize / 2}px)`;
-  const style: CSSProperties = {
+  const base: CSSProperties = {
     position: "absolute",
     left: rounding.start ? cap : 0,
     right: rounding.end ? cap : 0,
     top: inset,
     bottom: inset,
-    background: theme.rangeBackground,
     zIndex: 0,
   };
   if (rounding.start) {
-    style.borderTopLeftRadius = radius;
-    style.borderBottomLeftRadius = radius;
+    base.borderTopLeftRadius = radius;
+    base.borderBottomLeftRadius = radius;
   }
   if (rounding.end) {
-    style.borderTopRightRadius = radius;
-    style.borderBottomRightRadius = radius;
+    base.borderTopRightRadius = radius;
+    base.borderBottomRightRadius = radius;
   }
-  return style;
+  return { base, themed: { background: theme.rangeBackground } };
 }
 
-function badgeStyle(day: MonthGridDay, theme: DomCalendarTheme, hovered: boolean): CSSProperties {
+function badgeDefault(day: MonthGridDay, theme: DomCalendarTheme, hovered: boolean): SlotDefault {
   const badge = dayBadgeKind(day, day.isToday);
   const filled = badge !== "none";
   const background = filled
@@ -176,108 +222,130 @@ function badgeStyle(day: MonthGridDay, theme: DomCalendarTheme, hovered: boolean
       ? theme.hoverBackground
       : "transparent";
   return {
-    position: "relative",
-    zIndex: 1,
-    width: theme.dayBadgeSize,
-    height: theme.dayBadgeSize,
-    borderRadius: "50%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background,
-    color: filled ? (day.isToday ? theme.todayText : theme.selectedText) : "inherit",
+    base: {
+      position: "relative",
+      zIndex: 1,
+      width: theme.dayBadgeSize,
+      height: theme.dayBadgeSize,
+      borderRadius: "50%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    themed: {
+      background,
+      color: filled ? (day.isToday ? theme.todayText : theme.selectedText) : "inherit",
+    },
   };
 }
 
 // --- Calendar (events) layout styles -------------------------------------
 
-function eventCellStyle(day: MonthGridDay, theme: DomCalendarTheme, height: number): CSSProperties {
+function eventCellDefault(day: MonthGridDay, theme: DomCalendarTheme, height: number): SlotDefault {
   return {
-    position: "relative",
-    minHeight: height,
-    minWidth: 0,
-    border: "none",
-    borderTop: `1px solid ${theme.gridLine}`,
-    background: day.isWeekend && !day.isInRange ? theme.weekendBackground : "transparent",
-    color: day.isDisabled ? theme.textDisabled : theme.text,
-    cursor: day.isDisabled ? "default" : "pointer",
-    display: "flex",
-    flexDirection: "column",
-    gap: CHIP_GAP,
-    padding: CELL_PAD,
-    boxSizing: "border-box",
-    textAlign: "left",
-    WebkitTapHighlightColor: "transparent",
+    base: {
+      position: "relative",
+      minHeight: height,
+      minWidth: 0,
+      border: "none",
+      cursor: day.isDisabled ? "default" : "pointer",
+      display: "flex",
+      flexDirection: "column",
+      gap: CHIP_GAP,
+      padding: CELL_PAD,
+      boxSizing: "border-box",
+      textAlign: "left",
+      WebkitTapHighlightColor: "transparent",
+    },
+    themed: {
+      borderTop: `1px solid ${theme.gridLine}`,
+      background: day.isWeekend && !day.isInRange ? theme.weekendBackground : "transparent",
+      color: day.isDisabled ? theme.textDisabled : theme.text,
+    },
   };
 }
 
-function compactBadgeStyle(day: MonthGridDay, theme: DomCalendarTheme): CSSProperties {
+function compactBadgeDefault(day: MonthGridDay, theme: DomCalendarTheme): SlotDefault {
   const badge = dayBadgeKind(day, day.isToday);
   const filled = badge !== "none";
   return {
-    position: "relative",
-    zIndex: 1,
-    alignSelf: "flex-end",
-    width: DATE_ROW - 2,
-    height: DATE_ROW - 2,
-    borderRadius: "50%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: 13,
-    background: filled
-      ? badge === "today"
-        ? theme.todayBackground
-        : theme.selectedBackground
-      : "transparent",
-    color: filled ? (day.isToday ? theme.todayText : theme.selectedText) : "inherit",
-  };
-}
-
-const chipButtonStyle: CSSProperties = {
-  position: "relative",
-  zIndex: 1,
-  border: "none",
-  padding: 0,
-  margin: 0,
-  background: "transparent",
-  cursor: "pointer",
-  textAlign: "left",
-  fontFamily: "inherit",
-};
-
-function chipStyle(theme: DomCalendarTheme): CSSProperties {
-  return {
-    display: "block",
-    height: CHIP_HEIGHT,
-    lineHeight: `${CHIP_HEIGHT}px`,
-    padding: "0 6px",
-    borderRadius: 4,
-    background: theme.eventBackground,
-    color: theme.eventText,
-    fontSize: 11,
-    fontWeight: 600,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
+    base: {
+      position: "relative",
+      zIndex: 1,
+      alignSelf: "flex-end",
+      width: DATE_ROW - 2,
+      height: DATE_ROW - 2,
+      borderRadius: "50%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    themed: {
+      fontSize: 13,
+      background: filled
+        ? badge === "today"
+          ? theme.todayBackground
+          : theme.selectedBackground
+        : "transparent",
+      color: filled ? (day.isToday ? theme.todayText : theme.selectedText) : "inherit",
+    },
   };
 }
 
-function moreButtonStyle(theme: DomCalendarTheme): CSSProperties {
-  return {
+const chipButtonDefault: SlotDefault = {
+  base: {
     position: "relative",
     zIndex: 1,
     border: "none",
+    padding: 0,
+    margin: 0,
     background: "transparent",
     cursor: "pointer",
     textAlign: "left",
-    padding: "0 6px",
-    height: CHIP_HEIGHT,
-    lineHeight: `${CHIP_HEIGHT}px`,
-    fontSize: 11,
-    fontWeight: 600,
     fontFamily: "inherit",
-    color: theme.textMuted,
+  },
+};
+
+function chipDefault(theme: DomCalendarTheme): SlotDefault {
+  return {
+    base: {
+      display: "block",
+      height: CHIP_HEIGHT,
+      lineHeight: `${CHIP_HEIGHT}px`,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+    },
+    themed: {
+      padding: "0 6px",
+      borderRadius: 4,
+      background: theme.eventBackground,
+      color: theme.eventText,
+      fontSize: 11,
+      fontWeight: 600,
+    },
+  };
+}
+
+function moreButtonDefault(theme: DomCalendarTheme): SlotDefault {
+  return {
+    base: {
+      position: "relative",
+      zIndex: 1,
+      border: "none",
+      background: "transparent",
+      cursor: "pointer",
+      textAlign: "left",
+      height: CHIP_HEIGHT,
+      lineHeight: `${CHIP_HEIGHT}px`,
+      fontFamily: "inherit",
+    },
+    themed: {
+      padding: "0 6px",
+      fontSize: 11,
+      fontWeight: 600,
+      color: theme.textMuted,
+    },
   };
 }
 
@@ -299,9 +367,11 @@ interface MonthViewInternalProps<T = unknown> extends MonthViewProps<T> {
 export function MonthView<T = unknown>({
   date,
   weekStartsOn = 0,
+  weekdayFormat = "short",
   events,
   eventsByDay: eventsByDayProp,
   renderEvent,
+  eventAccessibilityLabel,
   maxVisibleEventCount = 3,
   moreLabel = "{moreCount} More",
   onPressEvent,
@@ -318,11 +388,15 @@ export function MonthView<T = unknown>({
   maxDate,
   isDateDisabled,
   onPressDay,
+  onCreateEvent,
   keyboardDayNavigation = false,
   className,
   style,
+  classNames,
+  styles,
 }: MonthViewInternalProps<T>): ReactElement {
   const theme = useMemo(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+  const slot = createSlots<MonthViewSlot>({ classNames, styles });
 
   // Calendar layout (date in the corner + event chips) is on whenever `events`
   // is provided; otherwise the compact picker badge layout is used.
@@ -349,6 +423,7 @@ export function MonthView<T = unknown>({
     () =>
       buildMonthGrid(date, {
         weekStartsOn,
+        weekdayFormat,
         selectedRange,
         selectedDates,
         minDate,
@@ -356,7 +431,17 @@ export function MonthView<T = unknown>({
         isDateDisabled,
         locale,
       }),
-    [date, weekStartsOn, selectedRange, selectedDates, minDate, maxDate, isDateDisabled, locale],
+    [
+      date,
+      weekStartsOn,
+      weekdayFormat,
+      selectedRange,
+      selectedDates,
+      minDate,
+      maxDate,
+      isDateDisabled,
+      locale,
+    ],
   );
 
   // Roving tabindex: only one day is in the tab order; arrow keys move focus
@@ -379,6 +464,45 @@ export function MonthView<T = unknown>({
   const [hoveredKey, setHoveredKey] = useState<string | null>(null);
   const gridRef = useRef<HTMLDivElement>(null);
   const focusKey = format(focusedDate, "yyyy-MM-dd");
+
+  // Drag-to-create (events mode): press a day and drag across others to sketch an
+  // all-day span, released on a window pointerup so a drop anywhere still commits.
+  const [creating, setCreating] = useState<{ anchor: number; hover: number } | null>(null);
+  const creatingRef = useRef(creating);
+  creatingRef.current = creating;
+  const movedRef = useRef(false);
+  // Set when a drag commits, so the click the browser fires next is swallowed
+  // (it must not also open the day via onPressDay).
+  const suppressClickRef = useRef(false);
+  const beginCreate = (day: Date) => {
+    if (!onCreateEvent) return;
+    const t = startOfDay(day).getTime();
+    movedRef.current = false;
+    setCreating({ anchor: t, hover: t });
+  };
+  const extendCreate = (day: Date) => {
+    if (!creatingRef.current) return;
+    const t = startOfDay(day).getTime();
+    if (t !== creatingRef.current.hover) {
+      movedRef.current = true;
+      setCreating((c) => (c ? { ...c, hover: t } : c));
+    }
+  };
+  const isCreating = creating !== null;
+  useEffect(() => {
+    if (!isCreating) return;
+    const finish = () => {
+      const c = creatingRef.current;
+      setCreating(null);
+      if (!c || !movedRef.current) return;
+      suppressClickRef.current = true;
+      const lo = Math.min(c.anchor, c.hover);
+      const hi = Math.max(c.anchor, c.hover);
+      onCreateEvent?.(new Date(lo), addDays(new Date(hi), 1));
+    };
+    window.addEventListener("pointerup", finish);
+    return () => window.removeEventListener("pointerup", finish);
+  }, [isCreating, onCreateEvent]);
   const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
     let next: Date | null = null;
     if (e.key === "ArrowLeft") next = addDays(focusedDate, -1);
@@ -401,23 +525,32 @@ export function MonthView<T = unknown>({
       style={{ fontFamily: theme.fontFamily, color: theme.text, ...style }}
     >
       {showTitle ? (
-        <div style={{ fontSize: 17, fontWeight: 700, padding: "10px 14px 6px" }}>
+        <div
+          {...slot("title", {
+            themed: { fontSize: 17, fontWeight: 700, padding: "10px 14px 6px" },
+          })}
+        >
           {format(date, "MMMM yyyy", locale ? { locale } : undefined)}
         </div>
       ) : null}
       {showWeekdays ? (
         <div
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-            borderBottom: `1px solid ${theme.gridLine}`,
-            padding: "6px 0",
-          }}
+          {...slot("weekdays", {
+            base: { display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" },
+            themed: { borderBottom: `1px solid ${theme.gridLine}`, padding: "6px 0" },
+          })}
         >
           {weekdays.map((wd) => (
             <span
               key={wd.label}
-              style={{ textAlign: "center", fontSize: 12, fontWeight: 600, color: theme.textMuted }}
+              {...slot("weekday", {
+                themed: {
+                  textAlign: "center",
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: theme.textMuted,
+                },
+              })}
             >
               {wd.label}
             </span>
@@ -431,12 +564,15 @@ export function MonthView<T = unknown>({
         // Arrow-key roving applies whenever the day cells are a tab stop: the
         // picker always, events mode only when keyboardDayNavigation is set.
         onKeyDown={dayRoving ? onKeyDown : undefined}
+        {...slot("grid")}
       >
         {weeks.map((week) => (
           <div
             key={week.id}
             role="row"
-            style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" }}
+            {...slot("week", {
+              base: { display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" },
+            })}
           >
             {week.days.map((day) => {
               const hidden = !showAdjacentMonths && !day.isCurrentMonth;
@@ -446,8 +582,24 @@ export function MonthView<T = unknown>({
                   <div key={day.id} role="gridcell" aria-hidden style={{ height: cellHeight }} />
                 );
               }
-              const band = rangeBandStyle(day, theme, fillCellOnSelection);
+              const band = rangeBandDefault(day, theme, fillCellOnSelection);
               const label = format(day.date, "EEEE, d MMMM yyyy", locale ? { locale } : undefined);
+              const dayTime = startOfDay(day.date).getTime();
+              const inCreate =
+                creating != null &&
+                dayTime >= Math.min(creating.anchor, creating.hover) &&
+                dayTime <= Math.max(creating.anchor, creating.hover);
+              // Present/absent data-* attributes so consumers can style day state
+              // with CSS/Tailwind variants (e.g. `data-[today]:bg-blue-500`).
+              const dayData = dataState({
+                "data-today": day.isToday,
+                "data-selected": day.isSelected,
+                "data-range": day.isInRange,
+                "data-weekend": day.isWeekend,
+                "data-outside": !day.isCurrentMonth,
+                "data-disabled": day.isDisabled,
+                "data-creating": inCreate,
+              });
 
               if (eventsMode) {
                 const dayEvents = eventsByDay.get(startOfDay(day.date).toISOString()) ?? [];
@@ -461,6 +613,7 @@ export function MonthView<T = unknown>({
                 const rest = dayEvents.slice(visible);
                 const overflow = rest.length > 0;
                 const dayLabel = format(day.date, "d MMMM", locale ? { locale } : undefined);
+                const dayCellProps = slot("day", eventCellDefault(day, theme, cellHeight));
                 return (
                   // Events mode: by default the cell is not a tab stop, so keyboard
                   // focus moves through the event chips (real buttons) only, not
@@ -471,11 +624,37 @@ export function MonthView<T = unknown>({
                     key={day.id}
                     role="gridcell"
                     data-day={day.id}
+                    {...dayData}
                     tabIndex={keyboardDayNavigation ? (day.id === focusKey ? 0 : -1) : undefined}
                     aria-disabled={day.isDisabled || undefined}
                     aria-label={label}
-                    style={eventCellStyle(day, theme, cellHeight)}
-                    onClick={day.isDisabled ? undefined : () => onPressDay?.(day.date)}
+                    {...dayCellProps}
+                    // Drag-to-create disables touch scroll on the cell so a swipe
+                    // sketches a span instead of scrolling the grid.
+                    style={
+                      onCreateEvent
+                        ? { ...dayCellProps.style, touchAction: "none" }
+                        : dayCellProps.style
+                    }
+                    onPointerDown={
+                      onCreateEvent && !day.isDisabled
+                        ? (e) => {
+                            if (e.button === 0) beginCreate(day.date);
+                          }
+                        : undefined
+                    }
+                    onPointerEnter={onCreateEvent ? () => extendCreate(day.date) : undefined}
+                    onClick={
+                      day.isDisabled
+                        ? undefined
+                        : () => {
+                            if (suppressClickRef.current) {
+                              suppressClickRef.current = false;
+                              return;
+                            }
+                            onPressDay?.(day.date);
+                          }
+                    }
                     onKeyDown={
                       keyboardDayNavigation && !day.isDisabled
                         ? (e) => {
@@ -489,9 +668,15 @@ export function MonthView<T = unknown>({
                         : undefined
                     }
                   >
-                    {band ? <span data-band aria-hidden style={band} /> : null}
-                    <span style={compactBadgeStyle(day, theme)}>{day.label}</span>
-                    <div style={{ display: "flex", flexDirection: "column", gap: CHIP_GAP }}>
+                    {band ? <span data-band aria-hidden {...slot("rangeBand", band)} /> : null}
+                    <span {...dayData} {...slot("dayBadge", compactBadgeDefault(day, theme))}>
+                      {day.label}
+                    </span>
+                    <div
+                      {...slot("events", {
+                        base: { display: "flex", flexDirection: "column", gap: CHIP_GAP },
+                      })}
+                    >
                       {shown.map((event) => {
                         const onPress = () => onPressEvent?.(event);
                         return (
@@ -502,14 +687,22 @@ export function MonthView<T = unknown>({
                               e.stopPropagation();
                               onPress();
                             }}
-                            style={chipButtonStyle}
+                            {...slot("chipButton", chipButtonDefault)}
                             title={event.title}
-                            aria-label={`${event.title}, ${dayLabel}`}
+                            aria-label={
+                              eventAccessibilityLabel
+                                ? eventAccessibilityLabel(event, {
+                                    mode: "month",
+                                    isAllDay: isAllDayEvent(event),
+                                    ampm: false,
+                                  })
+                                : `${event.title}, ${dayLabel}`
+                            }
                           >
                             {Chip ? (
                               <Chip event={event} onPress={onPress} />
                             ) : (
-                              <span style={chipStyle(theme)}>{event.title}</span>
+                              <span {...slot("chip", chipDefault(theme))}>{event.title}</span>
                             )}
                           </button>
                         );
@@ -521,7 +714,7 @@ export function MonthView<T = unknown>({
                             e.stopPropagation();
                             onPressMore?.(rest, day.date);
                           }}
-                          style={moreButtonStyle(theme)}
+                          {...slot("more", moreButtonDefault(theme))}
                           aria-label={`${rest.length} more events, ${dayLabel}`}
                         >
                           {moreLabel.replace("{moreCount}", String(rest.length))}
@@ -538,17 +731,23 @@ export function MonthView<T = unknown>({
                   type="button"
                   role="gridcell"
                   data-day={day.id}
+                  {...dayData}
                   tabIndex={day.id === focusKey ? 0 : -1}
                   aria-disabled={day.isDisabled || undefined}
                   aria-label={label}
                   aria-pressed={day.isSelected || day.isInRange}
-                  style={dayCellStyle(day, theme)}
+                  {...slot("day", dayCellDefault(day, theme))}
                   onClick={day.isDisabled ? undefined : () => onPressDay?.(day.date)}
                   onMouseEnter={day.isDisabled ? undefined : () => setHoveredKey(day.id)}
                   onMouseLeave={() => setHoveredKey((k) => (k === day.id ? null : k))}
                 >
-                  {band ? <span data-band aria-hidden style={band} /> : null}
-                  <span style={badgeStyle(day, theme, hoveredKey === day.id)}>{day.label}</span>
+                  {band ? <span data-band aria-hidden {...slot("rangeBand", band)} /> : null}
+                  <span
+                    {...dayData}
+                    {...slot("dayBadge", badgeDefault(day, theme, hoveredKey === day.id))}
+                  >
+                    {day.label}
+                  </span>
                 </button>
               );
             })}