Merge pull request #3 from WickyNilliams/feature/types

improve types and related docs
WickyNilliams · Mar 26, 2024 · 96f2dc1 · 96f2dc1
2 parents 96dacfb + 8268860
commit 96f2dc1
Show file tree

Hide file tree

Showing 26 changed files with 11,895 additions and 10,773 deletions.
diff --git a/docs/src/components/IntroExample.astro b/docs/src/components/IntroExample.astro
@@ -2,7 +2,7 @@
 import Example from "./Example.astro";
 ---
 
-<Example class="feature">
+<Example class="intro-example">
   <div class="card">
     <calendar-range months="2">
       <svg
@@ -33,13 +33,14 @@ import Example from "./Example.astro";
 <script is:inline type="module">
   const toISO = (date) => date.toISOString().split("T")[0];
 
+  // pick some dates mid-month
   const today = new Date();
-  const nextWeek = new Date(today);
-  nextWeek.setDate(nextWeek.getDate() + 7);
+  const start = new Date(today.getUTCFullYear(), today.getUTCMonth(), 8);
+  const end = new Date(today.getUTCFullYear(), today.getUTCMonth(), 16);
 
   document
     .querySelector("calendar-range")
-    ?.setAttribute("value", `${toISO(today)}/${toISO(nextWeek)}`);
+    ?.setAttribute("value", `${toISO(start)}/${toISO(end)}`);
 
   await Promise.all([
     customElements.whenDefined("calendar-range"),
@@ -49,121 +50,121 @@ import Example from "./Example.astro";
   document.querySelector(".card")?.classList.add("reveal");
 </script>
 
-<style>
-  .feature {
+<style is:global>
+  .intro-example {
     --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;
+    .grid {
+      display: flex;
+      gap: 1em;
+      justify-content: center;
+      flex-wrap: wrap;
     }
 
-    /* animate card in when ready */
-    &:not(.reveal) {
-      opacity: 0;
+    .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);
+        @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;
-    }
+    calendar-range {
+      svg {
+        height: 16px;
+        width: 16px;
+        fill: none;
+        stroke: var(--icon-color);
+        stroke-width: 1.5;
+      }
 
-    path {
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
+      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) {
+        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):is(:hover, :focus-visible) {
+        --icon-color: black;
+      }
 
-    &::part(button):hover {
-      background: rgba(0, 0, 0, 0.02);
-    }
+      &::part(button):hover {
+        background: rgba(0, 0, 0, 0.02);
+      }
 
-    &::part(button):focus-visible {
-      outline: 2px solid var(--accent);
-      outline-offset: -1px;
+      &::part(button):focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: -1px;
+      }
     }
-  }
 
-  calendar-month {
-    --color-accent: var(--accent);
+    calendar-month {
+      --color-accent: var(--accent);
 
-    &::part(button) {
-      border-radius: var(--radius);
-    }
+      &::part(button) {
+        border-radius: var(--radius);
+      }
 
-    &::part(today) {
-      color: var(--color-accent);
-    }
+      &::part(today) {
+        color: var(--color-accent);
+      }
 
-    &::part(today selected),
-    &::part(today):focus-visible {
-      color: white;
-    }
+      &::part(today selected),
+      &::part(today):focus-visible {
+        color: white;
+      }
 
-    &::part(range-inner) {
-      border-radius: 0;
-    }
+      &::part(range-inner) {
+        border-radius: 0;
+      }
 
-    &::part(range-start) {
-      border-start-end-radius: 0;
-      border-end-end-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-end) {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
 
-    &::part(range-start range-end) {
-      border-radius: var(--radius);
+      &::part(range-start range-end) {
+        border-radius: var(--radius);
+      }
     }
   }
 </style>
diff --git a/docs/src/pages/accessibility.astro b/docs/src/pages/accessibility.astro
@@ -29,14 +29,14 @@ import Note from "../components/Note.astro";
     In some regards the components offered here are akin to design system
     components. They are low-level pieces to a larger puzzle. The components
     themselves strive to offer the best possible accessible <em>baseline</em>.
-    But beyond that, the guarantees that can be made regarding accessiblity are
+    But beyond that, the guarantees that can be made regarding accessibility are
     limited. The way the components get used and combined can still lead to
     inaccessible outcomes.
   </p>
 
   <p>
     If you are building more complex interfaces atop these components, you will
-    need to test and evaluate accessiblity yourself.
+    need to test and evaluate accessibility yourself.
   </p>
 
   <Heading level={2}>Testing</Heading>

diff --git a/docs/src/pages/components/calendar-date.astro b/docs/src/pages/components/calendar-date.astro
@@ -63,11 +63,11 @@ import Link from "../../components/Link.astro";
       <td><code>firstDayOfWeek</code></td>
       <td><code>first-day-of-week</code></td>
       <td>
-        The first day of the week, where Monday is
-        <code>0</code>, Tuesday is <code>1</code>, etc
+        The first day of the week, where Sunday is <code>0</code>, Monday is
+        <code>1</code>, etc
       </td>
       <td><code>number</code></td>
-      <td><code>0</code></td>
+      <td><code>1</code></td>
     </tr>
     <tr>
       <td><code>showOutsideDays</code></td>

diff --git a/docs/src/pages/components/calendar-range.astro b/docs/src/pages/components/calendar-range.astro
@@ -68,12 +68,11 @@ import Link from "../../components/Link.astro";
       <td><code>firstDayOfWeek</code></td>
       <td><code>first-day-of-week</code></td>
       <td>
-        The first day of the week, where Monday is <code>0</code>, Tuesday is <code
-          >1</code
-        >, etc
+        The first day of the week, where Sunday is <code>0</code>, Monday is
+        <code>1</code>, etc
       </td>
       <td><code>number</code></td>
-      <td><code>0</code></td>
+      <td><code>1</code></td>
     </tr>
     <tr>
       <td><code>showOutsideDays</code></td>