From f67c7405d2a7613382cfff7d75492ad02f06c16e Mon Sep 17 00:00:00 2001
From: WickyNilliams <WickyNilliams@users.noreply.github.com>
Date: Sat, 20 Apr 2024 12:44:20 +0100
Subject: [PATCH] fix `outside` part for month

---
 index.html                                 |  5 +++--
 src/calendar-month/calendar-month.test.tsx | 13 +++++++++++++
 src/calendar-month/useCalendarMonth.ts     |  2 +-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 265bae1..1960237 100644
--- a/index.html
+++ b/index.html
@@ -48,10 +48,11 @@ <h2>range</h2>
     <h2>date</h2>
     <calendar-date
       id="date"
-      value="2020-01-01"
+      value="2020-04-01"
       min="2019-11-01"
       max="2025-03-20"
       months="2"
+      show-outside-days
     >
       <label for="yearSelect" class="vh">Year:</label>
       <select id="yearSelect">
@@ -67,7 +68,7 @@ <h2>date</h2>
         <option value="2028">2028</option>
       </select>
 
-      <div style="display: flex; gap: 1em">
+      <div class="grid">
         <calendar-month></calendar-month>
         <calendar-month offset="1"></calendar-month>
       </div>
diff --git a/src/calendar-month/calendar-month.test.tsx b/src/calendar-month/calendar-month.test.tsx
index 98779ef..6a31fc5 100644
--- a/src/calendar-month/calendar-month.test.tsx
+++ b/src/calendar-month/calendar-month.test.tsx
@@ -26,6 +26,7 @@ interface TestPropsBase {
   onfocusday: (e: CustomEvent<PlainDate>) => void;
   focusedDate: PlainDate;
   dir: "ltr" | "rtl";
+  showOutsideDays?: boolean;
 }
 
 interface DateTestProps extends TestPropsBase, CalendarDateContext {}
@@ -464,6 +465,18 @@ describe("CalendarMonth", () => {
     });
   });
 
+  it("can show outside days", async () => {
+    const month = await mount(
+      <Fixture focusedDate={PlainDate.from("2020-04-01")} showOutsideDays />
+    );
+
+    const outsideMarch = getDayButton(month, "30 March");
+    const outsideMay = getDayButton(month, "3 May");
+
+    expect(outsideMarch.part.contains("outside")).to.eq(true);
+    expect(outsideMay.part.contains("outside")).to.eq(true);
+  });
+
   describe("localization", async () => {
     it("localizes days and months", async () => {
       const month = await mount(
diff --git a/src/calendar-month/useCalendarMonth.ts b/src/calendar-month/useCalendarMonth.ts
index 8d628b3..f6ffbc2 100644
--- a/src/calendar-month/useCalendarMonth.ts
+++ b/src/calendar-month/useCalendarMonth.ts
@@ -138,7 +138,7 @@ export function useCalendarMonth({ props, context }: UseCalendarMonthOptions) {
     }
 
     return {
-      part: `button day ${isInMonth && isSelected ? "selected" : ""} ${parts}`,
+      part: `button day ${isInMonth ? (isSelected ? "selected" : "") : "outside"} ${parts}`,
       tabindex: isInMonth && isFocusedDay ? 0 : -1,
       disabled: isDisabled,
       "aria-disabled": isDisallowed ? "true" : undefined,