diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 9407fa3..3da4cc1 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -18,5 +18,5 @@ jobs:
           node-version: "20.x"
       - run: npm ci
       - run: npm run build
-      - run: npx playwright install --with-deps
+      - run: npx playwright install chromium webkit --with-deps
       - run: npm test
diff --git a/docs/src/components/Color.astro b/docs/src/components/Color.astro
index db28ba7..95d8563 100644
--- a/docs/src/components/Color.astro
+++ b/docs/src/components/Color.astro
@@ -12,7 +12,7 @@ const { color } = Astro.props;
     display: inline-flex;
     align-items: center;
     gap: var(--space-3xs);
-    border-radius: var(--border-radius);
+    padding-block: 0;
   }
   span {
     display: inline-block;
diff --git a/docs/src/components/IntroExample.astro b/docs/src/components/IntroExample.astro
new file mode 100644
index 0000000..977406f
--- /dev/null
+++ b/docs/src/components/IntroExample.astro
@@ -0,0 +1,169 @@
+---
+import Example from "./Example.astro";
+---
+
+<Example class="feature">
+  <div class="card">
+    <calendar-range months="2">
+      <svg
+        aria-label="Previous"
+        slot="button-previous"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path d="M15.75 19.5 8.25 12l7.5-7.5"></path>
+      </svg>
+      <svg
+        aria-label="Next"
+        slot="button-next"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
+      </svg>
+
+      <div class="grid">
+        <calendar-month></calendar-month>
+        <calendar-month offset="1"></calendar-month>
+      </div>
+    </calendar-range>
+  </div>
+</Example>
+
+<script is:inline type="module">
+  const toISO = (date) => date.toISOString().split("T")[0];
+
+  const today = new Date();
+  const nextWeek = new Date(today);
+  nextWeek.setDate(nextWeek.getDate() + 7);
+
+  document
+    .querySelector("calendar-range")
+    ?.setAttribute("value", `${toISO(today)}/${toISO(nextWeek)}`);
+
+  await Promise.all([
+    customElements.whenDefined("calendar-range"),
+    customElements.whenDefined("calendar-month"),
+  ]);
+
+  document.querySelector(".card")?.classList.add("reveal");
+</script>
+
+<style>
+  .feature {
+    --border: #dcdfe5;
+    --radius: 4px;
+    --icon-color: #666;
+    --accent: var(--color-accent);
+  }
+
+  .grid {
+    display: flex;
+    gap: 1em;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .card {
+    padding: var(--space-s-m);
+    border-radius: 5px;
+    border: 1px solid var(--border);
+    background: white;
+    box-shadow:
+      0 1px 5px rgba(0, 0, 0, 0.05),
+      0 0 30px rgba(0, 0, 0, 0.01);
+    inline-size: fit-content;
+    margin-inline: auto;
+    block-size: fit-content;
+    transition:
+      opacity 0.6s ease-in,
+      transform 0.4s ease-out;
+
+    /* avoid reflow */
+    min-block-size: 643px;
+    @media (min-height: 594px) {
+      min-block-size: 402px;
+    }
+
+    /* animate card in when ready */
+    &:not(.reveal) {
+      opacity: 0;
+
+      @media (prefers-reduced-motion: no-preference) {
+        transform: translateY(-3em);
+      }
+    }
+  }
+
+  calendar-range {
+    svg {
+      height: 16px;
+      width: 16px;
+      fill: none;
+      stroke: var(--icon-color);
+      stroke-width: 1.5;
+    }
+
+    path {
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    &::part(button) {
+      width: 30px;
+      height: 30px;
+      border: 1px solid var(--border);
+      background: white;
+      color: var(--icon-color);
+      border-radius: var(--radius);
+    }
+
+    &::part(button):is(:hover, :focus-visible) {
+      --icon-color: black;
+    }
+
+    &::part(button):hover {
+      background: rgba(0, 0, 0, 0.02);
+    }
+
+    &::part(button):focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: -1px;
+    }
+  }
+
+  calendar-month {
+    --color-accent: var(--accent);
+
+    &::part(button) {
+      border-radius: var(--radius);
+    }
+
+    &::part(today) {
+      color: var(--color-accent);
+    }
+
+    &::part(today selected),
+    &::part(today):focus-visible {
+      color: white;
+    }
+
+    &::part(range-inner) {
+      border-radius: 0;
+    }
+
+    &::part(range-start) {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &::part(range-end) {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+    &::part(range-start range-end) {
+      border-radius: var(--radius);
+    }
+  }
+</style>
diff --git a/docs/src/components/PageIntro.astro b/docs/src/components/PageIntro.astro
index 8d43090..6e7d50c 100644
--- a/docs/src/components/PageIntro.astro
+++ b/docs/src/components/PageIntro.astro
@@ -6,7 +6,7 @@
     font-size: var(--step-2);
     color: var(--color-intro);
     font-weight: 300;
-    line-height: 1.4;
+    line-height: 1.3;
     letter-spacing: -0.005em;
     text-wrap: pretty;
   }
diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro
index 5607d66..e308aa5 100644
--- a/docs/src/layouts/Layout.astro
+++ b/docs/src/layouts/Layout.astro
@@ -18,9 +18,8 @@ const { title, root } = Astro.props;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>
-      {title} - Cally
-    </title>
+    <meta name="theme-color" content="#dc2626" />
+    <title>{title} - Cally</title>
 
     <slot name="head" />
   </head>
diff --git a/docs/src/pages/components/calendar-date.astro b/docs/src/pages/components/calendar-date.astro
index b8cb11b..e4c3276 100644
--- a/docs/src/pages/components/calendar-date.astro
+++ b/docs/src/pages/components/calendar-date.astro
@@ -93,15 +93,6 @@ import Link from "../../components/Link.astro";
       <td><code>number</code></td>
       <td><code>1</code></td>
     </tr>
-    <tr>
-      <td><code>dir</code></td>
-      <td><code>dir</code></td>
-      <td>
-        The writing direction. Set to <code>"rtl"</code> for RTL languages
-      </td>
-      <td><code>"ltr" | "rtl"</code></td>
-      <td><code>"ltr"</code></td>
-    </tr>
     <tr>
       <td><code>isDateDisallowed</code></td>
       <td>-</td>
@@ -169,8 +160,8 @@ import Link from "../../components/Link.astro";
   </p>
 
   <p>
-    See the guide on <Link href="/theming/">theming</Link> for a walkthrough of how
-    to style this component.
+    See the guide on <Link href="/guides/theming/">theming</Link> for a walkthrough
+    of how to style this component.
   </p>
 
   <Table>
diff --git a/docs/src/pages/components/calendar-month.astro b/docs/src/pages/components/calendar-month.astro
index 60be672..fa3416b 100644
--- a/docs/src/pages/components/calendar-month.astro
+++ b/docs/src/pages/components/calendar-month.astro
@@ -69,8 +69,8 @@ import Link from "../../components/Link.astro";
   </p>
 
   <p>
-    See the guide on <Link href="/theming/">theming</Link> for a walkthrough of how
-    to style this component.
+    See the guide on <Link href="/guides/theming/">theming</Link> for a walkthrough
+    of how to style this component.
   </p>
 
   <Table>
diff --git a/docs/src/pages/components/calendar-range.astro b/docs/src/pages/components/calendar-range.astro
index 03c563e..3416498 100644
--- a/docs/src/pages/components/calendar-range.astro
+++ b/docs/src/pages/components/calendar-range.astro
@@ -98,15 +98,6 @@ import Link from "../../components/Link.astro";
       <td><code>number</code></td>
       <td><code>1</code></td>
     </tr>
-    <tr>
-      <td><code>dir</code></td>
-      <td><code>dir</code></td>
-      <td>
-        The writing direction. Set to <code>"rtl"</code> for RTL languages
-      </td>
-      <td><code>"ltr" | "rtl"</code></td>
-      <td><code>"ltr"</code></td>
-    </tr>
     <tr>
       <td><code>isDateDisallowed</code></td>
       <td>-</td>
@@ -206,8 +197,8 @@ import Link from "../../components/Link.astro";
   </p>
 
   <p>
-    See the guide on <Link href="/theming/">theming</Link> for a walkthrough of how
-    to style this component.
+    See the guide on <Link href="/guides/theming/">theming</Link> for a walkthrough
+    of how to style this component.
   </p>
 
   <Table>
diff --git a/docs/src/pages/components/index.astro b/docs/src/pages/components/index.astro
index 54a06f9..6d2c95a 100644
--- a/docs/src/pages/components/index.astro
+++ b/docs/src/pages/components/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from "../../layouts/Layout.astro";
+import Link from "../../components/Link.astro";
 ---
 
 <Layout title="API">
@@ -11,8 +12,20 @@ import Layout from "../../layouts/Layout.astro";
   </p>
 
   <ul>
-    <li><a href="./calendar-date/"><code>{`<calendar-date>`}</code></a></li>
-    <li><a href="./calendar-range/"><code>{`<calendar-range>`}</code></a></li>
-    <li><a href="./calendar-month/"><code>{`<calendar-month>`}</code></a></li>
+    <li>
+      <Link href="/components/calendar-date/"
+        ><code>{`<calendar-date>`}</code></Link
+      >
+    </li>
+    <li>
+      <Link href="/components/calendar-range/"
+        ><code>{`<calendar-range>`}</code></Link
+      >
+    </li>
+    <li>
+      <Link href="/components/calendar-month/"
+        ><code>{`<calendar-month>`}</code></Link
+      >
+    </li>
   </ul>
 </Layout>
diff --git a/docs/src/pages/guides/index.astro b/docs/src/pages/guides/index.astro
new file mode 100644
index 0000000..6002344
--- /dev/null
+++ b/docs/src/pages/guides/index.astro
@@ -0,0 +1,22 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Link from "../../components/Link.astro";
+---
+
+<Layout title="Guides">
+  <h1 slot="intro">Guides</h1>
+
+  <p>
+    Learn how to style Cally's components or integrate with external components
+    to build more complex UIs.
+  </p>
+
+  <ul>
+    <li>
+      <Link href="/guides/theming/">Theming</Link>
+    </li>
+    <li>
+      <Link href="/guides/integration/">Integration</Link>
+    </li>
+  </ul>
+</Layout>
diff --git a/docs/src/pages/integration.astro b/docs/src/pages/guides/integration.astro
similarity index 96%
rename from docs/src/pages/integration.astro
rename to docs/src/pages/guides/integration.astro
index aa83fdb..1569726 100644
--- a/docs/src/pages/integration.astro
+++ b/docs/src/pages/guides/integration.astro
@@ -1,10 +1,10 @@
 ---
-import PageIntro from "../components/PageIntro.astro";
-import Layout from "../layouts/Layout.astro";
-import Example from "../components/Example.astro";
-import Note from "../components/Note.astro";
-import Heading from "../components/Heading.astro";
-import Link from "../components/Link.astro";
+import PageIntro from "../../components/PageIntro.astro";
+import Layout from "../../layouts/Layout.astro";
+import Example from "../../components/Example.astro";
+import Note from "../../components/Note.astro";
+import Heading from "../../components/Heading.astro";
+import Link from "../../components/Link.astro";
 ---
 
 <Layout title="Integration">
@@ -122,7 +122,7 @@ import Link from "../components/Link.astro";
 
   <Note>
     For more information on styling and theming the calendar components please
-    see the full <Link href="/theming/">theming</Link> guide.
+    see the full <Link href="/guides/theming/">theming</Link> guide.
   </Note>
 
   <Heading level={2}>The input and toggle button</Heading>
@@ -426,7 +426,7 @@ import Link from "../components/Link.astro";
   <p>
     To find out more about each component, please see the respective
     <Link href="/components/">component API</Link> docs. Or visit the
-    <Link href="/theming/">theming</Link> guide for a more in-depth look at styling
-    the components.
+    <Link href="/guides/theming/">theming</Link> guide for a more in-depth look at
+    styling the components.
   </p>
 </Layout>
diff --git a/docs/src/pages/theming.astro b/docs/src/pages/guides/theming.astro
similarity index 96%
rename from docs/src/pages/theming.astro
rename to docs/src/pages/guides/theming.astro
index 3a174d1..6c46057 100644
--- a/docs/src/pages/theming.astro
+++ b/docs/src/pages/guides/theming.astro
@@ -1,11 +1,11 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import Example from "../components/Example.astro";
-import Color from "../components/Color.astro";
-import Note from "../components/Note.astro";
-import PageIntro from "../components/PageIntro.astro";
-import Heading from "../components/Heading.astro";
-import Link from "../components/Link.astro";
+import Layout from "../../layouts/Layout.astro";
+import Example from "../../components/Example.astro";
+import Color from "../../components/Color.astro";
+import Note from "../../components/Note.astro";
+import PageIntro from "../../components/PageIntro.astro";
+import Heading from "../../components/Heading.astro";
+import Link from "../../components/Link.astro";
 
 const colorAccent = "#7048e8";
 const colorAccentSecondary = "#845ef7";
@@ -593,8 +593,8 @@ const colorTextOnAccent = "#ffffff";
   <p>
     To find out more about each component, please see the respective
     <Link href="/components/">component API</Link> docs. Or visit the
-    <Link href="/theming/">theming</Link> guide for a more in-depth look at styling
-    the components.
+    <Link href="/guides/theming/">theming</Link> guide for a more in-depth look at
+    styling the components.
   </p>
 </Layout>
 
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
index 0708ce0..7a3ef3e 100644
--- a/docs/src/pages/index.astro
+++ b/docs/src/pages/index.astro
@@ -5,55 +5,15 @@ import PageIntro from "../components/PageIntro.astro";
 import Example from "../components/Example.astro";
 import Heading from "../components/Heading.astro";
 import Link from "../components/Link.astro";
+import IntroExample from "../components/IntroExample.astro";
 
 const tagline = "Small, feature-rich calendar components";
 ---
 
 <Layout title={tagline} root>
-  <script is:inline type="module" slot="head">
-    const toISO = (date) => date.toISOString().split("T")[0];
-
-    const today = new Date();
-    const nextWeek = new Date(today);
-    nextWeek.setDate(nextWeek.getDate() + 7);
-
-    document
-      .querySelector("calendar-range")
-      ?.setAttribute("value", `${toISO(today)}/${toISO(nextWeek)}`);
-
-    await customElements.whenDefined("calendar-range");
-    document.querySelector(".card")?.classList.remove("card-initial");
-  </script>
-
   <PageIntro slot="intro">{tagline}</PageIntro>
 
-  <Example class="feature">
-    <div class="card card-initial">
-      <calendar-range months="2">
-        <svg
-          aria-label="Previous"
-          slot="button-previous"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-        >
-          <path d="M15.75 19.5 8.25 12l7.5-7.5"></path>
-        </svg>
-        <svg
-          aria-label="Next"
-          slot="button-next"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-        >
-          <path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
-        </svg>
-
-        <div class="grid">
-          <calendar-month></calendar-month>
-          <calendar-month offset="1"></calendar-month>
-        </div>
-      </calendar-range>
-    </div>
-  </Example>
+  <IntroExample />
 
   <Heading level={2}>Goals</Heading>
 
@@ -196,10 +156,11 @@ const tagline = "Small, feature-rich calendar components";
   <p>
     For a detailed look at each component, check out the respective
     <Link href="/components/">component API</Link> docs. The
-    <Link href="/theming/">theming</Link> guide to explains how to style the components
-    to match your designs. And the
-    <Link href="/integration/">integration</Link> guide explains how to compose Cally's
-    components to build a date/range picker using your own or third-party components.
+    <Link href="/guides/theming/">theming</Link> guide to explains how to style the
+    components to match your designs. And the
+    <Link href="/guides/integration/">integration</Link> guide explains how to compose
+    Cally's components to build a date/range picker using your own or third-party
+    components.
   </p>
 
   <p>
@@ -225,116 +186,6 @@ const tagline = "Small, feature-rich calendar components";
 </Layout>
 
 <style is:global>
-  .feature {
-    --border: #dcdfe5;
-    --radius: 4px;
-    --icon-color: #666;
-    --accent: var(--color-accent);
-
-    .card {
-      padding: var(--space-s-m);
-      border-radius: 5px;
-      border: 1px solid var(--border);
-      background: white;
-      box-shadow:
-        0 1px 5px rgba(0, 0, 0, 0.05),
-        0 0 30px rgba(0, 0, 0, 0.01);
-      inline-size: fit-content;
-      margin-inline: auto;
-      block-size: fit-content;
-      transition:
-        opacity 0.6s ease-in,
-        transform 0.4s ease-out;
-      min-block-size: 402px;
-    }
-
-    .card-initial {
-      opacity: 0;
-
-      @media (prefers-reduced-motion: no-preference) {
-        transform: translateY(-3em);
-      }
-    }
-
-    .grid {
-      display: flex;
-      gap: 1em;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-
-    :is(calendar-range, calendar-month)::part(button) {
-      border-radius: var(--radius);
-    }
-
-    calendar-range {
-      svg {
-        height: 16px;
-        width: 16px;
-        fill: none;
-        stroke: var(--icon-color);
-        stroke-width: 1.5;
-      }
-
-      path {
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
-
-      &::part(button) {
-        width: 30px;
-        height: 30px;
-        border: 1px solid var(--border);
-        background: white;
-        color: var(--icon-color);
-      }
-
-      &::part(button):is(:hover, :focus-visible) {
-        --icon-color: black;
-      }
-
-      &::part(button):hover {
-        background: rgba(0, 0, 0, 0.02);
-      }
-
-      &::part(button):focus-visible {
-        outline: 2px solid var(--accent);
-        outline-offset: -1px;
-      }
-    }
-
-    calendar-month {
-      --color-accent: var(--accent);
-
-      &::part(today) {
-        color: var(--color-accent);
-      }
-
-      &::part(today selected),
-      &::part(today):focus-visible {
-        color: white;
-      }
-
-      &::part(range-inner) {
-        border-radius: 0;
-      }
-
-      &::part(range-start) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &::part(range-end) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-
-      &::part(range-start range-end) {
-        border-radius: var(--radius);
-      }
-    }
-  }
-
   calendar-date,
   calendar-range {
     margin: 0 auto;
diff --git a/docs/src/styles/main.css b/docs/src/styles/main.css
index c87487a..61be79e 100644
--- a/docs/src/styles/main.css
+++ b/docs/src/styles/main.css
@@ -143,6 +143,10 @@
       border-radius: 1px;
       text-decoration: none;
     }
+
+    &:has(code) {
+      text-underline-offset: 3px;
+    }
   }
 
   h1 {
@@ -173,5 +177,6 @@
     background: var(--color-code);
     padding-block: 0.1em;
     padding-inline: 0.3em;
+    border-radius: var(--border-radius);
   }
 }
diff --git a/src/calendar-base/calendar-base.tsx b/src/calendar-base/calendar-base.tsx
index 3afd237..3d868d4 100644
--- a/src/calendar-base/calendar-base.tsx
+++ b/src/calendar-base/calendar-base.tsx
@@ -2,7 +2,7 @@ import { css } from "atomico";
 import { CalendarMonthContext } from "../calendar-month/CalendarMonthContext.js";
 import { reset } from "../utils/styles.js";
 import type { DaysOfWeek } from "../utils/utils.js";
-import { PlainDate } from "../utils/PlainDate.js";
+import type { PlainDate } from "../utils/temporal.js";
 import type { DateWindow } from "../utils/DateWindow.js";
 
 type CalendarBaseProps = {
@@ -12,7 +12,6 @@ type CalendarBaseProps = {
   locale: string | undefined;
   formatter: Intl.DateTimeFormat;
   isDateDisallowed: (date: Date) => boolean;
-  dir: "ltr" | "rtl";
   previous?: () => void;
   next?: () => void;
   onSelect: (e: CustomEvent<PlainDate>) => void;
@@ -81,10 +80,6 @@ export const props = {
     type: String,
     value: "",
   },
-  dir: {
-    type: String,
-    value: (): "ltr" | "rtl" => "ltr",
-  },
   isDateDisallowed: {
     type: Function,
     value: (date: Date) => false,
diff --git a/src/calendar-base/useCalendarBase.ts b/src/calendar-base/useCalendarBase.ts
index c17a27e..337f06d 100644
--- a/src/calendar-base/useCalendarBase.ts
+++ b/src/calendar-base/useCalendarBase.ts
@@ -1,7 +1,6 @@
 import { useState, useEvent, useHost } from "atomico";
-import { type Duration, DateWindow } from "../utils/DateWindow.js";
-import { PlainDate } from "../utils/PlainDate.js";
-import { PlainYearMonth } from "../utils/PlainYearMonth.js";
+import { DateWindow } from "../utils/DateWindow.js";
+import { type PlainDate, PlainYearMonth } from "../utils/temporal.js";
 import { useDateProp, useDateFormatter } from "../utils/hooks.js";
 import { today } from "../utils/utils.js";
 
@@ -13,42 +12,41 @@ type CalendarBaseOptions = {
 export function useCalendarBase({ months, locale }: CalendarBaseOptions) {
   const [min] = useDateProp("min");
   const [max] = useDateProp("max");
-  const dispatch = useEvent<string>("focusday");
+  const dispatchFocusDay = useEvent<string>("focusday");
+  const dispatch = useEvent("change");
 
-  const todaysDate = today();
-  const start = todaysDate.toPlainYearMonth();
+  const [dateWindow, setDateWindow] = useState(() => {
+    const todaysDate = today();
+    const start =
+      months === 12
+        ? new PlainYearMonth(todaysDate.year, 1)
+        : todaysDate.toPlainYearMonth();
 
-  const [dateWindow, setDateWindow] = useState(
-    new DateWindow(
-      months === 12 ? new PlainYearMonth(start.year, 1) : start,
-      { months },
-      todaysDate
-    )
-  );
+    return new DateWindow(start, { months }, todaysDate);
+  });
 
   function next() {
     const next = dateWindow.next();
     setDateWindow(next);
-    dispatch(next.focusedDate.toString());
+    dispatchFocusDay(next.focusedDate.toString());
   }
 
   function previous() {
     const prev = dateWindow.prev();
     setDateWindow(prev);
-    dispatch(prev.focusedDate.toString());
+    dispatchFocusDay(prev.focusedDate.toString());
   }
 
   const host = useHost();
   const formatter = useDateFormatter(locale, { year: "numeric" });
 
-  const canNext =
-    max == null || PlainYearMonth.compare(max, dateWindow.end) > 0;
-  const canPrevious =
-    min == null || PlainYearMonth.compare(min, dateWindow.start) < 0;
+  const canNext = max == null || !dateWindow.contains(max);
+  const canPrevious = min == null || !dateWindow.contains(min);
 
   return {
     formatter,
     dateWindow,
+    dispatch,
     setFocusedDate(day: PlainDate) {
       setDateWindow(dateWindow.adjust(day));
     },
diff --git a/src/calendar-date/calendar-date.test.tsx b/src/calendar-date/calendar-date.test.tsx
index ae2556b..3d9fbb5 100644
--- a/src/calendar-date/calendar-date.test.tsx
+++ b/src/calendar-date/calendar-date.test.tsx
@@ -12,10 +12,9 @@ import {
   getPrevPageButton,
   mount,
 } from "../utils/test.js";
-
 import { CalendarMonth } from "../calendar-month/calendar-month.js";
 import { CalendarDate } from "./calendar-date.js";
-import type { PlainDate } from "../utils/PlainDate.js";
+import type { PlainDate } from "../utils/temporal.js";
 
 type TestProps = {
   onchange: (e: Event) => void;
diff --git a/src/calendar-date/calendar-date.tsx b/src/calendar-date/calendar-date.tsx
index 61652b5..26925ea 100644
--- a/src/calendar-date/calendar-date.tsx
+++ b/src/calendar-date/calendar-date.tsx
@@ -1,5 +1,5 @@
 import { c, useEffect, useEvent } from "atomico";
-import { PlainDate } from "../utils/PlainDate.js";
+import type { PlainDate } from "../utils/temporal.js";
 import { useDateProp } from "../utils/hooks.js";
 import { CalendarBase, styles, props } from "../calendar-base/calendar-base.js";
 import { useCalendarBase } from "../calendar-base/useCalendarBase.js";
@@ -7,7 +7,6 @@ import { useCalendarBase } from "../calendar-base/useCalendarBase.js";
 export const CalendarDate = c(
   (props) => {
     const [value, setValue] = useDateProp("value");
-    const dispatch = useEvent("change");
     const calendar = useCalendarBase(props);
 
     useEffect(() => {
@@ -23,7 +22,7 @@ export const CalendarDate = c(
 
     function handleSelect(e: CustomEvent<PlainDate>) {
       setValue(e.detail);
-      dispatch();
+      calendar.dispatch();
     }
 
     return (
diff --git a/src/calendar-month/CalendarMonthContext.ts b/src/calendar-month/CalendarMonthContext.ts
index 4bd701e..488a652 100644
--- a/src/calendar-month/CalendarMonthContext.ts
+++ b/src/calendar-month/CalendarMonthContext.ts
@@ -1,6 +1,6 @@
 import { createContext } from "atomico";
 import { DateWindow } from "../utils/DateWindow.js";
-import { PlainDate } from "../utils/PlainDate.js";
+import type { PlainDate } from "../utils/temporal.js";
 import { today, type DaysOfWeek } from "../utils/utils.js";
 
 type CalendarMonthContextBase = {
@@ -8,7 +8,6 @@ type CalendarMonthContextBase = {
   max?: PlainDate;
   firstDayOfWeek: DaysOfWeek;
   isDateDisallowed?: (date: Date) => boolean;
-  dir: "ltr" | "rtl";
   dateWindow: DateWindow;
   locale: string | undefined;
   showOutsideDays?: boolean;
@@ -31,7 +30,6 @@ export const CalendarMonthContext = createContext<CalendarMonthContextValue>({
   firstDayOfWeek: 0,
   highlightedRange: {},
   isDateDisallowed: () => false,
-  dir: "ltr",
   locale: undefined,
   dateWindow: new DateWindow(t.toPlainYearMonth(), { months: 1 }, t),
 });
diff --git a/src/calendar-month/calendar-month.test.tsx b/src/calendar-month/calendar-month.test.tsx
index c61d3dd..616309c 100644
--- a/src/calendar-month/calendar-month.test.tsx
+++ b/src/calendar-month/calendar-month.test.tsx
@@ -8,7 +8,7 @@ import {
 } from "./CalendarMonthContext.js";
 import { CalendarMonth } from "../calendar-month/calendar-month.js";
 import { fixture } from "atomico/test-dom";
-import { PlainDate } from "../utils/PlainDate.js";
+import { PlainDate } from "../utils/temporal.js";
 import { DateWindow } from "../utils/DateWindow.js";
 import { today } from "../utils/utils.js";
 
@@ -24,6 +24,7 @@ interface TestPropsBase {
   onselectday: (e: CustomEvent<PlainDate>) => void;
   onfocusday: (e: CustomEvent<PlainDate>) => void;
   focusedDate: PlainDate;
+  dir: "ltr" | "rtl";
 }
 
 interface DateTestProps extends TestPropsBase, DateContext {}
@@ -35,6 +36,7 @@ function Fixture({
   onselectday,
   onfocusday,
   focusedDate = today(),
+  dir,
   ...props
 }: Partial<DateTestProps> | Partial<RangeTestProps>): VNodeAny {
   const dateWindow = new DateWindow(
@@ -47,9 +49,9 @@ function Fixture({
     <CalendarMonthContext
       onselectday={onselectday}
       onfocusday={onfocusday}
+      dir={dir}
       value={{
         firstDayOfWeek: 1,
-        dir: "ltr",
         locale: "en-GB",
         dateWindow,
         ...props,
diff --git a/src/calendar-month/useCalendarMonth.ts b/src/calendar-month/useCalendarMonth.ts
index f70c9b1..664130a 100644
--- a/src/calendar-month/useCalendarMonth.ts
+++ b/src/calendar-month/useCalendarMonth.ts
@@ -8,7 +8,7 @@ import {
   startOfWeek,
   today,
 } from "../utils/utils.js";
-import { PlainDate } from "../utils/PlainDate.js";
+import type { PlainDate } from "../utils/temporal.js";
 import type { CalendarMonthContextValue } from "./CalendarMonthContext.js";
 
 function cx(map: Record<string, boolean | null | undefined>) {
@@ -33,15 +33,8 @@ type UseCalendarMonthOptions = {
 
 export function useCalendarMonth({ props, context }: UseCalendarMonthOptions) {
   const { offset } = props;
-  const {
-    firstDayOfWeek,
-    isDateDisallowed,
-    dir,
-    min,
-    max,
-    dateWindow,
-    locale,
-  } = context;
+  const { firstDayOfWeek, isDateDisallowed, min, max, dateWindow, locale } =
+    context;
 
   const todaysDate = today();
   const dayNamesLong = useDayNames("long", firstDayOfWeek, locale);
@@ -67,11 +60,11 @@ export function useCalendarMonth({ props, context }: UseCalendarMonthOptions) {
     dispatchFocusDay(clamp(date, min, max));
   }
 
-  function onKeyDown(event: KeyboardEvent) {
-    const isLTR = dir === "ltr";
-    let date: PlainDate | undefined;
+  function onKeyDown(e: KeyboardEvent) {
+    const isLTR = (e.target as HTMLElement).matches(":dir(ltr)");
+    let date: PlainDate;
 
-    switch (event.key) {
+    switch (e.key) {
       case "ArrowRight":
         date = focusedDate.add({ days: isLTR ? 1 : -1 });
         break;
@@ -85,10 +78,10 @@ export function useCalendarMonth({ props, context }: UseCalendarMonthOptions) {
         date = focusedDate.add({ days: -7 });
         break;
       case "PageUp":
-        date = focusedDate.add(event.shiftKey ? { years: -1 } : { months: -1 });
+        date = focusedDate.add(e.shiftKey ? { years: -1 } : { months: -1 });
         break;
       case "PageDown":
-        date = focusedDate.add(event.shiftKey ? { years: 1 } : { months: 1 });
+        date = focusedDate.add(e.shiftKey ? { years: 1 } : { months: 1 });
         break;
       case "Home":
         date = startOfWeek(focusedDate, firstDayOfWeek);
@@ -101,7 +94,7 @@ export function useCalendarMonth({ props, context }: UseCalendarMonthOptions) {
     }
 
     focusDay(date);
-    event.preventDefault();
+    e.preventDefault();
   }
 
   function getDayProps(date: PlainDate) {
diff --git a/src/calendar-range/calendar-range.tsx b/src/calendar-range/calendar-range.tsx
index 95cc789..051d5e6 100644
--- a/src/calendar-range/calendar-range.tsx
+++ b/src/calendar-range/calendar-range.tsx
@@ -1,5 +1,5 @@
 import { c, useEffect, useEvent, useMemo, useState } from "atomico";
-import { PlainDate } from "../utils/PlainDate.js";
+import { PlainDate } from "../utils/temporal.js";
 import { inRange } from "../utils/utils.js";
 import { useDateRangeProp } from "../utils/hooks.js";
 import { CalendarBase, styles, props } from "../calendar-base/calendar-base.js";
@@ -10,7 +10,6 @@ type Tentative = { first: PlainDate; second: PlainDate };
 export const CalendarRange = c(
   (props) => {
     const [value, setValue] = useDateRangeProp("value");
-    const dispatch = useEvent("change");
 
     const calendar = useCalendarBase(props);
 
@@ -52,7 +51,7 @@ export const CalendarRange = c(
       } else {
         setValue(sorted[0]!, sorted[1]!);
         setTentative(undefined);
-        dispatch();
+        calendar.dispatch();
       }
     }
 
diff --git a/src/utils/DateWindow.ts b/src/utils/DateWindow.ts
index cecf209..607e4aa 100644
--- a/src/utils/DateWindow.ts
+++ b/src/utils/DateWindow.ts
@@ -1,5 +1,4 @@
-import { type PlainDate } from "./PlainDate.js";
-import { PlainYearMonth } from "./PlainYearMonth.js";
+import { type PlainDate, PlainYearMonth } from "./temporal.js";
 
 export type Duration = { months: number };
 
diff --git a/src/utils/PlainYearMonth.ts b/src/utils/PlainYearMonth.ts
deleted file mode 100644
index cad7f22..0000000
--- a/src/utils/PlainYearMonth.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { PlainDate } from "./PlainDate.js";
-import { compare } from "./utils.js";
-
-type Duration = { months?: number; years?: number };
-type CompareResult = -1 | 0 | 1;
-
-function durationToMonths(duration: Duration): number {
-  return (duration.months ?? 0) + (duration.years ?? 0) * 12;
-}
-
-function addMonths(yearMonth: PlainYearMonth, months: number) {
-  const date = yearMonth.toDate();
-  date.setUTCMonth(date.getUTCMonth() + months);
-  return new PlainYearMonth(date.getUTCFullYear(), date.getUTCMonth() + 1);
-}
-
-export class PlainYearMonth {
-  constructor(
-    public readonly year: number,
-    public readonly month: number
-  ) {}
-
-  add(duration: Duration) {
-    return addMonths(this, durationToMonths(duration));
-  }
-
-  subtract(duration: Duration) {
-    return addMonths(this, -durationToMonths(duration));
-  }
-
-  toDate() {
-    return new Date(Date.UTC(this.year, this.month - 1, 1));
-  }
-
-  equals(date: { year: number; month: number }) {
-    return this.year === date.year && this.month === date.month;
-  }
-
-  toPlainDate() {
-    return new PlainDate(this.year, this.month, 1);
-  }
-
-  static compare(
-    one: PlainYearMonth | PlainDate,
-    two: PlainYearMonth | PlainDate
-  ): CompareResult {
-    const oneYearMonth =
-      one instanceof PlainDate ? one.toPlainYearMonth() : one;
-    const twoYearMonth =
-      two instanceof PlainDate ? two.toPlainYearMonth() : two;
-    return compare(oneYearMonth.toDate(), twoYearMonth.toDate());
-  }
-}
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index f71e112..b435048 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -1,6 +1,5 @@
 import { useProp, useMemo } from "atomico";
-import { PlainDate } from "./PlainDate";
-import type { PlainYearMonth } from "./PlainYearMonth";
+import { PlainDate, type PlainYearMonth } from "./temporal.js";
 import { getDayNames, type DaysOfWeek, type WeekdayOption } from "./utils";
 
 function safeFrom<T extends PlainDate | PlainYearMonth>(
diff --git a/src/utils/PlainDate.ts b/src/utils/temporal.ts
similarity index 73%
rename from src/utils/PlainDate.ts
rename to src/utils/temporal.ts
index fb34905..587bd61 100644
--- a/src/utils/PlainDate.ts
+++ b/src/utils/temporal.ts
@@ -1,8 +1,6 @@
-import { PlainYearMonth } from "./PlainYearMonth.js";
 import { endOfMonth, clamp, compare } from "./utils.js";
 
 type Duration = { months: number } | { years: number } | { days: number };
-
 type CompareResult = -1 | 0 | 1;
 
 const ISO_DATE = /^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[0-1])$/;
@@ -138,3 +136,53 @@ export class PlainDate {
     );
   }
 }
+
+type YearMonthDuration = { months?: number; years?: number };
+
+function durationToMonths(duration: YearMonthDuration): number {
+  return (duration.months ?? 0) + (duration.years ?? 0) * 12;
+}
+
+function addMonths(yearMonth: PlainYearMonth, months: number): PlainYearMonth {
+  const date = yearMonth.toDate();
+  date.setUTCMonth(date.getUTCMonth() + months);
+  return new PlainYearMonth(date.getUTCFullYear(), date.getUTCMonth() + 1);
+}
+
+export class PlainYearMonth {
+  constructor(
+    public readonly year: number,
+    public readonly month: number
+  ) {}
+
+  add(duration: YearMonthDuration) {
+    return addMonths(this, durationToMonths(duration));
+  }
+
+  subtract(duration: YearMonthDuration) {
+    return addMonths(this, -durationToMonths(duration));
+  }
+
+  toDate() {
+    return new Date(Date.UTC(this.year, this.month - 1, 1));
+  }
+
+  equals(date: { year: number; month: number }) {
+    return this.year === date.year && this.month === date.month;
+  }
+
+  toPlainDate() {
+    return new PlainDate(this.year, this.month, 1);
+  }
+
+  static compare(
+    one: PlainYearMonth | PlainDate,
+    two: PlainYearMonth | PlainDate
+  ): CompareResult {
+    const oneYearMonth =
+      one instanceof PlainDate ? one.toPlainYearMonth() : one;
+    const twoYearMonth =
+      two instanceof PlainDate ? two.toPlainYearMonth() : two;
+    return compare(oneYearMonth.toDate(), twoYearMonth.toDate());
+  }
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index fa2adbc..f452087 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,5 +1,4 @@
-import { PlainDate } from "./PlainDate.js";
-import { PlainYearMonth } from "./PlainYearMonth.js";
+import { PlainDate, type PlainYearMonth } from "./temporal.js";
 
 export type DaysOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -90,7 +89,7 @@ function getDaysInRange(start: PlainDate, end: PlainDate): PlainDate[] {
 }
 
 function chunk<T>(array: T[], chunkSize: number): T[][] {
-  const result: T[][] = [];
+  const result = [];
 
   for (let i = 0; i < array.length; i += chunkSize) {
     result.push(array.slice(i, i + chunkSize));