@ahrowe/ui 0.38.0 → 0.39.0

package/dist/types/common/datePicker/components/datePickerMonth/datePickerMonth.types.d.ts

@@ -8,16 +8,16 @@ export interface DatePickerMonthProps {
     month?: number;
     /** Year to display. */
     year?: number;
-    /** Called with the day that was picked. */
-    onSelect?: (date: Date) => void;
+    /** Called with the day that was picked, `'YYYY-MM-DD'`. */
+    onSelect?: (day: string) => void;
     /** First day of the highlighted range, and the day that starts with the tab stop. */
-    selectionStart?: Date;
+    selectionStart?: string | null;
     /** Last day of the highlighted range. */
-    selectionEnd?: Date;
+    selectionEnd?: string | null;
     /** Days before this are not selectable. */
-    minDate?: Date | null;
+    minDate?: string | null;
     /** Days after this are not selectable. */
-    maxDate?: Date | null;
+    maxDate?: string | null;
     /** Called to shift the displayed month by ±1 when arrow navigation runs past its edge. */
     onNavigateMonth?: (delta: 1 | -1) => void;
 }

package/dist/types/common/datePicker/dateFunctions.d.ts

@@ -1,26 +1,17 @@
-export declare function getDaysInMonth(month: number, year: number): number;
-export declare function getDateFromDayMonthAndYear(day: number, month: number, year: number): Date;
+import { DayParts } from '../utils/day.js';
 export declare function getMonthName(locale: string, year: number, month: number, day: number, short?: boolean): string;
 export declare function getMonthNames(locale?: string): string[];
 export declare function getWeekDays(locale: string, short?: boolean): string[];
+/** 1 (Monday) to 7 (Sunday). */
 export declare function getStartWeekDayOfMonth(month: number, year: number): number;
-/**
- * Adds `delta` days to a day/month/year triple, rolling over into adjacent months/years as
- * needed. Pure integer arithmetic over `getDaysInMonth` rather than a `Date` object, so it
- * can't drift a day from local-vs-UTC ambiguity the way mutating a UTC-constructed `Date`
- * with its local `setDate` would.
- */
-export declare function addDays(day: number, month: number, year: number, delta: number): {
-    day: number;
-    month: number;
-    year: number;
-};
-export declare function getDayMonthAndYearOfDate(date: Date): {
-    day: number;
-    month: number;
-    year: number;
-};
-export declare function getDateString(date: Date): string;
+/** `delta` days from a day, rolling over into the months and years around it. */
+export declare function addDays(day: number, month: number, year: number, delta: number): DayParts;
+/** Today in the user's time zone. */
+export declare function getToday(): DayParts;
+/** A `'YYYY-MM-DD'` day as the field shows it, `dd.mm.yyyy`, or `''` for anything else. */
+export declare function getDateString(value: string | null | undefined): string;
+/** What the field holds, `dd.mm.yyyy`, as `'YYYY-MM-DD'`; `null` while incomplete, or for a day that does not exist. */
+export declare function parseDateString(text: string): string | null;
 export interface DateMaskSelection {
     start: number;
     end: number;

package/dist/types/common/datePicker/datePicker.types.d.ts

@@ -3,8 +3,10 @@ import { FormValidator } from '../../services/formValidation/index.js';
 import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types.js';
 export type DatePickerSlots = 'root' | 'input' | 'header' | 'monthDropdown' | 'yearDropdown' | 'calendar' | 'clearButton';
 /**
- * `onChange` and `onSelect` report a date rather than a DOM event, so the native
+ * `onChange` and `onSelect` report a day rather than a DOM event, so the native
  * handlers of those names are dropped instead of being widened to accept both.
+ *
+ * Every day is a `'YYYY-MM-DD'` string, never a `Date`: see docs/DatePicker.md.
  */
 export interface DatePickerProps extends Omit<HtmlProps<HTMLDivElement>, 'onChange' | 'onSelect'> {
     /** Class on the root element. */
@@ -12,33 +14,37 @@ export interface DatePickerProps extends Omit<HtmlProps<HTMLDivElement>, 'onChan
     style?: CSSProperties;
     classNames?: SlotClassNames<DatePickerSlots>;
     styles?: SlotStyles<DatePickerSlots>;
-    /** Selected date, controlled. Ignored while a `formValidator` owns the value. */
-    selected?: Date;
+    /** Selected day, `'YYYY-MM-DD'`, controlled. Ignored while a `formValidator` owns the value. */
+    selected?: string | null;
     /** Floating label on the input. */
     label?: string;
     /**
      * Called when a day is picked in the calendar, after `onChange`. Picking also
      * closes the picker.
      */
-    onSelect?: (date: Date | null) => void;
+    onSelect?: (day: string | null) => void;
     /**
      * Called whenever the value changes, whether picked in the calendar or typed
-     * into the input. `null` when the field was cleared or holds no valid date.
+     * into the input. `null` when the field was cleared or holds no valid day.
      */
-    onChange?: (date: Date | null) => void;
-    /** Hands the value to a validator, which then owns it. See docs/FormValidator.md. */
-    formValidator?: FormValidator | null;
-    /** Earliest selectable date. Also bounds the year dropdown. */
-    minDate?: Date | null;
-    /** Latest selectable date. Also bounds the year dropdown. */
-    maxDate?: Date | null;
+    onChange?: (day: string | null) => void;
+    /**
+     * Hands the value to a validator, which then owns it. See docs/FormValidator.md. The three
+     * forms are what TypeScript infers for `new FormValidator<string | null>(null)`,
+     * `new FormValidator(null)` and `new FormValidator('')`; a `Date` validator fits none of them.
+     */
+    formValidator?: FormValidator<string | null> | FormValidator<string> | FormValidator<null> | null;
+    /** Earliest selectable day, `'YYYY-MM-DD'`. Also bounds the year dropdown. */
+    minDate?: string | null;
+    /** Latest selectable day, `'YYYY-MM-DD'`. Also bounds the year dropdown. */
+    maxDate?: string | null;
     /**
      * Start of a highlighted range. Defaults to the selected date, so two pickers
      * sharing a start and an end highlight the span between them.
      */
-    startDate?: Date;
+    startDate?: string | null;
     /** End of the highlighted range. */
-    endDate?: Date;
+    endDate?: string | null;
     /** Render the calendar in place instead of in a popover. */
     isInline?: boolean;
     /** Open the calendar in a modal, with the input read-only. */

package/dist/types/common/datePicker/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './datePicker.js';
 export * from './datePicker.types.js';
+export { dateToDay, dayToDate } from '../utils/day.js';

package/dist/types/common/popover/popover.types.d.ts

@@ -24,6 +24,11 @@ export type PopoverSlots = 'root' | 'trigger' | 'floating' | 'panel' | 'arrow' |
 export interface PopoverProps extends Omit<HtmlProps, 'content'> {
     /** The trigger element. */
     children?: ReactNode;
+    /**
+     * Place the panel against this element instead of `children`, for one Popover does not wrap.
+     * Open it with `isOpen`; `null` falls back to `children`.
+     */
+    anchor?: HTMLElement | null;
     /** The popover body. */
     content?: ReactNode;
     /** Preferred side (default `Bottom`). */

package/dist/types/common/utils/day.d.ts

@@ -0,0 +1,16 @@
+export interface DayParts {
+    year: number;
+    /** 1 to 12. */
+    month: number;
+    day: number;
+}
+export declare function daysInMonth({ year, month }: Pick<DayParts, 'year' | 'month'>): number;
+/** The parts of a `'YYYY-MM-DD'` string, or `null` for anything else, 31 February included. */
+export declare function parseDay(value: unknown): DayParts | null;
+/** `value` itself when it is a `'YYYY-MM-DD'` day that exists, otherwise `null`. */
+export declare function asDay(value: unknown): string | null;
+export declare function formatDay({ year, month, day }: DayParts): string;
+/** The day `date` falls on in the browser's time zone, as `'YYYY-MM-DD'`; `''` for an Invalid Date. */
+export declare function dateToDay(date: Date): string;
+/** The first moment of a `'YYYY-MM-DD'` day in the browser's time zone. An Invalid Date for anything else. */
+export declare function dayToDate(day: string): Date;

package/dist/types/index.d.ts

@@ -158,4 +158,4 @@ export * from './common/hooks/index.js';
 export { FormValidator, FormValidatorGroup, Validators, ValidatableComponent, useFormValidator, useFormValidatorGroup, } from './services/formValidation/index.js';
 export type { ValidationError, ValidatorFunction, ErrorParser, FormValidatorGroupOptions, InferGroupValues, MergedValues, } from './services/formValidation/index.js';
 export { mapLocale, setLocale, getLocale } from './services/localization.js';
-export { isNumber, isDate, isISODate, isEmail, isBic, isURL, hasEightPasswordChars, hasOnePasswordLetter, hasOnePasswordDigit, isPassword, } from '@ahrowe/form-validation';
+export { isNumber, isDate, isDay, isISODate, isEmail, isBic, isURL, hasEightPasswordChars, hasOnePasswordLetter, hasOnePasswordDigit, isPassword, } from '@ahrowe/form-validation';

package/docs/CLAUDE.md

@@ -20,6 +20,10 @@ enums and slot names. Do not infer props from a component's name.
   RadioGroup, DatePicker, TimeInput, OtpInput, IconPicker) take `formValidator`, which then owns
   the value: `new FormValidator('', [Validators.required()])`. Whole forms use
   `useFormValidatorGroup`. See FormValidator.md and FormValidatorGroup.md.
+- **Days and times are strings**, never a `Date`: DatePicker holds `'YYYY-MM-DD'`, TimeInput
+  `'HH:MM'`. `dateToDay` and `dayToDate` convert in the browser's time zone; never use
+  `toISOString().slice(0, 10)`, which gives the UTC day. DatePicker.md shows how to turn a day
+  into a moment in a given time zone.
 - **Styling.** `className` and `style` hit the root element; `classNames.<slot>` and `styles.<slot>`
   hit named inner elements. Slot names are on each doc's **Slots** line. Every native attribute of
   the root element passes through (`id`, `aria-*`, `data-*`, `on*`).
@@ -63,7 +67,7 @@ enums and slot names. Do not infer props from a component's name.
 | ConfigProvider.md | ConfigProvider | Set global **default props** for library components once, near the root of your app, instead of repeating the same prop on every instance |
 | ConfirmModal.md | ConfirmModal | Confirmation dialog before destructive or irreversible actions — delete, archive, send, overwrite |
 | CopyButton.md | CopyButton | Icon-only button that copies a value to the clipboard: an invoice number, an ID in a table row, an API key or share link inside an `Input` |
-| DatePicker.md | DatePicker | Date selection input — booking forms, birth date fields, date range pickers, deadline selectors |
+| DatePicker.md | DatePicker, dateToDay, dayToDate | Date selection input — booking forms, birth date fields, date range pickers, deadline selectors |
 | Divider.md | Divider, DividerTextPosition, DividerOrientation | A rule that separates sections of content — horizontal by default, filling the width of its parent |
 | Drawer.md | Drawer | Inline horizontal panel that collapses and expands by animating its width — side panels, navigation rails, detail/filter panes that slide open beside the main content |
 | DropZone.md | DropZone, DropZoneReturnType, DropZoneStatus | Drag-and-drop file upload area, optionally click-to-open the native picker |

package/docs/DatePicker.md

@@ -2,72 +2,58 @@
 
 **When to use:** Date selection input — booking forms, birth date fields, date range pickers, deadline selectors. Renders as a text input with a floating label by default; can also be inline or modal.
 
-**Keywords:** calendar picker
+**Keywords:** calendar picker, timezone, ISO date, date string, day picker
 
 **Keyboard:** the day grid uses a roving tab stop (the selected day, or today, or the 1st — one Tab reaches it, not every day individually); arrow keys move by day (`←`/`→`) or by week (`↑`/`↓`), crossing into the adjacent month automatically when they run past the edge, and Enter/Space selects the focused day.
 
-**Import:** `import { DatePicker } from '@ahrowe/ui'`  
+**Import:** `import { DatePicker, dateToDay, dayToDate } from '@ahrowe/ui'`  
 **Types:** `import type { DatePickerProps } from '@ahrowe/ui'`
 
 ```tsx
-import { DatePicker, FormValidator } from '@ahrowe/ui';
+import { DatePicker, FormValidator, dateToDay } from '@ahrowe/ui';
 
-// Controlled input with floating label
-<DatePicker
-  label="Date of birth"
-  selected={date}
-  onSelect={(date) => setDate(date)}
-/>
+// Controlled input with floating label. The value is a day: '2026-09-15'
+const [day, setDay] = useState<string | null>(null);
+<DatePicker label="Date of birth" selected={day} onSelect={setDay} />
 
 // With FormValidator
-const dateValidator = new FormValidator<Date | null>(null);
-<DatePicker label="Start date" formValidator={dateValidator} />
+const dayValidator = new FormValidator<string | null>(null);
+<DatePicker label="Start date" formValidator={dayValidator} />
 
 // Inline calendar (no input field)
-<DatePicker
-  selected={date}
-  onSelect={setDate}
-  isInline
-  noInput
-/>
+<DatePicker selected={day} onSelect={setDay} isInline noInput />
 
 // Inside a modal (calendar opens in a Modal overlay)
-<DatePicker
-  label="Schedule date"
-  selected={date}
-  onSelect={setDate}
-  isModal
-/>
+<DatePicker label="Schedule date" selected={day} onSelect={setDay} isModal />
 
-// With min/max constraints and a clear button
+// From today to the end of the year, with a clear button
 <DatePicker
   label="Appointment"
-  selected={date}
-  onSelect={setDate}
-  minDate={new Date()}
-  maxDate={endOfYear}
+  selected={day}
+  onSelect={setDay}
+  minDate={dateToDay(new Date())}
+  maxDate="2026-12-31"
   showClearButton
 />
 
-// Date range (highlight start–end)
-<DatePicker
-  label="From"
-  selected={startDate}
-  onSelect={setStartDate}
-  startDate={startDate}
-  endDate={endDate}
-/>
+// Range: two pickers sharing a highlighted start and end
+<DatePicker label="From" selected={from} onSelect={setFrom} startDate={from} endDate={to} />
+<DatePicker label="To" selected={to} onSelect={setTo} startDate={from} endDate={to} minDate={from} />
 ```
 
+**A day, not a moment:** every day DatePicker takes or hands out is a `'YYYY-MM-DD'` string, the value an `<input type="date">` has. It has no time and no time zone, so it is the same day for everyone who sees it. The strings sort as the days do, so `from < to` compares two of them. `null`, `''` and anything that is not a real day, such as `'2026-02-30'`, mean no value; anything but the first two also logs a warning naming the prop, once.
+
+`dateToDay(date)` and `dayToDate(day)` convert to and from a `Date` in the browser's time zone: `dateToDay(new Date())` is today, `dayToDate(day)` the first moment of that day. Do not use `date.toISOString().slice(0, 10)`: that is the day in UTC, which in Vienna shortly after midnight is still yesterday.
+
 **Key props:**
 
 | Prop | Type | Description |
 |------|------|-------------|
 | `label` | `string` | Floating label on the input |
-| `selected` | `Date` | Currently selected date |
-| `onSelect` | `(date: Date \| null) => void` | Called when a date is picked |
-| `onChange` | `(date: Date \| null) => void` | Alternative change callback |
-| `formValidator` | `FormValidator` | Connects to validation |
+| `selected` | `string \| null` | Selected day, `'YYYY-MM-DD'` |
+| `onSelect` | `(day: string \| null) => void` | Called when a day is picked in the calendar |
+| `onChange` | `(day: string \| null) => void` | Called on every change, picked or typed |
+| `formValidator` | `FormValidator<string \| null>` | Connects to validation, and then owns the value. `new FormValidator(null)` and `new FormValidator('')` fit too |
 | `isRequired` | `boolean` | |
 | `isValid` | `boolean` | Manual valid state |
 | `errorMessage` | `string` | Manual error message |
@@ -75,12 +61,53 @@ const dateValidator = new FormValidator<Date | null>(null);
 | `noHeader` | `boolean` | Hide the month/year navigation header |
 | `isModal` | `boolean` | Open calendar in a Modal overlay |
 | `isInline` | `boolean` | Render calendar always-visible inline |
-| `minDate` | `Date \| null` | Earliest selectable date |
-| `maxDate` | `Date \| null` | Latest selectable date |
+| `minDate` | `string \| null` | Earliest selectable day |
+| `maxDate` | `string \| null` | Latest selectable day |
 | `showClearButton` | `boolean` | Show a clear/reset button |
-| `startDate` | `Date` | Range highlight start |
-| `endDate` | `Date` | Range highlight end |
+| `startDate` | `string \| null` | Range highlight start |
+| `endDate` | `string \| null` | Range highlight end |
 
 **Slots:** `root` `input` `header` `monthDropdown` `yearDropdown` `calendar` `clearButton`
 
-The root also takes the full native attribute set (`id`, `data-*`, `aria-*`, `title`, event handlers). `onChange` and `onSelect` report a `Date`, so the native handlers of those names are not available.
+The root also takes the full native attribute set (`id`, `data-*`, `aria-*`, `title`, event handlers). `onChange` and `onSelect` report a day, so the native handlers of those names are not available.
+
+## When a day stands for a moment
+
+A poll that closes on a day, a booking that starts on one, a deadline: here the day has to become a moment, and only your app knows in which time zone and at which point of the day. Store the moment itself (a UTC timestamp), and show it in the time zone of whoever reads it.
+
+In the user's own time zone the platform is enough:
+
+```ts
+const start = dayToDate(day); // the first moment of the day, where the user is
+```
+
+In a given zone, a company's, a household's, a venue's, use a library that knows time zones, such as Luxon. Name the zone (`'Europe/Vienna'`), not its offset (`+02:00`): the offset changes with daylight saving.
+
+```ts
+import { DateTime } from 'luxon';
+
+// Closes at the end of the day in Vienna, wherever the reader is.
+const closesAt = DateTime.fromISO(day, { zone: 'Europe/Vienna' }).endOf('day').toJSDate();
+
+// And back, for the picker: the day that moment falls on in Vienna.
+const shown = DateTime.fromJSDate(closesAt, { zone: 'Europe/Vienna' }).toISODate();
+```
+
+With a [TimeInput](TimeInput.md) next to it, which holds `'HH:MM'`, the two make a moment the same way: ``DateTime.fromISO(`${day}T${time}`, { zone })``, or, in the user's own zone, `dayToDate(day)` followed by `setHours(hours, minutes)`.
+
+## Migration from Date values
+
+Before 0.39 every day was a `Date` at midnight UTC. Now it is a `'YYYY-MM-DD'` string, and TypeScript points at each place to change, because a `Date` no longer fits any of the props. Two things still get through: a `Date` in plain JavaScript or through a validator typed as `FormValidator<any>`, and a stored value read back as its JSON, `'2026-09-15T00:00:00.000Z'`, which is a string to TypeScript. DatePicker shows either as an empty field, logs a warning naming the prop, and leaves the value alone until the user actually edits the field.
+
+| Before | After |
+|--------|-------|
+| `useState<Date \| null>(null)` | `useState<string \| null>(null)` |
+| `new FormValidator<Date \| null>(null)` | `new FormValidator<string \| null>(null)` |
+| `selected={new Date()}`, `minDate={new Date()}` | `selected={dateToDay(new Date())}` |
+| `a.getTime() < b.getTime()` | `a < b` |
+| `date.toLocaleDateString(locale)` | `dayToDate(day).toLocaleDateString(locale)` |
+| `JSON.stringify(date)`, `date.toISOString()` | the string itself |
+
+Data you already stored from DatePicker was midnight UTC of the picked day. `stored.toISOString().slice(0, 10)` turns exactly that back into the day, since the value was built in UTC; do this only for values DatePicker produced.
+
+Where the value was really a moment (the poll and deadline cases above), decide the time zone once, in your own code, as shown in the section before this one, rather than relying on what DatePicker happened to hand out.

package/docs/FormValidator.md

@@ -32,7 +32,7 @@ nameValidator.dirty                    // value has changed since creation
 > | Field | Default value |
 > |-------|---------------|
 > | string (text, email, …) | `''` |
-> | `Date` | `null` |
+> | day (`DatePicker`, `'YYYY-MM-DD'`) | `null` |
 > | number | `undefined` (or `0`) |
 > | checkbox / boolean | `false` |
 > | single-select id | `null` |
@@ -69,7 +69,7 @@ function NameField() {
 
 ```tsx
 const ageValidator    = new FormValidator<number | undefined>(undefined, [Validators.required()]);
-const dateValidator   = new FormValidator<Date | null>(null);
+const dayValidator    = new FormValidator<string | null>(null); // DatePicker: '2026-09-15'
 const agreedValidator = new FormValidator<boolean>(false, [Validators.required()]);
 ```
 
@@ -108,7 +108,7 @@ Validators.multiEmail(errorMsg?)           // comma/semicolon-separated list of
 Validators.mustBeNumber(errorMsg?)         // parses as a number
 Validators.oneOf(allowedValues, errorMsg?) // value is in the allowed array
 Validators.typeOf(allowedTypes, errorMsg?) // typeof value matches (string or string[])
-Validators.date(errorMsg?)                 // valid date string (DD.MM.YYYY or ISO)
+Validators.date(errorMsg?)                 // a real date: a 'YYYY-MM-DD' day (DatePicker), DD.MM.YYYY, a toISOString() timestamp, or a valid Date
 Validators.dateObject(errorMsg?)           // an object with an `isValid` flag (e.g. a date wrapper)
 Validators.website(errorMsg?)              // valid URL
 Validators.bic(errorMsg?)                  // valid BIC/SWIFT code

package/docs/Popover.md

@@ -28,6 +28,18 @@ import { Popover, PopoverPlacement, PopoverAlign, PopoverTrigger } from '@ahrowe
 <Popover isOpen={open} onOpenChange={setOpen} content={<Form onDone={() => setOpen(false)} />}>
   <button>Edit</button>
 </Popover>
+
+// One popover for many elements it does not wrap: a calendar's events, a table's cells
+const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+{events.map((event) => (
+  <button key={event.id} onClick={(e) => setAnchor(e.currentTarget)}>{event.title}</button>
+))}
+<Popover
+  anchor={anchor}
+  isOpen={anchor !== null}
+  onOpenChange={(open) => !open && setAnchor(null)}
+  content={<EventDetails />}
+/>
 ```
 
 **PopoverPlacement enum:** `PopoverPlacement.Top` | `Bottom` | `Left` | `Right` — the preferred side; auto-flips to the opposite side when there's no room.
@@ -44,6 +56,7 @@ import { Popover, PopoverPlacement, PopoverAlign, PopoverTrigger } from '@ahrowe
 |------|------|---------|-------------|
 | `content` | `ReactNode` | — | Panel body |
 | `children` | `ReactNode` | — | Trigger element |
+| `anchor` | `HTMLElement \| null` |  | Place the panel against this element instead of `children`. Open it with `isOpen`; `children` can be left out. A click on it is not an outside click, Escape returns the focus to it, and changing it while open moves the panel. `null` falls back to `children` |
 | `placement` | `PopoverPlacement` | `Bottom` | Preferred side |
 | `align` | `PopoverAlign` | `Center` | Cross-axis alignment |
 | `trigger` | `PopoverTrigger` | `Click` | What opens the popover |
@@ -80,3 +93,5 @@ Requires a `<div id="bodyEnd"></div>` at the app root — the panel is portaled
 **Scrolling:** where the browser supports CSS anchor positioning, including the trigger's transforms, the panel is anchored to the trigger in CSS, so it moves with a scrolling trigger in the same frame instead of catching up a frame later. Firefox resolves anchors without transforms, so it keeps the pixel positioning. While it is open the trigger carries an inline `anchor-name`, added to any inline one it already has; an `anchor-name` your stylesheet gives the trigger is overridden for that time.
 
 **Keyboard & focus (click trigger):** the panel is portaled to the end of the DOM, so Tab can't reach it naturally. When the panel has focusable content and the keyboard opened it (Enter or Space on the trigger, or ArrowDown/ArrowUp), focus moves to the first focusable element and the panel gets `role="dialog"`; a pointer click leaves the focus where it already is. `focusOnOpen` forces either. Tabbing past the last element closes the popover and moves focus to the element after the trigger; Shift+Tab past the first element, and Escape, close it and return focus to the trigger. This is non-modal: focus is not trapped, and hover/focus triggers don't steal focus. Escape closes only the innermost open layer, so a popover inside a `Modal` closes on the first press and leaves the modal open. Popovers with only static content don't manage focus or claim the dialog role.
+
+**Anchored (`anchor`):** your code opens the panel, not a key event Popover sees, so the default `focusOnOpen` looks at the click that opened it: Enter or Space on the anchor or on something inside it (a click with `detail === 0`) moves the focus into the panel, a pointer click leaves it where it is, and an open with no click at all, such as suggestions appearing while the user types into an anchored field, never takes it. Escape, Tab and Shift+Tab out of the panel continue from the anchor as they would from a trigger: from the anchor itself when it takes focus, otherwise from the first focusable element inside it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "agent",
@@ -88,7 +88,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@ahrowe/form-validation": "^0.2.0",
+    "@ahrowe/form-validation": "^0.3.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",