feat: enhance typography and accessibility in design system

- Added new UI heading utility with specific styles in typography.css.
- Updated typography tests to include new UI heading role and ensure proper size and styling.
- Documented design system audit findings, focusing on accessibility improvements and component consistency.
- Introduced CalendarExamples component to demonstrate calendar functionality with habit tracking.
- Created a shared Field component for consistent labeling and hinting of form controls.
- Implemented comprehensive accessibility tests for calendar and editor components, ensuring proper focus management and keyboard navigation.
- Added structure tests for Field and Card components to verify correct ID generation and heading levels.

src/components/design-system/ContainerShowcase.tsx

@@ -17,10 +17,10 @@ export function ContainerShowcase() {
         <span className="ds-code">Card · soft / outlined</span>
       </div>
       <CardGrid>
-        <Card eyebrow="SOFT SURFACE" heading="A gentle grouping.">
+        <Card headingLevel={4} eyebrow="SOFT SURFACE" heading="A gentle grouping.">
           <p>A neutral fill gathers related content without adding another divider. Use it for summaries, guidance, and a small set of actions.</p>
         </Card>
-        <Card variant="outlined" eyebrow="OUTLINED SURFACE" heading="A clear boundary.">
+        <Card headingLevel={4} variant="outlined" eyebrow="OUTLINED SURFACE" heading="A clear boundary.">
           <p>A fine border defines a standalone group on white. Useful when a form or a focused task needs its own space.</p>
         </Card>
       </CardGrid>
@@ -31,26 +31,24 @@ export function ContainerShowcase() {
       </div>
       <CardGrid layout="bento" aria-label="Interactive bento layout example">
         <Card
+          headingLevel={4}
           span="featured"
           eyebrow="TODAY / YOUR OWN PACE"
           heading={<>Small things, <em>adding up.</em></>}
-          footer={<p className="ds-muted type-small">Interactive example · nothing is saved</p>}
         >
           <div className="ds-card-summary" role="status">
             <p className="type-display">{Number(water === 8) + Number(read)}<span className="type-title ds-muted"> / 2</span></p>
             <p>habits complete</p>
           </div>
-          <p>Make room for a glass of water and a few pages. A little progress belongs here, too.</p>
         </Card>
-        <Card eyebrow="DAILY / 8 GLASSES" heading="Drink water" variant="outlined">
+        <Card headingLevel={4} eyebrow="DAILY / 8 GLASSES" heading="Drink water" variant="outlined">
           <Counter label="bento glasses of water" value={water} target={8} onChange={setWater} />
           <p className="type-small" role="status">{water === 8 ? "Complete for today" : `${8 - water} glasses to go`}</p>
         </Card>
-        <Card eyebrow="A FEW PAGES" heading="Read a little" variant="outlined">
+        <Card headingLevel={4} eyebrow="A FEW PAGES" heading="Read a little" variant="outlined">
           <Checkbox label="Reading done" checked={read} onChange={(event) => setRead(event.target.checked)} />
-          <p className="type-small">One page is a place to start.</p>
         </Card>
-        <Card span="wide" eyebrow="A GENTLE REMINDER" heading="There’s no catching up.">
+        <Card headingLevel={4} span="wide" eyebrow="A GENTLE REMINDER" heading="There’s no catching up.">
           <p>Come back to today. Your next small step is enough.</p>
         </Card>
       </CardGrid>
@@ -58,7 +56,7 @@ export function ContainerShowcase() {
         <p className="ds-footnote">Equal grids suit peer items. Bento gives one summary more room; smaller cards hold short tasks. Both collapse in reading order on small screens. Use one surface per group, with spacing inside and no shadows.</p>
         <Button variant="text" onClick={() => { setWater(3); setRead(false); }}>Reset card examples ↺</Button>
       </div>
-      <pre className="ds-code ds-container-code"><code>{'<CardGrid layout="bento">\n  <Card heading="Today" span="featured">…</Card>\n  <Card heading="Water" variant="outlined">…</Card>\n  <Card heading="Reading" variant="outlined">…</Card>\n  <Card heading="A reminder" span="wide">…</Card>\n</CardGrid>'}</code></pre>
+      <pre className="ds-code ds-container-code"><code>{'<CardGrid layout="bento">\n  <Card heading="Today" headingLevel={4} span="featured">…</Card>\n  <Card heading="Water" headingLevel={4} variant="outlined">…</Card>\n  <Card heading="Reading" headingLevel={4} variant="outlined">…</Card>\n  <Card heading="A reminder" headingLevel={4} span="wide">…</Card>\n</CardGrid>'}</code></pre>
     </section>
   );
 }