@xenide-io/the-old-ui-theme 0.7.0 → 0.9.0

package/src/components/ui/SettingsLayout.tsx

@@ -37,7 +37,7 @@ export function SettingsNav({ groups, className, ...props }: SettingsNavProps) {
     <div className={cn("ph-settings-nav", className)} {...props}>
       {groups.map((group, index) => (
         <div className="ph-settings-nav__group" key={index}>
-          <h3>{group.label}</h3>
+          <p className="ph-settings-nav__heading">{group.label}</p>
           <div className="ph-settings-nav__items">
             {group.items.map((item) => (
               <a

package/src/components/ui/Stat.tsx

@@ -16,7 +16,7 @@ const toneMap: Record<StatTone, string> = {
   brand: "text-ph-brand",
   blue: "text-ph-blue",
   purple: "text-ph-purple",
-  warning: "text-amber-900",
+  warning: "text-ph-warning",
 };
 
 const statMap: Record<StatTone, string> = {
@@ -24,7 +24,8 @@ const statMap: Record<StatTone, string> = {
   brand: "",
   blue: "",
   purple: "",
-  warning: "border-amber-200 bg-amber-50/70",
+  warning:
+    "border-[color:color-mix(in_srgb,var(--ph-warning)_30%,var(--ph-border))] bg-[color:color-mix(in_srgb,var(--ph-warning)_10%,var(--ph-surface))]",
 };
 
 export function Stat({ icon, label, value, footer, tone = "default", className, ...props }: StatProps) {

package/src/components/ui/Table.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { CSSProperties, ReactNode } from "react";
+import type { CSSProperties, Key, ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 export interface TableColumn<T> {
@@ -17,6 +17,7 @@ export interface TableProps<T> {
   compact?: boolean;
   ribbon?: boolean;
   getRowStyle?: (row: T) => CSSProperties | undefined;
+  getRowKey?: (row: T, index: number) => Key;
   className?: string;
   caption?: string;
 }
@@ -28,11 +29,15 @@ export function Table<T>({
   compact = false,
   ribbon = false,
   getRowStyle,
+  getRowKey,
   className,
   caption,
 }: TableProps<T>) {
   return (
-    <div className={cn("ph-table-wrap", compact && "ph-table-compact", className)}>
+    <div
+      className={cn("ph-table-wrap", compact && "ph-table-compact", className)}
+      tabIndex={0}
+    >
       <table className={cn("ph-table", zebra && "ph-table-zebra", ribbon && "ph-table--ribbon")}>
         {caption && <caption className="sr-only">{caption}</caption>}
         <thead>
@@ -44,7 +49,7 @@ export function Table<T>({
         </thead>
         <tbody>
           {data.map((row, i) => (
-            <tr key={i} style={getRowStyle?.(row)}>
+            <tr key={getRowKey?.(row, i) ?? i} style={getRowStyle?.(row)}>
               {columns.map((col) => (
                 <td key={col.key} className={col.className}>{col.cell(row)}</td>
               ))}

package/src/components/ui/Tooltip.test.tsx

@@ -1,6 +1,6 @@
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { Tooltip, TooltipProvider } from "@/components/ui/Tooltip";
 
 afterEach(cleanup);
@@ -55,4 +55,73 @@ describe("Tooltip", () => {
     await waitFor(() => expect(screen.queryByRole("tooltip")).not.toBeInTheDocument());
     expect(trigger).toHaveFocus();
   });
+
+  it("keeps hoverable content open while the pointer moves from its trigger", async () => {
+    const user = userEvent.setup();
+    render(
+      <Tooltip content="Hoverable details" delayDuration={0}>
+        <button type="button">Hover target</button>
+      </Tooltip>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Hover target" });
+    await user.hover(trigger);
+    const tooltip = await screen.findByRole("tooltip");
+    await user.unhover(trigger);
+    await user.hover(tooltip);
+
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+    await user.unhover(tooltip);
+    await waitFor(() => expect(screen.queryByRole("tooltip")).not.toBeInTheDocument());
+  });
+
+  it("closes when the trigger is left if hoverable content is disabled", async () => {
+    const user = userEvent.setup();
+    render(
+      <Tooltip content="Non-hoverable details" delayDuration={0} disableHoverableContent>
+        <button type="button">Hover target</button>
+      </Tooltip>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Hover target" });
+    await user.hover(trigger);
+    expect(await screen.findByRole("tooltip")).toBeInTheDocument();
+    await user.unhover(trigger);
+
+    await waitFor(() => expect(screen.queryByRole("tooltip")).not.toBeInTheDocument());
+  });
+
+  it("keeps content within its collision padding", async () => {
+    const user = userEvent.setup();
+    const originalInnerWidth = window.innerWidth;
+    const originalInnerHeight = window.innerHeight;
+    Object.defineProperty(window, "innerWidth", { configurable: true, value: 200 });
+    Object.defineProperty(window, "innerHeight", { configurable: true, value: 100 });
+    const rect = vi
+      .spyOn(HTMLElement.prototype, "getBoundingClientRect")
+      .mockImplementation(function (this: HTMLElement) {
+        if (this.getAttribute("role") === "tooltip") {
+          return new DOMRect(0, 0, 100, 30);
+        }
+        return new DOMRect(2, 2, 20, 20);
+      });
+
+    try {
+      render(
+        <Tooltip content="Padded details" collisionPadding={16} delayDuration={0}>
+          <button type="button">Padded target</button>
+        </Tooltip>,
+      );
+
+      await user.hover(screen.getByRole("button", { name: "Padded target" }));
+      const tooltip = await screen.findByRole("tooltip");
+      await waitFor(() => {
+        expect(tooltip.parentElement).toHaveStyle({ left: "16px", top: "16px" });
+      });
+    } finally {
+      rect.mockRestore();
+      Object.defineProperty(window, "innerWidth", { configurable: true, value: originalInnerWidth });
+      Object.defineProperty(window, "innerHeight", { configurable: true, value: originalInnerHeight });
+    }
+  });
 });

package/src/components/ui/Tooltip.tsx

@@ -3,9 +3,11 @@
 import {
   cloneElement,
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useId,
+  useLayoutEffect,
   useRef,
   useState,
   type HTMLAttributes,
@@ -29,12 +31,14 @@ export interface TooltipProps {
   side?: TooltipSide;
   align?: TooltipAlign;
   sideOffset?: number;
+  /** Minimum distance between the tooltip and the viewport edge. */
   collisionPadding?: number;
   className?: string;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   delayDuration?: number;
+  /** Prevents the pointer from keeping the tooltip open over its content. */
   disableHoverableContent?: boolean;
 }
 
@@ -53,9 +57,11 @@ export function TooltipProvider({
 
 function tooltipPosition(
   trigger: DOMRect,
+  content: DOMRect,
   side: TooltipSide,
   align: TooltipAlign,
   offset: number,
+  collisionPadding: number,
 ) {
   const horizontal =
     align === "start"
@@ -69,28 +75,20 @@ function tooltipPosition(
       : align === "end"
         ? trigger.bottom
         : trigger.top + trigger.height / 2;
-  if (side === "top")
-    return {
-      left: horizontal,
-      top: trigger.top - offset,
-      transform: "translate(-50%, -100%)",
-    };
-  if (side === "bottom")
-    return {
-      left: horizontal,
-      top: trigger.bottom + offset,
-      transform: "translate(-50%, 0)",
-    };
-  if (side === "left")
-    return {
-      left: trigger.left - offset,
-      top: vertical,
-      transform: "translate(-100%, -50%)",
-    };
+  const position =
+    side === "top"
+      ? { left: horizontal - content.width / 2, top: trigger.top - offset - content.height }
+      : side === "bottom"
+        ? { left: horizontal - content.width / 2, top: trigger.bottom + offset }
+        : side === "left"
+          ? { left: trigger.left - offset - content.width, top: vertical - content.height / 2 }
+          : { left: trigger.right + offset, top: vertical - content.height / 2 };
+  const maxLeft = Math.max(collisionPadding, window.innerWidth - content.width - collisionPadding);
+  const maxTop = Math.max(collisionPadding, window.innerHeight - content.height - collisionPadding);
+
   return {
-    left: trigger.right + offset,
-    top: vertical,
-    transform: "translate(0, -50%)",
+    left: Math.min(Math.max(position.left, collisionPadding), maxLeft),
+    top: Math.min(Math.max(position.top, collisionPadding), maxTop),
   };
 }
 
@@ -100,15 +98,18 @@ export function Tooltip({
   side = "top",
   align = "center",
   sideOffset = 7,
+  collisionPadding = 8,
   className,
   open,
   defaultOpen = false,
   onOpenChange,
   delayDuration,
+  disableHoverableContent = false,
 }: TooltipProps) {
   const providerDelay = useContext(TooltipDelayContext);
   const generatedId = useId().replace(/:/g, "");
   const triggerRef = useRef<HTMLSpanElement>(null);
+  const contentRef = useRef<HTMLSpanElement>(null);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const [position, setPosition] = useState<ReturnType<
@@ -130,17 +131,19 @@ export function Tooltip({
     timerRef.current = null;
   }
 
-  function updatePosition() {
-    if (!triggerRef.current) return;
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !contentRef.current) return;
     setPosition(
       tooltipPosition(
         triggerRef.current.getBoundingClientRect(),
+        contentRef.current.getBoundingClientRect(),
         side,
         align,
         sideOffset,
+        collisionPadding,
       ),
     );
-  }
+  }, [align, collisionPadding, side, sideOffset]);
 
   function show(immediate: boolean) {
     clearTimer();
@@ -155,6 +158,20 @@ export function Tooltip({
     setOpen(false);
   }
 
+  function hideFromTrigger() {
+    if (disableHoverableContent) {
+      hide();
+      return;
+    }
+
+    clearTimer();
+    timerRef.current = setTimeout(() => setOpen(false), 100);
+  }
+
+  useLayoutEffect(() => {
+    if (isOpen) updatePosition();
+  }, [isOpen, updatePosition]);
+
   useEffect(() => {
     if (!isOpen) return;
     const reposition = () => updatePosition();
@@ -164,7 +181,7 @@ export function Tooltip({
       window.removeEventListener("resize", reposition);
       window.removeEventListener("scroll", reposition, true);
     };
-  });
+  }, [isOpen, updatePosition]);
 
   useEffect(() => () => clearTimer(), []);
 
@@ -179,7 +196,7 @@ export function Tooltip({
         ref={triggerRef}
         className="inline-flex"
         onMouseEnter={() => show(false)}
-        onMouseLeave={hide}
+        onMouseLeave={hideFromTrigger}
         onFocusCapture={() => show(true)}
         onBlurCapture={hide}
         onKeyDown={(event) => {
@@ -188,17 +205,24 @@ export function Tooltip({
       >
         {trigger}
       </span>
-      {isOpen && position && typeof document !== "undefined"
+      {isOpen && typeof document !== "undefined"
         ? createPortal(
             <span
-              style={{ position: "fixed", ...position }}
+              style={{ position: "fixed", ...position, visibility: position ? undefined : "hidden" }}
               className="pointer-events-none z-[200]"
             >
               <span
+                ref={contentRef}
                 id={tooltipId}
                 role="tooltip"
                 data-side={side}
-                className={cn("ph-tooltip-content", className)}
+                className={cn(
+                  "ph-tooltip-content",
+                  !disableHoverableContent && "pointer-events-auto",
+                  className,
+                )}
+                onMouseEnter={disableHoverableContent ? undefined : clearTimer}
+                onMouseLeave={disableHoverableContent ? undefined : hide}
               >
                 {content}
               </span>

package/src/components/ui/Typography.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementType, type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 export type TextTone =
@@ -27,6 +27,24 @@ export interface TextBaseProps {
   truncate?: boolean;
 }
 
+type TypographyProps<T extends ElementType> = TextBaseProps &
+  Omit<ComponentPropsWithoutRef<T>, keyof TextBaseProps>;
+
+export type DisplayProps = TypographyProps<"h1">;
+export type SectionTitleProps = TypographyProps<"h2">;
+export type H1Props = TypographyProps<"h1">;
+export type H2Props = TypographyProps<"h2">;
+export type H3Props = TypographyProps<"h3">;
+export type H4Props = TypographyProps<"h4">;
+export type H5Props = TypographyProps<"h5">;
+export type PProps = TypographyProps<"p">;
+export type SmallProps = TypographyProps<"span">;
+export type CaptionProps = TypographyProps<"span">;
+export type OverlineProps = TypographyProps<"span">;
+export type LeadProps = TypographyProps<"p">;
+export type MonoProps = TypographyProps<"code">;
+export type LabelProps = TypographyProps<"label">;
+
 const toneMap: Record<TextTone, string> = {
   default: "text-ph-ink",
   muted: "text-ph-mutedtext",
@@ -61,77 +79,113 @@ function textClass(
  * Display — the marketing hero: fluid size, tight tracking, one per page.
  * Product page titles use H1/`SuitePageHeader` instead.
  */
-export function Display({
-  children,
-  tone = "default",
-  weight,
-  truncate,
-  className,
-}: TextBaseProps) {
-  return <h1 className={textClass("ph-hero-title", tone, weight, truncate, className)}>{children}</h1>;
-}
+export const Display = forwardRef<HTMLHeadingElement, DisplayProps>(function Display(
+  { children, tone = "default", weight, truncate, className, ...props },
+  ref,
+) {
+  return <h1 ref={ref} {...props} className={textClass("ph-hero-title", tone, weight, truncate, className)}>{children}</h1>;
+});
 
 /** Section title — fluid; pairs with Display on public pages. */
-export function SectionTitle({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
-  return <h2 className={textClass("ph-section-title", tone, weight, truncate, className)}>{children}</h2>;
-}
+export const SectionTitle = forwardRef<HTMLHeadingElement, SectionTitleProps>(function SectionTitle(
+  { children, tone = "default", weight, truncate, className, ...props },
+  ref,
+) {
+  return <h2 ref={ref} {...props} className={textClass("ph-section-title", tone, weight, truncate, className)}>{children}</h2>;
+});
 
 /** H1 — page title */
-export function H1({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
-  return <h1 className={textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className)}>{children}</h1>;
-}
+export const H1 = forwardRef<HTMLHeadingElement, H1Props>(function H1(
+  { children, tone = "default", weight, truncate, className, ...props },
+  ref,
+) {
+  return <h1 ref={ref} {...props} className={textClass("text-3xl font-bold tracking-tight md:text-4xl", tone, weight, truncate, className)}>{children}</h1>;
+});
 
 /** H2 — section title */
-export function H2({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
-  return <h2 className={textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className)}>{children}</h2>;
-}
+export const H2 = forwardRef<HTMLHeadingElement, H2Props>(function H2(
+  { children, tone = "default", weight, truncate, className, ...props },
+  ref,
+) {
+  return <h2 ref={ref} {...props} className={textClass("text-2xl font-bold tracking-tight", tone, weight, truncate, className)}>{children}</h2>;
+});
 
 /** H3 — subsection title */
-export function H3({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
-  return <h3 className={textClass("text-xl font-semibold", tone, weight, truncate, className)}>{children}</h3>;
-}
+export const H3 = forwardRef<HTMLHeadingElement, H3Props>(function H3(
+  { children, tone = "default", weight, truncate, className, ...props },
+  ref,
+) {
+  return <h3 ref={ref} {...props} className={textClass("text-xl font-semibold", tone, weight, truncate, className)}>{children}</h3>;
+});
 
 /** H4 — card / panel title */
-export function H4({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
-  return <h4 className={textClass("text-lg font-semibold", tone, weight, truncate, className)}>{children}</h4>;
-}
+export const H4 = forwardRef<HTMLHeadingElement, H4Props>(function H4(
+  { children, tone = "default", weight, truncate, className, ...props },
+  ref,
+) {
+  return <h4 ref={ref} {...props} className={textClass("text-lg font-semibold", tone, weight, truncate, className)}>{children}</h4>;
+});
 
 /** H5 — small heading */
-export function H5({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
-  return <h5 className={textClass("text-base font-semibold", tone, weight, truncate, className)}>{children}</h5>;
-}
+export const H5 = forwardRef<HTMLHeadingElement, H5Props>(function H5(
+  { children, tone = "default", weight, truncate, className, ...props },
+  ref,
+) {
+  return <h5 ref={ref} {...props} className={textClass("text-base font-semibold", tone, weight, truncate, className)}>{children}</h5>;
+});
 
 /** Body — default paragraph text */
-export function P({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
-  return <p className={textClass("text-base leading-relaxed", tone, weight, truncate, className)}>{children}</p>;
-}
+export const P = forwardRef<HTMLParagraphElement, PProps>(function P(
+  { children, tone = "default", weight, truncate, className, ...props },
+  ref,
+) {
+  return <p ref={ref} {...props} className={textClass("text-base leading-relaxed", tone, weight, truncate, className)}>{children}</p>;
+});
 
 /** Small body text */
-export function Small({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
-  return <span className={textClass("text-sm leading-relaxed", tone, weight, truncate, className)}>{children}</span>;
-}
+export const Small = forwardRef<HTMLSpanElement, SmallProps>(function Small(
+  { children, tone = "default", weight, truncate, className, ...props },
+  ref,
+) {
+  return <span ref={ref} {...props} className={textClass("text-sm leading-relaxed", tone, weight, truncate, className)}>{children}</span>;
+});
 
 /** Extra small text — captions, meta */
-export function Caption({ children, tone = "muted", weight, truncate, className }: TextBaseProps) {
-  return <span className={textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className)}>{children}</span>;
-}
+export const Caption = forwardRef<HTMLSpanElement, CaptionProps>(function Caption(
+  { children, tone = "muted", weight, truncate, className, ...props },
+  ref,
+) {
+  return <span ref={ref} {...props} className={textClass("text-[11px] font-medium uppercase tracking-wider", tone, weight, truncate, className)}>{children}</span>;
+});
 
 /** Overline — tiny eyebrow text */
-export function Overline({ children, tone = "muted", weight, truncate, className }: TextBaseProps) {
-  return <span className={textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className)}>{children}</span>;
-}
+export const Overline = forwardRef<HTMLSpanElement, OverlineProps>(function Overline(
+  { children, tone = "muted", weight, truncate, className, ...props },
+  ref,
+) {
+  return <span ref={ref} {...props} className={textClass("text-[10px] font-bold uppercase tracking-[0.15em]", tone, weight, truncate, className)}>{children}</span>;
+});
 
 /** Lead — intro paragraph under a Display/SectionTitle; measure-capped for readability */
-export function Lead({ children, tone = "subtle", weight, truncate, className }: TextBaseProps) {
-  return <p className={textClass("ph-lead", tone, weight, truncate, className)}>{children}</p>;
-}
+export const Lead = forwardRef<HTMLParagraphElement, LeadProps>(function Lead(
+  { children, tone = "subtle", weight, truncate, className, ...props },
+  ref,
+) {
+  return <p ref={ref} {...props} className={textClass("ph-lead", tone, weight, truncate, className)}>{children}</p>;
+});
 
 /** Mono — code, data, technical text */
-export function Mono({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
-  return <code className={textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className)}>{children}</code>;
-}
+export const Mono = forwardRef<HTMLElement, MonoProps>(function Mono(
+  { children, tone = "default", weight, truncate, className, ...props },
+  ref,
+) {
+  return <code ref={ref} {...props} className={textClass("text-sm font-mono leading-relaxed", tone, weight, truncate, className)}>{children}</code>;
+});
 
 /** Label — form labels, tags */
-export function Label({ children, tone = "default", weight, truncate, className }: TextBaseProps) {
-  return <label className={textClass("text-sm font-medium", tone, weight, truncate, className)}>{children}</label>;
-}
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+  { children, tone = "default", weight, truncate, className, ...props },
+  ref,
+) {
+  return <label ref={ref} {...props} className={textClass("text-sm font-medium", tone, weight, truncate, className)}>{children}</label>;
+});

package/src/components/ui/avatar-stat.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Avatar } from "@/components/ui/Avatar";
+import { Stat } from "@/components/ui/Stat";
+
+describe("Avatar status", () => {
+  it("exposes its status to assistive technology with semantic theme tokens", () => {
+    render(<Avatar label="JD" status="online" />);
+
+    const status = screen.getByRole("img", { name: "online status" });
+    expect(status).toHaveClass("bg-ph-success", "border-ph-surface");
+  });
+});
+
+describe("Stat warning", () => {
+  it("uses warning theme tokens instead of fixed colours", () => {
+    render(<Stat label="Over budget" value="$120" tone="warning" />);
+
+    const stat = screen.getByRole("article");
+    expect(stat.className).not.toContain("amber");
+    expect(screen.getByText("$120")).toHaveClass("text-ph-warning");
+  });
+});

package/src/components/ui/calendar.test.tsx

@@ -0,0 +1,88 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Calendar } from "./Calendar";
+
+describe("Calendar", () => {
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+  });
+
+  it("shows the month containing a controlled value update", () => {
+    const { rerender } = render(
+      <Calendar value={new Date(2026, 0, 15)} />,
+    );
+    expect(screen.getByText("January 2026")).toBeInTheDocument();
+
+    rerender(<Calendar value={new Date(2026, 1, 15)} />);
+    expect(screen.getByText("February 2026")).toBeInTheDocument();
+  });
+
+  it("provides full date names and marks today separately from selection", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2026, 0, 15, 12));
+
+    render(<Calendar value={new Date(2026, 0, 14)} />);
+
+    expect(
+      screen.getByRole("button", { name: "Thursday, 15 January 2026" }),
+    ).toHaveAttribute("aria-current", "date");
+    expect(
+      screen.getByRole("button", { name: "Wednesday, 14 January 2026" })
+        .parentElement,
+    ).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("uses date-grid keyboard navigation without changing controlled selection", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(<Calendar value={new Date(2026, 0, 15)} onChange={onChange} />);
+
+    const selectedDate = screen.getByRole("button", {
+      name: "Thursday, 15 January 2026",
+    });
+    expect(selectedDate.parentElement).toHaveAttribute("aria-selected", "true");
+
+    await user.click(selectedDate);
+    onChange.mockClear();
+    await user.keyboard("{ArrowRight}");
+
+    const focusedDate = screen.getByRole("button", {
+      name: "Friday, 16 January 2026",
+    });
+    expect(focusedDate).toHaveFocus();
+    expect(selectedDate.parentElement).toHaveAttribute("aria-selected", "true");
+    expect(onChange).not.toHaveBeenCalled();
+
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenCalledWith(new Date(2026, 0, 16));
+  });
+
+  it("moves focus by week boundaries and months", async () => {
+    const user = userEvent.setup();
+
+    render(<Calendar value={new Date(2026, 0, 15)} />);
+    await user.click(
+      screen.getByRole("button", { name: "Thursday, 15 January 2026" }),
+    );
+
+    await user.keyboard("{Home}");
+    expect(
+      screen.getByRole("button", { name: "Sunday, 11 January 2026" }),
+    ).toHaveFocus();
+
+    await user.keyboard("{End}");
+    expect(
+      screen.getByRole("button", { name: "Saturday, 17 January 2026" }),
+    ).toHaveFocus();
+
+    await user.keyboard("{PageDown}");
+    expect(screen.getByText("February 2026")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Tuesday, 17 February 2026" }),
+    ).toHaveFocus();
+  });
+});