remove hover styles from disallowed dates

index.html

@@ -5,8 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cally dev</title>
 
-    <script async type="module" src="./src/index.ts"></script>
-
     <style>
       * {
         box-sizing: border-box;
@@ -88,17 +86,17 @@ <h2>date</h2>
       </div>
     </calendar-date>
 
-    <script>
+    <script type="module">
+      import "./src/index.ts";
+
       const output = document.getElementById("output");
       const formatter = new Intl.DateTimeFormat("en", {
         year: "numeric",
         month: "long",
         day: "numeric",
       });
 
-      function toIso(date) {
-        return date.toISOString().split("T")[0];
-      }
+      const toIso = (date) => date.toISOString().split("T")[0];
 
       if (window.range) {
         let start = null;
@@ -116,6 +114,9 @@ <h2>date</h2>
       }
 
       if (window.date) {
+        date.isDateDisallowed = (date) =>
+          date.getDay() === 0 || date.getDay() === 6;
+
         yearSelect.value = new Date(
           date.getAttribute("value")
         ).getUTCFullYear();

src/calendar-month/calendar-month.tsx

@@ -105,7 +105,7 @@ export const CalendarMonth = c(
           inline-size: 2.25rem;
         }
 
-        button:hover:where(:not(:disabled)) {
+        button:hover:where(:not(:disabled, [aria-disabled])) {
           background: #0000000d;
         }