From f5e4024be8e7dc67a74ce77156b8f8bad5c1d09d Mon Sep 17 00:00:00 2001
From: WickyNilliams <WickyNilliams@MBA>
Date: Fri, 1 Nov 2024 22:22:02 +0000
Subject: [PATCH 1/5] render months as default slot content

---
 index.html                           |  6 +++++-
 src/calendar-base/calendar-base.tsx  | 16 +++++++++++++++-
 src/calendar-base/useCalendarBase.ts | 12 +++++++++---
 3 files changed, 29 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
index 19fd21d..51621cd 100644
--- a/index.html
+++ b/index.html
@@ -89,7 +89,7 @@ <h2>date</h2>
 
     <h2>multi</h2>
     <calendar-multi
-      id="date"
+      id="multi"
       months="2"
       show-outside-days
       value="2024-05-07 2024-05-09"
@@ -100,6 +100,10 @@ <h2>multi</h2>
       </div>
     </calendar-multi>
 
+    <h2>Simple date</h2>
+
+    <calendar-date months="2"></calendar-date>
+
     <script type="module">
       import "./src/index.ts";
 
diff --git a/src/calendar-base/calendar-base.tsx b/src/calendar-base/calendar-base.tsx
index 2510493..b154d0c 100644
--- a/src/calendar-base/calendar-base.tsx
+++ b/src/calendar-base/calendar-base.tsx
@@ -9,6 +9,7 @@ import { reset, vh } from "../utils/styles.js";
 import { toDate, type DaysOfWeek } from "../utils/date.js";
 import type { PlainDate } from "../utils/temporal.js";
 import type { Pagination } from "./useCalendarBase.js";
+import { CalendarMonth } from "../calendar-month/calendar-month.js";
 
 interface CalendarBaseProps {
   format: Intl.DateTimeFormat;
@@ -19,6 +20,15 @@ interface CalendarBaseProps {
   onSelect: (e: CustomEvent<PlainDate>) => void;
   onFocus: (e: CustomEvent<PlainDate>) => void;
   onHover?: (e: CustomEvent<PlainDate>) => void;
+  months: number;
+}
+
+function range<T>(max: number, fn: (n: number) => T) {
+  let output = [];
+  for (let i = 0; i < max; i++) {
+    output.push(fn(i));
+  }
+  return output;
 }
 
 interface CalendarRangeProps extends CalendarBaseProps, CalendarRangeContext {}
@@ -73,7 +83,11 @@ export function CalendarBase(
         onfocusday={props.onFocus}
         onhoverday={props.onHover}
       >
-        <slot></slot>
+        <slot>
+          {range(props.months, (offset) => (
+            <CalendarMonth offset={offset} />
+          ))}
+        </slot>
       </CalendarMonthContext>
     </div>
   );
diff --git a/src/calendar-base/useCalendarBase.ts b/src/calendar-base/useCalendarBase.ts
index f8e5b71..2ee57c2 100644
--- a/src/calendar-base/useCalendarBase.ts
+++ b/src/calendar-base/useCalendarBase.ts
@@ -134,9 +134,15 @@ export function useCalendarBase({
 
   const host = useHost();
   function focus() {
-    host.current
-      .querySelectorAll<HTMLElement>("calendar-month")
-      .forEach((m) => m.focus());
+    const children =
+      host.current.querySelectorAll<HTMLElement>("calendar-month");
+    const months = children.length
+      ? children
+      : host.current.shadowRoot!.querySelectorAll<HTMLElement>(
+          "calendar-month"
+        );
+
+    months.forEach((m) => m.focus());
   }
 
   return {

From 01c7bb95d14aead788538da973162c4b458f473e Mon Sep 17 00:00:00 2001
From: WickyNilliams <WickyNilliams@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:31:26 +0000
Subject: [PATCH 2/5] add part to slot

---
 index.html                          | 7 ++++++-
 src/calendar-base/calendar-base.tsx | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 51621cd..7377b53 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,11 @@
         width: 100%;
         text-align: center;
       }
+
+      #simple::part(slot) {
+        display: flex;
+        gap: 1em;
+      }
     </style>
   </head>
   <body>
@@ -102,7 +107,7 @@ <h2>multi</h2>
 
     <h2>Simple date</h2>
 
-    <calendar-date months="2"></calendar-date>
+    <calendar-date id="simple" months="3"></calendar-date>
 
     <script type="module">
       import "./src/index.ts";
diff --git a/src/calendar-base/calendar-base.tsx b/src/calendar-base/calendar-base.tsx
index b154d0c..9aced04 100644
--- a/src/calendar-base/calendar-base.tsx
+++ b/src/calendar-base/calendar-base.tsx
@@ -83,7 +83,7 @@ export function CalendarBase(
         onfocusday={props.onFocus}
         onhoverday={props.onHover}
       >
-        <slot>
+        <slot part="slot">
           {range(props.months, (offset) => (
             <CalendarMonth offset={offset} />
           ))}

From 02f6c829ca8faf94da498004e5a3cb4349cd1965 Mon Sep 17 00:00:00 2001
From: WickyNilliams <WickyNilliams@users.noreply.github.com>
Date: Sat, 2 Nov 2024 21:07:16 +0000
Subject: [PATCH 3/5] add tests for simplified usage

---
 src/calendar-date/calendar-date.test.tsx | 11 +++++++++++
 src/utils/test.ts                        | 12 +++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/calendar-date/calendar-date.test.tsx b/src/calendar-date/calendar-date.test.tsx
index 89999f0..a7455c9 100644
--- a/src/calendar-date/calendar-date.test.tsx
+++ b/src/calendar-date/calendar-date.test.tsx
@@ -802,4 +802,15 @@ describe("CalendarDate", () => {
       expect(firstJan).to.have.attribute("aria-pressed", "true");
     });
   });
+
+  it("renders its own months if none supplied", async () => {
+    const calendar = await mount(
+      <CalendarDate locale="en-GB" months={2} value="2024-11-02" />
+    );
+    const months = getMonths(calendar);
+
+    expect(months).to.have.lengthOf(2);
+    expect(getMonthHeading(months[0]!)).to.have.text("November");
+    expect(getMonthHeading(months[1]!)).to.have.text("December");
+  });
 });
diff --git a/src/utils/test.ts b/src/utils/test.ts
index 6e608ab..cf21b4c 100644
--- a/src/utils/test.ts
+++ b/src/utils/test.ts
@@ -79,7 +79,17 @@ export async function click(element: Element) {
 }
 
 export function getMonths(calendar: HTMLElement): MonthInstance[] {
-  return [...calendar.querySelectorAll<MonthInstance>("calendar-month")!];
+  const children = [
+    ...calendar.querySelectorAll<MonthInstance>("calendar-month"),
+  ];
+
+  return children.length
+    ? children
+    : [
+        ...calendar.shadowRoot!.querySelectorAll<MonthInstance>(
+          "calendar-month"
+        ),
+      ];
 }
 
 export function getMonth(calendar: HTMLElement): MonthInstance {

From 6a9b205586f08702b665f9058026bdb0f79aa815 Mon Sep 17 00:00:00 2001
From: WickyNilliams <WickyNilliams@users.noreply.github.com>
Date: Sat, 2 Nov 2024 21:26:22 +0000
Subject: [PATCH 4/5] only render default months if no elements are slotted

---
 src/calendar-base/calendar-base.tsx      | 12 +++++++----
 src/calendar-base/useCalendarBase.ts     | 10 +++++++++
 src/calendar-date/calendar-date.test.tsx | 27 ++++++++++++++++--------
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/calendar-base/calendar-base.tsx b/src/calendar-base/calendar-base.tsx
index 9aced04..bab997b 100644
--- a/src/calendar-base/calendar-base.tsx
+++ b/src/calendar-base/calendar-base.tsx
@@ -21,6 +21,8 @@ interface CalendarBaseProps {
   onFocus: (e: CustomEvent<PlainDate>) => void;
   onHover?: (e: CustomEvent<PlainDate>) => void;
   months: number;
+  hasSlotted: boolean;
+  onSlotChange: (e: Event) => void;
 }
 
 function range<T>(max: number, fn: (n: number) => T) {
@@ -83,10 +85,12 @@ export function CalendarBase(
         onfocusday={props.onFocus}
         onhoverday={props.onHover}
       >
-        <slot part="slot">
-          {range(props.months, (offset) => (
-            <CalendarMonth offset={offset} />
-          ))}
+        <slot part="slot" onslotchange={props.onSlotChange}>
+          {props.hasSlotted
+            ? null
+            : range(props.months, (offset) => (
+                <CalendarMonth offset={offset} />
+              ))}
         </slot>
       </CalendarMonthContext>
     </div>
diff --git a/src/calendar-base/useCalendarBase.ts b/src/calendar-base/useCalendarBase.ts
index 2ee57c2..945c83d 100644
--- a/src/calendar-base/useCalendarBase.ts
+++ b/src/calendar-base/useCalendarBase.ts
@@ -145,6 +145,14 @@ export function useCalendarBase({
     months.forEach((m) => m.focus());
   }
 
+  const [hasSlotted, setHasSlotted] = useState(false);
+  const onSlotChange = (e: Event) => {
+    return setHasSlotted(
+      (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length >
+        0
+    );
+  };
+
   return {
     format: useDateFormatter(formatOptions, locale),
     formatVerbose: useDateFormatter(formatVerboseOptions, locale),
@@ -161,5 +169,7 @@ export function useCalendarBase({
     next,
     previous,
     focus,
+    hasSlotted,
+    onSlotChange,
   };
 }
diff --git a/src/calendar-date/calendar-date.test.tsx b/src/calendar-date/calendar-date.test.tsx
index a7455c9..1d402d0 100644
--- a/src/calendar-date/calendar-date.test.tsx
+++ b/src/calendar-date/calendar-date.test.tsx
@@ -803,14 +803,23 @@ describe("CalendarDate", () => {
     });
   });
 
-  it("renders its own months if none supplied", async () => {
-    const calendar = await mount(
-      <CalendarDate locale="en-GB" months={2} value="2024-11-02" />
-    );
-    const months = getMonths(calendar);
-
-    expect(months).to.have.lengthOf(2);
-    expect(getMonthHeading(months[0]!)).to.have.text("November");
-    expect(getMonthHeading(months[1]!)).to.have.text("December");
+  describe("simple usage", () => {
+    it("renders its own months if none supplied", async () => {
+      const calendar = await mount(
+        <CalendarDate locale="en-GB" months={2} value="2024-11-02" />
+      );
+      const months = getMonths(calendar);
+
+      expect(months).to.have.lengthOf(2);
+      expect(getMonthHeading(months[0]!)).to.have.text("November");
+      expect(getMonthHeading(months[1]!)).to.have.text("December");
+    });
+
+    it("does not render its own month if some are slotted", async () => {
+      const calendar = await mount(<Fixture value="2024-11-02" />);
+      expect(
+        calendar.shadowRoot!.querySelector("slot:not([name])")!.children
+      ).to.have.lengthOf(0);
+    });
   });
 });

From d95a0017f3b435f3b6ec635b008410b36fa79967 Mon Sep 17 00:00:00 2001
From: WickyNilliams <WickyNilliams@users.noreply.github.com>
Date: Sat, 14 Dec 2024 18:48:06 +0000
Subject: [PATCH 5/5] add broken test case

---
 index.html                               |  9 +++++++++
 src/calendar-date/calendar-date.test.tsx | 14 ++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/index.html b/index.html
index 7377b53..c50e454 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,10 @@
         display: flex;
         gap: 1em;
       }
+      #simple2::part(slot) {
+        display: flex;
+        gap: 1em;
+      }
     </style>
   </head>
   <body>
@@ -109,6 +113,11 @@ <h2>Simple date</h2>
 
     <calendar-date id="simple" months="3"></calendar-date>
 
+    <calendar-date id="simple2" months="3">
+      <span slot="previous">&lt;</span>
+      <span slot="next">&gt;</span>
+    </calendar-date>
+
     <script type="module">
       import "./src/index.ts";
 
diff --git a/src/calendar-date/calendar-date.test.tsx b/src/calendar-date/calendar-date.test.tsx
index 1d402d0..b7cc0e5 100644
--- a/src/calendar-date/calendar-date.test.tsx
+++ b/src/calendar-date/calendar-date.test.tsx
@@ -821,5 +821,19 @@ describe("CalendarDate", () => {
         calendar.shadowRoot!.querySelector("slot:not([name])")!.children
       ).to.have.lengthOf(0);
     });
+
+    it("behaves correctly when named slots are used", async () => {
+      const calendar = await mount(
+        <CalendarDate locale="en-GB" months={2} value="2024-11-02">
+          <span slot="prev">&lt;</span>
+          <span slot="next">&gt;</span>
+        </CalendarDate>
+      );
+      const months = getMonths(calendar);
+
+      expect(months).to.have.lengthOf(2);
+      expect(getMonthHeading(months[0]!)).to.have.text("November");
+      expect(getMonthHeading(months[1]!)).to.have.text("December");
+    });
   });
 });
