@arbor-education/design-system.components 4.4.0 → 4.6.0

package/dist/utils/popupParent/PopupParentContext.stories.js

@@ -170,7 +170,7 @@ const WithCustomContainerTemplate = () => {
                     borderRadius: 'var(--border-radius-small)',
                     padding: 'var(--spacing-xsmall)',
                     minHeight: '2rem',
-                }, "aria-label": "Custom popup container" }), _jsx(PopupParentContext.Provider, { value: popupContainerRef, children: _jsxs(Dropdown, { children: [_jsx(Dropdown.Trigger, { children: _jsx(Button, { variant: "dropdown", children: "Actions" }) }), _jsxs(Dropdown.Content, { children: [_jsx(Dropdown.Item, { children: "View pupil profile" }), _jsx(Dropdown.Item, { children: "Edit enrolment" }), _jsx(Dropdown.Separator, {}), _jsx(Dropdown.Item, { children: "Remove from group" })] })] }) })] }));
+                }, "aria-label": "Custom popup container", "aria-hidden": true }), _jsx(PopupParentContext.Provider, { value: popupContainerRef, children: _jsxs(Dropdown, { children: [_jsx(Dropdown.Trigger, { children: _jsx(Button, { variant: "dropdown", children: "Actions" }) }), _jsxs(Dropdown.Content, { children: [_jsx(Dropdown.Item, { children: "View pupil profile" }), _jsx(Dropdown.Item, { children: "Edit enrolment" }), _jsx(Dropdown.Separator, {}), _jsx(Dropdown.Item, { children: "Remove from group" })] })] }) })] }));
 };
 // ---------------------------------------------------------------------------
 // Stories

package/dist/utils/popupParent/PopupParentContext.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupParentContext.stories.js","sourceRoot":"","sources":["../../../src/utils/popupParent/PopupParentContext.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,GACN,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,8EAA8E;AAC9E,oBAAoB;AACpB,8EAA8E;AAE9E,MAAM,iBAAiB,GAAG;IACxB,yFAAyF;IACzF,4EAA4E;IAC5E,wGAAwG;IACxG,+EAA+E;CAChF,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,cAAc,GAAG;IACrB,sCAAsC;IACtC,EAAE;IACF,uGAAuG;IACvG,sGAAsG;IACtG,iBAAiB;IACjB,wGAAwG;IACxG,yGAAyG;IACzG,+BAA+B;IAC/B,qGAAqG;IACrG,qGAAqG;IACrG,0DAA0D;IAC1D,EAAE;IACF,KAAK;IACL,EAAE;IACF,6CAA6C;IAC7C,EAAE;IACF,kCAAkC;IAClC,WAAW;IACX,4HAA4H;IAC5H,2GAA2G;IAC3G,+GAA+G;CAChH,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,eAAe,GAAG;IACtB,gDAAgD;IAChD,EAAE;IACF,qCAAqC;IACrC,WAAW;IACX,2CAA2C;IAC3C,gCAAgC;IAChC,kCAAkC;IAClC,mCAAmC;IACnC,8CAA8C;IAC9C,+FAA+F;IAC/F,0CAA0C;IAC1C,kFAAkF;IAClF,EAAE;IACF,KAAK;IACL,EAAE;IACF,WAAW;IACX,EAAE;IACF,QAAQ;IACR,mCAAmC;IACnC,6FAA6F;IAC7F,EAAE;IACF,2BAA2B;IAC3B,wEAAwE;IACxE,2DAA2D;IAC3D,EAAE;IACF,YAAY;IACZ,oFAAoF;IACpF,WAAW;IACX,kEAAkE;IAClE,iEAAiE;IACjE,WAAW;IACX,oFAAoF;IACpF,EAAE;IACF,+DAA+D;IAC/D,oBAAoB;IACpB,8BAA8B;IAC9B,yDAAyD;IACzD,+BAA+B;IAC/B,8BAA8B;IAC9B,wDAAwD;IACxD,0DAA0D;IAC1D,+BAA+B;IAC/B,qBAAqB;IACrB,sCAAsC;IACtC,YAAY;IACZ,MAAM;IACN,GAAG;IACH,KAAK;IACL,EAAE;IACF,KAAK;IACL,EAAE;IACF,uBAAuB;IACvB,EAAE;IACF,kGAAkG;IAClG,0FAA0F;IAC1F,4EAA4E;IAC5E,EAAE;IACF,uDAAuD;IACvD,SAAS;IACT,uEAAuE;IACvE,KAAK;IACL,EAAE;IACF,KAAK;IACL,EAAE;IACF,mBAAmB;IACnB,EAAE;IACF,iGAAiG;IACjG,0EAA0E;IAC1E,sGAAsG;IACtG,wDAAwD;CACzD,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,kBAAkB,GAAG;IACzB,uBAAuB;IACvB,EAAE;IACF,+PAA+P;CAChQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,8EAA8E;AAC9E,YAAY;AACZ,8EAA8E;AAE9E,SAAS,0BAA0B;IACjC,OAAO,CACL,8BACE,KAAC,KAAK,KAAG,EACT,KAAC,QAAQ,KAAG,EACZ,KAAC,QAAQ,cAAE,iBAAiB,GAAY,EACxC,KAAC,UAAU,iCAA4B,EACvC,KAAC,QAAQ,cAAE,cAAc,GAAY,EACrC,KAAC,UAAU,kCAA6B,EACxC,KAAC,QAAQ,cAAE,eAAe,GAAY,EACtC,KAAC,UAAU,2BAAsB,EACjC,KAAC,OAAO,IAAC,KAAK,EAAC,EAAE,GAAG,EACpB,KAAC,QAAQ,cAAE,kBAAkB,GAAY,IACxC,CACJ,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,OAAO;AACP,8EAA8E;AAE9E,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,sCAAsC;IAC7C,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE;YACJ,IAAI,EAAE,0BAA0B;SACjC;KACF;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;CACJ,CAAC;AAEjB,eAAe,IAAI,CAAC;AAGpB,8EAA8E;AAC9E,SAAS;AACT,8EAA8E;AAE9E,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,WAAmB,EAAS,EAAE,CAAC,CAAC;IACrE,GAAG,KAAK;IACR,UAAU,EAAE;QACV,GAAG,KAAK,CAAC,UAAU;QACnB,IAAI,EAAE;YACJ,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI;YACzB,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;CACF,CAAC,CAAC;AAEH,8EAA8E;AAC9E,YAAY;AACZ,8EAA8E;AAE9E,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CAC5B,eACE,KAAK,EAAE;QACL,MAAM,EAAE,kDAAkD;QAC1D,YAAY,EAAE,4BAA4B;QAC1C,OAAO,EAAE,uBAAuB;QAChC,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,OAAO;QAClB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,sBAAsB;KAC5B,aAED,aAAG,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,uBAAuB,EAAE,KAAK,EAAE,uBAAuB,EAAE,+BAEvF,GAAG,EACJ,8CAA6B,EAC5B,GAAG,gDAEF,EACJ,MAAC,QAAQ,eACP,KAAC,QAAQ,CAAC,OAAO,cACf,KAAC,MAAM,IAAC,OAAO,EAAC,UAAU,wBAAiB,GAC1B,EACnB,MAAC,QAAQ,CAAC,OAAO,eACf,KAAC,QAAQ,CAAC,IAAI,qCAAmC,EACjD,KAAC,QAAQ,CAAC,IAAI,iCAA+B,EAC7C,KAAC,QAAQ,CAAC,SAAS,KAAG,EACtB,KAAC,QAAQ,CAAC,IAAI,oCAAkC,IAC/B,IACV,IACP,CACP,CAAC;AAEF,MAAM,2BAA2B,GAAG,GAAG,EAAE;IACvC,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEvD,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aACzG,aAAG,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,uBAAuB,EAAE,KAAK,EAAE,uBAAuB,EAAE,0CAEvF,GAAG,EACJ,+CAA8B,EAC7B,GAAG,wCAEH,GAAG,EACJ,2CAA0B,SAExB,EAGJ,cACE,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,MAAM,EAAE,EAAE;oBACV,MAAM,EAAE,kDAAkD;oBAC1D,YAAY,EAAE,4BAA4B;oBAC1C,OAAO,EAAE,uBAAuB;oBAChC,SAAS,EAAE,MAAM;iBAClB,gBACU,wBAAwB,GACnC,EAEF,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,iBAAiB,YACnD,MAAC,QAAQ,eACP,KAAC,QAAQ,CAAC,OAAO,cACf,KAAC,MAAM,IAAC,OAAO,EAAC,UAAU,wBAAiB,GAC1B,EACnB,MAAC,QAAQ,CAAC,OAAO,eACf,KAAC,QAAQ,CAAC,IAAI,qCAAmC,EACjD,KAAC,QAAQ,CAAC,IAAI,iCAA+B,EAC7C,KAAC,QAAQ,CAAC,SAAS,KAAG,EACtB,KAAC,QAAQ,CAAC,IAAI,oCAAkC,IAC/B,IACV,GACiB,IAC1B,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAC3C;IACE,MAAM,EAAE,eAAe;IACvB,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;CAoBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,iEAAiE;IACjE,uGAAuG;IACvG,oGAAoG;IACpG,oCAAoC;CACrC,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAU,eAAe,CACvD;IACE,MAAM,EAAE,2BAA2B;IACnC,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,6FAA6F;IAC7F,gGAAgG;IAChG,iGAAiG;IACjG,oGAAoG;IACpG,4BAA4B;CAC7B,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC"}
+{"version":3,"file":"PopupParentContext.stories.js","sourceRoot":"","sources":["../../../src/utils/popupParent/PopupParentContext.stories.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbor-education/design-system.components",
-  "version": "4.4.0",
+  "version": "4.6.0",
   "description": "The component library for the design system (the baby)",
   "main": "dist/index.js",
   "type": "module",

package/src/components/avatar/Avatar.tsx

@@ -34,14 +34,14 @@ export const Avatar = (props: AvatarProps) => {
 
     if (initials) {
       return (
-        <span className="ds-avatar__initials" aria-label={alt}>
+        <span className="ds-avatar__initials" aria-label={alt} role="img">
           {initials}
         </span>
       );
     }
 
     return (
-      <span className="ds-avatar__placeholder" aria-label={alt || 'User avatar'}>
+      <span className="ds-avatar__placeholder" aria-label={alt || 'User avatar'} role="img">
         <svg
           viewBox="0 0 24 24"
           fill="currentColor"

package/src/components/badge/Badge.stories.tsx

@@ -433,42 +433,6 @@ const AllVariantsTemplate = () => (
   </div>
 );
 
-const A11yWithLabelTemplate = () => (
-  <div
-    style={{
-      padding: 'var(--spacing-xlarge)',
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 'var(--spacing-xlarge)',
-    }}
-  >
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
-      <p className="ds-text" style={{ margin: 0, color: 'var(--color-semantic-destructive-600)' }}>
-        Without a11yLabel — screen reader announces "5" (no context)
-      </p>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-large)' }}>
-        <Icon name="mail" size={16} screenReaderText="Notifications" />
-        <Badge>5</Badge>
-      </div>
-      <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }}>
-        Screen reader: "mail Notifications, 5"
-      </p>
-    </div>
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
-      <p className="ds-text" style={{ margin: 0, color: 'var(--color-semantic-success-600)' }}>
-        With a11yLabel — screen reader announces the full meaningful label
-      </p>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-large)' }}>
-        <Icon name="mail" size={16} />
-        <Badge a11yLabel="5 unread messages">5</Badge>
-      </div>
-      <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }}>
-        Screen reader: "5 unread messages"
-      </p>
-    </div>
-  </div>
-);
-
 // ---------------------------------------------------------------------------
 // Stories
 // ---------------------------------------------------------------------------
@@ -832,70 +796,3 @@ export default AllVariantsTemplate;
   },
   'Full 3 × 8 grid: all three sizes crossed with all eight colour states (default charcoal + 7 palette colours). Use this story as a complete visual reference for the Badge component. Each cell uses the same count (`"9"`) to make size and colour comparisons accurate.',
 );
-
-export const A11yWithLabel: Story = withDescription(
-  {
-    render: A11yWithLabelTemplate,
-    parameters: {
-      docs: {
-        source: {
-          language: 'tsx',
-          code: `
-import { Badge, Icon } from '@arbor-education/design-system.components';
-
-function A11yWithLabelTemplate() {
-  return (
-    <div
-      style={{
-        padding: 'var(--spacing-xlarge)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 'var(--spacing-xlarge)',
-      }}
-    >
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
-        <p className="ds-text" style={{ margin: 0, color: 'var(--color-semantic-destructive-600)' }}>
-          Without a11yLabel — screen reader announces "5" (no context)
-        </p>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-large)' }}>
-          <Icon name="mail" size={16} screenReaderText="Notifications" />
-          <Badge>5</Badge>
-        </div>
-        <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }}>
-          Screen reader: "mail Notifications, 5"
-        </p>
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
-        <p className="ds-text" style={{ margin: 0, color: 'var(--color-semantic-success-600)' }}>
-          With a11yLabel — screen reader announces the full meaningful label
-        </p>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-large)' }}>
-          <Icon name="mail" size={16} />
-          <Badge a11yLabel="5 unread messages">5</Badge>
-        </div>
-        <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }}>
-          Screen reader: "5 unread messages"
-        </p>
-      </div>
-    </div>
-  );
-}
-export default A11yWithLabelTemplate;
-`.trim(),
-        },
-      },
-    },
-  },
-  [
-    'Accessibility contrast: top row shows a badge **without** `a11yLabel` — a screen reader',
-    'moving through the icon and badge would announce the icon text and then the bare number `"5"`,',
-    'providing no context about what those 5 items are.',
-    '',
-    'The bottom row adds `a11yLabel="5 unread messages"`. The component sets `aria-label` on the',
-    'wrapper `<span>` and wraps `children` in an `aria-hidden="true"` span. The screen reader now',
-    'announces `"5 unread messages"` as a single coherent label — no duplicate number, full context.',
-    '',
-    'Use `a11yLabel` whenever the badge sits next to an icon-only element or in a context where',
-    'the number alone would be ambiguous to a screen reader user.',
-  ].join(' '),
-);

package/src/components/datePicker/DatePicker.stories.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
+  ArgTypes,
   Controls,
   Heading as DocHeading,
   Markdown,
@@ -9,8 +10,13 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
+import { fn } from 'storybook/test';
+import { format } from 'date-fns';
+import { Button } from 'Components/button/Button';
 import { FormField } from 'Components/formField/FormField';
+import { Icon } from 'Components/icon/Icon';
 import { DatePicker } from './DatePicker.js';
+import { DatePickerPopover } from './DatePickerPopover.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content
@@ -104,6 +110,44 @@ const DEVELOPER_NOTES = [
   '| `DatePicker.Props` | Full props interface |',
 ].join('\n');
 
+const POPOVER_NOTES = [
+  '`DatePickerPopover` is the calendar on its own: no date input, no icon button. You supply the',
+  'trigger (usually a `Button`) and the component opens the same calendar popover as `DatePicker`.',
+  'Use it when the date is shown elsewhere in your UI and you only need a way to pick or jump to a day,',
+  'for example a "jump to day" icon in a calendar header. For a form field where the user types or',
+  'sees the chosen date, use `DatePicker` instead.',
+  '',
+  '```tsx',
+  "import { Button, DatePickerPopover, Icon } from '@arbor-education/design-system.components';",
+  '',
+  '<DatePickerPopover',
+  '  value={date}',
+  '  onChange={setDate}',
+  '  trigger={(',
+  '    <Button variant="tertiary">',
+  '      <Icon name="date" screenReaderText="Jump to day" />',
+  '    </Button>',
+  '  )}',
+  '/>',
+  '```',
+  '',
+  '**Give the trigger an accessible name.** `DatePickerPopover` does not add one for you. A text',
+  'button is named by its text. An icon-only button needs `screenReaderText` on the `Icon` (or an',
+  '`aria-label` on the `Button`), otherwise screen reader users hear an unlabelled button.',
+  '',
+  '**The trigger must forward its ref and spread props onto a DOM node.** The design system `Button`',
+  'does. A custom component that does not will break popover anchoring and focus return to the trigger.',
+  '',
+  '**You own the value.** `onChange` receives a `Date`; store it and pass it back as `value`. If you',
+  'omit `value`, the calendar opens on the current month.',
+  '',
+  '**Time of day is kept.** Picking a day keeps the hours and minutes of the `value` you passed in.',
+  'Picking **Today** does the same.',
+  '',
+  '**Keyboard and focus.** Focus moves into the calendar when it opens. Selecting a day, choosing',
+  '**Today**, or pressing **Escape** closes the calendar and returns focus to your trigger.',
+].join('\n');
+
 const RELATED_COMPONENTS = [
   '## Related components',
   '',
@@ -130,6 +174,9 @@ function DatePickerDocsPage() {
       <Markdown>{USAGE_GUIDANCE}</Markdown>
       <DocHeading>Developer notes</DocHeading>
       <Markdown>{DEVELOPER_NOTES}</Markdown>
+      <DocHeading>DatePickerPopover</DocHeading>
+      <Markdown>{POPOVER_NOTES}</Markdown>
+      <ArgTypes of={DatePickerPopover} />
       <DocHeading>Examples</DocHeading>
       <Stories title="" />
       <Markdown>{RELATED_COMPONENTS}</Markdown>
@@ -820,3 +867,249 @@ export default ParentEveningForm;
     'linked via `aria-describedby` automatically. Once a date is chosen, the error clears.',
   ].join(' '),
 );
+
+// ---------------------------------------------------------------------------
+// DatePickerPopover stories
+// ---------------------------------------------------------------------------
+
+type PopoverStory = StoryObj<typeof DatePickerPopover>;
+
+const withPopoverDescription = (story: PopoverStory, description: string): PopoverStory => ({
+  ...story,
+  parameters: {
+    ...story.parameters,
+    docs: {
+      ...story.parameters?.docs,
+      description: {
+        story: description,
+      },
+    },
+  },
+});
+
+// Fixed date so the play functions are deterministic (15 June 2025, 14:30)
+const POPOVER_INITIAL_DATE = new Date(2025, 5, 15, 14, 30);
+
+const formatLongDate = (date: Date) => date.toLocaleDateString('en-GB', {
+  weekday: 'long',
+  day: 'numeric',
+  month: 'long',
+  year: 'numeric',
+});
+
+type PopoverTemplateProps = {
+  onChange?: (newDate: Date) => void;
+};
+
+const PopoverTextTriggerTemplate = ({ onChange }: PopoverTemplateProps) => {
+  const [date, setDate] = useState(POPOVER_INITIAL_DATE);
+
+  const handleChange = (newDate: Date) => {
+    setDate(newDate);
+    onChange?.(newDate);
+  };
+
+  return (
+    <div>
+      <DatePickerPopover
+        value={date}
+        onChange={handleChange}
+        trigger={<Button variant="secondary">Choose date</Button>}
+      />
+      <p className="ds-text">
+        Selected:
+        {' '}
+        <code>{`${date.toLocaleDateString('en-GB')} ${format(date, 'HH:mm')}`}</code>
+      </p>
+    </div>
+  );
+};
+
+const PopoverIconTriggerTemplate = ({ onChange }: PopoverTemplateProps) => {
+  const [date, setDate] = useState(POPOVER_INITIAL_DATE);
+
+  const handleChange = (newDate: Date) => {
+    setDate(newDate);
+    onChange?.(newDate);
+  };
+
+  return (
+    <div>
+      <DatePickerPopover
+        value={date}
+        onChange={handleChange}
+        trigger={(
+          <Button variant="tertiary">
+            <Icon name="date" screenReaderText="Choose date" />
+          </Button>
+        )}
+      />
+      <p className="ds-text">
+        Selected:
+        {' '}
+        <code>{date.toLocaleDateString('en-GB')}</code>
+      </p>
+    </div>
+  );
+};
+
+const PopoverCalendarHeaderTemplate = ({ onChange }: PopoverTemplateProps) => {
+  const [viewedDate, setViewedDate] = useState(POPOVER_INITIAL_DATE);
+
+  const handleChange = (newDate: Date) => {
+    setViewedDate(newDate);
+    onChange?.(newDate);
+  };
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-small)' }}>
+      <DatePickerPopover
+        value={viewedDate}
+        onChange={handleChange}
+        trigger={(
+          <Button variant="tertiary" borderless>
+            <Icon name="date" screenReaderText="Jump to day" />
+          </Button>
+        )}
+      />
+      <p className="ds-text">
+        <time dateTime={format(viewedDate, 'yyyy-MM-dd')}>{formatLongDate(viewedDate)}</time>
+      </p>
+    </div>
+  );
+};
+
+export const PopoverWithTextTrigger: PopoverStory = withPopoverDescription(
+  {
+    args: { onChange: fn() },
+    render: args => <PopoverTextTriggerTemplate onChange={args.onChange} />,
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { useState } from 'react';
+import { Button, DatePickerPopover } from '@arbor-education/design-system.components';
+
+function ChooseDateButton() {
+  const [date, setDate] = useState(new Date(2025, 5, 15, 14, 30));
+
+  return (
+    <DatePickerPopover
+      value={date}
+      onChange={setDate}
+      // A text button is named by its text content
+      trigger={<Button variant="secondary">Choose date</Button>}
+    />
+  );
+}
+export default ChooseDateButton;
+`.trim(),
+        },
+      },
+    },
+  },
+  [
+    'The simplest setup: a text `Button` as the trigger, with the date held in your own state.',
+    'The calendar opens on the month of `value`. Selecting a day (or **Today**) calls `onChange` with a',
+    '`Date`, keeps the time of day from `value`, closes the calendar and returns focus to the button.',
+    'The button is named by its text, so no extra accessibility props are needed.',
+  ].join(' '),
+);
+
+export const PopoverWithIconTrigger: PopoverStory = withPopoverDescription(
+  {
+    args: { onChange: fn() },
+    render: args => <PopoverIconTriggerTemplate onChange={args.onChange} />,
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { useState } from 'react';
+import { Button, DatePickerPopover, Icon } from '@arbor-education/design-system.components';
+
+function ChooseDateIconButton() {
+  const [date, setDate] = useState(new Date(2025, 5, 15, 14, 30));
+
+  return (
+    <DatePickerPopover
+      value={date}
+      onChange={setDate}
+      trigger={(
+        <Button variant="tertiary">
+          {/* screenReaderText is the button's accessible name */}
+          <Icon name="date" screenReaderText="Choose date" />
+        </Button>
+      )}
+    />
+  );
+}
+export default ChooseDateIconButton;
+`.trim(),
+        },
+      },
+    },
+  },
+  [
+    'An icon-only trigger. The `Icon` is hidden from assistive technology, so **you must give the button',
+    'an accessible name**: use `screenReaderText` on the `Icon` (shown here) or `aria-label` on the `Button`.',
+    'Keyboard users can open the calendar with Enter or Space, move between days with the arrow keys,',
+    'and press **Escape** to close it without choosing a date. Focus returns to the icon button.',
+  ].join(' '),
+);
+
+export const PopoverCalendarHeaderJumpToDay: PopoverStory = withPopoverDescription(
+  {
+    args: { onChange: fn() },
+    render: args => <PopoverCalendarHeaderTemplate onChange={args.onChange} />,
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { useState } from 'react';
+import { format } from 'date-fns';
+import { Button, DatePickerPopover, Icon } from '@arbor-education/design-system.components';
+
+function CalendarHeader() {
+  const [viewedDate, setViewedDate] = useState(new Date(2025, 5, 15, 14, 30));
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-small)' }}>
+      <DatePickerPopover
+        value={viewedDate}
+        onChange={setViewedDate}
+        trigger={(
+          <Button variant="tertiary" borderless>
+            <Icon name="date" screenReaderText="Jump to day" />
+          </Button>
+        )}
+      />
+      <time dateTime={format(viewedDate, 'yyyy-MM-dd')}>
+        {viewedDate.toLocaleDateString('en-GB', {
+          weekday: 'long',
+          day: 'numeric',
+          month: 'long',
+          year: 'numeric',
+        })}
+      </time>
+    </div>
+  );
+}
+export default CalendarHeader;
+`.trim(),
+        },
+      },
+    },
+  },
+  [
+    'The motivating use case: a "jump to day" icon button in a calendar header, with the currently viewed',
+    'date shown beside it. The date lives in your state, so the heading updates as soon as a day is picked',
+    'and the same value is passed back in as `value` the next time the calendar opens.',
+    'There is no date input, so the header stays compact and the selection is communicated by the text next to the button.',
+  ].join(' '),
+);

package/src/components/datePicker/DatePickerPopover.test.tsx

@@ -0,0 +1,144 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/vitest';
+import { Button } from 'Components/button/Button';
+import { DatePickerPopover } from './DatePickerPopover.js';
+
+const renderPopover = (props: Partial<React.ComponentProps<typeof DatePickerPopover>> = {}) => render(
+  <DatePickerPopover
+    trigger={<Button>Jump to date</Button>}
+    value={new Date(2025, 5, 15, 14, 30)}
+    {...props}
+  />,
+);
+
+const openCalendar = () => userEvent.click(screen.getByRole('button', { name: 'Jump to date' }));
+
+describe('DatePickerPopover', () => {
+  test('renders the consumer trigger and no date input', () => {
+    const { container } = renderPopover();
+    expect(screen.getByRole('button', { name: 'Jump to date' })).toBeInTheDocument();
+    expect(container.querySelector('input')).not.toBeInTheDocument();
+  });
+
+  test('calendar is hidden until the trigger is activated', async () => {
+    renderPopover();
+    expect(screen.queryByRole('application')).not.toBeInTheDocument();
+
+    await openCalendar();
+
+    expect(screen.getByRole('application')).toBeInTheDocument();
+  });
+
+  test('opens on the month of the supplied value', async () => {
+    renderPopover();
+    await openCalendar();
+
+    expect(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ })).toBeInTheDocument();
+  });
+
+  test('selecting a day calls onChange with a Date and closes the calendar', async () => {
+    const onChange = vi.fn();
+    renderPopover({ onChange });
+    await openCalendar();
+
+    await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    const selected = onChange.mock.lastCall?.[0] as Date;
+    expect(selected).toBeInstanceOf(Date);
+    expect([selected.getFullYear(), selected.getMonth(), selected.getDate()]).toEqual([2025, 5, 20]);
+    expect(screen.queryByRole('application')).not.toBeInTheDocument();
+  });
+
+  test('selecting a day preserves the time of the supplied value', async () => {
+    const onChange = vi.fn();
+    renderPopover({ onChange });
+    await openCalendar();
+
+    await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
+
+    const selected = onChange.mock.lastCall?.[0] as Date;
+    expect([selected.getHours(), selected.getMinutes()]).toEqual([14, 30]);
+  });
+
+  test('clicking the already selected day still calls onChange and closes the calendar', async () => {
+    const onChange = vi.fn();
+    renderPopover({ onChange });
+    await openCalendar();
+
+    await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 15/ }));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.lastCall?.[0]).toBeInstanceOf(Date);
+    expect(screen.queryByRole('application')).not.toBeInTheDocument();
+  });
+
+  test('clicking Today calls onChange with today and closes the calendar', async () => {
+    const onChange = vi.fn();
+    renderPopover({ onChange });
+    await openCalendar();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Today' }));
+
+    const today = new Date();
+    const selected = onChange.mock.lastCall?.[0] as Date;
+    expect([selected.getFullYear(), selected.getMonth(), selected.getDate()])
+      .toEqual([today.getFullYear(), today.getMonth(), today.getDate()]);
+    expect(screen.queryByRole('application')).not.toBeInTheDocument();
+  });
+
+  test('works without a value, opening on the current month', async () => {
+    const onChange = vi.fn();
+    renderPopover({ value: undefined, onChange });
+    await openCalendar();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Today' }));
+
+    expect(onChange).toHaveBeenCalledWith(expect.any(Date));
+  });
+
+  test('focus moves into the calendar on open', async () => {
+    renderPopover();
+    await openCalendar();
+
+    expect(screen.getByRole('application')).toContainElement(document.activeElement as HTMLElement);
+  });
+
+  test('Escape closes the calendar and returns focus to the trigger', async () => {
+    renderPopover();
+    await openCalendar();
+
+    await userEvent.keyboard('{Escape}');
+
+    expect(screen.queryByRole('application')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Jump to date' })).toHaveFocus();
+  });
+
+  test('selecting a day returns focus to the trigger', async () => {
+    renderPopover();
+    await openCalendar();
+
+    await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
+
+    expect(screen.getByRole('button', { name: 'Jump to date' })).toHaveFocus();
+  });
+
+  test('reopening shows the month of the latest value after the user browsed away', async () => {
+    const { rerender } = renderPopover();
+    await openCalendar();
+    await userEvent.click(screen.getByRole('button', { name: 'Go to the Next Month' }));
+    await userEvent.keyboard('{Escape}');
+
+    rerender(
+      <DatePickerPopover
+        trigger={<Button>Jump to date</Button>}
+        value={new Date(2025, 8, 3)}
+      />,
+    );
+    await openCalendar();
+
+    expect(within(screen.getByRole('application')).getByRole('button', { name: /September 10/ })).toBeInTheDocument();
+  });
+});