@exsto/ds 0.0.1-rc.15 → 0.0.1-rc.16

package/dist/index.js

@@ -14,6 +14,7 @@ import { useMergedRefs } from "./ui/src/hooks/use-merged-refs.js";
 import { ScrollArea, ScrollBar } from "./ui/src/components/ui/scroll-area/scroll-area.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/src/components/ui/tooltip/tooltip.js";
 import { DEFAULT_MULTI_SELECT_LABELS, MultiSelect, VIRTUALIZE_FROM, fullSelection, resolveChosen, summarize } from "./ui/src/components/edyn/multi-select/multi-select.js";
+import { DEFAULT_PRESENCE_LABELS, PRESENCE_STATES, Presence } from "./ui/src/components/edyn/presence/presence.js";
 import { PROGRESS_LINE_COLOR, ProgressLine } from "./ui/src/components/edyn/progress-line/progress-line.js";
 import { RICH_TEXT_ATTRIBUTES, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS, isAllowedRichTextHref } from "./ui/src/components/edyn/rich-text-content/allow-list.js";
 import { RICH_TEXT_BODY_CLASS, RICH_TEXT_MENTION_CLASS, RichTextContent, richTextToNodes } from "./ui/src/components/edyn/rich-text-content/rich-text-content.js";
@@ -73,4 +74,4 @@ import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "./ui
 import { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager } from "./ui/src/components/ui/toast/toast.js";
 import { Toggle, toggleVariants } from "./ui/src/components/ui/toggle/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./ui/src/components/ui/toggle-group/toggle-group.js";
-export { AVATAR_TONES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedNumber, AspectRatio, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AudioPlayer, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_MULTI_SELECT_LABELS, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, HoverCard, HoverCardContent, HoverCardTrigger, Indicator, InitialsAvatar, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MultiSelect, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, NumberText, PROGRESS_DURATION, PROGRESS_EASE, PROGRESS_LINE_COLOR, Pagination, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressLine, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RICH_TEXT_ATTRIBUTES, RICH_TEXT_BODY_CLASS, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS, RICH_TEXT_MENTION_CLASS, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextContent, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VIRTUALIZE_FROM, VideoPlayer, avatarTone, badgeVariants, buttonVariants, clampPage, cn, createToastManager, dateToDay, dayToDate, formatCount, formatMediaTime, fullSelection, getPaginationRange, indicatorVariants, initialsOf, isAllowedRichTextHref, markerVariants, navigationMenuTriggerStyle, progressFill, progressTrack, resolveChosen, richTextToNodes, spinnerVariants, summarize, tabsListVariants, toast, toggleVariants, useAnimatedValues, useCarousel, useDirection, useIsMobile, useMediaPlayer, useMergedRefs, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useToastManager };
+export { AVATAR_TONES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedNumber, AspectRatio, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AudioPlayer, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_MULTI_SELECT_LABELS, DEFAULT_PRESENCE_LABELS, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, HoverCard, HoverCardContent, HoverCardTrigger, Indicator, InitialsAvatar, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MultiSelect, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, NumberText, PRESENCE_STATES, PROGRESS_DURATION, PROGRESS_EASE, PROGRESS_LINE_COLOR, Pagination, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Presence, Progress, ProgressLine, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RICH_TEXT_ATTRIBUTES, RICH_TEXT_BODY_CLASS, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS, RICH_TEXT_MENTION_CLASS, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextContent, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VIRTUALIZE_FROM, VideoPlayer, avatarTone, badgeVariants, buttonVariants, clampPage, cn, createToastManager, dateToDay, dayToDate, formatCount, formatMediaTime, fullSelection, getPaginationRange, indicatorVariants, initialsOf, isAllowedRichTextHref, markerVariants, navigationMenuTriggerStyle, progressFill, progressTrack, resolveChosen, richTextToNodes, spinnerVariants, summarize, tabsListVariants, toast, toggleVariants, useAnimatedValues, useCarousel, useDirection, useIsMobile, useMediaPlayer, useMergedRefs, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useToastManager };

package/dist/source-hash.txt

@@ -1 +1 @@
-51bef8069ad2575c9c422f14d92fe68c65cfbd0cb8727824d68ce82165e7e6b3
+e02db65d6034fdeb69accb2fd27d311f2f426b050ddf45dcc35078a5659e9466

package/dist/styles.css

@@ -787,6 +787,10 @@
     margin-inline-start: var(--scroll-bar-gap);
   }
 
+  .ms-2 {
+    margin-inline-start: calc(var(--spacing) * 2);
+  }
+
   .ms-auto {
     margin-inline-start: auto;
   }
@@ -1921,6 +1925,11 @@
     border-width: 0;
   }
 
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+
   .border-\[1\.5px\] {
     border-style: var(--tw-border-style);
     border-width: 1.5px;
@@ -1979,6 +1988,10 @@
     border-color: var(--input);
   }
 
+  .border-muted-foreground {
+    border-color: var(--muted-foreground);
+  }
+
   .border-primary\/50 {
     border-color: var(--primary);
   }
@@ -2129,6 +2142,10 @@
     background-color: var(--sidebar-border);
   }
 
+  .bg-success {
+    background-color: var(--success);
+  }
+
   .bg-success-ring\/40 {
     background-color: var(--success-ring);
   }
@@ -2143,6 +2160,10 @@
     background-color: #0000;
   }
 
+  .bg-warning {
+    background-color: var(--warning);
+  }
+
   .bg-warning-ring\/40 {
     background-color: var(--warning-ring);
   }
@@ -3623,6 +3644,11 @@
     inset-inline: calc(var(--spacing) * -3);
   }
 
+  .after\:inset-x-0\.5:after {
+    content: var(--tw-content);
+    inset-inline: calc(var(--spacing) * .5);
+  }
+
   .after\:-inset-y-2:after {
     content: var(--tw-content);
     inset-block: calc(var(--spacing) * -2);
@@ -3638,11 +3664,26 @@
     inset-inline-start: 50%;
   }
 
+  .after\:-top-px:after {
+    content: var(--tw-content);
+    top: -1px;
+  }
+
+  .after\:top-1\/2:after {
+    content: var(--tw-content);
+    top: 50%;
+  }
+
   .after\:top-full:after {
     content: var(--tw-content);
     top: 100%;
   }
 
+  .after\:-right-px:after {
+    content: var(--tw-content);
+    right: -1px;
+  }
+
   .after\:right-0:after {
     content: var(--tw-content);
     right: 0;
@@ -3663,6 +3704,17 @@
     margin-left: var(--spacing);
   }
 
+  .after\:size-1\.5:after {
+    content: var(--tw-content);
+    width: calc(var(--spacing) * 1.5);
+    height: calc(var(--spacing) * 1.5);
+  }
+
+  .after\:h-0\.5:after {
+    content: var(--tw-content);
+    height: calc(var(--spacing) * .5);
+  }
+
   .after\:h-\[calc\(var\(--gap\)\+1px\)\]:after {
     content: var(--tw-content);
     height: calc(var(--gap) + 1px);
@@ -3709,6 +3761,12 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .after\:-translate-y-1\/2:after {
+    content: var(--tw-content);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .after\:rounded-full:after {
     content: var(--tw-content);
     border-radius: 3.40282e38px;
@@ -3725,6 +3783,11 @@
     border-color: var(--border);
   }
 
+  .after\:bg-background:after {
+    content: var(--tw-content);
+    background-color: var(--background);
+  }
+
   .after\:bg-border:after {
     content: var(--tw-content);
     background-color: var(--border);

package/dist/ui/src/components/edyn/date-picker/date-picker.d.ts

@@ -72,5 +72,6 @@ export interface IDatePickerProps {
 /**
  * One calendar day, typed or picked. The field takes the day in the locale's order (05/03/2026 in en-GB) and reads it
  * when it loses focus, saying inline what is wrong with it; the button, or Alt+ArrowDown in the field, opens a calendar.
+ * Escape closes the calendar and gives the focus back to whichever of the two opened it; a day picked puts it on the field.
  */
 export declare const DatePicker: ({ id, value, onValueChange, min, max, disabledDates, disabled, locale, calendarLocale, placeholder, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, labels: labelOverrides, className, }: IDatePickerProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/date-picker/date-picker.js

@@ -30,6 +30,7 @@ var problemText = (problem, labels, locale, limits, pattern) => {
 /**
 * One calendar day, typed or picked. The field takes the day in the locale's order (05/03/2026 in en-GB) and reads it
 * when it loses focus, saying inline what is wrong with it; the button, or Alt+ArrowDown in the field, opens a calendar.
+* Escape closes the calendar and gives the focus back to whichever of the two opened it; a day picked puts it on the field.
 */
 var DatePicker = ({ id, value, onValueChange, min, max, disabledDates, disabled = false, locale = "en-GB", calendarLocale, placeholder, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, labels: labelOverrides, className }) => {
 	const labels = useMemo(() => ({
@@ -41,6 +42,9 @@ var DatePicker = ({ id, value, onValueChange, min, max, disabledDates, disabled
 	const errorId = useId();
 	const refField = useRef(null);
 	const refInput = useRef(null);
+	const refButton = useRef(null);
+	const refOpener = useRef("button");
+	const refPicked = useRef(false);
 	const refPointer = useRef(false);
 	const refKnown = useRef(current);
 	const refRefused = useRef(null);
@@ -101,8 +105,16 @@ var DatePicker = ({ id, value, onValueChange, min, max, disabledDates, disabled
 		setProblem(null);
 		setText(formatDay(day, locale));
 		if (day !== current || refRefused.current !== null) report(day, { kind: "day" });
+		refPicked.current = true;
 		setOpen(false);
 	};
+	const openFrom = (opener) => {
+		refOpener.current = opener;
+		refPicked.current = false;
+		setOpen(true);
+	};
+	/** Where the focus goes when the calendar closes: the field after a day is chosen, else whatever opened it. */
+	const focusAfterClose = () => refPicked.current || refOpener.current === "field" ? refInput.current : refButton.current;
 	/**
 	* Text is read as the person leaves the field. A day (or nothing) is taken at once; a message about text that is not a
 	* day is shown too, unless they are only on the way to the calendar: a press of the mouse on the button, or focus
@@ -130,12 +142,13 @@ var DatePicker = ({ id, value, onValueChange, min, max, disabledDates, disabled
 	const handleKeyDown = (event) => {
 		if (event.key === "ArrowDown" && event.altKey && !disabled) {
 			event.preventDefault();
-			setOpen(true);
+			openFrom("field");
 			return;
 		}
 		if (event.key === "Escape" && open) {
 			event.preventDefault();
 			event.stopPropagation();
+			refOpener.current = "field";
 			setOpen(false);
 			return;
 		}
@@ -202,11 +215,18 @@ var DatePicker = ({ id, value, onValueChange, min, max, disabledDates, disabled
 				onKeyDown: handleKeyDown
 			}), /* @__PURE__ */ jsxs(Popover, {
 				open,
-				onOpenChange: setOpen,
+				onOpenChange: (next) => {
+					if (next) {
+						openFrom("button");
+						return;
+					}
+					setOpen(false);
+				},
 				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 					render: /* @__PURE__ */ jsx(Button, {
 						variant: "ghost",
 						size: "icon-sm",
+						ref: refButton,
 						"data-slot": "date-picker-trigger",
 						"aria-label": labels.choose,
 						disabled,
@@ -218,7 +238,7 @@ var DatePicker = ({ id, value, onValueChange, min, max, disabledDates, disabled
 					anchor: refField,
 					align: "start",
 					className: "w-auto p-0",
-					finalFocus: refInput,
+					finalFocus: focusAfterClose,
 					onBlur: handleBlur,
 					children: /* @__PURE__ */ jsx(Calendar, {
 						mode: "single",

package/dist/ui/src/components/edyn/date-picker/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/date-picker/date-picker.tsx"],"sourcesContent":["import { dateToDay, dayToDate } from '@edyn/ui/components/edyn/date-range-picker';\nimport { Button } from '@edyn/ui/components/ui/button';\nimport { Calendar } from '@edyn/ui/components/ui/calendar';\nimport { Input } from '@edyn/ui/components/ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { firstWeekdayOf } from '@edyn/ui/lib/first-weekday';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCalendar } from '@tabler/icons-react';\nimport { type ChangeEvent, type FocusEvent, type KeyboardEvent, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { Locale } from 'react-day-picker';\nimport { datePatternOf, dayProblem, formatDay, parseDateText, type TDateProblem, type TDisabledDays } from './date-text';\n\n/** Every word the component prints, so a product can translate it. */\nexport interface IDatePickerLabels {\n  /** The calendar button's accessible name. */\n  choose: string;\n  /** Said when the text is not a date; `pattern` is what to type, written the locale's way (`DD/MM/YYYY`). */\n  format: (pattern: string) => string;\n  notReal: string;\n  /** `min` and `max` are written the locale's way. */\n  beforeMin: (min: string) => string;\n  afterMax: (max: string) => string;\n  unavailable: string;\n}\n\nexport const DEFAULT_DATE_PICKER_LABELS: IDatePickerLabels = {\n  choose: 'Choose date',\n  format: (pattern) => `Enter a date as ${pattern}.`,\n  notReal: 'That date does not exist.',\n  beforeMin: (min) => `Choose ${min} or later.`,\n  afterMax: (max) => `Choose ${max} or earlier.`,\n  unavailable: 'That date is not available.',\n};\n\n/**\n * What the field holds when it reports, so a parent can tell three things apart that all arrive as `undefined`:\n * - `day`: a usable day, typed or picked.\n * - `empty`: the field was emptied, or nothing has been put in it. A required field is right to ask for a date.\n * - `refused`: the field holds text it will not take (not a day, not a real one, or outside `min`, `max` or\n *   `disabledDates`). `text` is what was typed and `problem` the message the picker shows under the field, already\n *   in the picker's `labels`. The picker is saying so itself, so the page should not add a second message.\n */\nexport type TDatePickerState = { kind: 'day' } | { kind: 'empty' } | { kind: 'refused'; text: string; problem: string };\n\nexport interface IDatePickerProps {\n  /** For a Label's htmlFor; inside a Field the Field's label is already wired. */\n  id?: string;\n  /**\n   * The chosen day as `yyyy-mm-dd`, or `undefined` for none (an empty string counts as none, so a value kept for an\n   * `<input type=\"date\">` drops in). A string and not a Date, on purpose: a Date is an instant, and the instant for\n   * \"5 March\" is another calendar day in another time zone, so a Date serialised for an API drifts a day. The text is\n   * what `<input type=\"date\">`, JSON and a .NET `DateOnly` use, and it compares as a day.\n   */\n  value: string | undefined;\n  /**\n   * Called with a valid day, or with `undefined` when the field is emptied or its text is not a usable day. The second\n   * argument says which of the two it was (see `TDatePickerState`); a caller that has no use for it can ignore it.\n   * Text that is refused is reported each time it changes, also when the field held no day before, so a form that\n   * tracks the state hears about it. Emptying the field after that reports `empty`.\n   */\n  onValueChange: (value: string | undefined, state: TDatePickerState) => void;\n  /** The earliest and latest day that can be chosen, as `yyyy-mm-dd`, both included. */\n  min?: string;\n  max?: string;\n  /** Days that cannot be chosen: a list of `yyyy-mm-dd`, or a function that says so for one (weekends, say). */\n  disabledDates?: TDisabledDays;\n  disabled?: boolean;\n  /** How a day is written and in which order it is typed (BCP 47); en-GB reads 05/03/2026. */\n  locale?: string;\n  /** The calendar's own words (month and weekday names), as a date-fns locale; English by default. The first weekday follows `locale`. */\n  calendarLocale?: Locale;\n  /** What the empty field shows; the pattern for the locale (`DD/MM/YYYY`) by default. */\n  placeholder?: string;\n  /** An accessible name, when there is no visible label to point at. */\n  'aria-label'?: string;\n  /** Marks the field invalid (the kit's destructive border), as a Field's invalid state does. */\n  'aria-invalid'?: boolean | 'true' | 'false';\n  /** The id of the text that explains it. Added to what a Field names already, and to the picker's own error. */\n  'aria-describedby'?: string;\n  labels?: Partial<IDatePickerLabels>;\n  /** Layout only (a width); the look is the kit's. */\n  className?: string;\n}\n\nconst problemText = (\n  problem: TDateProblem,\n  labels: IDatePickerLabels,\n  locale: string,\n  limits: { min?: string; max?: string },\n  pattern: string,\n): string => {\n  switch (problem) {\n    case 'format':\n      return labels.format(pattern);\n    case 'notReal':\n      return labels.notReal;\n    case 'beforeMin':\n      return labels.beforeMin(limits.min === undefined ? '' : formatDay(limits.min, locale));\n    case 'afterMax':\n      return labels.afterMax(limits.max === undefined ? '' : formatDay(limits.max, locale));\n    default:\n      return labels.unavailable;\n  }\n};\n\n/**\n * One calendar day, typed or picked. The field takes the day in the locale's order (05/03/2026 in en-GB) and reads it\n * when it loses focus, saying inline what is wrong with it; the button, or Alt+ArrowDown in the field, opens a calendar.\n */\nexport const DatePicker = ({\n  id,\n  value,\n  onValueChange,\n  min,\n  max,\n  disabledDates,\n  disabled = false,\n  locale = 'en-GB',\n  calendarLocale,\n  placeholder,\n  'aria-label': ariaLabel,\n  'aria-invalid': ariaInvalid,\n  'aria-describedby': ariaDescribedBy,\n  labels: labelOverrides,\n  className,\n}: IDatePickerProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_DATE_PICKER_LABELS, ...labelOverrides }), [labelOverrides]);\n  const pattern = useMemo(() => datePatternOf(locale), [locale]);\n  const current = value === '' ? undefined : value;\n  const errorId = useId();\n  const refField = useRef<HTMLDivElement | null>(null);\n  const refInput = useRef<HTMLInputElement | null>(null);\n  // The mouse is down inside the picker, so a blur of the field is a click on something in it, not a Tab.\n  const refPointer = useRef(false);\n  // The day the field last agreed on with the page, so a change from outside is told from our own report of it.\n  const refKnown = useRef<string | undefined>(current);\n  // The refused text last reported (with its message), or null: told apart from a fresh refusal so it is reported once,\n  // and so that emptying a field that held a refused text is reported although it held no day.\n  const refRefused = useRef<string | null>(null);\n  const [text, setText] = useState(current === undefined ? '' : formatDay(current, locale));\n  const [problem, setProblem] = useState<TDateProblem | null>(null);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (current !== refKnown.current) {\n      refKnown.current = current;\n      refRefused.current = null;\n      setText(current === undefined ? '' : formatDay(current, locale));\n      setProblem(null);\n    }\n  }, [current, locale]);\n\n  const report = (day: string | undefined, state: TDatePickerState) => {\n    refKnown.current = day;\n    refRefused.current = state.kind === 'refused' ? `${state.text}\\u0000${state.problem}` : null;\n    onValueChange(day, state);\n  };\n\n  /**\n   * Reads the text: a day is reported and written back in full, anything else is said inline and reported as no day,\n   * with the state saying whether the field is empty or holds text it refused.\n   */\n  const commit = (typed: string) => {\n    const parsed = parseDateText(typed, locale);\n    if (parsed.kind === 'empty') {\n      setProblem(null);\n      if (current !== undefined || refRefused.current !== null) {\n        report(undefined, { kind: 'empty' });\n      }\n      return;\n    }\n    const found = parsed.kind === 'problem' ? parsed.problem : dayProblem(parsed.day, { min, max, disabledDates });\n    if (found !== undefined) {\n      setProblem(found);\n      const message = problemText(found, labels, locale, { min, max }, pattern);\n      if (current !== undefined || refRefused.current !== `${typed}\\u0000${message}`) {\n        report(undefined, { kind: 'refused', text: typed, problem: message });\n      }\n      return;\n    }\n    if (parsed.kind === 'day') {\n      setProblem(null);\n      setText(formatDay(parsed.day, locale));\n      if (parsed.day !== current || refRefused.current !== null) {\n        report(parsed.day, { kind: 'day' });\n      }\n    }\n  };\n\n  const pick = (date: Date | undefined) => {\n    const day = dateToDay(date);\n    if (day === undefined) {\n      return;\n    }\n    setProblem(null);\n    setText(formatDay(day, locale));\n    if (day !== current || refRefused.current !== null) {\n      report(day, { kind: 'day' });\n    }\n    setOpen(false);\n  };\n\n  /**\n   * Text is read as the person leaves the field. A day (or nothing) is taken at once; a message about text that is not a\n   * day is shown too, unless they are only on the way to the calendar: a press of the mouse on the button, or focus\n   * going into the calendar that Alt+ArrowDown opened, with the text half typed. Leaving the picker for anywhere else\n   * reads whatever is typed.\n   */\n  const handleBlur = (event: FocusEvent<HTMLElement>) => {\n    const next = event.relatedTarget as Element | null;\n    const intoCalendar = next?.closest('[data-slot=\"popover-content\"]') != null;\n    const intoButton = next?.closest('[data-slot=\"date-picker-trigger\"]') != null;\n    const typed = refInput.current?.value ?? '';\n    if (!(intoCalendar || intoButton || (next !== null && refField.current?.contains(next) === true))) {\n      commit(typed);\n      return;\n    }\n    if (event.target !== refInput.current) {\n      return;\n    }\n    const onTheWay = intoCalendar || (intoButton && refPointer.current);\n    const parsed = parseDateText(typed, locale);\n    const usable = parsed.kind === 'empty' || (parsed.kind === 'day' && dayProblem(parsed.day, { min, max, disabledDates }) === undefined);\n    if (usable || !onTheWay) {\n      commit(typed);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'ArrowDown' && event.altKey && !disabled) {\n      event.preventDefault();\n      setOpen(true);\n      return;\n    }\n    // The field has no key handler of Base UI's to close the calendar, so the key would reach the Sheet or Dialog around\n    // it and close that too. While the calendar is open it is this field's key; when it is closed it is the page's.\n    if (event.key === 'Escape' && open) {\n      event.preventDefault();\n      event.stopPropagation();\n      setOpen(false);\n      return;\n    }\n    if (event.key === 'Enter') {\n      const parsed = parseDateText(event.currentTarget.value, locale);\n      if (parsed.kind !== 'empty' && (parsed.kind === 'problem' || dayProblem(parsed.day, { min, max, disabledDates }) !== undefined)) {\n        event.preventDefault();\n      }\n      commit(event.currentTarget.value);\n    }\n  };\n\n  const selected = dayToDate(current);\n  const limits = { min, max };\n  const invalid = problem !== null || ariaInvalid === true || ariaInvalid === 'true';\n  const describedBy = [ariaDescribedBy, problem === null ? undefined : errorId].filter(Boolean).join(' ') || undefined;\n  const isOff = (date: Date): boolean => {\n    const day = dateToDay(date);\n    return day !== undefined && dayProblem(day, { min, max, disabledDates }) !== undefined;\n  };\n  const today = new Date();\n  const start = dayToDate(min);\n  const end = dayToDate(max);\n  const month = selected ?? (start !== undefined && today < start ? start : end !== undefined && today > end ? end : today);\n\n  return (\n    <div data-slot=\"date-picker\" className={cn('flex flex-col gap-1.5', className)}>\n      <div\n        ref={refField}\n        className=\"relative\"\n        onPointerDownCapture={() => {\n          refPointer.current = true;\n        }}\n        onPointerUpCapture={() => {\n          refPointer.current = false;\n        }}\n      >\n        <Input\n          ref={refInput}\n          id={id}\n          type=\"text\"\n          inputMode=\"numeric\"\n          autoComplete=\"off\"\n          data-slot=\"date-picker-input\"\n          value={text}\n          placeholder={placeholder ?? pattern}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-invalid={invalid ? true : undefined}\n          aria-describedby={describedBy}\n          className=\"pr-9\"\n          onChange={(event: ChangeEvent<HTMLInputElement>) => {\n            setText(event.target.value);\n            setProblem(null);\n          }}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                data-slot=\"date-picker-trigger\"\n                aria-label={labels.choose}\n                disabled={disabled}\n                className=\"absolute top-0.5 right-0.5\"\n                onBlur={handleBlur}\n              />\n            }\n          >\n            <IconCalendar aria-hidden=\"true\" />\n          </PopoverTrigger>\n          <PopoverContent anchor={refField} align=\"start\" className=\"w-auto p-0\" finalFocus={refInput} onBlur={handleBlur}>\n            <Calendar\n              mode=\"single\"\n              required\n              autoFocus\n              locale={calendarLocale}\n              weekStartsOn={firstWeekdayOf(locale)}\n              defaultMonth={month}\n              startMonth={start}\n              endMonth={end}\n              selected={selected}\n              disabled={isOff}\n              onSelect={pick}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      {problem !== null && (\n        <p id={errorId} data-slot=\"date-picker-error\" role=\"alert\" className=\"text-sm text-destructive\">\n          {problemText(problem, labels, locale, limits, pattern)}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/date-picker/date-picker.tsx"],"sourcesContent":["import { dateToDay, dayToDate } from '@edyn/ui/components/edyn/date-range-picker';\nimport { Button } from '@edyn/ui/components/ui/button';\nimport { Calendar } from '@edyn/ui/components/ui/calendar';\nimport { Input } from '@edyn/ui/components/ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { firstWeekdayOf } from '@edyn/ui/lib/first-weekday';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCalendar } from '@tabler/icons-react';\nimport { type ChangeEvent, type FocusEvent, type KeyboardEvent, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { Locale } from 'react-day-picker';\nimport { datePatternOf, dayProblem, formatDay, parseDateText, type TDateProblem, type TDisabledDays } from './date-text';\n\n/** Every word the component prints, so a product can translate it. */\nexport interface IDatePickerLabels {\n  /** The calendar button's accessible name. */\n  choose: string;\n  /** Said when the text is not a date; `pattern` is what to type, written the locale's way (`DD/MM/YYYY`). */\n  format: (pattern: string) => string;\n  notReal: string;\n  /** `min` and `max` are written the locale's way. */\n  beforeMin: (min: string) => string;\n  afterMax: (max: string) => string;\n  unavailable: string;\n}\n\nexport const DEFAULT_DATE_PICKER_LABELS: IDatePickerLabels = {\n  choose: 'Choose date',\n  format: (pattern) => `Enter a date as ${pattern}.`,\n  notReal: 'That date does not exist.',\n  beforeMin: (min) => `Choose ${min} or later.`,\n  afterMax: (max) => `Choose ${max} or earlier.`,\n  unavailable: 'That date is not available.',\n};\n\n/**\n * What the field holds when it reports, so a parent can tell three things apart that all arrive as `undefined`:\n * - `day`: a usable day, typed or picked.\n * - `empty`: the field was emptied, or nothing has been put in it. A required field is right to ask for a date.\n * - `refused`: the field holds text it will not take (not a day, not a real one, or outside `min`, `max` or\n *   `disabledDates`). `text` is what was typed and `problem` the message the picker shows under the field, already\n *   in the picker's `labels`. The picker is saying so itself, so the page should not add a second message.\n */\nexport type TDatePickerState = { kind: 'day' } | { kind: 'empty' } | { kind: 'refused'; text: string; problem: string };\n\nexport interface IDatePickerProps {\n  /** For a Label's htmlFor; inside a Field the Field's label is already wired. */\n  id?: string;\n  /**\n   * The chosen day as `yyyy-mm-dd`, or `undefined` for none (an empty string counts as none, so a value kept for an\n   * `<input type=\"date\">` drops in). A string and not a Date, on purpose: a Date is an instant, and the instant for\n   * \"5 March\" is another calendar day in another time zone, so a Date serialised for an API drifts a day. The text is\n   * what `<input type=\"date\">`, JSON and a .NET `DateOnly` use, and it compares as a day.\n   */\n  value: string | undefined;\n  /**\n   * Called with a valid day, or with `undefined` when the field is emptied or its text is not a usable day. The second\n   * argument says which of the two it was (see `TDatePickerState`); a caller that has no use for it can ignore it.\n   * Text that is refused is reported each time it changes, also when the field held no day before, so a form that\n   * tracks the state hears about it. Emptying the field after that reports `empty`.\n   */\n  onValueChange: (value: string | undefined, state: TDatePickerState) => void;\n  /** The earliest and latest day that can be chosen, as `yyyy-mm-dd`, both included. */\n  min?: string;\n  max?: string;\n  /** Days that cannot be chosen: a list of `yyyy-mm-dd`, or a function that says so for one (weekends, say). */\n  disabledDates?: TDisabledDays;\n  disabled?: boolean;\n  /** How a day is written and in which order it is typed (BCP 47); en-GB reads 05/03/2026. */\n  locale?: string;\n  /** The calendar's own words (month and weekday names), as a date-fns locale; English by default. The first weekday follows `locale`. */\n  calendarLocale?: Locale;\n  /** What the empty field shows; the pattern for the locale (`DD/MM/YYYY`) by default. */\n  placeholder?: string;\n  /** An accessible name, when there is no visible label to point at. */\n  'aria-label'?: string;\n  /** Marks the field invalid (the kit's destructive border), as a Field's invalid state does. */\n  'aria-invalid'?: boolean | 'true' | 'false';\n  /** The id of the text that explains it. Added to what a Field names already, and to the picker's own error. */\n  'aria-describedby'?: string;\n  labels?: Partial<IDatePickerLabels>;\n  /** Layout only (a width); the look is the kit's. */\n  className?: string;\n}\n\nconst problemText = (\n  problem: TDateProblem,\n  labels: IDatePickerLabels,\n  locale: string,\n  limits: { min?: string; max?: string },\n  pattern: string,\n): string => {\n  switch (problem) {\n    case 'format':\n      return labels.format(pattern);\n    case 'notReal':\n      return labels.notReal;\n    case 'beforeMin':\n      return labels.beforeMin(limits.min === undefined ? '' : formatDay(limits.min, locale));\n    case 'afterMax':\n      return labels.afterMax(limits.max === undefined ? '' : formatDay(limits.max, locale));\n    default:\n      return labels.unavailable;\n  }\n};\n\n/**\n * One calendar day, typed or picked. The field takes the day in the locale's order (05/03/2026 in en-GB) and reads it\n * when it loses focus, saying inline what is wrong with it; the button, or Alt+ArrowDown in the field, opens a calendar.\n * Escape closes the calendar and gives the focus back to whichever of the two opened it; a day picked puts it on the field.\n */\nexport const DatePicker = ({\n  id,\n  value,\n  onValueChange,\n  min,\n  max,\n  disabledDates,\n  disabled = false,\n  locale = 'en-GB',\n  calendarLocale,\n  placeholder,\n  'aria-label': ariaLabel,\n  'aria-invalid': ariaInvalid,\n  'aria-describedby': ariaDescribedBy,\n  labels: labelOverrides,\n  className,\n}: IDatePickerProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_DATE_PICKER_LABELS, ...labelOverrides }), [labelOverrides]);\n  const pattern = useMemo(() => datePatternOf(locale), [locale]);\n  const current = value === '' ? undefined : value;\n  const errorId = useId();\n  const refField = useRef<HTMLDivElement | null>(null);\n  const refInput = useRef<HTMLInputElement | null>(null);\n  const refButton = useRef<HTMLButtonElement | null>(null);\n  // What opened the calendar, so that Escape gives the focus back to it: the button when the button did it, the field\n  // when Alt+ArrowDown did. Choosing a day is different (see `pick`): the field then shows the day, so it gets the focus.\n  const refOpener = useRef<'button' | 'field'>('button');\n  const refPicked = useRef(false);\n  // The mouse is down inside the picker, so a blur of the field is a click on something in it, not a Tab.\n  const refPointer = useRef(false);\n  // The day the field last agreed on with the page, so a change from outside is told from our own report of it.\n  const refKnown = useRef<string | undefined>(current);\n  // The refused text last reported (with its message), or null: told apart from a fresh refusal so it is reported once,\n  // and so that emptying a field that held a refused text is reported although it held no day.\n  const refRefused = useRef<string | null>(null);\n  const [text, setText] = useState(current === undefined ? '' : formatDay(current, locale));\n  const [problem, setProblem] = useState<TDateProblem | null>(null);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (current !== refKnown.current) {\n      refKnown.current = current;\n      refRefused.current = null;\n      setText(current === undefined ? '' : formatDay(current, locale));\n      setProblem(null);\n    }\n  }, [current, locale]);\n\n  const report = (day: string | undefined, state: TDatePickerState) => {\n    refKnown.current = day;\n    refRefused.current = state.kind === 'refused' ? `${state.text}\\u0000${state.problem}` : null;\n    onValueChange(day, state);\n  };\n\n  /**\n   * Reads the text: a day is reported and written back in full, anything else is said inline and reported as no day,\n   * with the state saying whether the field is empty or holds text it refused.\n   */\n  const commit = (typed: string) => {\n    const parsed = parseDateText(typed, locale);\n    if (parsed.kind === 'empty') {\n      setProblem(null);\n      if (current !== undefined || refRefused.current !== null) {\n        report(undefined, { kind: 'empty' });\n      }\n      return;\n    }\n    const found = parsed.kind === 'problem' ? parsed.problem : dayProblem(parsed.day, { min, max, disabledDates });\n    if (found !== undefined) {\n      setProblem(found);\n      const message = problemText(found, labels, locale, { min, max }, pattern);\n      if (current !== undefined || refRefused.current !== `${typed}\\u0000${message}`) {\n        report(undefined, { kind: 'refused', text: typed, problem: message });\n      }\n      return;\n    }\n    if (parsed.kind === 'day') {\n      setProblem(null);\n      setText(formatDay(parsed.day, locale));\n      if (parsed.day !== current || refRefused.current !== null) {\n        report(parsed.day, { kind: 'day' });\n      }\n    }\n  };\n\n  const pick = (date: Date | undefined) => {\n    const day = dateToDay(date);\n    if (day === undefined) {\n      return;\n    }\n    setProblem(null);\n    setText(formatDay(day, locale));\n    if (day !== current || refRefused.current !== null) {\n      report(day, { kind: 'day' });\n    }\n    refPicked.current = true;\n    setOpen(false);\n  };\n\n  const openFrom = (opener: 'button' | 'field') => {\n    refOpener.current = opener;\n    refPicked.current = false;\n    setOpen(true);\n  };\n\n  /** Where the focus goes when the calendar closes: the field after a day is chosen, else whatever opened it. */\n  const focusAfterClose = (): HTMLElement | null => (refPicked.current || refOpener.current === 'field' ? refInput.current : refButton.current);\n\n  /**\n   * Text is read as the person leaves the field. A day (or nothing) is taken at once; a message about text that is not a\n   * day is shown too, unless they are only on the way to the calendar: a press of the mouse on the button, or focus\n   * going into the calendar that Alt+ArrowDown opened, with the text half typed. Leaving the picker for anywhere else\n   * reads whatever is typed.\n   */\n  const handleBlur = (event: FocusEvent<HTMLElement>) => {\n    const next = event.relatedTarget as Element | null;\n    const intoCalendar = next?.closest('[data-slot=\"popover-content\"]') != null;\n    const intoButton = next?.closest('[data-slot=\"date-picker-trigger\"]') != null;\n    const typed = refInput.current?.value ?? '';\n    if (!(intoCalendar || intoButton || (next !== null && refField.current?.contains(next) === true))) {\n      commit(typed);\n      return;\n    }\n    if (event.target !== refInput.current) {\n      return;\n    }\n    const onTheWay = intoCalendar || (intoButton && refPointer.current);\n    const parsed = parseDateText(typed, locale);\n    const usable = parsed.kind === 'empty' || (parsed.kind === 'day' && dayProblem(parsed.day, { min, max, disabledDates }) === undefined);\n    if (usable || !onTheWay) {\n      commit(typed);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'ArrowDown' && event.altKey && !disabled) {\n      event.preventDefault();\n      openFrom('field');\n      return;\n    }\n    // The field has no key handler of Base UI's to close the calendar, so the key would reach the Sheet or Dialog around\n    // it and close that too. While the calendar is open it is this field's key; when it is closed it is the page's.\n    if (event.key === 'Escape' && open) {\n      event.preventDefault();\n      event.stopPropagation();\n      // The focus is on the field already, whatever opened the calendar: it stays there.\n      refOpener.current = 'field';\n      setOpen(false);\n      return;\n    }\n    if (event.key === 'Enter') {\n      const parsed = parseDateText(event.currentTarget.value, locale);\n      if (parsed.kind !== 'empty' && (parsed.kind === 'problem' || dayProblem(parsed.day, { min, max, disabledDates }) !== undefined)) {\n        event.preventDefault();\n      }\n      commit(event.currentTarget.value);\n    }\n  };\n\n  const selected = dayToDate(current);\n  const limits = { min, max };\n  const invalid = problem !== null || ariaInvalid === true || ariaInvalid === 'true';\n  const describedBy = [ariaDescribedBy, problem === null ? undefined : errorId].filter(Boolean).join(' ') || undefined;\n  const isOff = (date: Date): boolean => {\n    const day = dateToDay(date);\n    return day !== undefined && dayProblem(day, { min, max, disabledDates }) !== undefined;\n  };\n  const today = new Date();\n  const start = dayToDate(min);\n  const end = dayToDate(max);\n  const month = selected ?? (start !== undefined && today < start ? start : end !== undefined && today > end ? end : today);\n\n  return (\n    <div data-slot=\"date-picker\" className={cn('flex flex-col gap-1.5', className)}>\n      <div\n        ref={refField}\n        className=\"relative\"\n        onPointerDownCapture={() => {\n          refPointer.current = true;\n        }}\n        onPointerUpCapture={() => {\n          refPointer.current = false;\n        }}\n      >\n        <Input\n          ref={refInput}\n          id={id}\n          type=\"text\"\n          inputMode=\"numeric\"\n          autoComplete=\"off\"\n          data-slot=\"date-picker-input\"\n          value={text}\n          placeholder={placeholder ?? pattern}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-invalid={invalid ? true : undefined}\n          aria-describedby={describedBy}\n          className=\"pr-9\"\n          onChange={(event: ChangeEvent<HTMLInputElement>) => {\n            setText(event.target.value);\n            setProblem(null);\n          }}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n        />\n        <Popover\n          open={open}\n          onOpenChange={(next) => {\n            // Only the button opens it from here (Alt+ArrowDown in the field sets the state itself, through `openFrom`).\n            if (next) {\n              openFrom('button');\n              return;\n            }\n            setOpen(false);\n          }}\n        >\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                ref={refButton}\n                data-slot=\"date-picker-trigger\"\n                aria-label={labels.choose}\n                disabled={disabled}\n                className=\"absolute top-0.5 right-0.5\"\n                onBlur={handleBlur}\n              />\n            }\n          >\n            <IconCalendar aria-hidden=\"true\" />\n          </PopoverTrigger>\n          <PopoverContent anchor={refField} align=\"start\" className=\"w-auto p-0\" finalFocus={focusAfterClose} onBlur={handleBlur}>\n            <Calendar\n              mode=\"single\"\n              required\n              autoFocus\n              locale={calendarLocale}\n              weekStartsOn={firstWeekdayOf(locale)}\n              defaultMonth={month}\n              startMonth={start}\n              endMonth={end}\n              selected={selected}\n              disabled={isOff}\n              onSelect={pick}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      {problem !== null && (\n        <p id={errorId} data-slot=\"date-picker-error\" role=\"alert\" className=\"text-sm text-destructive\">\n          {problemText(problem, labels, locale, limits, pattern)}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.js

@@ -9,6 +9,16 @@ import { IconCalendar } from "@tabler/icons-react";
 //#region ../ui/src/components/edyn/date-range-picker/date-range-picker.tsx
 var dayToDate = (value) => value === void 0 ? void 0 : /* @__PURE__ */ new Date(`${value}T12:00:00`);
 var dateToDay = (date) => date === void 0 ? void 0 : `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+/**
+* The trigger's accessible name when it is given an `aria-label`: the label, then what the button shows ("Created between:
+* 01 Mar 2026 – 05 Mar 2026"). An aria-label replaces the text inside the button, so on its own it hides the chosen dates from
+* a screen reader and breaks WCAG 2.5.3 (Label in Name: the visible text must be part of the name, so that a person who says
+* what they see can operate it). A label that already contains the visible text is left as it is.
+*/
+var nameWith = (label, shown) => {
+	if (label === void 0) return;
+	return label.toLowerCase().includes(shown.toLowerCase()) ? label : `${label}: ${shown}`;
+};
 /** A range of calendar days, either end optional; two months side by side, one on a phone. */
 var DateRangePicker = ({ id, value, onValueChange, placeholder = "Select date range", locale = "en-GB", summary = "range", "aria-label": ariaLabel, className, ...props }) => {
 	const isMobile = useIsMobile();
@@ -20,11 +30,12 @@ var DateRangePicker = ({ id, value, onValueChange, placeholder = "Select date ra
 		year: "numeric"
 	});
 	const ends = [from, to].filter((date) => date !== void 0).map((date) => format.format(date));
+	const shown = ends.length === 0 || summary === "label" ? placeholder : ends.join(" – ");
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
 		render: /* @__PURE__ */ jsx(Button, {
 			...props,
 			id,
-			"aria-label": ariaLabel,
+			"aria-label": nameWith(ariaLabel, shown),
 			"data-slot": "date-range-picker-trigger",
 			"data-set": ends.length > 0 ? "" : void 0,
 			variant: "outline",
@@ -32,7 +43,7 @@ var DateRangePicker = ({ id, value, onValueChange, placeholder = "Select date ra
 		}),
 		children: [/* @__PURE__ */ jsx(IconCalendar, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
 			className: "truncate",
-			children: ends.length === 0 || summary === "label" ? placeholder : ends.join(" – ")
+			children: shown
 		})]
 	}), /* @__PURE__ */ jsx(PopoverContent, {
 		align: "start",

package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import { Button } from '@edyn/ui/components/ui/button';\nimport { Calendar } from '@edyn/ui/components/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { useIsMobile } from '@edyn/ui/hooks/use-mobile';\nimport { firstWeekdayOf } from '@edyn/ui/lib/first-weekday';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCalendar } from '@tabler/icons-react';\nimport type { ComponentPropsWithoutRef } from 'react';\n\n/** A range of calendar days as yyyy-mm-dd, either end optional. */\nexport type TDateRange = { from?: string; to?: string };\n\n// A calendar day is read and written at midday local time, so no time zone or daylight\n// saving change can move it onto the day before or after.\nexport const dayToDate = (value: string | undefined): Date | undefined => (value === undefined ? undefined : new Date(`${value}T12:00:00`));\n\nexport const dateToDay = (date: Date | undefined): string | undefined =>\n  date === undefined ? undefined : `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;\n\n/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */\nexport interface IDateRangePickerProps\n  extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'defaultValue' | 'placeholder' | 'id' | 'className' | 'children' | 'onChange' | 'type'> {\n  id?: string;\n  value: TDateRange;\n  onValueChange: (value: TDateRange) => void;\n  placeholder?: string;\n  /**\n   * What the trigger says once a range is set. `range` (default) writes the ends; `label` keeps the label, so a\n   * range the page shows elsewhere (as a removable chip, say) is not repeated here. In both, the trigger carries\n   * `data-set` while either end is set, for a look of its own.\n   */\n  summary?: 'range' | 'label';\n  /** How the ends are written on the trigger, and which weekday the calendar starts on (BCP 47); en-GB reads 05 Mar 2026 and starts on Monday. */\n  locale?: string;\n  /** An accessible name for the trigger, when there is no visible label to point at. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** A range of calendar days, either end optional; two months side by side, one on a phone. */\nexport const DateRangePicker = ({\n  id,\n  value,\n  onValueChange,\n  placeholder = 'Select date range',\n  locale = 'en-GB',\n  summary = 'range',\n  'aria-label': ariaLabel,\n  className,\n  ...props\n}: IDateRangePickerProps) => {\n  const isMobile = useIsMobile();\n  const from = dayToDate(value.from);\n  const to = dayToDate(value.to);\n  const format = new Intl.DateTimeFormat(locale, { day: '2-digit', month: 'short', year: 'numeric' });\n  const ends = [from, to].filter((date) => date !== undefined).map((date) => format.format(date));\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={\n          <Button\n            {...props}\n            id={id}\n            aria-label={ariaLabel}\n            data-slot=\"date-range-picker-trigger\"\n            data-set={ends.length > 0 ? '' : undefined}\n            variant=\"outline\"\n            className={cn('w-full min-w-0 justify-start font-normal', ends.length === 0 && 'text-muted-foreground', className)}\n          />\n        }\n      >\n        <IconCalendar aria-hidden=\"true\" />\n        <span className=\"truncate\">{ends.length === 0 || summary === 'label' ? placeholder : ends.join(' – ')}</span>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-auto p-0\">\n        <Calendar\n          mode=\"range\"\n          defaultMonth={from}\n          numberOfMonths={isMobile ? 1 : 2}\n          weekStartsOn={firstWeekdayOf(locale)}\n          selected={{ from, to }}\n          onSelect={(range) => onValueChange({ from: dateToDay(range?.from), to: dateToDay(range?.to) })}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;;;AAcA,IAAa,aAAa,UAAiD,UAAU,KAAA,IAAY,KAAA,oBAAY,IAAI,KAAK,GAAG,MAAM,UAAU;AAEzI,IAAa,aAAa,SACxB,SAAS,KAAA,IAAY,KAAA,IAAY,GAAG,KAAK,YAAY,EAAE,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG;;AAuBlJ,IAAa,mBAAmB,EAC9B,IACA,OACA,eACA,cAAc,qBACd,SAAS,SACT,UAAU,SACV,cAAc,WACd,WACA,GAAG,YACwB;CAC3B,MAAM,WAAW,YAAY;CAC7B,MAAM,OAAO,UAAU,MAAM,IAAI;CACjC,MAAM,KAAK,UAAU,MAAM,EAAE;CAC7B,MAAM,SAAS,IAAI,KAAK,eAAe,QAAQ;EAAE,KAAK;EAAW,OAAO;EAAS,MAAM;CAAU,CAAC;CAClG,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,SAAS,SAAS,KAAA,CAAS,CAAC,CAAC,KAAK,SAAS,OAAO,OAAO,IAAI,CAAC;CAC9F,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,qBAAC,gBAAD;EACE,QACE,oBAAC,QAAD;GACE,GAAI;GACA;GACJ,cAAY;GACZ,aAAU;GACV,YAAU,KAAK,SAAS,IAAI,KAAK,KAAA;GACjC,SAAQ;GACR,WAAW,GAAG,4CAA4C,KAAK,WAAW,KAAK,yBAAyB,SAAS;EAClH,CAAA;EAVL,UAAA,CAaE,oBAAC,cAAD,EAAc,eAAY,OAAQ,CAAA,GAClC,oBAAC,QAAD;GAAM,WAAU;GAAY,UAAA,KAAK,WAAW,KAAK,YAAY,UAAU,cAAc,KAAK,KAAK,KAAK;EAAQ,CAAA,CAC9F;CAChB,CAAA,GAAA,oBAAC,gBAAD;EAAgB,OAAM;EAAQ,WAAU;EACtC,UAAA,oBAAC,UAAD;GACE,MAAK;GACL,cAAc;GACd,gBAAgB,WAAW,IAAI;GAC/B,cAAc,eAAe,MAAM;GACnC,UAAU;IAAE;IAAM;GAAG;GACrB,WAAW,UAAU,cAAc;IAAE,MAAM,UAAU,OAAO,IAAI;IAAG,IAAI,UAAU,OAAO,EAAE;GAAE,CAAC;EAC9F,CAAA;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}
+{"version":3,"file":"date-range-picker.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import { Button } from '@edyn/ui/components/ui/button';\nimport { Calendar } from '@edyn/ui/components/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { useIsMobile } from '@edyn/ui/hooks/use-mobile';\nimport { firstWeekdayOf } from '@edyn/ui/lib/first-weekday';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCalendar } from '@tabler/icons-react';\nimport type { ComponentPropsWithoutRef } from 'react';\n\n/** A range of calendar days as yyyy-mm-dd, either end optional. */\nexport type TDateRange = { from?: string; to?: string };\n\n// A calendar day is read and written at midday local time, so no time zone or daylight\n// saving change can move it onto the day before or after.\nexport const dayToDate = (value: string | undefined): Date | undefined => (value === undefined ? undefined : new Date(`${value}T12:00:00`));\n\nexport const dateToDay = (date: Date | undefined): string | undefined =>\n  date === undefined ? undefined : `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;\n\n/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */\nexport interface IDateRangePickerProps\n  extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'defaultValue' | 'placeholder' | 'id' | 'className' | 'children' | 'onChange' | 'type'> {\n  id?: string;\n  value: TDateRange;\n  onValueChange: (value: TDateRange) => void;\n  placeholder?: string;\n  /**\n   * What the trigger says once a range is set. `range` (default) writes the ends; `label` keeps the label, so a\n   * range the page shows elsewhere (as a removable chip, say) is not repeated here. In both, the trigger carries\n   * `data-set` while either end is set, for a look of its own.\n   */\n  summary?: 'range' | 'label';\n  /** How the ends are written on the trigger, and which weekday the calendar starts on (BCP 47); en-GB reads 05 Mar 2026 and starts on Monday. */\n  locale?: string;\n  /** An accessible name for the trigger, when there is no visible label to point at. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * The trigger's accessible name when it is given an `aria-label`: the label, then what the button shows (\"Created between:\n * 01 Mar 2026 – 05 Mar 2026\"). An aria-label replaces the text inside the button, so on its own it hides the chosen dates from\n * a screen reader and breaks WCAG 2.5.3 (Label in Name: the visible text must be part of the name, so that a person who says\n * what they see can operate it). A label that already contains the visible text is left as it is.\n */\nconst nameWith = (label: string | undefined, shown: string): string | undefined => {\n  if (label === undefined) {\n    return undefined;\n  }\n  return label.toLowerCase().includes(shown.toLowerCase()) ? label : `${label}: ${shown}`;\n};\n\n/** A range of calendar days, either end optional; two months side by side, one on a phone. */\nexport const DateRangePicker = ({\n  id,\n  value,\n  onValueChange,\n  placeholder = 'Select date range',\n  locale = 'en-GB',\n  summary = 'range',\n  'aria-label': ariaLabel,\n  className,\n  ...props\n}: IDateRangePickerProps) => {\n  const isMobile = useIsMobile();\n  const from = dayToDate(value.from);\n  const to = dayToDate(value.to);\n  const format = new Intl.DateTimeFormat(locale, { day: '2-digit', month: 'short', year: 'numeric' });\n  const ends = [from, to].filter((date) => date !== undefined).map((date) => format.format(date));\n  const shown = ends.length === 0 || summary === 'label' ? placeholder : ends.join(' – ');\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={\n          <Button\n            {...props}\n            id={id}\n            aria-label={nameWith(ariaLabel, shown)}\n            data-slot=\"date-range-picker-trigger\"\n            data-set={ends.length > 0 ? '' : undefined}\n            variant=\"outline\"\n            className={cn('w-full min-w-0 justify-start font-normal', ends.length === 0 && 'text-muted-foreground', className)}\n          />\n        }\n      >\n        <IconCalendar aria-hidden=\"true\" />\n        <span className=\"truncate\">{shown}</span>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-auto p-0\">\n        <Calendar\n          mode=\"range\"\n          defaultMonth={from}\n          numberOfMonths={isMobile ? 1 : 2}\n          weekStartsOn={firstWeekdayOf(locale)}\n          selected={{ from, to }}\n          onSelect={(range) => onValueChange({ from: dateToDay(range?.from), to: dateToDay(range?.to) })}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;;;AAcA,IAAa,aAAa,UAAiD,UAAU,KAAA,IAAY,KAAA,oBAAY,IAAI,KAAK,GAAG,MAAM,UAAU;AAEzI,IAAa,aAAa,SACxB,SAAS,KAAA,IAAY,KAAA,IAAY,GAAG,KAAK,YAAY,EAAE,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG;;;;;;;AA4BlJ,IAAM,YAAY,OAA2B,UAAsC;CACjF,IAAI,UAAU,KAAA,GACZ;CAEF,OAAO,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,YAAY,CAAC,IAAI,QAAQ,GAAG,MAAM,IAAI;AAClF;;AAGA,IAAa,mBAAmB,EAC9B,IACA,OACA,eACA,cAAc,qBACd,SAAS,SACT,UAAU,SACV,cAAc,WACd,WACA,GAAG,YACwB;CAC3B,MAAM,WAAW,YAAY;CAC7B,MAAM,OAAO,UAAU,MAAM,IAAI;CACjC,MAAM,KAAK,UAAU,MAAM,EAAE;CAC7B,MAAM,SAAS,IAAI,KAAK,eAAe,QAAQ;EAAE,KAAK;EAAW,OAAO;EAAS,MAAM;CAAU,CAAC;CAClG,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,SAAS,SAAS,KAAA,CAAS,CAAC,CAAC,KAAK,SAAS,OAAO,OAAO,IAAI,CAAC;CAC9F,MAAM,QAAQ,KAAK,WAAW,KAAK,YAAY,UAAU,cAAc,KAAK,KAAK,KAAK;CACtF,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,qBAAC,gBAAD;EACE,QACE,oBAAC,QAAD;GACE,GAAI;GACA;GACJ,cAAY,SAAS,WAAW,KAAK;GACrC,aAAU;GACV,YAAU,KAAK,SAAS,IAAI,KAAK,KAAA;GACjC,SAAQ;GACR,WAAW,GAAG,4CAA4C,KAAK,WAAW,KAAK,yBAAyB,SAAS;EAClH,CAAA;EAVL,UAAA,CAaE,oBAAC,cAAD,EAAc,eAAY,OAAQ,CAAA,GAClC,oBAAC,QAAD;GAAM,WAAU;GAAY,UAAA;EAAY,CAAA,CAC1B;CAChB,CAAA,GAAA,oBAAC,gBAAD;EAAgB,OAAM;EAAQ,WAAU;EACtC,UAAA,oBAAC,UAAD;GACE,MAAK;GACL,cAAc;GACd,gBAAgB,WAAW,IAAI;GAC/B,cAAc,eAAe,MAAM;GACnC,UAAU;IAAE;IAAM;GAAG;GACrB,WAAW,UAAU,cAAc;IAAE,MAAM,UAAU,OAAO,IAAI;IAAG,IAAI,UAAU,OAAO,EAAE;GAAE,CAAC;EAC9F,CAAA;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/ui/src/components/edyn/multi-select/multi-select.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
 import { ScrollArea } from "../../ui/scroll-area/scroll-area.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip/tooltip.js";
 import { popupItemClass } from "../../../lib/popup-list.js";
@@ -147,6 +148,11 @@ var Options = ({ scroller, scrollTo, busy, highlightedValue }) => {
 		})
 	});
 };
+/** Rendered inside the portal, so it exists only while the list is open: the focus guards around the list are not aria-hidden. */
+var ExposedFocusGuards = () => {
+	useExposedFocusGuards();
+	return null;
+};
 /**
 * A choice of several from a list: a trigger shaped like a Select that says what is picked
 * (the placeholder, the one picked, or a count), and a popup with a search field and checkbox
@@ -250,7 +256,7 @@ var MultiSelect = ({ placeholder, searchPlaceholder, options, value, onValueChan
 					className: "size-4 shrink-0 text-muted-foreground"
 				})]
 			}), /* @__PURE__ */ jsx(TooltipContent, { children: fullSelection(chosen, placeholder, labels, summary) })]
-		}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		}), /* @__PURE__ */ jsxs(Combobox.Portal, { children: [/* @__PURE__ */ jsx(ExposedFocusGuards, {}), /* @__PURE__ */ jsx(Combobox.Positioner, {
 			sideOffset: 4,
 			align: "start",
 			className: "z-50",
@@ -323,7 +329,7 @@ var MultiSelect = ({ placeholder, searchPlaceholder, options, value, onValueChan
 					})
 				]
 			})
-		}) })]
+		})] })]
 	});
 };
 //#endregion

package/dist/ui/src/components/edyn/multi-select/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/multi-select/multi-select.tsx"],"sourcesContent":["import { Combobox } from '@base-ui/react/combobox';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@edyn/ui/components/ui/tooltip';\nimport { popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\n/** An option: `leading` goes before its label (an avatar, a status dot), `count` after it (how many it would show). */\nexport type TMultiSelectOption = { value: string; label: string; count?: number; leading?: ReactNode };\n\n/** Every word the component prints, so a product can translate it. */\nexport interface IMultiSelectLabels {\n  noMatches: string;\n  loading: string;\n  /** Shown when `error` is `true`; a string `error` replaces it. */\n  error: string;\n  retry: string;\n  loadMore: string;\n  loadingMore: string;\n  clear: string;\n  selectedCount: (count: number) => string;\n}\n\nexport const DEFAULT_MULTI_SELECT_LABELS: IMultiSelectLabels = {\n  noMatches: 'No matches.',\n  loading: 'Loading…',\n  error: 'Could not load the options.',\n  retry: 'Try again',\n  loadMore: 'Load more',\n  loadingMore: 'Loading…',\n  clear: 'Clear',\n  selectedCount: (count) => `${count} selected`,\n};\n\n/** Above this many options a list draws only the rows on screen. */\nexport const VIRTUALIZE_FROM = 100;\n\nconst ITEM_HEIGHT = 32;\n\n/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */\nexport interface IMultiSelectProps\n  extends Omit<\n    ComponentPropsWithoutRef<'button'>,\n    'placeholder' | 'value' | 'defaultValue' | 'id' | 'disabled' | 'className' | 'children' | 'onChange'\n  > {\n  /** The trigger's text with nothing picked, which means no filter (\"All dealer groups\"). */\n  placeholder: string;\n  /** The search field's prompt (\"Search dealer groups…\"). */\n  searchPlaceholder: string;\n  /** The options to show now: all of a short fixed list, or in async mode the ones for the typed text. */\n  options: readonly TMultiSelectOption[];\n  value: readonly string[];\n  onValueChange: (value: string[]) => void;\n  /**\n   * What the trigger says once something is chosen. `selection` (default) names the one chosen or counts several;\n   * `label` keeps the label and only counts, so a value the page shows elsewhere (as a removable chip, say) is\n   * not repeated here: nothing chosen reads `placeholder`, anything chosen reads `labels.selectedCount(n)`.\n   */\n  summary?: 'selection' | 'label';\n  /** For a Label's htmlFor. */\n  id?: string;\n  'aria-label'?: string;\n  /**\n   * Marks the trigger invalid: the kit's destructive border, and a screen reader says so. For a form that does not use\n   * Field; inside one, its invalid state already does this.\n   */\n  'aria-invalid'?: boolean | 'true' | 'false';\n  /**\n   * The id of the text that explains it (the error). Added to what a Field names already, never replacing it.\n   */\n  'aria-describedby'?: string;\n  /** Shown but not changeable (a read-only form). */\n  disabled?: boolean;\n  /** Layout only (a width); the look is the kit's. */\n  className?: string;\n  /**\n   * Passing this turns on ASYNC MODE, for lists that grow (people, dealer groups) and must\n   * be searched by the API rather than loaded whole and filtered in the browser. The\n   * component then never filters: it reports the typed text (after `searchDelay`) and shows\n   * whatever `options` the caller supplies for it. It is also called with '' each time the\n   * list opens, so the first page is fetched on demand, not at page load.\n   */\n  onSearchChange?: (text: string) => void;\n  /** How long typing must pause before `onSearchChange` is called. Async mode only. */\n  searchDelay?: number;\n  /**\n   * The options behind the chosen values, for the ones not in the current `options`. A\n   * search that no longer returns a chosen value must not make it vanish from the trigger\n   * or the count, so the caller says what it is called. Without a label a value shows as\n   * itself.\n   */\n  selectedOptions?: readonly TMultiSelectOption[];\n  /** The options for the typed text are on their way. The old ones stay until they arrive. */\n  loading?: boolean;\n  /** The request failed: `true` for the default message, or the message itself. */\n  error?: boolean | string;\n  onRetry?: () => void;\n  /** There is another page after `options`. */\n  hasMore?: boolean;\n  onLoadMore?: () => void;\n  /** The next page is on its way. */\n  loadingMore?: boolean;\n  labels?: Partial<IMultiSelectLabels>;\n}\n\n/**\n * The options behind the chosen values, in the order they were chosen. A value with no\n * known option is kept and shown as itself rather than dropped: a selection must never\n * change just because a list did.\n */\nexport const resolveChosen = (\n  value: readonly string[],\n  options: readonly TMultiSelectOption[],\n  selectedOptions: readonly TMultiSelectOption[] = [],\n): TMultiSelectOption[] => {\n  const known = new Map<string, TMultiSelectOption>();\n  for (const option of [...selectedOptions, ...options]) {\n    known.set(option.value, option);\n  }\n  return value.map((entry) => known.get(entry) ?? { value: entry, label: entry });\n};\n\n/** What the trigger says: the placeholder, the one picked, or a count. */\nexport const summarize = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string => {\n  if (chosen.length === 0) {\n    return placeholder;\n  }\n  if (summary === 'label') {\n    return labels.selectedCount(chosen.length);\n  }\n  return chosen.length === 1 ? (chosen[0]?.label ?? '') : labels.selectedCount(chosen.length);\n};\n\n/** Every chosen name, for a tooltip on a trigger whose text is cut. With `label` the names are not shown, so it is the text itself. */\nexport const fullSelection = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string =>\n  summary === 'selection' && chosen.length > 0 ? chosen.map((option) => option.label).join(', ') : summarize(chosen, placeholder, labels, summary);\n\nconst POPUP =\n  'flex max-h-(--available-height) w-(--anchor-width) min-w-64 max-w-[max(24rem,var(--anchor-width))] origin-(--transform-origin) flex-col overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md outline-none duration-100 motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95';\n\nconst TRIGGER =\n  'flex h-8 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 text-sm text-foreground transition-colors outline-none focus-visible:border-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive data-popup-open:border-ring dark:bg-input/30';\n\nconst Option = ({\n  option,\n  index,\n  style,\n  measure,\n  highlighted,\n}: {\n  option: TMultiSelectOption;\n  index: number;\n  style?: CSSProperties;\n  measure?: (node: Element | null) => void;\n  highlighted: boolean;\n}) => {\n  const [cut, setCut] = useState(false);\n  // A callback ref, so measuring starts when the label mounts and stops when it goes; the key on the label below mounts a fresh one\n  // when the text changes, which a resize observer alone would miss at an unchanged width.\n  const measureLabel = useCallback((element: HTMLSpanElement | null) => {\n    if (!element) {\n      return;\n    }\n    const measureCut = (): void => setCut(element.scrollWidth > element.clientWidth);\n    measureCut();\n    if (typeof ResizeObserver === 'undefined') {\n      return;\n    }\n    const observer = new ResizeObserver(measureCut);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <Combobox.Item\n      value={option}\n      index={index}\n      ref={measure}\n      data-index={index}\n      style={style}\n      data-slot=\"multi-select-item\"\n      className={cn(popupItemClass('base-ui'), 'group')}\n    >\n      {/* A checkbox, filled when chosen: a set of toggles reads as one. */}\n      <span\n        data-slot=\"multi-select-item-indicator\"\n        aria-hidden=\"true\"\n        className=\"flex size-4 shrink-0 items-center justify-center rounded-sm border border-input text-primary-foreground transition-colors group-data-[selected]:border-primary group-data-[selected]:bg-primary\"\n      >\n        <IconCheck className=\"size-3 opacity-0 group-data-[selected]:opacity-100\" stroke={3} />\n      </span>\n      {option.leading}\n      {/* The option is the highlighted one under the pointer and under the keyboard alike, so one controlled tooltip serves both: the full label while the text is cut. */}\n      <Tooltip open={highlighted && cut}>\n        <TooltipTrigger\n          key={option.label}\n          data-slot=\"multi-select-item-label\"\n          data-overflowing={cut ? '' : undefined}\n          render={<span ref={measureLabel} className=\"min-w-0 flex-1 truncate\" />}\n        >\n          {option.label}\n        </TooltipTrigger>\n        <TooltipContent side=\"right\">{option.label}</TooltipContent>\n      </Tooltip>\n      {option.count !== undefined && <span className=\"text-xs text-muted-foreground tabular-nums\">{option.count}</span>}\n    </Combobox.Item>\n  );\n};\n\n// The options on offer, every one drawn, or past VIRTUALIZE_FROM only those on screen. The\n// list is the listbox itself (the options its direct children), sized to the whole list\n// when virtualized; the ScrollArea wraps it.\nconst Options = ({\n  scroller,\n  scrollTo,\n  busy,\n  highlightedValue,\n}: {\n  scroller: RefObject<HTMLDivElement | null>;\n  scrollTo: RefObject<(index: number) => void>;\n  busy: boolean;\n  highlightedValue: string | null;\n}) => {\n  const items = Combobox.useFilteredItems<TMultiSelectOption>();\n  const virtual = items.length > VIRTUALIZE_FROM;\n  // The scroller is an ancestor, so its ref is set only after this list's own effects:\n  // one more render once mounted gives the virtualizer its element.\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => scroller.current,\n    estimateSize: () => ITEM_HEIGHT,\n    overscan: 12,\n    enabled: virtual && mounted,\n  });\n  useEffect(() => {\n    scrollTo.current = virtual ? (index) => virtualizer.scrollToIndex(index, { align: 'auto' }) : () => undefined;\n  }, [scrollTo, virtual, virtualizer]);\n  if (!virtual) {\n    return (\n      <Combobox.List aria-busy={busy || undefined} className=\"p-1 outline-none\">\n        {items.map((option, index) => (\n          <Option key={option.value} option={option} index={index} highlighted={highlightedValue === option.value} />\n        ))}\n      </Combobox.List>\n    );\n  }\n  return (\n    <Combobox.List\n      data-virtualized=\"\"\n      aria-busy={busy || undefined}\n      className=\"relative m-1 outline-none\"\n      style={{ height: virtualizer.getTotalSize() }}\n    >\n      {virtualizer.getVirtualItems().map((row) => {\n        const option = items[row.index];\n        return option === undefined ? null : (\n          <Option\n            key={option.value}\n            option={option}\n            index={row.index}\n            highlighted={highlightedValue === option.value}\n            measure={virtualizer.measureElement}\n            style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${row.start}px)` }}\n          />\n        );\n      })}\n    </Combobox.List>\n  );\n};\n\n/**\n * A choice of several from a list: a trigger shaped like a Select that says what is picked\n * (the placeholder, the one picked, or a count), and a popup with a search field and checkbox\n * options, with the shared popup list style, the ScrollArea's bar and fades, and virtualization\n * past VIRTUALIZE_FROM options. Nothing chosen means no filter.\n *\n * For a short fixed list pass `options` and nothing else: the component filters them as the\n * user types. For a list that grows, pass `onSearchChange` and it becomes a window onto a\n * server: the caller fetches the options for the typed text, and says when they are loading,\n * failed, or have another page.\n */\nexport const MultiSelect = ({\n  placeholder,\n  searchPlaceholder,\n  options,\n  value,\n  onValueChange,\n  id,\n  disabled = false,\n  className,\n  onSearchChange,\n  searchDelay = 250,\n  selectedOptions,\n  loading = false,\n  error = false,\n  onRetry,\n  hasMore = false,\n  onLoadMore,\n  loadingMore = false,\n  labels: labelOverrides,\n  summary = 'selection',\n  ...rest\n}: IMultiSelectProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_MULTI_SELECT_LABELS, ...labelOverrides }), [labelOverrides]);\n  const isAsync = onSearchChange !== undefined;\n  const chosen = useMemo(() => resolveChosen(value, options, selectedOptions), [value, options, selectedOptions]);\n  // Chosen options the current page does not contain stay on offer at the top, so they can\n  // still be unchecked after a search has moved on.\n  const items = useMemo(() => {\n    const offered = new Set(options.map((option) => option.value));\n    return [...chosen.filter((option) => !offered.has(option.value)), ...options];\n  }, [chosen, options]);\n  const refScroller = useRef<HTMLDivElement | null>(null);\n  const refScrollTo = useRef<(index: number) => void>(() => undefined);\n  const refTimer = useRef<number | undefined>(undefined);\n  const refTriggerText = useRef<HTMLSpanElement | null>(null);\n  const refSearch = useRef<HTMLInputElement | null>(null);\n  // The popup and the trigger's tooltip are two hover surfaces on one element, so the tooltip stands down while the popup is open.\n  const [popupOpen, setPopupOpen] = useState(false);\n  // The option under the pointer or the keyboard, whichever moved last, for the tooltip that shows a cut label in full.\n  const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n  // The text last reported through onSearchChange, and whether the popup is open. Base UI\n  // reports the input as empty when the popup opens and again when it closes; reporting\n  // those would fetch the first page twice on every open, and again while closed.\n  const refReported = useRef<string | undefined>(undefined);\n  const refOpen = useRef(false);\n  const errorMessage = typeof error === 'string' ? error : labels.error;\n  const failed = error !== false;\n\n  useEffect(() => () => window.clearTimeout(refTimer.current), []);\n\n  // Base UI gives the search field a key handler that closes the popup on Escape and keeps the key from the page, but not\n  // the trigger: with focus back on the trigger and the popup still open (a click that landed while a Sheet slid in,\n  // `focus()`, Shift+Tab) Escape reached the document, where an enclosing Sheet or Dialog closed along with the popup.\n  // So the trigger hands Escape to the search field, the path that already works, and the key goes no further.\n  const closeFromTrigger = (event: ReactKeyboardEvent<HTMLElement>) => {\n    if (event.key !== 'Escape' || !popupOpen || refSearch.current === null) {\n      return;\n    }\n    event.stopPropagation();\n    event.preventDefault();\n    refSearch.current.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));\n  };\n\n  return (\n    <Combobox.Root\n      multiple\n      disabled={disabled}\n      items={items}\n      filter={isAsync ? null : undefined}\n      value={chosen}\n      onValueChange={(next: TMultiSelectOption[]) => onValueChange(next.map((option) => option.value))}\n      onInputValueChange={(text) => {\n        if (onSearchChange === undefined || !refOpen.current) {\n          return;\n        }\n        window.clearTimeout(refTimer.current);\n        if (text === refReported.current) {\n          return;\n        }\n        refTimer.current = window.setTimeout(() => {\n          refReported.current = text;\n          onSearchChange(text);\n        }, searchDelay);\n      }}\n      onOpenChange={(open) => {\n        window.clearTimeout(refTimer.current);\n        setPopupOpen(open);\n        if (!open) {\n          setHighlightedValue(null);\n        }\n        refOpen.current = open;\n        refReported.current = open ? '' : undefined;\n        if (open && onSearchChange !== undefined) {\n          onSearchChange('');\n        }\n      }}\n      itemToStringLabel={(option: TMultiSelectOption) => option.label}\n      isItemEqualToValue={(a: TMultiSelectOption, b: TMultiSelectOption) => a.value === b.value}\n      virtualized={items.length > VIRTUALIZE_FROM}\n      onItemHighlighted={(item, details) => {\n        setHighlightedValue(item?.value ?? null);\n        if (details.reason === 'keyboard' && details.index >= 0) {\n          refScrollTo.current(details.index);\n        }\n      }}\n    >\n      {/* A tooltip only when the text is really cut, which is known when it is about to open. */}\n      <Tooltip\n        disabled={popupOpen}\n        onOpenChange={(open, details) => {\n          const element = refTriggerText.current;\n          if (open && !(element && element.scrollWidth > element.clientWidth)) {\n            details.cancel();\n          }\n        }}\n      >\n        <TooltipTrigger\n          data-slot=\"multi-select-trigger\"\n          render={\n            <Combobox.Trigger\n              {...rest}\n              id={id}\n              data-set={chosen.length > 0 ? '' : undefined}\n              onKeyDown={closeFromTrigger}\n              className={cn(TRIGGER, className)}\n            />\n          }\n        >\n          <span ref={refTriggerText} className={cn('min-w-0 flex-1 truncate text-left', chosen.length === 0 && 'text-muted-foreground')}>\n            {summarize(chosen, placeholder, labels, summary)}\n          </span>\n          <IconChevronDown aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n        </TooltipTrigger>\n        <TooltipContent>{fullSelection(chosen, placeholder, labels, summary)}</TooltipContent>\n      </Tooltip>\n      <Combobox.Portal>\n        <Combobox.Positioner sideOffset={4} align=\"start\" className=\"z-50\">\n          <Combobox.Popup data-slot=\"multi-select-content\" className={POPUP}>\n            <div className=\"flex shrink-0 items-center gap-2 border-b border-border px-3\">\n              <IconSearch aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n              <Combobox.Input\n                ref={refSearch}\n                placeholder={searchPlaceholder}\n                aria-label={searchPlaceholder.replace(/…$/, '')}\n                className=\"h-10 w-full min-w-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n              />\n            </div>\n            {/* The live region stays mounted and only its words change, which is what makes a\n                screen reader announce them. */}\n            <Combobox.Status data-slot=\"multi-select-status\" className=\"px-3 py-2 text-sm text-muted-foreground empty:p-0\">\n              {failed ? (\n                <span className=\"flex items-center justify-between gap-2 text-destructive\">\n                  {errorMessage}\n                  {onRetry !== undefined && (\n                    <button type=\"button\" onClick={onRetry} className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\">\n                      {labels.retry}\n                    </button>\n                  )}\n                </span>\n              ) : loading ? (\n                labels.loading\n              ) : null}\n            </Combobox.Status>\n            <Combobox.Empty className=\"px-3 py-6 text-center text-sm text-muted-foreground empty:p-0\">\n              {loading || failed ? null : labels.noMatches}\n            </Combobox.Empty>\n            <ScrollArea type=\"always\" fade viewportRef={refScroller} className=\"max-h-72 min-h-0\">\n              <Options scroller={refScroller} scrollTo={refScrollTo} busy={loading} highlightedValue={highlightedValue} />\n            </ScrollArea>\n            {hasMore && onLoadMore !== undefined && (\n              <div className=\"shrink-0 border-t border-border p-1\">\n                <button\n                  type=\"button\"\n                  disabled={loadingMore}\n                  onClick={onLoadMore}\n                  className=\"h-8 w-full rounded-md px-2 text-sm font-medium text-foreground hover:bg-foreground/6 disabled:pointer-events-none disabled:opacity-50\"\n                >\n                  {loadingMore ? labels.loadingMore : labels.loadMore}\n                </button>\n              </div>\n            )}\n            {chosen.length > 0 && (\n              <div className=\"flex shrink-0 items-center justify-between gap-2 border-t border-border py-1 pr-1 pl-3 text-xs text-muted-foreground\">\n                <span className=\"tabular-nums\">{labels.selectedCount(chosen.length)}</span>\n                <button\n                  type=\"button\"\n                  onClick={() => onValueChange([])}\n                  className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\"\n                >\n                  {labels.clear}\n                </button>\n              </div>\n            )}\n          </Combobox.Popup>\n        </Combobox.Positioner>\n      </Combobox.Portal>\n    </Combobox.Root>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"multi-select.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/multi-select/multi-select.tsx"],"sourcesContent":["import { Combobox } from '@base-ui/react/combobox';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@edyn/ui/components/ui/tooltip';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\n/** An option: `leading` goes before its label (an avatar, a status dot), `count` after it (how many it would show). */\nexport type TMultiSelectOption = { value: string; label: string; count?: number; leading?: ReactNode };\n\n/** Every word the component prints, so a product can translate it. */\nexport interface IMultiSelectLabels {\n  noMatches: string;\n  loading: string;\n  /** Shown when `error` is `true`; a string `error` replaces it. */\n  error: string;\n  retry: string;\n  loadMore: string;\n  loadingMore: string;\n  clear: string;\n  selectedCount: (count: number) => string;\n}\n\nexport const DEFAULT_MULTI_SELECT_LABELS: IMultiSelectLabels = {\n  noMatches: 'No matches.',\n  loading: 'Loading…',\n  error: 'Could not load the options.',\n  retry: 'Try again',\n  loadMore: 'Load more',\n  loadingMore: 'Loading…',\n  clear: 'Clear',\n  selectedCount: (count) => `${count} selected`,\n};\n\n/** Above this many options a list draws only the rows on screen. */\nexport const VIRTUALIZE_FROM = 100;\n\nconst ITEM_HEIGHT = 32;\n\n/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */\nexport interface IMultiSelectProps\n  extends Omit<\n    ComponentPropsWithoutRef<'button'>,\n    'placeholder' | 'value' | 'defaultValue' | 'id' | 'disabled' | 'className' | 'children' | 'onChange'\n  > {\n  /** The trigger's text with nothing picked, which means no filter (\"All dealer groups\"). */\n  placeholder: string;\n  /** The search field's prompt (\"Search dealer groups…\"). */\n  searchPlaceholder: string;\n  /** The options to show now: all of a short fixed list, or in async mode the ones for the typed text. */\n  options: readonly TMultiSelectOption[];\n  value: readonly string[];\n  onValueChange: (value: string[]) => void;\n  /**\n   * What the trigger says once something is chosen. `selection` (default) names the one chosen or counts several;\n   * `label` keeps the label and only counts, so a value the page shows elsewhere (as a removable chip, say) is\n   * not repeated here: nothing chosen reads `placeholder`, anything chosen reads `labels.selectedCount(n)`.\n   */\n  summary?: 'selection' | 'label';\n  /** For a Label's htmlFor. */\n  id?: string;\n  'aria-label'?: string;\n  /**\n   * Marks the trigger invalid: the kit's destructive border, and a screen reader says so. For a form that does not use\n   * Field; inside one, its invalid state already does this.\n   */\n  'aria-invalid'?: boolean | 'true' | 'false';\n  /**\n   * The id of the text that explains it (the error). Added to what a Field names already, never replacing it.\n   */\n  'aria-describedby'?: string;\n  /** Shown but not changeable (a read-only form). */\n  disabled?: boolean;\n  /** Layout only (a width); the look is the kit's. */\n  className?: string;\n  /**\n   * Passing this turns on ASYNC MODE, for lists that grow (people, dealer groups) and must\n   * be searched by the API rather than loaded whole and filtered in the browser. The\n   * component then never filters: it reports the typed text (after `searchDelay`) and shows\n   * whatever `options` the caller supplies for it. It is also called with '' each time the\n   * list opens, so the first page is fetched on demand, not at page load.\n   */\n  onSearchChange?: (text: string) => void;\n  /** How long typing must pause before `onSearchChange` is called. Async mode only. */\n  searchDelay?: number;\n  /**\n   * The options behind the chosen values, for the ones not in the current `options`. A\n   * search that no longer returns a chosen value must not make it vanish from the trigger\n   * or the count, so the caller says what it is called. Without a label a value shows as\n   * itself.\n   */\n  selectedOptions?: readonly TMultiSelectOption[];\n  /** The options for the typed text are on their way. The old ones stay until they arrive. */\n  loading?: boolean;\n  /** The request failed: `true` for the default message, or the message itself. */\n  error?: boolean | string;\n  onRetry?: () => void;\n  /** There is another page after `options`. */\n  hasMore?: boolean;\n  onLoadMore?: () => void;\n  /** The next page is on its way. */\n  loadingMore?: boolean;\n  labels?: Partial<IMultiSelectLabels>;\n}\n\n/**\n * The options behind the chosen values, in the order they were chosen. A value with no\n * known option is kept and shown as itself rather than dropped: a selection must never\n * change just because a list did.\n */\nexport const resolveChosen = (\n  value: readonly string[],\n  options: readonly TMultiSelectOption[],\n  selectedOptions: readonly TMultiSelectOption[] = [],\n): TMultiSelectOption[] => {\n  const known = new Map<string, TMultiSelectOption>();\n  for (const option of [...selectedOptions, ...options]) {\n    known.set(option.value, option);\n  }\n  return value.map((entry) => known.get(entry) ?? { value: entry, label: entry });\n};\n\n/** What the trigger says: the placeholder, the one picked, or a count. */\nexport const summarize = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string => {\n  if (chosen.length === 0) {\n    return placeholder;\n  }\n  if (summary === 'label') {\n    return labels.selectedCount(chosen.length);\n  }\n  return chosen.length === 1 ? (chosen[0]?.label ?? '') : labels.selectedCount(chosen.length);\n};\n\n/** Every chosen name, for a tooltip on a trigger whose text is cut. With `label` the names are not shown, so it is the text itself. */\nexport const fullSelection = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string =>\n  summary === 'selection' && chosen.length > 0 ? chosen.map((option) => option.label).join(', ') : summarize(chosen, placeholder, labels, summary);\n\nconst POPUP =\n  'flex max-h-(--available-height) w-(--anchor-width) min-w-64 max-w-[max(24rem,var(--anchor-width))] origin-(--transform-origin) flex-col overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md outline-none duration-100 motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95';\n\nconst TRIGGER =\n  'flex h-8 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 text-sm text-foreground transition-colors outline-none focus-visible:border-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive data-popup-open:border-ring dark:bg-input/30';\n\nconst Option = ({\n  option,\n  index,\n  style,\n  measure,\n  highlighted,\n}: {\n  option: TMultiSelectOption;\n  index: number;\n  style?: CSSProperties;\n  measure?: (node: Element | null) => void;\n  highlighted: boolean;\n}) => {\n  const [cut, setCut] = useState(false);\n  // A callback ref, so measuring starts when the label mounts and stops when it goes; the key on the label below mounts a fresh one\n  // when the text changes, which a resize observer alone would miss at an unchanged width.\n  const measureLabel = useCallback((element: HTMLSpanElement | null) => {\n    if (!element) {\n      return;\n    }\n    const measureCut = (): void => setCut(element.scrollWidth > element.clientWidth);\n    measureCut();\n    if (typeof ResizeObserver === 'undefined') {\n      return;\n    }\n    const observer = new ResizeObserver(measureCut);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <Combobox.Item\n      value={option}\n      index={index}\n      ref={measure}\n      data-index={index}\n      style={style}\n      data-slot=\"multi-select-item\"\n      className={cn(popupItemClass('base-ui'), 'group')}\n    >\n      {/* A checkbox, filled when chosen: a set of toggles reads as one. */}\n      <span\n        data-slot=\"multi-select-item-indicator\"\n        aria-hidden=\"true\"\n        className=\"flex size-4 shrink-0 items-center justify-center rounded-sm border border-input text-primary-foreground transition-colors group-data-[selected]:border-primary group-data-[selected]:bg-primary\"\n      >\n        <IconCheck className=\"size-3 opacity-0 group-data-[selected]:opacity-100\" stroke={3} />\n      </span>\n      {option.leading}\n      {/* The option is the highlighted one under the pointer and under the keyboard alike, so one controlled tooltip serves both: the full label while the text is cut. */}\n      <Tooltip open={highlighted && cut}>\n        <TooltipTrigger\n          key={option.label}\n          data-slot=\"multi-select-item-label\"\n          data-overflowing={cut ? '' : undefined}\n          render={<span ref={measureLabel} className=\"min-w-0 flex-1 truncate\" />}\n        >\n          {option.label}\n        </TooltipTrigger>\n        <TooltipContent side=\"right\">{option.label}</TooltipContent>\n      </Tooltip>\n      {option.count !== undefined && <span className=\"text-xs text-muted-foreground tabular-nums\">{option.count}</span>}\n    </Combobox.Item>\n  );\n};\n\n// The options on offer, every one drawn, or past VIRTUALIZE_FROM only those on screen. The\n// list is the listbox itself (the options its direct children), sized to the whole list\n// when virtualized; the ScrollArea wraps it.\nconst Options = ({\n  scroller,\n  scrollTo,\n  busy,\n  highlightedValue,\n}: {\n  scroller: RefObject<HTMLDivElement | null>;\n  scrollTo: RefObject<(index: number) => void>;\n  busy: boolean;\n  highlightedValue: string | null;\n}) => {\n  const items = Combobox.useFilteredItems<TMultiSelectOption>();\n  const virtual = items.length > VIRTUALIZE_FROM;\n  // The scroller is an ancestor, so its ref is set only after this list's own effects:\n  // one more render once mounted gives the virtualizer its element.\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => scroller.current,\n    estimateSize: () => ITEM_HEIGHT,\n    overscan: 12,\n    enabled: virtual && mounted,\n  });\n  useEffect(() => {\n    scrollTo.current = virtual ? (index) => virtualizer.scrollToIndex(index, { align: 'auto' }) : () => undefined;\n  }, [scrollTo, virtual, virtualizer]);\n  if (!virtual) {\n    return (\n      <Combobox.List aria-busy={busy || undefined} className=\"p-1 outline-none\">\n        {items.map((option, index) => (\n          <Option key={option.value} option={option} index={index} highlighted={highlightedValue === option.value} />\n        ))}\n      </Combobox.List>\n    );\n  }\n  return (\n    <Combobox.List\n      data-virtualized=\"\"\n      aria-busy={busy || undefined}\n      className=\"relative m-1 outline-none\"\n      style={{ height: virtualizer.getTotalSize() }}\n    >\n      {virtualizer.getVirtualItems().map((row) => {\n        const option = items[row.index];\n        return option === undefined ? null : (\n          <Option\n            key={option.value}\n            option={option}\n            index={row.index}\n            highlighted={highlightedValue === option.value}\n            measure={virtualizer.measureElement}\n            style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${row.start}px)` }}\n          />\n        );\n      })}\n    </Combobox.List>\n  );\n};\n\n/** Rendered inside the portal, so it exists only while the list is open: the focus guards around the list are not aria-hidden. */\nconst ExposedFocusGuards = () => {\n  useExposedFocusGuards();\n  return null;\n};\n\n/**\n * A choice of several from a list: a trigger shaped like a Select that says what is picked\n * (the placeholder, the one picked, or a count), and a popup with a search field and checkbox\n * options, with the shared popup list style, the ScrollArea's bar and fades, and virtualization\n * past VIRTUALIZE_FROM options. Nothing chosen means no filter.\n *\n * For a short fixed list pass `options` and nothing else: the component filters them as the\n * user types. For a list that grows, pass `onSearchChange` and it becomes a window onto a\n * server: the caller fetches the options for the typed text, and says when they are loading,\n * failed, or have another page.\n */\nexport const MultiSelect = ({\n  placeholder,\n  searchPlaceholder,\n  options,\n  value,\n  onValueChange,\n  id,\n  disabled = false,\n  className,\n  onSearchChange,\n  searchDelay = 250,\n  selectedOptions,\n  loading = false,\n  error = false,\n  onRetry,\n  hasMore = false,\n  onLoadMore,\n  loadingMore = false,\n  labels: labelOverrides,\n  summary = 'selection',\n  ...rest\n}: IMultiSelectProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_MULTI_SELECT_LABELS, ...labelOverrides }), [labelOverrides]);\n  const isAsync = onSearchChange !== undefined;\n  const chosen = useMemo(() => resolveChosen(value, options, selectedOptions), [value, options, selectedOptions]);\n  // Chosen options the current page does not contain stay on offer at the top, so they can\n  // still be unchecked after a search has moved on.\n  const items = useMemo(() => {\n    const offered = new Set(options.map((option) => option.value));\n    return [...chosen.filter((option) => !offered.has(option.value)), ...options];\n  }, [chosen, options]);\n  const refScroller = useRef<HTMLDivElement | null>(null);\n  const refScrollTo = useRef<(index: number) => void>(() => undefined);\n  const refTimer = useRef<number | undefined>(undefined);\n  const refTriggerText = useRef<HTMLSpanElement | null>(null);\n  const refSearch = useRef<HTMLInputElement | null>(null);\n  // The popup and the trigger's tooltip are two hover surfaces on one element, so the tooltip stands down while the popup is open.\n  const [popupOpen, setPopupOpen] = useState(false);\n  // The option under the pointer or the keyboard, whichever moved last, for the tooltip that shows a cut label in full.\n  const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n  // The text last reported through onSearchChange, and whether the popup is open. Base UI\n  // reports the input as empty when the popup opens and again when it closes; reporting\n  // those would fetch the first page twice on every open, and again while closed.\n  const refReported = useRef<string | undefined>(undefined);\n  const refOpen = useRef(false);\n  const errorMessage = typeof error === 'string' ? error : labels.error;\n  const failed = error !== false;\n\n  useEffect(() => () => window.clearTimeout(refTimer.current), []);\n\n  // Base UI gives the search field a key handler that closes the popup on Escape and keeps the key from the page, but not\n  // the trigger: with focus back on the trigger and the popup still open (a click that landed while a Sheet slid in,\n  // `focus()`, Shift+Tab) Escape reached the document, where an enclosing Sheet or Dialog closed along with the popup.\n  // So the trigger hands Escape to the search field, the path that already works, and the key goes no further.\n  const closeFromTrigger = (event: ReactKeyboardEvent<HTMLElement>) => {\n    if (event.key !== 'Escape' || !popupOpen || refSearch.current === null) {\n      return;\n    }\n    event.stopPropagation();\n    event.preventDefault();\n    refSearch.current.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));\n  };\n\n  return (\n    <Combobox.Root\n      multiple\n      disabled={disabled}\n      items={items}\n      filter={isAsync ? null : undefined}\n      value={chosen}\n      onValueChange={(next: TMultiSelectOption[]) => onValueChange(next.map((option) => option.value))}\n      onInputValueChange={(text) => {\n        if (onSearchChange === undefined || !refOpen.current) {\n          return;\n        }\n        window.clearTimeout(refTimer.current);\n        if (text === refReported.current) {\n          return;\n        }\n        refTimer.current = window.setTimeout(() => {\n          refReported.current = text;\n          onSearchChange(text);\n        }, searchDelay);\n      }}\n      onOpenChange={(open) => {\n        window.clearTimeout(refTimer.current);\n        setPopupOpen(open);\n        if (!open) {\n          setHighlightedValue(null);\n        }\n        refOpen.current = open;\n        refReported.current = open ? '' : undefined;\n        if (open && onSearchChange !== undefined) {\n          onSearchChange('');\n        }\n      }}\n      itemToStringLabel={(option: TMultiSelectOption) => option.label}\n      isItemEqualToValue={(a: TMultiSelectOption, b: TMultiSelectOption) => a.value === b.value}\n      virtualized={items.length > VIRTUALIZE_FROM}\n      onItemHighlighted={(item, details) => {\n        setHighlightedValue(item?.value ?? null);\n        if (details.reason === 'keyboard' && details.index >= 0) {\n          refScrollTo.current(details.index);\n        }\n      }}\n    >\n      {/* A tooltip only when the text is really cut, which is known when it is about to open. */}\n      <Tooltip\n        disabled={popupOpen}\n        onOpenChange={(open, details) => {\n          const element = refTriggerText.current;\n          if (open && !(element && element.scrollWidth > element.clientWidth)) {\n            details.cancel();\n          }\n        }}\n      >\n        <TooltipTrigger\n          data-slot=\"multi-select-trigger\"\n          render={\n            <Combobox.Trigger\n              {...rest}\n              id={id}\n              data-set={chosen.length > 0 ? '' : undefined}\n              onKeyDown={closeFromTrigger}\n              className={cn(TRIGGER, className)}\n            />\n          }\n        >\n          <span ref={refTriggerText} className={cn('min-w-0 flex-1 truncate text-left', chosen.length === 0 && 'text-muted-foreground')}>\n            {summarize(chosen, placeholder, labels, summary)}\n          </span>\n          <IconChevronDown aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n        </TooltipTrigger>\n        <TooltipContent>{fullSelection(chosen, placeholder, labels, summary)}</TooltipContent>\n      </Tooltip>\n      <Combobox.Portal>\n        <ExposedFocusGuards />\n        <Combobox.Positioner sideOffset={4} align=\"start\" className=\"z-50\">\n          <Combobox.Popup data-slot=\"multi-select-content\" className={POPUP}>\n            <div className=\"flex shrink-0 items-center gap-2 border-b border-border px-3\">\n              <IconSearch aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n              <Combobox.Input\n                ref={refSearch}\n                placeholder={searchPlaceholder}\n                aria-label={searchPlaceholder.replace(/…$/, '')}\n                className=\"h-10 w-full min-w-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n              />\n            </div>\n            {/* The live region stays mounted and only its words change, which is what makes a\n                screen reader announce them. */}\n            <Combobox.Status data-slot=\"multi-select-status\" className=\"px-3 py-2 text-sm text-muted-foreground empty:p-0\">\n              {failed ? (\n                <span className=\"flex items-center justify-between gap-2 text-destructive\">\n                  {errorMessage}\n                  {onRetry !== undefined && (\n                    <button type=\"button\" onClick={onRetry} className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\">\n                      {labels.retry}\n                    </button>\n                  )}\n                </span>\n              ) : loading ? (\n                labels.loading\n              ) : null}\n            </Combobox.Status>\n            <Combobox.Empty className=\"px-3 py-6 text-center text-sm text-muted-foreground empty:p-0\">\n              {loading || failed ? null : labels.noMatches}\n            </Combobox.Empty>\n            <ScrollArea type=\"always\" fade viewportRef={refScroller} className=\"max-h-72 min-h-0\">\n              <Options scroller={refScroller} scrollTo={refScrollTo} busy={loading} highlightedValue={highlightedValue} />\n            </ScrollArea>\n            {hasMore && onLoadMore !== undefined && (\n              <div className=\"shrink-0 border-t border-border p-1\">\n                <button\n                  type=\"button\"\n                  disabled={loadingMore}\n                  onClick={onLoadMore}\n                  className=\"h-8 w-full rounded-md px-2 text-sm font-medium text-foreground hover:bg-foreground/6 disabled:pointer-events-none disabled:opacity-50\"\n                >\n                  {loadingMore ? labels.loadingMore : labels.loadMore}\n                </button>\n              </div>\n            )}\n            {chosen.length > 0 && (\n              <div className=\"flex shrink-0 items-center justify-between gap-2 border-t border-border py-1 pr-1 pl-3 text-xs text-muted-foreground\">\n                <span className=\"tabular-nums\">{labels.selectedCount(chosen.length)}</span>\n                <button\n                  type=\"button\"\n                  onClick={() => onValueChange([])}\n                  className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\"\n                >\n                  {labels.clear}\n                </button>\n              </div>\n            )}\n          </Combobox.Popup>\n        </Combobox.Positioner>\n      </Combobox.Portal>\n    </Combobox.Root>\n  );\n};\n"],"mappings":"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"}