@byline/ui 4.14.1 → 4.16.0

package/dist/icons/analytics-icon.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+import type { IconProps } from './types/icon.js';
+export declare function AnalyticsIcon({ className, svgClassName, ...rest }: IconProps): React.JSX.Element;
+export declare namespace AnalyticsIcon {
+    var displayName: string;
+}

package/dist/icons/analytics-icon.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { IconElement } from "./icon-element.js";
+import icons_module from "./icons.module.js";
+const AnalyticsIcon = ({ className, svgClassName, ...rest })=>{
+    const applied = clsx(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
+    return /*#__PURE__*/ jsx(IconElement, {
+        className: clsx('analytics-icon', className),
+        ...rest,
+        children: /*#__PURE__*/ jsxs("svg", {
+            className: applied,
+            xmlns: "http://www.w3.org/2000/svg",
+            focusable: "false",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.75,
+            children: [
+                /*#__PURE__*/ jsx("path", {
+                    d: "M3 3v16a2 2 0 0 0 2 2h16"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M8 20v-4"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M13 20v-9"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M18 20v-13"
+                })
+            ]
+        })
+    });
+};
+AnalyticsIcon.displayName = 'AnalyticsIcon';
+export { AnalyticsIcon };

package/dist/icons/index.d.ts

@@ -1,5 +1,6 @@
 export * from './activity-icon.js';
 export * from './ai-icon.js';
+export * from './analytics-icon.js';
 export * from './byline-icon.js';
 export * from './calendar-icon.js';
 export * from './check-icon.js';

package/dist/icons/index.js

@@ -1,5 +1,6 @@
 export * from "./activity-icon.js";
 export * from "./ai-icon.js";
+export * from "./analytics-icon.js";
 export * from "./byline-icon.js";
 export * from "./calendar-icon.js";
 export * from "./check-icon.js";

package/dist/uikit.d.ts

@@ -46,6 +46,7 @@ export * from './components/tabs/tabs.js';
 export * from './components/tooltip/tooltip.js';
 export * from './icons/activity-icon.js';
 export * from './icons/ai-icon.js';
+export * from './icons/analytics-icon.js';
 export * from './icons/byline-icon.js';
 export * from './icons/calendar-icon.js';
 export * from './icons/check-icon.js';

package/dist/uikit.js

@@ -41,6 +41,7 @@ export * from "./components/tabs/tabs.js";
 export * from "./components/tooltip/tooltip.js";
 export * from "./icons/activity-icon.js";
 export * from "./icons/ai-icon.js";
+export * from "./icons/analytics-icon.js";
 export * from "./icons/byline-icon.js";
 export * from "./icons/calendar-icon.js";
 export * from "./icons/check-icon.js";

package/dist/widgets/datepicker/datepicker.d.ts

@@ -6,6 +6,23 @@
  */
 import type React from 'react';
 import type { Intent, Size, Variant } from '../../components/inputs/@types/input.js';
+/**
+ * The selection as the editor made it: a calendar day and a clock reading,
+ * with no instant attached.
+ *
+ * `onDateChange` reports a `Date`, which is an instant, and building one from a
+ * wall time goes through `setHours` — so on the two days a year the clocks
+ * change, the instant is not the time that was picked. A spring-forward 02:30
+ * comes back as 03:30, and an ambiguous autumn 01:30 silently resolves to the
+ * earlier of its two instants. Callers that must reject or disambiguate those
+ * cases need the wall time itself, which is what this carries.
+ */
+export interface DatePickerWallTime {
+    /** Calendar day as `YYYY-MM-DD`. */
+    date: string;
+    /** Clock reading as `HH:mm`, 24-hour. */
+    time: string;
+}
 export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElement> {
     id: string;
     name: string;
@@ -13,6 +30,23 @@ export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElem
     required?: boolean;
     initialValue?: Date | null;
     mode?: 'date' | 'datetime';
+    /**
+     * Earliest selectable day. Days before it are disabled in the calendar and
+     * the month navigation will not go back past its month.
+     *
+     * Day granularity only — the day containing `minDate` stays selectable in
+     * full, and in `datetime` mode every slot in the time list remains offered.
+     * A caller that needs a cutoff finer than a day has to enforce it itself.
+     */
+    minDate?: Date;
+    /**
+     * Latest selectable day, the mirror of `minDate`: days after it are disabled
+     * and the month navigation will not go forward past its month. Takes
+     * precedence over `yearsInFuture`, which otherwise sets the upper bound.
+     *
+     * Day granularity only, on the same terms as `minDate`.
+     */
+    maxDate?: Date;
     yearsInFuture?: number;
     yearsInPast?: number;
     variant?: Variant;
@@ -28,10 +62,17 @@ export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElem
     ariaLabelForClear?: string;
     onClear?: () => void;
     onDateChange?: (value: Date | null) => void;
+    /**
+     * Fired alongside `onDateChange` with the day and clock reading the editor
+     * actually selected, before any instant is derived from them. Optional and
+     * additive — callers that are happy with the `Date` can ignore it entirely.
+     * Reports `null` when the selection is cleared.
+     */
+    onWallTimeChange?: (wall: DatePickerWallTime | null) => void;
     validatorFn?: (value: Date) => {
         valid: boolean;
         value: Date;
     };
     placeHolderText?: string;
 }
-export declare function DatePicker({ id, name, label, required, initialValue, mode, yearsInFuture, yearsInPast, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, contentClassName, onClear, onDateChange, validatorFn, helpText, errorText, placeHolderText, ariaLabelForSearch, ariaLabelForClear, ...rest }: DatePickerProps): React.JSX.Element;
+export declare function DatePicker({ id, name, label, required, initialValue, mode, minDate, maxDate, yearsInFuture, yearsInPast, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, contentClassName, onClear, onDateChange, onWallTimeChange, validatorFn, helpText, errorText, placeHolderText, ariaLabelForSearch, ariaLabelForClear, ...rest }: DatePickerProps): React.JSX.Element;

package/dist/widgets/datepicker/datepicker.js

@@ -13,14 +13,14 @@ import { ScrollArea } from "../../components/scroll-area/scroll-area.js";
 import { CalendarIcon } from "../../icons/calendar-icon.js";
 import { CloseIcon } from "../../icons/close-icon.js";
 import datepicker_module from "./datepicker.module.js";
-function DatePicker({ id, name, label, required, initialValue, mode = 'datetime', yearsInFuture = 1, yearsInPast = 10, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, contentClassName, onClear = ()=>{}, onDateChange = ()=>{}, validatorFn, helpText, errorText, placeHolderText = '', ariaLabelForSearch = 'date', ariaLabelForClear = 'clear', ...rest }) {
+function DatePicker({ id, name, label, required, initialValue, mode = 'datetime', minDate, maxDate, yearsInFuture = 1, yearsInPast = 10, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, contentClassName, onClear = ()=>{}, onDateChange = ()=>{}, onWallTimeChange, validatorFn, helpText, errorText, placeHolderText = '', ariaLabelForSearch = 'date', ariaLabelForClear = 'clear', ...rest }) {
     const [isOpen, setIsOpen] = useState(false);
-    const [time, setTime] = useState('08:00');
     const [date, setDate] = useState(()=>{
         if (initialValue) return initialValue;
         if (null == initialValue && true === required) return new Date();
         return null;
     });
+    const [time, setTime] = useState(()=>null != date ? format(date, 'HH:mm') : '08:00');
     const [month, setMonth] = useState(date);
     const calendarRef = useRef(null);
     const inputRef = useRef(null);
@@ -29,11 +29,31 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
         if (inputRef?.current != null) inputRef.current.value = '';
         setDate(null);
         onDateChange(null);
+        emitWallTime(null, time);
         onClear();
     };
     const handleOnDateChange = (value)=>{
         if (null != onDateChange && 'function' == typeof onDateChange) onDateChange(value);
     };
+    const emitWallTime = (day, clock)=>{
+        if (null == onWallTimeChange) return;
+        onWallTimeChange(null == day ? null : {
+            date: format(day, 'yyyy-MM-dd'),
+            time: clock
+        });
+    };
+    const disabledDays = [
+        ...null == minDate ? [] : [
+            {
+                before: minDate
+            }
+        ],
+        ...null == maxDate ? [] : [
+            {
+                after: maxDate
+            }
+        ]
+    ];
     const handleOnKeyDown = (e)=>{
         if ('ArrowDown' === e.key) {
             e.preventDefault();
@@ -44,6 +64,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
         if (null == initialValue && null != date && true === required && false === hasInitialized.current) {
             hasInitialized.current = true;
             onDateChange(date);
+            emitWallTime(date, time);
         }
     });
     return /*#__PURE__*/ jsxs("div", {
@@ -134,6 +155,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                     /*#__PURE__*/ jsx(Popover.Portal, {
                         children: /*#__PURE__*/ jsx(Popover.Positioner, {
                             sideOffset: 5,
+                            className: clsx('byline-datepicker-positioner', datepicker_module.positioner),
                             children: /*#__PURE__*/ jsxs(Popover.Popup, {
                                 className: clsx('byline-datepicker-content', datepicker_module.content, contentClassName),
                                 children: [
@@ -151,15 +173,18 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                                     onMonthChange: setMonth,
                                                     onSelect: (selectedDate)=>{
                                                         if (selectedDate) {
+                                                            const day = new Date(selectedDate.getTime());
                                                             const [hours, minutes] = time.split(':');
                                                             selectedDate.setHours(Number.parseInt(hours, 10), Number.parseInt(minutes, 10));
                                                             setDate(selectedDate);
                                                             setMonth(selectedDate);
                                                             handleOnDateChange(selectedDate);
+                                                            emitWallTime(day, time);
                                                         }
                                                     },
-                                                    startMonth: new Date(new Date().getFullYear() - yearsInPast, 0),
-                                                    endMonth: new Date(new Date().getFullYear() + yearsInFuture, 0)
+                                                    disabled: disabledDays.length > 0 ? disabledDays : void 0,
+                                                    startMonth: minDate ?? new Date(new Date().getFullYear() - yearsInPast, 0),
+                                                    endMonth: maxDate ?? new Date(new Date().getFullYear() + yearsInFuture, 0)
                                                 })
                                             }),
                                             'datetime' === mode && /*#__PURE__*/ jsx("div", {
@@ -185,6 +210,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                                                         newDate.setHours(Number.parseInt(hour, 10), Number.parseInt(minute, 10), 0);
                                                                         setDate(newDate);
                                                                         handleOnDateChange(newDate);
+                                                                        emitWallTime(date, timeValue);
                                                                     }
                                                                 },
                                                                 children: timeValue
@@ -212,9 +238,12 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                                             className: clsx('byline-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
                                                             onClick: ()=>{
                                                                 const today = new Date();
+                                                                const clock = format(today, 'HH:mm');
                                                                 setDate(today);
                                                                 setMonth(today);
+                                                                setTime(clock);
                                                                 handleOnDateChange(today);
+                                                                emitWallTime(today, clock);
                                                             },
                                                             children: "Today"
                                                         })
@@ -241,6 +270,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                                                 onClick: ()=>{
                                                                     setIsOpen(false);
                                                                     handleOnDateChange(date);
+                                                                    emitWallTime(date, time);
                                                                 },
                                                                 children: "Select"
                                                             })

package/dist/widgets/datepicker/datepicker.module.js

@@ -4,6 +4,7 @@ const datepicker_module = {
     input: "input-SaODq9",
     "input-wrapper": "input-wrapper-qwAckv",
     inputWrapper: "input-wrapper-qwAckv",
+    positioner: "positioner-l698qq",
     content: "content-UK9iLF",
     slideDownAndFade: "slideDownAndFade-dohHTE",
     slideLeftAndFade: "slideLeftAndFade-ugM6Hs",

package/dist/widgets/datepicker/datepicker_module.css

@@ -9,9 +9,12 @@
     width: 100%;
   }
 
+  :is(.positioner-l698qq, .byline-datepicker-positioner) {
+    z-index: var(--z-index-popover);
+  }
+
   :is(.content-UK9iLF, .byline-datepicker-content) {
     width: 100%;
-    z-index: var(--z-index-popover);
     padding-top: var(--spacing-16);
     padding-bottom: var(--spacing-8);
     padding-left: var(--spacing-8);

package/dist/widgets/modal/modal-context.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared between `Modal` and its slots. Lives in its own module because
+ * `Modal` renders `Modal.Header` while `Modal.Header` needs the context —
+ * importing it from `modal.tsx` would make the two modules circular.
+ */
+export declare const ModalContext: import("react").Context<{
+    onDismiss?: () => void;
+    /**
+     * Id the dialog points `aria-labelledby` at. `Modal.Header` puts it on the
+     * heading it finds among its children, which is what gives the dialog its
+     * accessible name — without it a screen reader announces every modal in the
+     * admin as an unnamed "dialog".
+     *
+     * A dangling reference degrades safely: name computation ignores an
+     * `aria-labelledby` that resolves to nothing and falls through, so a modal
+     * with no header is no worse off than before.
+     */
+    headingId?: string;
+}>;

package/dist/widgets/modal/modal-context.js

@@ -0,0 +1,4 @@
+"use client";
+import { createContext } from "react";
+const ModalContext = createContext({});
+export { ModalContext };

package/dist/widgets/modal/modal-header.d.ts

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import * as React from 'react';
 type ModalHeaderIntrinsicProps = React.JSX.IntrinsicElements['div'];
 export interface ModalHeaderProps extends ModalHeaderIntrinsicProps {
     className?: string;

package/dist/widgets/modal/modal-header.js

@@ -2,7 +2,29 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import modal_module from "./modal.module.js";
+import { ModalContext } from "./modal-context.js";
+import * as __rspack_external_react from "react";
+const HEADING_TAGS = new Set([
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6'
+]);
+function labelHeading(children, headingId) {
+    let labelled = false;
+    return __rspack_external_react.Children.map(children, (child)=>{
+        if (labelled || !/*#__PURE__*/ __rspack_external_react.isValidElement(child)) return child;
+        if ('string' != typeof child.type || !HEADING_TAGS.has(child.type)) return child;
+        labelled = true;
+        return /*#__PURE__*/ __rspack_external_react.cloneElement(child, {
+            id: headingId
+        });
+    });
+}
 const modal_header_ModalHeader = function({ ref, children, className, ...rest }) {
+    const { headingId } = (0, __rspack_external_react.useContext)(ModalContext);
     const classes = clsx('byline-modal-header', modal_module["modal-header"], 'prose', className);
     return /*#__PURE__*/ jsx("div", {
         style: {
@@ -11,7 +33,7 @@ const modal_header_ModalHeader = function({ ref, children, className, ...rest })
         ref: ref,
         ...rest,
         className: classes,
-        children: children
+        children: null == headingId ? children : labelHeading(children, headingId)
     });
 };
 export { modal_header_ModalHeader as ModalHeader };

package/dist/widgets/modal/modal.d.ts

@@ -2,16 +2,21 @@ import type React from 'react';
 import { ModalActions } from './modal-actions';
 import { ModalContainer } from './modal-container';
 import { ModalContent } from './modal-content';
+import { ModalContext } from './modal-context.js';
 import { ModalHeader } from './modal-header';
+export { ModalContext };
 export interface ModalProps {
     isOpen?: boolean;
     onDismiss?: () => void;
     closeOnOverlayClick?: boolean;
+    /**
+     * Accessible name for the dialog, for modals that carry no `Modal.Header`
+     * heading to borrow one from. Modals that do have a heading need nothing
+     * here — see `ModalContext.headingId`.
+     */
+    ariaLabel?: string;
     children?: React.ReactNode;
 }
-export declare const ModalContext: React.Context<{
-    onDismiss?: () => void;
-}>;
 export type UseModalProps = ReturnType<typeof useModal>;
 export declare function useModal(): {
     onDismiss: () => void;
@@ -19,7 +24,7 @@ export declare function useModal(): {
     isOpen: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
-declare function Modal({ isOpen, onDismiss, closeOnOverlayClick, children, }: ModalProps): React.JSX.Element;
+declare function Modal({ isOpen, onDismiss, closeOnOverlayClick, ariaLabel, children, }: ModalProps): React.JSX.Element;
 declare namespace Modal {
     var displayName: string;
     export { ModalContainer as Container };

package/dist/widgets/modal/modal.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useRef, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 import clsx from "clsx";
 import modal_module from "./modal.module.js";
 import { ModalActions } from "./modal-actions.js";
 import { ModalContainer } from "./modal-container.js";
 import { ModalContent } from "./modal-content.js";
+import { ModalContext } from "./modal-context.js";
 import { ModalHeader } from "./modal-header.js";
-const ModalContext = /*#__PURE__*/ createContext({});
 function useModal() {
     const [isOpen, setIsOpen] = useState(false);
     const onDismiss = useCallback(()=>{
@@ -24,7 +24,8 @@ function useModal() {
         setIsOpen
     };
 }
-function Modal({ isOpen, onDismiss, closeOnOverlayClick, children }) {
+function Modal({ isOpen, onDismiss, closeOnOverlayClick, ariaLabel, children }) {
+    const headingId = useId();
     const pressStartedOnOverlay = useRef(false);
     const handleOverlayPointerDown = (event)=>{
         pressStartedOnOverlay.current = event.target === event.currentTarget;
@@ -38,7 +39,8 @@ function Modal({ isOpen, onDismiss, closeOnOverlayClick, children }) {
     };
     return /*#__PURE__*/ jsx(ModalContext.Provider, {
         value: {
-            onDismiss
+            onDismiss,
+            headingId
         },
         children: /*#__PURE__*/ jsx(Dialog.Root, {
             open: isOpen,
@@ -54,6 +56,8 @@ function Modal({ isOpen, onDismiss, closeOnOverlayClick, children }) {
                     }),
                     /*#__PURE__*/ jsx(Dialog.Popup, {
                         className: clsx('byline-modal-wrapper', modal_module["modal-wrapper"]),
+                        "aria-label": ariaLabel,
+                        "aria-labelledby": null == ariaLabel ? headingId : void 0,
                         onPointerDown: handleOverlayPointerDown,
                         onClick: handleOverlayClick,
                         children: children

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "4.14.1",
+  "version": "4.16.0",
   "engines": {
     "node": ">=20.9.0"
   },

package/src/icons/analytics-icon.tsx

@@ -0,0 +1,48 @@
+import type React from 'react'
+
+import cx from 'clsx'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+/**
+ * Columns standing on an L-shaped axis. After lucide `chart-column-increasing`
+ * (ISC), redrawn to this set's 1.75 stroke; source kept in
+ * `source/icon-analytics.svg`. The column feet terminate one unit above the
+ * axis so their round caps meet it rather than crossing it.
+ *
+ * Distinct from `DashboardIcon`, which is a four-panel layout grid and reads as
+ * "dashboard", not "measurement".
+ */
+export const AnalyticsIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('analytics-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.75}
+      >
+        <path d="M3 3v16a2 2 0 0 0 2 2h16" />
+        <path d="M8 20v-4" />
+        <path d="M13 20v-9" />
+        <path d="M18 20v-13" />
+      </svg>
+    </IconElement>
+  )
+}
+
+AnalyticsIcon.displayName = 'AnalyticsIcon'

package/src/icons/index.ts

@@ -1,5 +1,6 @@
 export * from './activity-icon.js'
 export * from './ai-icon.js'
+export * from './analytics-icon.js'
 export * from './byline-icon.js'
 export * from './calendar-icon.js'
 export * from './check-icon.js'

package/src/icons/source/icon-analytics.svg

@@ -0,0 +1,2 @@
+<!-- After lucide `chart-column-increasing` (ISC), redrawn for analytics-icon.tsx. -->
+<svg role="presentation" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M8 20v-4"/><path d="M13 20v-9"/><path d="M18 20v-13"/></svg>

package/src/uikit.ts

@@ -55,6 +55,7 @@ export * from './components/tabs/tabs.js'
 export * from './components/tooltip/tooltip.js'
 export * from './icons/activity-icon.js'
 export * from './icons/ai-icon.js'
+export * from './icons/analytics-icon.js'
 export * from './icons/byline-icon.js'
 export * from './icons/calendar-icon.js'
 export * from './icons/check-icon.js'

package/src/widgets/datepicker/datepicker.module.css

@@ -21,10 +21,19 @@
     width: 100%;
   }
 
+  /* Base UI's Positioner is the absolutely-positioned element, so it is the
+     one that can take part in z-index stacking. The Popup inside it is
+     `position: static`, where a z-index is inert — which is why the calendar
+     lost to any positioned ancestor above it in the tree, most visibly by
+     rendering behind a Modal. */
+  .positioner,
+  :global(.byline-datepicker-positioner) {
+    z-index: var(--z-index-popover);
+  }
+
   .content,
   :global(.byline-datepicker-content) {
     width: 100%;
-    z-index: var(--z-index-popover);
     border-radius: 4px;
     padding-top: var(--spacing-16);
     padding-bottom: var(--spacing-8);

package/src/widgets/datepicker/datepicker.tsx

@@ -25,6 +25,24 @@ import { CloseIcon } from '../../icons/close-icon.js'
 import styles from './datepicker.module.css'
 import type { Intent, Size, Variant } from '../../components/inputs/@types/input.js'
 
+/**
+ * The selection as the editor made it: a calendar day and a clock reading,
+ * with no instant attached.
+ *
+ * `onDateChange` reports a `Date`, which is an instant, and building one from a
+ * wall time goes through `setHours` — so on the two days a year the clocks
+ * change, the instant is not the time that was picked. A spring-forward 02:30
+ * comes back as 03:30, and an ambiguous autumn 01:30 silently resolves to the
+ * earlier of its two instants. Callers that must reject or disambiguate those
+ * cases need the wall time itself, which is what this carries.
+ */
+export interface DatePickerWallTime {
+  /** Calendar day as `YYYY-MM-DD`. */
+  date: string
+  /** Clock reading as `HH:mm`, 24-hour. */
+  time: string
+}
+
 export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElement> {
   id: string
   name: string
@@ -32,6 +50,23 @@ export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElem
   required?: boolean
   initialValue?: Date | null
   mode?: 'date' | 'datetime'
+  /**
+   * Earliest selectable day. Days before it are disabled in the calendar and
+   * the month navigation will not go back past its month.
+   *
+   * Day granularity only — the day containing `minDate` stays selectable in
+   * full, and in `datetime` mode every slot in the time list remains offered.
+   * A caller that needs a cutoff finer than a day has to enforce it itself.
+   */
+  minDate?: Date
+  /**
+   * Latest selectable day, the mirror of `minDate`: days after it are disabled
+   * and the month navigation will not go forward past its month. Takes
+   * precedence over `yearsInFuture`, which otherwise sets the upper bound.
+   *
+   * Day granularity only, on the same terms as `minDate`.
+   */
+  maxDate?: Date
   yearsInFuture?: number
   yearsInPast?: number
   variant?: Variant
@@ -47,6 +82,13 @@ export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElem
   ariaLabelForClear?: string
   onClear?: () => void
   onDateChange?: (value: Date | null) => void
+  /**
+   * Fired alongside `onDateChange` with the day and clock reading the editor
+   * actually selected, before any instant is derived from them. Optional and
+   * additive — callers that are happy with the `Date` can ignore it entirely.
+   * Reports `null` when the selection is cleared.
+   */
+  onWallTimeChange?: (wall: DatePickerWallTime | null) => void
   validatorFn?: (value: Date) => {
     valid: boolean
     value: Date
@@ -61,6 +103,8 @@ export function DatePicker({
   required,
   initialValue,
   mode = 'datetime',
+  minDate,
+  maxDate,
   yearsInFuture = 1,
   yearsInPast = 10,
   variant,
@@ -72,6 +116,7 @@ export function DatePicker({
   contentClassName,
   onClear = () => {},
   onDateChange = () => {},
+  onWallTimeChange,
   validatorFn,
   helpText,
   errorText,
@@ -81,7 +126,6 @@ export function DatePicker({
   ...rest
 }: DatePickerProps): React.JSX.Element {
   const [isOpen, setIsOpen] = useState(false)
-  const [time, setTime] = useState<string>('08:00')
   const [date, setDate] = useState<Date | null>(() => {
     if (initialValue) {
       return initialValue
@@ -91,6 +135,11 @@ export function DatePicker({
     }
     return null
   })
+  // Seeded from the incoming date so the clock the widget holds agrees with the
+  // date it is showing. Declared after `date` for that reason. Previously this
+  // always started at 08:00, so picking a different day on a picker opened at
+  // 17:56 silently moved the value to 08:00.
+  const [time, setTime] = useState<string>(() => (date != null ? format(date, 'HH:mm') : '08:00'))
   const [month, setMonth] = useState<Date | null>(date)
   const calendarRef = useRef<HTMLDivElement | null>(null)
   const inputRef = useRef<HTMLInputElement>(null)
@@ -102,6 +151,7 @@ export function DatePicker({
     }
     setDate(null)
     onDateChange(null)
+    emitWallTime(null, time)
     onClear()
   }
 
@@ -111,6 +161,26 @@ export function DatePicker({
     }
   }
 
+  /**
+   * Report the selection as a wall time. `clock` is passed explicitly wherever
+   * the editor's chosen clock reading is known independently of `day`, because
+   * `day` has already been through `setHours` by then and cannot be trusted to
+   * still say what was picked.
+   */
+  const emitWallTime = (day: Date | null, clock: string): void => {
+    if (onWallTimeChange == null) return
+    onWallTimeChange(day == null ? null : { date: format(day, 'yyyy-MM-dd'), time: clock })
+  }
+
+  // Two separate matchers, never one `{ before, after }` object: that shape is
+  // react-day-picker's DateInterval and matches the days *between* the two
+  // bounds — the exact inverse of an allowed window. An array of matchers is
+  // OR'd, so each bound disables its own side.
+  const disabledDays = [
+    ...(minDate == null ? [] : [{ before: minDate }]),
+    ...(maxDate == null ? [] : [{ after: maxDate }]),
+  ]
+
   const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
     if (e.key === 'ArrowDown') {
       e.preventDefault()
@@ -132,6 +202,7 @@ export function DatePicker({
     ) {
       hasInitialized.current = true
       onDateChange(date)
+      emitWallTime(date, time)
     }
   })
 
@@ -205,7 +276,10 @@ export function DatePicker({
           <span className="sr-only">Select date</span>
         </Popover.Trigger>
         <Popover.Portal>
-          <Popover.Positioner sideOffset={5}>
+          <Popover.Positioner
+            sideOffset={5}
+            className={cx('byline-datepicker-positioner', styles.positioner)}
+          >
             <Popover.Popup
               className={cx('byline-datepicker-content', styles.content, contentClassName)}
             >
@@ -222,6 +296,10 @@ export function DatePicker({
                     onMonthChange={setMonth}
                     onSelect={(selectedDate: Date) => {
                       if (selectedDate) {
+                        // Read the day before `setHours` mutates it: the
+                        // editor picked this day at the clock reading already
+                        // held in `time`, and normalization can move both.
+                        const day = new Date(selectedDate.getTime())
                         const [hours, minutes] = time.split(':')
                         selectedDate.setHours(
                           Number.parseInt(hours, 10),
@@ -230,15 +308,15 @@ export function DatePicker({
                         setDate(selectedDate)
                         setMonth(selectedDate)
                         handleOnDateChange(selectedDate)
+                        emitWallTime(day, time)
                       }
                     }}
-                    startMonth={new Date(new Date().getFullYear() - yearsInPast, 0)}
-                    endMonth={new Date(new Date().getFullYear() + yearsInFuture, 0)}
-                    // TODO: add props
-                    // disabled={(date) =>
-                    //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
-                    //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
-                    // }
+                    disabled={disabledDays.length > 0 ? disabledDays : undefined}
+                    // Clamp the navigable range to the bounds as well as
+                    // disabling the days, so the caller is not offered months
+                    // in which nothing can be picked.
+                    startMonth={minDate ?? new Date(new Date().getFullYear() - yearsInPast, 0)}
+                    endMonth={maxDate ?? new Date(new Date().getFullYear() + yearsInFuture, 0)}
                   />
                 </div>
                 {mode === 'datetime' && (
@@ -268,6 +346,10 @@ export function DatePicker({
                                   )
                                   setDate(newDate)
                                   handleOnDateChange(newDate)
+                                  // `date`, not `newDate` — the grid label is
+                                  // what was clicked, and `newDate` may have
+                                  // been normalized away from it.
+                                  emitWallTime(date, timeValue)
                                 }
                               }}
                             >
@@ -297,9 +379,14 @@ export function DatePicker({
                       )}
                       onClick={() => {
                         const today = new Date()
+                        const clock = format(today, 'HH:mm')
                         setDate(today)
                         setMonth(today)
+                        // Keep the held clock in step with the value, so a
+                        // subsequent day pick preserves this time.
+                        setTime(clock)
                         handleOnDateChange(today)
+                        emitWallTime(today, clock)
                       }}
                     >
                       Today
@@ -329,6 +416,7 @@ export function DatePicker({
                       onClick={() => {
                         setIsOpen(false)
                         handleOnDateChange(date)
+                        emitWallTime(date, time)
                       }}
                     >
                       Select

package/src/widgets/modal/modal-context.ts

@@ -0,0 +1,23 @@
+'use client'
+
+import { createContext } from 'react'
+
+/**
+ * Shared between `Modal` and its slots. Lives in its own module because
+ * `Modal` renders `Modal.Header` while `Modal.Header` needs the context —
+ * importing it from `modal.tsx` would make the two modules circular.
+ */
+export const ModalContext = createContext<{
+  onDismiss?: () => void
+  /**
+   * Id the dialog points `aria-labelledby` at. `Modal.Header` puts it on the
+   * heading it finds among its children, which is what gives the dialog its
+   * accessible name — without it a screen reader announces every modal in the
+   * admin as an unnamed "dialog".
+   *
+   * A dangling reference degrades safely: name computation ignores an
+   * `aria-labelledby` that resolves to nothing and falls through, so a modal
+   * with no header is no worse off than before.
+   */
+  headingId?: string
+}>({})

package/src/widgets/modal/modal-header.tsx

@@ -1,16 +1,42 @@
 'use client'
 
-import type * as React from 'react'
+import * as React from 'react'
+import { useContext } from 'react'
 
 import cx from 'clsx'
 
 import styles from './modal.module.css'
+import { ModalContext } from './modal-context.js'
 
 type ModalHeaderIntrinsicProps = React.JSX.IntrinsicElements['div']
 export interface ModalHeaderProps extends ModalHeaderIntrinsicProps {
   className?: string
 }
 
+const HEADING_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
+
+/**
+ * Give the dialog's heading the id that `Modal` points `aria-labelledby` at.
+ *
+ * The heading is found rather than declared, so no caller has to change: every
+ * header in the admin is written as a heading element optionally followed by a
+ * close button. Only the first heading is labelled, and only direct children
+ * are searched — a header deep enough to hide its heading is better served by
+ * `Modal`'s explicit `ariaLabel`.
+ *
+ * `Modal.Header` owns the heading's `id` for this reason; an id set by a caller
+ * is replaced, because the dialog's name depends on this one resolving.
+ */
+function labelHeading(children: React.ReactNode, headingId: string): React.ReactNode {
+  let labelled = false
+  return React.Children.map(children, (child) => {
+    if (labelled || !React.isValidElement(child)) return child
+    if (typeof child.type !== 'string' || !HEADING_TAGS.has(child.type)) return child
+    labelled = true
+    return React.cloneElement(child as React.ReactElement<{ id?: string }>, { id: headingId })
+  })
+}
+
 export const ModalHeader = function ModalHeader({
   ref,
   children,
@@ -19,10 +45,11 @@ export const ModalHeader = function ModalHeader({
 }: ModalHeaderProps & {
   ref?: React.RefObject<HTMLDivElement>
 }) {
+  const { headingId } = useContext(ModalContext)
   const classes = cx('byline-modal-header', styles['modal-header'], 'prose', className)
   return (
     <div style={{ overflowWrap: 'anywhere' }} ref={ref} {...rest} className={classes}>
-      {children}
+      {headingId == null ? children : labelHeading(children, headingId)}
     </div>
   )
 }

package/src/widgets/modal/modal.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type React from 'react'
-import { createContext, useCallback, useRef, useState } from 'react'
+import { useCallback, useId, useRef, useState } from 'react'
 
 import { Dialog } from '@base-ui/react/dialog'
 import cx from 'clsx'
@@ -10,19 +10,24 @@ import styles from './modal.module.css'
 import { ModalActions } from './modal-actions'
 import { ModalContainer } from './modal-container'
 import { ModalContent } from './modal-content'
+import { ModalContext } from './modal-context.js'
 import { ModalHeader } from './modal-header'
 
+export { ModalContext }
+
 export interface ModalProps {
   isOpen?: boolean
   onDismiss?: () => void
   closeOnOverlayClick?: boolean
+  /**
+   * Accessible name for the dialog, for modals that carry no `Modal.Header`
+   * heading to borrow one from. Modals that do have a heading need nothing
+   * here — see `ModalContext.headingId`.
+   */
+  ariaLabel?: string
   children?: React.ReactNode
 }
 
-export const ModalContext = createContext<{
-  onDismiss?: () => void
-}>({})
-
 export type UseModalProps = ReturnType<typeof useModal>
 
 export function useModal(): {
@@ -53,8 +58,10 @@ function Modal({
   isOpen,
   onDismiss,
   closeOnOverlayClick,
+  ariaLabel,
   children,
 }: ModalProps): React.JSX.Element {
+  const headingId = useId()
   // Overlay dismissal is handled here rather than by Base UI's outside-press
   // detection. `Dialog.Popup` below is the full-viewport flex box that centres
   // the dialog, not the dialog box itself, so a click on the empty space around
@@ -83,7 +90,7 @@ function Modal({
   }
 
   return (
-    <ModalContext.Provider value={{ onDismiss }}>
+    <ModalContext.Provider value={{ onDismiss, headingId }}>
       <Dialog.Root
         open={isOpen}
         onOpenChange={(open) => {
@@ -98,6 +105,8 @@ function Modal({
           <Dialog.Backdrop className={cx('byline-modal-backdrop', styles.backdrop)} />
           <Dialog.Popup
             className={cx('byline-modal-wrapper', styles['modal-wrapper'])}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabel == null ? headingId : undefined}
             onPointerDown={handleOverlayPointerDown}
             onClick={handleOverlayClick}
           >