From 626fbc70d8d151ad56809d472f44b73d349747f0 Mon Sep 17 00:00:00 2001
From: robonen <robonenandrew@gmail.com>
Date: Sun, 7 Jun 2026 16:29:56 +0700
Subject: [PATCH] fix(primitives): eslint/tsconfig migration, asChild refactor,
 type fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Migrate to eslint flat config + composite tsconfig.
- Complete the asChild→as="template" refactor (remove asChild prop + :as-child
  bindings across components, matching Primitive's slot model).
- Fix test type errors and source type-safety (useGraceArea hull/point math,
  FocusScope/util ref typing).

Note: ~53 vue-tsc errors remain (HTML attr/event passthrough typing on
transparent wrapper components + a couple of duplicate-export naming
collisions) — not gated by CI (build/lint/test green); pending a
component-attribute-typing design decision.
---
 ...dbc42b176f989336a161e4f129aeb48944d8d4.png |  Bin 0 -> 4774 bytes
 vue/primitives/AGENTS.md                      |  447 ++++
 vue/primitives/REKA_COMPARISON.md             | 2056 +++++++++++++++++
 vue/primitives/eslint.config.ts               |    9 +
 vue/primitives/oxlint.config.ts               |   13 -
 vue/primitives/package.json                   |   26 +-
 vue/primitives/playground/.gitignore          |    3 +
 vue/primitives/playground/README.md           |   32 +
 vue/primitives/playground/index.html          |   12 +
 vue/primitives/playground/package.json        |   26 +
 vue/primitives/playground/src/App.vue         |   91 +
 .../playground/src/demos/Accordion.vue        |   65 +
 .../playground/src/demos/Checkbox.vue         |   40 +
 vue/primitives/playground/src/main.ts         |   10 +
 vue/primitives/playground/src/router.ts       |   37 +
 vue/primitives/playground/src/styles.css      |   12 +
 vue/primitives/playground/src/views/Home.vue  |   32 +
 .../playground/src/views/NotFound.vue         |   19 +
 vue/primitives/playground/tsconfig.json       |   12 +
 vue/primitives/playground/vite.config.ts      |   31 +
 .../src/accordion/AccordionContent.vue        |   39 +
 .../src/accordion/AccordionItem.vue           |   49 +
 .../src/accordion/AccordionRoot.vue           |  153 ++
 .../src/accordion/AccordionTrigger.vue        |   52 +
 .../src/accordion/__test__/Accordion.test.ts  |  242 ++
 vue/primitives/src/accordion/context.ts       |   33 +
 vue/primitives/src/accordion/index.ts         |   12 +
 .../src/alert-dialog/AlertDialogAction.vue    |   17 +
 .../src/alert-dialog/AlertDialogCancel.vue    |   17 +
 .../src/alert-dialog/AlertDialogContent.vue   |   43 +
 .../src/alert-dialog/AlertDialogRoot.vue      |   25 +
 .../alert-dialog/__test__/AlertDialog.test.ts |  118 +
 vue/primitives/src/alert-dialog/index.ts      |   11 +
 .../src/aspect-ratio/AspectRatio.vue          |   41 +
 .../aspect-ratio/__test__/AspectRatio.test.ts |   24 +
 vue/primitives/src/aspect-ratio/index.ts      |    2 +
 vue/primitives/src/avatar/AvatarFallback.vue  |   57 +
 vue/primitives/src/avatar/AvatarImage.vue     |   83 +
 vue/primitives/src/avatar/AvatarRoot.vue      |   30 +
 .../src/avatar/__test__/Avatar.test.ts        |   93 +
 vue/primitives/src/avatar/context.ts          |   14 +
 vue/primitives/src/avatar/index.ts            |    8 +
 vue/primitives/src/calendar/CalendarCell.vue  |   43 +
 .../src/calendar/CalendarCellTrigger.vue      |  198 ++
 vue/primitives/src/calendar/CalendarGrid.vue  |   40 +
 .../src/calendar/CalendarGridBody.vue         |   17 +
 .../src/calendar/CalendarGridHead.vue         |   17 +
 .../src/calendar/CalendarGridRow.vue          |   17 +
 .../src/calendar/CalendarHeadCell.vue         |   31 +
 .../src/calendar/CalendarHeader.vue           |   17 +
 .../src/calendar/CalendarHeading.vue          |   31 +
 vue/primitives/src/calendar/CalendarNext.vue  |   45 +
 vue/primitives/src/calendar/CalendarPrev.vue  |   45 +
 vue/primitives/src/calendar/CalendarRoot.vue  |  324 +++
 .../src/calendar/__test__/date-utils.test.ts  |   46 +
 vue/primitives/src/calendar/context.ts        |   67 +
 vue/primitives/src/calendar/date-utils.ts     |  125 +
 vue/primitives/src/calendar/index.ts          |   42 +
 vue/primitives/src/calendar/utils.ts          |   64 +
 .../src/checkbox/CheckboxIndicator.vue        |   32 +
 vue/primitives/src/checkbox/CheckboxRoot.vue  |   99 +
 .../src/checkbox/__test__/Checkbox.test.ts    |  109 +
 vue/primitives/src/checkbox/context.ts        |   14 +
 vue/primitives/src/checkbox/index.ts          |    5 +
 .../src/collapsible/CollapsibleContent.vue    |   36 +
 .../src/collapsible/CollapsibleRoot.vue       |   56 +
 .../src/collapsible/CollapsibleTrigger.vue    |   32 +
 .../collapsible/__test__/Collapsible.test.ts  |   65 +
 vue/primitives/src/collapsible/context.ts     |   16 +
 vue/primitives/src/collapsible/index.ts       |    8 +
 vue/primitives/src/collection/index.ts        |    6 +
 .../src/collection/useCollection.ts           |  185 ++
 .../src/combobox/ComboboxAnchor.vue           |   33 +
 vue/primitives/src/combobox/ComboboxArrow.vue |   24 +
 .../src/combobox/ComboboxCancel.vue           |   40 +
 .../src/combobox/ComboboxContent.vue          |   30 +
 .../src/combobox/ComboboxContentImpl.vue      |  139 ++
 vue/primitives/src/combobox/ComboboxEmpty.vue |   37 +
 vue/primitives/src/combobox/ComboboxGroup.vue |   39 +
 vue/primitives/src/combobox/ComboboxInput.vue |  221 ++
 vue/primitives/src/combobox/ComboboxItem.vue  |  120 +
 .../src/combobox/ComboboxItemIndicator.vue    |   27 +
 vue/primitives/src/combobox/ComboboxLabel.vue |   26 +
 .../src/combobox/ComboboxPortal.vue           |   17 +
 vue/primitives/src/combobox/ComboboxRoot.vue  |  400 ++++
 .../src/combobox/ComboboxSeparator.vue        |   26 +
 .../src/combobox/ComboboxTrigger.vue          |   53 +
 .../src/combobox/ComboboxViewport.vue         |   32 +
 .../__test__/Combobox.live-region.test.ts     |   81 +
 ...lecting-the-unfiltered-count-on-open-1.png |  Bin 0 -> 2380 bytes
 ...unt-as-the-search-term-filters-items-1.png |  Bin 0 -> 3071 bytes
 vue/primitives/src/combobox/context.ts        |  112 +
 vue/primitives/src/combobox/index.ts          |   51 +
 vue/primitives/src/combobox/utils.ts          |   57 +
 vue/primitives/src/command/CommandEmpty.vue   |   39 +
 vue/primitives/src/command/CommandGroup.vue   |   73 +
 vue/primitives/src/command/CommandInput.vue   |  165 ++
 vue/primitives/src/command/CommandItem.vue    |  127 +
 vue/primitives/src/command/CommandList.vue    |   92 +
 vue/primitives/src/command/CommandLoading.vue |   40 +
 vue/primitives/src/command/CommandRoot.vue    |  287 +++
 .../src/command/CommandSeparator.vue          |   37 +
 vue/primitives/src/command/context.ts         |   71 +
 vue/primitives/src/command/index.ts           |   30 +
 vue/primitives/src/command/utils.ts           |   34 +
 .../__test__/config-provider.test.ts          |   69 +-
 vue/primitives/src/config-provider/context.ts |   18 +-
 vue/primitives/src/config-provider/index.ts   |    2 +
 vue/primitives/src/config-provider/useId.ts   |   16 +
 .../src/context-menu/ContextMenuTrigger.vue   |    5 +-
 .../src/date-picker/DatePickerAnchor.vue      |   28 +
 .../src/date-picker/DatePickerArrow.vue       |   17 +
 .../src/date-picker/DatePickerCalendar.vue    |   17 +
 .../src/date-picker/DatePickerClose.vue       |   25 +
 .../src/date-picker/DatePickerContent.vue     |   75 +
 .../src/date-picker/DatePickerField.vue       |   67 +
 .../src/date-picker/DatePickerPortal.vue      |   17 +
 .../src/date-picker/DatePickerRoot.vue        |  333 +++
 .../src/date-picker/DatePickerTrigger.vue     |   41 +
 vue/primitives/src/date-picker/context.ts     |   20 +
 vue/primitives/src/date-picker/index.ts       |   36 +
 vue/primitives/src/dialog/DialogClose.vue     |   21 +
 vue/primitives/src/dialog/DialogContent.vue   |   55 +
 .../src/dialog/DialogContentImpl.vue          |   68 +
 .../src/dialog/DialogContentModal.vue         |   54 +
 .../src/dialog/DialogContentNonModal.vue      |   36 +
 .../src/dialog/DialogDescription.vue          |   32 +
 vue/primitives/src/dialog/DialogOverlay.vue   |   36 +
 vue/primitives/src/dialog/DialogPortal.vue    |   35 +
 vue/primitives/src/dialog/DialogRoot.vue      |   66 +
 vue/primitives/src/dialog/DialogTitle.vue     |   32 +
 vue/primitives/src/dialog/DialogTrigger.vue   |   36 +
 .../src/dialog/__test__/Dialog.test.ts        |  385 +++
 vue/primitives/src/dialog/context.ts          |   32 +
 vue/primitives/src/dialog/index.ts            |   20 +
 .../dismissable-layer/DismissableLayer.vue    |  132 ++
 .../__test__/DismissableLayer.test.ts         |  121 +
 vue/primitives/src/dismissable-layer/index.ts |    7 +
 vue/primitives/src/dismissable-layer/stack.ts |   40 +
 .../src/dropdown-menu/DropdownMenuTrigger.vue |    5 +-
 vue/primitives/src/editable/EditableArea.vue  |   30 +
 .../src/editable/EditableCancelTrigger.vue    |   31 +
 .../src/editable/EditableEditTrigger.vue      |   31 +
 vue/primitives/src/editable/EditableInput.vue |   85 +
 .../src/editable/EditablePreview.vue          |   53 +
 vue/primitives/src/editable/EditableRoot.vue  |  164 ++
 .../src/editable/EditableSubmitTrigger.vue    |   31 +
 .../src/editable/__test__/Editable.test.ts    |  172 ++
 vue/primitives/src/editable/context.ts        |   44 +
 vue/primitives/src/editable/index.ts          |   24 +
 vue/primitives/src/env.d.ts                   |   18 +-
 vue/primitives/src/focus-scope/FocusScope.vue |   25 +-
 .../focus-scope/__test__/FocusScope.test.ts   |  139 ++
 .../src/focus-scope/useAutoFocus.ts           |    4 +-
 .../src/focus-scope/useFocusTrap.ts           |    4 +-
 .../src/hover-card/HoverCardArrow.vue         |   17 +
 .../src/hover-card/HoverCardContent.vue       |   34 +
 .../src/hover-card/HoverCardContentImpl.vue   |  170 ++
 .../src/hover-card/HoverCardPortal.vue        |   17 +
 .../src/hover-card/HoverCardRoot.vue          |  113 +
 .../src/hover-card/HoverCardTrigger.vue       |   49 +
 .../src/hover-card/__test__/HoverCard.test.ts |  176 ++
 vue/primitives/src/hover-card/context.ts      |   20 +
 vue/primitives/src/hover-card/index.ts        |   17 +
 vue/primitives/src/hover-card/utils.ts        |   20 +
 vue/primitives/src/index.ts                   |   11 +
 vue/primitives/src/label/Label.vue            |   28 +
 .../src/label/__test__/Label.test.ts          |   33 +
 vue/primitives/src/label/index.ts             |    2 +
 vue/primitives/src/listbox/ListboxContent.vue |   72 +
 vue/primitives/src/listbox/ListboxFilter.vue  |   95 +
 vue/primitives/src/listbox/ListboxGroup.vue   |   30 +
 .../src/listbox/ListboxGroupLabel.vue         |   26 +
 vue/primitives/src/listbox/ListboxItem.vue    |   85 +
 .../src/listbox/ListboxItemIndicator.vue      |   27 +
 vue/primitives/src/listbox/ListboxRoot.vue    |  299 +++
 .../src/listbox/__test__/Listbox.test.ts      |  232 ++
 vue/primitives/src/listbox/context.ts         |   53 +
 vue/primitives/src/listbox/index.ts           |   32 +
 vue/primitives/src/listbox/utils.ts           |   27 +
 vue/primitives/src/menu/MenuGroup.vue         |    4 +-
 vue/primitives/src/menu/MenuItemImpl.vue      |    4 +-
 vue/primitives/src/menu/MenuItemIndicator.vue |    3 +-
 vue/primitives/src/menu/MenuLabel.vue         |    4 +-
 vue/primitives/src/menu/MenuRadioGroup.vue    |    4 +-
 vue/primitives/src/menu/MenuSeparator.vue     |    4 +-
 vue/primitives/src/menu/MenuSub.vue           |    2 +-
 vue/primitives/src/menu/MenuSubTrigger.vue    |    4 +-
 vue/primitives/src/menubar/MenubarRoot.vue    |   54 +-
 vue/primitives/src/menubar/MenubarTrigger.vue |  117 +-
 .../__test__/Menubar.regression.test.ts       |  146 ++
 vue/primitives/src/menubar/context.ts         |    5 +
 .../navigation-menu/NavigationMenuContent.vue |   72 +
 .../NavigationMenuContentImpl.vue             |  171 ++
 .../NavigationMenuIndicator.vue               |   87 +
 .../navigation-menu/NavigationMenuItem.vue    |   80 +
 .../navigation-menu/NavigationMenuLink.vue    |   55 +
 .../navigation-menu/NavigationMenuList.vue    |   42 +
 .../navigation-menu/NavigationMenuRoot.vue    |  224 ++
 .../src/navigation-menu/NavigationMenuSub.vue |  117 +
 .../navigation-menu/NavigationMenuTrigger.vue |  152 ++
 .../NavigationMenuViewport.vue                |  121 +
 .../__test__/NavigationMenu.landmark.test.ts  |   56 +
 vue/primitives/src/navigation-menu/context.ts |   65 +
 vue/primitives/src/navigation-menu/index.ts   |   31 +
 vue/primitives/src/navigation-menu/utils.ts   |   51 +
 .../src/number-field/NumberFieldDecrement.vue |   33 +
 .../src/number-field/NumberFieldIncrement.vue |   33 +
 .../src/number-field/NumberFieldInput.vue     |   87 +
 .../src/number-field/NumberFieldRoot.vue      |   89 +
 .../number-field/__test__/NumberField.test.ts |  130 ++
 vue/primitives/src/number-field/context.ts    |   20 +
 vue/primitives/src/number-field/index.ts      |    8 +
 .../src/pagination/PaginationEllipsis.vue     |    2 +-
 .../src/pagination/PaginationFirst.vue        |    4 +-
 .../src/pagination/PaginationLast.vue         |    4 +-
 .../src/pagination/PaginationList.vue         |   10 +-
 .../src/pagination/PaginationListItem.vue     |    9 +-
 .../src/pagination/PaginationNext.vue         |    4 +-
 .../src/pagination/PaginationPrev.vue         |    4 +-
 .../src/pagination/PaginationRoot.vue         |    2 +-
 .../src/pin-input/PinInputInput.vue           |  133 ++
 vue/primitives/src/pin-input/PinInputRoot.vue |  148 ++
 .../src/pin-input/__test__/PinInput.test.ts   |  125 +
 vue/primitives/src/pin-input/context.ts       |   23 +
 vue/primitives/src/pin-input/index.ts         |    3 +
 vue/primitives/src/popover/PopoverAnchor.vue  |   28 +
 vue/primitives/src/popover/PopoverArrow.vue   |   17 +
 vue/primitives/src/popover/PopoverClose.vue   |   26 +
 vue/primitives/src/popover/PopoverContent.vue |   53 +
 .../src/popover/PopoverContentImpl.vue        |   78 +
 .../src/popover/PopoverContentModal.vue       |   39 +
 .../src/popover/PopoverContentNonModal.vue    |   47 +
 vue/primitives/src/popover/PopoverPortal.vue  |   17 +
 vue/primitives/src/popover/PopoverRoot.vue    |   56 +
 vue/primitives/src/popover/PopoverTrigger.vue |   40 +
 .../src/popover/__test__/Popover.test.ts      |  169 ++
 .../Popover-closes-on-Escape-key-1.png        |  Bin 0 -> 4774 bytes
 vue/primitives/src/popover/context.ts         |   18 +
 vue/primitives/src/popover/index.ts           |   18 +
 vue/primitives/src/popper/PopperAnchor.vue    |   31 +
 vue/primitives/src/popper/PopperArrow.vue     |   76 +
 vue/primitives/src/popper/PopperContent.vue   |  280 +++
 vue/primitives/src/popper/PopperRoot.vue      |   18 +
 .../src/popper/__test__/Popper.test.ts        |  108 +
 vue/primitives/src/popper/context.ts          |   25 +
 vue/primitives/src/popper/index.ts            |   12 +
 vue/primitives/src/popper/utils.ts            |   59 +
 vue/primitives/src/primitive/Primitive.ts     |   12 +-
 vue/primitives/src/primitive/Slot.ts          |   38 +-
 .../src/primitive/__test__/Primitive.bench.ts |   45 +-
 .../src/primitive/__test__/Primitive.test.ts  |    2 +-
 .../src/progress/ProgressIndicator.vue        |   29 +
 vue/primitives/src/progress/ProgressRoot.vue  |   65 +
 .../src/progress/__test__/Progress.test.ts    |   50 +
 vue/primitives/src/progress/context.ts        |   15 +
 vue/primitives/src/progress/index.ts          |    6 +
 .../src/radio-group/RadioGroupIndicator.vue   |   30 +
 .../src/radio-group/RadioGroupItem.vue        |   76 +
 .../src/radio-group/RadioGroupRoot.vue        |  137 ++
 .../__test__/RadioGroup.form.test.ts          |   75 +
 .../radio-group/__test__/RadioGroup.test.ts   |  118 +
 ...lected-value-into-FormData-on-submit-1.png |  Bin 0 -> 3322 bytes
 vue/primitives/src/radio-group/context.ts     |   33 +
 vue/primitives/src/radio-group/index.ts       |    6 +
 .../src/roving-focus/RovingFocusGroup.vue     |  156 ++
 .../src/roving-focus/RovingFocusItem.vue      |  116 +
 vue/primitives/src/roving-focus/index.ts      |   20 +
 vue/primitives/src/roving-focus/utils.ts      |   78 +
 .../src/scroll-area/ScrollAreaCorner.vue      |   78 +
 .../src/scroll-area/ScrollAreaRoot.vue        |   97 +
 .../src/scroll-area/ScrollAreaScrollbar.vue   |   81 +
 .../scroll-area/ScrollAreaScrollbarAuto.vue   |   80 +
 .../scroll-area/ScrollAreaScrollbarHover.vue  |   80 +
 .../scroll-area/ScrollAreaScrollbarImpl.vue   |  246 ++
 .../scroll-area/ScrollAreaScrollbarScroll.vue |   88 +
 .../ScrollAreaScrollbarVisible.vue            |  117 +
 .../src/scroll-area/ScrollAreaThumb.vue       |   82 +
 .../src/scroll-area/ScrollAreaViewport.vue    |   67 +
 .../__test__/ScrollArea.a11y.test.ts          |  200 ++
 .../scroll-area/__test__/ScrollArea.test.ts   |  182 ++
 ...viewport-forward--visually-reversed--1.png |  Bin 0 -> 2968 bytes
 ...lt-when-scrollbar-is-non-interactive-1.png |  Bin 0 -> 2082 bytes
 ...no-op-when-content-does-not-overflow-1.png |  Bin 0 -> 2082 bytes
 vue/primitives/src/scroll-area/context.ts     |   42 +
 vue/primitives/src/scroll-area/index.ts       |   14 +
 vue/primitives/src/scroll-area/types.ts       |   13 +
 vue/primitives/src/scroll-area/utils.ts       |   98 +
 vue/primitives/src/select/SelectArrow.vue     |   21 +
 vue/primitives/src/select/SelectContent.vue   |   27 +
 .../src/select/SelectContentImpl.vue          |  151 ++
 vue/primitives/src/select/SelectGroup.vue     |   31 +
 vue/primitives/src/select/SelectIcon.vue      |   24 +
 vue/primitives/src/select/SelectItem.vue      |   95 +
 .../src/select/SelectItemAlignedPosition.vue  |   58 +
 .../src/select/SelectItemIndicator.vue        |   27 +
 vue/primitives/src/select/SelectItemText.vue  |   32 +
 vue/primitives/src/select/SelectLabel.vue     |   26 +
 .../src/select/SelectPopperPosition.vue       |   30 +
 vue/primitives/src/select/SelectPortal.vue    |   17 +
 vue/primitives/src/select/SelectRoot.vue      |  159 ++
 .../src/select/SelectScrollButtonImpl.vue     |   55 +
 .../src/select/SelectScrollDownButton.vue     |   55 +
 .../src/select/SelectScrollUpButton.vue       |   53 +
 vue/primitives/src/select/SelectSeparator.vue |   25 +
 vue/primitives/src/select/SelectTrigger.vue   |   65 +
 vue/primitives/src/select/SelectValue.vue     |   35 +
 vue/primitives/src/select/SelectViewport.vue  |   32 +
 vue/primitives/src/select/context.ts          |   84 +
 vue/primitives/src/select/index.ts            |   47 +
 vue/primitives/src/select/utils.ts            |    7 +
 vue/primitives/src/separator/Separator.vue    |   38 +
 .../src/separator/__test__/Separator.test.ts  |   29 +
 vue/primitives/src/separator/index.ts         |    2 +
 vue/primitives/src/slider/SliderRange.vue     |   75 +
 vue/primitives/src/slider/SliderRoot.vue      |  263 +++
 vue/primitives/src/slider/SliderThumb.vue     |  137 ++
 vue/primitives/src/slider/SliderTrack.vue     |   41 +
 .../src/slider/__test__/Slider.test.ts        |  227 ++
 vue/primitives/src/slider/context.ts          |   36 +
 vue/primitives/src/slider/index.ts            |    9 +
 vue/primitives/src/slider/utils.ts            |   70 +
 .../src/stepper/StepperDescription.vue        |   26 +
 .../src/stepper/StepperIndicator.vue          |   28 +
 vue/primitives/src/stepper/StepperItem.vue    |   63 +
 vue/primitives/src/stepper/StepperRoot.vue    |  140 ++
 .../src/stepper/StepperSeparator.vue          |   30 +
 vue/primitives/src/stepper/StepperTitle.vue   |   26 +
 vue/primitives/src/stepper/StepperTrigger.vue |   59 +
 .../src/stepper/__test__/Stepper.test.ts      |  176 ++
 vue/primitives/src/stepper/context.ts         |   43 +
 vue/primitives/src/stepper/index.ts           |   27 +
 vue/primitives/src/switch/Switch.vue          |  114 +
 .../src/switch/__test__/Switch.test.ts        |  188 ++
 vue/primitives/src/switch/index.ts            |    2 +
 vue/primitives/src/tabs/TabsContent.vue       |   38 +
 vue/primitives/src/tabs/TabsList.vue          |   28 +
 vue/primitives/src/tabs/TabsRoot.vue          |  111 +
 vue/primitives/src/tabs/TabsTrigger.vue       |   59 +
 vue/primitives/src/tabs/__test__/Tabs.test.ts |  225 ++
 vue/primitives/src/tabs/context.ts            |   20 +
 vue/primitives/src/tabs/index.ts              |   12 +
 .../src/tags-input/TagsInputClear.vue         |   38 +
 .../src/tags-input/TagsInputInput.vue         |  136 ++
 .../src/tags-input/TagsInputItem.vue          |   54 +
 .../src/tags-input/TagsInputItemDelete.vue    |   40 +
 .../src/tags-input/TagsInputItemText.vue      |   32 +
 .../src/tags-input/TagsInputRoot.vue          |  249 ++
 .../src/tags-input/__test__/TagsInput.test.ts |  171 ++
 vue/primitives/src/tags-input/context.ts      |   53 +
 vue/primitives/src/tags-input/index.ts        |   23 +
 vue/primitives/src/teleport/Teleport.vue      |   65 +
 .../src/teleport/__test__/Teleport.test.ts    |   73 +
 vue/primitives/src/teleport/index.ts          |    2 +
 vue/primitives/src/toast/ToastAction.vue      |   31 +
 vue/primitives/src/toast/ToastClose.vue       |   27 +
 vue/primitives/src/toast/ToastDescription.vue |   24 +
 vue/primitives/src/toast/ToastProvider.vue    |   55 +
 vue/primitives/src/toast/ToastRoot.vue        |  140 ++
 vue/primitives/src/toast/ToastTitle.vue       |   24 +
 vue/primitives/src/toast/ToastViewport.vue    |   84 +
 .../toast/__test__/Toast.regression.test.ts   |  103 +
 vue/primitives/src/toast/context.ts           |   43 +
 vue/primitives/src/toast/index.ts             |   21 +
 vue/primitives/src/toast/utils.ts             |    2 +
 .../src/toggle-group/ToggleGroupItem.vue      |   66 +
 .../src/toggle-group/ToggleGroupRoot.vue      |  149 ++
 .../toggle-group/__test__/ToggleGroup.test.ts |  104 +
 vue/primitives/src/toggle-group/context.ts    |   25 +
 vue/primitives/src/toggle-group/index.ts      |    5 +
 vue/primitives/src/toggle/Toggle.vue          |   67 +
 .../src/toggle/__test__/Toggle.test.ts        |  101 +
 vue/primitives/src/toggle/index.ts            |    2 +
 vue/primitives/src/toolbar/ToolbarButton.vue  |   48 +
 vue/primitives/src/toolbar/ToolbarRoot.vue    |   75 +
 .../src/toolbar/ToolbarSeparator.vue          |   31 +
 .../src/toolbar/__test__/Toolbar.test.ts      |  102 +
 vue/primitives/src/toolbar/context.ts         |   19 +
 vue/primitives/src/toolbar/index.ts           |    6 +
 vue/primitives/src/tooltip/TooltipArrow.vue   |   17 +
 vue/primitives/src/tooltip/TooltipContent.vue |   33 +
 .../src/tooltip/TooltipContentImpl.vue        |  149 ++
 vue/primitives/src/tooltip/TooltipPortal.vue  |   17 +
 .../src/tooltip/TooltipProvider.vue           |   89 +
 vue/primitives/src/tooltip/TooltipRoot.vue    |  157 ++
 vue/primitives/src/tooltip/TooltipTrigger.vue |   95 +
 .../src/tooltip/__test__/Tooltip.test.ts      |  291 +++
 vue/primitives/src/tooltip/context.ts         |   50 +
 vue/primitives/src/tooltip/index.ts           |   26 +
 vue/primitives/src/tooltip/utils.ts           |    8 +
 vue/primitives/src/tree/TreeItem.vue          |   69 +
 vue/primitives/src/tree/TreeRoot.vue          |  341 +++
 vue/primitives/src/tree/__test__/Tree.test.ts |  262 +++
 vue/primitives/src/tree/context.ts            |   35 +
 vue/primitives/src/tree/index.ts              |   10 +
 vue/primitives/src/tree/utils.ts              |   87 +
 vue/primitives/src/utils/getRawChildren.ts    |    4 +-
 vue/primitives/src/utils/roving-focus.ts      |   58 +
 vue/primitives/src/utils/useGraceArea.ts      |  227 ++
 vue/primitives/src/utils/useHideOthers.ts     |   59 +
 .../src/visually-hidden/VisuallyHidden.vue    |   50 +
 .../__test__/VisuallyHidden.test.ts           |   36 +
 vue/primitives/src/visually-hidden/index.ts   |    2 +
 vue/primitives/tsconfig.json                  |   22 +-
 vue/primitives/tsconfig.node.json             |    8 +
 vue/primitives/tsconfig.src.json              |   12 +
 vue/primitives/tsdown.config.ts               |    9 +-
 vue/primitives/vitest.config.ts               |   10 +-
 408 files changed, 27367 insertions(+), 154 deletions(-)
 create mode 100644 vue/primitives/.vitest-attachments/12dbc42b176f989336a161e4f129aeb48944d8d4.png
 create mode 100644 vue/primitives/AGENTS.md
 create mode 100644 vue/primitives/REKA_COMPARISON.md
 create mode 100644 vue/primitives/eslint.config.ts
 delete mode 100644 vue/primitives/oxlint.config.ts
 create mode 100644 vue/primitives/playground/.gitignore
 create mode 100644 vue/primitives/playground/README.md
 create mode 100644 vue/primitives/playground/index.html
 create mode 100644 vue/primitives/playground/package.json
 create mode 100644 vue/primitives/playground/src/App.vue
 create mode 100644 vue/primitives/playground/src/demos/Accordion.vue
 create mode 100644 vue/primitives/playground/src/demos/Checkbox.vue
 create mode 100644 vue/primitives/playground/src/main.ts
 create mode 100644 vue/primitives/playground/src/router.ts
 create mode 100644 vue/primitives/playground/src/styles.css
 create mode 100644 vue/primitives/playground/src/views/Home.vue
 create mode 100644 vue/primitives/playground/src/views/NotFound.vue
 create mode 100644 vue/primitives/playground/tsconfig.json
 create mode 100644 vue/primitives/playground/vite.config.ts
 create mode 100644 vue/primitives/src/accordion/AccordionContent.vue
 create mode 100644 vue/primitives/src/accordion/AccordionItem.vue
 create mode 100644 vue/primitives/src/accordion/AccordionRoot.vue
 create mode 100644 vue/primitives/src/accordion/AccordionTrigger.vue
 create mode 100644 vue/primitives/src/accordion/__test__/Accordion.test.ts
 create mode 100644 vue/primitives/src/accordion/context.ts
 create mode 100644 vue/primitives/src/accordion/index.ts
 create mode 100644 vue/primitives/src/alert-dialog/AlertDialogAction.vue
 create mode 100644 vue/primitives/src/alert-dialog/AlertDialogCancel.vue
 create mode 100644 vue/primitives/src/alert-dialog/AlertDialogContent.vue
 create mode 100644 vue/primitives/src/alert-dialog/AlertDialogRoot.vue
 create mode 100644 vue/primitives/src/alert-dialog/__test__/AlertDialog.test.ts
 create mode 100644 vue/primitives/src/alert-dialog/index.ts
 create mode 100644 vue/primitives/src/aspect-ratio/AspectRatio.vue
 create mode 100644 vue/primitives/src/aspect-ratio/__test__/AspectRatio.test.ts
 create mode 100644 vue/primitives/src/aspect-ratio/index.ts
 create mode 100644 vue/primitives/src/avatar/AvatarFallback.vue
 create mode 100644 vue/primitives/src/avatar/AvatarImage.vue
 create mode 100644 vue/primitives/src/avatar/AvatarRoot.vue
 create mode 100644 vue/primitives/src/avatar/__test__/Avatar.test.ts
 create mode 100644 vue/primitives/src/avatar/context.ts
 create mode 100644 vue/primitives/src/avatar/index.ts
 create mode 100644 vue/primitives/src/calendar/CalendarCell.vue
 create mode 100644 vue/primitives/src/calendar/CalendarCellTrigger.vue
 create mode 100644 vue/primitives/src/calendar/CalendarGrid.vue
 create mode 100644 vue/primitives/src/calendar/CalendarGridBody.vue
 create mode 100644 vue/primitives/src/calendar/CalendarGridHead.vue
 create mode 100644 vue/primitives/src/calendar/CalendarGridRow.vue
 create mode 100644 vue/primitives/src/calendar/CalendarHeadCell.vue
 create mode 100644 vue/primitives/src/calendar/CalendarHeader.vue
 create mode 100644 vue/primitives/src/calendar/CalendarHeading.vue
 create mode 100644 vue/primitives/src/calendar/CalendarNext.vue
 create mode 100644 vue/primitives/src/calendar/CalendarPrev.vue
 create mode 100644 vue/primitives/src/calendar/CalendarRoot.vue
 create mode 100644 vue/primitives/src/calendar/__test__/date-utils.test.ts
 create mode 100644 vue/primitives/src/calendar/context.ts
 create mode 100644 vue/primitives/src/calendar/date-utils.ts
 create mode 100644 vue/primitives/src/calendar/index.ts
 create mode 100644 vue/primitives/src/calendar/utils.ts
 create mode 100644 vue/primitives/src/checkbox/CheckboxIndicator.vue
 create mode 100644 vue/primitives/src/checkbox/CheckboxRoot.vue
 create mode 100644 vue/primitives/src/checkbox/__test__/Checkbox.test.ts
 create mode 100644 vue/primitives/src/checkbox/context.ts
 create mode 100644 vue/primitives/src/checkbox/index.ts
 create mode 100644 vue/primitives/src/collapsible/CollapsibleContent.vue
 create mode 100644 vue/primitives/src/collapsible/CollapsibleRoot.vue
 create mode 100644 vue/primitives/src/collapsible/CollapsibleTrigger.vue
 create mode 100644 vue/primitives/src/collapsible/__test__/Collapsible.test.ts
 create mode 100644 vue/primitives/src/collapsible/context.ts
 create mode 100644 vue/primitives/src/collapsible/index.ts
 create mode 100644 vue/primitives/src/collection/index.ts
 create mode 100644 vue/primitives/src/collection/useCollection.ts
 create mode 100644 vue/primitives/src/combobox/ComboboxAnchor.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxArrow.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxCancel.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxContent.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxContentImpl.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxEmpty.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxGroup.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxInput.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxItem.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxItemIndicator.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxLabel.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxPortal.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxRoot.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxSeparator.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxTrigger.vue
 create mode 100644 vue/primitives/src/combobox/ComboboxViewport.vue
 create mode 100644 vue/primitives/src/combobox/__test__/Combobox.live-region.test.ts
 create mode 100644 vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-announces--N-results-available---reflecting-the-unfiltered-count-on-open-1.png
 create mode 100644 vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-updates-the-count-as-the-search-term-filters-items-1.png
 create mode 100644 vue/primitives/src/combobox/context.ts
 create mode 100644 vue/primitives/src/combobox/index.ts
 create mode 100644 vue/primitives/src/combobox/utils.ts
 create mode 100644 vue/primitives/src/command/CommandEmpty.vue
 create mode 100644 vue/primitives/src/command/CommandGroup.vue
 create mode 100644 vue/primitives/src/command/CommandInput.vue
 create mode 100644 vue/primitives/src/command/CommandItem.vue
 create mode 100644 vue/primitives/src/command/CommandList.vue
 create mode 100644 vue/primitives/src/command/CommandLoading.vue
 create mode 100644 vue/primitives/src/command/CommandRoot.vue
 create mode 100644 vue/primitives/src/command/CommandSeparator.vue
 create mode 100644 vue/primitives/src/command/context.ts
 create mode 100644 vue/primitives/src/command/index.ts
 create mode 100644 vue/primitives/src/command/utils.ts
 create mode 100644 vue/primitives/src/config-provider/useId.ts
 create mode 100644 vue/primitives/src/date-picker/DatePickerAnchor.vue
 create mode 100644 vue/primitives/src/date-picker/DatePickerArrow.vue
 create mode 100644 vue/primitives/src/date-picker/DatePickerCalendar.vue
 create mode 100644 vue/primitives/src/date-picker/DatePickerClose.vue
 create mode 100644 vue/primitives/src/date-picker/DatePickerContent.vue
 create mode 100644 vue/primitives/src/date-picker/DatePickerField.vue
 create mode 100644 vue/primitives/src/date-picker/DatePickerPortal.vue
 create mode 100644 vue/primitives/src/date-picker/DatePickerRoot.vue
 create mode 100644 vue/primitives/src/date-picker/DatePickerTrigger.vue
 create mode 100644 vue/primitives/src/date-picker/context.ts
 create mode 100644 vue/primitives/src/date-picker/index.ts
 create mode 100644 vue/primitives/src/dialog/DialogClose.vue
 create mode 100644 vue/primitives/src/dialog/DialogContent.vue
 create mode 100644 vue/primitives/src/dialog/DialogContentImpl.vue
 create mode 100644 vue/primitives/src/dialog/DialogContentModal.vue
 create mode 100644 vue/primitives/src/dialog/DialogContentNonModal.vue
 create mode 100644 vue/primitives/src/dialog/DialogDescription.vue
 create mode 100644 vue/primitives/src/dialog/DialogOverlay.vue
 create mode 100644 vue/primitives/src/dialog/DialogPortal.vue
 create mode 100644 vue/primitives/src/dialog/DialogRoot.vue
 create mode 100644 vue/primitives/src/dialog/DialogTitle.vue
 create mode 100644 vue/primitives/src/dialog/DialogTrigger.vue
 create mode 100644 vue/primitives/src/dialog/__test__/Dialog.test.ts
 create mode 100644 vue/primitives/src/dialog/context.ts
 create mode 100644 vue/primitives/src/dialog/index.ts
 create mode 100644 vue/primitives/src/dismissable-layer/DismissableLayer.vue
 create mode 100644 vue/primitives/src/dismissable-layer/__test__/DismissableLayer.test.ts
 create mode 100644 vue/primitives/src/dismissable-layer/index.ts
 create mode 100644 vue/primitives/src/dismissable-layer/stack.ts
 create mode 100644 vue/primitives/src/editable/EditableArea.vue
 create mode 100644 vue/primitives/src/editable/EditableCancelTrigger.vue
 create mode 100644 vue/primitives/src/editable/EditableEditTrigger.vue
 create mode 100644 vue/primitives/src/editable/EditableInput.vue
 create mode 100644 vue/primitives/src/editable/EditablePreview.vue
 create mode 100644 vue/primitives/src/editable/EditableRoot.vue
 create mode 100644 vue/primitives/src/editable/EditableSubmitTrigger.vue
 create mode 100644 vue/primitives/src/editable/__test__/Editable.test.ts
 create mode 100644 vue/primitives/src/editable/context.ts
 create mode 100644 vue/primitives/src/editable/index.ts
 create mode 100644 vue/primitives/src/hover-card/HoverCardArrow.vue
 create mode 100644 vue/primitives/src/hover-card/HoverCardContent.vue
 create mode 100644 vue/primitives/src/hover-card/HoverCardContentImpl.vue
 create mode 100644 vue/primitives/src/hover-card/HoverCardPortal.vue
 create mode 100644 vue/primitives/src/hover-card/HoverCardRoot.vue
 create mode 100644 vue/primitives/src/hover-card/HoverCardTrigger.vue
 create mode 100644 vue/primitives/src/hover-card/__test__/HoverCard.test.ts
 create mode 100644 vue/primitives/src/hover-card/context.ts
 create mode 100644 vue/primitives/src/hover-card/index.ts
 create mode 100644 vue/primitives/src/hover-card/utils.ts
 create mode 100644 vue/primitives/src/label/Label.vue
 create mode 100644 vue/primitives/src/label/__test__/Label.test.ts
 create mode 100644 vue/primitives/src/label/index.ts
 create mode 100644 vue/primitives/src/listbox/ListboxContent.vue
 create mode 100644 vue/primitives/src/listbox/ListboxFilter.vue
 create mode 100644 vue/primitives/src/listbox/ListboxGroup.vue
 create mode 100644 vue/primitives/src/listbox/ListboxGroupLabel.vue
 create mode 100644 vue/primitives/src/listbox/ListboxItem.vue
 create mode 100644 vue/primitives/src/listbox/ListboxItemIndicator.vue
 create mode 100644 vue/primitives/src/listbox/ListboxRoot.vue
 create mode 100644 vue/primitives/src/listbox/__test__/Listbox.test.ts
 create mode 100644 vue/primitives/src/listbox/context.ts
 create mode 100644 vue/primitives/src/listbox/index.ts
 create mode 100644 vue/primitives/src/listbox/utils.ts
 create mode 100644 vue/primitives/src/menubar/__test__/Menubar.regression.test.ts
 create mode 100644 vue/primitives/src/navigation-menu/NavigationMenuContent.vue
 create mode 100644 vue/primitives/src/navigation-menu/NavigationMenuContentImpl.vue
 create mode 100644 vue/primitives/src/navigation-menu/NavigationMenuIndicator.vue
 create mode 100644 vue/primitives/src/navigation-menu/NavigationMenuItem.vue
 create mode 100644 vue/primitives/src/navigation-menu/NavigationMenuLink.vue
 create mode 100644 vue/primitives/src/navigation-menu/NavigationMenuList.vue
 create mode 100644 vue/primitives/src/navigation-menu/NavigationMenuRoot.vue
 create mode 100644 vue/primitives/src/navigation-menu/NavigationMenuSub.vue
 create mode 100644 vue/primitives/src/navigation-menu/NavigationMenuTrigger.vue
 create mode 100644 vue/primitives/src/navigation-menu/NavigationMenuViewport.vue
 create mode 100644 vue/primitives/src/navigation-menu/__test__/NavigationMenu.landmark.test.ts
 create mode 100644 vue/primitives/src/navigation-menu/context.ts
 create mode 100644 vue/primitives/src/navigation-menu/index.ts
 create mode 100644 vue/primitives/src/navigation-menu/utils.ts
 create mode 100644 vue/primitives/src/number-field/NumberFieldDecrement.vue
 create mode 100644 vue/primitives/src/number-field/NumberFieldIncrement.vue
 create mode 100644 vue/primitives/src/number-field/NumberFieldInput.vue
 create mode 100644 vue/primitives/src/number-field/NumberFieldRoot.vue
 create mode 100644 vue/primitives/src/number-field/__test__/NumberField.test.ts
 create mode 100644 vue/primitives/src/number-field/context.ts
 create mode 100644 vue/primitives/src/number-field/index.ts
 create mode 100644 vue/primitives/src/pin-input/PinInputInput.vue
 create mode 100644 vue/primitives/src/pin-input/PinInputRoot.vue
 create mode 100644 vue/primitives/src/pin-input/__test__/PinInput.test.ts
 create mode 100644 vue/primitives/src/pin-input/context.ts
 create mode 100644 vue/primitives/src/pin-input/index.ts
 create mode 100644 vue/primitives/src/popover/PopoverAnchor.vue
 create mode 100644 vue/primitives/src/popover/PopoverArrow.vue
 create mode 100644 vue/primitives/src/popover/PopoverClose.vue
 create mode 100644 vue/primitives/src/popover/PopoverContent.vue
 create mode 100644 vue/primitives/src/popover/PopoverContentImpl.vue
 create mode 100644 vue/primitives/src/popover/PopoverContentModal.vue
 create mode 100644 vue/primitives/src/popover/PopoverContentNonModal.vue
 create mode 100644 vue/primitives/src/popover/PopoverPortal.vue
 create mode 100644 vue/primitives/src/popover/PopoverRoot.vue
 create mode 100644 vue/primitives/src/popover/PopoverTrigger.vue
 create mode 100644 vue/primitives/src/popover/__test__/Popover.test.ts
 create mode 100644 vue/primitives/src/popover/__test__/__screenshots__/Popover.test.ts/Popover-closes-on-Escape-key-1.png
 create mode 100644 vue/primitives/src/popover/context.ts
 create mode 100644 vue/primitives/src/popover/index.ts
 create mode 100644 vue/primitives/src/popper/PopperAnchor.vue
 create mode 100644 vue/primitives/src/popper/PopperArrow.vue
 create mode 100644 vue/primitives/src/popper/PopperContent.vue
 create mode 100644 vue/primitives/src/popper/PopperRoot.vue
 create mode 100644 vue/primitives/src/popper/__test__/Popper.test.ts
 create mode 100644 vue/primitives/src/popper/context.ts
 create mode 100644 vue/primitives/src/popper/index.ts
 create mode 100644 vue/primitives/src/popper/utils.ts
 create mode 100644 vue/primitives/src/progress/ProgressIndicator.vue
 create mode 100644 vue/primitives/src/progress/ProgressRoot.vue
 create mode 100644 vue/primitives/src/progress/__test__/Progress.test.ts
 create mode 100644 vue/primitives/src/progress/context.ts
 create mode 100644 vue/primitives/src/progress/index.ts
 create mode 100644 vue/primitives/src/radio-group/RadioGroupIndicator.vue
 create mode 100644 vue/primitives/src/radio-group/RadioGroupItem.vue
 create mode 100644 vue/primitives/src/radio-group/RadioGroupRoot.vue
 create mode 100644 vue/primitives/src/radio-group/__test__/RadioGroup.form.test.ts
 create mode 100644 vue/primitives/src/radio-group/__test__/RadioGroup.test.ts
 create mode 100644 vue/primitives/src/radio-group/__test__/__screenshots__/RadioGroup.form.test.ts/RadioGroup---form-submission-hidden-input-forwards-the-selected-value-into-FormData-on-submit-1.png
 create mode 100644 vue/primitives/src/radio-group/context.ts
 create mode 100644 vue/primitives/src/radio-group/index.ts
 create mode 100644 vue/primitives/src/roving-focus/RovingFocusGroup.vue
 create mode 100644 vue/primitives/src/roving-focus/RovingFocusItem.vue
 create mode 100644 vue/primitives/src/roving-focus/index.ts
 create mode 100644 vue/primitives/src/roving-focus/utils.ts
 create mode 100644 vue/primitives/src/scroll-area/ScrollAreaCorner.vue
 create mode 100644 vue/primitives/src/scroll-area/ScrollAreaRoot.vue
 create mode 100644 vue/primitives/src/scroll-area/ScrollAreaScrollbar.vue
 create mode 100644 vue/primitives/src/scroll-area/ScrollAreaScrollbarAuto.vue
 create mode 100644 vue/primitives/src/scroll-area/ScrollAreaScrollbarHover.vue
 create mode 100644 vue/primitives/src/scroll-area/ScrollAreaScrollbarImpl.vue
 create mode 100644 vue/primitives/src/scroll-area/ScrollAreaScrollbarScroll.vue
 create mode 100644 vue/primitives/src/scroll-area/ScrollAreaScrollbarVisible.vue
 create mode 100644 vue/primitives/src/scroll-area/ScrollAreaThumb.vue
 create mode 100644 vue/primitives/src/scroll-area/ScrollAreaViewport.vue
 create mode 100644 vue/primitives/src/scroll-area/__test__/ScrollArea.a11y.test.ts
 create mode 100644 vue/primitives/src/scroll-area/__test__/ScrollArea.test.ts
 create mode 100644 vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-RTL--ArrowLeft-scrolls-the-horizontal-viewport-forward--visually-reversed--1.png
 create mode 100644 vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-does-not-call-preventDefault-when-scrollbar-is-non-interactive-1.png
 create mode 100644 vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-is-a-no-op-when-content-does-not-overflow-1.png
 create mode 100644 vue/primitives/src/scroll-area/context.ts
 create mode 100644 vue/primitives/src/scroll-area/index.ts
 create mode 100644 vue/primitives/src/scroll-area/types.ts
 create mode 100644 vue/primitives/src/scroll-area/utils.ts
 create mode 100644 vue/primitives/src/select/SelectArrow.vue
 create mode 100644 vue/primitives/src/select/SelectContent.vue
 create mode 100644 vue/primitives/src/select/SelectContentImpl.vue
 create mode 100644 vue/primitives/src/select/SelectGroup.vue
 create mode 100644 vue/primitives/src/select/SelectIcon.vue
 create mode 100644 vue/primitives/src/select/SelectItem.vue
 create mode 100644 vue/primitives/src/select/SelectItemAlignedPosition.vue
 create mode 100644 vue/primitives/src/select/SelectItemIndicator.vue
 create mode 100644 vue/primitives/src/select/SelectItemText.vue
 create mode 100644 vue/primitives/src/select/SelectLabel.vue
 create mode 100644 vue/primitives/src/select/SelectPopperPosition.vue
 create mode 100644 vue/primitives/src/select/SelectPortal.vue
 create mode 100644 vue/primitives/src/select/SelectRoot.vue
 create mode 100644 vue/primitives/src/select/SelectScrollButtonImpl.vue
 create mode 100644 vue/primitives/src/select/SelectScrollDownButton.vue
 create mode 100644 vue/primitives/src/select/SelectScrollUpButton.vue
 create mode 100644 vue/primitives/src/select/SelectSeparator.vue
 create mode 100644 vue/primitives/src/select/SelectTrigger.vue
 create mode 100644 vue/primitives/src/select/SelectValue.vue
 create mode 100644 vue/primitives/src/select/SelectViewport.vue
 create mode 100644 vue/primitives/src/select/context.ts
 create mode 100644 vue/primitives/src/select/index.ts
 create mode 100644 vue/primitives/src/select/utils.ts
 create mode 100644 vue/primitives/src/separator/Separator.vue
 create mode 100644 vue/primitives/src/separator/__test__/Separator.test.ts
 create mode 100644 vue/primitives/src/separator/index.ts
 create mode 100644 vue/primitives/src/slider/SliderRange.vue
 create mode 100644 vue/primitives/src/slider/SliderRoot.vue
 create mode 100644 vue/primitives/src/slider/SliderThumb.vue
 create mode 100644 vue/primitives/src/slider/SliderTrack.vue
 create mode 100644 vue/primitives/src/slider/__test__/Slider.test.ts
 create mode 100644 vue/primitives/src/slider/context.ts
 create mode 100644 vue/primitives/src/slider/index.ts
 create mode 100644 vue/primitives/src/slider/utils.ts
 create mode 100644 vue/primitives/src/stepper/StepperDescription.vue
 create mode 100644 vue/primitives/src/stepper/StepperIndicator.vue
 create mode 100644 vue/primitives/src/stepper/StepperItem.vue
 create mode 100644 vue/primitives/src/stepper/StepperRoot.vue
 create mode 100644 vue/primitives/src/stepper/StepperSeparator.vue
 create mode 100644 vue/primitives/src/stepper/StepperTitle.vue
 create mode 100644 vue/primitives/src/stepper/StepperTrigger.vue
 create mode 100644 vue/primitives/src/stepper/__test__/Stepper.test.ts
 create mode 100644 vue/primitives/src/stepper/context.ts
 create mode 100644 vue/primitives/src/stepper/index.ts
 create mode 100644 vue/primitives/src/switch/Switch.vue
 create mode 100644 vue/primitives/src/switch/__test__/Switch.test.ts
 create mode 100644 vue/primitives/src/switch/index.ts
 create mode 100644 vue/primitives/src/tabs/TabsContent.vue
 create mode 100644 vue/primitives/src/tabs/TabsList.vue
 create mode 100644 vue/primitives/src/tabs/TabsRoot.vue
 create mode 100644 vue/primitives/src/tabs/TabsTrigger.vue
 create mode 100644 vue/primitives/src/tabs/__test__/Tabs.test.ts
 create mode 100644 vue/primitives/src/tabs/context.ts
 create mode 100644 vue/primitives/src/tabs/index.ts
 create mode 100644 vue/primitives/src/tags-input/TagsInputClear.vue
 create mode 100644 vue/primitives/src/tags-input/TagsInputInput.vue
 create mode 100644 vue/primitives/src/tags-input/TagsInputItem.vue
 create mode 100644 vue/primitives/src/tags-input/TagsInputItemDelete.vue
 create mode 100644 vue/primitives/src/tags-input/TagsInputItemText.vue
 create mode 100644 vue/primitives/src/tags-input/TagsInputRoot.vue
 create mode 100644 vue/primitives/src/tags-input/__test__/TagsInput.test.ts
 create mode 100644 vue/primitives/src/tags-input/context.ts
 create mode 100644 vue/primitives/src/tags-input/index.ts
 create mode 100644 vue/primitives/src/teleport/Teleport.vue
 create mode 100644 vue/primitives/src/teleport/__test__/Teleport.test.ts
 create mode 100644 vue/primitives/src/teleport/index.ts
 create mode 100644 vue/primitives/src/toast/ToastAction.vue
 create mode 100644 vue/primitives/src/toast/ToastClose.vue
 create mode 100644 vue/primitives/src/toast/ToastDescription.vue
 create mode 100644 vue/primitives/src/toast/ToastProvider.vue
 create mode 100644 vue/primitives/src/toast/ToastRoot.vue
 create mode 100644 vue/primitives/src/toast/ToastTitle.vue
 create mode 100644 vue/primitives/src/toast/ToastViewport.vue
 create mode 100644 vue/primitives/src/toast/__test__/Toast.regression.test.ts
 create mode 100644 vue/primitives/src/toast/context.ts
 create mode 100644 vue/primitives/src/toast/index.ts
 create mode 100644 vue/primitives/src/toast/utils.ts
 create mode 100644 vue/primitives/src/toggle-group/ToggleGroupItem.vue
 create mode 100644 vue/primitives/src/toggle-group/ToggleGroupRoot.vue
 create mode 100644 vue/primitives/src/toggle-group/__test__/ToggleGroup.test.ts
 create mode 100644 vue/primitives/src/toggle-group/context.ts
 create mode 100644 vue/primitives/src/toggle-group/index.ts
 create mode 100644 vue/primitives/src/toggle/Toggle.vue
 create mode 100644 vue/primitives/src/toggle/__test__/Toggle.test.ts
 create mode 100644 vue/primitives/src/toggle/index.ts
 create mode 100644 vue/primitives/src/toolbar/ToolbarButton.vue
 create mode 100644 vue/primitives/src/toolbar/ToolbarRoot.vue
 create mode 100644 vue/primitives/src/toolbar/ToolbarSeparator.vue
 create mode 100644 vue/primitives/src/toolbar/__test__/Toolbar.test.ts
 create mode 100644 vue/primitives/src/toolbar/context.ts
 create mode 100644 vue/primitives/src/toolbar/index.ts
 create mode 100644 vue/primitives/src/tooltip/TooltipArrow.vue
 create mode 100644 vue/primitives/src/tooltip/TooltipContent.vue
 create mode 100644 vue/primitives/src/tooltip/TooltipContentImpl.vue
 create mode 100644 vue/primitives/src/tooltip/TooltipPortal.vue
 create mode 100644 vue/primitives/src/tooltip/TooltipProvider.vue
 create mode 100644 vue/primitives/src/tooltip/TooltipRoot.vue
 create mode 100644 vue/primitives/src/tooltip/TooltipTrigger.vue
 create mode 100644 vue/primitives/src/tooltip/__test__/Tooltip.test.ts
 create mode 100644 vue/primitives/src/tooltip/context.ts
 create mode 100644 vue/primitives/src/tooltip/index.ts
 create mode 100644 vue/primitives/src/tooltip/utils.ts
 create mode 100644 vue/primitives/src/tree/TreeItem.vue
 create mode 100644 vue/primitives/src/tree/TreeRoot.vue
 create mode 100644 vue/primitives/src/tree/__test__/Tree.test.ts
 create mode 100644 vue/primitives/src/tree/context.ts
 create mode 100644 vue/primitives/src/tree/index.ts
 create mode 100644 vue/primitives/src/tree/utils.ts
 create mode 100644 vue/primitives/src/utils/roving-focus.ts
 create mode 100644 vue/primitives/src/utils/useGraceArea.ts
 create mode 100644 vue/primitives/src/utils/useHideOthers.ts
 create mode 100644 vue/primitives/src/visually-hidden/VisuallyHidden.vue
 create mode 100644 vue/primitives/src/visually-hidden/__test__/VisuallyHidden.test.ts
 create mode 100644 vue/primitives/src/visually-hidden/index.ts
 create mode 100644 vue/primitives/tsconfig.node.json
 create mode 100644 vue/primitives/tsconfig.src.json

diff --git a/vue/primitives/.vitest-attachments/12dbc42b176f989336a161e4f129aeb48944d8d4.png b/vue/primitives/.vitest-attachments/12dbc42b176f989336a161e4f129aeb48944d8d4.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1c5f0892e4109e688d20597df90050b15aaf93f
GIT binary patch
literal 4774
zcmeI0`Bzg{0>^`lP_@Xk=r9F=v36jr3bhEz5+Ze>E)WGP3X-4{5CTTUuq2SExGPXZ
zLD_<!iGYs)iU>&vN)-i7u!Mvq3&;|(kw8d7_IdUnm^pLiN6xuFyz|a^@4olF-_Q4Z
z&%J&iEW~cP({cy|Vz=k#o#7CORVW0qr0<I*;GMFIEkzK>Um<&T1|P~Sm+^6pcQN$t
z*+jH&)wK)D-NSo!o?lz|X4&T55AU0mOLqN>d8fzkQu_UG6Zcd74*DOci6Dt@*^<`-
z?>!?{9oWygbGLO*=@Yi6d*MZ=8{a<WtzvQM{?tv=UqQ=m5)l*_C(tm&ijq>adJ~>C
zY{>FI+;B{1QV<w$V$g?~zWPYY?09#<H{K+x^wRvxD;zsaa<ni*m{Z1|7)DVB{A7n*
zats=NUSY}0T-&XkOtt_b_J1zKNP$*nML?^eGC0>JM~*_G5D)ix(a$X?$0A7klg{%c
ze*SKLXD4V`s^sw}Pno4bIr^q<S1K2Q^YIcuwLI00NLsa3daGzUyYsx&_?x`?yt;G0
zU;C<so~4>X=SZV({%up8JflNZvE#~@L(TEM|13GyoHEpW-#gK~&<*RDuD&UGuk*#V
zBa~W(#WWC!<a0Q_D9)2Edl=0s9dL;v5)?QgRZ>?!_5QwUq6p6U0*U*6-1*dtG1*g=
zdCZ=0BtlQF#3mb{fT$s=rH(Yy?UKQJxTi=ko1YP=pRTcMM9B|`N|1P+Eo|ZCG6(na
zG^QUogKpf-as=7NePVuGldm7_4&wMH7@(W>m3RVsf(OjXE_=6Z<x7}J40n#@N(Kva
zeN%^@S<D9RZXC{FWxM9I#iZqG1UN-Zfytm%_@@}4@smAwO?q{G7Cx1TmDJwFTFasW
zwp6n2ZH^mzb=fD$!dKw6WSA*we)?lSDU_-iMsX=fA;uLCPTcKAFk0IOp6*#sW`Ck_
z<j%e+C(p-7m-<tR64jZ*Nn{|pb>`Z-{CoZw$;G8BR{Bp@4LwcdZjbR8I7~sr*v^al
z6G0Kk3~?yBE?zhBu1G4zETQ;1#d4FWb3GeSF9d}<+;Fm{(hFQR{W+y=s+7wxtK+)!
zL9Y-DGZ_r3Ypbx|)aK*(xE6;x!N`khB4*FMvuo^^_33Gk46kt0eGgWP3PW78R3Ek?
zvu9tk+C)du{k2x<SMy6WTYvB|nY-M~O7N|i!N%hTaDCEdhJvY5<m9L@q}u@=ct%0j
za(ddb3bAU5Pcr*4DJ{&LjYAx$C^i^`76Bw6Vq~}l<>-YlzFk+ah1yjWoa-K1dMM3o
zGnh17iPwv5u1#6O*Akik)ewd$j9VGH58ot~pBaiTk&n*S9|rVqLxRHLN#|Xg`vVB$
z&caM#j#j>a*?4883%1kB_Q|ofW-IJl?+P@(T`eXP1)ybpx#iRC8Gl%SN`Yy;I!-Iy
z-O|z`Zx!MJd1`~lfa!V+=nOW4Kyb{v<jM|03utS1Tq)0*x=+Cl)aP&ebS?T++anDk
zgO4GXpY0h+B<9S246*3B3;~GMI}hTq*Jep1qfW>y^+9Q5LoKr((0ElU8aDze?ME;h
z^|McjCRyY0t|0Slfp&(ED>H21pYF0#hZ__OiwI`XkyKxQROBddEI(2Ccz!^Gt5jXa
zToK6KOw_Z<Q6)EXjI-V3&@xR=WJhylGz`Dc<yPsP7-mh&bWvcr)F9nE_~C&P1U6}@
zQ4A+wKUVJ|6Y+ZR7lSgDqkCrn5M;VmfSbG<iPutvz{}@iT4x$Gp5Kl^n&(PD6H&Np
zaJ(01)WJXG=;z_tpB&chzV$*kRfg2Ib1{T6jYdN>PIzFH;3}IP!nTbi!VE*57p%Q#
z%2&(Hqq+7$%1-MI;}LLZi<<Pyg3zpK&Cv{zS8kIvcInkp?m6btWWE66g}~KUf2;|K
zj0B?BZ9>pq>}?Pv6Y^T6AVkkoj@rGxdvX8)<0zx!&C?;UC~Eqj!BeN7>-C}(oagL{
zlcpVib!nNk&6m?=-)>i23Vq5T&~|WXQ$G8OH`a1%k8bbR6`uKY-Gk%N8@iRh<z!zK
zr|j?uKn=d-<Rf`l6xKd*d!NK5l7cXSE7op>pe1g~t#2=-N78#sya?cfl6A3QcD67u
z4zKIx?a-NBAo|IpfSX(9=mj4XCwtV|?Ig4nLwz(wKo87kOO~SKF<t7<Dsn2FbX!vf
zPlM^je)8b340uH?$IY~<Yd7PK3mntE3nin(gQ>h1O|As9ibzZ!PAYN_t&=;&N@tk?
ziZy;`e?`e$0@7u_Uw5E%=p}Laek3t1_(aZ{jYk@*z6aK}7taH#WFWdGh>R_XvcN0+
zF>h{t1EyW7oF;!hlE5rKT7&(ts$(_}&91!aihWF)0fep?_Ca-e%bI&X#_zSJeMgsU
zIa1*q-E?BtWh~enobPnM?O2%w)`sC@0sa{%3(>$6dA3him!`Dl3&8q8T|ru>^k<3H
zPAn0#!tmM)-;}_1)AwCv!YoE-G_A>f$u9}o=-Pqfk;l&LvRiOGcKW4bhw?HOn}aZp
z+QJ@Bc6#AwZ|-fkk?TDHcM)a^4F)MlQY0{PH6xjxv}sCu2?>5#s#ZuK0QIO}8&+db
zctLm^x*|4UzHf(gB8$reD%uHR^>j^vMn0lliWVFa4i22HlCF4OtVhrhb;bG^oW#3Y
z!!AkV!`vm#7jDoJ9PE_0&pqqtuX{SgU*~oARGwsH4PQ`es7z(HLWwiN>Wo@%`G_p3
zVwG&}J}a9Pba<x2aH_D&5<-!*eQW84nGXu{Qj3O8MWz`_RooN?X~s?&-lq6^LS;$*
z4KDf*g97MS@uBd)^BAUwmO;f0ixUTeyO)2xOPh>+#kUXA3Aq%%xVa1CSL8=6yyfRM
z-uHecUe@cz`|*?+%H?;2i5kh`rjg2dh2ed;Wi~Y6+zQ9oNUS^a=+gw?NK>`dPf+hl
zVfskwpCxmERoaRqnAD%S1Dgz%HuZjU+#4Q-8{>$`90Tdx24eG+>0ggz;I;e=p%3?1
zny4b<b08Oazy(vKzjaoMkq<nP9Y&}ki^Z;usF#40KbQ+r&{Qj7M&(`;sq9o#^RIhc
z(m+O5uG!YOk~(^E1zy*S^zH0@$#|opWKVAJPI$k~yfBW!iT`-CS_9@?awa918tw+g
z&V!A9uy;W~$60hNg6rlJzkhmt6ZJFtJQRVG>gAy#)9rT8vCm;uTFoNDEW9)pa8wVH
zz?gsJ1%Q#RL5sJ57=3O7JLTCv0U1u@aPF*+NWO+(;7#ia0-H~MtZs_y=6p}@K{m#|
z<h7-t+a`-ah!Vg(4G5aQ>b*DU?--TQCev?0M56-$P&|pw>W$71(obWgoPnh0Q8&PP
z6SS;y`yqCFMV<vrh$zvRXUD=Pu%;<7R1L^V8@P{g8l9{Hb}MFJ=;3Fzt_IMP`ZH1v
z0PaYV_{Fq+dAbqdKjPKx<lP@)&Is7KQx$A)Lagolom7i!L%p)te_3njM5xGazw_v1
zO}BYQJ^O*hGtvk`gk9rR@x8M{btDg-X|zbaEtS`4GuU;Gm#KY2^0*b)sMYn`LsNcc
z8A~?w<?_5%&*`i&Z^>zkV^M)c1r`-pRN#MApf<1+2_6i<Kc59G#_6I0{|^PUFz}Gc
lVv&vbHG>y6pRHvLxvl#Pgb>bh0`EZf><Zi2@Kfx?e*>s4FX{jQ

literal 0
HcmV?d00001

diff --git a/vue/primitives/AGENTS.md b/vue/primitives/AGENTS.md
new file mode 100644
index 0000000..c57db2b
--- /dev/null
+++ b/vue/primitives/AGENTS.md
@@ -0,0 +1,447 @@
+# AGENTS.md — UI Primitives
+
+Руководство по работе с UI-пакетом примитивов. Описывает правила создания **новых компонентов** и **доработки существующих**. Применимо только к этому пакету (`vue/primitives/`).
+
+> Прочитай этот файл **до** того, как трогать код в `src/`.
+
+---
+
+## 0. Tooling и команды
+
+- **Менеджер пакетов:** `pnpm` (workspaces + catalogs).
+- **Линтер и форматтер:** `eslint` (flat config, пресеты `@robonen/eslint`). Prettier/Biome не использовать.
+- **Сборка:** `tsdown`.
+- **Тесты:** `vitest` (jsdom + browser mode на `@vitest/browser-playwright` + Chromium).
+
+```bash
+pnpm exec vitest run                # jsdom-сьют
+pnpm exec vitest run src/<name>     # один компонент
+pnpm run test:browser               # browser mode (Playwright)
+pnpm exec tsdown                    # сборка ESM + CJS + .d.ts
+pnpm lint:check / pnpm lint:fix     # eslint
+```
+
+---
+
+## 1. Структура пакета
+
+```
+src/
+  <component>/                # kebab-case
+    <Component>Root.vue       # PascalCase, корневой провайдер контекста
+    <Component><Part>.vue     # части (Trigger / Content / Item / Indicator…)
+    context.ts                # фабрика + типы контекста
+    index.ts                  # барель
+    __test__/
+      <Component>.test.ts     # jsdom-тесты
+      <Component>.browser.test.ts   # опционально, если нужен реальный браузер
+  utils/                      # общие хелперы (roving-focus, getRawChildren …)
+  primitive/                  # polymorphic <Primitive :as="…">
+  index.ts                    # реэкспорт всех компонентов
+```
+
+**Правила структуры:**
+
+- Каждый примитив = отдельная папка. Никаких «всё в одном файле».
+- Имя папки — `kebab-case`, файлы — `PascalCase.vue`.
+- Корневой компонент **обязан** называться `<Name>Root.vue` и быть провайдером контекста.
+- Никаких циклических зависимостей между примитивами. Общий код — в `src/utils/`.
+- `index.ts` примитива экспортирует **все** компоненты + контекст-хук + типы.
+- После создания примитива добавь `export * from './<name>';` в `src/index.ts`.
+
+---
+
+## 2. Нейминг и data-атрибуты
+
+В коде, комментариях, доках, тестах и коммитах **не должно быть имён сторонних UI-библиотек** и внутренних кодовых названий бренда/форка. Описывай компоненты через их роль (`dialog`, `radio-group`, `spinbutton`) и паттерн (`roving-focus`, `dismissable-layer`).
+
+| Артефакт | Формат |
+|---|---|
+| Имя контекста | `'<component>'` — аргумент в `useContextFactory('<component>')` |
+| ID-префикс | `'<component>-<part>'` — аргумент в `useId(undefined, '<component>-<part>')` |
+| Data-атрибуты состояния | `data-state`, `data-disabled`, `data-orientation`, `data-side`, `data-align` |
+
+`data-state` — каноническое отражение состояния:
+- toggle/checkbox: `"checked" | "unchecked" | "indeterminate"`
+- collapsible/dialog/popover: `"open" | "closed"`
+- progress: `"complete" | "loading" | "indeterminate"`
+
+Любая интерактивная часть с `disabled` получает `data-disabled=""` (без значения), чтобы CSS-селектор `[data-disabled]` работал одинаково.
+
+---
+
+## 3. Архитектурные паттерны
+
+### 3.1. Контекст — только через фабрику
+
+**Ручные `Symbol`, `InjectionKey`, `provide()`/`inject()` в коде примитивов запрещены.** Контекст создаётся **только** через `useContextFactory` из тулкита. Фабрика:
+
+- единообразно генерирует ключ (`Symbol(name)` внутри неё),
+- типизирует `provide` и `inject` одним generic-аргументом,
+- бросает консистентную ошибку, если `inject` делается без предка-провайдера,
+- поддерживает `appProvide(app)` для глобальных провайдеров (config, dir, и т.п.).
+
+```ts
+// context.ts
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '<toolkit>';
+
+export interface FooContext {
+  open: Ref<boolean>;
+  disabled: ComputedRef<boolean>;
+  onToggle: () => void;
+}
+
+export const {
+  inject: useFooContext,
+  provide: provideFooContext,
+} = useContextFactory<FooContext>('foo');
+```
+
+```ts
+// FooRoot.vue
+provideFooContext({ open, disabled, onToggle });
+
+// FooTrigger.vue
+const ctx = useFooContext();            // кидает, если нет <FooRoot>
+const ctx = useFooContext(fallback);    // опционально: дефолт без ошибки
+```
+
+**Правила:**
+
+- Никаких ручных `Symbol(...)` / `InjectionKey<...>` в папке примитива.
+- Имя фабрики описательное (`'foo'`, `'foo-item'`, `'dialog'`), без префиксов брендов.
+- Контекст хранит **`Ref` / `ComputedRef`** для реактивных полей и **функции** для действий. Не передавай голые значения — потеряешь реактивность у потребителей.
+- Для per-item данных (например, `RadioGroupIndicator` смотрит на свой `RadioGroupItem`) создавай **item sub-context** отдельной фабрикой (`useContextFactory<ItemCtx>('foo-item')`). Не ходи по DOM ради `data-*`.
+- Контекст-хук и типы экспортируются из `index.ts` примитива.
+
+### 3.2. v-model: продвинутая работа с `defineModel`
+
+`defineModel` — первичный инструмент для любой двусторонней связи со state. Используем его продвинутые возможности.
+
+#### 3.2.1. Контролируемый + неконтролируемый режим через get/set
+
+Вместо ручного `ref + computed`-обёртки используй **`defineModel({ get, set })`** — встроенный способ навесить преобразование/нормализацию прямо на модель:
+
+```ts
+interface Props {
+  defaultOpen?: boolean;
+}
+const { defaultOpen = false } = defineProps<Props>();
+const local = ref<boolean>(defaultOpen);
+
+const open = defineModel<boolean>('open', {
+  // когда родитель не связал v-model — читаем локальный стейт
+  get: (external) => external ?? local.value,
+  // пишем и наружу (emit), и в локальный стейт
+  set: (value) => {
+    local.value = value;
+    return value;
+  },
+});
+```
+
+- Если `v-model` не привязан снаружи — `defineModel` эмитит `update:open` в пустоту, а локальный ref обеспечивает работу компонента. Это и есть «uncontrolled» режим.
+- Если привязан — родитель writable source of truth, локальный ref просто зеркалит его через `get`.
+- Никаких отдельных `computed({ get, set })` поверх `defineModel` — всё делается в одном месте.
+
+#### 3.2.2. Модификаторы v-model
+
+Поддерживай пользовательские модификаторы, если это осмысленно для примитива (`trim`, `lazy`, `number`, кастомные):
+
+```ts
+const [model, modifiers] = defineModel<string>({
+  set: (value) => (modifiers.trim ? value.trim() : value),
+});
+```
+
+Любой кастомный модификатор документируется в README примитива.
+
+#### 3.2.3. Нормализация union-значений
+
+Для union-типов (`string | string[]`, `number | null`, …) ставь преобразование в `set`, а наружу эмить нормализованный вид. Если Vue не может вывести тип модели или теряет записи — **fallback: explicit `modelValue` prop + `emit('update:modelValue', …)` + `watch(() => props.modelValue, …)`**:
+
+```ts
+interface Props { modelValue?: string | string[] }
+const props = withDefaults(defineProps<Props>(), { modelValue: undefined });
+const emit = defineEmits<{ 'update:modelValue': [v: string[] | string | undefined] }>();
+
+const local = shallowRef<string[]>(normalize(props.modelValue));
+watch(() => props.modelValue, (v) => { local.value = normalize(v); });
+
+function commit(next: string[]) {
+  local.value = next;
+  emit('update:modelValue', serialize(next));
+}
+```
+
+Это обход, а не правило — **сначала попробуй `defineModel({ get, set })`**.
+
+### 3.3. Продвинутая реактивность
+
+Используй реактивность по полной — она бесплатная и устраняет ручной оркестр watch-ей.
+
+| Задача | Инструмент |
+|---|---|
+| Ссылка на элемент шаблона | `useTemplateRef('name')` (Vue 3.5+), не `ref<HTMLElement>()` |
+| Развернуть `MaybeRef<T>` | `toValue(source)` — работает и с функциями, и с refs |
+| Реактивное значение из пропса | `toRef(() => props.foo)` (getter-форма, не строковая) |
+| Большой список/мап, не нужна глубокая реактивность | `shallowRef` / `shallowReactive` |
+| Гонки с внешним state | `watchSyncEffect` / `watch(..., { flush: 'sync' })` (осторожно) |
+| «Один раз при создании» | `computed` с кэшированием, **не** вызов функции в template |
+| Escape-hatch от трекинга | `markRaw`, `readonly`, `customRef` (если реально нужен дебаунс/throttle) |
+| Очистка эффектов у регистров | `effectScope` + `onScopeDispose`, не `onBeforeUnmount` в циклах |
+| DOM-измерения при ресайзе/скролле | `useResizeObserver`, `useEventListener`, `useMutationObserver` |
+
+Типовые практики:
+
+- **Props через getter.** `watch(() => props.value, …)` и `toRef(() => props.value)` — не деструктурируй пропсы в локальные переменные (сломаешь реактивность).
+- **Computed для derived state.** Любой `data-state` / `aria-*` / классовая строка — `computed`, не вычисление в `<template>`.
+- **Effect scope для регистров.** Если корень хранит массив дочерних элементов (`items: Ref<HTMLElement[]>`), регистрация/снятие идёт через пару `register(el) + onScopeDispose(() => unregister(el))` в child — scope снимет подписку автоматически при размонтировании ветки.
+- **`watch` с `immediate: true`** — когда sync-реакция нужна сразу; иначе первая синхронизация делается отдельно.
+- **`watchEffect` vs `watch`.** `watchEffect` — для реактивных деревьев без явного источника; `watch` — когда важна старая-новая пара и источник известен.
+- **`shallowRef` для ссылок на массивы/объекты**, которые меняются целиком (replace), — меньше лишних триггеров.
+
+### 3.4. Roving focus
+
+Для коллекций фокусируемых элементов (Toolbar, RadioGroup, ToggleGroup, NavigationMenu …) используй `src/utils/roving-focus.ts`:
+
+- `rovingKeyToAction(event, { orientation, dir, loop })` → `{ delta, absolute? } | null`
+- `resolveNextIndex(current, delta, count, loop)` — wrap-or-clamp
+
+Items сами регистрируются в Root через item sub-context (`useContextFactory`). Root хранит `Ref<HTMLElement[]>` и `activeIndex`. Фильтрация disabled:
+
+```ts
+const enabled = items.value.filter(x => !x.hasAttribute('data-disabled'));
+```
+
+`tabindex`: активный/выбранный = `0`, остальные = `-1`.
+
+### 3.5. ID и ARIA
+
+- ID генерируй через `useId(undefined, '<component>-<part>')` из тулкита. Один ID — один reactive ref.
+- Роли — по WAI-ARIA APG (`role="dialog"`, `role="radiogroup"`, `role="spinbutton"`, …).
+- `Title` / `Description` регистрируют свой ID в контексте Root; Root прокидывает их в `aria-labelledby` / `aria-describedby` контента.
+
+### 3.6. Slots, polymorphism, forwarding
+
+- Корень обычно не рендерит DOM, кроме `<slot>` со scope-параметрами:
+  ```vue
+  <template><slot :open="open" :close="() => open = false" /></template>
+  ```
+- **`Primitive` из `src/primitive/`** — базовый polymorphic-рендерер. Любая часть, рендерящая DOM, обязана прокидывать `as` через `Primitive`, а не рендерить тег напрямую. `as="template"` включает режим slot-merging (merged props + один дочерний элемент из слота — аналог `asChild`).
+- **Доступ к элементу + проброс ref** — `useForwardExpose` из тулкита. Он даёт `{ forwardRef, currentElement }`: `forwardRef` привязывается к `Primitive` (`:ref="forwardRef"`), `currentElement` — реактивный `Ref<HTMLElement>`, работает даже при `as="template"` и условных рендерах (`v-if`/`v-else`).
+- **`inheritAttrs: false`** на Root (через `defineOptions`), если Root не рендерит DOM — attrs не должны утекать на `<slot>`.
+- **Минимум DOM:** не оборачивай контент лишними `<div>`-обёртками.
+
+### 3.7. Утилиты — выноси, а не копируй
+
+Паттерн повторяется в ≥2 примитивах → в `src/utils/`. Уже доступно:
+
+- `roving-focus.ts` — клавиатурная навигация по коллекции
+- `getRawChildren.ts` — VNode walk для slotted children
+
+Не дублируй helper'ы внутри папок примитивов.
+
+### 3.8. Composition-слои внутри одного примитива
+
+Сложные примитивы (Dialog / Popover / Select) разбиваются на слои композиции, а не ветвятся внутри одного компонента.
+
+- **`<Name>Content.vue`** — публичный wrapper: решает, какой внутренний импл рендерить на основе `modal`/`nonModal`/`forceMount`.
+- **`<Name>ContentImpl.vue`** — общая часть (focus scope, dismiss layer, ариа-связки).
+- **`<Name>ContentModal.vue` / `<Name>ContentNonModal.vue`** — ветки, отличающиеся только scroll-lock / `aria-hidden` соседей / трап фокуса.
+- **`<Name>Overlay.vue` + `<Name>OverlayImpl.vue`** — такая же пара, если overlay нужен только в модальном режиме.
+
+Результат: каждый файл плоский, без `v-if`-деревьев веток по режиму, и легко тестируется по отдельности.
+
+### 3.9. Ordered collection вместо ручного реестра
+
+Когда порядок элементов важен (roving focus, typeahead, indexOf), **не держи ручной `items: Ref<HTMLElement[]>` с push/splice** — порядок ломается при перепаковке детей. Используй паттерн:
+
+1. Каждый item выставляет дата-атрибут (например `data-collection-item=""`).
+2. `itemMap: Ref<Map<HTMLElement, ItemData>>` в контексте — регистрация через `watchEffect(cleanup)` в child:
+   ```ts
+   watchEffect((onCleanup) => {
+     const el = currentElement.value
+     if (!el) return
+     const key = markRaw(el)
+     ctx.itemMap.value.set(key, { ref: el, value: props.value })
+     onCleanup(() => ctx.itemMap.value.delete(key))
+   })
+   ```
+3. `getItems()` считывает текущий DOM-порядок через `querySelectorAll('[data-collection-item]')` и сортирует значения мапы по `indexOf`.
+4. `markRaw(el)` обязательно — иначе Vue сделает DOM-узел реактивным и сломает производительность.
+
+### 3.10. Presence и анимации выхода
+
+Для любого примитива, у которого часть может иметь exit-анимацию (Dialog.Content, Collapsible.Content, Popover.Content, …) рендер идёт через `Presence` из `src/presence/`:
+
+- `<Presence :present="open">` монтирует слот при `present=true` и удерживает его, пока CSS-анимация не завершилась после `present=false`.
+- Пропс `forceMount` — обязательный escape-hatch, для случаев, когда пользователь хочет держать DOM в дереве принудительно (например, для measurement).
+- Императивный малый FSM для состояний `mounted` / `unmountSuspended` / `unmounted` — через `useStateMachine` (если добавим) или локально, но кратко и декларативно.
+
+### 3.11. Single-or-multiple абстракция
+
+Компоненты типа `Accordion` / `ToggleGroup` / `Combobox`, поддерживающие оба режима, делают это **через единый хелпер**, а не двумя ветками. Правила:
+
+- Тип выводится из фактического `modelValue`/`defaultValue` (`Array` → multiple, иначе single).
+- Явный `type="single" | "multiple"` перекрывает вывод, но если значение конфликтует — логируем warning и следуем типу значения.
+- Единая функция `change(v)`: в single — переключает/сбрасывает; в multiple — добавляет/удаляет из массива.
+- Сравнение значений — через deep equality (`ohash.isEqual` или аналог), а не `===`, иначе объектные значения не будут тоглиться.
+
+### 3.12. Shared composables для глобальных стеков
+
+Состояния уровня документа (scroll-lock, focus-scope stack, dismissable-layer stack, aria-hide других узлов) должны быть **одним экземпляром на приложение**, иначе два Dialog'а записывают `overflow: hidden` поверх друг друга и теряют исходное значение.
+
+- Используй `createSharedComposable` (VueUse) для таких хелперов.
+- Храни внутри counter / Map по ID лайера — фактический lock/hide включается, пока хотя бы один потребитель активен.
+- Снимай побочные эффекты на эффект-скоупе последнего подписчика, не в `onBeforeUnmount` каждой копии.
+- SSR: все такие композаблы guards'ят на `isClient` / `typeof document !== 'undefined'`.
+
+### 3.13. ConfigProvider и глобальные настройки
+
+Всё, что логично задавать раз на дерево (направление `dir`, кастомный `useId`, `nonce` для CSP, `scrollBody` конфиг), живёт в `ConfigProvider`. Правила:
+
+- Примитив читает такие настройки через `inject` с **фолбэком-дефолтом** (`inject(fallback)`), а не бросает, если provider не стоит.
+- Личный проп на Root перекрывает глобальную настройку (локальный `dir` на Popover > глобальный `dir`).
+- `useId` из тулкита уже учитывает `ConfigProvider.useId` — не дублируй логику внутри компонента.
+
+### 3.14. Focus и dismiss — всегда через примитивы, не ручной код
+
+- **`FocusScope`** — любой modal/popover/menu оборачивает `Content` в `FocusScope` с `trapped` и/или `loop`. Ручный trap-код в компоненте запрещён.
+- **`DismissableLayer`** — все escape/pointer-outside/focus-outside диспетчеры идут через этот компонент и его stack — иначе вложенный Popover закроет оба уровня по Esc.
+- **`FocusGuards` / visually-hidden sentinel'ы** — в краях portaled-контента, чтобы tab не убегал в URL-бар браузера.
+- **`useHideOthers`** (aria-hidden соседних деревьев) — для modal-Content, чтобы screen reader не уходил за пределы.
+
+---
+
+## 4. Стиль кода (eslint + @stylistic)
+
+- Всегда `<script setup lang="ts">`. Composition API. Options API запрещён.
+- Отдельный `<script lang="ts">` блок допускается **только** для экспорта типов/интерфейсов пропсов наружу.
+- Импорты типов — через `import type { … }`.
+- Не пиши docstring/комментарии к коду, который не меняешь. Не добавляй type-аннотации сверх необходимого.
+- Не добавляй ненужный error handling «на всякий случай» — валидируй только на границах (props, входные DOM events).
+- Без default exports в `.ts`. В `.vue` — только дефолтный экспорт компонента (через `<script setup>`).
+
+После любых правок: `pnpm lint:fix`.
+
+---
+
+## 5. Тесты
+
+### 5.1. Структура
+
+- jsdom-тесты: `src/<component>/__test__/<Component>.test.ts`.
+- `@vue/test-utils` (`mount`) + `vitest`.
+- Требуется реальный focus-менеджмент / pointer events / scroll-lock / `inert` / IntersectionObserver → добавь browser-сьют.
+
+### 5.2. Минимум сценариев для нового примитива
+
+1. Корректный ARIA-каркас (`role`, `aria-*`, `data-state`).
+2. Контролируемый режим (`v-model` обновляется → DOM реагирует).
+3. Неконтролируемый режим (`default*` пропс задаёт начальное состояние).
+4. Все интерактивные действия (click / keyboard).
+5. Клавиатура: Enter/Space/Arrow*/Home/End/Esc — в зависимости от паттерна.
+6. `disabled` блокирует мутации.
+7. Edge-cases: пустые массивы, null, экстремальные min/max.
+8. Модификаторы v-model, если поддерживаются (`trim`, кастомные).
+
+### 5.3. Хелперы и гочи jsdom
+
+```ts
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+// jsdom: DataTransfer не определён — стабь clipboardData вручную:
+const event = new Event('paste', { bubbles: true, cancelable: true }) as unknown as ClipboardEvent;
+Object.defineProperty(event, 'clipboardData', { value: { getData: () => 'text' } });
+```
+
+- Всегда `attachTo: document.body`, иначе focus-тесты ломаются.
+- После каждого теста `wrapper.unmount()`.
+- `await nextTick()` после программных мутаций перед assert'ом.
+- Не используй `vi.useFakeTimers()` без необходимости.
+
+### 5.4. Browser mode
+
+- Файл: `src/<component>/__test__/<Component>.browser.test.ts`.
+- Запуск: `pnpm run test:browser`.
+- Перед коммитом прогоняй оба сьюта, если затронут focus/inert/scroll.
+
+---
+
+## 6. Workflow для нового примитива
+
+1. **Спецификация.** WAI-ARIA APG для паттерна — единственный источник истины по ARIA/клавиатуре.
+2. **Скаффолдинг папки** (`<name>/context.ts`, `<Name>Root.vue`, парты, `__test__/`, `index.ts`).
+3. **Контекст** через `useContextFactory` — сначала определи поля и действия, потом пиши компоненты.
+4. **Root** — модель состояния (`defineModel` с `get/set` или fallback-паттерн), `provide*Context`.
+5. **Parts** — каждая часть тонкая, без дублирующего state.
+6. **Тесты** пиши параллельно с кодом, не «потом».
+7. **Регистрация в `src/index.ts`.**
+8. **Локальный прогон:** `pnpm exec vitest run src/<name>` → 0 fail.
+9. **Полный прогон:** `pnpm exec vitest run` (+ `test:browser` при необходимости).
+10. **Сборка:** `pnpm exec tsdown` — проверь, что bundle не вырос аномально и `.d.ts` валиден.
+11. **Линт:** `pnpm lint:fix`.
+12. **Обнови session-память** (`/memories/session/progress-log.md`), если идёт многошаговая работа.
+
+---
+
+## 7. Доработка существующего компонента
+
+- **Не ломай публичный API без миграции.** Имена пропсов/событий/контекстных полей — semver'но значимы.
+- **Не добавляй фичи «попутно».** Меняй только то, что просили.
+- **Сначала прочитай тесты** — они описывают контракт.
+- **Расширил поведение → добавь тест.** Любое новое условие/ветка покрывается.
+- **Удалил поведение → удали тест** и упомяни в PR-описании.
+- **Баг в shared-утилите** (`utils/roving-focus`, `utils/getRawChildren`) — фикси в утилите, а не локально.
+- **Регрессии:** при правке логики прогоняй **весь** sweep пакета.
+
+---
+
+## 8. Что **не** делать
+
+- ❌ Тянуть внешние UI-зависимости (Radix, Headless UI, Ark, floating-vue, …). Все примитивы — свои.
+- ❌ Создавать `Symbol(...)` / `InjectionKey<...>` вручную в папке примитива — только `useContextFactory`.
+- ❌ Вызывать `provide()` / `inject()` из `vue` напрямую — только через `useContextFactory`.
+- ❌ Писать имена сторонних UI-библиотек и внутренние кодовые имена бренда/форка в коде/доках/тестах.
+- ❌ Деструктурировать пропсы в переменные (теряется реактивность); используй getter-форму и `toRef(() => props.x)`.
+- ❌ Дублировать стейт между `defineModel` и локальным ref — используй `get/set` на модели.
+- ❌ Класть бизнес-логику в `<template>` — выноси в `computed` / функции.
+- ❌ Полагаться на DOM-walk для чтения данных у соседей — используй context / sub-context.
+- ❌ `pnpm install <pkg>` без согласования: новые рантайм-зависимости должны проходить через catalog.
+- ❌ Создавать markdown-документацию по компоненту без запроса.
+- ❌ `git push --force`, `git reset --hard`, удалять файлы без подтверждения.
+- ❌ `--no-verify` и обход pre-commit хуков.
+
+---
+
+## 9. Memory-протокол для агентов
+
+- Большая задача (≥3 шага) — план в `/memories/session/plan.md`.
+- Этап завершён — прогресс в `/memories/session/progress-log.md`.
+- Repo-факты, верифицированные на практике (команды, версии, гочи) — в `/memories/repo/`.
+- Встретил гочу, которая проявится снова — добавь её в этот `AGENTS.md` (§3 или §5.3).
+
+---
+
+## 10. Чеклист перед PR
+
+- [ ] Папка примитива оформлена по §1.
+- [ ] Контекст только через `useContextFactory`, 0 ручных `Symbol` / `InjectionKey`.
+- [ ] v-model через `defineModel({ get, set })` (или обоснованный fallback по §3.2.3).
+- [ ] Реактивность: `toValue` / `toRef(() => props.x)` / `useTemplateRef` вместо ручных паттернов.
+- [ ] Полиморфизм через `Primitive` + `useForwardExpose`, не ручные teg-свитчи.
+- [ ] Для анимируемых частей (Content/Overlay) использован `Presence`.
+- [ ] Modal/popover-примитивы завёрнуты в `FocusScope` + `DismissableLayer`, не ручные листенеры.
+- [ ] Глобальные стеки (scroll-lock, hide-others, focus-stack) — через shared composables, 0 дублирующегося state.
+- [ ] Roving-focus через `src/utils/roving-focus.ts`, если применимо.
+- [ ] ARIA-роли и `data-state` — соответствуют APG.
+- [ ] Тесты: минимум из §5.2, всё зелёное.
+- [ ] Browser-сьют не сломан (если затронут focus/inert/scroll).
+- [ ] `pnpm exec tsdown` собирается, `.d.ts` валиден.
+- [ ] `pnpm lint:fix` без diff'а.
+- [ ] Никаких имён сторонних UI-либ и внутренних кодовых имён бренда.
+- [ ] `src/index.ts` обновлён.
diff --git a/vue/primitives/REKA_COMPARISON.md b/vue/primitives/REKA_COMPARISON.md
new file mode 100644
index 0000000..fdd03b2
--- /dev/null
+++ b/vue/primitives/REKA_COMPARISON.md
@@ -0,0 +1,2056 @@
+# @robonen/primitives vs reka-ui v2.9.7 — full comparison
+
+> Generated by a 50-primitive fan-out: each primitive compared file-by-file against its reka-ui analogue, every claimed gap re-checked by an independent adversarial verifier.
+
+## Headline
+
+- **50 primitives** compared (every exported primitive; `command` has no reka analogue and was compared vs Combobox/Listbox).
+- **0 primitives are strictly better than reka today.** Verdicts: **11 reka-better**, **39 robonen-better-with-gaps**, **0 robonen-strictly-better**.
+- Across all primitives the comparison raised **463 gaps**; the adversarial verifier **confirmed 430, downgraded 30 to partial, refuted 3** (~93% confirmed, 0.6% false-positive).
+- So robonen is competitive/close everywhere but **reka currently wins or ties on features in every single primitive** — to hit "better in everything" each list below must be cleared.
+
+**3 refuted false-positives (ignore these):** dialog content-ref forwarding (robonen has it via `useForwardExpose`); popper `SIDE_OPTIONS`/`ALIGN_OPTIONS` runtime export (reka doesn't export them either); popper imperative `update` (reka destructures but never uses it).
+
+## Ranking — most work needed first
+
+| Primitive | Verdict | Gaps (C/M/m) | Verifier (conf/part/ref) | robonen wins |
+|---|---|---|---|---|
+| **toast** | reka better | 3/9/7 | 19/0/0 | 4 |
+| **date-picker** | reka better | 3/5/4 | 12/0/0 | 6 |
+| **select** | reka better | 2/9/6 | 17/0/0 | 3 |
+| **menu** | reka better | 2/8/8 | 18/0/0 | 4 |
+| **tabs** | reka better | 2/4/6 | 11/1/0 | 5 |
+| **toolbar** | reka better | 1/5/7 | 12/1/0 | 4 |
+| **checkbox** | reka better | 1/4/6 | 11/0/0 | 3 |
+| **toggle-group** | reka better | 1/4/6 | 11/0/0 | 4 |
+| **number-field** | reka better | 0/11/6 | 15/2/0 | 5 |
+| **radio-group** | reka better | 0/7/9 | 15/1/0 | 5 |
+| **aspect-ratio** | reka better | 0/4/2 | 6/0/0 | 3 |
+| **scroll-area** | better with gaps | 2/3/7 | 12/0/0 | 7 |
+| **dropdown-menu** | better with gaps | 1/5/6 | 11/1/0 | 3 |
+| **tree** | better with gaps | 1/5/6 | 11/1/0 | 7 |
+| **popover** | better with gaps | 1/4/3 | 8/0/0 | 6 |
+| **menubar** | better with gaps | 1/3/7 | 10/1/0 | 5 |
+| **accordion** | better with gaps | 1/3/6 | 9/1/0 | 5 |
+| **editable** | better with gaps | 1/3/4 | 7/1/0 | 6 |
+| **tooltip** | better with gaps | 1/3/2 | 6/0/0 | 5 |
+| **pin-input** | better with gaps | 1/2/10 | 12/1/0 | 6 |
+| **collapsible** | better with gaps | 1/2/5 | 8/0/0 | 5 |
+| **primitive** | better with gaps | 1/2/5 | 6/2/0 | 5 |
+| **hover-card** | better with gaps | 1/2/4 | 6/1/0 | 7 |
+| **tags-input** | better with gaps | 1/2/3 | 6/0/0 | 6 |
+| **roving-focus** | better with gaps | 1/1/1 | 3/0/0 | 5 |
+| **collection** | better with gaps | 1/0/1 | 2/0/0 | 5 |
+| **dismissable-layer** | better with gaps | 0/7/4 | 11/0/0 | 5 |
+| **navigation-menu** | better with gaps | 0/7/4 | 11/0/0 | 6 |
+| **listbox** | better with gaps | 0/6/4 | 10/0/0 | 7 |
+| **calendar** | better with gaps | 0/5/8 | 13/0/0 | 7 |
+| **dialog** | better with gaps | 0/5/6 | 9/1/1 | 6 |
+| **combobox** | better with gaps | 0/4/14 | 16/2/0 | 8 |
+| **context-menu** | better with gaps | 0/4/10 | 12/2/0 | 4 |
+| **slider** | better with gaps | 0/4/5 | 6/3/0 | 7 |
+| **stepper** | better with gaps | 0/4/4 | 7/1/0 | 6 |
+| **config-provider** | better with gaps | 0/4/3 | 7/0/0 | 6 |
+| **avatar** | better with gaps | 0/3/5 | 8/0/0 | 6 |
+| **visually-hidden** | better with gaps | 0/3/5 | 8/0/0 | 4 |
+| **alert-dialog** | better with gaps | 0/2/5 | 7/0/0 | 4 |
+| **toggle** | better with gaps | 0/2/4 | 6/0/0 | 5 |
+| **focus-scope** | better with gaps | 0/2/2 | 4/0/0 | 4 |
+| **progress** | better with gaps | 0/2/2 | 4/0/0 | 5 |
+| **command** | better with gaps | 0/1/12 | 12/1/0 | 6 |
+| **popper** | better with gaps | 0/1/6 | 4/1/2 | 6 |
+| **label** | better with gaps | 0/1/4 | 4/1/0 | 4 |
+| **separator** | better with gaps | 0/0/5 | 4/1/0 | 4 |
+| **pagination** | better with gaps | 0/0/4 | 3/1/0 | 6 |
+| **teleport** | better with gaps | 0/0/2 | 0/2/0 | 6 |
+| **presence** | better with gaps | 0/0/0 | 0/0/0 | 5 |
+| **switch** | better with gaps | 0/0/0 | 0/0/0 | 5 |
+
+---
+## Per-primitive detail
+
+### toast  —  _reka-better_
+
+**Parts reka has that robonen lacks:** ToastPortal, ToastRootImpl (impl split from ToastRoot), ToastAnnounce (visually-hidden live region), ToastAnnounceExclude, FocusProxy (head/tail focus sentinels)
+
+robonen's toast is a clean but heavily reduced reimplementation of Radix/reka toast. It correctly covers the basics — provider/viewport/root/title/description/action/close parts, polite/assertive aria-live, a label region, hotkey-to-focus (with two genuinely better bug fixes vs reka: empty-hotkey guard and reactive-duration timer restart, both regression-tested), and pause/resume on hover/focus. However it is missing most of the hard parts that make a toast accessible and production-grade: there is NO swipe-to-dismiss at all (the swipeDirection/swipeThreshold props are declared but never used — dead API), NO dedicated screen-reader announce region (ToastAnnounce/ToastAnnounceExclude with deferred double-rAF text harvesting), NO focus-order management or FocusProxy guards for the portaled viewport, NO Teleport/Collection so toasts can't be authored outside the viewport, NO focus return on close, NO elapsed-time-preserving pause (it restarts the full duration so hovering resets the countdown), NO remaining/duration slot props, NO forceMount/defaultOpen, NO DismissableLayer integration, NO window blur/focus pause, and a weaker Escape story (escapeKeyDown is emitted but never closes, and isFocusedToastEscapeKeyDownRef is dead). reka also has ToastPortal, type='button' on close, label {hotkey} interpolation, and author-error validation. Net: reka is currently materially better on accessibility, keyboard/focus, and features. The good news is robonen already ships the supporting primitives (collection, dismissable-layer, visually-hidden, focus-scope, teleport, presence), so every gap is implementable.
+
+**Critical gaps:**
+- ⛔ (features) No swipe-to-dismiss gesture support at all. reka implements full pointer swipe handling on the toast: pointerdown/pointermove/pointerup with direction clamping, threshold detection, pointer capture, and emits swipeStart/swipeMove/swipeCancel/swipeEnd, plus sets data-swipe and --reka-toast-swipe-move-x/y / --reka-toast-swipe-end-x/y CSS vars for animation.
+  - _evidence:_ reka ToastRootImpl.vue pointerdown/pointermove/pointerup handlers (lines 218-280) + ToastRoot.vue swipe emit wrappers (lines 69-108) + utils.ts isDeltaInDirection/handleAndDispatchCustomEvent/SwipeEvent. robonen declares swipeDirection/swipeThreshold in ToastProvider but NEVER consumes them — there is zero pointer/swipe handling anywhere in robonen/toast. The props are dead.
+- ⛔ (accessibility) No screen-reader announce region. reka renders a separate visually-hidden ToastAnnounce live region with double-rAF deferred text injection (to force NVDA to announce) and harvests toast text via getAnnounceTextContent, honoring aria-hidden/hidden/display:none and ToastAnnounceExclude.
+  - _evidence:_ reka ToastAnnounce.vue (double requestAnimationFrame + useTimeout(1000)), ToastRootImpl.vue lines 120,181-200, utils.ts getAnnounceTextContent. robonen instead puts role=status + aria-live directly on the visible toast li (ToastRoot.vue lines 129-131) with no deferred-render trick and no separate hidden announce node, so NVDA/VoiceOver announcement reliability is worse and there is no text-harvesting for SR.
+- ⛔ (keyboard) No focus-order management / tab reversal across toasts and no FocusProxy guards. reka programmatically reverses tab order (newest-to-oldest), uses head/tail FocusProxy VisuallyHidden sentinels to proxy focus out of the portaled viewport back into document order, and on Tab navigates between toast tabbable candidates.
+  - _evidence:_ reka ToastViewport.vue handleKeyDown (lines 97-128), getSortedTabbableCandidates (lines 150-161), FocusProxy.vue, focusFirst/getTabbableCandidates imports. robonen ToastViewport.vue has NO keydown/Tab handling and no focus proxies at all; tabbing through portaled toasts will follow DOM order and can escape the viewport unexpectedly.
+
+**Major gaps:**
+- 🔶 (accessibility) No ToastAnnounceExclude part and no altText harvesting on ToastAction. reka's ToastAction wraps ToastClose in ToastAnnounceExclude so the action's altText is read by SR (and the button's own visible text is excluded). robonen's ToastAction only sets aria-label=altText on the button and provides no exclude mechanism, so action content cannot be excluded from / substituted in the SR announcement.
+- 🔶 (features) Toast is not teleported into the viewport and there is no Collection registration. reka teleports each ToastRootImpl into providerContext.viewport via <Teleport> and wraps it in CollectionItem/CollectionSlot so toasts authored anywhere in the tree render inside the viewport and are enumerable for focus ordering.
+- 🔶 (accessibility) On programmatic/keyboard close, focus is not returned to the viewport. reka's handleClose focuses the viewport when the toast being closed contained focus (so SR users keep context and focus isn't lost), and resets isClosePausedRef.
+- 🔶 (api-surface) No remaining-time / duration slot props. reka exposes a default slot with { open, remaining, duration } driven by a useRafFn countdown, enabling progress bars/countdowns. robonen's ToastRoot default slot is empty <slot/> with no scope.
+- 🔶 (api-surface) No forceMount prop and no defaultOpen prop. reka ToastRoot supports forceMount (force render for animation libs) and defaultOpen (uncontrolled initial state distinct from the v-model). robonen only has defineModel('open', {default:true}) with no forceMount and no separate defaultOpen.
+- 🔶 (features) No DismissableLayer integration on the viewport. reka wraps the viewport in DismissableLayerBranch so toasts participate in the global dismissable-layer stack (correct Escape/outside-interaction layering with dialogs/popovers). robonen's viewport is a plain Primitive region with no layer participation.
+- 🔶 (edge-cases) No window blur/focus pause-resume and no pointermove-based pause. reka pauses the dismiss timer on window blur and resumes on window focus, and uses pointermove (not just pointerenter) plus pointerleave-with-active-element checks. robonen only pauses on pointerenter/focusin and resumes on pointerleave/focusout.
+- 🔶 (edge-cases) Pause does not preserve elapsed/remaining time; timer restarts from full duration on resume. reka tracks closeTimerStartTimeRef/closeTimerRemainingTimeRef and on resume continues from the remaining time. robonen's resumeTimer calls startTimer(full duration) again, so hovering repeatedly can keep a toast alive far longer than its duration and the countdown effectively resets.
+- 🔶 (keyboard) Escape handling differs and is weaker. reka uses onKeyStroke('Escape') globally on the root, sets isFocusedToastEscapeKeyDownRef, and closes unless event.defaultPrevented. robonen only emits escapeKeyDown on @keydown.escape bound to the toast element (must be focused), never closes on Escape, and never sets isFocusedToastEscapeKeyDownRef (the provider ref exists but is dead).
+
+**Minor gaps (7):**
+- ▫️ (api-surface) No disableSwipe prop. reka ToastProvider exposes disableSwipe to turn off swipe gestures (and adjusts userSelect/touchAction styles). robonen has no equivalent (and no swipe at all).
+- ▫️ (accessibility) ToastViewport label loses the {hotkey} placeholder feature and the function-form label. reka label supports '{hotkey}' interpolation (auto-replaced, e.g. 'Notifications (F8)') and a (hotkey)=>string function form, improving SR landmark context. robonen viewport label is a plain string with no hotkey interpolation.
+- ▫️ (api-surface) No ToastPortal part. reka exports a ToastPortal (TeleportPrimitive wrapper) for placing the viewport in an arbitrary container. robonen exports no Portal.
+- ▫️ (code-quality) ToastProvider does not validate a non-empty label and does not validate type. reka throws on empty/whitespace label and on invalid type values, catching author mistakes early. robonen performs no such validation.
+- ▫️ (forms) ToastClose does not set type='button'. reka's ToastClose sets type='button' when as==='button' to avoid implicit form submit. robonen ToastClose renders a button with no explicit type.
+- ▫️ (accessibility) ToastRoot default type differs and may be less appropriate. reka defaults type='foreground' (ToastRoot.vue line 28) for user-action toasts (assertive). robonen defaults type='background' (ToastRoot.vue line 32, polite). A behavioral/aria-live divergence worth a deliberate decision.
+- ▫️ (code-quality) Components do not set inheritAttrs:false where reka does, which blocks precise attribute placement around wrappers (FocusProxy/DismissableLayerBranch/Teleport). reka uses defineOptions({inheritAttrs:false}) + v-bind="$attrs".
+
+**Recommendations to make robonen strictly better:**
+- Implement swipe-to-dismiss: port reka's pointerdown/pointermove/pointerup logic and isDeltaInDirection/handleAndDispatchCustomEvent into ToastRoot, add swipeStart/swipeMove/swipeCancel/swipeEnd emits, set data-swipe + --primitives-toast-swipe-move-x/y / -end-x/y CSS vars, and actually consume the existing swipeDirection/swipeThreshold provider props (currently dead). Add a disableSwipe provider prop.
+- Add a dedicated screen-reader announce region: create a ToastAnnounce visually-hidden component (robonen already ships a visually-hidden primitive) that defers text injection with double requestAnimationFrame, and a getAnnounceTextContent util that walks the toast harvesting text while honoring aria-hidden/hidden/display:none and a new ToastAnnounceExclude (data-primitives-toast-announce-exclude / -alt). Move aria-live off the visible li into this hidden region.
+- Add ToastAnnounceExclude and wire ToastAction to wrap its button in it (passing altText) so SR reads altText instead of the button label, matching reka.
+- Teleport each ToastRoot into the provider viewport and integrate the existing collection primitive (useCollection isProvider on provider, CollectionItem on root, CollectionSlot on viewport) so toasts can be authored anywhere and are enumerable.
+- Implement viewport focus management: add a keydown Tab handler that reverses tab order newest-to-oldest using collection items + getTabbableCandidates, and add head/tail FocusProxy sentinels (VisuallyHidden tabindex=0) to proxy focus out of the portaled viewport. Export focusFirst/getTabbableCandidates from focus-scope for reuse.
+- On keyboard close, focus the viewport when the closing toast contained focus, and reset isClosePausedRef (currently isFocusedToastEscapeKeyDownRef and the focus-return behavior are missing).
+- Preserve elapsed time across pause/resume: track closeTimerStartTime and closeTimerRemainingTime and resume from remaining (not full duration). Add a useRafFn-based remaining countdown and expose { open, remaining, duration } as ToastRoot slot props.
+- Add forceMount and defaultOpen props to ToastRoot (Presence :present="forceMount || open"; defaultOpen seeds the uncontrolled model).
+- Wrap ToastViewport in a DismissableLayerBranch (add a Branch export to the dismissable-layer primitive) so toasts join the dismissable-layer stack; add window blur/focus pause-resume and pointermove-based pause to the viewport.
+- Implement global Escape handling on ToastRoot via a keydown listener: emit escapeKeyDown, set isFocusedToastEscapeKeyDownRef, and close unless defaultPrevented.
+- Add a ToastPortal part (Teleport wrapper) and support {hotkey} placeholder + function-form label on ToastViewport.
+- Add author-error validation (non-empty label in ToastProvider, valid type in ToastRoot), set type='button' on ToastClose when as==='button', and reconsider defaulting ToastRoot type to 'foreground' to match the common user-action semantics.
+
+**Where robonen is already better:**
+- ✅ ToastViewport hotkey matching is more correct than reka's: robonen guards against an empty hotkey array (ToastViewport.vue line 47, `if (!hotkey || hotkey.length === 0) return`) and supports modifier-key tokens ('altKey'/'ctrlKey'/'shiftKey'/'metaKey') in the hotkey array. reka's `onKeyStroke(hotkey.value, ...)` (ToastViewport.vue line 55) is registered once with the initial value (not reactive to hotkey changes) and an empty array would match every keystroke. robonen has explicit regression tests for both bugs.
+- ✅ ToastRoot restarts the auto-dismiss timer reactively when `duration` (root or provider) changes while open and not paused (ToastRoot.vue watch lines 83-91), backed by a dedicated regression test. reka resets closeTimerRemainingTimeRef on duration change (ToastRootImpl.vue lines 154-160) but robonen's restart behavior here is explicitly tested.
+- ✅ robonen normalizes the disable case more defensively in startTimer: `if (ms === Infinity || ms <= 0 || !Number.isFinite(ms)) return` (ToastRoot.vue line 57) also handles NaN, whereas reka only checks `duration <= 0 || duration === Number.POSITIVE_INFINITY` (ToastRootImpl.vue line 90).
+- ✅ robonen's context layer uses a typed useContextFactory and shallowRef for the viewport element (ToastProvider.vue line 34), marginally more efficient for a DOM-node ref than reka's plain ref (ToastProvider.vue line 71).
+
+
+### date-picker  —  _reka-better_
+
+**Parts reka has that robonen lacks:** DatePickerField backed by a true segmented DateFieldRoot (role=group, segments slot, VisuallyHidden focusable form input), DatePickerInput as an individual editable segment part (role=spinbutton, part: SegmentPart) — robonen's DatePickerInput is just an alias of the plain DatePickerField
+**Parts robonen has that reka lacks:** DatePickerCalendar wrapper component (reka has DatePickerCalendar too, but robonen's is a thin Primitive div; functionally parity), DatePickerField with editable/format/placeholderText plain-input ergonomics (no reka equivalent because reka is always segmented), valueFormat serializer on Root
+
+Both libraries structure DatePicker as a composition over Popover + Calendar + a Field, and robonen has real parity (or better) on the calendar grid: CalendarCellTrigger.vue implements full RTL-aware Arrow/Home/End/PageUp/PageDown(+Shift for year)/Enter/Space keyboard nav, roving tabindex, data-* states, initialFocus, and aria-selected/aria-disabled — matching reka's CalendarCellTrigger. robonen also wins on smaller surface (native Date, no @internationalized/date dependency), a valueFormat hidden-input serializer, and a friendlier closeOnSelect=true default. However, the verdict is reka-better because reka's DatePicker centers on a segmented, editable DateField (DateFieldRoot/DateFieldInput) that robonen completely lacks: robonen's DatePickerField is a single plain <input> doing new Date(text) parsing. That single architectural gap cascades into many missing features: per-segment spinbutton keyboard editing (Arrow increment, numeric type-ahead with auto-advance, Backspace, a/p for AM/PM), RTL-aware inter-segment Left/Right navigation, time support (granularity/hourCycle/step/hideTimeZone), segment-level ARIA (role=group, role=spinbutton, aria-valuemin/max/now/valuetext). Additionally reka has preventDeselect toggle-off, a focusable VisuallyHidden native input enabling real form constraint validation (required/min/max) where robonen uses a non-validatable display:none input, required/id forwarding, a trigger that honors disabled (robonen's does not), and DatePickerContent that auto-portals with a portal prop (robonen requires manual DatePickerPortal). To become strictly better, robonen must implement a segmented DateField with full segment keyboard + ARIA, add time/granularity support, preventDeselect, a focusable hidden form input with required, disabled trigger forwarding, and content auto-portalling — then it would surpass reka given its lighter dependency profile and better defaults. Relevant files: /Users/robonen/Projects/tools/vue/primitives/src/date-picker/DatePickerRoot.vue, /Users/robonen/Projects/tools/vue/primitives/src/date-picker/DatePickerField.vue, /Users/robonen/Projects/tools/vue/primitives/src/date-picker/DatePickerTrigger.vue, /Users/robonen/Projects/tools/vue/primitives/src/date-picker/DatePickerContent.vue, /Users/robonen/Projects/tools/vue/primitives/src/calendar/CalendarCellTrigger.vue; reka: /Users/robonen/Projects/external/reka-ui/packages/core/src/DatePicker/DatePickerRoot.vue, /Users/robonen/Projects/external/reka-ui/packages/core/src/DateField/DateFieldRoot.vue, /Users/robonen/Projects/external/reka-ui/packages/core/src/DateField/DateFieldInput.vue, /Users/robonen/Projects/external/reka-ui/packages/core/src/shared/date/useDateField.ts, /Users/robonen/Projects/external/reka-ui/packages/core/src/DatePicker/DatePickerContent.vue.
+
+**Critical gaps:**
+- ⛔ (features) Segmented, editable date field. reka's DatePickerField renders a DateFieldRoot (role=group) whose DatePickerInput parts (DateFieldInput.vue, part: SegmentPart) are individually-focusable contenteditable segments (day/month/year/hour/minute/second/dayPeriod/literal) with role=spinbutton. robonen's DatePickerField is a single plain <input> that does new Date(text) parsing (DatePickerField.vue:45-47). robonen has no per-segment editing, no SegmentPart model, no segments slot, no DateFieldRoot/DateFieldInput.
+  - _evidence:_ reka DateFieldRoot.vue (segmentValues/segmentContents, role=group) + DateFieldInput.vue (data-reka-date-field-segment, role=spinbutton via useDateField commonSegmentAttrs); robonen DatePickerField.vue is a single <input> with no segment support.
+- ⛔ (keyboard) Per-segment keyboard interaction. reka's useDateField.ts handles ArrowUp/ArrowDown to increment/decrement each segment, numeric type-ahead with auto-advance to next segment (focusNext), Backspace to clear, and 'a'/'p' to set AM/PM (handleDayPeriodSegmentKeydown:846-871). robonen's field only handles Enter to commit a full parsed string (DatePickerField.vue:52-54) — no arrow increment, no type-ahead, no backspace-per-segment, no AM/PM keys.
+  - _evidence:_ reka useDateField.ts handleDay/Month/Year/Hour/Minute/Second/DayPeriodSegmentKeydown (lines 635-871) vs robonen DatePickerField.vue handleKeydown only checking e.key === 'Enter'.
+- ⛔ (features) Time / granularity support. reka exposes granularity ('day'|'hour'|'minute'|'second'), hourCycle (12/24), step (DateStep), and hideTimeZone on DatePickerRootProps (via DateFieldRootProps) and renders time segments accordingly (DatePickerRoot.vue:104-112 destructures granularity/hideTimeZone/hourCycle/step; DatePickerGranular.story.vue). robonen's DatePickerRoot has NO granularity/hourCycle/step/hideTimeZone props — it is date-only (toDateOnly strips time everywhere, DatePickerRoot.vue:105,183,198).
+  - _evidence:_ reka DatePickerRoot.vue context fields hourCycle/granularity/hideTimeZone/step (lines 21-23,44) + DateFieldRoot.vue inferredGranularity/hasTime; robonen DatePickerRoot.vue exposes no time props and calls toDateOnly throughout.
+
+**Major gaps:**
+- 🔶 (rtl-i18n) RTL-aware segment navigation with ArrowLeft/ArrowRight between field segments. reka DateFieldRoot.vue handleKeydown (253-260) moves focus to prev/next focusable segment, with sign flipped for dir==='rtl' (nextFocusableSegment/prevFocusableSegment:227-244). robonen's plain field has no inter-segment Left/Right navigation at all (single input). (robonen's calendar grid is RTL-aware, but the field is not.)
+- 🔶 (features) preventDeselect / toggle-off behavior. reka's onDateChange (DatePickerRoot.vue:180-190) deselects (sets modelValue=undefined) when the already-selected date is clicked again unless preventDeselect is set; preventDeselect is a real prop. robonen's setDate (DatePickerRoot.vue:180-185) always sets the date and never deselects on re-click, and there is no preventDeselect prop.
+- 🔶 (forms) Form constraint validation via a focusable native input. reka renders a VisuallyHidden as="input" with feature="focusable", real type (date/datetime-local), :value, :min, :max, :required (DateFieldRoot.vue:310-323), so browser-level required/min/max validation and form participation work, and focusing it forwards focus to the first segment. robonen's hidden input is type=hidden with style="display:none" (DatePickerRoot.vue:322-331) — no required, no min/max, not focusable, and display:none inputs are excluded from constraint validation.
+- 🔶 (edge-cases) Trigger does not honor disabled. reka DatePickerTrigger binds :disabled="rootContext.disabled.value" (DatePickerTrigger.vue:20) so the open button is disabled with the picker. robonen DatePickerTrigger.vue never reads ctx disabled — the trigger stays clickable and ctx.onOpenToggle fires even when the picker is disabled (no disabled binding, no guard).
+- 🔶 (accessibility) Field-level ARIA group/state semantics. reka DateFieldRoot sets role="group", aria-disabled, data-readonly, data-invalid (DateFieldRoot.vue:294-301) and each segment carries role=spinbutton, aria-valuemin/max/now/valuetext and aria-label (useDateField commonSegmentAttrs + per-part attrs:48-189). robonen's field is a bare <input readonly> with only data-primitives-date-picker-field and no aria-invalid/aria-disabled/group semantics.
+
+**Minor gaps (4):**
+- ▫️ (forms) required prop and id forwarding. reka DatePickerRoot forwards required and id into the field/native input (DatePickerRoot.vue:103,170,173; DateFieldRoot props required/id). robonen DatePickerRootProps has name but no required and no user-supplied id prop for the field/form control.
+- ▫️ (features) Content auto-portals and exposes a portal prop. reka DatePickerContent wraps children in PopoverPortal automatically and accepts portal?: PopoverPortalProps (DatePickerContent.vue:7-12,28). robonen DatePickerContent.vue does NOT portal — it renders inline; consumers must manually add DatePickerPortal around it, and there is no portal prop on Content.
+- ▫️ (edge-cases) closeOnSelect is reactive in reka via a watcher on modelValue (DatePickerRoot.vue:143-150) and is provided as a Ref in context, so changes apply consistently from any selection source (field or calendar). robonen only closes inside setDate (DatePickerRoot.vue:184) which is the calendar path; selecting/committing via the editable DatePickerField sets ctx.modelValue directly (DatePickerField.vue:47) and does NOT trigger closeOnSelect.
+- ▫️ (rtl-i18n) Locale-change segment re-ordering. reka re-collects segment elements on locale change so Left/Right order matches the new locale (DateFieldRoot.vue:192-202). robonen has no segments, so changing locale only reformats the single input string — a non-issue for plain input but a real capability gap if segmented editing is added.
+
+**Recommendations to make robonen strictly better:**
+- Build a segmented DateField (DateFieldRoot + DateFieldInput with a SegmentPart model) and have DatePickerField/DatePickerInput render it. Each segment should be role=spinbutton, contenteditable, with aria-valuemin/valuemax/valuenow/valuetext and aria-label, replacing the single plain <input> in DatePickerField.vue. This is the central gap.
+- Add per-segment keyboard handling to the field: ArrowUp/ArrowDown to increment/decrement, numeric type-ahead with auto-advance to the next segment, Backspace to clear a segment, and 'a'/'p' for AM/PM, plus RTL-aware ArrowLeft/ArrowRight to move between segments (mirror reka useDateField.ts and DateFieldRoot.vue handleKeydown).
+- Add time support: granularity ('day'|'hour'|'minute'|'second'), hourCycle (12/24), step, and hideTimeZone props on DatePickerRoot; stop unconditionally calling toDateOnly so time-of-day can be preserved and rendered as hour/minute/second/dayPeriod segments.
+- Add preventDeselect prop and make setDate deselect (set modelValue=undefined) when the currently-selected date is re-selected, unless preventDeselect is true (match reka onDateChange).
+- Replace the display:none hidden input with a focusable VisuallyHidden native input (type date/datetime-local, with :value/:min/:max/:required), so the control participates in browser constraint validation and focusing it forwards focus into the field. Add required and id props to DatePickerRootProps.
+- Forward root disabled to DatePickerTrigger (bind :disabled and guard onClick/onOpenToggle) so a disabled picker cannot be opened.
+- Make DatePickerContent auto-wrap its children in DatePickerPortal and accept a portal?: prop (like reka DatePickerContent.portal), so portalling is the default and DatePickerPortal becomes opt-out rather than required boilerplate.
+- Make closeOnSelect fire for ALL selection sources by watching modelValue at the Root (like reka) instead of only inside setDate, so committing via the field also closes the popover.
+- Add field-level ARIA: role=group, aria-disabled, aria-readonly, data-invalid/data-readonly/data-disabled on the field wrapper, and aria-invalid wiring driven by the existing isInvalid computed.
+
+**Where robonen is already better:**
+- ✅ Zero-dependency value model: robonen uses native JS Date throughout (DatePickerRoot.vue modelValue: Date | undefined) whereas reka hard-depends on @internationalized/date (DateValue, .compare/.copy/.set). Smaller bundle and no extra peer dep.
+- ✅ Custom hidden-input serialization: robonen exposes valueFormat?: 'iso' | ((d: Date) => string) (DatePickerRoot.vue:13-14, hiddenValue computed:256-260) for controlling the submitted string. reka has no equivalent serializer hook — it relies on the VisuallyHidden native input's normalized value only.
+- ✅ Better default UX for closeOnSelect: robonen defaults closeOnSelect = true (DatePickerRoot.vue:16,57) so the popover closes after picking a date; reka defaults closeOnSelect: false (DatePickerRoot.vue:85), requiring opt-in.
+- ✅ DatePickerField offers a simple plain-input mode with ergonomic props editable/format/placeholderText (DatePickerField.vue:4-11) plus Enter/blur commit — lower barrier for the common 'one text input' use case than reka's mandatory multi-segment composition.
+- ✅ modal popover support is wired end-to-end in robonen (DatePickerContent.vue FocusScope :trapped=ctx.modal, DismissableLayer :disable-outside-pointer-events=ctx.modal) and surfaced as a first-class DatePicker concern; reka delegates entirely to PopoverRoot.
+- ✅ Explicit isInvalid is computed and provided to the calendar context (DatePickerRoot.vue:175-178), giving day cells/styling access to validity, in addition to per-field checks.
+
+
+### select  —  _reka-better_
+
+**Parts reka has that robonen lacks:** BubbleSelect.vue (native VisuallyHidden <select> for real form submission, multiple, autofill, native change bubbling), SelectProvider.vue (re-provides root+default content context so items can mount in a detached DocumentFragment while closed)
+
+robonen's select is a structurally complete single-value port (all the same visible parts exist: Root/Trigger/Value/Icon/Portal/Content/Viewport/ScrollButtons/Group/Label/Item/ItemText/ItemIndicator/Separator/Arrow plus item-aligned and popper positioners), but it is materially behind reka on substance. Critical gaps: it supports only string values with no multiple/by/object support; and its SelectValue cannot render the initially-selected label until the dropdown is opened once, because items unmount when closed (reka renders them in a detached fragment via SelectProvider). Major gaps: it never focuses the selected item on open; its item-aligned positioning is a thin stub missing the entire Radix centering/collision/expand-on-scroll/RTL/resize algorithm; typeahead is primitive (no cycling/repeated-char/wrap) and absent on the closed trigger; it omits useHideOthers/useFocusGuards (both available in-repo); it has no native <select> form bubbling (only a plain hidden input, so no autofill, no multiple, no object values); ARIA is mis-wired (role=listbox on the viewport not the content, content id missing so trigger aria-controls dangles, items lack aria-labelledby/data-highlighted/select event). Minor gaps include no Tab/contextmenu prevention, no viewport nonce/scrollbar hiding, an always-rendered arrow, an unset content-available-height CSS var (broken viewport sizing), no forceMount, no SelectValue slot, and missing touch/pointer hardening. robonen's only genuine edges are a smoother rAF auto-scroll and a slightly broader set of exported per-part types. Verdict: reka-better; substantial work is required for robonen to reach, let alone exceed, parity.
+
+**Critical gaps:**
+- ⛔ (features) robonen only supports a single string value (export type SelectValue = string; modelValue typed string|undefined). reka supports any value type (AcceptableValue: string|number|boolean|object|null) AND multiple selection via the `multiple` prop, with array model values, by-field/by-fn object comparison, and toggle-on-reselect logic.
+  - _evidence:_ reka SelectRoot.vue: props `multiple`, `by`, `modelValue?: T|Array<T>`, `defaultValue?: T|Array<T>`, handleValueChange() toggles array membership and keeps open when multiple; isEmptyModelValue computed; utils.ts valueComparator/compare. robonen context.ts `SelectValue = string`, SelectRoot has no multiple/by, handleValueChange always closes and assigns scalar.
+- ⛔ (edge-cases) robonen's SelectValue cannot show the initially-selected option's label until the dropdown has been opened at least once, because items only register into optionsSet when SelectItemText mounts, and the items are unmounted by `Presence :present=open` while closed.
+  - _evidence:_ robonen SelectContent.vue wraps SelectContentImpl (items) in `<Presence :present="rootCtx.open.value">`; SelectItem registers via onMounted/onItemTextChange only. reka SelectContent.vue renders a `<Teleport :to="fragment">` with SelectProvider when closed so SelectItemText still mounts in a detached DocumentFragment and registers options, so SelectValue shows the correct label on first paint.
+
+**Major gaps:**
+- 🔶 (accessibility) robonen never focuses the currently selected item when the listbox opens; it tracks selectedItemRef but no code calls .focus() on it after positioning. So opening a select with an existing value lands focus on the content container, not the selected option.
+- 🔶 (features) robonen's item-aligned positioning is a stub: it only pins content to triggerRect.bottom/left with a fixed minWidth. It omits the entire Radix MacOS-style algorithm: vertical centering of the selected item against the trigger, collision clamping to viewport (CONTENT_MARGIN), min/max height computation, dir=rtl horizontal math, expand-on-scroll, ResizeObserver reposition, and content-wrapper z-index copy.
+- 🔶 (keyboard) robonen offers no type-to-select on the closed trigger; pressing letter keys on the trigger does nothing. reka runs typeahead on the trigger so you can select an option without opening.
+- 🔶 (keyboard) robonen's typeahead matching is primitive: it always picks the first item whose text startsWith the buffer from the top of the list, with no forward-cycling from the current item, no repeated-character cycling, and no wrap-around. So pressing the same letter repeatedly cannot cycle through same-letter options.
+- 🔶 (accessibility) robonen does not isolate the rest of the page from assistive tech while the listbox is open (no aria-hidden on siblings) and installs no focus guards, so screen-reader users and Tab can escape past the listbox boundary inconsistently.
+- 🔶 (forms) robonen does not provide native form submission for arbitrary/multiple values. It renders a single hidden <input type=hidden> that stringifies value, so non-string values and multiple selections cannot be submitted, autofill cannot work, and no native change event bubbles.
+- 🔶 (accessibility) robonen's SelectItem does not associate the option with its label for AT and lacks a highlighted-state hook; it also has no cancelable select event or empty-value guard.
+- 🔶 (accessibility) robonen's listbox role wiring is on the wrong element and inconsistent with reka. Content has no role; the viewport carries role=listbox. reka puts role=listbox on the content element and role=presentation on the viewport, which is the correct mapping for option grouping/labelling.
+- 🔶 (api-surface) robonen's SelectValue has no slot and cannot render selected label(s) for object/multiple values; it renders a single persisted displayValue string only and has no data-placeholder attribute.
+
+**Minor gaps (6):**
+- ▫️ (keyboard) robonen's content keydown handler does not prevent Tab from moving focus out of the open listbox, and does not block contextmenu, so Tab can break the roving-focus model inside the listbox.
+- ▫️ (features) robonen's SelectViewport lacks a `nonce` prop and does not hide scrollbars / enable touch momentum scrolling, hurting CSP support and visual polish.
+- ▫️ (edge-cases) robonen's SelectArrow renders regardless of position mode, so an arrow can appear in item-aligned mode where it is meaningless; and SelectPopperPosition does not map popper CSS vars, so the viewport's max-height var is never set.
+- ▫️ (features) robonen's SelectContent has no forceMount option for externally controlled animation libraries, and does not implement the delayed-render-presence workaround for state-based exit transitions.
+- ▫️ (edge-cases) robonen's pointer handling lacks touch-device support and the open/select race protections reka added for issue #804: it opens on pointerdown for all pointer types and has no pointer-move-threshold guard before selecting on pointerup.
+- ▫️ (code-quality) robonen's data hooks differ from reka's conventional attributes and it does not use a Collection abstraction, reducing robustness of keyboard nav and scroll-into-view ordering.
+
+**Recommendations to make robonen strictly better:**
+- Generalize the value model: change SelectValue from `string` to an AcceptableValue union and add `multiple`, `by`, array model/defaultValue support in SelectRoot, mirroring reka's handleValueChange toggle logic and valueComparator/compare utils. Keep open on select when multiple.
+- Fix initial label display: render SelectContent children into a detached DocumentFragment (or forceMount) while closed, like reka's SelectProvider/Teleport branch, so SelectItemText registers options and SelectValue shows the selected label before the dropdown is ever opened.
+- Focus the selected item on open: add `watch(isPositioned, () => focusFirst([selectedItemRef.value, contentEl]))` in SelectContentImpl, and re-run it after the scroll-up button mounts in item-aligned mode.
+- Port the full Radix item-aligned positioning algorithm into SelectItemAlignedPosition (vertical centering on selected item, CONTENT_MARGIN collision clamping, min/max height, dir=rtl math, expand-on-scroll via a context, useResizeObserver, z-index copy).
+- Add typeahead on the closed Trigger and replace the naive startsWith matcher with a cycling matcher (wrapArray + getNextMatch: forward from current item, repeated-char cycling, single-char exclusion, wrap-around). Reuse a shared useTypeahead.
+- Wire ARIA correctly: put role=listbox + the content id on the content element (so trigger aria-controls resolves), set viewport role=presentation, add aria-labelledby=textId and data-highlighted to SelectItem, and add a cancelable `select` emit plus an empty-string value guard.
+- Add native form support via a VisuallyHidden <select> (BubbleSelect equivalent) gated by useFormControl: support multiple, options from the registry, autofill @input, native change dispatch through the value setter, and a nativeSelectKey for re-render.
+- Use the already-present useHideOthers(content) and add focus guards in SelectContentImpl; prevent Tab and contextmenu inside the open listbox.
+- Add a `nonce` prop to SelectViewport and inject a scrollbar-hiding style tag with touch momentum; only render SelectArrow when position==='popper'; map popper CSS vars in SelectPopperPosition (--*-content-available-height, --*-trigger-width/height) and align the viewport max-height var name so collision-aware sizing actually works.
+- Add `forceMount` to SelectContent and a delayed renderPresence to keep state-based exit transitions accurate; add a slot to SelectValue exposing { selectedLabel, modelValue } and a data-placeholder attribute.
+- Adopt touch/pointer hardening from reka issue #804: skip opening on touch pointerdown (open on pointerup), release implicit pointer capture, track trigger pointer-down position, and add a pointer-move threshold before selecting on pointerup.
+
+**Where robonen is already better:**
+- ✅ robonen's SelectScrollButtonImpl uses requestAnimationFrame for smooth auto-scroll on pointerenter/pointerleave, whereas reka uses a setInterval(50ms) timer driven by an `autoScroll` emit; rAF is generally smoother and self-throttling (SelectScrollButtonImpl.vue startAutoScroll vs reka handlePointerDown/handlePointerMove setInterval).
+- ✅ robonen explicitly exposes per-component prop/emit types from index.ts for nearly every part (SelectContentImplProps/Emits, SelectItemAlignedPositionProps/Emits, SelectPopperPositionProps/Emits, SelectScrollUpButtonProps, etc.), giving a broader public typed surface than reka's index.ts which omits several (e.g. it does not export SelectContentImpl, SelectItemAlignedPosition, SelectPopperPosition, SelectViewport types/components at all).
+- ✅ robonen's SelectScrollUpButton/SelectScrollDownButton compute can-scroll state both on mount and via a passive scroll listener with proper cleanup, and the down-button uses a +1px tolerance (scrollHeight - scrollTop > clientHeight + 1) to avoid sub-pixel flicker; this is a small robustness edge reka's button does not special-case.
+
+
+### menu  —  _reka-better_
+
+
+robonen's Menu mirrors reka-ui's full part set (Root, Anchor, Arrow, Portal, Content + modal/nonmodal Impl, Item/ItemImpl, CheckboxItem, RadioGroup/RadioItem, ItemIndicator, Group, Label, Separator, Sub/SubTrigger/SubContent) and matches it on Anchor/Arrow/Portal/Separator/ItemIndicator and basic ARIA roles, modal isolation (useHideOthers + useBodyScrollLock + useFocusGuard present in MenuRootContentModal), and roving-tabindex navigation (Arrow/Home/End/PageUp/PageDown/RTL/loop via RovingFocus). It is genuinely better in one area: MenuItem dispatches a real bubbling ITEM_SELECT CustomEvent on the DOM, and uses preventScroll focusing. However it is currently NOT strictly better. The submenu pointer grace-area is dead code (provided in context but never invoked, and MenuSub never tracks its content element), so diagonal mouse movement to a submenu closes it; there is no pointer-direction tracking; ArrowLeft/close-key cannot return focus from an open submenu (MenuSubContent has no keydown/open-auto-focus handlers); the content container does not focus first/last on FIRST_LAST keys; Tab is not trapped; Space selects during type-ahead; pointer-up drag-select and the Firefox text-selection workaround are missing; Group/Label aria-labelledby wiring is broken (MenuLabel never injects the group context); submenus don't auto-close with the parent and don't support uncontrolled open; and Root/Sub are controlled-only so they won't open without an explicit v-model. Verdict: reka-better until the submenu grace-area, sub-content close-key handling, FIRST_LAST/Tab content handling, group/label wiring, and controllable open are implemented.
+
+**Critical gaps:**
+- ⛔ (edge-cases) Submenu pointer 'grace area' (safe diagonal triangle to the open submenu) is completely non-functional in robonen. reka's MenuSubTrigger.handlePointerLeave builds a 5-point polygon from `menuContext.content.value.getBoundingClientRect()` plus a directional bleed and calls `contentContext.onPointerGraceIntentChange({area, side})` with a 300ms `pointerGraceTimerRef` reset. robonen's MenuSubTrigger.handlePointerLeave does none of this — it only calls onTriggerLeave then close(). `onPointerGraceIntentChange`/`pointerGraceTimerRef` are provided in robonen's content context but NEVER called by any component, so pointerGraceIntentRef is always null and onItemEnter/onItemLeave/onTriggerLeave grace checks are dead code. Result: moving the mouse diagonally from a sub-trigger toward its open submenu closes the submenu, the classic menu UX bug reka fixes.
+  - _evidence:_ reka MenuSubTrigger.vue handlePointerLeave (contentRect polygon + onPointerGraceIntentChange + pointerGraceTimerRef 300ms) vs robonen MenuSubTrigger.vue handlePointerLeave (only close()); robonen onPointerGraceIntentChange has zero callers.
+- ⛔ (keyboard) Closing a submenu with the close key (ArrowLeft in LTR / ArrowRight in RTL) from inside the open sub-content is not handled. reka's MenuSubContent has a `@keydown` that on SUB_CLOSE_KEYS calls `menuContext.onOpenChange(false)` and refocuses the trigger (trigger.focus + scrollIntoView), and an `@open-auto-focus` that focuses sub-content for keyboard users. robonen's MenuSubContent has NO keydown/open-auto-focus handlers at all — close-key handling only exists on the SubTrigger, so once focus is inside the submenu, ArrowLeft cannot return to the parent.
+  - _evidence:_ reka MenuSubContent.vue @keydown (SUB_CLOSE_KEYS -> onOpenChange(false) + trigger.focus) and @open-auto-focus.prevent; robonen MenuSubContent.vue has no @keydown and no @open-auto-focus.
+
+**Major gaps:**
+- 🔶 (edge-cases) Pointer-direction tracking is missing. reka's MenuContentImpl tracks `pointerDirRef`/`lastPointerXRef` via handlePointerMove and `isPointerMovingToSubmenu(event)` requires BOTH the cursor be inside the grace area AND moving toward the submenu side. robonen has no pointermove handler on PopperContent and no pointer-direction state, so even if a grace area existed it could not gate on movement direction.
+- 🔶 (keyboard) When the menu content container itself is focused (e.g. opened via mouse with no highlighted item), pressing a FIRST_LAST key does not move focus to the first/last item. reka's handleKeyDown does `if (event.target === contentElement && FIRST_LAST_KEYS.includes(key)) { event.preventDefault(); focusFirst(candidateNodes) }` (reversing for LAST_KEYS). robonen's MenuContentImpl.handleKeyDown only calls `event.stopPropagation()` for FIRST_LAST_KEYS and never focuses an item from the container.
+- 🔶 (keyboard) Tab inside the menu is not prevented. reka's handleKeyDown does `if (event.key === 'Tab') event.preventDefault()` when the key originates inside content, so Tab cannot move focus out of an open menu (ARIA menu pattern requirement). robonen never prevents Tab in MenuContentImpl; it only relies on RovingFocusItem shift+Tab handling, leaving forward Tab able to escape the menu.
+- 🔶 (edge-cases) Selecting via pointer is fragile. reka's MenuItem tracks `isPointerDownRef` and on `pointerup` (if pointer started elsewhere) dispatches a synthetic click so pointer-down-then-move-to-another-item selects on release, and explicitly prevents Firefox text-selection lock when the menu closes. robonen's MenuItem/MenuItemImpl only handle plain `@click`; there is no pointerdown/pointerup logic, so drag-select across items and the Firefox text-selection edge case are unhandled.
+- 🔶 (keyboard) Space during type-ahead incorrectly selects in robonen. reka's MenuItem keydown guards `if (disabled || (isTypingAhead && event.key === ' ')) return` so Space extends the search string instead of activating the item while typing. robonen's MenuItemImpl.handleKeyDown treats Enter/Space identically (`if (event.key === 'Enter' || event.key === ' ') click()`) with no typeahead check, so pressing Space mid-search selects the focused item instead of continuing the search.
+- 🔶 (accessibility) Group/Label accessible name relationship is broken in robonen. reka's MenuGroup renders `:aria-labelledby="id"` and MenuLabel injects the group context to render `:id="groupContext.id"`, wiring the group to its label for screen readers. robonen's MenuGroup renders `:id="id"` (not aria-labelledby) and MenuLabel does NOT inject MenuGroupContext at all — it renders a bare Primitive with no id — so the group is never labelled by the label. The provided MenuGroupContext has no consumer.
+- 🔶 (edge-cases) Submenu does not auto-close when the parent menu closes, and the sub-menu's content element is never tracked. reka's MenuSub has `watchEffect` closing the sub when `parentMenuContext.open` is false (plus cleanup), and provides a reactive `content` ref + working `onContentChange`. robonen's MenuSub provides `content: shallowRef(null)` with a no-op `onContentChange: () => {}`, so `menuContext.content` for a submenu is permanently null (breaking any grace/positioning logic that reads sub content), and there is no parent-close watcher to dismiss orphaned submenus.
+- 🔶 (api-surface) Root and Sub support only controlled `open` (no uncontrolled/passive mode). reka's MenuRoot and MenuSub use `useVModel` (MenuSub with `defaultValue:false, passive` so it self-manages open state when no v-model is bound). robonen's MenuRoot/MenuSub use `open = openRef = toRef(() => open)` and only emit `update:open`; if the consumer does not bind v-model:open, the menu can never open because props.open stays at its default false.
+
+**Minor gaps (8):**
+- ▫️ (types) RadioGroup/RadioItem value is restricted to string. reka uses `AcceptableValue` (any serializable value) for MenuRadioGroup.modelValue and MenuRadioItem.value. robonen types both as `string`, so number/object radio values are not supported.
+- ▫️ (accessibility) MenuRadioGroup does not render through MenuGroup. reka's MenuRadioGroup extends MenuGroupProps and renders `<MenuGroup>`, inheriting the group role + label-id wiring. robonen's MenuRadioGroup renders a bare `Primitive role="group"` and never provides MenuGroupContext, so a MenuLabel inside a radio group cannot be associated.
+- ▫️ (accessibility) Modal content does not prevent focus from leaving the layer, and there is no disableOutsideScroll prop. reka's MenuRootContentModal uses `@focus-outside.prevent` so a modal menu keeps focus inside even on programmatic focus-outside; reka also exposes a `disableOutsideScroll` prop (modal passes true, nonmodal false). robonen's MenuRootContentModal forwards focus-outside without `.prevent` and has no disableOutsideScroll prop (it just calls useBodyScrollLock() unconditionally with no opt-out and no way for nonmodal to enable it).
+- ▫️ (edge-cases) Submenu keydown does not bubble-guard across portals. reka's MenuContentImpl and MenuSubContent both compute `isKeyDownInside = target.closest('[data-reka-menu-content]') === event.currentTarget` to ignore key events that bubble up from a nested submenu through the portal. robonen has no such guard, so a key handled in a submenu can be re-processed by the parent content's handleKeyDown (double navigation/typeahead).
+- ▫️ (edge-cases) Typeahead does not exclude input/textarea fields. reka's handleKeyDown computes `isKeyDownInTextField` and skips typeahead when typing in an input/textarea inside the menu (filter/combobox-in-menu support, also reflected in onItemEnter/onItemLeave checking INPUT/TEXTAREA active element). robonen's typeahead fires on any single character key with no text-field exclusion, so typing in a menu-embedded input also drives item typeahead.
+- ▫️ (code-quality) isMouseEvent precision. reka's isMouseEvent uses `event.pointerType === 'mouse'`, correctly excluding pen and touch from mouse-only hover logic. robonen's isMouseEvent checks `event.type` against mouse event names (mousedown/up/move/click) and elsewhere only negates `pointerType === 'touch'`, treating pen as mouse.
+- ▫️ (api-surface) CheckboxItem/RadioItem do not expose checked state via default slot. reka's MenuCheckboxItem/MenuRadioGroup expose `modelValue` as a slot prop (`<slot :model-value=...>`), letting consumers render based on state without re-reading. robonen's MenuCheckboxItem/MenuRadioItem render `<slot />` with no slot props.
+- ▫️ (code-quality) MenuItemImpl does not set inheritAttrs:false / forward fallthrough attrs explicitly. reka's MenuItemImpl declares `defineOptions({inheritAttrs:false})` and binds `v-bind="$attrs"` onto the Primitive, giving precise control of attribute placement (needed since it is wrapped by CheckboxItem/RadioItem/SubTrigger that add role/aria). robonen's MenuItemImpl relies on default attr fallthrough, which can mis-place attrs when wrappers add their own.
+
+**Recommendations to make robonen strictly better:**
+- Implement the submenu grace-area in MenuSubTrigger.handlePointerLeave: read menuCtx.content (which first requires fixing MenuSub to provide a real reactive content ref + working onContentChange), build the 5-point polygon from getBoundingClientRect() with a directional bleed, call onPointerGraceIntentChange({area, side}) and set pointerGraceTimerRef to a 300ms reset. Without callers, the existing grace plumbing in MenuContentImpl is dead code.
+- Add pointer-direction tracking to MenuContentImpl: @pointermove handler maintaining pointerDirRef/lastPointerXRef and an isPointerMovingToSubmenu(event) gate that requires both grace-area containment AND movement toward the submenu side; use it in onItemEnter/onItemLeave/onTriggerLeave.
+- Add a @keydown handler to MenuSubContent that on SUB_CLOSE_KEYS closes the submenu and refocuses the trigger (trigger.focus + scrollIntoView), and an @open-auto-focus.prevent that focuses the sub-content for keyboard users only. Currently ArrowLeft cannot return focus to the parent once inside a submenu.
+- In MenuContentImpl.handleKeyDown, when event.target === contentElement and the key is in FIRST_LAST_KEYS, preventDefault and focusFirst the items (reversed for LAST_KEYS) so opening via mouse + ArrowDown/Home/End moves focus into the list. Also add `if (event.key === 'Tab') event.preventDefault()` to trap Tab inside the menu.
+- Fix MenuSub: provide a real `content = shallowRef(null)` with a functional onContentChange, and add a watchEffect/watch to close the submenu when the parent menu closes (with cleanup), mirroring reka's parent-close protection.
+- Switch MenuRoot and MenuSub from emit-only `toRef(() => open)` to a controllable/uncontrolled model (useControllableState or useVModel with passive defaulting to false) so the menu works without an explicit v-model:open binding.
+- Add isTypingAhead Space guard to MenuItemImpl/MenuItem and MenuSubTrigger keydown (`if (isTypingAhead && key === ' ') return`) so Space extends type-ahead instead of selecting, and route Space through the typeahead path rather than activation while searching.
+- Add pointerdown/pointerup selection logic to MenuItem (isPointerDownRef + synthetic click on pointerup when pointer started elsewhere) to support drag-to-select across items and avoid the Firefox text-selection lock on close.
+- Fix Group/Label a11y: make MenuGroup render aria-labelledby=id and make MenuLabel inject MenuGroupContext to set its id; have MenuRadioGroup render through MenuGroup so radio groups get the same label wiring.
+- Widen MenuRadioGroup.modelValue and MenuRadioItem.value to AcceptableValue (not just string) to support non-string values.
+- Add isKeyDownInside (target.closest('[data-primitives-menu-content]') === currentTarget) guards in MenuContentImpl/MenuSubContent to stop submenu key events that bubble through portals from being double-processed, and add isKeyDownInTextField exclusion so embedded inputs don't trigger typeahead.
+- Expose modelValue/checked as default slot props on MenuCheckboxItem and MenuRadioItem/MenuRadioGroup; add `@focus-outside.prevent` to MenuRootContentModal and a `disableOutsideScroll` prop on MenuContentImpl for parity and opt-out control; tighten isMouseEvent to pointerType==='mouse'; and set inheritAttrs:false + explicit v-bind=$attrs on MenuItemImpl.
+
+**Where robonen is already better:**
+- ✅ MenuItem select composition uses a real DOM CustomEvent dispatched on the item element (MenuItem.vue handleSelect dispatches `new CustomEvent(ITEM_SELECT, {bubbles:true,cancelable:true})` on currentTarget), so the ITEM_SELECT event genuinely bubbles through the DOM tree and any ancestor listener can preventDefault to keep the menu open. reka only emits the CustomEvent to the Vue `select` emit and awaits nextTick, so the event never actually traverses the DOM.
+- ✅ Architecturally relies on a dedicated RovingFocusGroup/RovingFocusItem (roving tabindex managed declaratively with `tabindex` toggling, `onItemShiftTab`, focusable-item counting) instead of reka's imperative useArrowNavigation scanning `[data-reka-collection-item]` on every keystroke; the roving model keeps a real DOM tab order and shift+Tab-out handling that reka's content-level approach implements ad hoc.
+- ✅ Type-ahead match reads an explicit `data-primitive-menu-item-text-value` data attribute set from the `textValue` prop on every item (MenuItemImpl + getNextMatch), giving deterministic typeahead text even for complex/icon content without depending on a Collection value object.
+- ✅ focusFirst (utils.ts) snapshots `getActiveElement()` before each candidate via `preventScroll: true`, avoiding scroll jumps when programmatically focusing items; reka's focusFirst calls plain `candidate.focus()` without preventScroll.
+
+
+### tabs  —  _reka-better_
+
+**Parts reka has that robonen lacks:** TabsIndicator (animated active-tab indicator via CSS vars + ResizeObserver)
+
+robonen Tabs is a clean, self-contained implementation (Root/List/Trigger/Content) with good DOM-order navigation via its Collection primitive, real root-level `disabled` gating, root-owned loop/orientation/dir context, and lean toRef passthroughs. However it is NOT yet strictly better than reka-ui and currently regresses on two critical axes. Accessibility: it emits no id/aria-controls on triggers and no id/aria-labelledby on panels, so screen readers cannot link a tab to its panel (reka does this via makeTriggerId/makeContentId + a contentIds registry that even suppresses aria-controls when no panel exists). Keyboard: there is no Enter/Space activation path at all (TabsTrigger has no enter/space handler and rovingKeyToAction ignores them), which makes activationMode='manual' unusable from the keyboard. Beyond these, reka adds a TabsIndicator part, Presence-based exit animations + unmountOnHide + mount-animation suppression, ConfigProvider dir inheritance (robonen ignores its own config-provider dir), PageUp/PageDown navigation, StringOrNumber generic value typing, guarded mousedown.left activation (ctrl-click defense), and group entry-focus management. robonen has no sub-components or features reka lacks. Verdict: reka-better until the critical a11y wiring and Enter/Space activation are added; the indicator, presence/unmountOnHide, dir inheritance, and generic value type close the remaining gaps.
+
+**Critical gaps:**
+- ⛔ (accessibility) No ARIA relationship wiring between triggers and panels. reka generates stable ids (utils.ts makeTriggerId/makeContentId), sets `:id=triggerId` + `:aria-controls=contentId` on TabsTrigger and `:id=contentId` + `:aria-labelledby=triggerId` on TabsContent, and only emits aria-controls when a matching panel is registered (rootContext.contentIds + registerContent/unregisterContent). robonen TabsTrigger has NO id and NO aria-controls; TabsContent has NO id and NO aria-labelledby. Screen readers cannot associate a tab with its panel.
+  - _evidence:_ reka Tabs/utils.ts + TabsTrigger.vue lines 29-30,42-50 (aria-controls/id) + TabsContent.vue lines 28-29,53-61 (id/aria-labelledby) + TabsRoot.vue contentIds/registerContent. robonen TabsTrigger.vue and TabsContent.vue emit neither id nor aria-controls nor aria-labelledby.
+- ⛔ (keyboard) Keyboard activation (Enter/Space) on a focused trigger is not implemented. reka TabsTrigger has `@keydown.enter.space="rootContext.changeModelValue(value)"`. robonen TabsTrigger only has `@keydown` delegating to ctx.onTriggerKeyDown, and onTriggerKeyDown (TabsRoot.vue rovingKeyToAction) returns null for Enter/Space, so it does nothing. In `activationMode='manual'` a keyboard user can move focus with arrows but CANNOT activate the focused tab via Enter or Space — manual mode is effectively unusable by keyboard.
+  - _evidence:_ reka TabsTrigger.vue line 65 `@keydown.enter.space`. robonen TabsTrigger.vue lines 33-36 only forward to onTriggerKeyDown; src/utils/roving-focus.ts rovingKeyToAction has no Enter/Space case (default: return null).
+
+**Major gaps:**
+- 🔶 (features) No TabsIndicator sub-component. reka ships TabsIndicator.vue which tracks the active tab via ResizeObserver/watchPostEffect and exposes `--reka-tabs-indicator-size` and `--reka-tabs-indicator-position` CSS vars (plus an exposed updateIndicatorStyle method) for animated underlines. robonen has no indicator part at all.
+- 🔶 (features) No exit-animation / Presence support on content. reka wraps TabsContent in `<Presence force-mount>` so panels can play leave transitions before unmount and respects `unmountOnHide` for slot rendering; it also suppresses the mount animation on first render via isMountAnimationPreventedRef + `animationDuration:'0s'`. robonen TabsContent uses a raw `v-if="forceMount || isSelected"`, so inactive panels are removed immediately with no exit animation and no mount-animation guard.
+- 🔶 (api-surface) No `unmountOnHide` prop. reka TabsRoot exposes `unmountOnHide` (default true) and TabsContent uses it to decide whether the slot stays rendered while hidden (forceMount keeps the element but unmountOnHide controls slot content). robonen only has the per-panel `forceMount` boolean and always renders slot content when mounted; there is no way to keep an element mounted (hidden) while still tearing down its slot subtree, nor a root-level toggle.
+- 🔶 (rtl-i18n) dir does not inherit from a global ConfigProvider. reka resolves direction with `useDirection(propDir)` so it falls back to the ConfigProvider/global dir when the prop is omitted. robonen TabsRoot hardcodes `dir = 'ltr'` default and never consults useConfig()/ConfigContext, despite robonen HAVING a config-provider with a reactive `dir`. RTL apps using ConfigProvider get LTR tab navigation unless dir is repeated on every TabsRoot.
+
+**Minor gaps (6):**
+- ▫️ (keyboard) PageUp/PageDown navigation not handled. reka RovingFocus MAP_KEY_TO_FOCUS_INTENT maps PageUp->first and PageDown->last (used by Tabs via RovingFocusGroup). robonen rovingKeyToAction only handles Arrow/Home/End and returns null for PageUp/PageDown.
+- ▫️ (types) value type is narrower. reka TabsRoot/Trigger/Content are generic over `T extends StringOrNumber` (string | number) with the v-model payload typed as T. robonen types value as `string` only (TabsRootProps.defaultValue: string, defineModel<string|undefined>, TabsTriggerProps.value: string), so numeric tab values are not first-class and the model is not generically inferred.
+- ▫️ (keyboard) No entry-focus / group-tabindex management when tabbing INTO the tablist. reka RovingFocusGroup toggles the group tabindex (0/-1) and on focus dispatches an entryFocus event then focuses the active/highlighted/current item (handleFocus + focusFirst), with `preventScrollOnEntryFocus` and shift+Tab tab-out tracking. robonen sets per-trigger roving tabindex (selected=0 else -1) which covers the common case, but has no group-level entry focus, no preventScrollOnEntryFocus, and no shift+Tab 'tab back out' handling.
+- ▫️ (edge-cases) Pointer activation uses click, not guarded mousedown. reka activates on `@mousedown.left` and explicitly guards ctrlKey (avoids MacOS ctrl-click context menu accidentally activating) and calls event.preventDefault() to avoid accidental activation for disabled. robonen uses `@click` with no ctrl-click guard; activation therefore fires later (on click) and does not defend against ctrl+left-click.
+- ▫️ (accessibility) focusFirst scroll-fallback behavior absent. reka focusFirst iterates candidate nodes and supports `{ preventScroll }`, bailing when focus already on target and trying the next candidate if focus did not move (e.g. element became unfocusable). robonen just calls `target.focus()` on the single resolved index with no preventScroll and no fallback if that element refuses focus.
+- ▫️ (edge-cases) Root keydown still navigates focus even when root is disabled. robonen onTriggerKeyDown does not check ctx.disabled, so with `disabled: true` on root, Arrow keys still move focus between triggers (only selection is blocked). reka's disabled handling is per-item via RovingFocus focusable, keeping disabled items out of the candidate set consistently. Minor because robonen does filter [data-disabled] items, but a fully-disabled root should arguably not roam focus.
+
+**Recommendations to make robonen strictly better:**
+- Add ARIA wiring: generate stable ids (e.g. via config-provider useId) for triggers and panels; set id+aria-controls on TabsTrigger and id+aria-labelledby on TabsContent. Mirror reka's contentIds registry (registerContent/unregisterContent in TabsRoot) so aria-controls is only emitted when a matching TabsContent is mounted (reka covers this exact case in Tabs.test.ts).
+- Implement Enter/Space activation on TabsTrigger (add `@keydown.enter.space` calling ctx.select(value), or add Enter/Space handling to onTriggerKeyDown). Without it, activationMode='manual' is broken for keyboard users.
+- Add a TabsIndicator sub-component exposing --robonen-tabs-indicator-size/position CSS vars, tracking the active tab via ResizeObserver, with an exposed updateIndicatorStyle() method (port reka TabsIndicator.vue).
+- Wrap TabsContent in the existing Presence primitive (src/presence) and add an `unmountOnHide` prop on TabsRoot so panels can play exit animations and optionally keep elements mounted-but-hidden; add a mount-animation guard (animationDuration:'0s' on first frame) like reka's isMountAnimationPreventedRef.
+- Inherit direction from ConfigProvider: in TabsRoot resolve `dir` via useConfig().dir when the dir prop is omitted (robonen already has config-provider/context.ts with a reactive dir).
+- Extend rovingKeyToAction to map PageUp->home and PageDown->end (and consider Enter/Space) so Tabs gets PageUp/PageDown navigation for free.
+- Make the components generic over `T extends string | number` (StringOrNumber) for value/defaultValue/model to support numeric tab values and proper v-model inference.
+- Add guarded pointer activation: switch TabsTrigger to `@mousedown.left` with an `event.ctrlKey === false` guard (and preventDefault on disabled) to match reka and avoid ctrl-click activation on macOS.
+- Optionally add group entry-focus behavior (focus the active/highlighted item when Tab enters the tablist, preventScrollOnEntryFocus, shift+Tab tab-out) — robonen already has a roving-focus/ RovingFocusGroup that could be reused by TabsList instead of the hand-rolled root keydown.
+- Guard onTriggerKeyDown with `if (disabled) return` so a fully disabled root does not roam focus; and use a focusFirst-style helper with {preventScroll} and a next-candidate fallback when the target refuses focus.
+
+**Where robonen is already better:**
+- ✅ DOM-order navigation via Collection: TabsRoot derives `tabElements` from `useCollectionProvider().getItems(true)` and filters `[data-disabled]` at keydown time, so reordered/portaled triggers and dynamic disabled state are handled from live DOM order. reka relies on RovingFocus + Collection too, but robonen keeps it self-contained without the extra RovingFocus indirection.
+- ✅ Keyboard handler centralized in TabsRoot.onTriggerKeyDown with explicit `resolveNextIndex(... , loop)` clamp-vs-wrap logic and a single source of truth, vs reka splitting logic across RovingFocusGroup/RovingFocusItem/utils.
+- ✅ Root-level `disabled` prop genuinely gates selection (`select()` early-returns when `ctx.disabled`) and merges into each trigger's `isDisabled`/`data-disabled`; reka Tabs has no root-level `disabled` prop at all (only per-trigger disabled).
+- ✅ `loop` is configured on TabsRoot (root-owned) and threaded through context; reka places `loop` on TabsList only, which is arguably less discoverable.
+- ✅ Uses `toRef(() => prop)` identity passthroughs for orientation/dir/loop/disabled/activationMode instead of `computed`, avoiding effect/cache overhead for plain pass-throughs.
+
+
+### toolbar  —  _reka-better_
+
+**Parts reka has that robonen lacks:** ToolbarLink, ToolbarToggleGroup, ToolbarToggleItem
+
+reka-ui's Toolbar is currently more complete and more correct than robonen's. Sub-component coverage: reka ships ToolbarLink, ToolbarToggleGroup, and ToolbarToggleItem in addition to Root/Button/Separator; robonen has only Root/Button/Separator and exports no integration for its existing toggle-group, and naive nesting would create two competing roving controllers. Critically, robonen's arrow navigation does not skip disabled items (it builds the item list with includeDisabled=true and calls .focus() on disabled buttons, which silently fails and traps focus) - robonen's own ToggleGroupRoot already filters disabled, so the toolbar simply omitted it. robonen is also missing PageUp/PageDown navigation, Shift+Tab tab-back-out tracking + group entry-focus (so a toolbar with all-disabled items can fall out of the tab order entirely), modifier-key and event.target guards, preventScrollOnEntryFocus, ConfigProvider dir inheritance, controlled current-tab-stop, and ToolbarLink's Space-to-click. robonen does have genuine wins: its ToolbarSeparator auto-inverts orientation (horizontal toolbar -> vertical separator) whereas reka passes orientation straight through, and its standalone Separator (not yet reused by the toolbar) already supports decorative + conditional aria-orientation. Verdict: reka-better; the disabled-skip bug is the highest-priority fix, followed by adding the missing toggle/link parts and the group-level focus/tab-out semantics.
+
+**Critical gaps:**
+- ⛔ (keyboard) robonen arrow navigation does NOT skip disabled items and will silently fail to move focus when the next item is disabled. ToolbarRoot builds `items = getItems(true)` (includeDisabled=TRUE), and onItemKeyDown/focusIndex operate over that full list with no data-disabled filter, then call el.focus() on a disabled <button> which cannot receive focus, so focus stays stuck. Reka's RovingFocusItem.handleKeydown filters `getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')` before navigating. robonen's own ToggleGroupRoot DOES filter (`items.value.filter(x => !x.hasAttribute('data-disabled'))`) - the Toolbar simply forgot to.
+  - _evidence:_ reka RovingFocusItem.vue line 68 `.filter(i => i.dataset.disabled !== '')`; robonen ToolbarRoot.vue line 27 `getItems(true)` + lines 39-48 onItemKeyDown have no disabled filter, contrast robonen ToggleGroupRoot.vue line 106
+
+**Major gaps:**
+- 🔶 (keyboard) Missing PageUp/PageDown keys. Reka maps PageUp->'first' and PageDown->'last' (MAP_KEY_TO_FOCUS_INTENT), so they jump to first/last item. robonen's rovingKeyToAction only handles Arrow*/Home/End and returns null for PageUp/PageDown.
+- 🔶 (features) No ToolbarToggleGroup / ToolbarToggleItem sub-components. Reka ships both, wrapping ToggleGroupRoot/ToggleGroupItem with `:roving-focus="false"` so the toolbar's roving group owns navigation while toggle single|multiple v-model still works. robonen has a standalone toggle-group primitive but the toolbar exports nothing to integrate it, and naively nesting robonen's ToggleGroupRoot inside ToolbarRoot would create TWO competing roving-focus controllers (both register their own Collection + arrow handlers), breaking navigation.
+- 🔶 (features) No ToolbarLink sub-component. Reka ToolbarLink renders an <a> as a roving item AND adds Space-to-click behavior (`if (event.key === ' ') currentTarget.click()`) because anchors don't activate on Space natively. robonen has no Link part, so toolbar links lose roving participation and Space activation.
+- 🔶 (keyboard) No Shift+Tab tab-back-out handling and no group-level entry tabindex. Reka's RovingFocusGroup tracks isTabbingBackOut (set by RovingFocusItem on Shift+Tab) and renders the GROUP element with `:tabindex="isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0"`, plus an @focus entry-focus handler that focuses the active/highlighted/current candidate via focusFirst. robonen ToolbarRoot has no group tabindex, no entryFocus, no Shift+Tab tracking.
+- 🔶 (accessibility) Toolbar can become unreachable when the active item is disabled or all items are disabled. Reka keeps the group focusable (tabindex 0 with entry focus to first enabled item) and filters disabled from candidates. robonen pins tabindex=0 to the isActive item only; if that item is disabled it renders tabindex=-1, so the toolbar can have ZERO tabbable elements and drop out of the tab sequence with no fallback.
+
+**Minor gaps (7):**
+- ▫️ (accessibility) Separator: no `decorative` prop and always emits aria-orientation even for horizontal. Reka routes through BaseSeparator which supports decorative (role='none', removed from a11y tree) and only sets aria-orientation when vertical (horizontal is the ARIA default). robonen ToolbarSeparator hardcodes role="separator" and always renders :aria-orientation. robonen's OWN standalone Separator.vue already does both correctly - the toolbar separator just doesn't reuse it.
+- ▫️ (keyboard) No modifier-key guard. Reka RovingFocusItem ignores arrow nav when metaKey/ctrlKey/altKey (or shiftKey unless allowShiftKey) is held: `if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey)) return`. robonen calls preventDefault and navigates on any matching arrow key regardless of modifiers, hijacking e.g. Ctrl+Home.
+- ▫️ (keyboard) No `event.target === event.currentTarget` guard before handling keys. Reka RovingFocusItem returns early if the keydown originated from a descendant (lines 55-56), so keys typed inside a nested input aren't hijacked for roving. robonen ToolbarButton.onKeyDown forwards every keydown to ctx regardless of target.
+- ▫️ (edge-cases) No preventScrollOnEntryFocus; focus uses default scroll behavior. Reka exposes preventScrollOnEntryFocus and calls `.focus({ preventScroll })` via focusFirst. robonen focusIndex calls plain el.focus() with no preventScroll option and no prop to control it.
+- ▫️ (api-surface) No currentTabStopId v-model / defaultCurrentTabStopId / entryFocus emit. Reka's RovingFocusGroup supports controlled+uncontrolled current tab stop and emits entryFocus. robonen toolbar exposes no way to control or observe which item currently holds the tab stop.
+- ▫️ (api-surface) ToolbarButton does not forward arbitrary PrimitiveProps/asChild as deliberately as reka. Reka ToolbarButton does `v-bind="props"` spreading all PrimitiveProps (incl. asChild) onto the Primitive; robonen ToolbarButton only wires as/type/tabindex/disabled/data-disabled, so the asChild composition pattern reka relies on for ToolbarToggleItem is not surfaced.
+- ▫️ (rtl-i18n) No ConfigProvider/global dir inheritance. Reka resolves dir via useDirection(propDir) which falls back to the global ConfigProvider direction when dir is omitted. robonen takes dir only as a local prop defaulting to 'ltr', so app-wide RTL config won't reach the toolbar automatically.
+
+**Recommendations to make robonen strictly better:**
+- Filter disabled items out of roving navigation: in ToolbarRoot use `getItems()` (which already drops data-disabled) for the navigable list, or filter `items.value.filter(el => el.dataset.disabled !== '')` inside onItemKeyDown before computing the next index - mirror what robonen's own ToggleGroupRoot already does. This fixes the critical 'focus stuck on disabled' bug.
+- Add PageUp/PageDown to rovingKeyToAction: map PageUp -> {absolute:'home'} and PageDown -> {absolute:'end'} so the shared util matches reka (also benefits ToggleGroup/RadioGroup reusing it).
+- Add a ToolbarLink component (default as:'a', participates in roving as a Collection item, with a keydown handler `if (e.key === ' ') currentTarget.click()` to give anchors Space activation).
+- Add ToolbarToggleGroup + ToolbarToggleItem that wrap robonen's existing ToggleGroupRoot/ToggleGroupItem with roving-focus=false (forwarding orientation/dir from toolbar context), so toggle state works without spawning a second competing roving controller; wrap ToolbarToggleItem as-child so it joins the toolbar's Collection.
+- Make the toolbar reachable when items are disabled: track focusableItemsCount and isTabbingBackOut at Root, render group tabindex=`(tabbingBackOut || focusableCount===0) ? -1 : 0`, add an entry-focus handler that focuses the first enabled/active/current item, and re-point the active tab stop to the first ENABLED item rather than a fixed index 0.
+- Add modifier-key and target guards in keydown: bail when metaKey/ctrlKey/altKey (and shiftKey unless an allowShiftKey opt) is held, and when `event.target !== event.currentTarget`, so nested inputs and browser shortcuts aren't hijacked.
+- Reuse robonen's own Separator.vue (already supports decorative + conditional aria-orientation) for ToolbarSeparator while keeping the orientation auto-inversion, adding a decorative prop, and omitting aria-orientation when horizontal.
+- Add preventScrollOnEntryFocus and call el.focus({ preventScroll }); consider exposing controlled/uncontrolled current tab stop (modelValue) and an entryFocus emit for parity with reka's RovingFocusGroup.
+- Resolve dir through ConfigProvider (a useDirection equivalent) instead of a hardcoded 'ltr' default so global RTL config propagates.
+- Support asChild on ToolbarButton (and document the pattern) so consumers can compose custom interactive elements, matching reka's v-bind=props + as-child usage required by ToolbarToggleItem.
+
+**Where robonen is already better:**
+- ✅ Separator orientation auto-inversion: robonen ToolbarSeparator computes `effective = orientation ?? (ctx.orientation === 'horizontal' ? 'vertical' : 'horizontal')`, so a horizontal toolbar yields a vertical separator automatically. Reka's ToolbarSeparator passes `rootContext.orientation.value` straight through to BaseSeparator (NO inversion), so a horizontal reka toolbar renders a horizontal separator with aria-orientation matching the toolbar axis, which is less correct visually/semantically. Genuine robonen correctness win.
+- ✅ `toRef`-based context passthroughs (`toRef(() => orientation)`) avoid the extra effect/cache overhead of `computed`, a minor reactivity-perf nicety over reka's `toRefs(props)`.
+- ✅ robonen keeps the roving math in a small pure, testable util (`resolveNextIndex`, `rovingKeyToAction`) rather than reka's per-keystroke array reverse + `wrapArray` slicing; slightly cheaper per keydown (no array clone/reverse).
+- ✅ robonen ToolbarButton sets `data-disabled=''` and correct aria/tabindex for the active roving item, matching reka conventions.
+
+
+### checkbox  —  _reka-better_
+
+**Parts reka has that robonen lacks:** CheckboxGroupRoot.vue — multi-checkbox group with array model, roving-focus keyboard nav, group-level disabled/name/required, utils.ts — shared isIndeterminate/getState helpers (robonen inlines this logic in both components, duplicated)
+
+reka-ui's Checkbox is a meaningfully larger primitive: it ships a full CheckboxGroupRoot with array v-model and roving-focus keyboard navigation, generic value typing via trueValue/falseValue, Presence-backed indicator exit animations, SSR-safe form-control gating, native-event-dispatching hidden inputs (VisuallyHiddenInput), and auto aria-label derivation from associated labels. robonen's Checkbox covers only the standalone single-boolean case competently (correct role/aria-checked=mixed/data-state, controlled+uncontrolled via defineModel, defaultChecked, disabled, Enter-preventDefault, hidden input for name, and forceMount prop) and is slightly leaner in reactivity for that case, but it is missing the group component, roving focus, arbitrary value modeling, working exit animations, SSR/form-event fidelity, and label-based aria-label. Notably robonen already owns RovingFocusGroup, Presence, and VisuallyHidden primitives but does not wire any of them into Checkbox. Verdict: reka-better; closing the listed gaps (especially CheckboxGroupRoot + roving focus, trueValue/falseValue, and Presence in the indicator) would move robonen to parity or better.
+
+**Critical gaps:**
+- ⛔ (features) No CheckboxGroupRoot component at all. reka ships CheckboxGroupRoot.vue providing a v-model array of selected values, group-level disabled, name, required, and roving-focus wiring (injectCheckboxGroupRootContext). robonen has zero group concept, so consumers cannot build a managed checkbox group with shared state/keyboard nav.
+  - _evidence:_ reka CheckboxGroupRoot.vue (provideCheckboxGroupRootContext with modelValue: Ref<AcceptableValue[]>, rovingFocus, disabled); CheckboxRoot.vue lines 80-122 read checkboxGroupContext to push/splice into the array. robonen/checkbox has no CheckboxGroupRoot file or context.
+
+**Major gaps:**
+- 🔶 (keyboard) No roving-focus / arrow-key navigation. In a group, reka renders RovingFocusItem instead of Primitive (CheckboxRoot.vue line 138, :focusable bound at line 151) inside RovingFocusGroup, giving ArrowLeft/Right/Up/Down, Home/End, loop, and dir/RTL-aware navigation. robonen's checkbox is always a standalone Primitive with no roving focus, so a set of robonen checkboxes has no managed arrow-key traversal even though robonen HAS a RovingFocusGroup/RovingFocusItem primitive available it could wire in.
+- 🔶 (api-surface) No trueValue/falseValue and no generic value typing. reka's CheckboxRoot is generic <T = boolean> with trueValue/falseValue (props lines 27-31, defaults lines 64-65) so v-model can hold arbitrary values (e.g. 'yes'/'no', objects) using isEqual comparison (line 89). robonen hardcodes CheckedState = boolean | 'indeterminate' and toggles only true/false; the `value` prop is merely the hidden-input value, never the model value.
+- 🔶 (features) Indicator does not use Presence, so the documented forceMount-for-exit-animations use case does not actually work. reka wraps the indicator in <Presence :present=...> (CheckboxIndicator.vue lines 29-31) enabling enter/exit animation hooks; robonen uses a bare `v-if` (CheckboxIndicator.vue line 25), which unmounts instantly with no exit animation, even though robonen ships a Presence primitive and even though its forceMount prop's JSDoc says 'for CSS exit animations'.
+- 🔶 (forms) Hidden form input does not emit native input/change events on programmatic value change, so listeners on the hidden input / some form libraries relying on real DOM events will not fire. reka's VisuallyHiddenInputBubble dispatches bubbling input+change Events via the native value setter when the value changes (watch in VisuallyHiddenInputBubble.vue). robonen binds :checked declaratively only.
+
+**Minor gaps (6):**
+- ▫️ (ssr) No SSR-safe form-control gating. reka uses useFormControl(currentElement) which returns true during SSR and only renders the hidden input when inside a <form> (CheckboxRoot.vue line 163, useFormControl defaults true so events bubble without JS on SSR). robonen renders the hidden input whenever `name` is set regardless of being in a form, and has no SSR-aware default — minor functional divergence and a stray hidden input outside forms.
+- ▫️ (accessibility) No automatic aria-label derivation from an associated label. reka derives aria-label from document.querySelector(`[for="${id}"]`).innerText when an id is provided (CheckboxRoot.vue lines 125-127, bound line 147), improving SR naming when a visual <label for> is used. robonen has no id prop and no aria-label wiring.
+- ▫️ (api-surface) No `id` prop on the root. reka exposes id (props line 23) and binds it (template line 140), which both anchors the aria-label lookup and gives a stable hook for external <label for>. robonen's CheckboxRoot has no id prop (relies entirely on fall-through attrs).
+- ▫️ (types) `value` prop is narrowly typed to string. reka types value as AcceptableValue (string | number | boolean | Record | null) (props line 21) and the hidden input serializes arrays/objects/required-empty-arrays via VisuallyHiddenInput. robonen types value?: string only and cannot serialize non-string values.
+- ▫️ (api-surface) Slot contract is thinner. reka's default slot exposes both modelValue and state (defineSlots lines 69-76; provided at template lines 157-160). robonen exposes only `checked` (CheckboxRoot.vue line 85, CheckboxIndicator line 30). With trueValue/falseValue, reka's modelValue slot prop is meaningfully distinct from state; robonen cannot express that.
+- ▫️ (code-quality) Duplicated indeterminate/state logic instead of shared util. reka centralizes isIndeterminate/getState in utils.ts and reuses across Root + Indicator. robonen inlines the same ternary in CheckboxRoot.vue (lines 76,79) and CheckboxIndicator.vue (line 26), risking drift.
+
+**Recommendations to make robonen strictly better:**
+- Add a CheckboxGroupRoot component mirroring reka: provide a group context with an array modelValue (v-model), group-level disabled/name/required, and rovingFocus toggle; have CheckboxRoot inject it and, when present, render robonen's existing RovingFocusItem instead of Primitive (wrapped by RovingFocusGroup in the group root) to get arrow/Home/End/loop/RTL navigation for free.
+- Make CheckboxRoot generic over the value type and add trueValue/falseValue props (defaults true/false) so v-model can hold arbitrary values; use a structural-equality helper (or shallow compare) to derive isChecked and toggle between trueValue/falseValue, with 'indeterminate' -> trueValue on click as reka does.
+- Wrap CheckboxIndicator's content in robonen's Presence component (present = forceMount || checked is indeterminate || checked === true) so the existing forceMount prop actually enables CSS exit animations, instead of the current instant-unmount v-if.
+- Replace the inline hidden <input> with robonen's VisuallyHidden as=input (or a VisuallyHiddenInput-style helper) that dispatches native bubbling input+change events on value change via the native value setter, and gate it behind an SSR-safe useFormControl(currentElement) check (default true on SSR; otherwise el.closest('form')).
+- Add aria-label auto-derivation: accept an id prop, bind it on the root, and compute aria-label from document.querySelector(`[for=id]`).innerText when no explicit aria-label is supplied (guard for SSR).
+- Widen the value prop type to an AcceptableValue equivalent and serialize array/object/required-empty values in the hidden input the way reka's VisuallyHiddenInput does.
+- Extract isIndeterminate/getState into a checkbox utils.ts and reuse in Root + Indicator to remove the duplicated state ternaries.
+- Expand the default slot to expose both modelValue and state (not just checked) to match reka's richer slot contract, especially once trueValue/falseValue land.
+
+**Where robonen is already better:**
+- ✅ No runtime dependency on ohash isEqual for the common boolean case; robonen's toggle is a plain boolean flip, so it is lighter when only boolean checkboxes are used.
+- ✅ Micro-optimization: provides disabled via toRef(() => disabled) instead of a computed, and forwards the existing localChecked Ref directly to context without an extra computed wrapper (CheckboxRoot.vue lines 60-65) — slightly fewer reactive effects than reka's two computeds (disabled, checkboxState).
+- ✅ Hidden input is rendered with a concrete inline style that visually hides without an extra component layer; the markup is simpler than reka's VisuallyHiddenInput -> VisuallyHiddenInputBubble -> VisuallyHidden chain for the trivial single-boolean case.
+
+
+### toggle-group  —  _reka-better_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput (form-submission hidden input rendered by Root), Composed RovingFocusGroup/RovingFocusItem wrappers, Composed Toggle base component for items
+
+reka's ToggleGroup is currently better. Both cover the core single/multiple toggle behavior, click/Arrow/Home/End navigation, loop, orientation, disabled, RTL-aware Left/Right, controlled+uncontrolled state, and roving tab-stop. But reka is meaningfully ahead on: (1) native form integration via a VisuallyHiddenInput + useFormControl (robonen has none, package-wide) - critical; (2) AcceptableValue (string/number/bigint/object/null) with deep equality vs robonen's string-only identity comparison; (3) automatic single/multiple type inference + dev validation vs robonen's explicit-only, unsoundly-typed `type`; (4) inherited global `dir` from ConfigProvider; and (5) far deeper roving focus (PageUp/PageDown, modifier-key guards, Shift+Tab tab-out, entry-focus prioritization, Safari mousedown, group tabindex) because reka composes its RovingFocusGroup/RovingFocusItem and Toggle primitives. Ironically robonen already ships an equivalent RovingFocusGroup/RovingFocusItem and Toggle primitive but the toggle-group reimplements a thinner version inline and uses none of them. robonen is genuinely better in two narrow areas: it uses proper radiogroup/radio ARIA semantics for single-select (reka uses group + aria-pressed even in single mode), and it adds a convenience `valueChange` emit and a normalized array slot value. Closing the form, value-type, type-inference, dir-inheritance, and roving-focus gaps (largely by composing robonen's own existing primitives) would make it strictly better.
+
+**Critical gaps:**
+- ⛔ (forms) No form integration whatsoever. reka renders a VisuallyHiddenInput (gated by useFormControl) with the selected value(s) when `name` is set, so the toggle group participates in native form submission (including array-name encoding name[0], name[1] and a required-empty-array fallback input). robonen's ToggleGroupRootProps has no `name`/`required` props, no hidden input, and there is no useFormControl/VisuallyHiddenInput utility anywhere in the primitives package.
+  - _evidence:_ reka ToggleGroupRoot.vue lines 96-101 render <VisuallyHiddenInput :name :required :value=modelValue> guarded by `isFormControl = useFormControl(currentElement)`; FormFieldProps adds name/required (shared/types.ts). robonen ToggleGroupRoot.vue has no name/required props and grep for useFormControl/VisuallyHiddenInput/closest('form') across src returns nothing.
+
+**Major gaps:**
+- 🔶 (api-surface) Values are restricted to `string` only and compared by identity. reka supports AcceptableValue = string | number | bigint | Record<string,any> | null for both single and multiple, and compares with deep `isEqual` (ohash) via isValueEqualOrExist, so object/number/bigint values and value-based equality work.
+- 🔶 (types) No automatic single/multiple type inference or coherence validation. reka infers `type` from whether modelValue/defaultValue is an array and emits dev-time errors when type and value shape disagree; robonen requires an explicit `type` prop (defaults to 'single') and performs no validation. Worse, robonen's typing lets `modelValue: string | string[]` be passed with type 'single', which silently breaks.
+- 🔶 (rtl-i18n) Global/inherited direction is ignored. reka resolves `dir` via useDirection(propDir) so it inherits from ConfigProvider when the prop is omitted; robonen hardcodes the default to 'ltr' and never consults useConfig().dir even though a config-provider with a reactive `dir` exists in the package.
+- 🔶 (code-quality) robonen does not reuse its own RovingFocusGroup/RovingFocusItem primitive (which already implements entry-focus, Shift+Tab, mousedown, PageUp/PageDown, modifier guards, data-active prioritization). The toggle-group reimplements a thinner roving algorithm inline, so it permanently lags the dedicated primitive. reka composes RovingFocusGroup/RovingFocusItem and gets all of that for free.
+
+**Minor gaps (6):**
+- ▫️ (keyboard) Keyboard navigation is missing PageUp/PageDown (jump to first/last). reka's RovingFocus maps PageUp->first and PageDown->last in MAP_KEY_TO_FOCUS_INTENT; robonen's inline rovingKeyToAction only handles Arrow keys + Home/End.
+- ▫️ (keyboard) Navigation does not guard against modifier keys, so Ctrl/Meta/Alt/Shift + Arrow still hijack focus and call preventDefault. reka returns early on event.metaKey/ctrlKey/altKey (and shiftKey unless allowShiftKey).
+- ▫️ (keyboard) No Shift+Tab tab-out handling or group-level entry focus. reka's RovingFocusGroup tracks isTabbingBackOut (onItemShiftTab) and sets the group container tabindex to -1 while tabbing out, plus an onEntryFocus mechanism that focuses the active/highlighted/current item with preventScrollOnEntryFocus support when focus enters the group. robonen has none of this — focus only moves between items, the group container is not part of the tab sequence, and there is no entry-focus prioritization.
+- ▫️ (edge-cases) Mousedown focus handling for Safari is absent. reka's RovingFocusItem focuses on mousedown (Safari does not focus buttons on click) and prevents focusing non-focusable items on mousedown; robonen's Item only has @click and @keydown.
+- ▫️ (code-quality) ToggleGroupItem is not composed from a Toggle primitive, so it does not inherit Toggle's slot props or future Toggle features. reka's item wraps the Toggle component and forwards its slot props (modelValue/state/pressed/disabled). robonen's item only exposes `:pressed` and reimplements the toggle button inline, duplicating logic and diverging from its own existing Toggle primitive.
+- ▫️ (edge-cases) The deep watch on modelValue does a manual shallow array diff and returns early when v is undefined, which means an external reset to undefined cannot clear the controlled value. reka uses useVModel (passive/deep) which correctly tracks controlled undefined and deep object changes.
+
+**Recommendations to make robonen strictly better:**
+- Add form integration: introduce `name`/`required` props (FormFieldProps-equivalent) on ToggleGroupRoot, a `useFormControl(currentElement)` composable (closest('form'), default true for SSR), and a VisuallyHiddenInput bubble component that emits the selected value(s) with array-name encoding and a required-empty fallback. Grab `currentElement` from useForwardExpose in the Root to feed useFormControl.
+- Generalize value type from `string` to an AcceptableValue (string | number | bigint | Record<string,any> | null) and replace identity comparisons (.includes / ===) with a deep-equality helper (port reka's isValueEqualOrExist + isEqual). Update ToggleGroupItemProps.value and the context value type accordingly.
+- Replace the explicit-only `type` with discriminated SingleOrMultipleProps<T> typing and add a useSingleOrMultipleValue-style composable that infers type from modelValue/defaultValue and logs dev-time coherence errors; this also fixes the unsound `modelValue: string | string[]` typing for single mode.
+- Consume the global direction: default `dir` to useConfig().dir (via a useDirection-style wrapper) instead of the hardcoded 'ltr' literal so RTL inherits from ConfigProvider.
+- Refactor ToggleGroupRoot/Item to compose the existing RovingFocusGroup/RovingFocusItem primitives (conditionally on `rovingFocus`) instead of the inline utils/roving-focus algorithm. This instantly adds PageUp/PageDown, modifier-key guards, Shift+Tab tab-out, entry-focus prioritization (data-active/highlighted/current), Safari mousedown focus, preventScrollOnEntryFocus, and group-level tabindex management, and removes duplicated logic.
+- Compose ToggleGroupItem from the existing Toggle primitive and forward its slot props (modelValue/state/pressed/disabled) so the item stays in sync with Toggle and exposes richer slot data.
+- Fix the controlled watch so an external reset of modelValue to undefined clears the value (do not early-return on undefined), and use deep equality when diffing object values.
+- Add PageUp/PageDown handling (and modifier-key guards) to utils/roving-focus.rovingKeyToAction if the inline path is retained instead of migrating to the primitive.
+
+**Where robonen is already better:**
+- ✅ Items are sourced from a real Collection (useCollectionProvider/getItems(true)) so DOM order survives v-for reorders, and the Root computes the enabled-items list once and reuses it for both navigation and tab-stop resolution. reka's RovingFocus also uses a Collection, so this is parity, but robonen keeps it self-contained without the extra RovingFocusGroup component overhead.
+- ✅ ToggleGroupRoot exposes a `valueChange` emit in addition to `update:modelValue`. reka only emits `update:modelValue` (ToggleGroupRoot.vue ToggleGroupRootEmits), so robonen gives consumers a dedicated change event without needing a watcher.
+- ✅ The Root default slot is given `:value="localValue"` (always the normalized string[] of selected values), and each Item slot receives `:pressed`. reka's Root slot gives `model-value` (raw) and the Item slot just forwards Toggle's slot props; robonen's normalized array slot is slightly more predictable to consume.
+- ✅ robonen sets `role="radiogroup"` on the Root and `role="radio"` for single-type items, which is the more semantically correct ARIA pattern for single-select. reka hardcodes `role="group"` on the Root for both single and multiple and relies on Toggle's `aria-pressed` even in single mode (no radio semantics), so robonen's single-mode accessibility semantics are actually better here.
+
+
+### number-field  —  _reka-better_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput (form submission, rendered inside Root), usePressedHold composable (press-and-hold auto-repeat), useNumberFormatter / useNumberParser (Intl formatting/parsing), handleDecimalOperation (decimal-safe arithmetic), injectNumberFieldRootContext exported from index for external composition
+**Parts robonen has that reka lacks:** Exposed imperative methods (increment/decrement/setValue) on Root via defineExpose
+
+Both libraries ship the same four parts (Root, Input, Increment, Decrement) and cover core keyboard handling (Arrow/Page/Home/End) and ARIA spinbutton wiring. robonen is genuinely leaner in its reactivity model, exposes imperative methods on Root, and has a cleaner null empty-state contract. However reka-ui is currently materially ahead on substance: it has real form integration via a VisuallyHiddenInput plus name/required/id FormFieldProps; full Intl number formatting/parsing with locale and formatOptions; beforeinput keystroke validation; press-and-hold auto-repeat steppers; mouse-wheel support with invert/disable options; step snapping with decimal-safe arithmetic; at-boundary isIncrease/DecreaseDisabled with per-button disabled; commit-on-blur/Enter reformatting; focusOnChange; role='group'; labeled (not aria-hidden) stepper buttons; and proper Primitive/asChild polymorphism plus inheritAttrs handling. robonen also drops asChild on Root and hardcodes the Input as a literal <input>, and it hides the stepper buttons from assistive tech. Net: reka-better today, with a clear, concrete path to make robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (forms) No form integration / hidden input. reka renders <VisuallyHiddenInput> when isFormControl && name, submitting the value with the surrounding form. robonen's NumberFieldInput is the actual focusable spinbutton with role=spinbutton, type defaults to nothing/input — but it puts name/required on a role=spinbutton input, and there is NO hidden native number input for reliable form submission, and Root has no name/required/id FormFieldProps at all.
+- 🔶 (features) No internationalized number formatting/parsing. reka supports formatOptions: Intl.NumberFormatOptions and locale, using @internationalized/number NumberFormatter/NumberParser for currency, percent, grouping separators, decimal localization, and computing inputMode (numeric vs decimal) from resolved fraction digits.
+- 🔶 (edge-cases) No input validation on keystroke. reka uses @beforeinput with numberParser.isValidPartialNumber(nextValue, min, max) to reject invalid characters before they enter the field; robonen lets any text be typed and only nulls it out after the fact.
+- 🔶 (features) No press-and-hold auto-repeat on increment/decrement buttons. reka's usePressedHold repeats every 60ms after a 400ms initial delay while the pointer is held, and exposes data-pressed and userSelect:none. robonen buttons only fire once per click.
+- 🔶 (features) No mouse-wheel support. reka increments/decrements on wheel scroll when focused, with disableWheelChange and invertWheelChange props and trackpad axis-magnitude heuristics. robonen has no wheel handling.
+- 🔶 (edge-cases) No step snapping. reka snaps the value to the nearest valid step boundary (snapValueToStep) with a stepSnapping prop to disable it; robonen only clamps to min/max and never snaps off-grid values to the step grid.
+- 🔶 (edge-cases) Decimal-safe arithmetic missing. reka uses handleDecimalOperation to avoid floating-point drift (e.g. 0.1+0.2) when stepping and when computing isIncrease/DecreaseDisabled. robonen does base + delta directly, so step=0.1 accumulates 0.30000000000000004.
+- 🔶 (features) Increment/Decrement buttons cannot reflect at-boundary disabled state and have no per-button disabled prop. reka computes isIncreaseDisabled/isDecreaseDisabled (value at max/min) and accepts a local disabled prop, disabling the button and exposing data-disabled when the next step would exceed the bound. robonen buttons are only disabled by global disabled/readonly.
+- 🔶 (accessibility) Buttons are aria-hidden='true' in robonen, removing them entirely from the accessibility tree, whereas reka exposes them with aria-label='Increase'/'Decrease'. Hiding interactive controls from AT is worse for SR users who navigate by control.
+- 🔶 (api-surface) as-child not forwarded on Root in robonen. reka passes :as-child="asChild" to its Primitive; robonen Root passes :as only and never forwards asChild from PrimitiveProps, so polymorphic asChild rendering on the group is broken.
+- 🔶 (api-surface) Input/Increment/Decrement do not forward asChild either, and the Input is a hardcoded <input> element rather than Primitive, so as/asChild on the Input is ignored. reka's Input is a Primitive (as='input' default) supporting polymorphism.
+
+**Minor gaps (6):**
+- ▫️ (accessibility) Input is not natively focusable/tabbable with explicit tabindex=0, and lacks autocorrect/spellcheck/aria-roledescription. reka sets tabindex=0, autocorrect='off', spellcheck='false', aria-roledescription='Number field' for better SR/typing behavior.
+- ▫️ (accessibility) Root is missing role='group'. reka sets role='group' on the Root container so the spinbutton + buttons are exposed as a labeled group. robonen Root renders a bare Primitive with only data-* attributes.
+- ▫️ (edge-cases) No commit-on-blur / commit-on-Enter reformatting. reka calls applyInputValue on @change, @keydown.enter and @blur to re-clamp, snap, and reformat the displayed text; robonen commits live on every input and never reformats/snaps on blur.
+- ▫️ (keyboard) No focusOnChange behavior. reka refocuses the input when value changes via buttons (focusOnChange default true) so keyboard users keep context after clicking a stepper. robonen does not refocus.
+- ▫️ (edge-cases) contextmenu suppression on hold missing. reka adds @contextmenu.prevent on the stepper buttons so a long press does not pop the context menu mid-hold. robonen buttons have no such handler.
+- ▫️ (api-surface) Root does not forward $attrs with inheritAttrs:false, and Input does not v-bind merge external props cleanly. reka sets defineOptions({inheritAttrs:false}) and v-bind="$attrs" on Root so attrs land on the primitive group rather than being lost/duplicated. robonen Root uses default attr inheritance with a manual slot only.
+
+**Recommendations to make robonen strictly better:**
+- Render a VisuallyHiddenInput (robonen already has a VisuallyHidden component to build on) inside Root gated on form presence, and add name/required/id FormFieldProps to NumberFieldRoot so the value participates in native form submission; move name/required off the spinbutton input.
+- Add a usePressedHold-style composable (400ms initial, ~60ms repeat, pointerdown/up/cancel) to NumberFieldIncrement/Decrement, expose data-pressed and set userSelect:none while held, and add @contextmenu.prevent.
+- Add beforeinput validation that parses the prospective value and preventDefaults invalid characters, plus commit-on-blur and commit-on-Enter that re-clamp, snap, and reformat the display.
+- Introduce decimal-safe arithmetic (handleDecimalOperation equivalent) for increment/decrement and add snapValueToStep with a stepSnapping prop so values align to the step grid.
+- Compute isIncreaseDisabled/isDecreaseDisabled in Root (value at/over bound for next step), provide them via context, add a per-button disabled prop, and disable/data-disabled the buttons accordingly.
+- Add wheel support with disableWheelChange and invertWheelChange props and trackpad axis-magnitude heuristics on the input.
+- Add Intl number formatting/parsing: formatOptions and locale props, a textValue derived from a formatter, and derive inputmode (numeric vs decimal) from resolved maximumFractionDigits instead of hardcoding 'decimal'. Pair with a useLocale that respects RTL/dir from ConfigProvider.
+- Improve a11y: set role='group' on Root; stop aria-hidden on the stepper buttons and give them aria-label='Increase'/'Decrease' (configurable); add aria-roledescription='Number field', autocorrect='off', spellcheck='false', and explicit tabindex='0' on the input.
+- Make NumberFieldInput a Primitive (as default 'input') and forward asChild on Root/Input/Increment/Decrement; set inheritAttrs:false + v-bind=$attrs on Root so attrs land on the group.
+- Add focusOnChange (default true) so clicking the steppers returns focus to the input.
+
+**Where robonen is already better:**
+- ✅ Leaner reactivity: toRef identity passthroughs and a single guarded value ref, with no @vueuse/core useVModel dependency.
+- ✅ Exposes increment/decrement/setValue as an imperative API via defineExpose on Root (reka exposes nothing on its Root).
+- ✅ Deterministic null empty-state contract (number | null) instead of reka's undefined/NaN mixing.
+- ✅ Auto-generates and wires a stable inputId via useId so label association works without consumer-supplied id.
+- ✅ Root slot exposes increment/decrement action callbacks for render-prop consumers (reka exposes only modelValue/textValue/readonly).
+
+
+### radio-group  —  _reka-better_
+
+**Parts reka has that robonen lacks:** Radio.vue (standalone radio usable outside a group, with its own value/name/required/checked v-model + form input + select event)
+
+reka-ui's RadioGroup is currently more capable than robonen's on several real axes. Biggest gaps: (1) value typing — reka supports AcceptableValue (number/bigint/object/null with structural isEqual) while robonen is string-only with ===; (2) keyboard — reka handles PageUp/PageDown (first/last), robonen does not; (3) RTL/i18n — reka resolves dir via ConfigProvider (useDirection) while robonen hardcodes 'ltr' and ignores its own config-provider; (4) focus management — reka composes a battle-tested RovingFocusGroup/RovingFocusItem (entry-focus prioritization, Shift+Tab tab-out, Safari mousedown workaround) whereas robonen re-implements roving focus inline and does NOT reuse the RovingFocusGroup it already ships; (5) selection extensibility — reka emits a cancelable select event and routes selection through the element's native click (so change/click events fire), robonen calls setValue directly; (6) forms — reka uses VisuallyHiddenInput with synthetic input/change dispatch, useFormControl gating, and array/object serialization, while robonen renders a plain styled input with no change events and only when name is set; (7) Indicator animation — reka wraps in Presence, robonen uses bare v-if despite having Presence available; plus minor a11y gaps (group-level required not merged into items, no aria-label derivation, Enter not suppressed) and DX gaps (no exported context injectors, thinner defineSlots, no standalone Radio). robonen is genuinely better in a few places: modern defineModel v-model, group-level data-orientation and aria-disabled on the root, a flatter single-element item (no RovingFocusItem+Radio wrapping), and fewer runtime deps / no per-item global window listeners. Net verdict: reka-better until the gaps (especially value types, RovingFocusGroup reuse, dir/ConfigProvider, PageUp/Down, select event, and Presence indicator) are closed.
+
+
+**Major gaps:**
+- 🔶 (api-surface) reka supports non-string values (string | number | bigint | Record<string,any> | null via AcceptableValue) for both Root modelValue/defaultValue and Item value, using ohash isEqual for comparison. robonen hard-codes value: string on the Item and string|undefined on Root, so number/boolean/object option values are impossible.
+- 🔶 (keyboard) reka handles PageUp -> first and PageDown -> last keyboard navigation. robonen's roving-focus util (rovingKeyToAction) only maps ArrowUp/Down/Left/Right + Home/End and returns null for PageUp/PageDown, so those keys do nothing in robonen's RadioGroup.
+- 🔶 (rtl-i18n) reka's dir resolves through useDirection(propDir) which falls back to the global ConfigProvider dir; robonen's RadioGroupRoot hardcodes dir = 'ltr' default and never consults useConfig().dir, even though robonen HAS a config-provider exposing dir (and its own RovingFocusGroup already uses useConfig().dir). So an app-wide RTL ConfigProvider is ignored by RadioGroup.
+- 🔶 (api-surface) reka emits a cancelable 'select' CustomEvent (RADIO_SELECT) per item before checking, allowing consumers to preventDefault and block selection; robonen has no select emit/hook on RadioGroupItem at all.
+- 🔶 (forms) reka wires form integration through VisuallyHiddenInput which dispatches synthetic input/change events on value change (VisuallyHiddenInputBubble watch -> native setter + dispatch 'input'/'change'), enabling native form validation and event-driven listeners; it also supports array/object/required-empty value serialization. robonen renders a plain <input type=radio> via inline styles, mirrors value but dispatches no input/change events and cannot serialize non-primitive values.
+- 🔶 (features) reka's RadioGroupIndicator wraps content in <Presence> with the present prop, enabling exit/enter animations and forceMount-controlled animated unmount. robonen's RadioGroupIndicator uses a plain v-if (forceMount || item.checked.value) with no Presence, so it cannot animate the indicator out (it unmounts immediately) despite robonen having a Presence component available.
+- 🔶 (features) reka's roving focus is provided by a shared RovingFocusGroup/RovingFocusItem that handles entry-focus candidate prioritization (active/highlighted/current/first), Shift+Tab tabbing-out (isTabbingBackOut), focusableItemsCount-driven group tabindex, and a Safari mousedown focus workaround. robonen's RadioGroup re-implements roving focus inline (onItemKeyDown + isTabStop computed) and does NOT use its own RovingFocusGroup, so it lacks entry-focus prioritization, Shift+Tab tab-out handling, and the Safari mousedown focus workaround that reka inherits.
+
+**Minor gaps (9):**
+- ▫️ (accessibility) reka's RadioGroupItem.required = computed(() => rootContext.required.value || props.required) so the group-level required propagates to each radio's aria-required and the native input. robonen's RadioGroupItem applies only its own props.required (:aria-required="required || undefined") and never reads ctx.required, so a group-level required does NOT mark items as required for AT.
+- ▫️ (accessibility) reka computes an aria-label for the radio from an associated <label for=id> innerText when an id is provided (ariaLabel computed in Radio.vue), improving SR naming for icon-only radios. robonen has no aria-label derivation.
+- ▫️ (forms) reka guards the hidden form input behind useFormControl(currentElement) so it only renders when actually inside a <form> (and bubbles correctly under SSR); robonen renders the hidden input whenever name is set regardless of whether the group is inside a form, adding a stray focusable-by-name radio input to the document.
+- ▫️ (edge-cases) reka's RadioGroupItem only fires selection-on-focus when an arrow key actually drove the focus (isArrowKeyPressed gate + handleFocus -> click), and routes selection through the element's native .click() so the radio change/click event fires for downstream listeners. robonen's focusIndex calls setValue directly and never routes through the element's click, so arrow selection bypasses the native click/change pathway entirely.
+- ▫️ (features) reka provides a standalone Radio.vue component (a self-contained radio with its own value/name/required/checked v-model and form input) usable independently; robonen exposes no standalone Radio part — only Root/Item/Indicator.
+- ▫️ (code-quality) reka's RadioGroupIndicator and RadioGroupItem set inheritAttrs:false and forward $attrs onto the Primitive, giving precise attribute placement; robonen's RadioGroupIndicator/Item rely on default attr inheritance and do not declare inheritAttrs handling, which can mis-place attrs when the Primitive renders fragments or multiple roots.
+- ▫️ (api-surface) reka exposes injectRadioGroupRootContext and injectRadioGroupItemContext from the package index for advanced composition; robonen's context (provideRadioGroupContext/useRadioGroupContext, item context) is defined in context.ts but NOT re-exported from radio-group/index.ts, so consumers cannot build custom parts against the context.
+- ▫️ (types) reka declares typed defineSlots for Root (modelValue), Item (checked/required/disabled), and Indicator, giving full slot-prop type inference. robonen's Root slot exposes only value, Item slot exposes only checked, and neither declares defineSlots, so slot props are less typed and reka surfaces required/disabled to the item slot which robonen omits.
+- ▫️ (keyboard) reka's RadioGroupItem suppresses Enter from submitting/activating via @keydown.enter.prevent (radios should not respond to Enter per WAI-ARIA). robonen's RadioGroupItem has no Enter handling, so when as='button', pressing Enter triggers the native button click -> selection, which is non-conformant radio behavior.
+
+**Recommendations to make robonen strictly better:**
+- Generalize value types to an AcceptableValue-style union (string | number | bigint | boolean | Record<string,any> | null) on both RadioGroupRootProps (modelValue/defaultValue) and RadioGroupItemProps.value, and compare with a deep/structural equality helper instead of === so object and numeric option values work.
+- Add PageUp -> first and PageDown -> last to src/utils/roving-focus.ts rovingKeyToAction (return { delta: 0, absolute: 'home' } / 'end'), then they will flow through onItemKeyDown automatically.
+- Make RadioGroupRoot resolve dir via useConfig().dir as a fallback (toRef(() => dir ?? config.dir.value)) so a global ConfigProvider RTL setting is honored, matching the existing RovingFocusGroup behavior.
+- Refactor RadioGroupRoot/Item to compose the existing RovingFocusGroup + RovingFocusItem (as-child) instead of re-implementing roving focus inline; this gains entry-focus prioritization, Shift+Tab tab-out handling, focusableItemsCount group tabindex, PageUp/PageDown, and the Safari mousedown workaround for free.
+- Add a cancelable 'select' event to RadioGroupItem (emit before setValue, honor defaultPrevented) so consumers can intercept/veto selection.
+- Merge group-level required into each item: in RadioGroupItem compute required = ctx.required.value || props.required and use it for aria-required and the form input.
+- Add @keydown.enter.prevent (or explicit Enter no-op) to RadioGroupItem so Enter does not activate radios when as='button'.
+- Wrap RadioGroupIndicator content in the existing Presence component (:present="forceMount || item.checked.value") instead of v-if so the indicator can animate out.
+- Gate the hidden form input behind a useFormControl(currentElement)-style check so it only renders inside a <form>, and dispatch native input/change events (or reuse a VisuallyHiddenInput-style synthetic-setter approach) so native validation and change listeners fire; support non-primitive value serialization.
+- Add an optional id prop to RadioGroupItem and derive aria-label from an associated <label for=id> for icon-only radios, matching reka's Radio.vue.
+- Set inheritAttrs:false and forward $attrs in RadioGroupItem and RadioGroupIndicator for precise attribute placement.
+- Re-export the context injectors (useRadioGroupContext/useRadioGroupItemContext) and add defineSlots typing exposing checked/required/disabled (item) and modelValue (root) for advanced composition and better slot types.
+- Drop the redundant custom valueChange emit (or keep it but also document update:modelValue) — defineModel already emits update:modelValue; align the emits declaration so the public event surface is clear, and consider offering a standalone Radio part for use outside a group.
+
+**Where robonen is already better:**
+- ✅ Root uses defineModel<string|undefined>() for v-model, which is the modern idiomatic Vue 3.4+ API; reka still wires v-model manually through useVModel from @vueuse/core.
+- ✅ Root provides data-orientation on the radiogroup element (:data-orientation="orientation"); reka's RadioGroupRoot only sets data-orientation on items (via RovingFocusItem), not on the group element itself, so robonen gives more styling hooks at the group level.
+- ✅ Root sets aria-disabled on the radiogroup element when disabled; reka's RadioGroupRoot only emits data-disabled and never sets aria-disabled on the group (it relies on per-item disabled), so robonen exposes group-level disabled state to AT slightly better at the root.
+- ✅ Item sets data-disabled on the radio element itself (:data-disabled="isDisabled ? '' : undefined"); reka's RadioGroupItem delegates disabled rendering to the inner Radio.vue but the RovingFocusItem layer adds extra DOM/indirection — robonen keeps a flatter single-element structure (no wrapping RovingFocusItem + Radio split), which is less DOM and fewer components per item.
+- ✅ No external runtime dependency on ohash (isEqual) or @vueuse/core useVModel/useEventListener for core behavior; robonen's keydown handling is a single delegated handler rather than reka attaching global window keydown/keyup listeners per item (reka's RadioGroupItem registers useEventListener('keydown'/'keyup') on window for every item, which is O(n) global listeners).
+
+
+### aspect-ratio  —  _reka-better_
+
+
+Both expose a single AspectRatio component (no sub-parts) with the same `ratio` prop and identical wrapper/inner box technique (relative wrapper with paddingBottom, absolutely-positioned inner). robonen is marginally leaner in two micro-ways: it hoists the static inner style to a shared module constant and adds a data-aspect-ratio hook on the content element. However reka is currently better on substance: (1) reka actually forwards the element ref via :ref=\"forwardRef\" while robonen leaves forwardRef unbound and dead; (2) reka supports asChild/composition while robonen's AspectRatio neither types nor forwards asChild; (3) reka routes $attrs (class/style/id/handlers/ARIA) onto the inner content element via inheritAttrs:false + v-bind, whereas robonen leaks fallthrough attrs onto the outer wrapper; (4) reka's aspect is a computed so runtime ratio changes work, while robonen builds wrapperStyle as a one-time non-reactive object; (5) reka exposes an `aspect` slot prop and (6) ships an axe a11y test, both absent in robonen. The ref-forwarding, attrs routing, and reactivity issues are functional regressions, so the honest verdict is reka-better until those are addressed.
+
+
+**Major gaps:**
+- 🔶 (api-surface) robonen does NOT forward the underlying DOM element ref to consumers. It calls useForwardExpose() and destructures forwardRef (AspectRatio.vue:17) but never binds :ref="forwardRef" on the <Primitive>. The forwardRef is dead code, so the component's exposed $el/currentElement chain is never populated from the inner element and template-ref consumers cannot reach the content node.
+- 🔶 (api-surface) No asChild support. robonen's PrimitiveProps (primitive/Primitive.ts:7-9) only declares `as` and never declares/forwards `asChild`, so consumers cannot do <AspectRatio as-child> to merge props onto a provided child. (robonen's Primitive technically supports as="template" slot-merging, but AspectRatio neither documents nor forwards an asChild prop, and the type surface lacks it.)
+- 🔶 (edge-cases) Fallthrough attributes ($attrs: class, style, id, event handlers, ARIA) are applied to the OUTER wrapper div instead of the inner content element. robonen sets no inheritAttrs:false and never v-binds $attrs onto the inner Primitive, so Vue auto-forwards consumer attrs to the plain wrapper <div data-aspect-ratio-wrapper>, not to the element wrapping the actual content.
+- 🔶 (performance) Dynamic ratio is not reactive. robonen computes wrapperStyle as a plain object literal once during setup using the destructured `ratio` (AspectRatio.vue:21-25); the paddingBottom string is evaluated a single time and never recomputes, so changing :ratio at runtime will not update the box.
+
+**Minor gaps (2):**
+- ▫️ (api-surface) No slot prop exposing the resolved aspect value. reka exposes the computed aspect percentage to the default slot so consumers can react to it; robonen renders a bare <slot /> with no slot props.
+- ▫️ (accessibility) No accessibility regression test. reka ships a vitest-axe assertion (toHaveNoViolations) guarding the rendered structure; robonen's tests only check padding/position/data-attr and never run an a11y audit.
+
+**Recommendations to make robonen strictly better:**
+- Bind the inner Primitive with :ref="forwardRef" so useForwardExpose actually forwards the content element and exposed API; right now the call is dead code. (AspectRatio.vue: add :ref="forwardRef" on the <Primitive>.)
+- Make the wrapper style reactive: replace the const wrapperStyle object with a computed (e.g. computed(() => ({ position: 'relative', width: '100%', paddingBottom: `${(1 / ratio) * 100}%` }))) so runtime ratio changes re-render the box.
+- Add asChild to PrimitiveProps (or at minimum forward an asChild prop on AspectRatio that maps to the inner Primitive's template/Slot path) so consumers can merge the ratio container onto a provided child element, matching reka's composition model.
+- Set inheritAttrs: false (via defineOptions) and v-bind="$attrs" on the inner Primitive so consumer class/style/id/event/ARIA attrs land on the content element rather than the outer wrapper div.
+- Expose the resolved aspect percentage as a slot prop (defineSlots + <slot :aspect="aspect" />) for parity and to let consumers react to the computed ratio.
+- Add a vitest-axe accessibility test mirroring reka's, asserting toHaveNoViolations on a typical img-in-AspectRatio render.
+
+**Where robonen is already better:**
+- ✅ Hoists the inner element's static style into a single module-level constant INNER_STYLE (AspectRatio.vue:29-32), so the absolute/inset:0 style object is allocated once and shared across all instances instead of being re-created per render. reka inlines the inner style as a string literal each render (AspectRatio.vue:48).
+- ✅ Adds a data-aspect-ratio="true" attribute on the inner content element (AspectRatio.vue:37), giving a styling/test hook on the actual content box. reka only emits a data attribute on the outer wrapper (data-reka-aspect-ratio-wrapper) and nothing on the inner element.
+- ✅ Uses an object style binding (:style="wrapperStyle") for the wrapper rather than reka's hand-built CSS string template literal (`position: relative; width: 100%; padding-bottom: ${aspect}%`), which avoids string-to-style re-parsing and is less error prone — though see the reactivity caveat in the gaps.
+
+
+### scroll-area  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** ScrollAreaScrollbarGlimpse.vue (glimpse visibility behavior + state machine), ScrollAreaScrollbarX.vue and ScrollAreaScrollbarY.vue (axis-specific layers that register scrollbar element to root and set thumb-size + RTL position CSS vars), ScrollAreaCornerImpl.vue (RTL-aware corner impl, split from Corner)
+**Parts robonen has that reka lacks:** ScrollAreaScrollbarImpl.vue carries the ARIA scrollbar role/state and onKeyDown keyboard handler (reka's Impl has neither), context.ts second context (ScrollAreaScrollbarContext) with onThumbChange/onThumbPointerDown/onThumbPositionChange exported publicly, viewportId in root context for aria-controls wiring (no reka equivalent)
+
+robonen's scroll-area is architecturally close to reka-ui and is meaningfully more accessible: it adds the full WAI-ARIA scrollbar pattern (role=scrollbar, aria-orientation/valuemin/max/now, aria-controls to the viewport, aria-disabled, roving tabindex) and a complete keyboard handler (Arrow ±5%, PageUp/Down, Home/End, RTL-aware horizontal) — reka has zero ARIA and no keyboard support, only tabindex=0 on the viewport. However robonen currently ships several real functional regressions versus reka: (1) the thumb has no size along the track because nothing sets the --scroll-area-thumb-width/height CSS vars (getThumbSize is exported but never used for sizing); (2) the Corner can never render because ctx.scrollbarX/scrollbarY are never populated; (3) wheel-over-scrollbar can't stop page scroll because the listener is @wheel.passive while the code calls preventDefault; (4) no RTL flip for scrollbar position; (5) no ref forwarding through scrollbar wrappers; plus missing 'glimpse' type, no viewport tabindex, no scrollBehavior handling during drag, broken text-ellipsis case, static thumb data-state, and no useNonce inheritance. Verdict: robonen-better-with-gaps — it wins decisively on a11y/keyboard but must fix the thumb-size, corner-wiring, wheel, and RTL bugs (the first two are essentially broken core behavior) before it can be called strictly better.
+
+**Critical gaps:**
+- ⛔ (features) Thumb size along the scroll axis is never set. ScrollAreaThumb.vue styles width/height with var(--scroll-area-thumb-width)/var(--scroll-area-thumb-height), but NO component ever defines those CSS vars (getThumbSize in utils.ts is exported yet never called to set them). In reka, ScrollAreaScrollbarX.vue sets --reka-scroll-area-thumb-width and ScrollAreaScrollbarY.vue sets --reka-scroll-area-thumb-height from getThumbSize(sizes) on the scrollbar element. Result: robonen's thumb collapses to 0 length along the track unless the user hand-styles it.
+  - _evidence:_ reka ScrollAreaScrollbarX.vue/ScrollAreaScrollbarY.vue style binding `--reka-scroll-area-thumb-width/height = getThumbSize(sizes)`; robonen ScrollAreaThumb.vue uses var(--scroll-area-thumb-width/height) but grep shows getThumbSize is never invoked to set them.
+- ⛔ (features) ScrollAreaCorner never renders because its required inputs are never populated. Corner.measure() reads ctx.scrollbarX.value / ctx.scrollbarY.value to compute width/height, but nothing ever assigns ctx.scrollbarX / ctx.scrollbarY in robonen (they stay null forever; the registerScrollbar emit only feeds a LOCAL scrollbarEl in ScrollAreaScrollbarVisible.vue, never the root context). So width/height stay 0, hasSize is always false, and the corner is never displayed.
+  - _evidence:_ reka ScrollAreaScrollbarX.vue onMounted calls rootContext.onScrollbarXChange(el) and ScrollbarY calls onScrollbarYChange(el); robonen context.ts defines scrollbarX/scrollbarY refs and Root provides them, but grep shows no assignment of ctx.scrollbarX/scrollbarY anywhere. ScrollAreaCorner.vue measure() depends on them.
+
+**Major gaps:**
+- 🔶 (edge-cases) Wheel-over-scrollbar cannot prevent page scroll. ScrollAreaScrollbarImpl.vue binds @wheel.passive, so the listener is passive:true and the event.preventDefault() inside onWheelScroll (ScrollAreaScrollbarVisible.vue, guarded by isScrollingWithinScrollbarBounds) is a no-op and logs a console warning. reka adds the wheel listener on document with { passive: false } and gates on scrollbar.contains(target), so it can actually preventDefault and stop the window from scrolling.
+- 🔶 (rtl-i18n) RTL scrollbar positioning is not handled. robonen ScrollAreaScrollbarImpl.vue hardcodes horizontal { left:0, right:var(--corner-width) } and vertical { right:0 } regardless of dir. reka's ScrollAreaScrollbarX.vue and ScrollAreaScrollbarY.vue flip left/right based on rootContext.dir (vertical bar moves to the left in RTL; horizontal corner gap swaps sides). robonen keeps the vertical scrollbar on the right even in RTL, which is visually wrong.
+- 🔶 (api-surface) Template ref on <ScrollAreaScrollbar> does not forward to the DOM element. reka forwards a ref through every wrapper (forwardRef + :ref on ScrollbarHover/Scroll/Auto/Glimpse/Visible/X/Y), so a ref on ScrollAreaScrollbar resolves to the real scrollbar element. In robonen none of the wrappers (ScrollAreaScrollbar.vue, ScrollAreaScrollbarHover/Auto/Scroll/Visible.vue) call useForwardExpose/forwardRef — only the leaf Impl does — so consumers placing a ref on ScrollAreaScrollbar get nothing useful.
+
+**Minor gaps (7):**
+- ▫️ (features) No 'glimpse' visibility type. reka adds ScrollType 'glimpse' (types.ts), a dedicated ScrollAreaScrollbarGlimpse.vue (state machine that briefly reveals scrollbars on pointer enter then auto-hides), and a branch in ScrollAreaScrollbar.vue. robonen's ScrollAreaType is only 'auto'|'always'|'scroll'|'hover' and has no Glimpse component.
+- ▫️ (keyboard) Viewport is not keyboard-focusable. reka ScrollAreaViewport.vue sets :tabindex="0" on the scrollable viewport so keyboard users can focus the scroll region and use native arrow-key scrolling (works even when no visible scrollbar is rendered). robonen's ScrollAreaViewport.vue sets no tabindex; robonen instead makes the scrollbar focusable, but when a scrollbar is hidden/non-interactive there is no focusable element to drive scrolling, and the common 'focus the panel and scroll' pattern is lost.
+- ▫️ (edge-cases) During thumb drag reka sets viewport.style.scrollBehavior='auto' (and restores it on pointerup) so a user's CSS scroll-behavior: smooth doesn't lag/jank the thumb. robonen instead sets viewport.style.pointerEvents='none' and never touches scrollBehavior, so dragging a smooth-scroll viewport will be janky.
+- ▫️ (edge-cases) Viewport content wrapper does not enable text-overflow: ellipsis when horizontal scrolling is off. reka conditionally applies minWidth: scrollbarXEnabled ? 'fit-content' : undefined so a no-horizontal-scroll viewport can ellipsize text. robonen hardcodes the inner wrapper to { minWidth: '100%', display: 'table' } always, which forces width and breaks text-overflow: ellipsis in the common vertical-only case.
+- ▫️ (features) ScrollAreaThumb data-state is static. reka ScrollAreaThumb.vue binds :data-state="hasThumb ? 'visible' : 'hidden'"; robonen ScrollAreaThumb.vue hardcodes data-state="visible", so styling/animation hooks that key off the hidden state on the thumb won't work.
+- ▫️ (ssr) reka inherits nonce from ConfigProvider via useNonce(propNonce). robonen ScrollAreaViewport.vue accepts a nonce prop but uses it raw (:nonce="nonce") with no ConfigProvider fallback, so a globally-configured CSP nonce is not picked up automatically.
+- ▫️ (edge-cases) reka's Corner respects type: hasCorner = type !== 'scroll' && bothScrollbarsVisible, so no corner is shown for type='scroll' (where scrollbars overlay). robonen ScrollAreaCorner.vue gates only on hasBoth (both enabled) && hasSize, with no type check, so it would attempt a corner even for type='scroll'.
+
+**Recommendations to make robonen strictly better:**
+- Set the thumb-size CSS vars: in the scrollbar layer (split into ScrollAreaScrollbarX/Y or compute in ScrollAreaScrollbarVisible/Impl), bind style --scroll-area-thumb-width = `${getThumbSize(sizes)}px` for horizontal and --scroll-area-thumb-height for vertical, so ScrollAreaThumb actually gets a length along the track. This is the single most important fix.
+- Wire scrollbar elements into the root context: have the scrollbar (Visible/X/Y or via Impl's registerScrollbar) call ctx-level onScrollbarXChange/onScrollbarYChange (add these to ScrollAreaRootContext like reka) so ScrollAreaCorner.measure() can read real elements and the corner renders.
+- Fix wheel: remove @wheel.passive and instead attach a document-level wheel listener with { passive: false } gated on scrollbar.contains(target) (like reka ScrollAreaScrollbarImpl), so onWheelScroll's preventDefault actually stops page scroll. Remove the no-op preventDefault under a passive listener.
+- Make scrollbar positioning RTL-aware in ScrollAreaScrollbarImpl: branch left/right on ctx.dir.value for both vertical (bar on left in RTL) and horizontal (swap the corner gap side), mirroring reka ScrollAreaScrollbarX/Y.
+- Add forwardRef chaining: call useForwardExpose() and bind :ref="forwardRef" on ScrollAreaScrollbar and each wrapper (Hover/Auto/Scroll/Visible) so a template ref on ScrollAreaScrollbar resolves to the underlying scrollbar element, matching reka.
+- Add tabindex=0 to the viewport (and/or expose a configurable tabindex) so keyboard users can focus the scroll region and arrow-scroll natively even when no scrollbar is interactive — keep the existing scrollbar ARIA/keyboard support on top of it.
+- Add a 'glimpse' ScrollAreaType and a ScrollAreaScrollbarGlimpse component (port reka's state machine) for feature parity, plus a small useStateMachine helper to clean up the ad-hoc state in ScrollAreaScrollbarScroll.
+- During thumb drag, set viewport.style.scrollBehavior='auto' on pointerdown and restore on pointerup (in addition to or instead of toggling pointerEvents) to avoid jank when consumers use scroll-behavior: smooth.
+- Make the inner viewport wrapper minWidth conditional (fit-content only when scrollbarXEnabled, otherwise undefined) and drop the unconditional display:table so text-overflow: ellipsis works in vertical-only scroll areas.
+- Bind ScrollAreaThumb :data-state to hasThumb ('visible'/'hidden') instead of hardcoding 'visible'.
+- Route the Viewport nonce through useNonce / ConfigProvider so a globally configured CSP nonce is inherited.
+- Add a type !== 'scroll' guard to ScrollAreaCorner's render condition to match reka and avoid a corner under overlay-style scroll.
+
+**Where robonen is already better:**
+- ✅ Full WAI-ARIA scrollbar pattern: ScrollAreaScrollbarImpl.vue sets role="scrollbar", aria-orientation, aria-valuemin=0, aria-valuemax=100, dynamic aria-valuenow (computed from scrollPos/maxScroll), aria-disabled, and aria-controls pointing to the viewport id. reka-ui has NONE of these (grep of reka ScrollArea/*.vue shows zero role/aria-* attributes) — robonen is dramatically more accessible to screen readers here.
+- ✅ Complete keyboard support on the scrollbar (ScrollAreaScrollbarImpl.vue onKeyDown): ArrowUp/Down (vertical), RTL-aware ArrowLeft/Right (horizontal), PageUp/PageDown (full viewport jump), Home/End (extremes), Arrow step = 5% of viewport, all with preventDefault. reka-ui implements NO keyboard handler at all for scrollbars.
+- ✅ viewportId + aria-controls relationship (context.ts viewportId, Root assigns useId, Viewport applies it, Impl references it) explicitly links scrollbar to the region it controls. reka has no such id wiring.
+- ✅ Roving/conditional tabindex on the scrollbar: tabindex=0 only when isInteractive (hasThumb && maxScroll>0), else -1, so non-overflowing scrollbars are not tab stops. reka has nothing equivalent.
+- ✅ More robust utils: toInt() returns `|| 0` so NaN can't leak (reka's toInt can return NaN); getThumbRatio guards viewport>=content and Number.isFinite (reka can return Infinity when content is 0).
+- ✅ debounceCallback exposes a .cancel() and every component cleans it up in onScopeDispose (ScrollbarAuto/Scroll), giving deterministic teardown; reka relies on VueUse useDebounceFn without explicit cancel-on-dispose in some paths.
+- ✅ Exposes a typed scrollbar context (onThumbChange/onThumbPointerDown/onThumbPositionChange) and ScrollAreaSizes type publicly via index.ts, plus context provide/inject helpers — slightly richer public surface for extension.
+
+
+### dropdown-menu  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** DropdownMenuFilter (filterable menu searchbox part)
+
+Both libraries implement DropdownMenu as a thin wrapper over an internal Menu primitive with the same part set (Root, Trigger, Portal, Content, Item, CheckboxItem, RadioGroup/RadioItem, ItemIndicator, Label, Separator, Group, Arrow, Sub/SubTrigger/SubContent). robonen covers the core behavior well: controlled/uncontrolled open, modal/non-modal content, roving focus with Arrow/Home/End/PageUp/PageDown, RTL-aware sub open/close keys, type-ahead, dismissable layer, body scroll lock, focus guards, item select->close via cancelable ITEM_SELECT, and it even exposes a couple of extra Popper props (sideFlip/alignFlip). However reka is currently better in several concrete, verifiable ways. Most important: (1) robonen's @select preventDefault contract is broken because the emitted event (raw MouseEvent) is not the cancelable ITEM_SELECT event it inspects, so consumers cannot prevent close; (2) the trigger lacks type=\"button\", risking form submission inside a <form>; (3) there is no DropdownMenuFilter and the Menu layer lacks the content-context plumbing for one; (4) typeahead Space handling prematurely selects multi-word items; (5) the submenu safe-triangle has no pointer-direction intent; (6) focus-return to the trigger is unconditional rather than suppressed on outside/right-click interaction. Minor gaps: conditional aria-controls, Sub defaultOpen + open slot prop, dropdown-level CSS sizing vars, useForwardExpose on sub-components, a richer root context, and pointerup drag-select. The only missing PART is Filter; the rest are behavioral/forms/a11y refinements. Net: robonen is close and in places ahead, but not yet strictly better.
+
+**Critical gaps:**
+- ⛔ (api-surface) @select preventDefault does not prevent menu close because the emitted event is not the inspected cancelable event
+  - _evidence:_ robonen menu/MenuItem.vue handleSelect: dispatches a CustomEvent ITEM_SELECT, then emit('select', event) with the raw MouseEvent, then checks selectEvent.defaultPrevented; reka MenuItem.vue emits the same itemSelectEvent it later inspects
+
+**Major gaps:**
+- 🔶 (forms) DropdownMenuTrigger missing type=button -> form submission risk
+- 🔶 (features) No DropdownMenuFilter part nor Menu content-context filter hooks
+- 🔶 (keyboard) Space selects multi-word items during typeahead
+- 🔶 (edge-cases) Submenu safe-triangle lacks pointer-direction intent
+- 🔶 (accessibility) Focus-return to trigger is unconditional, ignoring outside/right-click interaction
+
+**Minor gaps (6):**
+- ▫️ (accessibility) Unconditional aria-controls even when menu is closed
+- ▫️ (api-surface) DropdownMenuSub lacks defaultOpen and open slot prop
+- ▫️ (features) No dropdown-level CSS sizing/animation vars (trigger-width/height/transform-origin)
+- ▫️ (api-surface) Sub-component wrappers don't call useForwardExpose
+- ▫️ (edge-cases) No pointerup drag-select / Firefox text-selection fix on items
+- ▫️ (api-surface) Root context exposes less than reka
+
+**Recommendations to make robonen strictly better:**
+- Add :type="as === 'button' ? 'button' : undefined" to DropdownMenuTrigger's Primitive (and verify MenuSubTrigger) to prevent accidental form submission when the trigger is a default <button> inside a <form>.
+- Fix the select-cancel contract in menu/MenuItem.vue: construct a single cancelable ITEM_SELECT CustomEvent, emit THAT via emit('select', selectEvent), then check selectEvent.defaultPrevented before rootCtx.onClose(). Mirror for keyboard selection so event.preventDefault() in @select reliably keeps the menu open; apply equivalently in MenuCheckboxItem/MenuRadioItem.
+- Implement trigger focus-return in DropdownMenuContent (port reka's handleCloseAutoFocus + handleInteractOutside): focus the trigger on closeAutoFocus only when the user did not interact outside / right-click / non-modal-dismiss, otherwise preventDefault and let the UA keep focus. Track a hasInteractedOutsideRef flag wired through @interact-outside.
+- Add a typing-ahead Space guard to MenuItemImpl.handleKeyDown (skip selection when searchRef !== '' and key === ' ') so item labels containing spaces remain searchable via typeahead.
+- Add directional safe-triangle intent for submenus: track pointer X movement (pointerDirRef/lastPointerXRef) via @pointermove on MenuContentImpl and gate onItemEnter/onTriggerLeave on 'pointer moving toward submenu side' in addition to isPointerInGraceArea.
+- Add a DropdownMenuFilter part. First extend menu/MenuContentImpl's content-context with highlightedElement, onKeydownNavigation, onKeydownEnter, filterElement and onFilterElementChange (plus pointerenter-to-focus-filter), then add a Filter wrapper with role=searchbox, v-model, autoFocus, disabled, aria-activedescendant and Escape-to-clear.
+- Make DropdownMenuTrigger's aria-controls conditional on open (set contentId only while open) to match the WAI-ARIA menu-button pattern.
+- Add defaultOpen (uncontrolled) support and an `open` slot prop to DropdownMenuSub, mirroring DropdownMenuRoot's controlled/uncontrolled pattern.
+- Expose dropdown-level CSS custom properties on DropdownMenuContent and DropdownMenuSubContent: --primitives-dropdown-menu-trigger-width/-height mapped from --popper-anchor-width/-height (already computed in PopperContent), plus transform-origin and available-width/height, so consumers can size menus to the trigger and animate.
+- Call useForwardExpose() (and forward the ref) in all DropdownMenu* sub-component wrappers so template refs/exposed methods of the inner element are accessible, matching reka.
+- Enrich DropdownMenuRootContext to also expose open, onOpenChange, onOpenToggle, modal and dir (derived from MenuContext/MenuRootContext) for parity and easier composition.
+- Add pointerdown/pointerup drag-select handling to MenuItem(Impl) (re-dispatch click on pointerup when pointerdown started on a different item) to fix drag-across-items selection and the Firefox text-selection edge case.
+
+**Where robonen is already better:**
+- ✅ robonen's DropdownMenuTrigger opens on ArrowUp in addition to ArrowDown/Enter/Space, one more opening affordance than reka.
+- ✅ robonen surfaces sideFlip/alignFlip (and prioritizePosition) Popper props through MenuContentImplProps that reka's Menu does not expose.
+- ✅ robonen cleans up the typeahead search buffer via onScopeDispose plus an explicit content @blur handler, not just a timer.
+
+
+### tree  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** TreeVirtualizer (TanStack vue-virtual windowing with keyboard + type-ahead hooks)
+
+Both libraries implement a flatten-on-root tree: TreeRoot flattens visible items and TreeItem renders role=treeitem with aria-level/expanded/selected, click + Arrow/Home/End + RTL-aware Left/Right + Enter/Space. robonen's core is leaner and faster (O(1) Set lookups, iterative flatten, hoisted roving opts, stable string keys, data-state/data-level hooks, cleaner v-model). However reka is currently better on several real, verifiable axes that block 'strictly better': it uses RovingFocusGroup for the WAI-ARIA single-tabstop roving tabindex (robonen wrongly puts tabindex=0 on every item - the biggest gap, critical), implements type-ahead, emits aria-setsize/aria-posinset, handles PageUp/PageDown, supports Shift+arrow range selection, selectionBehavior toggle/replace, bubbleSelect with indeterminate tri-state, cancelable select/toggle emits + defineExpose + slot action callbacks, and ships a virtualizer. Fixing the roving tabindex, type-ahead, set/pos a11y attrs, PageUp/Down, range selection, intercept events, and indeterminate/bubble support would make robonen strictly better while keeping its performance edge.
+
+**Critical gaps:**
+- ⛔ (keyboard) No single-tabstop roving tabindex. robonen hardcodes tabindex = isDisabled ? -1 : 0 on EVERY treeitem, so Tab steps through every node and there is no single tab entry point - violating the WAI-ARIA tree pattern. reka wraps items in RovingFocusGroup/RovingFocusItem which sets tabindex 0 only on the current tab stop and -1 on all others, plus handles Shift+Tab to leave the group.
+  - _evidence:_ robonen TreeItem.vue :tabindex="isDisabled ? -1 : 0"; reka TreeItem.vue uses <RovingFocusItem> and RovingFocusItem.vue :tabindex="isCurrentTabStop ? 0 : -1" with context.onItemShiftTab().
+
+**Major gaps:**
+- 🔶 (keyboard) No type-ahead: robonen has no type-to-focus. reka wires useTypeahead/getNextMatch on the root keydown (TreeRoot.vue handleKeydown -> handleTypeaheadSearch, useTypeahead.ts getNextMatch) so pressing letters focuses the next item whose textContent/textValue matches. Type-ahead is part of the WAI-ARIA Tree View keyboard pattern.
+- 🔶 (accessibility) Missing aria-setsize and aria-posinset on treeitems. reka computes them per item (aria-setsize = siblings length, aria-posinset = index+1) and binds them. robonen's TreeItem sets aria-level only, so screen readers cannot announce "item N of M" within a group.
+- 🔶 (keyboard) No Shift+Arrow / Shift+Home/End range selection. reka maintains a firstValue anchor and implements handleMultipleReplace + findValuesBetween to extend a multi-selection across a contiguous range with Shift+arrows. robonen has no anchor and no range selection at all.
+- 🔶 (features) No bubbleSelect (child->parent state propagation) and no indeterminate state. reka supports bubbleSelect (selecting all children selects the parent, deselecting unsets it) and exposes isIndeterminate to render tri-state checkboxes. robonen has propagateSelect (parent->child) but no upward bubbling and no indeterminate concept.
+- 🔶 (api-surface) TreeItem emits no cancelable select/toggle events. reka dispatches cancelable CustomEvents (tree.select/tree.toggle) and emits 'select'/'toggle' that callers can event.preventDefault() to intercept before state changes. robonen's TreeItem has no defineEmits, so consumers cannot intercept or veto selection/expansion.
+
+**Minor gaps (6):**
+- ▫️ (keyboard) PageUp/PageDown not handled. reka maps PageUp->first and PageDown->last via MAP_KEY_TO_FOCUS_INTENT, so those keys jump to first/last item. robonen's rovingKeyToAction only recognizes Home/End (Arrow*, Home, End) and never PageUp/PageDown.
+- ▫️ (api-surface) No selectionBehavior 'toggle' | 'replace' prop. reka lets consumers choose whether selecting replaces the current selection or toggles. robonen only supports toggle semantics.
+- ▫️ (api-surface) TreeItem exposes nothing via defineExpose, and the item slot provides no action callbacks. reka exposes isExpanded/isSelected/isIndeterminate/handleToggle/handleSelect and passes handleSelect/handleToggle into the slot, so a custom node (e.g. a chevron or checkbox) can trigger select/toggle independently. robonen's item slot only passes read-only state.
+- ▫️ (performance) No virtualization. reka ships TreeVirtualizer (TanStack vue-virtual) with overscan/estimateSize/textContent props and keyboard/type-ahead integration for huge trees. robonen has no virtualizer, so very large flat lists render every visible node.
+- ▫️ (code-quality) Root keydown navigation in robonen relies on reading the DOM aria-level attribute for Left/Right parent/child resolution (next.getAttribute('aria-level')), which is fragile if a consumer overrides as/markup or aria-level. reka resolves parent/child via the in-memory FlattenedItem.level/data-indent collection, decoupling navigation from rendered ARIA attributes.
+- ▫️ (keyboard) No focus-entry guard / onEntryFocus behavior. reka's RovingFocusGroup centralizes which item receives focus on group entry; robonen has no entry-focus management, so initial Tab/click focus is whatever the browser picks among the many tabindex=0 items.
+
+**Recommendations to make robonen strictly better:**
+- Adopt single-tabstop roving tabindex for treeitems: reuse the existing robonen RovingFocusGroup/RovingFocusItem (src/roving-focus) or maintain a currentTabStopId so only one item has tabindex=0 and the rest get -1; handle Shift+Tab to exit the tree. This is the most important correctness/a11y fix (currently every item is tabbable).
+- Add type-ahead: on root keydown for printable single characters, match against item textContent (or an opt-in getLabel/textValue accessor) using a getNextMatch-style wrap-around search with a 1s reset, then focus the match. Add an optional getLabel?: (item) => string prop for non-text nodes/virtualized cases.
+- Emit aria-setsize and aria-posinset: extend FlatItem (utils.ts) with setsize and posinset (siblings length and 1-based index within the sibling group) and bind them in TreeItem.vue so SRs announce position within group.
+- Add PageUp/PageDown to rovingKeyToAction (map to absolute 'home'/'end') so the Tree gets first/last jump on those keys; or handle them explicitly in onItemKeyDown.
+- Add Shift+Arrow and Shift+Home/End range selection for multiple mode: keep a firstValue/anchor key and a findValuesBetween-style helper over flatItems to set the selected range; respect disabled items.
+- Add selectionBehavior?: 'toggle' | 'replace' to TreeRootProps and thread it through select() so consumers can choose replace-on-click semantics.
+- Add bubbleSelect (child->parent) plus an indeterminate concept: compute and expose is-indeterminate in the TreeItem slot for tri-state checkbox trees (parent partially selected). Pair it with the existing propagateSelect.
+- Make TreeItem emit cancelable select/toggle events (or expose handleSelect/handleToggle and pass them into the slot) so consumers can intercept/preventDefault and trigger actions from custom sub-nodes (chevron/checkbox). Also defineExpose isExpanded/isSelected/(is-indeterminate)/handleToggle/handleSelect.
+- Decouple Left/Right navigation from aria-level: add a private data-indent (or read FlatItem.level via the collection) for parent/child resolution instead of parsing the public aria-level attribute, so consumer markup overrides don't break keyboard nav.
+- Optionally add a TreeVirtualizer companion (TanStack vue-virtual) with overscan/estimateSize/getLabel and keyboard+type-ahead integration to match reka for very large trees.
+- Add a focus-entry strategy (onEntryFocus) so first focus into the tree lands on the selected item or the first item, consistent with the roving tabstop.
+
+**Where robonen is already better:**
+- ✅ Performance: robonen builds an O(1) selectedSet/expandedSet (computed Set) so each TreeItem's isSelected/isExpanded is a Set.has() instead of reka's per-item Array.includes() on selectedKeys.value (TreeItem.vue isSelected/isExpanded), avoiding O(n^2) on selection change. propagateSelect in robonen also collects cascade keys into a Set and filters with Set.has (TreeRoot.vue select()), whereas reka uses repeated Array.some/find (O(n*m)).
+- ✅ Flattening is iterative (explicit stack in flattenVisible/utils.ts) so it cannot blow the call stack on deeply nested trees; reka's flattenItems and flatten() are recursive (TreeRoot.vue flattenItems, utils.ts flatten).
+- ✅ Roving-key handling reuses hoisted ROVING_OPTS_LTR/RTL constants per keydown to keep the rovingKeyToAction call site monomorphic and avoid per-event object allocation (TreeRoot.vue lines 48-49) - a deliberate perf detail reka does not have.
+- ✅ Richer data-* hooks for styling/animation: robonen exposes data-state="open|closed" and data-level on each item (TreeItem.vue), while reka only exposes data-expanded/data-selected/data-indent and no open/closed state attribute.
+- ✅ TreeRoot default slot exposes a clean, typed payload { flatItems, selectedKeys, expandedKeys } and the FlatItem type is minimal and well-documented (utils.ts). reka's FlattenedItem carries an extra bind object the consumer must spread.
+- ✅ More explicit, readable controlled/uncontrolled handling with a normalize() helper and equality-guarded watchers (TreeRoot.vue), versus reka leaning on useVModel with @ts-expect-error casts and passive flags.
+- ✅ reka's single-select onSelectItem does modelValue.value = { ...val } (shallow-clones the item object), which breaks referential identity of the selected item; robonen stores stable string keys and emits the key, avoiding identity loss.
+
+
+### popover  —  _robonen-better-with-gaps_
+
+
+Both libraries implement the same set of Popover parts (Root, Trigger, Anchor, Content + Impl/Modal/NonModal, Portal, Arrow, Close) with essentially identical architecture (Popper + DismissableLayer + FocusScope + Presence, modal/non-modal split, controlled+uncontrolled open via `open`/`defaultOpen` and an `{open, close}` slot, role=dialog, aria-haspopup=dialog/aria-expanded/aria-controls/aria-labelledby, data-state, identical close/interact-outside trigger-reentry guards, and the same CSS custom-property exposure). robonen is genuinely better in several areas: a superior reference-counted scrollbar-compensating useBodyScrollLock, always-valid aria-controls via eager IDs, cleaner forceMount-vs-present separation in Presence, and a larger forwarded Popper positioning API (reference/positionStrategy/hideShiftedArrow/disableUpdateOnLayoutShift). However robonen has real, fixable gaps versus reka: (1) modal popover omits useHideOthers, so background content is not hidden from screen readers, despite robonen shipping that util and using it in Dialog/Menu (critical a11y inconsistency); (2) no focus guards in content (reka uses useFocusGuards) despite robonen having useFocusGuard and using it in Menu; (3) the content element is never exposed via template ref (reka threads forwardRef through the whole content chain); (4) PopoverArrow drops all props except width/height and exposes no ref; (5) the default arrow renders an empty span with no triangle and no rounded variant, while reka renders a working SVG triangle out of the box. Net: robonen wins on plumbing/perf but is currently NOT strictly better — it has a critical modal-a11y omission, a major focus-guard omission, missing ref/prop forwarding, and an invisible default arrow. Fixing the listed items (most reuse utilities robonen already has) would make it strictly better.
+
+**Critical gaps:**
+- ⛔ (accessibility) Modal popover does NOT hide sibling/background content from assistive tech. reka's PopoverContentModal calls useHideOthers(currentElement) to aria-hide everything outside the content; robonen's PopoverContentModal.vue omits this entirely (only calls useBodyScrollLock()). robonen already ships an equivalent useHideOthers (src/utils/useHideOthers.ts) and uses it in DialogContentModal.vue and MenuRootContentModal.vue, so this is an inconsistent omission specific to popover.
+  - _evidence:_ reka PopoverContentModal.vue line 19 `useHideOthers(currentElement)` vs robonen PopoverContentModal.vue (never imports/calls useHideOthers); cf. robonen DialogContentModal.vue:20 and MenuRootContentModal.vue:21 which DO call it.
+
+**Major gaps:**
+- 🔶 (accessibility) No focus guards injected around content. reka's PopoverContentImpl calls useFocusGuards() to insert tabbable [data-reka-focus-guard] spans at the body edges so focusin/focusout are caught consistently (important for Tab-out behavior and focus-scope boundary detection). robonen's PopoverContentImpl.vue never calls a focus-guards util, even though robonen exports useFocusGuard from @robonen/vue and uses it in MenuRootContentModal.vue:19.
+- 🔶 (api-surface) Content element/instance is not exposed via template ref. reka threads forwardRef end-to-end: PopoverContent (forwardRef) -> ContentModal/NonModal (:ref=forwardRef) -> ContentImpl (forwardRef) -> PopperContent (:ref=forwardRef), so `<PopoverContent ref=...>` yields the content DOM element. robonen's PopoverContent, PopoverContentModal, PopoverContentNonModal, and PopoverContentImpl never call useForwardExpose nor bind a ref, so consumers cannot obtain the content element/instance.
+- 🔶 (api-surface) PopoverArrow does not forward its props and has no exposed ref. reka's PopoverArrow does `v-bind="props"` (forwarding as/asChild/rounded/width/height) and calls useForwardExpose(). robonen's PopoverArrow.vue only binds :width and :height to PopperArrow and drops everything else (as, custom attrs), and never exposes a ref.
+- 🔶 (features) Default arrow renders nothing visible. reka's Arrow (shared/component/Arrow.vue) defaults as='svg', sets viewBox '0 0 12 6', preserveAspectRatio, and renders a default triangle <path d="M0 0L6 6L12 0"> plus a rounded variant. robonen's PopperArrow renders a plain <span> wrapping a Primitive as='span' with no default geometry, so out-of-the-box `<PopoverArrow/>` is an empty/invisible element unless the consumer supplies their own SVG via the slot.
+
+**Minor gaps (3):**
+- ▫️ (features) No rounded arrow option. reka exposes ArrowProps.rounded to switch to a rounded arrow path; robonen PopperArrowProps only has width/height, so PopoverArrow can never render the rounded variant.
+- ▫️ (api-surface) PopoverAnchor does not expose its element via ref. reka calls useForwardExpose() in PopoverAnchor; robonen's PopoverAnchor.vue does not, so a template ref on PopoverAnchor won't resolve to the anchor element/instance.
+- ▫️ (edge-cases) interactOutside handler is synchronous. reka's PopoverContentNonModal uses an async interact-outside handler (allowing awaited guards before deciding to prevent); robonen's is synchronous. Minor, but reka's signature is more future-proof for async dismissal guards.
+
+**Recommendations to make robonen strictly better:**
+- In PopoverContentModal.vue, add `import { useHideOthers } from '../utils/useHideOthers'`, obtain the content element via useForwardExpose's currentElement, then call `useHideOthers(currentElement)` so modal popovers aria-hide background content for screen readers (match DialogContentModal/MenuRootContentModal).
+- In PopoverContentImpl.vue, import and call `useFocusGuard` from '@robonen/vue' (as MenuRootContentModal does) so edge focus guards are injected for consistent focusin/focusout handling and Tab-out behavior.
+- Thread a forwardRef through the content chain: call useForwardExpose() in PopoverContent and bind `:ref="forwardRef"` on PopoverContentModal/NonModal; forward it to PopoverContentImpl; in PopoverContentImpl call useForwardExpose() and bind `:ref="forwardRef"` on PopperContent — so `<PopoverContent ref>` exposes the content element (also needed to wire useHideOthers in the modal).
+- Fix PopoverArrow.vue to `v-bind="props"` onto PopperArrow (forward as/attrs), add useForwardExpose(), and keep the width/height defaults; this restores the standard arrow API surface.
+- Give PopperArrow a real default rendering: default `as='svg'`, set viewBox/preserveAspectRatio, render a default triangle <path d="M0 0L6 6L12 0"> as slot fallback, and add a `rounded?: boolean` prop with the rounded path — so `<PopoverArrow/>` is visible out of the box (and default PopoverArrow as='svg' like reka).
+- Add useForwardExpose() to PopoverAnchor.vue so the anchor element is accessible via template ref.
+- Optional: make PopoverContentNonModal's interact-outside handler async to match reka and allow awaited dismissal guards.
+- Keep robonen's eager IDs (always-valid aria-controls) and the separate forceMount/present Presence wiring — these are genuine improvements over reka; document them as intentional.
+
+**Where robonen is already better:**
+- ✅ Superior body scroll lock: robonen's useBodyScrollLock (toolkit/.../useBodyScrollLock/index.ts) is reference-counted, auto-disposes via tryOnScopeDispose, preserves original overflow/paddingRight/touchAction, and compensates for scrollbar width to prevent layout shift. reka's PopoverContentModal just calls useBodyScrollLock(true) with a simpler shared util.
+- ✅ Eager, always-valid id wiring: robonen generates triggerId/contentId in PopoverRoot via useId, so PopoverTrigger's aria-controls always references a valid contentId. reka lazily sets rootContext.contentId only when PopoverContent mounts, so the trigger's aria-controls is '' (empty) until content has mounted at least once.
+- ✅ Cleaner forceMount semantics: robonen PopoverContent passes forceMount separately to <Presence :present=open :force-mount=forceMount>, whereas reka conflates them with <Presence :present="forceMount || open">, which makes present===true permanently when forceMount is set (Presence then can't distinguish forced-mount from real-open for exit transitions).
+- ✅ Richer Popper positioning surface forwarded through content: robonen PopperContentProps adds hideShiftedArrow, disableUpdateOnLayoutShift, reference (custom ReferenceElement), and exposes positionStrategy 'absolute'|'fixed' (default fixed) with documented defaults — a strictly larger positioning API than what flows through reka's PopoverContent.
+- ✅ Documented, typed context and props with JSDoc (PopoverRootProps.modal/defaultOpen, all DismissableLayerEmits); useContextFactory gives a typed inject with a clear provider-missing error.
+- ✅ Performance-minded reactivity: PopoverRoot uses toRef(() => modal) for identity passthrough instead of computed, PopperArrow/useHideOthers constants are hoisted to module scope, and isInClosedPopover is isolated so its try/catch doesn't deopt the watcher callback.
+
+
+### menubar  —  _robonen-better-with-gaps_
+
+
+Both libraries expose an identical set of 17 menubar parts and the wrapper sub-components (Item/CheckboxItem/RadioGroup/RadioItem/Indicator/Group/Label/Separator/Arrow/Portal/Sub*) are equivalent thin forwarders. Robonen is genuinely ahead on a few points: it adds trigger-level typeahead (reka has none), opens the menu on ArrowUp at the trigger, types the modelValue emit correctly (reka's is a buggy boolean), and uses safer eager id generation. However robonen has several real gaps versus reka: (1) CRITICAL — no cross-menu ArrowLeft/ArrowRight navigation while a menu's content is open (reka's MenubarContent/SubContent handleArrowNavigation), the central APG menubar interaction; (2) MAJOR — no roving tabindex, so every trigger is a tab stop instead of the menubar being a single tab stop (reka uses RovingFocusGroup/Item; robonen even has the module but doesn't use it); (3) MAJOR — MenubarSub has no defaultOpen/uncontrolled mode (MenuSub is controlled-only, default false); (4) MAJOR — closeAutoFocus always yanks focus back to the trigger even after clicking outside (reka guards with hasInteractedOutsideRef). Minor gaps: align is hard-forced and can't be overridden, aria-controls dangles when closed, no data-highlighted/data-value on the trigger, no macOS ctrl+click guard, missing trigger-width/height CSS vars, and slots don't expose modelValue/open. Net: robonen is better in places but not yet strictly better; fixing the roving tabindex, cross-menu arrow nav, sub uncontrolled mode, and focus-return behavior would make it strictly superior.
+
+**Critical gaps:**
+- ⛔ (keyboard) No cross-menu Arrow navigation while a menu is open: when a MenubarContent (or SubContent) is open and focus is inside it, pressing ArrowRight/ArrowLeft should open the adjacent menubar menu (core APG menubar behavior). Robonen's MenubarContent has no such handler and MenuContentImpl's RovingFocusGroup is orientation=vertical so horizontal arrows just bubble and do nothing. Reka implements handleArrowNavigation on MenubarContent (@keydown.arrow-right.arrow-left) and MenubarSubContent (@keydown.arrow-right), computing the next menu value from collection data-value (RTL-aware via dir, loop-aware via wrapArray) and calling rootContext.onMenuOpen.
+  - _evidence:_ reka MenubarContent.vue handleArrowNavigation + @keydown.arrow-right.arrow-left, MenubarSubContent.vue @keydown.arrow-right. robonen MenubarContent.vue has no arrow handler; grep arrow/onMenuOpen in robonen MenuContentImpl/MenuContent = none.
+
+**Major gaps:**
+- 🔶 (keyboard) No roving tabindex on menubar triggers: robonen's MenubarTrigger renders a plain <button> with no tabindex management, so EVERY trigger is in the tab order. This violates the WAI-ARIA menubar pattern where the menubar is a single tab stop and Arrow keys move between triggers. Reka wraps each trigger in RovingFocusItem (:tab-stop-id=value, :focusable=!disabled) under a RovingFocusGroup with v-model:current-tab-stop-id, so RovingFocusItem.vue sets :tabindex="isCurrentTabStop ? 0 : -1" — exactly one tabbable trigger. Robonen even already has a roving-focus module (src/roving-focus) but does not use it here.
+- 🔶 (api-surface) MenubarSub has no uncontrolled mode / defaultOpen. Robonen MenubarSub forwards to MenuSub, whose only prop is `open` (controlled, default false) with no defaultOpen and no internal useVModel — so a submenu cannot be uncontrolled. Reka's MenubarSub adds defaultOpen and wires useVModel(open, ..., passive) so the submenu works uncontrolled out of the box and exposes :open to the slot.
+- 🔶 (edge-cases) closeAutoFocus always yanks focus back to the trigger. Robonen's MenubarContent close-auto-focus handler unconditionally calls menuCtx.triggerRef.value?.focus() on every close — including when the user clicked/focused outside the menu (e.g. into an input). Reka tracks hasInteractedOutsideRef (set on interact-outside) and only refocuses the trigger when (!menubarOpen && !hasInteractedOutsideRef), letting focus stay where the user clicked. Robonen also has no interact-outside tracking for this.
+
+**Minor gaps (7):**
+- ▫️ (api-surface) align prop cannot be overridden. In robonen MenubarContent the template does v-bind="props" THEN align="start"; the static attribute wins, so any consumer-supplied align is ignored and content is always start-aligned. Reka uses withDefaults(defineProps, { align: 'start' }) and forwards via useForwardPropsEmits, so consumers can override align.
+- ▫️ (accessibility) aria-controls is a dangling reference when the menu is closed. Robonen MenubarTrigger always sets :aria-controls="menuCtx.contentId.value", but the content is conditionally rendered via Presence (only when open), so when closed aria-controls points to a non-existent id. Reka guards :aria-controls="open ? menuContext.contentId : undefined".
+- ▫️ (features) No data-highlighted styling hook on the focused trigger. Reka tracks isFocused via @focus/@blur and sets :data-highlighted on the trigger, letting consumers style the keyboard-focused trigger. Robonen's MenubarTrigger has no data-highlighted/focus tracking.
+- ▫️ (edge-cases) No macOS ctrl+click guard on the trigger pointerdown. Robonen handlePointerDown only checks event.button !== 0. Reka additionally checks event.ctrlKey === false to avoid treating a macOS ctrl+click (context-menu) as a left click that opens the menu.
+- ▫️ (features) No data-value on the trigger and no subtrigger marker attribute. Reka sets :data-value on the trigger (used by content arrow navigation to identify the next menu) and data-reka-menubar-subtrigger on MenubarSubTrigger (used to suppress cross-menu nav while opening a submenu). Robonen omits both, which is also why the cross-menu nav (above) cannot work without adding them.
+- ▫️ (features) Missing trigger-width/height CSS custom properties on content. Reka sets --reka-menubar-trigger-width: var(--reka-popper-anchor-width) and -trigger-height on MenubarContent/SubContent for convenient content sizing. Robonen's content only exposes --primitives-menu-content-transform-origin/-available-width/-available-height (no anchor/trigger width alias at the menubar layer). The underlying --popper-anchor-width exists, so this is only a convenience-API gap.
+- ▫️ (api-surface) Root slot does not expose modelValue and Sub slot does not expose open. Reka MenubarRoot exposes <slot :model-value> and MenubarSub exposes <slot :open>, letting consumers reactively read the open menu / submenu state in the template. Robonen MenubarRoot's <slot /> passes nothing and MenubarSub's slot passes nothing.
+
+**Recommendations to make robonen strictly better:**
+- Add roving tabindex to MenubarTrigger by wrapping it in the existing src/roving-focus RovingFocusItem (focusable=!disabled, tabStopId=menuValue) under a RovingFocusGroup in MenubarRoot (orientation=horizontal, loop, dir, v-model:currentTabStopId). Drive currentTabStopId from onMenuOpen/onMenuToggle (as reka does) so the menubar is a single tab stop. This also lets you delete the hand-rolled focusByIndex/Home/End logic.
+- Implement cross-menu Arrow navigation: add @keydown.arrow-left.arrow-right on MenubarContent (and @keydown.arrow-right on MenubarSubContent) that reads the trigger collection (add :data-value to MenubarTrigger), filters disabled, computes the next/prev menu value (RTL-aware via rootCtx.dir, loop-aware), and calls rootCtx.onMenuOpen. Add a data-* marker on MenubarSubTrigger so opening a submenu is not hijacked by the next-menu navigation.
+- Give MenubarSub an uncontrolled mode: add a defaultOpen prop and use the repo's useVModel-equivalent so open is passive when `open` is undefined; pass :open to the default slot. Propagate the same into MenuSub or handle it in the menubar wrapper.
+- Stop unconditionally refocusing the trigger on close: track a hasInteractedOutside ref (set in @interact-outside) and only call triggerRef.focus() in close-auto-focus when the menubar is fully closed and the user did NOT interact outside (mirror reka). Always preventDefault to control focus deterministically.
+- Let consumers override align: switch MenubarContent to withDefaults({ align: 'start' }) and forward props (place v-bind AFTER, or merge align into props) instead of a static align="start" that clobbers the user value.
+- Guard aria-controls on MenubarTrigger so it is only set when the menu is open (e.g. :aria-controls="open ? contentId : undefined") to avoid a dangling IDREF while the Presence-gated content is unmounted.
+- Add :data-highlighted on MenubarTrigger driven by @focus/@blur (isFocused) for keyboard-focus styling parity.
+- Add the macOS guard: ignore pointerdown when event.ctrlKey is true in handlePointerDown.
+- Expose --primitives-menubar-trigger-width/height (aliasing --popper-anchor-width/height) on MenubarContent/SubContent, and expose modelValue from the MenubarRoot slot and open from the MenubarSub slot for parity and DX.
+- Keep robonen's genuine wins (trigger typeahead, ArrowUp-opens-menu, correct emit types, toggle-on-click) and add tests covering the new roving tabindex single-tab-stop, cross-menu arrow switching, and submenu uncontrolled defaultOpen.
+
+**Where robonen is already better:**
+- ✅ Trigger-level typeahead: MenubarRoot wires a keydown.capture handler that fills a shared searchRef, and MenubarTrigger watches it + uses getNextMatch to jump focus to the matching trigger (e.g. type 'v' -> focus 'View'). Reka's menubar has NO trigger typeahead at all (it only imports wrapArray, an array-rotation helper, not useTypeahead). This is a WAI-ARIA APG recommended behavior reka omits.
+- ✅ MenubarTrigger opens the menu on ArrowUp in addition to Enter/Space/ArrowDown (MenubarTrigger.vue handleKeyDown checks 'ArrowUp'). Reka's trigger only handles Enter/Space/ArrowDown (@keydown.enter.space.arrow-down), so ArrowUp does nothing on a reka trigger.
+- ✅ Correct emit typing: MenubarRootEmits is typed as ['update:modelValue': [value: string | undefined]]. Reka's MenubarRootEmits is mistyped as [value: boolean] (a real bug in reka-ui MenubarRoot.vue), which would mislead consumers using v-model.
+- ✅ contentId/triggerId are generated eagerly and deterministically via useId in MenubarMenu and provided through context; reka lazily mutates menuContext.contentId via ||= inside MenubarContent and even assigns triggerId = value (the user-supplied menu value), which can collide/duplicate ids if two menus share a value. Robonen's id wiring is cleaner and collision-safe.
+- ✅ Clicking an already-open trigger closes it: handlePointerDown calls rootCtx.onMenuToggle. Reka's pointerdown calls onMenuOpen (not toggle), so clicking the open trigger again does not close it via pointer (only via dismiss), which is arguably worse UX for a menubar.
+
+
+### accordion  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** AccordionHeader
+
+Both libraries cover the core accordion behavior (single/multiple, collapsible, controlled+uncontrolled v-model, disabled root+item, RTL/orientation-aware Arrow/Home/End keyboard nav, role=region + aria-labelledby + aria-expanded/controls, data-state/data-disabled/data-orientation). robonen is genuinely better in a few areas: it uses a real Collection instead of querySelectorAll('[data-reka-collection-item]'), it exposes a configurable `loop` prop the reka Accordion lacks, its keyboard logic is a clean testable util, and it avoids the ohash/useVModel deps with a cheap Set-equality guard. However reka is currently better in several concrete, verifiable ways that block 'strictly better': (1) reka has an AccordionHeader part required by the ARIA accordion pattern — robonen has none (critical a11y gap); (2) reka supports asChild everywhere, robonen only has `as`; (3) reka exposes measured --reka-accordion-content-height/width CSS vars enabling animate-to-auto, robonen exposes none; (4) reka supports hidden=until-found + beforematch find-in-page reveal, robonen uses plain hidden; (5) reka has Root+per-item unmountOnHide, type inference/validation of single vs multiple, a modelValue Root slot prop, item defineExpose, and type-generic emits — all absent in robonen. Verdict: robonen-better-with-gaps; closing the Header, asChild, content-dimension-vars, and beforematch gaps would make it strictly better.
+
+**Critical gaps:**
+- ⛔ (accessibility) reka ships an AccordionHeader part (AccordionHeader.vue, defaults to `as: 'h3'`, wires data-state/data-disabled/data-orientation) so the trigger is wrapped in a real heading element — the WAI-ARIA Accordion pattern REQUIRES each trigger button to live inside a heading element (h1-h6) for screen-reader heading navigation. robonen has NO Header part; consumers must hand-roll the heading and lose the data-* wiring.
+  - _evidence:_ reka Accordion/AccordionHeader.vue + index.ts exports AccordionHeader; robonen src/accordion/index.ts exports only Root/Item/Trigger/Content — no Header, violating the ARIA accordion heading requirement.
+
+**Major gaps:**
+- 🔶 (api-surface) reka supports `asChild` (render-as-child / polymorphic merge onto an existing child element) on every part via PrimitiveProps. robonen's PrimitiveProps only has `as` (primitive/Primitive.ts: `export interface PrimitiveProps { as?: ... }`) with no `asChild`/`as-child`. Consumers cannot merge accordion behavior onto an arbitrary child component; they are limited to the `as` element swap.
+- 🔶 (features) reka exposes `--reka-accordion-content-height` and `--reka-accordion-content-width` CSS custom properties (AccordionContent.vue style block, fed by CollapsibleContent measuring getBoundingClientRect). This is what lets users animate height/width from 0 to auto with pure CSS. robonen's AccordionContent renders <Presence> directly and provides NO measured dimension vars — animating to auto-height is impossible without user JS.
+- 🔶 (accessibility) reka supports `hidden="until-found"` + `beforematch` find-in-page expansion: when the browser's in-page find lands on collapsed content, CollapsibleContent fires `contentFound` and AccordionContent.vue auto-opens the item (`@content-found="rootContext.changeModelValue(...)"`). robonen AccordionContent uses `:hidden="!item.open.value || undefined"` (plain boolean hidden) and has no beforematch listener, so collapsed panels are invisible to Ctrl+F.
+
+**Minor gaps (6):**
+- ▫️ (api-surface) reka offers `unmountOnHide` at the Root (default true) AND a per-Item override (AccordionItem.vue `:unmount-on-hide="props.unmountOnHide ?? rootContext.unmountOnHide.value"`), letting consumers keep closed content in the DOM globally. robonen only has a per-Content `forceMount` boolean; there is no Root-level `unmountOnHide` and no per-item inheritance/override.
+- ▫️ (edge-cases) reka infers `type` from the shape of modelValue/defaultValue and validates coherence, logging a dev error on mismatch (useSingleOrMultipleValue.ts validateProps: single+array → error, multiple+non-array → error). robonen trusts the explicit `type` prop and silently coerces via toArray; passing defaultValue: ['a','b'] with type:'single' will not warn and will misbehave on emit (toEmitValue returns only the first value).
+- ▫️ (api-surface) reka's Root default slot exposes `modelValue` (AccordionRoot.vue defineSlots + `<slot :model-value="modelValue" />`), so consumers can render based on current open value(s) without re-deriving. robonen's Root slot exposes nothing (AccordionRoot.vue:150 `<slot />`).
+- ▫️ (api-surface) reka's AccordionItem calls `defineExpose({ open, dataDisabled })` so template refs / parent code can read an item's open state. robonen's AccordionItem (and Root) expose nothing beyond the forwarded element ref — no programmatic open/disabled introspection.
+- ▫️ (types) reka explicitly types Root emits generic on single vs multiple (`AccordionRootEmits<T extends SingleOrMultipleType>` → value is `string | undefined` for single, `string[] | undefined` for multiple). robonen's emit is the looser union `update:modelValue: [value: string | string[] | undefined]` regardless of type, so v-model is less type-safe in single mode.
+- ▫️ (edge-cases) reka guards the no-collapse case inside the Trigger as well as Root (AccordionTrigger.vue:21 `triggerDisabled = isSingle && open && !collapsible`) ensuring the click is a true early no-op. robonen relies solely on Root.toggle's nextOpenSet returning the same Set reference to skip commit (AccordionRoot.vue:82,108) — functionally correct but the trigger still always invokes ctx.toggle.
+
+**Recommendations to make robonen strictly better:**
+- Add an AccordionHeader.vue part (default `as: 'h3'`, forwarding data-state/data-disabled/data-orientation) and export it from index.ts, then update docs/stories to wrap AccordionTrigger inside AccordionHeader — this is required by the WAI-ARIA accordion pattern for heading-level screen-reader navigation.
+- Add `asChild`/`as-child` support to PrimitiveProps and the Primitive/Slot implementation so all accordion parts can merge onto a consumer-provided child element, matching reka's polymorphism.
+- Make AccordionContent measure its content box (getBoundingClientRect with animations temporarily disabled, like reka's CollapsibleContent) and expose `--accordion-content-height` / `--accordion-content-width` (or reuse collapsible vars) so consumers can animate open/close to auto height in pure CSS.
+- Implement `hidden="until-found"` + a `beforematch` listener that auto-opens the item, so collapsed panels are reachable by browser find-in-page; ideally route AccordionContent through CollapsibleContent and add the contentFound emit there.
+- Add a Root-level `unmountOnHide` prop (default true) with a per-item override that falls back to the root value, and have AccordionContent honor it instead of relying only on per-content forceMount.
+- Expose `modelValue` from the Root default slot, and `defineExpose({ open, disabled })` from AccordionItem for programmatic introspection.
+- Tighten the Root emit type to be generic over `type` (string|undefined for single, string[]|undefined for multiple) and add dev-time validation/inference of `type` from the modelValue/defaultValue shape (warn on single+array or multiple+non-array), mirroring reka's useSingleOrMultipleValue.
+- Add an explicit trigger-side no-op guard for the single+open+!collapsible case so clicks short-circuit before reaching Root.toggle (parity with reka's triggerDisabled), and consider routing each item through the existing Collapsible primitive to share content/animation logic instead of using Presence directly.
+
+**Where robonen is already better:**
+- ✅ Uses a real internal Collection (useCollectionProvider/CollectionInjector) for DOM-ordered trigger discovery. AccordionRoot.vue:111-112 `getItems(true).map(i => i.ref)`. reka instead does `rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]')` on every keydown (AccordionItem.vue:95), which is slower, leaks a magic DOM attribute, and breaks if the trigger is teleported/portaled out of the root subtree.
+- ✅ Exposes a configurable `loop` prop on the Root (AccordionRoot.vue:28, threaded into rovingKeyToAction/resolveNextIndex). reka's Accordion does NOT expose loop at all — it always inherits useArrowNavigation's default `loop: true` with no way to disable wrap-around at first/last trigger.
+- ✅ Keyboard handling is centralized in the Root via a pure, unit-testable roving-focus util (utils/roving-focus.ts: rovingKeyToAction + resolveNextIndex). reka scatters nav into each Item's `handleArrowKey` and re-queries the DOM each time; robonen computes `triggerElements` once reactively.
+- ✅ openSet membership uses a Set with an O(n) early-exit `setEqualsArray` guard before reassigning (AccordionRoot.vue:63-74), avoiding the deep `isEqual`/`ohash` dependency reka pulls in via useSingleOrMultipleValue, and avoiding redundant writes on no-op model updates.
+- ✅ No external dependency on @vueuse/core useVModel or ohash for the controlled/uncontrolled logic — robonen implements it with a single shallowRef + watch, which is lighter weight.
+
+
+### editable  —  _robonen-better-with-gaps_
+
+
+Both libraries implement the same 7-part Editable (Root, Area, Preview, Input, Edit/Submit/Cancel triggers) with the same activationMode/submitMode/selectOnFocus/autoResize/maxLength/disabled/readonly/startWithEditMode props, identical placeholder resolution, the same Enter-submit / Escape-cancel keyboard model, and the same controlled+uncontrolled (modelValue/defaultValue) + update:state/submit emits. robonen is genuinely better in several places: a unified data-state hook across all parts (reka has none), correct data-placeholder-shown semantics tied to emptiness rather than edit mode, an edit() guard that also respects readonly, change-gated v-model emission, stricter string-only typing, and lighter reactivity (no deep watch). However robonen has real gaps versus reka: (1) CRITICAL — zero form integration; reka renders a VisuallyHiddenInput driven by name/required/useFormControl so the field submits with a form, while robonen has no name/required and no hidden input. (2) No dir/RTL support, despite robonen having a ConfigProvider used elsewhere. (3) Root does not defineExpose edit/cancel/submit (reka does), so the imperative API is context-only. (4) No id prop. (5) Outside-dismiss relies on a single focusout.capture rather than reka's pointerdown-outside + focus-outside DismissableLayer wiring, missing pointer-outside dismissal and nested-layer coordination. (6) Triggers lack aria-disabled. (7) No axe a11y test. Closing the form-integration, dir, and defineExpose gaps would make robonen strictly better, since it already wins on data-attribute design, semantics, and types.
+
+**Critical gaps:**
+- ⛔ (forms) No form integration at all. reka's EditableRootProps extends FormFieldProps (name, required) and renders a <VisuallyHiddenInput type="text" :value="modelValue" :name :disabled :required> inside the Root when useFormControl detects a surrounding form (EditableRoot.vue:241-248). robonen's EditableRootProps has no name/required props and renders no hidden input, so an Editable cannot participate in native form submission. robonen already ships a VisuallyHidden component (src/visually-hidden/) and a ConfigProvider, so the primitive is simply not wired up.
+  - _evidence:_ reka EditableRoot.vue:32 (FormFieldProps), :142 useFormControl(currentElement), :241-248 VisuallyHiddenInput; robonen EditableRoot.vue has no name/required/VisuallyHiddenInput
+
+**Major gaps:**
+- 🔶 (rtl-i18n) No RTL / direction support. reka accepts a dir prop, resolves it via useDirection(propDir) (falling back to ConfigProvider), and binds :dir on the Root Primitive (EditableRoot.vue:39,132,224). robonen's EditableRoot has no dir prop and binds no dir attribute, even though other robonen primitives (ListboxRoot.vue) already use config.dir. Editable cannot inherit or override reading direction.
+- 🔶 (api-surface) Root does not expose imperative methods. reka calls defineExpose({ submit, cancel, edit }) (EditableRoot.vue:188-195) so a template ref / parent can drive the editable programmatically. robonen's EditableRoot relies on useForwardExpose (which only forwards props and $el, not local functions) and never calls defineExpose, so edit/cancel/submit are reachable only via the injected context, not from a ref to <EditableRoot>.
+- 🔶 (edge-cases) Outside-dismiss is weaker. reka commits/cancels via BOTH usePointerDownOutside and useFocusOutside wired through the DismissableLayer system with data-dismissable-layer and layer-nesting awareness (EditableRoot.vue:183-184,227-230). robonen only listens to a single native @focusout.capture and checks root.contains(relatedTarget) (EditableRoot.vue:114-121). This misses pointerdown-outside dismissal (e.g. clicking a non-focusable area outside, or browsers where blur relatedTarget is null), and has no nested-layer coordination.
+
+**Minor gaps (4):**
+- ▫️ (api-surface) No id prop. reka exposes an id prop and threads it through context (EditableRoot.vue:57-58, context id: Ref<string|undefined>), enabling stable ids / aria wiring. robonen has neither an id prop nor id in its context (context.ts).
+- ▫️ (accessibility) Triggers omit aria-disabled. reka sets BOTH :aria-disabled and :disabled on Edit/Submit/Cancel triggers (e.g. EditableEditTrigger.vue:20-21). robonen sets only :disabled and :data-disabled (EditableEditTrigger.vue:24-25). When a consumer renders a trigger as a non-button element (as prop), the disabled attribute is inert and there is no aria-disabled to convey state to assistive tech.
+- ▫️ (keyboard) Input keydown also binds Space. reka's input handler is @keydown.enter.space (EditableInput.vue:68) so the submit path is evaluated on Space too (still gated by submitMode + key check inside). robonen only listens for Enter/Escape (EditableInput.vue:47-59). This is a minor behavioral divergence; reka's intent is to also intercept Space-driven submit semantics on non-input as targets.
+- ▫️ (accessibility) No documented axe accessibility test. reka's Editable.test.ts:29-32 runs axe(root) and asserts no violations, guarding the a11y contract. robonen's __test__/Editable.test.ts covers behavior but has no automated accessibility assertion.
+
+**Recommendations to make robonen strictly better:**
+- Add form integration to EditableRoot: extend props with name and required, add useFormControl(currentElement) (robonen already has a ConfigProvider/VisuallyHidden), and render a VisuallyHiddenInput type="text" :value="modelValue" :name :disabled :required inside the Root when inside a form and name is set. Mirror reka EditableRoot.vue:241-248. This is the only critical gap.
+- Add a dir prop to EditableRoot, resolve it against the existing ConfigProvider (computed(() => dir ?? config.dir.value), the pattern already used in ListboxRoot.vue:63), and bind :dir on the Root Primitive so reading direction is inheritable/overridable.
+- Call defineExpose({ edit, cancel, submit }) in EditableRoot so the imperative API is reachable from a template ref, matching reka EditableRoot.vue:188-195. (useForwardExpose alone does not forward local functions.)
+- Add an id prop to EditableRoot and thread it through context for stable ids; consider using useId fallback from config-provider/useId.
+- Strengthen outside-dismiss: in addition to focusout.capture, also handle pointerdown-outside (or adopt robonen's DismissableLayer equivalent if one exists) so clicking a non-focusable region outside while editing still commits/cancels per submitMode. Guard the focusout path for relatedTarget === null.
+- Add :aria-disabled="ctx.disabled.value || undefined" alongside :disabled on EditableEditTrigger/EditableSubmitTrigger/EditableCancelTrigger so disabled state is conveyed when rendered as a non-button element.
+- Tighten the modelValue type union: robonen already uses string-only which is good; keep it, but ensure the submit emit and v-model stay string (do not regress to reka's string|null|undefined).
+- Add an axe accessibility assertion to __test__/Editable.test.ts to lock in the a11y contract, matching reka Editable.test.ts:29.
+- Optional: also intercept Space in EditableInput keydown if you want parity with reka's @keydown.enter.space, though for a real <input> Enter-only is arguably more correct.
+
+**Where robonen is already better:**
+- ✅ Richer data-attribute surface on Root and sub-components: robonen exposes data-state="edit"|"preview" on Root (EditableRoot.vue:149), Area, Preview AND Input, plus data-disabled/data-readonly/data-empty consistently. reka only ever emits data-placeholder-shown / data-focus / data-focused / data-empty / data-readonly / data-disabled and never a unified data-state, and its Input lacks any state attribute. robonen's data-state is a better styling hook.
+- ✅ EditablePreview adds data-placeholder-shown using a dedicated showPlaceholder computed driven by isEmpty (EditablePreview.vue:19,36), so it is only set when the value is genuinely empty. reka sets data-placeholder-shown purely from !isEditing (EditablePreview.vue:32), so a non-empty preview that is not editing still reports data-placeholder-shown='' — robonen's semantics are more correct.
+- ✅ robonen's edit() guards against both disabled AND readonly before entering edit mode (EditableRoot.vue:95), preventing edit activation while readonly. reka's edit() has no such guard and will enter edit mode even when readonly (it only blocks the actual text mutation via the input's readonly attribute).
+- ✅ commitModel only emits update:modelValue when the value actually changed (EditableRoot.vue:88-92), avoiding redundant v-model emissions and a spurious submit-with-no-change write. reka's submit() always assigns modelValue.value = inputValue.value unconditionally (EditableRoot.vue:167).
+- ✅ Cleaner reactivity: robonen uses toRef(() => prop) getters for context refs and a shallowRef for the input element. reka's watch on modelValue uses { immediate: true, deep: true } (EditableRoot.vue:150-152) — deep:true on a plain string ref is unnecessary overhead.
+- ✅ modelValue typed strictly as string end-to-end (context.ts:14, EditableRoot.vue:7). reka types it as string | null | undefined (EditableRoot.vue:15-16) which leaks null/undefined into modelValue, inputValue, and the submit emit, weakening type guarantees for consumers.
+
+
+### tooltip  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** TooltipContentHoverable.vue (grace-area hoverable content wrapper)
+
+robonen's tooltip is a faithful, slightly cleaner port (better SSR guards, explicit timer disposal, richer JSDoc, and it uniquely surfaces sideFlip/alignFlip props that reka's tooltip hides). However it has one critical regression and several real API gaps versus reka. CRITICAL: there is no TooltipContentHoverable equivalent, so the entire hoverable-content / grace-area feature is dead — `isPointerInTransitRef` is read in the trigger but never set true, and with disableHoverableContent defaulting to false the content cannot be safely hovered and the skip-delay handoff between adjacent triggers is broken. robonen already ships src/utils/useGraceArea (used by hover-card), so this is purely un-wired. Additional gaps: the trigger does not accept/forward a `reference` anchor prop (reka extends PopperAnchorProps), the provider lacks the `content` default-props mechanism, the trigger uses data-tooltip-trigger instead of data-grace-area-trigger, no TooltipRootEmits type is exported, and controlled-only open changes bypass provider bookkeeping/broadcast. Verdict: robonen-better-with-gaps — strong foundation but NOT yet strictly better until at least the hoverable-content and reference/provider-content gaps are closed.
+
+**Critical gaps:**
+- ⛔ (features) robonen tooltip has NO hoverable-content support at all. reka ships a dedicated TooltipContentHoverable.vue that wires useGraceArea(trigger, content): it sets providerContext.isPointerInTransitRef and calls onClose() on pointer-exit of the safe-area polygon. robonen's TooltipContent.vue ALWAYS renders TooltipContentImpl directly and never branches on disableHoverableContent. Consequently `isPointerInTransitRef` (read in TooltipTrigger.vue:30) is initialized false in TooltipProvider.vue:54 and is NEVER set to true anywhere in the tooltip, and when disableHoverableContent is false (the DEFAULT), onTriggerLeave only does clearOpenTimer() (TooltipRoot.vue:145-147) with no grace-area tracking and no mechanism to close the tooltip once the pointer actually leaves toward/past the content. The whole hoverable feature and the skip-delay-between-adjacent-triggers protection are dead. Note: robonen ALREADY has src/utils/useGraceArea.ts and uses it in hover-card, so this is purely un-wired.
+  - _evidence:_ reka Tooltip/TooltipContent.vue:33 `:is="rootContext.disableHoverableContent.value ? TooltipContentImpl : TooltipContentHoverable"` + TooltipContentHoverable.vue:15-19 (useGraceArea + onPointerExit->onClose + isPointerInTransitRef assignment). robonen TooltipContent.vue:24-31 always mounts TooltipContentImpl; TooltipProvider.vue:54 isPointerInTransitRef never set true; useGraceArea exists at src/utils/useGraceArea.ts but tooltip never imports it.
+
+**Major gaps:**
+- 🔶 (api-surface) TooltipTrigger does not accept or forward a custom `reference` (anchor) element. reka's TooltipTriggerProps extends PopperAnchorProps and passes `:reference="reference"` to PopperAnchor, letting users position the tooltip against an arbitrary virtual/real element instead of the trigger DOM node. robonen's TooltipTriggerProps extends only PrimitiveProps and renders `<PopperAnchor as="template">` with no reference passthrough, even though robonen's own PopperAnchor supports a `reference` prop.
+- 🔶 (api-surface) TooltipProvider has no `content` default-props mechanism. reka's TooltipProviderProps exposes `content?: TooltipContentProps`, stored in provider context and merged into every tooltip's PopperContent via defu (provider defaults < per-content props). This lets an app set e.g. default side/sideOffset for all tooltips once. robonen's provider has no `content` prop or any provider-level content defaults.
+- 🔶 (edge-cases) The trigger marker attribute is `data-tooltip-trigger` instead of the convention `data-grace-area-trigger` that robonen's own useGraceArea looks for (`target.closest('[data-grace-area-trigger]')`). Even once hoverable content is wired, moving the pointer from one tooltip trigger directly onto an adjacent tooltip trigger would not be detected as 'another grace-area trigger', so the in-transit grace area would not be torn down/handed off correctly. reka tags its trigger `data-grace-area-trigger` precisely so useGraceArea recognizes it.
+
+**Minor gaps (2):**
+- ▫️ (types) TooltipRoot does not export a TooltipRootEmits type. reka exports `TooltipRootEmits = { 'update:open': [value: boolean] }` for explicit typing of the emit. robonen relies solely on defineModel('open') with no exported emits type, so consumers typing `@update:open` handlers have no named type to import.
+- ▫️ (edge-cases) robonen's open watcher / provider notification is driven imperatively inside handleOpen/handleClose/handleDelayedOpen, whereas reka centralizes provider onOpen/onClose + the TOOLTIP_OPEN dispatch in a single `watch(open)` so any external/controlled change to `open` also triggers provider skip-delay bookkeeping and the single-tooltip-open broadcast. In robonen, a purely controlled `open` flip (e.g. parent sets v-model true without going through onOpen) will NOT call providerCtx.onOpen() nor dispatch TOOLTIP_OPEN, so controlled-mode opens skip the skip-delay window update and won't auto-close other open tooltips.
+
+**Recommendations to make robonen strictly better:**
+- CRITICAL: Add a TooltipContentHoverable.vue (mirroring src/hover-card/HoverCardContentImpl.vue's usage of src/utils/useGraceArea) and make TooltipContent.vue render `<component :is="ctx.disableHoverableContent.value ? TooltipContentImpl : TooltipContentHoverable">`. Inside the hoverable variant, call `useGraceArea(ctx.trigger, currentElement)`, push isPointerInTransit into ctx.isPointerInTransitRef via watchEffect, and call ctx.onClose() in onPointerExit. This activates the existing-but-dead isPointerInTransitRef read in TooltipTrigger.vue:30 and makes disableHoverableContent meaningful.
+- Change the trigger marker from `data-tooltip-trigger` to `data-grace-area-trigger` (or add it alongside) so useGraceArea's `[data-grace-area-trigger]` lookup detects adjacent tooltip triggers; update the test selector in __test__/Tooltip.test.ts:80 accordingly.
+- Make TooltipTriggerProps extend PopperAnchorProps and forward `:reference` to PopperAnchor (the robonen PopperAnchor already supports it), enabling custom/virtual anchor elements.
+- Add a `content?: TooltipContentProps` prop to TooltipProvider, store it in TooltipProviderContext, and merge it as defaults in TooltipContentImpl (provider defaults < per-content props), matching reka's defu behavior for app-wide tooltip positioning defaults.
+- Export a `TooltipRootEmits` type (`{ 'update:open': [value: boolean] }`) from TooltipRoot.vue and re-export it from index.ts for typed @update:open handlers.
+- Drive provider.onOpen/onClose and the TOOLTIP_OPEN broadcast from a single `watch(open, ...)` (in addition to or instead of the imperative handlers) so externally/controlled open changes also update the skip-delay window and close other open tooltips.
+
+**Where robonen is already better:**
+- ✅ Exposes additional Popper positioning props in TooltipContentImplProps that reka's tooltip does NOT surface: `sideFlip` and `alignFlip` (reka's PopperContent supports them, but reka's TooltipContentImpl `Pick<PopperContentProps, ...>` omits them, so reka tooltip users cannot independently toggle main/cross-axis flipping). robonen forwards both to PopperContent (TooltipContentImpl.vue:9-21,116-120).
+- ✅ More robust SSR/teardown safety: TooltipRoot.dispatchOpenEvent guards `typeof document === 'undefined'`, TooltipContentImpl guards `typeof globalThis === 'undefined'` for scroll listeners, and both TooltipRoot/TooltipProvider use explicit onScopeDispose to clear open/skip timers (TooltipRoot.vue:91, TooltipProvider.vue:63). reka relies on useTimeoutFn/useEventListener auto-cleanup but does not guard the `document.dispatchEvent` in its open watcher beyond a lifecycle comment.
+- ✅ Cleaner uncontrolled-state model: TooltipRoot keeps a dedicated `local` ref and a defineModel get/set bridge (TooltipRoot.vue:53-61) instead of reka's useVModel `passive` cast trick (`passive: (props.open === undefined) as false`), which is more type-honest.
+- ✅ Richer JSDoc on every prop in TooltipProviderProps/TooltipRootProps describing a11y consequences and timing semantics, improving DX over reka's terser docs.
+- ✅ TooltipPortal forwards full TeleportPrimitiveProps via `v-bind="props"`, on par with reka.
+
+
+### pin-input  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput (hidden form input rendered inside PinInputRoot for native form submission)
+
+Both libraries implement the same two parts (Root + Input) with the same core behavior: render-your-own N inputs, type-to-advance, Backspace-to-previous, paste-fills-across, mask (password), otp autocomplete, and a complete event. robonen is genuinely cleaner in some areas — it sets role=\"group\" on the root (reka sets no role anywhere), exposes isComplete in the slot, emits complete as a joined string, owns a `length` prop as a single source of truth with defensive single-char normalization, and avoids reka's deep watchers. However robonen has real gaps that prevent it from being strictly better. The critical one is the total absence of native form integration: reka renders a focusable VisuallyHiddenInput and supports name/required/id, while robonen cannot be submitted in a form. Other notable misses: no dir/RTL-aware arrow navigation, no per-input aria-label (a11y), no per-input disabled prop, no disabled-skipping navigation, no OTP sequential-fill focus guard, no placeholder-hide-on-focus, no as/asChild on the input, no numeric (number[]) typing, and no data-complete styling hooks. None of these are invented — each maps to a concrete reka symbol. Verdict: robonen-better-with-gaps; closing the form-integration, RTL, and aria-label items (the critical/major ones) is the path to strictly-better.
+
+**Critical gaps:**
+- ⛔ (forms) No native form integration at all: robonen renders no hidden input and PinInputRoot exposes no name/required/id props. reka renders <VisuallyHiddenInput :id :name :value=currentModelValue.join('') :disabled :required feature="focusable" tabindex=-1 @focus=focus-first-input> (PinInputRoot.vue:143-153) and extends FormFieldProps (name, required). A robonen pin-input cannot be submitted in a plain HTML <form>, cannot participate in required validation, and has no id for label association.
+  - _evidence:_ reka PinInputRoot.vue:28 (extends FormFieldProps), :47 (id prop), :143-153 (VisuallyHiddenInput with name/required/disabled/value); robonen PinInputRoot.vue has no name/required/id props and no hidden input.
+
+**Major gaps:**
+- 🔶 (rtl-i18n) No RTL/dir support. robonen hardcodes ArrowLeft=>previous and ArrowRight=>next (PinInputInput.vue:74-85) regardless of reading direction. reka passes dir into useArrowNavigation so in RTL ArrowRight moves to the previous logical input and ArrowLeft to the next (correct RTL behavior).
+- 🔶 (accessibility) Inputs have no aria-label, so screen readers announce N anonymous edit fields. reka sets a per-input label.
+
+**Minor gaps (10):**
+- ▫️ (api-surface) PinInputInput has no per-input `disabled` prop; only the root-level disabled is honored. reka lets each input be individually disabled and merges it with context disabled.
+- ▫️ (keyboard) Arrow navigation does not skip disabled inputs. robonen focusIndex(i±1) lands on an adjacent input even if it is disabled. reka's findNextFocusableElement recursively skips disabled elements.
+- ▫️ (keyboard) No OTP sequential-fill focus guard. In otp mode robonen lets the user focus and fill any input out of order. reka's handleFocus redirects focus to the first empty input so OTP is entered left-to-right without gaps.
+- ▫️ (features) Placeholder is always shown; it is not hidden on the focused/active input. reka clears the placeholder of the focused empty input for a cleaner UX.
+- ▫️ (api-surface) PinInputInput is a hardcoded raw <input> with no as/asChild polymorphism, so it cannot be rendered as a custom element or composed with asChild. reka's input extends PrimitiveProps (as:'input', asChild) and renders <Primitive>.
+- ▫️ (types) No typed numeric model. reka uses a generic PinInputValue<Type> producing number[] when type==='number' and stores numbers in the model. robonen always stores string[] regardless of type.
+- ▫️ (features) No data-complete state attribute exposed for styling on root or inputs, and inputs lack data-disabled. reka exposes data-complete on root (PinInputRoot.vue:138) and on each input plus data-disabled on each input (PinInputInput.vue:216-217).
+- ▫️ (edge-cases) Missing input hardening attributes for numeric/mobile UX: reka sets autocapitalize="none" and pattern="[0-9]*" (helps numeric soft-keyboards and iOS). robonen sets neither.
+- ▫️ (edge-cases) Caret/selection on user focus is not normalized. reka calls target.setSelectionRange(1,1) on focus so typing replaces the existing char predictably; robonen only calls el.select() during programmatic focusIndex and does nothing on real user focus/click.
+- ▫️ (code-quality) Root does not control attribute forwarding (no inheritAttrs:false). reka sets inheritAttrs:false and v-bind="$attrs" on the Primitive so attrs land on the wrapper predictably while the hidden form input is excluded; robonen relies on default attr inheritance with no explicit placement control.
+
+**Recommendations to make robonen strictly better:**
+- Add native form support: extend PinInputRoot props with name, required, id; render a focusable VisuallyHiddenInput (robonen already ships VisuallyHidden in src/visually-hidden) with :value=value.join(''), :name, :required, :disabled, tabindex=-1, and @focus forwarding to inputs.value[0].focus(). This closes the only critical gap.
+- Add `dir` prop + useDirection to PinInputRoot, expose dir in PinInputContext, and make ArrowLeft/ArrowRight direction-aware in PinInputInput.onKeyDown (in RTL, ArrowRight => previous, ArrowLeft => next).
+- Add :aria-label="`pin input ${index + 1} of ${length}`" to PinInputInput; keep the root role="group" advantage and consider an aria-label/aria-labelledby on the group.
+- Add a per-input `disabled` prop to PinInputInput merged with context.disabled, and make focusIndex skip disabled inputs (recursively find the next non-disabled index).
+- Add an @focus handler on PinInputInput implementing OTP sequential-fill (redirect focus to first empty input when otp is true) and setSelectionRange(1,1) for predictable caret/overwrite on user focus.
+- Hide the placeholder on the focused empty input (clear it on focus, restore on blur / when value changes).
+- Convert PinInputInput to render <Primitive :as="as" :as-child="asChild"> with PrimitiveProps so it supports as/asChild polymorphism instead of a hardcoded <input>.
+- Make the model generic over type: PinInputValue<Type> => number[] when type==='number', and store numbers accordingly (or explicitly document string[]-only as a deliberate choice).
+- Expose styling hooks: add :data-complete on the root and :data-disabled/:data-complete on each input.
+- Add autocapitalize="none" and :pattern="[0-9]*" (numeric) to the input element for better mobile/soft-keyboard behavior.
+- Set inheritAttrs:false + v-bind="$attrs" on the root Primitive so attribute forwarding is explicit and does not leak onto the (future) hidden form input.
+
+**Where robonen is already better:**
+- ✅ Root sets role="group" (PinInputRoot.vue:145) — reka sets NO role on its root or inputs, so robonen groups the inputs semantically for screen readers where reka does not.
+- ✅ Exposes isComplete to the default slot (PinInputRoot.vue:138/146: slot props { value, isComplete }) — reka's slot only exposes { modelValue } (PinInputRoot.vue:82-87), so robonen consumers can render completion UI without recomputing.
+- ✅ 'complete' event emits a ready-to-use joined string (PinInputRoot.vue:84 emit('complete', v.join(''))) — reka emits the raw array (PinInputRoot.vue:114), so robonen is slightly more ergonomic for the common case.
+- ✅ First-class `length` prop with normalize() clamping each cell to a single char and truncating overflow, plus a watcher that re-sizes the value array when length changes (PinInputRoot.vue:39-67). reka has no length prop and derives count purely from how many PinInputInput are mounted, so it has no single source of truth and no defensive clamping of incoming model values.
+- ✅ Defensive single-char enforcement: setAt slices to 1 char and re-syncs the DOM input after overwrite (PinInputInput.vue:48) preventing the native input from showing a stale/extra character.
+- ✅ Cleaner, lighter reactivity: no deep watcher on modelValue for completion. reka uses watch(modelValue, ..., { deep: true }) (PinInputRoot.vue:112-115) plus passive deep useVModel (deep:true) — robonen computes isComplete cheaply and emits complete inline in emitValue (PinInputRoot.vue:81-85).
+
+
+### collapsible  —  _robonen-better-with-gaps_
+
+
+Both libraries ship the same three parts (Root, Trigger, Content) with controlled+uncontrolled open state, disabled handling, aria-expanded/aria-controls wiring, data-state/data-disabled, and Presence-based mounting, so they are at structural parity on the basics. robonen is genuinely better in several places: its Trigger slot exposes `open`, its context offers onToggle/onOpen/onClose (vs reka's toggle-only), it publicly exports the provide/use context and context type for extensibility, and it only applies `disabled` to real button triggers. However, reka is clearly ahead on the animation and accessibility surface that defines a production Collapsible: it measures content and exposes `--reka-collapsible-content-height/width` CSS variables (critical for CSS height animations), supports `unmountOnHide` with `hidden=\"until-found\"` plus a `beforematch` listener and `contentFound` emit for find-in-page discoverability, suppresses the initial-mount animation, exposes `open` via defineExpose, and types its slots/emits. robonen lacks all of these. Verdict: robonen-better-with-gaps — it has a cleaner, more extensible API but is not yet strictly better because it is missing the content-size CSS variables (critical), unmountOnHide/until-found + beforematch (major a11y), and mount-animation suppression. Closing the listed gaps while keeping robonen's existing advantages would make it strictly better.
+
+**Critical gaps:**
+- ⛔ (features) No content size CSS variables. reka measures the content element via getBoundingClientRect in a watcher and exposes `--reka-collapsible-content-height` and `--reka-collapsible-content-width` as inline styles, which is the standard mechanism for CSS height/width transitions on collapse/expand. robonen's CollapsibleContent.vue exposes NO such variables and performs no measurement, so consumers cannot do the canonical CSS-driven height animation.
+  - _evidence:_ reka CollapsibleContent.vue lines 40-78,112-115 (width/height refs, getBoundingClientRect watcher, `--reka-collapsible-content-height/width` style binding). robonen CollapsibleContent.vue has nothing equivalent.
+
+**Major gaps:**
+- 🔶 (accessibility) No `unmountOnHide` prop and no `hidden="until-found"`. reka supports keeping content mounted while hidden and emits `hidden="until-found"` so the browser's find-in-page can locate and reveal collapsed text. robonen always unmounts via Presence and always sets plain `hidden`, breaking find-in-page discoverability and any keep-mounted use case. Notably robonen already implements `unmountOnHide` in its navigation-menu primitive, so this is an inconsistency, not a missing capability.
+- 🔶 (accessibility) No `beforematch` handling / `contentFound` emit. reka listens for the browser `beforematch` event (fired when find-in-page is about to reveal a `hidden=until-found` element) and auto-opens the collapsible plus emits `contentFound`. robonen has neither the listener nor the event, so even if it added until-found, search would not sync the open state.
+
+**Minor gaps (5):**
+- ▫️ (edge-cases) No initial-mount animation suppression. reka prevents the open/close animation from firing on first mount (so a defaultOpen collapsible does not animate in) by tracking `isMountAnimationPrevented` and computing `skipAnimation`, which nulls out `data-state` on the very first frame. robonen always renders `data-state` immediately, so a default-open collapsible can play its enter animation on page load.
+- ▫️ (api-surface) Root does not expose `open` via template ref. reka calls `defineExpose({ open })` so a parent holding a ref to CollapsibleRoot can read the live open state. robonen's CollapsibleRoot does not defineExpose `open` (it only forwards the element ref via useForwardExpose), so the open state is not reachable from a component ref.
+- ▫️ (types) Root default slot is untyped. reka declares `defineSlots<{ default?: (props: { open: boolean }) => any }>()`, giving consumers typed slot props in templates. robonen's CollapsibleRoot has no defineSlots, so the `open` slot prop is untyped for consumers.
+- ▫️ (types) No exported emit type for the open event. reka exports `CollapsibleRootEmits` (`update:open`). robonen relies on defineModel('open'), which works at runtime and types the model, but exports no emit type from index.ts, so consumers wrapping the component (e.g. useForwardPropsEmits-style) have no named emit contract to import.
+- ▫️ (api-surface) No explicit asChild API on parts. reka threads `:as-child="props.asChild"` to every Primitive (Root/Trigger/Content), offering the conventional asChild boolean for composition. robonen's Primitive (primitive/Primitive.ts) has no `asChild` prop at all and relies on `as="template"` instead. This is an architectural choice rather than a pure bug, but it is an API-surface and ecosystem-familiarity gap for users migrating from Radix/reka.
+
+**Recommendations to make robonen strictly better:**
+- Add content measurement and expose `--collapsible-content-height` / `--collapsible-content-width` CSS variables on CollapsibleContent, mirroring reka's getBoundingClientRect watcher (reka CollapsibleContent.vue lines 40-78,112-115). This is the highest-impact gap: without it consumers cannot do CSS height/width animations, the primary reason a Collapsible exists.
+- Add an `unmountOnHide?: boolean` prop to CollapsibleRoot (reuse the exact pattern already in robonen NavigationMenuRoot) and thread it through context. When `unmountOnHide` is false, keep the content mounted and render `hidden="until-found"` instead of `hidden=true` so browser find-in-page can reveal collapsed content.
+- Add a `beforematch` listener on the content element that auto-opens the collapsible (call onOpen/onToggle) and add a `contentFound` emit to CollapsibleContent so find-in-page reveals stay in sync with open state.
+- Add initial-mount animation suppression: track an `isMountAnimationPrevented` flag reset on requestAnimationFrame after mount and null out `data-state` for the first frame (reka skipAnimation) so a defaultOpen collapsible does not animate on load.
+- Call `defineExpose({ open })` in CollapsibleRoot so parents can read open via a template ref, matching reka.
+- Add `defineSlots<{ default?: (props: { open: boolean }) => any }>()` to CollapsibleRoot (and a typed slot for Trigger/Content) for typed slot props.
+- Export a `CollapsibleRootEmits` (`update:open`) type from index.ts for consumers who wrap and forward emits, even though defineModel is used internally.
+- Consider adding an explicit `asChild` boolean to Primitive (or document the `as="template"` equivalence prominently) to match the conventional Radix/reka composition API and ease migration.
+- Keep robonen's wins: retain the onOpen/onClose context methods, the open-aware Trigger slot, the public provide/use context exports, and the button-only :disabled guard — these are genuine improvements over reka and should not be regressed.
+
+**Where robonen is already better:**
+- ✅ Trigger slot is data-rich: robonen passes `<slot :open="ctx.open.value" />` (CollapsibleTrigger.vue line 30), so consumers can render trigger UI based on open state. reka's CollapsibleTrigger.vue line 32 renders a bare `<slot />` with no slot props.
+- ✅ More granular context control surface: robonen's CollapsibleContext (context.ts) exposes `onToggle`, `onOpen`, and `onClose`. reka's CollapsibleRootContext (CollapsibleRoot.vue) exposes only `onOpenToggle`. robonen lets advanced consumers force-open or force-close, not just toggle.
+- ✅ Public, extensible context API: robonen's index.ts exports `provideCollapsibleContext`, `useCollapsibleContext`, and the `CollapsibleContext` type. reka's index.ts exports only `injectCollapsibleRootContext` (no provide function and no exported context type), so reka consumers cannot re-provide or strongly type the context for custom parts.
+- ✅ Safer disabled attribute on non-button triggers: robonen's CollapsibleTrigger.vue line 27 sets `:disabled="as === 'button' ? ctx.disabled.value : undefined"`, avoiding an invalid `disabled` attribute when `as` is a non-button element. reka's CollapsibleTrigger.vue line 29 sets `:disabled="rootContext.disabled?.value"` unconditionally, which would emit a `disabled` attribute on a div/anchor when disabled.
+- ✅ Lighter reactivity for disabled: robonen uses `toRef(() => disabled)` (CollapsibleRoot.vue line 34, identity passthrough without computed caching). reka uses `toRefs(props)` which is comparable, but robonen's intent/comment is explicit and avoids any over-subscription.
+
+
+### primitive  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** usePrimitiveElement composable (element ref normalization), asChild prop, SELF_CLOSING_TAGS handling, exported AsTag type
+**Parts robonen has that reka lacks:** renderSlotChild shared helper (dedup between Slot and template path), getRawChildren with keyed-fragment BAIL handling, Primitive.bench.ts benchmark suite, DEV warning on multiple children
+
+robonen's Primitive is leaner and faster on the common path (raw functional component, shared renderSlotChild, no extra instance for as=\"template\"), adds a DEV multi-child warning, smarter keyed-fragment BAIL flattening, and a dedicated benchmark suite — genuine wins over reka. However it is NOT strictly better: it has a critical regression because it omits the `asChild` prop entirely while its own consuming components (Menubar/HoverCard/DropdownMenu) pass :as-child, which currently leaks as a literal DOM attribute and does nothing. It also lacks reka's self-closing/void-tag hydration handling (img/input/area), uses attrs-win merge order instead of reka's child-props-win mergeProps (failing reka's 'child overrides parent' contract), renders only the first slot child vs reka's multi-child passthrough, does not strip the child's incoming ref before cloning, ships no colocated element-ref composable (usePrimitiveElement), and exports a broader/less-curated `as` type with no AsTag alias. Verdict: robonen-better-with-gaps — fix asChild (critical), void-tag handling, and merge precedence to reach strictly-better.
+
+**Critical gaps:**
+- ⛔ (api-surface) robonen's Primitive does NOT declare an `asChild` prop at all (Primitive.props only contains `as`). Yet robonen's own consuming components pass `:as-child="asChild"` to <Primitive> (MenubarTrigger.vue:129, MenubarRoot.vue:93, HoverCardTrigger.vue:38, HoverCardContentImpl.vue:141, DropdownMenuTrigger.vue, etc.). Because `asChild` is undeclared and inheritAttrs=false, it falls into ctx.attrs and is rendered via h(as!, ctx.attrs, ...) as a literal `as-child` DOM attribute when `as` is a string tag, instead of switching to Slot/template merge mode. So asChild is silently broken across robonen's library and leaks an invalid attribute to the DOM.
+  - _evidence:_ reka Primitive.ts declares `asChild: { type: Boolean, default: false }` and computes `const asTag = props.asChild ? 'template' : props.as`. robonen Primitive.ts has no asChild prop; Primitive.props = { as: {...} } only; render is `as === 'template' ? renderSlotChild(...) : h(as!, ctx.attrs, ctx.slots)`.
+
+**Major gaps:**
+- 🔶 (ssr) No self-closing/void-tag handling. robonen always passes ctx.slots as the 3rd arg to h() for any non-template tag, including void elements like img/input/area. Passing children/default slot to void tags causes SSR hydration mismatches and invalid DOM.
+- 🔶 (edge-cases) Slot attr/prop merge priority differs. reka's Slot deletes the child's incoming ref and uses mergeProps(attrs, childProps) so the CHILD's props (e.g. id, data-type) override the parent attrs, then cloneVNode(child, mergedProps). robonen's renderSlotChild does cloneVNode(only, attrs, true): Vue's cloneVNode gives the passed `attrs` priority for plain props (id, data-*), so a parent id/data-attr would override the child's same-named prop rather than the child winning. reka's test 'should replace parent attributes with child's attributes' asserts the child wins (id=child, data-type=primary).
+
+**Minor gaps (5):**
+- ▫️ (api-surface) No element-ref forwarding composable colocated with the Primitive. reka exports usePrimitiveElement from the Primitive module, giving a normalized currentElement that resolves the real HTMLElement even when the root vnode is a #text/#comment node (uses nextElementSibling). robonen's Primitive folder exports only Primitive and Slot; consumers rely on useForwardExpose from a separate @robonen/vue package, so the Primitive package itself does not provide a ref-normalization primitive and there is no exported usePrimitiveElement equivalent here.
+- ▫️ (edge-cases) Slot only ever renders ONE child. reka's Slot returns the full children array (cloning attrs onto the first non-comment child but keeping the rest), so <Primitive as="template"> with multiple siblings renders them all. robonen's renderSlotChild returns just children[0], discarding any subsequent siblings.
+- ▫️ (edge-cases) Child incoming `ref` is not stripped before merge. reka explicitly `delete firstNonCommentChildren.props?.ref` so a ref already on the slotted child does not get double-applied/conflict when attrs (which may carry a forwarded ref) are merged. robonen's renderSlotChild does not delete the child's ref before cloneVNode, which can cause ref conflicts in asChild/template ref-forwarding scenarios.
+- ▫️ (types) Less curated `as` type and no exported AsTag. reka exports an `AsTag` union (a|button|div|form|h2|h3|img|input|label|li|nav|ol|p|span|svg|ul|template|({}&string)) giving good autocomplete plus open-ended strings. robonen types `as` as `keyof IntrinsicElementAttributes | Component`, which is broader/noisier for autocomplete, has no exported reusable tag alias, and notably the tests note h() struggles with the broad union (@ts-expect-error in Primitive.test.ts line 334).
+- ▫️ (edge-cases) No onUpdated-driven ref re-sync for conditional rendering. reka's element resolution (useForwardExpose/usePrimitiveElement consumers) handles the case where $el changes across v-if/v-else while the component instance ref stays the same, by triggering a ref update on update. The Primitive package in robonen ships no such ref-normalization at all (delegated entirely to external @robonen/vue), so the Primitive module alone cannot guarantee a stable resolved element across conditional root swaps.
+
+**Recommendations to make robonen strictly better:**
+- Add an `asChild?: boolean` prop to robonen's Primitive (declare it in Primitive.props as { type: Boolean, default: false } and in PrimitiveProps), and compute the effective tag as `const tag = props.asChild ? 'template' : props.as`. This is urgent: MenubarTrigger/MenubarRoot/HoverCardTrigger/HoverCardContentImpl/DropdownMenuTrigger all pass :as-child today and it currently leaks as a literal DOM attribute / does nothing.
+- Add self-closing/void tag handling: define SELF_CLOSING_TAGS = ['area','img','input','br','hr','wbr','source','track','col','embed', ...] and when `as` is one of them render `h(as, ctx.attrs)` WITHOUT passing ctx.slots, to avoid SSR hydration mismatches (parity with reka, ideally a more complete void-element list).
+- In renderSlotChild, switch from `cloneVNode(child, attrs, true)` to merging with child precedence: strip the child's incoming ref (`delete child.props?.ref`) and use `mergeProps(attrs, child.props)` so child props (id, data-*, etc.) override parent attrs — matching reka's documented behavior and its 'replace parent attributes with child's attributes' test.
+- Decide on multi-child semantics: either keep single-child + DEV warning (current) OR match reka by returning all children with attrs applied to the first non-comment child. If staying single-child, document it as an intentional stricter contract; if matching reka, return the full children array.
+- Export an AsTag union type (curated common tags plus `({} & string)`) from primitive/index.ts and use it for PrimitiveProps['as'] to improve autocomplete and remove the @ts-expect-error in the tests around h() + broad union.
+- Provide a colocated element-ref composable in the primitive package (e.g. usePrimitiveElement) that normalizes $el for #text/#comment roots via nextElementSibling and re-syncs on onUpdated/triggerRef for v-if/v-else root swaps, so the Primitive package is self-contained rather than depending solely on @robonen/vue's useForwardExpose.
+- Add tests covering: asChild=true switching to Slot mode, void-tag rendering without slots (no hydration warning), child-prop-overrides-parent-attr precedence, child ref not double-applied, and multi-child behavior — to lock in the above fixes and prevent regressions like the current silent asChild leak.
+
+**Where robonen is already better:**
+- ✅ Lower runtime overhead on the common path: robonen's Primitive is a raw functional component (export function Primitive(...) with Primitive.props/inheritAttrs), so the non-template path is a single h(as, ctx.attrs, ctx.slots) call with NO extra component instance. reka uses defineComponent + a setup() that returns a render fn, and for template/asChild mode wraps in a second component h(Slot, attrs, ...), adding an extra instance. robonen's Slot.ts even shares renderSlotChild between <Slot> and <Primitive as="template"> specifically to avoid an extra functional component instance on the template path (see comment in Slot.ts).
+- ✅ Dedicated benchmark suite: robonen ships Primitive.bench.ts measuring Primitive vs raw h(), Slot scaling by attr count, edge cases, and mount+update via render(). reka has no perf benchmarks for Primitive.
+- ✅ DEV-mode diagnostics: robonen's renderSlotChild warns via Vue's warn() when multiple valid children are passed to Slot/template mode ('<Slot> can only be used on a single element or component.'), guarded by __DEV__. reka's Slot silently renders multiple children with no warning.
+- ✅ More correct fragment flattening for keyed lists: robonen's getRawChildren detects multiple KEYED_FRAGMENTs and sets PatchFlags.BAIL on the resulting vnodes to force full diff (avoids stale keyed-list patching). reka's renderSlotFragments just flatMaps fragments recursively with no keyed-fragment BAIL handling.
+- ✅ Explicit Fragment AND Comment filtering in the single-child fast path: robonen checks t !== Fragment && t !== Comment before the one-child cloneVNode shortcut, so a lone Fragment/Comment correctly falls through to flattening. reka's single-child handling relies only on findIndex(child.type !== Comment).
+
+
+### hover-card  —  _robonen-better-with-gaps_
+
+
+Parts are 1:1 (Root, Trigger, Portal, Content, ContentImpl, Arrow) and core behavior (open/close delays, grace-area transit, selection containment, scroll-dismiss, DismissableLayer wiring, Popper positioning, controlled/uncontrolled open) matches reka closely. robonen is genuinely better in several spots: it clears Root timers on scope dispose (reka leaks a pending timer past unmount), short-circuits zero delays, actually forwards the interactOutside emit (reka declares it but never wires it), and has a cleaner first-class forceMount on Presence. The decisive gap is accessibility: reka strips its hover-card content out of the tab sequence by setting tabindex=-1 on tabbable descendants on mount, while robonen ships getTabbableNodes as dead code and never neutralizes tab order — a critical regression for keyboard users. Secondary gaps are API-surface: robonen's HoverCardContent Pick drops prioritizePosition, disableUpdateOnLayoutShift, reference, and hideShiftedArrow (all supported by its own PopperContent), does not forward a ref from HoverCardContent, and exports no HoverCardRootEmits type. Fixing the tabindex behavior and widening the content prop forwarding would make robonen strictly better than reka.
+
+**Critical gaps:**
+- ⛔ (accessibility) Hover-card content is NOT removed from the tab sequence. Reka, in HoverCardContentImpl onMounted (lines 65-71), calls getTabbableNodes(contentElement) and sets tabindex="-1" on every tabbable descendant, because a hover-triggered card must not become a keyboard tab stop (its focusable children would otherwise be reachable while the card is invisible/positioned off the reading flow). robonen DEFINES getTabbableNodes in utils.ts (lines 9-20) but NEVER calls it anywhere — it is dead code, and HoverCardContentImpl performs no tabindex neutralization. Result: focusable elements inside robonen's hover card stay in the tab order.
+  - _evidence:_ reka HoverCardContentImpl.vue:65-71 (getTabbableNodes + setAttribute('tabindex','-1')); robonen utils.ts:9-20 getTabbableNodes is exported/unused, HoverCardContentImpl.vue has no equivalent onMounted tabindex handling
+
+**Major gaps:**
+- 🔶 (api-surface) Content omits the prioritizePosition positioning option. Reka's HoverCardContentImplProps extends the full PopperContentProps, so prioritizePosition (force content within viewport, overriding side/align) is passable. robonen's HoverCardContentImplProps Pick<PopperContentProps, ...> (HoverCardContentImpl.vue:5-21) does not include prioritizePosition, even though robonen's own PopperContent supports it (PopperContent.vue:40,87,169-185).
+- 🔶 (api-surface) Content omits disableUpdateOnLayoutShift. Same root cause: reka forwards the whole PopperContentProps; robonen's Pick list does not include disableUpdateOnLayoutShift, although robonen PopperContent implements it (PopperContent.vue:38,86,208).
+
+**Minor gaps (4):**
+- ▫️ (api-surface) Content omits the custom reference (virtual/anchor) element prop. Reka's ContentImpl extends PopperContentProps which includes reference (PopperContent.vue:175), so a custom anchor can be set directly on the content. robonen's Content Pick does not include reference (only the Trigger exposes reference via PopperAnchor), so you cannot point the content at a custom reference element the way reka allows.
+- ▫️ (api-surface) Content does not forward a ref / expose its element, and does not use a forward-props-emits helper. Reka's HoverCardContent uses useForwardExpose + :ref="forwardRef" on HoverCardContentImpl (HoverCardContent.vue:25,35) and useForwardPropsEmits (line 24), so consumers can templateRef the content. robonen's HoverCardContent (HoverCardContent.vue) neither forwards a ref to ContentImpl nor exposes currentElement, so the content element is not reachable from a parent ref on <HoverCardContent>.
+- ▫️ (types) No exported Root emits type. Reka exports HoverCardRootEmits ({ 'update:open': [boolean] }) from HoverCardRoot.vue and re-exports it from index.ts, giving consumers a named emit contract. robonen relies on defineModel('open') and exports no emits type, so there is no HoverCardRootEmits in its public index.ts.
+- ▫️ (features) Content omits hideShiftedArrow. robonen's own PopperContent supports hideShiftedArrow (PopperContent.vue:'Hide arrow when it cant be centered'), but the HoverCardContentImpl Pick list does not forward it, so users cannot control that arrow behavior through the hover card. (reka uses a different arrow model, so this is a self-consistency gap rather than strict parity.)
+
+**Recommendations to make robonen strictly better:**
+- Wire up getTabbableNodes: in HoverCardContentImpl onMounted, walk getTabbableNodes(currentElement.value) and set tabindex="-1" on each, matching reka HoverCardContentImpl.vue:65-71. This removes hover-card content from the tab order (critical a11y) and eliminates the dead export in utils.ts.
+- Replace the Pick<PopperContentProps, ...> in HoverCardContentImpl with `extends PopperContentProps` (or extend the Pick to also include 'prioritizePosition', 'disableUpdateOnLayoutShift', 'reference', and 'hideShiftedArrow'), and forward all of them (or v-bind the forwarded props + $attrs) to <PopperContent>. This restores full positioning surface parity with reka.
+- Add ref forwarding to HoverCardContent: use useForwardExpose() and bind :ref="forwardRef" on HoverCardContentImpl, and forward props/emits via a useForwardPropsEmits-style helper so a parent ref on <HoverCardContent> resolves to the content element.
+- Export a named HoverCardRootEmits type ({ 'update:open': [value: boolean] }) from HoverCardRoot.vue and index.ts so consumers have an explicit emit contract like reka.
+- Simplify HoverCardTrigger.onPointerLeave: both branches call ctx.onClose() when !isPointerInTransit, so collapse to a single `if (!ctx.isPointerInTransit.value) ctx.onClose()`; then decide deliberately whether to keep reka's extra `&& !open` guard (reka only cancels a pending open on trigger-leave and lets the content grace area handle close-while-open). Current robonen code is redundant and diverges from reka without a documented reason.
+- Keep robonen's wins (timer cleanup, <=0 fast path, interactOutside forwarding, first-class forceMount) — they already exceed reka; just close the gaps above to reach strictly-better.
+
+**Where robonen is already better:**
+- ✅ Root clears its open/close timers on teardown via onScopeDispose (HoverCardRoot.vue:84-87), preventing a late setOpen() firing after unmount. Reka's HoverCardRoot never clears openTimerRef/closeTimerRef on unmount (no onUnmounted/onScopeDispose), so a pending timer can call open.value=... after teardown.
+- ✅ Root short-circuits the delay when openDelay<=0 / closeDelay<=0 by calling setOpen synchronously (HoverCardRoot.vue:55-58,68-71), avoiding a needless setTimeout(0) round-trip. Reka always schedules a window.setTimeout regardless of delay (HoverCardRoot.vue:73,79).
+- ✅ robonen actually forwards the interactOutside event to consumers (HoverCardContentImpl.vue:135 emits('interactOutside') and HoverCardContent.vue:29 re-emits it). Reka declares interactOutside in HoverCardContentImplEmits (=DismissableLayerEmits) but its HoverCardContentImpl template (lines 88-95) only wires escapeKeyDown/pointerDownOutside/focusOutside/dismiss and never forwards interactOutside — a type-vs-runtime mismatch robonen avoids.
+- ✅ Presence integration is cleaner: robonen passes a first-class :force-mount prop to <Presence> (HoverCardContent.vue:23), whereas reka folds it into :present="forceMount || open" (HoverCardContent.vue:31-33).
+- ✅ robonen adds a data-hover-card-trigger hook attribute on the trigger (HoverCardTrigger.vue:40) for easier querying/testing; reka only emits data-grace-area-trigger.
+- ✅ useGraceArea is self-contained with an explicit POINTER_TRANSIT_TIMEOUT reset timer and onScopeDispose cleanup (useGraceArea.ts), and syncs state with a plain watchEffect (HoverCardContentImpl.vue:66-68) instead of pulling in @vueuse/shared syncRef like reka (HoverCardContentImpl.vue:28).
+- ✅ Every prop carries JSDoc (HoverCardRootProps, PopperContentProps picks), improving editor hints over reka's sparser comments.
+
+
+### tags-input  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput rendered inside Root for native form submission (imported from @/VisuallyHidden, supports primitive/array/object values + empty-required edge case)
+
+Both libraries ship the same six parts (Root, Input, Item, ItemText, ItemDelete, Clear) with near-identical keyboard handling (Backspace/Delete to select-then-remove last tag, RTL-aware ArrowLeft/Right, Home/End jump within an active selection, ArrowUp/Down prevented while a tag is selected), composition (Enter/Tab/blur/paste/delimiter), v-model + uncontrolled defaultValue, duplicate/max/disabled handling, dir inheritance from ConfigProvider, convertValue/displayValue, and the same data-state/aria-labelledby/aria-current wiring on items. robonen is genuinely better on reactivity (shallowRef + manual equality watch vs reka's deep useVModel), display-aware duplicate detection, trimmed/empty-skipping paste, correct removeTag value emission (reka has a latent disabled-index desync bug), and tighter generics. However robonen has real, fixable gaps versus reka: it has NO native form integration (no name/required/id, no useFormControl, no VisuallyHiddenInput bubbling) — the single critical miss; object/complex tag values are unsafe (no convertValue guard, identity-based delete instead of deep isEqual); addOnBlur lacks the aria-controls relatedTarget guard needed for Combobox composition; and it lacks the data-focused state and the Root id-to-input wiring. Net: robonen is the stronger core implementation but is NOT yet strictly better because of the missing form layer and weaker object-value support.
+
+**Critical gaps:**
+- ⛔ (forms) No native form integration whatsoever. reka Root extends FormFieldProps (name, required), accepts an `id` prop, calls useFormControl(currentElement), and renders <VisuallyHiddenInput :name :value :required :disabled> when inside a form (TagsInputRoot.vue lines 10, 92, 103, 252-258). This bubbles the tag array (and even object/array-of-object values, plus an empty-required hidden input) into native form submission and constraint validation. robonen Root has no name/required/id props, no useFormControl, and renders no hidden input — tags cannot be submitted with a plain HTML form.
+  - _evidence:_ reka TagsInputRoot.vue FormFieldProps + VisuallyHiddenInput block (lines 252-258) and VisuallyHidden/VisuallyHiddenInput.vue parsedValue logic; robonen TagsInputRoot.vue has no name/required/id and no VisuallyHidden import.
+
+**Major gaps:**
+- 🔶 (edge-cases) Object/complex tag values are not safely supported. reka throws an explicit Error ('You must provide a `convertValue` function when using objects as values.') when objects are used without convertValue (TagsInputRoot.vue lines 124-130), and TagsInputItemDelete compares with deep `isEqual` from ohash (TagsInputItemDelete.vue lines 3, 28). robonen has no such guard (convert just casts `raw as unknown as T`, line 100) and TagsInputItemDelete finds the index with strict identity `v === item.value.value` (TagsInputItemDelete.vue line 20), so deleting an object tag by clicking its delete button fails whenever the stored object is not the same reference, and duplicate-checking objects is broken.
+- 🔶 (features) addOnBlur does not skip blurs into associated popup content. reka's handleBlur reads the input's `aria-controls` id and, if the blur's relatedTarget is inside that controlled element, returns early so it does NOT commit the typed value (TagsInputInput.vue lines 36-41) — essential when TagsInput is composed with a Combobox/listbox so clicking an option adds the option, not the raw text. robonen's onBlur (TagsInputInput.vue lines 65-71) has no relatedTarget/aria-controls check and will wrongly commit the current input text when focus moves into popup content.
+
+**Minor gaps (3):**
+- ▫️ (features) No `data-focused` state on the Root. reka uses useFocusWithin(currentElement) and sets `:data-focused="focused ? '' : undefined"` on the Root primitive (TagsInputRoot.vue lines 102, 248), letting consumers style the whole control while focus is anywhere inside. robonen exposes only data-disabled and data-invalid on Root (TagsInputRoot.vue lines 243-244) — no focus-within styling hook.
+- ▫️ (api-surface) No `id` prop on Root forwarded to the input. reka accepts Root `id` and passes it to the input element via context (`:id="context.id?.value"`, TagsInputInput.vue line 147; Root id prop line 31). This is the wiring point for label `for=` / aria-controls in composed widgets. robonen has no id prop on Root and never sets an id on the input, so associating an external <label for> or aria-controls requires manual attribute passthrough.
+- ▫️ (types) modelValue type is narrower for the controlled/null case. reka types modelValue as `Array<T> | null` and normalizes non-arrays to [] via currentModelValue (TagsInputRoot.vue lines 11, 110). robonen types modelValue as `U[]` only (TagsInputRoot.vue line 7); passing null/undefined as a controlled value is not part of the contract and there is no Array.isArray normalization guard, so a non-array slip-through would throw.
+
+**Recommendations to make robonen strictly better:**
+- Add native form integration to TagsInputRoot: extend props with FormFieldProps-style `name?: string`, `required?: boolean`, and `id?: string`; detect form ancestry (a useFormControl equivalent) and render a hidden form-bubbling input (build/expose a VisuallyHiddenInput in src/visually-hidden that serializes arrays and object values like reka's VisuallyHiddenInputBubble, including the empty-required case). Forward `id` from Root through context to the <input> (`:id`).
+- Guard object/complex values: throw a descriptive error in onAddValue when the model contains objects but no convertValue is supplied, and switch TagsInputItemDelete's index lookup (and the root duplicate check) to a deep-equality helper (ohash isEqual or an internal structural compare) instead of strict `===`, so object tags can be deleted and de-duplicated correctly.
+- Harden addOnBlur: in TagsInputInput.onBlur, read the input's aria-controls id and bail out when event.relatedTarget is inside that controlled element (use CSS.escape), matching reka, so composing TagsInput with a Combobox/listbox does not commit the raw text when an option is clicked.
+- Add focus-within state: wire a useFocusWithin (VueUse) on the Root element and emit `:data-focused=""` when focus is inside, giving consumers a styling hook parity with reka.
+- Widen the controlled contract: type modelValue as `U[] | null` and add an Array.isArray normalization in the watch/init so null/undefined controlled values resolve to [] instead of risking a throw.
+- Optional polish: skip emitting `update:modelValue` from Clear/onRemoveValue when the array is already empty (already partly done in Clear) and consider exposing the focused/selected state and an imported VisuallyHiddenInput from the package index for downstream composition.
+
+**Where robonen is already better:**
+- ✅ Reactivity/perf: Root uses shallowRef + a manual length+identity equality watch on modelValue (TagsInputRoot.vue lines 72-88) instead of reka's useVModel with deep:true. reka's deep:true watcher on the tags array is more expensive on large lists; robonen avoids deep proxying entirely.
+- ✅ Duplicate detection is display-aware: onAddValue dedups via `v === payload || display(v) === display(payload)` (TagsInputRoot.vue line 114), so two distinct objects that render to the same display string are caught. reka only uses `array.includes(payload)` (reference/primitive equality) and misses display-equal duplicates.
+- ✅ Paste handling is cleaner: onPaste trims each part and skips empty strings (`if (trimmed) ctx.onAddValue(trimmed)`, TagsInputInput.vue lines 96-99). reka's handlePaste calls onAddValue on every split segment including empty strings and untrimmed whitespace, which can create blank/whitespace tags.
+- ✅ Tag removal emits the correct value directly: onRemoveValue reads `cur[index]` from the actual model array (TagsInputRoot.vue line 130). reka's handleRemoveTag emits `collection[index].value` where collection is the disabled-FILTERED list indexed by a modelValue index (TagsInputRoot.vue lines 112-118) — a latent desync bug when disabled tags exist.
+- ✅ Strict, generic-preserving types end-to-end: TagValue generic <T extends TagValue> flows through Root, Item, emits and context, and onAddValue returns boolean with typed payloads. Slightly tighter than reka where AcceptableInputValue includes bigint but context is cast to AcceptableInputValue in places.
+- ✅ Clear button guards against empty model (`if (ctx.modelValue.value.length === 0) return`, TagsInputClear.vue line 19) and respects disabled before clearing, avoiding a redundant empty update emit that reka would still trigger by assigning `modelValue.value = []`.
+
+
+### roving-focus  —  _robonen-better-with-gaps_
+
+
+robonen's roving-focus is a close, high-quality port of reka-ui's RovingFocus with the same two parts (RovingFocusGroup, RovingFocusItem), identical keyboard model (Arrow/Home/End/PageUp/PageDown with orientation gating and RTL Left/Right swap via getDirectionAwareKey), identical roving-tabindex, isTabbingBackOut/isClickFocus Safari handling, entry-focus CustomEvent, loop/wrapArray, allowShiftKey, focusable/disabled handling, and collection-based DOM-ordered item discovery. robonen is genuinely better in a few places: it exports its utils/types/context publicly, its wrapArray guards the empty-array (NaN/undefined) edge case reka misses, and its docs/types are stronger. However there are three real gaps versus reka. (1) CRITICAL: robonen has no v-model / controlled support for currentTabStopId — it is a one-shot ref with no update:currentTabStopId emit and no re-sync from the prop, whereas reka uses useVModel with passive controlled/uncontrolled. (2) MAJOR: robonen's entry-focus candidate list omits the data-highlighted item that reka prioritizes, even though robonen's own listbox/combobox/menu items emit data-highlighted. (3) MINOR: robonen ships no tests for the primitive while reka does. Note: the missing :as-child binding in robonen templates is NOT a gap — robonen's Primitive intentionally uses an as=\"template\" model instead of reka's asChild. Verdict: robonen-better-with-gaps; fixing the three items above makes it strictly better.
+
+**Critical gaps:**
+- ⛔ (api-surface) No two-way binding / controlled support for currentTabStopId. robonen initializes `currentTabStopId = ref(currentTabStopIdProp ?? defaultCurrentTabStopId)` exactly once (RovingFocusGroup.vue:74-76) and `onItemFocus` mutates this local ref directly without ever emitting. Its RovingFocusGroupEmits only declares `entryFocus` (RovingFocusGroup.vue:29-31). A parent passing `:currentTabStopId` (controlled mode) can neither push new values in after mount nor observe internal changes — the prop is read once and then ignored. reka uses `useVModel(props,'currentTabStopId',emits,{ defaultValue, passive })` (RovingFocusGroup.vue:75-78) and declares `'update:currentTabStopId': [value]` (RovingFocusGroup.vue:39-42), giving real v-model plus proper controlled vs uncontrolled (passive) behavior.
+  - _evidence:_ reka RovingFocusGroup.vue:39-42 (update:currentTabStopId emit) + :75-78 (useVModel passive controlled/uncontrolled); robonen RovingFocusGroup.vue:29-31 emits lack update:currentTabStopId, and :74-76 is a one-shot ref with no watch/emit.
+
+**Major gaps:**
+- 🔶 (edge-cases) Entry-focus does not consider highlighted items. reka's handleFocus builds candidates as `[activeItem, highlightedItem, currentItem, ...items]`, where highlightedItem matches `data-highlighted=''` (RovingFocusGroup.vue:105,109). robonen omits the highlighted lookup entirely: candidates are `[activeItem, currentItem, ...items]` (RovingFocusGroup.vue:101-105). This is a real behavioral regression because robonen's own ListboxItem, ComboboxItem, and MenuItemImpl all render `data-highlighted` (listbox/ListboxItem.vue:75, combobox/ComboboxItem.vue:108, menu/MenuItemImpl.vue:82). When such a group regains focus, robonen will not prioritize focusing the highlighted item the way reka does.
+
+**Minor gaps (1):**
+- ▫️ (code-quality) No unit tests ship with the primitive. reka includes RovingFocus.test.ts covering single-entry tab focus, defaultValue selection, loop=false stop-at-last, loop=true wrap, and disabled-item skipping. robonen's roving-focus directory contains no .test.ts/.spec file at all, so none of these behaviors (especially the controlled/v-model and entry-focus paths above) are regression-guarded.
+
+**Recommendations to make robonen strictly better:**
+- Make currentTabStopId a real v-model: add `'update:currentTabStopId': [value: string | null | undefined]` to RovingFocusGroupEmits, and back the state with a passive controlled/uncontrolled ref (e.g. the repo's useVModel/useControllableState equivalent) initialized from `currentTabStopId ?? defaultCurrentTabStopId` with `passive: currentTabStopId === undefined`. Have onItemFocus assign through it so it emits and respects an externally controlled prop.
+- Restore highlighted-item priority in handleFocus: compute `const highlightedItem = items.find(item => item.getAttribute('data-highlighted') === '')` and build candidates as `[activeItem, highlightedItem, currentItem, ...items].filter(Boolean)` to match reka and to actually use the data-highlighted attribute that robonen's listbox/combobox/menu items already emit.
+- Add a RovingFocus test suite mirroring reka's: single tab-entry then tab-out, defaultCurrentTabStopId -> data-active, loop=false stops at last, loop=true wraps, disabled (data-disabled) items skipped, plus new coverage for currentTabStopId v-model (controlled push + update emit) and entry-focus highlighted prioritization.
+- Optional robustness wins to keep robonen strictly ahead: drop the redundant `.filter(i => i.dataset['disabled'] !== '')` in handleFocus/handleKeydown since getItems() already filters disabled by default (RovingFocusGroup.vue:98-100, RovingFocusItem.vue:75-77 vs collection getItems default filter), and consider exposing currentTabStopId on defineExpose alongside getItems for parity-plus.
+
+**Where robonen is already better:**
+- ✅ Richer public API surface from index.ts: robonen exports the utility helpers (focusFirst, getFocusIntent, getDirectionAwareKey, wrapArray) and types (FocusIntent, Orientation) plus the group context (RovingFocusGroupCtx, RovingFocusGroupContext type). reka-ui's index.ts only exports the two components and their Props/Emits types, keeping utils/context internal. This makes robonen more composable for downstream primitives.
+- ✅ wrapArray is safer: robonen's wrapArray (utils.ts:74-78) guards `len === 0` and returns the array unchanged, and uses a non-null assertion on a defined index. reka's wrapArray (utils.ts:61-63) does `array[(startIndex + index) % array.length]` with no length guard, so on an empty array it computes `% 0` => NaN and would yield `undefined` entries; robonen avoids that NaN/undefined edge case.
+- ✅ Stronger documentation/types: every robonen prop and the entire context interface carry precise JSDoc (RovingFocusGroup.vue:8-46, RovingFocusItem.vue:4-19, utils.ts), and getItems/getFocusIntent/focusFirst have explanatory doc comments. reka has minimal prop docs and almost none on utils.
+- ✅ getFocusIntent uses direct key equality (`key === 'ArrowLeft' || key === 'ArrowRight'`) instead of reka's `['ArrowLeft','ArrowRight'].includes(key)` array allocation per keystroke (utils.ts:47-50 vs reka utils.ts:38-41) — a minor hot-path allocation win.
+- ✅ RovingFocusItem extracts a named handleMousedown function (RovingFocusItem.vue:95-98) rather than reka's inline arrow handler in the template, slightly improving readability/testability.
+
+
+### collection  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** `key` option on useCollection to namespace/isolate multiple coexisting collections (Collection.ts:12, `injectionKey = `${key}CollectionProvider``)
+**Parts robonen has that reka lacks:** Exported public types `CollectionContext<Value>` and `CollectionItemData<Value>` (index.ts), Distinct `useCollectionProvider` / `useCollectionInjector` entry points instead of a single `useCollection({isProvider})`, Exposed `collectionRef` and `itemMap` on the returned context object (reka returns only getItems/reactiveItems/itemMapSize/CollectionSlot/CollectionItem; it keeps collectionRef/itemMap inside the context but does not surface itemMap typed publicly)
+
+Both libraries implement collection identically in spirit: a `CollectionSlot` marks the root, `CollectionItem` registers each child via a `data-*` attribute and a markRaw'd element->data Map, and `getItems()` returns items sorted by live DOM order (querySelectorAll) with an optional disabled filter. robonen is the better implementation on code quality: shallowRef+triggerRef+markRaw avoids deep-proxying the Map and element keys (a real perf win over reka's plain `ref(new Map())`), it exports proper generic types (`CollectionContext<Value>`, `CollectionItemData<Value>`) with no `@ts-expect-error`, splits provider/injector with a missing-provider guard, and is well documented. However robonen has ONE critical functional gap: it lacks reka's `key` option for namespacing multiple coexisting collections. Because robonen provides under a single fixed Symbol, a nested second collection provider shadows the outer one — and this actually breaks robonen's own NavigationMenu, where the RovingFocusGroup collection inside NavigationMenuList shadows the NavigationMenuRoot collection, leaving NavigationMenuRoot.getItems() empty and breaking modelValue->activeTrigger activation. There is also a minor robustness gap: reka falls back to nextElementSibling when the resolved element is a comment/text node, which robonen does not. Verdict: robonen is better-engineered but has a critical scoping gap that must be closed (and the resulting NavigationMenu bug fixed) before it is strictly better.
+
+**Critical gaps:**
+- ⛔ (features) reka supports a `key` option (`useCollection({ key: 'NavigationMenu' })`) to create multiple INDEPENDENT, disjoint collection contexts that can coexist in the same DOM/provide subtree. robonen's collection is provided under a single fixed `Symbol('CollectionContext')` (useContextFactory, useCollection.ts:160) with no per-call key, so two collection providers in the same subtree cannot coexist — the inner one shadows the outer for everything below it. This is not just theoretical: in robonen's own NavigationMenu, `NavigationMenuRoot` calls `useCollectionProvider()` and wraps children in `<CollectionSlot>`, but `NavigationMenuList` renders `<RovingFocusGroup>` which ALSO calls `useCollectionProvider()` under the same key. `NavigationMenuTrigger`'s `<CollectionItem>` sits inside the RovingFocusGroup subtree, so it registers into the RovingFocus collection — leaving `NavigationMenuRoot.getItems()` empty. As a result NavigationMenuRoot.vue:144-149 (`watchEffect` that maps `modelValue` to `activeTrigger` via `getItems().find(... id.includes('-trigger-'+value))`) never matches, breaking auto-activation of the trigger from the model value. reka avoids exactly this by keying the NavigationMenu collection separately (NavigationMenuRoot.vue:137 `key:'NavigationMenu'`, NavigationMenuTrigger.vue:35, NavigationMenuLink.vue:30) so it stays disjoint from the inner RovingFocus collection.
+  - _evidence:_ reka Collection.ts:12-29 `key`/`injectionKey` mechanism + NavigationMenu/Menubar using `key:'NavigationMenu'`/`key:'Menubar'`; robonen useCollection.ts:160 single `useContextFactory('CollectionContext')` with no key param, and the broken nesting in NavigationMenuList.vue:30 (RovingFocusGroup) + NavigationMenuTrigger.vue:117 (<CollectionItem> inside it) + NavigationMenuRoot.vue:146 getItems().
+
+**Minor gaps (1):**
+- ▫️ (edge-cases) Comment/text-node fallback when resolving the registered element. reka resolves the collection element through `usePrimitiveElement().currentElement`, a computed that detects when the ref's `$el` is a `#text` or `#comment` node and falls back to `nextElementSibling` (usePrimitiveElement.ts:7). robonen's CollectionSlot/CollectionItem call `unrefElement(el)` which returns `instance.$el` verbatim (toolkit unrefElement/index.ts:32) and then only registers `if (element instanceof HTMLElement)` (useCollection.ts:88,136). When a slotted child is a component whose root renders as a Fragment/comment placeholder (e.g. conditional/async root), `$el` is a comment node, the instanceof check fails, and the item is silently never registered. reka still registers the correct sibling element. robonen's <Slot> pre-filters a single Comment/Fragment vnode child, which mitigates the common case, so impact is partial.
+
+**Recommendations to make robonen strictly better:**
+- Add a `key`/scope parameter to `useCollectionProvider`/`useCollectionInjector` (or accept an explicit injection key/Symbol) so multiple independent collections can coexist in one subtree. Mirror reka's `{ key }` -> per-key injection symbol. Concretely: change `CollectionCtx` from a single module-level `useContextFactory('CollectionContext')` into a small registry that maps a string key to a memoized `useContextFactory('Collection:'+key)` (or pass a provided InjectionKey through).
+- Fix robonen's NavigationMenu (and audit Menubar/Toolbar/Listbox/Tabs/etc.) to use a dedicated keyed collection (e.g. key 'NavigationMenu') so the NavigationMenuRoot collection is not shadowed by the nested RovingFocusGroup collection. Add a test asserting `NavigationMenuRoot.getItems()` returns the triggers when a RovingFocusGroup is nested, and that modelValue -> activeTrigger auto-activation (NavigationMenuRoot.vue:144-149) actually matches.
+- Harden element resolution to match reka: when `unrefElement` yields a `#comment`/`#text` node, fall back to `nextElementSibling` before the `instanceof HTMLElement` check in both CollectionSlot and CollectionItem (useCollection.ts:87-90, 135-138). Either inline the check or add the fallback to the shared `unrefElement` helper.
+- Add a thrown/dev-warning guard analogous to reka-less behavior so that calling `useCollectionInjector` outside a provider gives a clear collection-specific error (already partly covered by useContextFactory, but ensure the message references collection).
+- Add dedicated tests for the collection primitive (the directory currently has none): cover DOM-order sorting via querySelectorAll across Teleport/v-for reorder, disabled filtering semantics (`dataset.disabled !== ''`), re-registration on `value` change, and coexistence of two keyed collections in one subtree.
+- Document the `dataset.disabled !== ''` filter semantics in getItems (an item is treated as enabled only when it does NOT have an empty-string data-disabled attribute) — this is subtle and shared with reka; a comment/test prevents regressions.
+
+**Where robonen is already better:**
+- ✅ Performance: robonen uses `shallowRef(new Map())` + manual `triggerRef` (useCollection.ts:56,118,123) and `markRaw(el)` on the map key (line 116), avoiding wrapping the Map and its element keys in a deep reactive Proxy. reka uses plain `ref(new Map())` (Collection.ts:18) which makes the whole Map deeply reactive and proxies every HTMLElement key — measurably more expensive for large lists/menus/listboxes.
+- ✅ Public, typed API surface: robonen exports `CollectionContext<Value>` and `CollectionItemData<Value>` as documented interfaces (index.ts) and threads a real `Value` generic through `getItems`, `itemMap`, `reactiveItems`. reka's `CollectionContext<ItemData = {}>` is internal/not exported, and item `value` is typed `any` (Collection.ts:7), with a `@ts-expect-error` swallowing the assignment (line 74). robonen has no such suppressed type error.
+- ✅ Clearer provider/injector split: robonen splits into `useCollectionProvider()` and `useCollectionInjector()` (useCollection.ts:171,183) with an explicit throw when injected outside a provider (via useContextFactory). reka overloads a single `useCollection({ isProvider })` and silently `inject(...) as CollectionContext` with no guard (Collection.ts:28) — a missing provider yields `undefined` and a later runtime crash with no helpful message.
+- ✅ Documentation quality: robonen has thorough JSDoc on the context, each field, and both composables explaining the querySelectorAll-based DOM ordering, the shallowRef/triggerRef rationale, and markRaw intent; reka's file is essentially uncommented.
+- ✅ Item registration watcher is explicit about value changes: robonen uses `watch([currentElement, () => props.value], ..., { immediate: true })` with a typed `onCleanup` (useCollection.ts:110-126), which is easier to reason about than reka's `watchEffect((cleanupFn) => {...})` (Collection.ts:71).
+
+
+### dismissable-layer  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** DismissableLayerBranch.vue (branch registration for non-dismissing related subtrees), usePointerDownOutside composable (exported, with touch handling), useFocusOutside composable (exported, with capture-flag inside-tracking), isLayerExist util (document-order layer-aware outside detection), handleAndDispatchCustomEvent-based cancelable CustomEvent dispatch, Exported PointerDownOutsideEvent / FocusOutsideEvent CustomEvent types
+**Parts robonen has that reka lacks:** dismissableLayerStack module (exported push/remove/isTopmost/anyDisabling/hasDisablingLayerAbove helper), data-dismissable-blocking attribute on body as a CSS hook
+
+robonen's DismissableLayer is leaner and its module-level escape/dismiss stack is a genuinely cleaner, cheaper topmost-layer mechanism than reka's per-layer index-from-Set computation, and it adds a useful `data-dismissable-blocking` body hook. However it is NOT yet strictly better: it lacks reka's DismissableLayerBranch (no way to exclude portaled/related subtrees), has no iframe/ownerDocument support, no touch-device pointer deferral (radix #2171), no defer-on-mount guard against open-then-instant-self-dismiss, and weaker focus-outside debouncing (synchronous focusin with no inside-focus capture flags, risking spurious dismiss on internal focus moves). Most importantly its nested pointer-events handling is incomplete: it only sets `pointer-events: auto` on self-disabling layers, so a non-disabling layer stacked above a disabling one becomes non-interactive — the stack even defines hasDisablingLayerAbove but never uses it. It also drops reka's layer-order-aware outside detection (isLayerExist) and reka's cancelable CustomEvent contract (detail.originalEvent + exported event types). Closing the listed gaps — Branch support, ownerDocument, touch handling, listener defer, focus-outside debounce, per-layer pointer-events via the existing stack helper, layer-order-aware detection, and CustomEvent wrapping — would make robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (features) reka exposes a `DismissableLayerBranch` component (DismissableLayerBranch.vue) backed by `context.branches: Set<HTMLElement>`. Pointer-down and focus events whose target is inside a registered branch are NOT treated as outside interactions (DismissableLayer.vue lines 106-110 and 120-124). This lets a related-but-DOM-separate subtree (e.g. a portaled trigger, anchor, or sibling control) avoid dismissing the layer. robonen has NO Branch component and no branches concept; its useClickOutside has an `ignore` option but DismissableLayer never forwards it, so there is no way for a consumer to register a non-dismissing related subtree.
+- 🔶 (edge-cases) reka supports iframe / multi-document via `ownerDocument = layerElement.value?.ownerDocument ?? globalThis.document` (DismissableLayer.vue line 81-83; utils.ts line 52-53, 155-156) and attaches listeners and reads/writes body.style on that owner document. robonen hardcodes the global `document` (focusin listener and body-blocking effect) and the global `window` (useClickOutside/useEscapeKey via defaultWindow), so a layer rendered into an iframe document will not receive outside-pointer/focus/escape events nor block the correct body.
+- 🔶 (edge-cases) reka has dedicated touch-device handling for pointerDownOutside: on `event.pointerType === 'touch'` it defers dispatch to a one-shot `click` listener to account for the ~350ms touch delay and to auto-cancel on scroll/drag/long-press, continuously removing the prior click listener (utils.ts lines 95-110). robonen reacts immediately on `pointerdown` for all pointer types with no touch deferral, so a touch scroll/drag that starts outside can incorrectly dismiss and pointer-events may be re-enabled before the browser fires the deferred click (the exact radix-ui/primitives#2171 case reka cites).
+- 🔶 (features) Per-layer pointer-events granularity for nested layers. reka computes `isPointerEventsEnabled` by comparing this layer's index against the index of the highest layer with outside-pointer-events disabled, and renders `pointer-events: 'none'` for layers below the disabling layer while keeping the body blocked (DismissableLayer.vue lines 97-103, 180-186). robonen only sets `pointer-events: 'auto'` on a layer if THAT layer itself has `disableOutsidePointerEvents` (template line 128). Consequence: a non-disabling layer stacked ABOVE a disabling layer never gets `pointer-events: auto`, so while the body is `none` that upper layer becomes non-interactive — a real nested-modal bug robonen's stack has `hasDisablingLayerAbove` for but never uses in the template.
+- 🔶 (edge-cases) Focus-outside debounce against transient focus churn. reka's useFocusOutside awaits `nextTick()` twice before resolving the target (utils.ts lines 166-167) and uses focus/blur capture flags (onFocusCapture/onBlurCapture) to know whether focus is currently inside, avoiding false `focusOutside` during internal focus reshuffles (e.g. focus moving between two children, or a momentary body focus). robonen's focusin handler (lines 84-96) fires synchronously on any focusin whose target is outside the layer with no inside-focus flag and no tick delay, so transient/relayed focus events can spuriously emit focusOutside and dismiss.
+- 🔶 (edge-cases) Layer-aware outside detection across portals/nested layers. reka's `isLayerExist` (utils.ts lines 16-40) treats a pointer/focus on a layer that is later in document order (a layer rendered above this one) as NOT outside, using `[data-dismissable-layer]` ordering in the document. robonen's useClickOutside only checks `el.contains(target)` plus the optional ignore list, so interacting with a sibling/nested dismissable layer that is not a DOM descendant is considered outside and can dismiss the lower layer even though it should be excluded.
+- 🔶 (edge-cases) reka defers the pointerdown document listener registration by one `setTimeout(..., 0)` to avoid the layer's own mounting pointerdown immediately bubbling to the document and self-dismissing (utils.ts lines 113-128). robonen registers the capture-phase window pointerdown listener immediately on mount with no defer, so a layer opened by the very pointerdown that mounts it can receive that same pointerdown as 'outside' and dismiss instantly (a classic open-then-instant-close bug).
+
+**Minor gaps (4):**
+- ▫️ (api-surface) reka wraps outside interactions as cancelable DOM CustomEvents dispatched on the actual target via handleAndDispatchCustomEvent (utils.ts + shared/handleAndDispatchCustomEvent.ts): `pointerDownOutside`/`focusOutside` carry `detail.originalEvent` and `preventDefault()` is real DOM prevention observable by other listeners and by the dispatching element. robonen emits raw PointerEvent/FocusEvent and fakes cancellation only for `interactOutside` via a temporary preventDefault override (createInteractEvent lines 55-66); the typed event detail wrapper (`PointerDownOutsideEvent`/`FocusOutsideEvent` = CustomEvent<{originalEvent}>) that reka exports is absent, so cross-library/consumer code expecting `.detail.originalEvent` will break.
+- ▫️ (api-surface) reka exports the reusable composables `usePointerDownOutside` and `useFocusOutside` (and types) from the package index (DismissableLayer/index.ts line 7), letting consumers build their own dismiss logic. robonen's index.ts exports only the component, `dismissableLayerStack`, and the two types — there is no exported focus-outside/pointer-down-outside composable from this module (the underlying useClickOutside lives in a different package, not surfaced here).
+- ▫️ (api-surface) Emit ordering of interactOutside vs specific events differs and reka's contract is the one consumers (Dialog/Menu/Popover) are written against. reka emits the specific event first then `interactOutside` (lines 112-113, 126-127), sharing the SAME cancelable CustomEvent so a preventDefault in either handler blocks dismiss. robonen emits `interactOutside` FIRST and only for pointer/focus paths via createInteractEvent, an ordering that can surprise consumers who expect to read the specific event's prevented state, and the temporary preventDefault override means a preventDefault in the interactOutside handler does not flow into the same object the specific handler later inspects.
+- ▫️ (edge-cases) reka awaits `nextTick()` before the post-pointerDownOutside dismiss check (DismissableLayer.vue line 114) so a consumer that asynchronously calls preventDefault (or reacts in a microtask) is still honored. robonen checks `event.defaultPrevented` synchronously immediately after emit (line 79), so any async/deferred preventDefault is missed.
+
+**Recommendations to make robonen strictly better:**
+- Add a `DismissableLayerBranch` component plus a branches Set in stack.ts; in the pointerdown/focusin handlers, ignore events whose target is contained in any registered branch. Forward this through the `ignore` option of useClickOutside as well. This fixes portaled-trigger and related-control false dismissals.
+- Use `currentElement.ownerDocument` (falling back to globalThis.document) for the focusin listener, the body pointer-events mutation, and pass an owner document/window to useClickOutside/useEscapeKey so layers inside iframes work. Do not hardcode global `document`/`window`.
+- Add touch-device handling in the outside-pointer path: when `event.pointerType === 'touch'`, defer dispatch to a one-shot `click` listener (and continuously remove the previous one) to respect the ~350ms touch delay and auto-cancel on scroll/long-press. Cite radix-ui/primitives#2171.
+- Defer registration of the outside-pointerdown listener by one macrotask (setTimeout 0) after mount to prevent the opening pointerdown from immediately self-dismissing the layer.
+- Use the already-defined `dismissableLayerStack.hasDisablingLayerAbove`/index ordering to compute per-layer pointer-events in the template: a layer should be `pointer-events: auto` if it is at or above the highest disabling layer, and `none` if it is below one, mirroring reka's isPointerEventsEnabled. Today only self-disabling layers get `auto`, breaking non-disabling layers stacked above a disabling one.
+- Harden focus-outside: track inside-focus via focus/blur capture flags on the Primitive and await one or two ticks before deciding the focus truly left, to avoid spurious focusOutside/dismiss during internal focus moves.
+- Implement layer-ordering-aware outside detection (equivalent to reka's isLayerExist) so interactions on a higher/sibling dismissable layer are not treated as outside for lower layers — relying on contains() alone is insufficient for portaled nested layers.
+- Wrap outside interactions in cancelable CustomEvents carrying `detail.originalEvent`, dispatched on the target, and export `PointerDownOutsideEvent`/`FocusOutsideEvent` types for parity with reka so consumer code reading `.detail.originalEvent` and using real DOM preventDefault works.
+- Emit the specific event (pointerDownOutside/focusOutside) and interactOutside as the SAME event object with the specific one first, and await nextTick() before the dismiss check so async preventDefault is honored.
+- Export reusable `usePointerDownOutside`/`useFocusOutside` style composables from the dismissable-layer index so consumers can build custom dismiss logic, matching reka's exported API surface.
+
+**Where robonen is already better:**
+- ✅ Escape handling uses a dedicated module-level stack composable (useEscapeKey + dismissableLayerStack.isTopmost) so only the genuine topmost layer fires, and the listener is installed once globally and torn down when empty. reka instead recomputes `index.value === layers.value.size - 1` from a reactive Set on every keystroke per-layer, which is O(layers) and re-derives ordering from Set insertion order.
+- ✅ Cleaner, smaller surface: a single `DismissableLayer.vue` (133 lines) plus a tiny 40-line `stack.ts` vs reka's component + 207-line `utils.ts` with custom-event dispatch machinery. The stack abstraction (push/remove/isTopmost/anyDisabling/hasDisablingLayerAbove) is reusable and self-documenting.
+- ✅ Body pointer-events teardown is guarded by `dismissableLayerStack.anyDisabling()` so it only restores the original value when no other disabling layer remains; reka's teardown only fires when `size === 1` inside that layer's own cleanup, which is correct but more fragile.
+- ✅ Adds a `data-dismissable-blocking` attribute on `<body>` while blocking, giving consumers a clean CSS hook (`[data-dismissable-blocking] *:not([data-dismissable-layer])`) that reka does not provide.
+- ✅ SSR safety is explicit and centralized: the underlying useClickOutside/useEscapeKey/useEventListener composables early-return `noop` when `defaultWindow` is falsy, and the body-blocking effect guards `typeof document === 'undefined'`.
+
+
+### navigation-menu  —  _robonen-better-with-gaps_
+
+
+Both libraries implement the same 10 parts (Root, Sub, List, Item, Trigger, Link, Content, ContentImpl, Viewport, Indicator) and the architecture is near-identical (robonen is clearly a port of reka's NavigationMenu). robonen has a few genuine improvements: a sensible default aria-label='Main' landmark, explicit timer teardown via onScopeDispose, and a more precise active-trigger match (`-trigger-${value}` vs reka's substring includes). However robonen currently has several real regressions that prevent 'strictly better': (1) none of the structural parts support as/asChild (reka extends PrimitiveProps everywhere); (2) the Indicator lacks aria-hidden; (3) animating-out content/viewport are never made hidden/pointer-events:none; (4) arrow nav inside content hijacks INPUT/TEXTAREA (reka uses enableIgnoredElement); (5) declared DismissableLayerProps on ContentImpl are dropped instead of forwarded and disableOutsidePointerEvents is hardcoded; (6) the root-content-dismiss path does not return focus to the trigger; (7) viewport positioning is weaker (horizontal-only clamping, no vertical align, no window/root resize reposition); plus minor keyboard (no nested-menu guard, no item-level Enter/Space focus-return) and Link select payload gaps. Implementing the recommendations — especially as/asChild, aria-hidden on indicator, hidden/pointer-events on closed panels, the INPUT/TEXTAREA arrow-nav bail-out, prop forwarding on ContentImpl, focus-return on dismiss, and richer viewport positioning — would make robonen strictly better than reka.
+
+
+**Major gaps:**
+- 🔶 (api-surface) All structural parts support `as`/`asChild` polymorphism in reka but NOT in robonen. reka's Root, Sub, List, Item, Trigger, Viewport and Indicator all `extends PrimitiveProps` and render `:as`/`:as-child`. robonen's equivalents do not extend PrimitiveProps and hardcode the element (Root forced as='nav', Item as='li', List inner as='ul', Trigger as='button', Viewport/Indicator have no as forwarding). Consumers cannot render the root as a custom element, render the trigger asChild around their own button, etc.
+- 🔶 (accessibility) Indicator is not hidden from assistive tech in robonen. reka sets `aria-hidden="true"` on the indicator Primitive; the indicator is purely decorative. robonen's NavigationMenuIndicator renders the Primitive WITHOUT aria-hidden, exposing the decorative indicator to AT.
+- 🔶 (edge-cases) Closed/animating-out content and viewport are not made non-interactive in robonen. reka applies `:hidden="!present"` to both NavigationMenuContentImpl and NavigationMenuViewport, and `pointer-events: none` while closed (`pointerEvents: !open && isRootMenu ? 'none' : undefined`). robonen passes neither, so during the keep-mounted exit animation (isLastActiveValue / viewport exit) stale content remains interactive and visible to AT.
+- 🔶 (forms) Arrow-key navigation inside content hijacks text fields in robonen. reka's content keydown passes `enableIgnoredElement: true` to useArrowNavigation (ignore list ['INPUT','TEXTAREA']), so arrow keys with focus in an input/textarea inside the panel move the caret. robonen's NavigationMenuContentImpl.handleKeydown always focuses the next link with no INPUT/TEXTAREA bail-out, stealing focus from form fields.
+- 🔶 (api-surface) Declared DismissableLayer props are dropped instead of forwarded in robonen content. reka's NavigationMenuContentImpl binds `v-bind="props"` so user-supplied DismissableLayerProps reach DismissableLayer. robonen declares `defineProps<NavigationMenuContentImplProps>()` (extends DismissableLayerProps) but the template binds only `v-bind="$attrs"` and hardcodes `:disable-outside-pointer-events="false"`, so declared props are consumed by the component and never forwarded.
+- 🔶 (features) Viewport positioning is weaker: no vertical alignment and no right/bottom collision handling. reka computes both left AND top relative to the root, applies align to both axes, and clamps against all four screen edges with re-checks, plus re-positions on body/root ResizeObserver. robonen computes only `left` from align and a fixed `top = triggerRect.bottom`, clamps only horizontally, ignores vertical-orientation alignment and bottom/top collision, and only observes the content ResizeObserver.
+- 🔶 (keyboard) Root content dismiss does not refocus the trigger in robonen, so focus can be lost. reka's NavigationMenuContentImpl EVENT_ROOT_CONTENT_DISMISS handler runs onItemDismiss(), onRootContentClose(), and `if (content.contains(getActiveElement())) triggerRef.value?.focus()`. robonen's ContentImpl dismiss listener only calls itemContext.onRootContentClose() (tab-order restore) and never re-focuses the trigger, so after selecting a link that closes the menu focus can fall to <body>.
+
+**Minor gaps (4):**
+- ▫️ (keyboard) Nested-submenu content keydown lacks the parent-vs-self guard reka has. reka's content handleKeydown begins with `if (ev.target.closest('[data-reka-navigation-menu]') !== menuContext.rootNavigationMenu.value) return` so a parent menu's content does not handle keydown bubbling from a nested submenu's content. robonen's handleKeydown has no such guard.
+- ▫️ (keyboard) Item-level Enter/Space handling and focus-return is absent in robonen. reka's NavigationMenuItem.handleKeydown intercepts Enter/Space: if open it dismisses and returns focus to the trigger (handleClose -> triggerRef.focus()), else clicks the focused element. robonen relies on native <button> click and never re-focuses the trigger after a keyboard-driven close.
+- ▫️ (api-surface) Link select event payload is less informative in robonen. reka emits the select CustomEvent with `detail: { originalEvent }` (typed CustomEvent<{ originalEvent: Event }>), letting consumers inspect the originating click. robonen dispatches LINK_SELECT_EVENT with no detail and re-emits the raw event, so the typed select payload carries no originalEvent.
+- ▫️ (edge-cases) Link dismiss target divergence: reka dispatches EVENT_ROOT_CONTENT_DISMISS on `ev.target` (actual clicked element, the documented Radix behavior) whereas robonen dispatches on `event.currentTarget`. Minor behavioral divergence in nested-link scenarios.
+
+**Recommendations to make robonen strictly better:**
+- Add `extends PrimitiveProps` (as/asChild) to NavigationMenuRoot, Sub, List, Item, Trigger, Viewport and Indicator, and forward `:as`/`:as-child` to the underlying Primitive (default Root 'nav', Item 'li', List 'ul', Trigger 'button'). Restores polymorphism parity.
+- Add `aria-hidden="true"` to the NavigationMenuIndicator Primitive — it is decorative and must not be exposed to AT.
+- Set `:hidden="!present"` on NavigationMenuContentImpl and NavigationMenuViewport (use the Presence slot's `present`) and apply `pointer-events: none` while `!open && isRootMenu` so animating-out panels are inert and hidden from AT.
+- In NavigationMenuContentImpl.handleKeydown, bail out of arrow navigation when the focused element is an INPUT or TEXTAREA (mirror reka's enableIgnoredElement) so form fields inside the panel keep native caret movement.
+- Forward the declared DismissableLayerProps to DismissableLayer (bind the captured props, not just $attrs) instead of dropping them; keep disableOutsidePointerEvents user-overridable rather than hardcoded to false.
+- Add the nested-menu guard `if (ev.target.closest('[data-primitives-navigation-menu]') !== menuContext.rootNavigationMenu.value) return` at the top of content handleKeydown so parent content does not double-handle nested submenu keydown.
+- In the root EVENT_ROOT_CONTENT_DISMISS handler inside NavigationMenuContentImpl, also call onItemDismiss() and re-focus itemContext.triggerRef when the content still contains the active element, so link-select-driven closes return focus to the trigger.
+- Strengthen NavigationMenuViewport positioning: compute both left and top relative to the root, apply align to the cross axis for vertical orientation, clamp against all four screen edges with re-checks, and re-run updatePosition on body/root ResizeObserver (window/root resize).
+- Add explicit Enter/Space handling at the item or trigger level that returns focus to the trigger after a keyboard-driven close (reka's handleClose pattern) for deterministic focus restoration.
+- Enrich the NavigationMenuLink select payload with `detail: { originalEvent }` and type the emit as CustomEvent<{ originalEvent: Event }> for parity and better consumer ergonomics.
+- Dispatch the root-content-dismiss event on the actual clicked target (event.target) rather than currentTarget to match reka/Radix behavior for nested links.
+
+**Where robonen is already better:**
+- ✅ Sensible default landmark label: NavigationMenuRoot defaults aria-label to 'Main' when the user supplies none, and still lets a user-supplied aria-label win (verified by NavigationMenu.landmark.test.ts). reka never sets a default aria-label on its nav, so reka's root is an unlabeled <nav> landmark by default.
+- ✅ Cleaner debounce + skip-delay timer management with explicit teardown: NavigationMenuRoot uses manual setTimeout-based debounce plus onScopeDispose(clearDebounce/clearSkipDelay), so all timers are guaranteed cleared on unmount; reka relies on @vueuse useDebounceFn/refAutoReset whose cancellation on unmount is implicit.
+- ✅ More robust active-trigger matching: robonen matches the trigger by the specific pattern `-trigger-${modelValue}` (makeTriggerId), whereas reka matches with a loose `item.id.includes(modelValue.value)` which can mis-match when one item value is a substring of another (e.g. value 'a' matching id of value 'ab').
+- ✅ Indicator size/position tracking observes BOTH the active trigger AND the indicator track via two ResizeObservers and recomputes on either change (watch on [activeTrigger, indicatorTrack, isHorizontal]) with explicit disconnect in onScopeDispose.
+- ✅ JSDoc on every prop in the props interfaces (delayDuration, skipDelayDuration, disable* flags, unmountOnHide, align) gives better editor IntelliSense than reka's terser doc comments.
+- ✅ Trigger keydown explicitly stopPropagation()s the entry-key (Arrow into content) so the inner RovingFocusItem doesn't also act on it — matches reka's intent and is cleanly scoped.
+
+
+### listbox  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** ListboxVirtualizer
+
+robonen's Listbox covers the core surface (Root, Content, Item, ItemIndicator, Group, GroupLabel, Filter) with the same roles, ARIA wiring (role=listbox/option/group, aria-selected, aria-multiselectable, aria-activedescendant, aria-orientation), controlled+uncontrolled modelValue, multiple + selectionBehavior toggle/replace, RTL/dir via ConfigProvider, highlightOnHover, by-comparator, entryFocus/leave/highlight emits, type-ahead, Home/End/Arrow navigation, Enter/Space activation, and Ctrl/Cmd+A select-all — and it is genuinely leaner and more performance-conscious than reka (inlined loops, shallowRef, module-scoped Sets, nextTick over setTimeout, cleaner aria-multiselectable, full types/JSDoc). However it is NOT yet strictly better: it is missing reka's ListboxVirtualizer (virtual scrolling), native form integration (name/required + VisuallyHiddenInput), shift-range selection (firstValue + findValuesBetween), PageUp/PageDown paging keys, IME composition guards, buffered multi-character type-ahead, an imperative defineExpose API (highlightItem/getItems/etc.), and deep object equality fallback. The virtualizer, form integration, shift-range, PageUp/PageDown, IME, and richer type-ahead are the load-bearing gaps to close.
+
+
+**Major gaps:**
+- 🔶 (features) No virtualization. Reka ships ListboxVirtualizer.vue (TanStack vue-virtual) wiring isVirtual + virtualFocusHook/virtualKeydownHook/virtualHighlightHook into Root, enabling large lists with aria-setsize/aria-posinset and virtual scroll-to-index navigation/typeahead. Robonen has no equivalent component or virtual hooks at all.
+- 🔶 (forms) No form integration. Reka Root extends FormFieldProps (name, required) and renders <VisuallyHiddenInput :name :value :disabled :required> when inside a form, so the listbox submits with a form. Robonen items carry a `value` but Root has no name/required props and renders no hidden input, so it cannot participate in native form submission.
+- 🔶 (keyboard) No shift-range selection. Reka supports range selection in multiple+replace mode: Shift+Arrow/Home/End selects a contiguous range via firstValue tracking + handleMultipleReplace + findValuesBetween. Robonen tracks no firstValue and never handles event.shiftKey, so Shift-range selection is impossible.
+- 🔶 (keyboard) PageUp/PageDown keys not handled. Reka maps PageUp->first and PageDown->last (MAP_KEY_TO_FOCUS_INTENT) so those keys jump to the first/last item. Robonen's rovingKeyToAction only handles Arrow/Home/End and returns null for PageUp/PageDown, and ListboxContent's NAV_KEYS set excludes them, so they do nothing.
+- 🔶 (edge-cases) No IME composition handling. Reka guards Enter while composing (isComposing) and wires @compositionstart/@compositionend on both Root flow and Filter, preventing premature selection during CJK/IME input. Robonen has no isComposing, no onCompositionStart/End, and the Filter has no composition listeners — Enter mid-composition can select.
+- 🔶 (features) Weaker type-ahead. Reka uses useTypeahead/getNextMatch: a 1s-reset search buffer supporting multi-character prefix matching, repeated-character normalization (cycling), and item-supplied textValue. Robonen only matches a single event.key letter via textContent.startsWith(letter) with no accumulation buffer, no multi-char prefixes, and no textValue override.
+
+**Minor gaps (4):**
+- ▫️ (api-surface) No imperative API exposed on Root. Reka defineExpose exposes highlightItem(value), highlightFirstItem(), highlightSelected(), getItems(), and highlightedElement for programmatic control. Robonen's Root exposes nothing beyond forwardRef; there is no highlightItem(value) to programmatically highlight by value, and no exposed getItems/highlightedElement.
+- ▫️ (edge-cases) Object comparison without `by` differs. Reka's compare falls back to ohash isEqual for deep structural equality when no comparator/string-key is given (and value isn't a string). Robonen's compare falls back to reference equality `a === b`, so two structurally-equal object values won't be treated as selected unless the consumer passes `by`.
+- ▫️ (edge-cases) Filter onValueChange/typeahead does not set isUserAction. Reka's onKeydownTypeAhead sets isUserAction=true so the programmatic highlightSelected watcher does not fight the typeahead highlight. Robonen's onKeydownTypeAhead never sets isUserAction, so a programmatic modelValue change racing with typeahead could re-run the checked-item scan and override the typeahead highlight.
+- ▫️ (types) Filter slot/v-model typing: reka declares defineSlots with typed modelValue slot prop on both Root and Filter. Robonen passes :model-value to the slot but does not declare defineSlots, so slot prop types are not surfaced to consumers (weaker DX/types).
+
+**Recommendations to make robonen strictly better:**
+- Add a ListboxVirtualizer component (or virtual hooks on the context: isVirtual + focus/keydown/highlight EventHooks) so large collections can be virtualized with aria-setsize/aria-posinset and scrollToIndex navigation, matching reka ListboxVirtualizer.vue. Without it, robonen cannot claim parity for large lists.
+- Add form integration to ListboxRoot: extend props with name?/required?, detect form context (a useFormControl equivalent), and render the existing src/visually-hidden VisuallyHidden as a hidden input mirroring modelValue/disabled/required so the listbox submits with native forms (reka ListboxRoot.vue:415-421).
+- Implement shift-range selection for multiple+selectionBehavior='replace': track a firstValue ref, handle event.shiftKey in onKeydownNavigation, and add a findValuesBetween util to select contiguous ranges on Shift+Arrow/Home/End (reka handleMultipleReplace + arrays.ts findValuesBetween).
+- Extend utils/roving-focus.ts rovingKeyToAction to map PageUp->{absolute:'home'} and PageDown->{absolute:'end'}, and add 'PageUp'/'PageDown' to ListboxContent NAV_KEYS, so paging keys jump to first/last like reka MAP_KEY_TO_FOCUS_INTENT.
+- Add IME composition guards: an isComposing ref set via onCompositionStart/onCompositionEnd on the context, consulted in onKeydownEnter, and wire @compositionstart/@compositionend on ListboxFilter (and the listbox content) to avoid selecting mid-composition (reka ListboxRoot.vue:230-237).
+- Upgrade type-ahead to a multi-character buffered search with ~1s reset and repeated-character normalization (port getNextMatch/useTypeahead semantics), and support an item-level textValue override instead of only textContent.startsWith on a single key (reka shared/useTypeahead.ts).
+- defineExpose on ListboxRoot: expose highlightItem(value), highlightFirstItem(), highlightSelected(), getItems(), and highlightedElement so consumers can drive highlighting programmatically; add a highlightItem(value) helper that resolves the element by value (reka ListboxRoot.vue:358-364).
+- Make compare() fall back to a deep structural equality (e.g. a small isEqual) when by is undefined and the value is a non-primitive object, so structurally-equal object values are recognized as selected without forcing consumers to pass `by` (reka utils.ts:29).
+- Set isUserAction=true inside onKeydownTypeAhead (reset on nextTick) to prevent the programmatic highlightSelected watcher from clobbering type-ahead highlights (reka ListboxRoot.vue:203).
+- Declare defineSlots on ListboxRoot and ListboxFilter to type the modelValue slot prop, improving consumer DX/types (reka ListboxRoot.vue:94-99, ListboxFilter.vue:29-34).
+
+**Where robonen is already better:**
+- ✅ Performance hygiene in hot paths: enabledEls() is an inlined manual loop avoiding the .map().filter() double-allocation + two closures that reka's getCollectionItem() incurs on every keydown/typeahead/navigation; NAV_KEYS is a module-scoped Set instead of being re-evaluated per event; includes()/compare() use manual for-loops instead of .some(). (ListboxRoot.vue:103-111, utils.ts:23-26)
+- ✅ Uses nextTick() instead of setTimeout(...,1) to reset isUserAction, avoiding a timer-handle allocation and the 1ms latency window reka has in onValueChange/onKeydownTypeAhead (ListboxRoot.vue:144-147 vs reka ListboxRoot.vue:144-146,225-227).
+- ✅ shallowRef for localValue with an explicit comment that the value is always replaced on commit (never mutated in place), avoiding reka's deep:true watcher on modelValue (reka ListboxRoot.vue:117 deep:true, line 356 deep watch). Robonen's programmatic watch is a plain watch(localValue,...) with a manual element scan, cheaper than reka's deep diff.
+- ✅ Cleaner aria-multiselectable: emits the attribute only when multiple is true (`ctx.multiple.value ? true : undefined`) instead of reka always rendering aria-multiselectable="false" via `!!rootContext.multiple.value` (ListboxContent.vue:63 vs reka ListboxContent.vue:29).
+- ✅ Explicit return types on every function and full JSDoc on props/emits; reka relies on inference and has a `// @ts-expect-error ignoring` on onValueChange in the provide call (reka ListboxRoot.vue:368).
+- ✅ Item Space activation calls event.preventDefault() before handleSelect via a dedicated onKeyDown guard (ListboxItem.vue:51-55), equivalent to reka but written as typed handler rather than inline template expression; overall robonen keeps logic in <script> rather than large inline template arrow functions (reka ListboxContent.vue:32-57 has multi-line inline handlers).
+- ✅ ListboxItem disabled attribute is gated with `|| undefined` so disabled is omitted entirely when false; data-disabled uses '' sentinel consistently — matches reka but robonen also sets the real `disabled` attribute (reka only sets data-disabled='' string, never the boolean attribute on line 85-86).
+
+
+### calendar  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** SR-only role=heading aria-level=2 live label inside CalendarRoot, isPlaceholderFocusable / firstFocusableDate / hasSelectedDate / isSelectedDateDisabled context state, disableDaysOutsideCurrentView wiring in CalendarCell and CalendarCellTrigger, outsideVisibleView slot prop + data-outside-visible-view on CalendarCellTrigger, aria-hidden thead in CalendarGridHead
+**Parts robonen has that reka lacks:** nextYear/prevYear exposed via context, CalendarHeadCell `day` prop with localized long aria-label
+
+Both libraries ship the same 12-part component set with very similar APIs. robonen is genuinely better on keyboard breadth (Home/End/PageUp/PageDown/Shift+PageUp-Down — reka has none of these) and avoids the @internationalized/date dependency. However robonen has several real, fixable gaps: fixedWeeks is a non-functional no-op (always renders 6 weeks); no multiple selection, preventDeselect, deselect-on-reclick, or disableDaysOutsideCurrentView; keyboard navigation can land on and stop at disabled days (reka skips them); arrow-shift doesn't sync the placeholder within the view; there is no SR-exposed heading (CalendarHeading is aria-hidden with no replacement, unlike reka's hidden role=heading); no locale-aware default weekStartsOn; the roving fallback can target a disabled first-of-month; and thead isn't aria-hidden. Net: robonen leads on keyboard and bundle size but trails on feature completeness (multiple/deselect/fixedWeeks), i18n defaults, and a couple of a11y details — so it is not yet strictly better.
+
+
+**Major gaps:**
+- 🔶 (features) robonen's `fixedWeeks` prop is non-functional. getWeeks() in date-utils.ts always loops `for (w = 0; w < 6)` and unconditionally returns a 6×7 (42-cell) grid; the fixedWeeks ref is provided to context but never consumed when building the grid. So fixedWeeks={false} is a silent no-op and the calendar ALWAYS renders 6 weeks. Reka's createMonth (date/calendar.ts lines 61-101) builds the real number of weeks and only pads to 42 when fixedWeeks is true.
+- 🔶 (features) No multiple-date selection. robonen modelValue is strictly `Date | undefined` and setDate replaces the single value. Reka supports `multiple` prop with modelValue `DateValue | DateValue[]`, toggling membership (add/remove) in onDateChange.
+- 🔶 (features) No deselect-on-reclick and no preventDeselect option. In reka, clicking an already-selected date deselects it (onDateChange lines 272-276) unless preventDeselect is set. robonen's setDate has no deselect path — clicking a selected date just re-sets the same date, and there is no preventDeselect prop.
+- 🔶 (keyboard) Keyboard navigation does not skip disabled days. robonen shiftFocus() focuses the candidate cell even if it is disabled (focusByDataValue query is `:not([data-outside-view])` only, NOT `:not([data-disabled])`), so arrow keys can land focus on a disabled day and stop. Reka recurses past disabled cells: `if (candidateDay.hasAttribute('data-disabled')) return shiftFocus(candidateDayValue, add)`.
+- 🔶 (accessibility) No SR-only live heading. Reka renders a visually-hidden `<div role="heading" aria-level="2">{{ fullCalendarLabel }}</div>` inside the root so screen readers announce the current month/year as a heading. robonen's CalendarRoot has no such element; its CalendarHeading is explicitly aria-hidden="true", so the heading text is hidden from AT with no SR-exposed replacement.
+
+**Minor gaps (8):**
+- ▫️ (features) No disableDaysOutsideCurrentView. Reka can disable days that belong to adjacent months (affects isDisabled, aria-disabled, data-disabled, tabindex). robonen has no such prop; outside-view days remain enabled/clickable.
+- ▫️ (keyboard) Arrow-key focus shift does not move the placeholder/displayed month context. Reka calls rootContext.onPlaceholderChange(candidateDayValue) on every successful shift (CalendarCellTrigger.vue line 165), keeping placeholder in sync with the focused day. robonen only updates placeholder when crossing the visible page boundary (shiftFocus lines 91-99), leaving placeholder stale relative to the focused cell within the same view.
+- ▫️ (rtl-i18n) No locale-aware default weekStartsOn. Reka defaults weekStartsOn to getWeekStartsOn(locale) so e.g. 'en-US' starts Sunday, 'fr' starts Monday automatically. robonen hard-defaults weekStartsOn=0 (Sunday) regardless of locale.
+- ▫️ (rtl-i18n) No non-Gregorian calendar / era / timezone support. Reka uses @internationalized/date (DateValue) supporting BC era display (headingFormatOptions era handling in useCalendar.ts lines 128-137), arbitrary calendar systems, and timezone-correct 'today' via getLocalTimeZone(). robonen uses native Date with isToday computed as isSameDay(day, new Date()) (no tz control) and Intl formatting only against Gregorian.
+- ▫️ (edge-cases) Roving-tabindex fallback can land on a disabled date. robonen isFocusedDate fallback returns the first-of-month (day.getDate() === 1) when neither selection nor today is in view, without checking disabled/unavailable/min-max (CalendarCellTrigger.vue lines 49-59). Reka computes firstFocusableDate by scanning for the first non-disabled, non-unavailable date respecting minValue (useCalendar.ts lines 360-375) so the initial tab stop is always actionable.
+- ▫️ (accessibility) GridHead is not aria-hidden. Reka's CalendarGridHead sets aria-hidden="true" on the <thead> (it relies on cell aria-labels for SR), avoiding double-announcement of weekday columns. robonen's CalendarGridHead is a bare passthrough with no aria-hidden.
+- ▫️ (rtl-i18n) Grid week boundaries use JS Date.getDay() rather than locale-aware getDayOfWeek. robonen startOfWeek/getWeeks compute day-of-week from native (date-utils.ts), which is correct for Gregorian but not driven by the locale's calendar; reka uses getLastFirstDayOfWeek/getNextLastDayOfWeek with locale + getDayOfWeek (date/comparators.ts) for calendar-correct week alignment.
+- ▫️ (accessibility) CalendarGrid role differs: reka sets role="application" on the grid table (CalendarGrid.vue) while the root is just a labeled container; robonen sets role="application" on the root AND role="grid" on the table. Reka's split (root = region with hidden heading, grid = application) is the documented WAI pattern for keyboard-grid calendars; robonen's role=grid on a non-roving-managed table plus role=application on root is a less conventional combination worth reconciling.
+
+**Recommendations to make robonen strictly better:**
+- Make fixedWeeks actually work: change getWeeks (date-utils.ts) to build only the real number of weeks (start-of-week of month start through end-of-week of month end) and pad to 42 cells ONLY when fixedWeeks is true; thread fixedWeeks into createMonths/getWeeks so fixedWeeks={false} renders 4-6 weeks.
+- Add multiple-selection support: allow modelValue to be `Date | Date[]`, add a `multiple` prop, and implement add/remove toggle logic in setDate mirroring reka's onDateChange array branch; update isDateSelected to check array membership.
+- Implement deselect-on-reclick plus a `preventDeselect` prop: in setDate, if the clicked date equals the current single value and !preventDeselect, set modelValue=undefined (and move placeholder to that date).
+- Add `disableDaysOutsideCurrentView` prop and fold it into isDateDisabled in CalendarCell and CalendarCellTrigger (affecting aria-disabled, data-disabled, tabindex) like reka.
+- Skip disabled days during keyboard navigation: in CalendarCellTrigger.shiftFocus/focusByDataValue, exclude [data-disabled] from the query and recurse to the next candidate in the same direction (reka pattern) so arrows never park focus on a disabled cell.
+- Call setPlaceholder(target) on every successful shiftFocus (not only on page-boundary crossings) so the displayed month context tracks the focused day.
+- Add a visually-hidden `role="heading" aria-level="2"` element inside CalendarRoot rendering fullCalendarLabel, so the current month/year is exposed to screen readers (CalendarHeading remains aria-hidden for the visible UI).
+- Derive a locale-aware default weekStartsOn (e.g. compute from Intl/locale) when the prop is not supplied, instead of hard-coding 0.
+- Harden the roving-tabindex fallback: compute a firstFocusableDate that skips disabled/unavailable dates and honors minValue, and use it instead of the unconditional first-of-month fallback in isFocusedDate.
+- Set aria-hidden="true" on CalendarGridHead's thead to avoid double weekday announcements.
+- Consider isToday timezone correctness (allow a timezone or use a single 'now' source) and optionally support non-Gregorian calendars/era display for full i18n parity, or document the Gregorian-only limitation.
+- Reconcile ARIA roles to the WAI calendar pattern: keep role=application on the interactive grid and a labeled region/heading on the root, matching reka, to avoid an unusual role=application-on-root + role=grid-on-table pairing.
+
+**Where robonen is already better:**
+- ✅ Richer keyboard support: CalendarCellTrigger.handleKeyDown handles Home, End, PageUp, PageDown, and Shift+PageUp/PageDown (year jump) in addition to arrows/Enter/Space. Reka's CalendarCellTrigger.handleArrowKey only binds @keydown.up.down.left.right.space.enter and has NO Home/End/PageUp/PageDown handling at all — this is a genuine a11y/keyboard advantage for robonen.
+- ✅ Home/End are correctly week-relative using weekStartsOn offset math (CalendarCellTrigger.vue lines 122-135), giving WAI-ARIA grid-pattern conformance that reka lacks entirely.
+- ✅ Exposes nextYear()/prevYear() in the root context (CalendarRoot.vue, context.ts) enabling year-stepping UI; reka's context exposes only nextPage/prevPage.
+- ✅ CalendarHeadCell accepts a `day` prop and emits a localized long weekday `aria-label` (CalendarHeadCell.vue), improving SR output for the column header; reka's CalendarHeadCell is a bare passthrough with no aria-label.
+- ✅ No heavy @internationalized/date runtime dependency — robonen uses native Date + Intl only (date-utils.ts), giving a smaller bundle and zero extra deps versus reka's hard dependency on @internationalized/date.
+- ✅ initialFocus selector also targets ':not([data-outside-view]):not([data-disabled])' as a final fallback (CalendarRoot.vue lines 255-259), so it won't focus a disabled/outside cell; reka's handleCalendarInitialFocus falls back to a '[data-reka-calendar-day]' selector that does not even exist on the trigger (it sets data-reka-calendar-cell-trigger), so reka's third fallback is effectively dead.
+- ✅ Per-prop reactive refs via toRef(() => ...) (CalendarRoot.vue lines 136-146) keep destructured props reactive in context without toRefs of the whole props object.
+
+
+### dialog  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** DialogOverlayImpl.vue (overlay split where body-scroll-lock lives), Dialog/utils.ts useWarning (dev a11y warnings)
+**Parts robonen has that reka lacks:** DialogPortal forceMount + Presence wrapper (reka portal is a bare teleport)
+
+robonen's Dialog mirrors reka's architecture (Root/Trigger/Portal/Overlay/Content+Impl+Modal/NonModal/Title/Description/Close) and is genuinely better in several areas: it sets aria-modal on modal content (reka does not), supports a role prop for alertdialog reuse, locks body scroll in ContentModal independent of whether an Overlay is rendered (reka's lock lives in OverlayImpl and is skipped without an overlay), wraps the Portal in Presence with forceMount, and special-cases closed-popover siblings in useHideOthers. However robonen is missing real behaviors reka ships: the modal right-click-outside guard, the defensive focus-outside-while-trapped guard, the non-modal conditional focus-return + trigger-containment + Safari focusin workaround (robonen's NonModal forwards events but adds zero outside-interaction logic), programmatic-open trigger preservation (triggerElement is only ever set by DialogTrigger), and dev-time a11y warnings for a missing Title/Description. Smaller gaps: no close helper in the Root slot, no ref forwarding on the public DialogContent, unconditional trigger aria-controls, and no scrollBody/nonce config. Fixing the four focus/edge-case items (right-click guard, non-modal focus handling, focus-outside guard, programmatic trigger capture) plus the dev warnings would make robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (keyboard) Non-modal close does not conditionally suppress focus-return: reka DialogContentNonModal tracks hasInteractedOutsideRef and only refocuses the trigger on closeAutoFocus when the user did NOT interact outside (DialogContentNonModal.vue lines 24-35). robonen's DialogContentNonModal.vue has NO closeAutoFocus/interactOutside handlers — it relies on FocusScope's default unmount which always refocuses previouslyFocusedElement, stealing focus back to the trigger even when the user clicked elsewhere in a non-modal flow.
+- 🔶 (edge-cases) Non-modal dialog does not prevent dismissing when the click target is the trigger itself, so clicking the trigger while open dismisses-then-toggles (close immediately followed by re-open). reka guards this in interactOutside via targetIsTrigger = rootContext.triggerElement.value?.contains(target) -> event.preventDefault().
+- 🔶 (edge-cases) Modal content does not ignore right-click outside. reka DialogContentModal.vue pointerDownOutside detects originalEvent.button===2 or ctrl+left and calls event.preventDefault() so right-clicking the overlay does not close the dialog. robonen DialogContentModal forwards pointer-down-outside straight to dismiss with no right-click guard, so a context-menu right-click on the overlay closes the modal.
+- 🔶 (keyboard) Programmatic-open trigger preservation is missing. reka DialogContentImpl.vue onMounted captures getActiveElement() into rootContext.triggerElement when the dialog is opened without a DialogTrigger (lines 56-58), so focus returns to whatever was focused and the NonModal trigger-containment guard works. robonen only ever sets ctx.triggerElement from DialogTrigger's currentElement (DialogTrigger.vue lines 17-19); a dialog opened via v-model with no DialogTrigger has triggerElement=undefined, so the (planned) conditional refocus and trigger-dismiss guard cannot work.
+- 🔶 (accessibility) No dev-time accessibility warnings. reka ships useWarning (Dialog/utils.ts) wired in DialogContentImpl under NODE_ENV!=='production' to console.warn when a DialogTitle is missing (label) or when aria-describedby points to a nonexistent description. robonen has no such guard, so a content with no Title silently ships an unlabeled dialog.
+
+**Minor gaps (6):**
+- ▫️ (edge-cases) Modal content does not defensively prevent focusOutside-driven dismiss while trapped. reka DialogContentModal.vue focusOutside handler always event.preventDefault() because a focusout can still fire under a focus trap. robonen DialogContentModal forwards focus-outside to emit only, and robonen's DismissableLayer focusin listener can emit('dismiss') on a focusOutside; the focus trap usually re-focuses inward, but reka's explicit guard removes the race entirely.
+- ▫️ (api-surface) Root default slot does not expose a close helper. reka DialogRoot.vue slot provides { open, close } (lines 54-61, 92-96, close = () => open=false) for ergonomic inline close without DialogClose. robonen DialogRoot.vue template only exposes :open (line 65).
+- ▫️ (api-surface) Public DialogContent does not forward a ref/expose the content element. reka DialogContent.vue uses useForwardExpose and binds :ref="forwardRef" onto Content(Modal|NonModal) so a consumer template ref resolves to the content element. robonen DialogContent.vue has no useForwardExpose/forwardRef; a ref on <DialogContent> resolves to the Presence wrapper, not the dialog element (only the internal Modal/NonModal forward to context).
+- ▫️ (features) No scrollBody config integration. reka useBodyScrollLock honors ConfigProvider scrollBody (padding/margin compensation for scrollbar width). robonen's useBodyScrollLock call in DialogContentModal takes no config and there is no scrollBody plumbing, so layout shift from scrollbar removal is not compensated.
+- ▫️ (ssr) No nonce propagation. reka ConfigProvider exposes nonce (ConfigProvider.vue lines 34-66) consumable by injected style layers. robonen config-provider has no nonce, so any injected <style> (e.g. for pointer-events blocking) cannot carry a CSP nonce.
+- ▫️ (accessibility) Trigger aria-controls is always emitted even when closed. reka DialogTrigger.vue sets :aria-controls="rootContext.open.value ? rootContext.contentId : undefined" so it only references content that exists in the DOM. robonen DialogTrigger.vue line 30 always sets aria-controls to contentId even when content is unmounted, referencing a non-existent id (minor a11y validation nit).
+
+**Recommendations to make robonen strictly better:**
+- In DialogContentModal forward pointer-down-outside through a handler that calls event.preventDefault() for right-clicks (originalEvent.button===2 || (button===0 && ctrlKey)) before re-emitting, mirroring reka DialogContentModal.vue lines 32-43, so right-clicking the overlay no longer closes the modal.
+- In DialogContentModal add a focus-outside handler that calls event.preventDefault() while trapped (reka DialogContentModal.vue lines 44-50) to remove the focusin->dismiss race in DismissableLayer.vue.
+- In DialogContentNonModal add hasInteractedOutsideRef/hasPointerDownOutsideRef state and a close-auto-focus handler that only refocuses ctx.triggerElement when no outside interaction occurred, plus an interact-outside handler that preventDefaults when the target is inside ctx.triggerElement and handles the Safari focusin-after-pointerdown case (reka DialogContentNonModal.vue lines 24-58).
+- In DialogContentImpl onMounted, when ctx.triggerElement is empty, capture getActiveElement() (if not document.body) so programmatic v-model opens with no DialogTrigger still restore focus correctly and feed the NonModal trigger-containment guard (reka DialogContentImpl.vue lines 56-58).
+- Add an explicit close-auto-focus default on the modal path that preventDefaults and focuses ctx.triggerElement, instead of relying solely on FocusScope's previouslyFocusedElement restore (reka DialogContentModal.vue lines 24-31).
+- Add a dev-only useWarning (gated on import.meta.env.DEV / NODE_ENV) wired into DialogContentImpl that warns when no DialogTitle id is registered (titleId undefined) and when descriptionId is set but the element is missing — port reka Dialog/utils.ts.
+- Expose a close helper from the DialogRoot default slot (<slot :open="open" :close="onClose" />) for parity with reka DialogRoot.vue.
+- Add useForwardExpose to the public DialogContent and bind :ref="forwardRef" to the rendered Modal/NonModal so a consumer template ref on <DialogContent> resolves to the content element (reka DialogContent.vue).
+- Make DialogTrigger aria-controls conditional on ctx.open.value so it does not reference an unmounted content id (reka DialogTrigger.vue line 32).
+- Add scrollBody (and nonce) to config-provider and pass scrollBody options into the modal useBodyScrollLock call to compensate scrollbar-width layout shift (reka shared/useBodyScrollLock.ts).
+
+**Where robonen is already better:**
+- ✅ Sets aria-modal="true" on modal content (DialogContentImpl.vue line 55, gated on disableOutsidePointerEvents). reka-ui's Dialog never sets aria-modal at all — robonen is more correct for screen readers in modal mode.
+- ✅ Supports role prop on content: role?: 'dialog' | 'alertdialog' (DialogContentImpl.vue lines 11-12, plumbed through Content/Modal/NonModal). reka hardcodes role="dialog" in DialogContentImpl and pushes alertdialog into a separate package, so robonen's single Content is more flexible.
+- ✅ Body-scroll lock lives in DialogContentModal (lines 22-34) keyed off ctx.open, with explicit release on close and onBeforeUnmount cleanup. reka puts useBodyScrollLock in DialogOverlayImpl, so a modal dialog rendered WITHOUT a DialogOverlay does not lock scroll in reka; robonen always locks for modal regardless of overlay presence.
+- ✅ useHideOthers skips elements inside a closed native [popover] via isInClosedPopover with a Safari-safe try/catch (useHideOthers.ts lines 8-22) — a real edge case reka's plain useHideOthers does not special-case.
+- ✅ DialogPortal exposes forceMount and wraps the teleport in Presence (DialogPortal.vue lines 29-34) and a present slot prop, giving portal-level exit-animation control. reka's DialogPortal is a bare TeleportPrimitive pass-through with no Presence/forceMount.
+- ✅ Performance: modal flag forwarded via toRef getter (GetterRefImpl) instead of computed (DialogRoot.vue lines 45-47), and stable useId-based ids created eagerly rather than reka's mutate-context-string-on-mount pattern (rootContext.contentId ||= ... in DialogTrigger/Impl).
+
+
+### combobox  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** ComboboxVirtualizer (virtualized rendering via @tanstack/vue-virtual + ListboxVirtualizer)
+
+robonen's combobox covers the full part set (Root, Anchor, Trigger, Input, Cancel, Content, ContentImpl, Viewport, Empty, Group, Label, Item, ItemIndicator, Separator, Arrow, Portal) and is in several respects cleaner than reka: a self-contained state machine instead of reka's Listbox/Collection/RovingFocus coupling, a pluggable `filterFunction`, a shipped+tested 'N results available' live region, fresh (non-stale) filterState, and modern shallowRef/triggerRef reactivity. Keyboard coverage on the input (Arrow Up/Down, Home, End, Enter, Escape, Tab, plus OPEN_KEYS to open) and the activedescendant ARIA pattern are at parity. However reka is currently better on real, verifiable axes: it has a ComboboxVirtualizer part (robonen has none), a cancelable Item `select` event, Root-level openOnFocus/openOnClick/resetModelValueOnClear/highlightOnHover and a `highlight` emit, Content-level forceMount/hideWhenEmpty/bodyLock/data-empty/interactOutside, useFocusGuards on content, a nonce-able scrollbar-hiding Viewport, accent-insensitive default filtering, IME composition guards, v-if (unmount) filtering vs robonen's v-show, an empty-value guard on Item, and more graceful group labelling. Closing the listed gaps (especially virtualization, the Item select event, focus guards, and the Root open/highlight props) would make robonen strictly better. Verdict: robonen-better-with-gaps.
+
+
+**Major gaps:**
+- 🔶 (features) No virtualization part. reka ships ComboboxVirtualizer.vue (wrapping ListboxVirtualizer via @tanstack/vue-virtual) and threads `isVirtual` through ComboboxRoot/ComboboxItem/ComboboxInput/ComboboxViewport to support large/async option lists. robonen has no ComboboxVirtualizer and no isVirtual concept; rendering thousands of items will mount them all.
+- 🔶 (accessibility) No focus guards around the content. reka's ComboboxContentImpl calls useFocusGuards() to insert focus sentinels so Tab/Shift-Tab out of a portalled listbox behaves correctly. robonen's ComboboxContentImpl never calls focus guards (the repo only has focus-guard logic in menu's modal content).
+- 🔶 (api-surface) No `openOnFocus`/`openOnClick`/`resetModelValueOnClear`/`highlightOnHover` on Root. reka centralizes these on ComboboxRoot (and threads them through context). robonen only puts openOnFocus/openOnClick on ComboboxInput (per-input) and has no resetModelValueOnClear or highlightOnHover at all — its Cancel never clears the model value, and hover-highlight is always-on via pointermove with no opt-out.
+- 🔶 (api-surface) Item lacks a cancelable `select` event. reka's ComboboxItem forwards a `select` SelectEvent that consumers can preventDefault to block selection/auto-close. robonen's ComboboxItem has no emits at all — selection is hardwired in handleClick with no interception point.
+
+**Minor gaps (14):**
+- ▫️ (features) No body scroll lock option on content. reka's ComboboxContentImpl accepts `bodyLock` and calls useBodyScrollLock(props.bodyLock). robonen's ComboboxContentImpl has no bodyLock prop and never locks scroll, even though the repo already has a body-scroll-lock util (used in dialog/popover/select).
+- ▫️ (api-surface) No `hideWhenEmpty` content prop. reka's ComboboxContentImpl exposes `hideWhenEmpty` (default false) and sets display:none when no items match, plus a `data-empty` attribute on the content. robonen has neither the prop nor a data-empty marker on content.
+- ▫️ (features) No `forceMount` on Content. reka's ComboboxContent has `forceMount` to keep content mounted for external animation libraries (`:present="forceMount || open"`). robonen's ComboboxContent only does `:present="rootCtx.open.value"` with no forceMount.
+- ▫️ (api-surface) Missing `interactOutside` emit on Content. reka forwards DismissableLayer's full emit set including `interactOutside` (ComboboxContentImplEmits = DismissableLayerEmits). robonen's ComboboxContentImplEmits only declares closeAutoFocus/escapeKeyDown/pointerDownOutside/focusOutside — no interactOutside.
+- ▫️ (features) No `disableOutsidePointerEvents` plumbing parity / Content does not pass it cleanly. reka passes `disable-outside-pointer-events` from DismissableLayerProps. robonen declares `disableOutsidePointerEvents` on ContentImplProps but defaults to false and there is no documented way to fully block outside interaction with pointer-events:none on body as reka's DismissableLayer supports.
+- ▫️ (ssr) No `nonce` support / no scrollbar-hiding style in Viewport. reka's ComboboxViewport accepts `nonce` (useNonce) and injects a `<style nonce>` that hides scrollbars cross-browser. robonen's ComboboxViewport has no nonce prop and only inline overflow style — under strict CSP a consumer cannot supply a nonce, and scrollbars are not hidden.
+- ▫️ (api-surface) No `highlight` emit / programmatic highlight event. reka's ComboboxRoot emits `highlight` ({ ref, value }) whenever the active item changes, enabling consumers to react to navigation. robonen has no highlight emit (RootEmits is only update:modelValue/update:open).
+- ▫️ (performance) Items are filtered with v-show, not unmounted. reka's ComboboxItem uses `v-if="isRender"` so non-matching items are removed from the DOM (lighter DOM, better for big lists). robonen's ComboboxItem uses `v-show="isVisible"`, keeping every item element in the DOM permanently.
+- ▫️ (edge-cases) Empty-string item value is not guarded. reka's ComboboxItem throws if `value === ''` (to keep '' reserved for clearing). robonen's ComboboxItem performs no such validation, so an empty-string value can silently collide with the cleared state.
+- ▫️ (rtl-i18n) No accent/diacritic-insensitive default filtering. reka uses Intl-based useFilter({ sensitivity: 'base' }) so 'cafe' matches 'café'. robonen's defaultFilter is a plain lowercase substring `includes`, so accents/locale folding are not handled.
+- ▫️ (accessibility) Group label relationship is fragile. reka separates group `id` and `labelId`: the group's `aria-labelledby` is empty until a ComboboxLabel mounts and sets labelId. robonen's ComboboxGroup always sets `aria-labelledby={id}` and ComboboxLabel sets its element `id={groupCtx.id}` — if no Label is rendered, aria-labelledby points to a non-existent id (broken SR relationship).
+- ▫️ (features) No multiple-selection display in input. robonen's ComboboxInput.displayString explicitly returns '' for arrays, so multi-select has no built-in input display even when a custom displayValue is provided for arrays. reka pairs Combobox with TagsInput stories for multi display.
+- ▫️ (forms) Form value serialization differs and may not round-trip. robonen submits the hidden input as `JSON.stringify(value)` for arrays / `String(value)` otherwise via a raw <input type=hidden>. reka uses VisuallyHiddenInput (in ListboxRoot) which serializes each value as a proper form control entry. robonen's JSON-encoded single field is less conventional for server form parsing and won't produce repeated name entries for multiple.
+- ▫️ (rtl-i18n) No composition (IME) handling on the navigation path. reka's ListboxRoot wires onCompositionStart/onCompositionEnd and guards Enter while composing (isComposing). robonen's ComboboxInput handleKeyDown does not check compositionend/isComposing, so pressing Enter to confirm an IME candidate can prematurely select a combobox item.
+
+**Recommendations to make robonen strictly better:**
+- Add a ComboboxVirtualizer part (and `isVirtual` in context) wrapping the existing robonen listbox virtualizer or @tanstack/vue-virtual; thread isVirtual through Root/Item/Input/Viewport so filterState skips per-item work and items aren't all mounted. Mirror reka Combobox/ComboboxVirtualizer.vue.
+- Switch ComboboxItem from `v-show="isVisible"` to `v-if` (with a first-render registration guard like reka's `filteredCurrentItem === undefined ? true`) so filtered-out items leave the DOM.
+- Add a cancelable `select` emit to ComboboxItem (CustomEvent with value+originalEvent); only auto-close/commit when not defaultPrevented, matching reka ComboboxItem.vue. This unlocks create-on-enter and custom selection flows.
+- Add Root-level props: `openOnFocus`, `openOnClick`, `resetModelValueOnClear`, and `highlightOnHover` (opt-out of pointermove highlight). Implement resetModelValueOnClear in ComboboxCancel (set model to [] or undefined). Emit a `highlight` event from Root when selectedValueId changes.
+- Add `forceMount` to ComboboxContent and `hideWhenEmpty` + `data-empty` to ComboboxContentImpl; set display:none when empty and hideWhenEmpty is true.
+- Add `useFocusGuards()` and an optional `bodyLock` prop (reusing the existing body-scroll-lock util) to ComboboxContentImpl for correct Tab-out and scroll-locking when portalled.
+- Add a `nonce` prop to ComboboxViewport (via a config-provider useNonce) and inject the cross-browser scrollbar-hiding `<style :nonce>` like reka ComboboxViewport.vue; also expose nonce on Root/ConfigProvider for CSP.
+- Add `interactOutside` to ComboboxContentImplEmits and forward it from DismissableLayer for full parity with DismissableLayerEmits.
+- Replace the plain lowercase substring defaultFilter with an Intl.Collator/useFilter-based accent-insensitive matcher (sensitivity: 'base') so diacritics match; keep filterFunction as the override.
+- Fix group labelling: keep an empty `labelId` in ComboboxGroupContext that ComboboxLabel sets on mount, and only emit `aria-labelledby` on the group when a label is present (avoid dangling ids when no Label is rendered).
+- Throw (or warn) in ComboboxItem when `value === ''` to reserve empty-string for the cleared state, matching reka.
+- Add IME composition handling to ComboboxInput (compositionstart/compositionend + isComposing guard) so Enter does not select an item while composing.
+- Reconsider hidden-input serialization: emit repeated `name` entries (or use a VisuallyHiddenInput-style control) for multiple values instead of JSON.stringify so standard form backends parse selections.
+- Verify highlightFirstItem re-runs after the search is cleared so the first item is re-highlighted on the clear-to-all transition (robonen has the oldState.count===0 watcher in ComboboxInput — ensure it also covers clearing back to all items).
+
+**Where robonen is already better:**
+- ✅ Self-contained architecture: robonen's combobox owns its full state machine (registration, filterState, highlight, keyboard) in ComboboxRoot + ComboboxInput rather than delegating to a separate Listbox/Collection/RovingFocus stack. Fewer indirection layers and no cross-primitive coupling (reka's combobox is tightly bound to ListboxRoot/ListboxFilter/ListboxContent/useCollection, so any Listbox change risks the combobox).
+- ✅ Pluggable filtering: ComboboxRoot exposes `filterFunction` (ComboboxFilterFunction) so consumers can fully replace the matching algorithm and reorder results. reka hardcodes `useFilter({ sensitivity: 'base' }).contains` in ComboboxRoot and only offers `ignoreFilter`; there is no per-instance custom filter hook.
+- ✅ Richer filterState typing/semantics: robonen's `ComboboxFilterState` uses `items: Set<string>` of visible ids plus `groups: Set<string>`, computed freshly each time. reka uses `items: Map<string,number>` (score 0/1) and, on the empty-search branch, returns the *previous* oldValue.items/oldValue.groups (ComboboxRoot.vue filterState computed), which can leave a stale items map after clearing the search.
+- ✅ Live-region announcement is shipped and tested: ComboboxContentImpl renders a VisuallyHidden `role=status aria-live=polite` node announcing 'N results available.' with dedicated tests (Combobox.live-region.test.ts). reka's Combobox has no built-in results-count live region.
+- ✅ ComboboxEmpty `always` prop lets consumers force-render the empty slot even when items exist; reka's ComboboxEmpty only renders when count===0 with no override.
+- ✅ More precise default `by`/value comparison utilities (compare/valueComparator in utils.ts) are local and tree-shakeable rather than importing the whole Listbox comparison stack.
+- ✅ displayValue is wired through context to the input with explicit guards for undefined/array/object values (ComboboxInput.displayString), keeping single-select display deterministic.
+- ✅ Modern reactivity: shallowRef + triggerRef for the item/group registries and toRef-based provided refs in ComboboxRoot reduce deep-reactive overhead compared to reka's plain `ref(new Map())` registries mutated in place.
+
+
+### context-menu  —  _robonen-better-with-gaps_
+
+
+Both libraries ship the identical set of 16 ContextMenu parts, all thin wrappers over a shared Menu primitive, so there is no missing sub-component on either side. robonen's wrappers are clean and slightly leaner in a few spots (onScopeDispose timer cleanup, shared context factory, typed virtual rect, reactive modal without an extra watcher). However reka's ContextMenu layer carries several behaviors robonen has dropped. The most impactful are the right-click-on-trigger interact-outside guard (requires tracking triggerElement in root context, which robonen does not store), the nested-trigger / defaultPrevented handling in handleContextMenu (robonen opens unconditionally, so nested context menus and consumer suppression break), and the @pointermove long-press cancellation plus pen-input support. Smaller gaps: configurable pressOpenDelay, sideOffset:2, non-modal closeAutoFocus focus preservation, WebkitTouchCallout/pointerEvents trigger styles + $attrs forwarding, ContextMenuSub defaultOpen/uncontrolled support, locking down ContextMenuContent props via Omit + explicit collision defaults, ContextMenuArrow defaults, and context-menu/trigger-size CSS custom properties (robonen never even aliases the popper anchor size). None of these are present in robonen today, so robonen is currently better-organized but not strictly better; closing the listed items (especially the four major edge-case/a11y gaps) would make it strictly superior.
+
+
+**Major gaps:**
+- 🔶 (edge-cases) robonen ContextMenuContent has no interact-outside guard for right-clicking the trigger while the menu is open. reka's ContextMenuContent intercepts @interact-outside and, when originalEvent.button === 2 && event.target === triggerElement, calls event.preventDefault() so the dismiss layer does not close-then-reopen (prevents flicker / lost focus when re-triggering via right click). robonen omits this entirely.
+- 🔶 (api-surface) robonen ContextMenuRoot does not track the trigger element. reka stores triggerElement: Ref<HTMLElement> in ContextMenuRootContext and sets it onMounted in ContextMenuTrigger; this is required for the right-click interact-outside guard above and is generally useful for consumers. robonen's ContextMenuRootContext has only { open, onOpenChange, modal } — no triggerElement, no dir, no pressOpenDelay.
+- 🔶 (edge-cases) robonen ContextMenuTrigger fires the context menu unconditionally on contextmenu (only gated by `disabled`). It does not await nextTick nor check event.defaultPrevented, so a nested ContextMenuTrigger cannot suppress the outer one and right-click bubbling opens BOTH menus. reka awaits nextTick and bails if event.defaultPrevented, enabling correct nested context-menu behavior.
+- 🔶 (edge-cases) robonen ContextMenuTrigger never cancels the touch long-press on pointermove. reka registers @pointermove -> handlePointerEvent which clearLongPress() so a scroll/drag gesture cancels the pending open. In robonen a touch that starts a scroll still opens the menu after 700ms.
+
+**Minor gaps (10):**
+- ▫️ (edge-cases) robonen long-press opens only for pointerType === 'touch', excluding pen input. reka uses isTouchOrPen (pointerType !== 'mouse'), so pen long-press also opens the context menu. robonen pen users get no long-press affordance.
+- ▫️ (api-surface) pressOpenDelay is not configurable in robonen. reka exposes pressOpenDelay?: number (default 700) on ContextMenuRoot, provides it via context, and uses rootContext.pressOpenDelay.value for the long-press timeout. robonen hard-codes LONG_PRESS_DELAY = 700 in the trigger with no prop.
+- ▫️ (features) robonen ContextMenuContent does not set sideOffset, so it falls through to MenuContentImpl's default of 0. reka explicitly sets :side-offset="2" giving a small gap between the cursor and the menu, the documented context-menu default.
+- ▫️ (accessibility) robonen ContextMenuContent does not preserve focus when the menu is dismissed by an outside interaction in non-modal mode. reka tracks hasInteractedOutside and, in @close-auto-focus, calls event.preventDefault() so focus is not yanked back to the trigger after an outside interaction. robonen just re-emits closeAutoFocus with no such handling.
+- ▫️ (edge-cases) robonen ContextMenuTrigger lacks the defensive inline styles reka applies: WebkitTouchCallout: 'none' (suppresses the iOS native callout on long-press) and pointerEvents: 'auto'. Without WebkitTouchCallout iOS Safari may show the native callout competing with the custom long-press menu.
+- ▫️ (code-quality) robonen ContextMenuTrigger does not disable inheritAttrs nor forward $attrs, and the Primitive sits INSIDE MenuAnchor (which is as-child with reference=virtualEl). reka sets inheritAttrs:false, renders MenuAnchor as a separate template node (as="template", virtual reference) and the Primitive separately with v-bind="$attrs", giving cleaner attribute fallthrough and avoiding the anchor wrapping the trigger DOM.
+- ▫️ (forms) robonen ContextMenuSub has no defaultOpen / uncontrolled support. reka ContextMenuSub adds defaultOpen?: boolean and uses useVModel with passive mode so the submenu can be used uncontrolled. robonen ContextMenuSub merely extends MenuSubProps ({ open?: boolean }) and forwards open, so submenu open state is controlled-only.
+- ▫️ (features) robonen does not expose context-menu-specific CSS custom properties, and the underlying Menu layer never aliases the anchor/trigger size. reka's ContextMenuContent and ContextMenuSubContent emit --reka-context-menu-content-transform-origin/-available-width/-available-height plus --reka-context-menu-trigger-width and --reka-context-menu-trigger-height. robonen MenuContentImpl only aliases transform-origin/available-width/available-height (as --primitives-menu-content-*) and never exposes the popper anchor-width/height, so consumers cannot size the menu to the trigger.
+- ▫️ (api-surface) robonen ContextMenuContent omits the collision/positioning default overrides reka declares (alignOffset:0, avoidCollisions:true, collisionBoundary:[], collisionPadding:0, sticky:'partial', hideWhenDetached:false) and does not Omit those props from the public type to lock side/align. Defaults fall through to Popper, which may differ (e.g. sticky default) and side/sideOffset/align remain settable by consumers (reka Omits side|sideOffset|align|arrowPadding|updatePositionStrategy from ContextMenuContentProps to prevent overriding the cursor-anchored positioning).
+- ▫️ (api-surface) robonen ContextMenuArrow does not set the documented arrow defaults. reka ContextMenuArrow withDefaults width:10, height:5, as:'svg'. robonen ContextMenuArrow forwards props with no defaults, so a bare <ContextMenuArrow/> renders with undefined dimensions/as unless MenuArrow supplies them.
+
+**Recommendations to make robonen strictly better:**
+- Add triggerElement: Ref<HTMLElement | undefined> to ContextMenuRootContext, set it onMounted in ContextMenuTrigger via useForwardExpose().currentElement, then implement the @interact-outside guard in ContextMenuContent: if (originalEvent.button === 2 && event.target === ctx.triggerElement.value) event.preventDefault(); also track hasInteractedOutside and preventDefault on @close-auto-focus for non-modal mode.
+- In ContextMenuTrigger.handleContextMenu, await nextTick() and bail if event.defaultPrevented before opening, so nested ContextMenu triggers and consumer preventDefault work correctly (port reka's nested-trigger semantics).
+- Add an @pointermove handler that clears the long-press timer (and gate by isTouchOrPen), so scrolling/dragging cancels the pending touch open.
+- Broaden the long-press gate from pointerType === 'touch' to pointerType !== 'mouse' (add a small isTouchOrPen util like reka) so pen long-press also opens the menu.
+- Add pressOpenDelay?: number (default 700) to ContextMenuRootProps, provide it through ContextMenuRootContext, and consume it in the trigger instead of the hard-coded LONG_PRESS_DELAY.
+- Set :side-offset="2" on ContextMenuContent's MenuContent (or default it) to match the standard cursor gap.
+- Add the defensive trigger styles WebkitTouchCallout: 'none' and pointerEvents: 'auto', set defineOptions({ inheritAttrs: false }) and forward $attrs onto the Primitive, and render MenuAnchor as a template with the virtual reference rather than wrapping the trigger DOM.
+- Tighten ContextMenuContentProps to Omit<MenuContentProps,'side'|'sideOffset'|'align'|'arrowPadding'|'updatePositionStrategy'> and add withDefaults for alignOffset/avoidCollisions/collisionBoundary/collisionPadding/sticky/hideWhenDetached so cursor-anchored positioning cannot be accidentally overridden and defaults are explicit.
+- Add defaultOpen?: boolean to ContextMenuSub (and uncontrolled support) so submenus can be used without controlling open state.
+- Expose context-menu CSS custom properties on ContextMenuContent/ContextMenuSubContent (transform-origin/available-width/available-height) and, importantly, alias the popper anchor size as a trigger-width/-height var (add --popper-anchor-height + a menu-level alias) so consumers can size the menu to the trigger.
+- Add withDefaults to ContextMenuArrow (width:10, height:5, as:'svg').
+- Store dir in ContextMenuRootContext (via useDirection) for consistency with reka and so consumers/sub-parts can read the resolved direction.
+
+**Where robonen is already better:**
+- ✅ robonen ContextMenuTrigger uses onScopeDispose(clearLongPress) to guarantee the long-press timer is cleared when the component unmounts; reka's ContextMenuTrigger never clears longPressTimer on unmount, so a pending touch long-press timer can fire after teardown (robonen avoids this leak).
+- ✅ robonen's context.ts uses the shared useContextFactory helper giving a single, consistently-named injector (useContextMenuRootContext) reused across the repo, vs reka's per-file createContext duplication.
+- ✅ robonen ContextMenuTrigger's virtualEl getBoundingClientRect returns an explicit, fully-typed rect object with toJSON; reka spreads ...point.value over the literal and casts `as DOMRect`, which is slightly looser typing (robonen is marginally cleaner/type-safe here).
+- ✅ robonen ContextMenuRoot keeps the open state minimal and provides modal as toRef(() => modal), so the modal flag stays reactive without a watcher; functionally equivalent to reka but with no extra watch(open) indirection (reka uses an explicit watch(open) to re-emit update:open).
+
+
+### slider  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** SliderImpl.vue (shared pointer/keyboard impl layer), SliderHorizontal.vue (orientation-specific positioning), SliderVertical.vue (orientation-specific positioning), SliderThumbImpl.vue (thumb impl with Collection + size), Collection integration (useCollection/CollectionSlot/CollectionItem for thumb indexing), VisuallyHiddenInput-based form serialization, SliderOrientationContext (startEdge/endEdge/direction/size)
+**Parts robonen has that reka lacks:** utils.ts hasMinStepsBetweenSortedValues (order-preserving min-gap check), SliderTrack owns its own pointerdown drag-start logic directly (no separate Impl layer), [min,max] bounds-change re-clamp watcher in SliderRoot
+
+robonen's slider is a leaner, more performance-conscious implementation (GetterRefImpl context, cached step decimals, monomorphic style objects, single-pass utils, no Collection dependency, packed-array bounds clamping) and covers the core API: controlled/uncontrolled via modelValue+defaultValue, valueCommit, min/max/step/minStepsBetweenThumbs, horizontal/vertical, RTL, inverted, disabled, Arrow/Page/Home/End keys, range with neighbour clamping, hidden form inputs, and proper ARIA slider role/valuemin/valuemax/valuenow/orientation. However it is not yet strictly better than reka: it lacks Shift+Arrow large steps, automatic per-thumb accessible labels (Minimum/Maximum/Value n of m), ConfigProvider-based global direction inheritance, thumbAlignment/in-bounds thumb offset, the robust VisuallyHiddenInput+useFormControl form path, null modelValue support, and inheritAttrs routing. Closing the listed gaps (especially the three major ones: Shift+Arrow, default thumb labels, and global dir inheritance) would make robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (keyboard) No Shift+Arrow large-step support. reka treats Shift+ArrowLeft/Right/Up/Down as a 10x step (SliderRoot step-key-down handler: isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key)); multiplier = isSkipKey ? 10 : 1). robonen's SliderThumb.onKeyDown only multiplies for PageUp/PageDown and ignores event.shiftKey entirely, so Shift+Arrow does a normal single step.
+- 🔶 (accessibility) No automatic accessible thumb labels. reka derives an aria-label per thumb when no explicit label is given: getLabel(index,total) returns 'Minimum'/'Maximum' for 2 thumbs and 'Value n of m' for >2 (SliderThumbImpl: :aria-label="$attrs['aria-label'] || label"). robonen only forwards a manually-supplied aria-label prop and provides no default, so multi-thumb sliders are unlabeled by default for screen readers.
+- 🔶 (rtl-i18n) Does not inherit global direction from ConfigProvider. reka's SliderRoot calls useDirection(propDir) so dir falls back to the ConfigProvider context dir then 'ltr'. robonen's SliderRoot reads dir directly from the prop (default 'ltr') and never consults useConfig()/the ConfigProvider context, even though robonen ships a config-provider with a reactive global dir. RTL apps must set dir on every slider.
+- 🔶 (features) No thumbAlignment ('contain' vs 'overflow') support. reka offsets the thumb so it stays within the track bounds at the edges via getThumbInBoundsOffset + useSize and exposes a --reka-slider-thumb-transform CSS var; robonen positions thumbs purely by percentage with no edge inset, so at 0%/100% half the thumb overflows the track with no opt-out/opt-in.
+
+**Minor gaps (5):**
+- ▫️ (forms) Form integration is weaker. reka uses VisuallyHiddenInput (a properly visually-hidden, accessibility-safe input) gated by useFormControl so the hidden input only renders when actually inside a <form>, supports disabled, passes step, and serializes arrays/objects robustly. robonen renders raw <input type="hidden"> unconditionally whenever name is set (even with no surrounding form), does not pass disabled to the input, omits step, and hand-rolls the name[] suffix.
+- ▫️ (api-surface) No data-slider-impl / consistent data hooks and no aria-disabled on thumb is fine but reka also forwards $attrs through inheritAttrs:false on Root/ThumbImpl giving precise attribute placement. robonen Root uses default attr inheritance (no inheritAttrs:false), so consumer-passed attributes/listeners land on the Root span rather than being routed, and Root does not v-bind $attrs to an inner element.
+- ▫️ (edge-cases) Disabled thumbs remain in the tab order. reka sets :tabindex="disabled ? undefined : 0" (no tabindex when disabled => not tabbable). robonen sets :tabindex="disabled ? -1 : 0". tabindex=-1 still makes the element programmatically focusable and is arguably acceptable, but reka's removal from tab order plus its overall disabled semantics differ; minor divergence worth aligning.
+- ▫️ (api-surface) Controlled/uncontrolled mode is hand-rolled and slightly lossy. reka uses useVModel with passive detection so null modelValue is supported (modelValue?: number[] | null) and defaultValue defaults to [0]. robonen's modelValue watcher early-returns on undefined and does manual sync; it does not support null, and a value-commit on programmatic min/max clamp path is inconsistent (commit only fires on pointer/keyboard, not on the bounds-clamp watcher). Edge: passing modelValue=null is a type/behavior gap vs reka.
+- ▫️ (accessibility) No aria-valuetext support and no slot/prop to humanize the value for screen readers. Neither library wires aria-valuetext, but reka's getLabel at least disambiguates multiple thumbs; robonen has neither default labels nor valuetext, so the gap is purely additive for robonen to close.
+
+**Recommendations to make robonen strictly better:**
+- Add Shift+Arrow large-step handling in SliderThumb.onKeyDown: when event.shiftKey is set on an Arrow key, use largeStep() (the 10x multiplier) just like PageUp/PageDown, matching reka's behavior.
+- Provide default accessible thumb labels: port reka's getLabel(index, total) so two-thumb sliders default to 'Minimum'/'Maximum' and >2 to 'Value n of m', used as a fallback when no aria-label prop is supplied. Expose aria-label fallback on the SliderThumb Primitive.
+- Make SliderRoot inherit global direction: resolve dir via useConfig()/a useDirection-style computed (prop dir || ConfigProvider dir || 'ltr') instead of reading the prop directly, so the existing config-provider dir actually propagates to the slider.
+- Add a thumbAlignment prop ('contain' | 'overflow', default 'contain') and an in-bounds offset (port getThumbInBoundsOffset + measure thumb size) so thumbs do not overflow the track at the extremes; expose a CSS var for the transform.
+- Harden form integration: render via the existing VisuallyHidden primitive instead of raw <input type=hidden>, gate rendering on an inside-a-form check (useFormControl-style), and forward disabled and step to the input.
+- Support null modelValue and consider useVModel-style controlled/uncontrolled handling; align defaultValue semantics and make valueCommit also fire (or document why not) on programmatic bounds clamping.
+- Set inheritAttrs:false on SliderRoot (and route $attrs explicitly) so consumer attributes/listeners land predictably, matching reka's attribute routing.
+- Add optional aria-valuetext support (e.g. a formatter prop or slot) so screen readers announce human-friendly values; also consider tabindex=undefined when disabled to match reka and remove disabled thumbs from the tab order.
+- Add focus-on-keyboard-change parity: reka focuses the active thumb whenever the value changes via keyboard (thumbElements[index].focus() in updateValues); ensure robonen keeps the active thumb focused after programmatic value changes for consistent SR/keyboard behavior.
+
+**Where robonen is already better:**
+- ✅ Performance: scalar context props are exposed via toRef(() => prop) (GetterRefImpl) instead of toRefs, avoiding redundant ReactiveEffect allocations per prop. Style objects in SliderThumb/SliderRange use a stable monomorphic shape (always same keys, explicit undefined) for V8 hidden-class stability and Vue's style patcher. Decimal count is cached per-step in a watcher (stepDecimals) out of the pointermove hot path, while reka recomputes getDecimalCount(step) on every updateValues call.
+- ✅ Change detection: setValue() does an element-by-element numeric comparison to skip no-op updates, whereas reka's updateValues uses String(nextValues) !== String(modelValue) stringification for equality and re-sorts the whole array (getNextSortedValues calls .sort) on every keystroke/move. robonen preserves order via neighbour clamping with a single array copy.
+- ✅ Hot-path allocation: getValueFromPointer / scaleLinear are plain non-curried functions with no per-call closure, whereas reka's linearScale(input, output) returns a new closure on every call. getClosestValueIndex is single-pass with no intermediate distances array (reka allocates values.map(...) then Math.min(...distances)).
+- ✅ Pointer dragging is global (window pointermove/pointerup added on slide start, removed on up), so dragging keeps tracking even if the pointer leaves the track element; reka relies on setPointerCapture and target.hasPointerCapture checks.
+- ✅ SliderTrack is interactive (its own pointerdown starts a drag and focuses the closest thumb via startDragFromTrack). This is comparable to reka but co-located more simply without a 3-file Impl/Horizontal/Vertical indirection chain.
+- ✅ Simpler architecture: 4 components (Root/Track/Range/Thumb) + context + utils vs reka's 8-file chain (Root -> Horizontal|Vertical -> Impl -> ThumbImpl) plus a Collection dependency. Lower bundle/indirection while still RTL/vertical/inverted-aware.
+- ✅ Bounds-change safety: a watcher on [min,max] re-clamps existing values when bounds shrink (packed-array friendly). reka has no equivalent watcher; if max shrinks below a current value the value stays out of range until next interaction.
+
+
+### stepper  —  _robonen-better-with-gaps_
+
+
+Both libraries ship the same 7 parts (Root, Item, Trigger, Indicator, Separator, Title, Description). robonen is genuinely better on several axes: it adds Home/End keyboard navigation (reka stepper omits both), uses the spec-correct aria-current=\"step\" (reka uses \"true\"), supports a root-level `disabled` prop (reka has none), registers items through an ordered Collection rather than reka's brittle insertion-order Set with off-by-one index math, and is more performance-conscious (single-pass packed arrays, shared roving helpers, no duplicated nextTick watchers). However robonen has real gaps that block 'strictly better': (1) it has NO screen-reader live region — reka announces 'Step X of N' via an off-screen role=status/aria-live=polite node, so robonen silently changes steps for SR users; (2) it exposes no imperative API (defineExpose is effectively empty) whereas reka exposes goToStep/nextStep/prevStep/hasNext/hasPrev/isFirstStep/isLastStep/isNextDisabled/isPrevDisabled/modelValue/totalSteps; (3) it has no nextStep/prevStep relative navigation at all; (4) its Root slot exposes only value/total/goToStep vs reka's full set of nav helpers/flags; (5) StepperSeparator hardcodes a bare div instead of reusing robonen's own Separator primitive (reka wraps the real Separator with decorative+orientation). Closing the live-region, imperative-API, nav-helper, and Separator-reuse gaps (while keeping robonen's existing edge over reka) would make robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (accessibility) reka renders a visually-hidden live region inside StepperRoot — <div aria-live="polite" aria-atomic="true" role="status"> with text 'Step {{modelValue}} of {{totalSteps}}' — so screen readers announce step changes. robonen's StepperRoot has NO live region/status element, so SR users get no announcement when the active step changes.
+- 🔶 (api-surface) reka exposes imperative API via defineExpose: goToStep, nextStep, prevStep, modelValue, totalSteps, isNextDisabled, isPrevDisabled, isFirstStep, isLastStep, hasNext, hasPrev. robonen's StepperRoot calls useForwardExpose() but defineExpose's nothing, so a template ref gets no stepper methods.
+- 🔶 (features) reka provides rich default slot props: modelValue, totalSteps, isNextDisabled, isPrevDisabled, isFirstStep, isLastStep, goToStep, nextStep, prevStep, hasNext, hasPrev (typed via defineSlots). robonen's Root slot only exposes value, total, goToStep — no nextStep/prevStep/isFirstStep/isLastStep/hasNext/hasPrev/isNextDisabled/isPrevDisabled.
+- 🔶 (api-surface) reka has nextStep()/prevStep() convenience navigation built on goToStep. robonen has only goToStep(step) — there is no relative step navigation method anywhere (not in context, not exposed, not in slot).
+
+**Minor gaps (4):**
+- ▫️ (features) reka derives isNextDisabled/isPrevDisabled (computed from the actual next/prev trigger's disabled attribute) and hasNext/hasPrev. robonen exposes none of these derived navigation-availability states, forcing consumers to reimplement boundary/disabled logic.
+- ▫️ (code-quality) reka's StepperSeparator wraps the real Separator primitive (SeparatorProps, decorative, orientation forwarded from root) so it inherits proper separator sizing/role semantics. robonen's StepperSeparator hardcodes a bare Primitive div with role="separator" aria-hidden="true" and does NOT reuse its own existing src/separator/Separator.vue primitive, nor accept SeparatorProps (e.g. decorative/orientation override).
+- ▫️ (api-surface) reka StepperIndicator and StepperSeparator forward extra DOM props via v-bind="props" on the Primitive (PrimitiveProps spread). robonen's StepperIndicator/Title/Description/Separator only forward :ref/:as and do not v-bind the full props object, so additional PrimitiveProps like asChild are not explicitly spread (they rely on fallthrough only).
+- ▫️ (types) reka explicitly types the default slot of StepperItem (defineSlots state) and StepperIndicator (defineSlots step). robonen does not declare defineSlots in any stepper part, so slot prop types are inferred/loose rather than documented.
+
+**Recommendations to make robonen strictly better:**
+- Add a visually-hidden live region to StepperRoot: render an element (reuse VisuallyHidden primitive) with role="status" aria-live="polite" aria-atomic="true" containing localized 'Step {value} of {total}', so screen readers announce step changes. Consider making the message customizable via a prop/slot for i18n.
+- Add nextStep() and prevStep() to StepperRootContext (built on goToStep), and add derived state: isFirstStep, isLastStep, hasNext, hasPrev, and (optionally) isNextDisabled/isPrevDisabled computed from the next/prev item's disabled status.
+- Call defineExpose on StepperRoot to expose goToStep, nextStep, prevStep, value/modelValue, total, isFirstStep, isLastStep, hasNext, hasPrev so template refs can drive the stepper imperatively (currently useForwardExpose is called but nothing is exposed).
+- Expand the Root default slot props to match/exceed reka: add nextStep, prevStep, isFirstStep, isLastStep, hasNext, hasPrev, isNextDisabled, isPrevDisabled alongside existing value/total/goToStep.
+- Rewrite StepperSeparator to wrap robonen's own Separator primitive (src/separator) with decorative=true and root orientation forwarded, and accept SeparatorProps so consumers can override orientation/decorative — instead of hardcoding role=separator aria-hidden div.
+- Add defineSlots type declarations to StepperItem (state, step), StepperIndicator (step, state), and StepperRoot for first-class slot typing.
+- v-bind the full props object on StepperIndicator/Title/Description/Separator Primitives (or otherwise ensure asChild and other PrimitiveProps are forwarded), matching reka's v-bind="props" pattern.
+- Keep robonen's advantages explicitly: retain aria-current="step", Home/End handling, root-level disabled, and Collection-based ordering — these already beat reka; do not regress them when adding the above.
+
+**Where robonen is already better:**
+- ✅ Keyboard: robonen handles Home/End to jump to first/last enabled trigger (StepperRoot.vue onTriggerKeyDown via rovingKeyToAction 'home'/'end'). reka's StepperTrigger only binds @keydown.enter.space.left.right.up.down and useArrowNavigation handles arrows only — reka has NO Home/End support.
+- ✅ Correct ARIA value: robonen sets aria-current="step" on the active StepperItem (StepperItem.vue), which is the spec-correct token. reka uses aria-current="true" (StepperItem.vue line 89), a weaker/less-specific value.
+- ✅ Ordered, deterministic registration: robonen uses Collection (useCollectionProvider/useCollectionInjector + CollectionSlot/CollectionItem) which yields DOM-ordered items via getItems(true). reka tracks triggers in a plain Set<HTMLElement> (totalStepperItems) and indexes it with Array.from — order is insertion order and its index math (totalStepperItemsArray[step], [step-2]) is brittle/off-by-one-prone.
+- ✅ Root-level disable: robonen exposes a `disabled` prop on StepperRoot that disables the whole stepper (gates goToStep, propagates into item.disabled and focusable, emits data-disabled on root). reka has no root-level disabled prop at all.
+- ✅ Performance-conscious focus traversal: robonen builds a PACKED enabled-triggers array in a single for-loop (no filter closure) and reuses shared resolveNextIndex/rovingKeyToAction helpers. reka recomputes Array.from(totalStepperItems) per keydown and runs two duplicate watch(nextTick) blocks (on modelValue and on totalStepperItemsArray) to maintain prev/next refs.
+- ✅ RTL handled through the shared roving helper (rovingKeyToAction flips delta for dir==='rtl') and direction falls back to ConfigProvider via useConfig; dir is also reflected onto the root element (:dir="direction").
+
+
+### config-provider  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** ConfigProvider.vue (declarative SFC component with slot), ScrollBodyOption type + scrollBody config field, nonce config field (+ useNonce shared composable), locale config field (+ useLocale shared composable), useDirection shared composable resolving local-or-config dir, Vue <3.5 useId fallback path
+**Parts robonen has that reka lacks:** provideAppConfig (app-level plugin provisioning), teleportTarget config field (+ Teleport.vue consumer), Pluggable UseIdFn with (deterministic?, prefix?) signature, Local useId.ts that routes through active config, Non-optional, always-resolved ConfigContext fields
+
+robonen's config-provider is a lean composable-first design (provideConfig/provideAppConfig/useConfig + a config-routed useId) that genuinely beats reka in a few areas: app-level plugin provisioning (provideAppConfig), a centralized teleportTarget knob consumed by Teleport.vue, a richer pluggable UseIdFn that forwards deterministic/prefix, and an always-resolved non-optional context that avoids reka's per-consumer fallback duplication. However reka's ConfigProvider currently carries three first-class global features robonen's config entirely lacks: scrollBody (body-scroll-lock padding/margin/--scrollbar-width tuning), nonce (app-wide CSP nonce inheritance), and locale (inherited by all date/calendar primitives). In robonen these are either hardcoded (scroll lock in @robonen/vue useBodyScrollLock) or only available as per-component props (nonce on ScrollAreaViewport, locale on CalendarRoot/DatePickerRoot), so they cannot be set once app-wide. There is also a real reactivity bug: resolveContext snapshots a MaybeRefOrGetter dir/teleportTarget into a fresh ref, so a reactive source disconnects from the context (reka's toRefs(props) keeps them live), and the default useId has no Vue<3.5 fallback that reka provides. Net: robonen is better on provisioning/teleport/useId ergonomics but has clear, fixable feature gaps (scrollBody/nonce/locale) plus a reactivity defect that prevent it from being strictly better today.
+
+
+**Major gaps:**
+- 🔶 (features) reka provides a global `scrollBody` config (boolean | ScrollBodyOption{padding,margin}) consumed by useBodyScrollLock to compute body padding/margin compensation and --scrollbar-width on lock. robonen's ConfigContext has NO scrollBody field; robonen's @robonen/vue useBodyScrollLock (used by DialogContentModal.vue:24, PopoverContentModal, MenuRootContentModal, SelectContentImpl) hardcodes scrollbar compensation and offers no global config knob to disable/customize padding vs margin per app.
+- 🔶 (features) reka provides a global `nonce` config (CSP) inherited by every primitive that injects a <style> tag, via useNonce() which falls back to context.nonce. robonen has NO nonce field in config; robonen exposes nonce only as a LOCAL prop on ScrollAreaViewport.vue:6 (`nonce?: string`) and nowhere else, so there is no app-wide CSP nonce inheritance — every style-injecting primitive must be passed nonce manually.
+- 🔶 (rtl-i18n) reka provides a global `locale` config (default 'en') inherited by all date/calendar primitives via useLocale(). robonen has NO locale in config; robonen's CalendarRoot.vue:91 and DatePickerRoot.vue default `locale='en'` as a PER-COMPONENT prop with no global inheritance, forcing the locale to be repeated on every Calendar/DatePicker/DateField instance.
+- 🔶 (performance) robonen's provideConfig does NOT keep the context reactive to a reactive source option. resolveContext() reads `toValue(options.dir)` ONCE and wraps the snapshot in a brand-new ref, so passing a ref/getter for dir or teleportTarget (which ConfigOptions types as MaybeRefOrGetter) silently disconnects future updates from the source. reka uses toRefs(props) so the provided dir/locale/scrollBody/nonce refs ARE the live prop refs and propagate parent updates automatically.
+
+**Minor gaps (3):**
+- ▫️ (ssr) reka's useId has a built-in Vue-version fallback path: when Vue 3.5's `useId` is unavailable it uses an injected `context.useId?.()` plus an internal incrementing counter so SSR hydration still works on Vue <3.5. robonen's toolkit useId (toolkit useId/index.ts:29) calls Vue's `useId()` unconditionally with no <3.5 fallback, so on older Vue it would break; the config-provider's useId override exists but the DEFAULT path has no graceful degradation.
+- ▫️ (api-surface) reka ConfigProvider sets `inheritAttrs: false` and renders a real component boundary, allowing it to be used directly in templates (e.g. <ConfigProvider dir="rtl">). robonen ships NO ConfigProvider component at all — consumers must call provideConfig() inside a setup() of a component they author, which is less ergonomic for template-only/no-build or simple app-shell usage and gives no declarative props-with-JSDoc surface.
+- ▫️ (code-quality) reka documents each prop with rich JSDoc (@defaultValue, @type, descriptions of inheritance semantics) on ConfigProviderProps, surfacing in IDE tooltips and the docs generator. robonen's ConfigOptions interface (context.ts:18-22) has no per-field JSDoc, reducing discoverability of dir/teleportTarget/useId semantics and defaults.
+
+**Recommendations to make robonen strictly better:**
+- Add `scrollBody?: MaybeRefOrGetter<boolean | ScrollBodyOption>` to ConfigOptions/ConfigContext and wire @robonen/vue's useBodyScrollLock to read it from useConfig() so the global padding/margin/--scrollbar-width behavior is configurable app-wide (match reka shared/useBodyScrollLock.ts). Define ScrollBodyOption = { padding?: boolean|number|string; margin?: boolean|number|string }.
+- Add `nonce?: MaybeRefOrGetter<string>` to config and introduce a useNonce(localNonce?) composable that resolves localNonce ?? config.nonce; have ScrollAreaViewport and every style-injecting primitive default their nonce prop to it, giving app-wide CSP nonce inheritance.
+- Add `locale?: MaybeRefOrGetter<string>` (default 'en') to config and a useLocale(localLocale?) composable; default CalendarRoot/DatePickerRoot/DateField `locale` props to the config value so locale is inherited globally instead of repeated per instance.
+- Fix the reactivity leak in resolveContext: instead of `ref(toValue(options.dir))`, preserve reactivity from the source — e.g. use `toRef`/a computed-backed ref (or accept a ref and reuse it) so a MaybeRefOrGetter source stays live, matching reka's toRefs(props) behavior. Add a test that passes a ref/getter and asserts context updates when the source changes.
+- Make the default useId degrade gracefully on Vue <3.5 (feature-detect `'useId' in vue`, fall back to an injected useId override + internal counter) as reka does, or document the hard Vue 3.5 requirement explicitly.
+- Ship an optional thin <ConfigProvider> SFC (wrapping provideConfig in setup, inheritAttrs:false, <slot/>) for declarative/template usage, keeping the composable API as the primary path. Add JSDoc (@defaultValue/@type) to each ConfigOptions field for IDE discoverability.
+- Consider exposing a forceMount/global flag and documenting that provideAppConfig shares a single context instance app-wide so per-component overrides via nested provideConfig still work.
+
+**Where robonen is already better:**
+- ✅ App-level provisioning: robonen exposes provideAppConfig(app, options) so config can be installed as a Vue plugin (app.provide) without a wrapping component. reka ONLY ships a <ConfigProvider> SFC and provideConfigProviderContext is internal/not re-exported, so reka cannot provide config at the app root without rendering a component. (robonen context.ts:43-45, index.ts re-exports provideAppConfig)
+- ✅ Composable-first API with zero render overhead: robonen's provider is pure composables (provideConfig / useConfig) with no SFC, no slot wrapper, no inheritAttrs handling. reka must mount a component whose template is <slot/>, adding a (thin) component instance to the tree. robonen integrates anywhere in setup().
+- ✅ Safer default-on-inject ergonomics: robonen's useConfig() returns a FULLY-formed ConfigContext (via resolveContext()) when no provider exists, so all fields (dir, teleportTarget, useId) are always present and typed non-optional (ConfigContext.dir: Ref<Direction>, not optional). reka's ConfigProviderContextValue makes every field optional (dir?, locale?, useId?) and each consumer (useDirection, useNonce, useLocale) must re-inject with its own ad-hoc fallback ref, duplicating defaults across files and risking drift.
+- ✅ teleportTarget config field: robonen centralizes the global teleport/portal destination in config (ConfigContext.teleportTarget, consumed by Teleport.vue:53 as `to ?? config.teleportTarget.value`). reka's ConfigProvider has NO teleport-target config; reka primitives hardcode 'body' or require per-Portal `to` props.
+- ✅ Typed pluggable useId with prefix + deterministic passthrough: robonen's UseIdFn signature is (deterministic?, prefix?) => ComputedRef<string> and the local useId.ts forwards both args through the active config (useId.ts:11-16). reka's ConfigProvider.useId is `() => string` (no args), so a user-injected useId cannot receive deterministic id or prefix.
+- ✅ useConfig() throws a descriptive VueToolsError via useContextFactory only on genuinely-absent symbol injection but always supplies a resolved fallback, avoiding the silent-undefined-field footguns reka's optional context invites.
+
+
+### avatar  —  _robonen-better-with-gaps_
+
+
+Both libraries implement the same three parts (Root, Image, Fallback) with identical loading-status state machines ('idle'|'loading'|'loaded'|'error') shared via context, so there is full structural parity and no missing sub-components on either side. robonen is genuinely better in several areas: it puts data-status on the Root for styling, its Fallback delayMs logic is reactive and self-correcting (reka's canRender latches once and never resets), it guards against stale in-flight image loads when src changes, it has an explicit SSR branch, and it gracefully handles missing/empty src. However robonen has real gaps versus reka, mostly concentrated in AvatarImage: it does not forward referrerPolicy or crossOrigin (major — affects CORS, privacy, and cache reuse between the off-DOM preload and the displayed img), it lacks reka's synchronous cached-image detection so cached avatars flash the fallback, it doesn't validate naturalWidth>0 before declaring 'loaded', it omits role=\"img\", it has no default slot on the image, it uses v-if (remount) instead of v-show, and it surfaces loading status only via a prop callback rather than a Vue emit. None of these are structural; all are additive fixes. With the referrerPolicy/crossOrigin forwarding, cached/naturalWidth detection, role=\"img\", a slot, v-show, and a loadingStatusChange emit added, robonen would be strictly better than reka while retaining its existing advantages. Verdict: robonen-better-with-gaps.
+
+
+**Major gaps:**
+- 🔶 (api-surface) AvatarImage does not forward referrerPolicy. reka exposes a referrerPolicy prop that is applied both to the preloading Image (utils.ts:56-57 img.referrerPolicy = referrerPolicy.value) and to the rendered element (AvatarImage.vue:54 :referrerpolicy). robonen's AvatarImageProps has no referrerPolicy, so privacy-sensitive avatar requests cannot set Referrer-Policy, and the displayed <img> may issue a second request with different policy than the preload.
+- 🔶 (api-surface) AvatarImage does not forward crossOrigin. reka exposes crossOrigin applied to the preload Image (utils.ts:58-59) and the rendered img (AvatarImage.vue:55 :crossorigin). Because robonen preloads via `new Image()` with no crossOrigin and then renders a separate <img> (also without crossOrigin), CORS-required avatars (canvas tainting, credentialed CDNs) cannot be configured, and the displayed image may not reuse the preload cache entry.
+- 🔶 (performance) No synchronous cached-image detection. reka's resolveLoadingStatus returns 'loaded' immediately when image.complete && image.naturalWidth > 0 (utils.ts:17), so a browser-cached avatar shows instantly with no fallback flash. robonen always calls setStatus('loading') then waits for an async onload (AvatarImage.vue:50-59), so even a fully cached image produces a fallback flash before swapping in the image.
+
+**Minor gaps (5):**
+- ▫️ (edge-cases) No naturalWidth validation of a 'loaded' image. reka requires image.naturalWidth > 0 to count as loaded (utils.ts:17), rejecting broken/zero-dimension responses that still fire onload. robonen treats any onload as 'loaded' (AvatarImage.vue:53-54) regardless of dimensions, so a degenerate image can suppress the fallback.
+- ▫️ (accessibility) AvatarImage sets no explicit role. reka renders role="img" on the image Primitive (AvatarImage.vue:50), which preserves image semantics even when `as`/asChild changes the element to a non-<img> tag. robonen renders a bare Primitive with as='img' and no role (AvatarImage.vue:76-82); if a consumer sets as to a span/div the accessibility role is lost.
+- ▫️ (features) AvatarImage renders no default slot. reka's AvatarImage forwards a <slot/> (AvatarImage.vue:57), allowing content/children inside the image element (relevant when as/asChild renders a non-void wrapper). robonen's AvatarImage template (AvatarImage.vue:76-82) is a self-closing Primitive with no slot, so it cannot host children.
+- ▫️ (performance) Image visibility uses v-if (unmount) instead of v-show. reka keeps the <img> mounted and toggles visibility with v-show display:none (AvatarImage.vue:49), so the actual <img> participates in the browser's image pipeline and is not torn down/recreated on status changes. robonen unmounts the img entirely with v-if (AvatarImage.vue:79), meaning the displayed image element is created only after the off-DOM preload completes, increasing the chance of a separate fetch and a remount.
+- ▫️ (api-surface) Loading status is exposed as a prop callback only, not a Vue emit. reka defines AvatarImageEmits loadingStatusChange via defineEmits (AvatarImage.vue:6-12,28,39), so consumers can use @loading-status-change and it integrates with Vue's emit tooling/types. robonen only offers an onLoadingStatusChange prop callback (AvatarImage.vue:10,20,31); there is no defineEmits, so template @-handler ergonomics and emit typing differ from the ecosystem convention.
+
+**Recommendations to make robonen strictly better:**
+- Add referrerPolicy and crossOrigin props to AvatarImageProps and apply them both to the preloading `new Image()` (img.referrerPolicy / img.crossOrigin before setting src) and to the rendered <img> Primitive (:referrerpolicy / :crossorigin), matching reka utils.ts:56-59 and AvatarImage.vue:54-55, so the displayed image reuses the preload cache and CORS/privacy can be configured.
+- Detect already-loaded/cached images synchronously to avoid a fallback flash: when creating the loader Image (or by reading the rendered img), if img.complete && img.naturalWidth > 0 set status to 'loaded' immediately instead of unconditionally going through 'loading' (mirror reka resolveLoadingStatus, utils.ts:14-17).
+- Require img.naturalWidth > 0 in the onload handler before treating the image as 'loaded' (AvatarImage.vue:53-54), so zero-dimension/broken-but-onload responses fall through to 'error' and the fallback stays visible.
+- Add role="img" to the AvatarImage Primitive (AvatarImage.vue:76-82) so image semantics survive when consumers override `as`/use as='template'.
+- Add a default <slot/> to AvatarImage's Primitive so children can be rendered when `as` is a non-void element (parity with reka AvatarImage.vue:57).
+- Switch the image render from v-if to v-show (keep the <img> mounted, toggle display) to avoid remounting the displayed element and to let the browser image pipeline drive load detection, as reka does (AvatarImage.vue:49).
+- Introduce a defineEmits-based loadingStatusChange emit on AvatarImage in addition to (or instead of) the onLoadingStatusChange prop, so consumers get idiomatic @loading-status-change handlers and proper emit typing (reka AvatarImage.vue:6-12).
+- Consider preserving robonen's strengths while adopting the above: keep data-status on Root, the self-correcting delayMs fallback, the in-flight load cancellation guards, and the explicit SSR branch — these are real advantages over reka and should not be regressed.
+
+**Where robonen is already better:**
+- ✅ Root exposes a data-status attribute reflecting imageLoadingStatus (AvatarRoot.vue:27 :data-status="imageLoadingStatus"), giving consumers a CSS/style hook (e.g. [data-status=loading]). reka's AvatarRoot.vue renders no status attribute at all.
+- ✅ Fallback delay logic is reactive and self-correcting: on every status change it re-evaluates, re-hides when the image becomes 'loaded' (AvatarFallback.vue:26-44 sets canShow=false and clears the timer), and re-arms the delay if status reverts. reka's AvatarFallback canRender (AvatarFallback.vue:24,26-36) only ever latches true once via a one-shot timer and is never reset when the image later loads or src changes.
+- ✅ AvatarImage cancels stale in-flight loads via identity guards (AvatarImage.vue:53-57 `if (currentImage === img)`) so a rapid src change cannot let an older image's onload/onerror clobber the newer status. reka relies on watchEffect cleanup removing listeners but reuses a single persistent Image element (utils.ts:22-31), which is functional but less explicit about race ordering.
+- ✅ Explicit SSR branch in the loader: when typeof window === 'undefined' robonen sets status to 'loading' and skips constructing an Image (AvatarImage.vue:46-49). reka's useImageLoadingStatus guards new window.Image() with isClient (utils.ts:27) but still computes resolveLoadingStatus against a null image, which is fine but robonen's intent is clearer.
+- ✅ AvatarImage explicitly emits 'error' when src is falsy/undefined (AvatarImage.vue:42-44), and the src prop is optional, so passing no/empty src cleanly shows the fallback. reka types src as required (AvatarImage.vue:14 `src: string`).
+- ✅ onBeforeUnmount detaches the loader image's onload/onerror and drops the reference (AvatarImage.vue:64-70), avoiding any lingering callback firing after unmount.
+
+
+### visually-hidden  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput.vue (form-integration input that serializes primitive/array/object values into native hidden inputs), VisuallyHiddenInputBubble.vue (single native input that fires synthetic input/change events via the native HTMLInputElement.prototype value setter, plus checked/required/disabled props)
+
+Robonen's core VisuallyHidden display component is at parity-or-better than reka's on the pure visual-hiding job: it has the same correct sr-only style block (including reka's #2127 container-scroll fix), it forwards the inner element/exposed API via useForwardExpose (which reka's VisuallyHidden does not), it emits a richer data-visually-hidden attribute, and crucially its default 'focusable' mode keeps content announced — fixing reka's footgun where the default feature='focusable' silently sets aria-hidden='true' and hides the label from screen readers. The decisive gap is scope: reka's VisuallyHidden package also ships VisuallyHiddenInput + VisuallyHiddenInputBubble, a reusable native-form-integration layer (value serialization for primitives/arrays/objects, required+empty-array handling, checked/required/disabled props, and programmatic value sync via the native prototype setter + synthetic input/change events) that is consumed across ~10 reka form primitives. Robonen ships none of that here and instead hand-rolls inline hidden inputs per primitive (e.g. CheckboxRoot). Robonen also lacks a hidden-but-focusable proxy mode (reka separates aria-hidden from tabindex), lacks an asChild boolean on the component, and has a misleading JSDoc on the feature prop. To be strictly better, robonen should add the form-input component pair, separate the focus/a11y-tree concerns, add asChild, and fix the prop docs.
+
+
+**Major gaps:**
+- 🔶 (forms) Reka ships a full native-form-integration component pair (VisuallyHiddenInput + VisuallyHiddenInputBubble) inside the VisuallyHidden package; robonen's visually-hidden package ships only the display component with no form-input analogue.
+- 🔶 (forms) Reka's input serializes complex values: primitives, arrays with `name[index]` keys, arrays-of-objects with `name[index][key]`, and plain objects with `name[key]`, rendering one native input per leaf. Robonen has no equivalent value-serialization helper.
+- 🔶 (forms) Reka programmatically sets the input value using the native HTMLInputElement.prototype 'value' setter and dispatches bubbling synthetic input + change events, so third-party form libraries / event listeners detect changes. Robonen has no such mechanism in this package.
+
+**Minor gaps (5):**
+- ▫️ (edge-cases) Reka handles the 'required + empty array' edge case by still rendering one input so native HTML required validation fires on empty multi-selects.
+- ▫️ (forms) Reka supports a `checked` prop on the bubble input (for checkbox/radio submission) distinct from `value`. Robonen's package exposes nothing of the sort.
+- ▫️ (api-surface) Reka provides a distinct 'hidden-but-focusable proxy' mode (feature='focusable' => aria-hidden=true, element stays in tab/focus order). Robonen has no mode that keeps the element focusable while removing it from the accessibility tree; robonen's two modes are 'focusable' (announced, in tab order) and 'hidden' (aria-hidden AND tabindex=-1), which conflates a11y-tree removal with focus-order removal.
+- ▫️ (api-surface) Reka's VisuallyHidden binds :as-child='asChild', so consumers can merge the hidden styles onto an existing child element/component (e.g. BubbleSelect.vue uses `<VisuallyHidden as-child>`). Robonen's VisuallyHiddenProps/Primitive expose no asChild boolean for this component.
+- ▫️ (code-quality) JSDoc on robonen's `feature` prop is inaccurate/misleading: it is documented as 'Exclude the element from the accessibility tree entirely ... @default false' even though the type is 'focusable' | 'hidden' and the real default is 'focusable'. Reka's prop has no such doc mismatch.
+
+**Recommendations to make robonen strictly better:**
+- Add a VisuallyHiddenInput (+ inner bubble) component to robonen's visually-hidden package mirroring reka: serialize primitive/array/array-of-object/object values into one native hidden input per leaf using `name[index][key]` conventions, support name/value/checked/required/disabled props, and handle the required+empty-array case by still rendering one input.
+- Implement programmatic value sync in that input using the native HTMLInputElement.prototype 'value' setter plus bubbling synthetic 'input' and 'change' events, so external form libraries detect changes (port reka VisuallyHiddenInputBubble.vue watch logic).
+- Refactor robonen's form primitives (CheckboxRoot, Switch, RadioGroup, Slider, ToggleGroup, Select, TagsInput, PinInput) to reuse the new VisuallyHiddenInput instead of hand-rolling inline <input> elements, eliminating duplicated ad-hoc hidden-input markup.
+- Separate the two orthogonal concerns into distinct/composable behavior so a hidden-but-focusable proxy is expressible: e.g. keep 'focusable' (announced, in tab order) and 'hidden' (aria-hidden + tabindex=-1), but add a third mode or boolean so an element can be aria-hidden while staying focusable (reka's focus-proxy use case).
+- Add an asChild boolean to VisuallyHiddenProps (or document the as='template' equivalent) so consumers can merge sr-only styles onto an existing child element/component the way reka's BubbleSelect uses `<VisuallyHidden as-child>`.
+- Fix the JSDoc on the `feature` prop: it currently says '@default false' / 'exclude from accessibility tree entirely' for a 'focusable' | 'hidden' union whose real default is 'focusable'. Document each enum value's exact aria-hidden/tabindex effect.
+- Export the new VisuallyHiddenInput from src/visually-hidden/index.ts (and consider a top-level export) so form integration is reusable by consumers, matching reka VisuallyHidden/index.ts.
+
+**Where robonen is already better:**
+- ✅ Default feature='focusable' does NOT set aria-hidden, so the common screen-reader-only-label use case (the one shown in reka's own docs: <VisuallyHidden>Settings</VisuallyHidden>) actually gets announced. Reka's default feature='focusable' sets aria-hidden='true' (VisuallyHidden.vue:19), meaning the naive default use of reka's component is NOT announced to screen readers unless the author explicitly passes feature='fully-hidden' — a real footgun that robonen avoids.
+- ✅ Forwards the underlying element/exposed API to consumers via useForwardExpose() + :ref='forwardRef' (VisuallyHidden.vue:20,41). Reka's VisuallyHidden.vue does NOT call useForwardExpose / forwardRef, so a parent placing a template ref on reka's VisuallyHidden does not transparently get the inner $el/exposed API.
+- ✅ Exposes a single readable data-visually-hidden attribute carrying the active feature value ('focusable' | 'hidden') for styling/testing hooks (VisuallyHidden.vue:46). Reka only emits a value-less data-hidden='' and only for the fully-hidden case (VisuallyHidden.vue:20), so reka's focusable mode has no styling/test hook at all.
+- ✅ Identical, correct sr-only style block including the top/-1px / left/-1px container-scroll fix from reka issue #2127 — robonen has parity on the styling itself with no regression.
+
+
+### alert-dialog  —  _robonen-better-with-gaps_
+
+
+Both libraries build alert-dialog as a thin specialization of Dialog: force modal=true, set role='alertdialog', block outside-pointer/interaction dismissal, and redirect open auto-focus to the Cancel button. robonen reaches functional parity on the load-bearing behaviors — role='alertdialog', modal focus trap, focus return to trigger (via FocusScope useAutoFocus restoring the previously-focused element), body scroll lock, aria-labelledby/aria-describedby wiring, and blocking of outside-click/escape-driven dismissal (it prevents both pointerDownOutside and focusOutside, equivalent to reka's interactOutside.prevent). robonen is genuinely better on dependency hygiene (defineModel vs vueuse useVModel) and adds data-alert-dialog-* hooks reka lacks. However, several real gaps remain. The most significant: robonen focuses Cancel by global document.querySelector instead of a per-instance context, which is incorrect for nested/multiple alert dialogs (reka uses provide/inject + the cancel element's own ref); robonen omits the dev-mode missing-Title/Description accessibility warning reka ships; and robonen does not call useForwardExpose on any alert-dialog part, so template refs do not resolve. Minor gaps: cancel focus without preventScroll, missing { close } slot prop, and an incomplete public type-export surface (no AlertDialogEmits, no per-part Props aliases for Description/Overlay/Portal/Title/Trigger). Files: /Users/robonen/Projects/tools/vue/primitives/src/alert-dialog/AlertDialogContent.vue, AlertDialogCancel.vue, AlertDialogRoot.vue, index.ts. Verdict: robonen is better in places but not yet strictly better — fix the cancel-focus context, the a11y dev warning, and ref forwarding to close the gap.
+
+
+**Major gaps:**
+- 🔶 (edge-cases) Cancel auto-focus uses a global document.querySelector('[data-alert-dialog-content]') then querySelector('[data-alert-dialog-cancel]'), which returns the FIRST match in document order. With nested or multiple simultaneously-mounted alert dialogs, the wrong dialog's cancel button (or none) gets focused.
+- 🔶 (accessibility) No dev-mode accessibility warning when an alert dialog is missing a Title or Description. An alertdialog with no accessible name silently ships.
+
+**Minor gaps (5):**
+- ▫️ (accessibility) Cancel button is focused without preventScroll, so opening the alert dialog can scroll the page/container to the cancel button.
+- ▫️ (api-surface) No per-part ref forwarding/expose on AlertDialog parts. Consumers using template refs on AlertDialogContent/Action/Cancel/Root cannot reach the underlying element.
+- ▫️ (api-surface) Default slot of AlertDialogRoot exposes only { open }, missing the { close } slot prop.
+- ▫️ (types) No dedicated AlertDialog* type re-exports for several parts and no AlertDialogEmits type. Consumers must import DialogDescriptionProps/DialogOverlayProps/etc. from the dialog package and have no AlertDialogEmits alias.
+- ▫️ (api-surface) AlertDialogRoot does not forward arbitrary DialogRoot emits as a typed surface; it only wires update:open via defineModel.
+
+**Recommendations to make robonen strictly better:**
+- Replace the document.querySelector-based cancel lookup in AlertDialogContent.vue with a provide/inject context (mirror reka: an AlertDialogContentContext with onCancelElementChange, and have AlertDialogCancel.vue report its own currentElement via useForwardExpose + onMounted). This fixes nested/multiple-dialog focus correctness — the most important gap.
+- Change cancel.focus() to cancel.focus({ preventScroll: true }) to avoid scroll jumps on open.
+- Add useForwardExpose() to AlertDialogRoot/Content/Action/Cancel and bind :ref="forwardRef" so template refs reach the underlying elements (AlertDialogCancel especially needs its element ref for the context approach above).
+- Add a dev-only accessibility warning (NODE_ENV guard) in the Dialog content layer warning when no Title (aria-labelledby) or no Description (aria-describedby) is present, with a hint to use VisuallyHidden — port reka's useWarning. This benefits both Dialog and AlertDialog.
+- Expose { open, close } from AlertDialogRoot's default slot to match reka and improve ergonomics (e.g. <slot :open="openModel" :close="() => openModel = false" />).
+- Export an AlertDialogEmits type alias and dedicated AlertDialog{Description,Overlay,Portal,Title,Trigger}Props re-exports from alert-dialog/index.ts so the public type surface is complete and self-contained.
+- Consider forwarding DialogRoot emits generically in AlertDialogRoot (or document that update:open is the only emit) to future-proof the emit surface.
+
+**Where robonen is already better:**
+- ✅ Cleaner v-model: robonen AlertDialogRoot uses defineModel('open') with no external dependency, whereas reka relies on @vueuse/core's useVModel inside DialogRoot. Same controlled/uncontrolled support with a smaller dependency footprint.
+- ✅ Adds stable styling/test hooks reka lacks: robonen stamps data-alert-dialog-content, data-alert-dialog-cancel, and data-alert-dialog-action on the rendered parts (AlertDialogContent.vue, AlertDialogAction.vue, AlertDialogCancel.vue). Reka emits none of these, so consumers cannot target the alert-dialog parts by attribute.
+- ✅ Explicit, well-typed dismissal event ordering: robonen's DismissableLayer.createInteractEvent emits interactOutside first and lets it cancel before pointerDownOutside/focusOutside, and AlertDialogContent prevents both pointerDownOutside and focusOutside — functionally blocking every outside-dismiss path, equivalent to reka's @interact-outside.prevent + @pointer-down-outside.prevent.
+- ✅ AlertDialogContentProps is Omit<DialogContentProps,'role'> so a consumer cannot accidentally override role='alertdialog'; reka leaves role overridable in the prop type (AlertDialogContentProps extends full DialogContentProps) and only pins it in the template.
+
+
+### toggle  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** VisuallyHiddenInput (hidden form-bubble checkbox rendered inside Toggle)
+
+Both are single-component primitives (Toggle.vue + index.ts; no sub-parts). robonen is genuinely better on interaction robustness for non-button hosts: it adds Space/Enter keyboard activation, tabindex (0/-1) management, aria-disabled, and a logic-level disabled guard — all of which reka's Toggle entirely lacks (reka relies solely on the native <button>, so reka rendered as as='div'/asChild div is keyboard-inoperable and still toggles when 'disabled'). However, robonen is missing reka's form integration: reka extends FormFieldProps (name/required) and renders a VisuallyHiddenInput checkbox so the toggle participates in native form submission (SSR-safe via useFormControl), and it suppresses that input when nested in a ToggleGroup. robonen has no name/required props, no hidden input, no useFormControl, and no toggle-group context injection in the standalone Toggle. reka also exposes a richer slot scope (modelValue/state/disabled vs robonen's pressed-only) and exports an emits/state type. Net: robonen wins on a11y/keyboard for non-native hosts but has a real, fixable form-integration gap. Verdict: robonen-better-with-gaps.
+
+
+**Major gaps:**
+- 🔶 (forms) Form integration is entirely missing in robonen. reka's Toggle accepts FormFieldProps (name, required) and, when standalone in a form, renders a <VisuallyHiddenInput type='checkbox' :name :value=modelValue :required> so the toggle's value is submitted with the surrounding <form> as a name/value pair (and works without JS for SSR). robonen's ToggleProps only extends PrimitiveProps and has no name/required props and renders no hidden input, so a robonen Toggle contributes nothing to form submission.
+- 🔶 (ssr) No useFormControl-style detection of an enclosing <form>. reka uses useFormControl(currentElement) (computed Boolean(unrefElement(el)?.closest('form'))) so the hidden input is only rendered when actually inside a form, with an SSR-safe default of true. robonen has neither the composable nor the behavior.
+
+**Minor gaps (4):**
+- ▫️ (features) ToggleGroup awareness is missing. reka's standalone Toggle injects the ToggleGroup root context (injectToggleGroupRootContext(null)) and suppresses its own hidden form input when nested in a ToggleGroup (so the group owns the form value). robonen's Toggle has no injection of toggle-group context; a robonen Toggle placed inside a ToggleGroup would have no shared awareness (robonen's ToggleGroupItem is a separate component that does not reuse Toggle, confirmed by ToggleGroupItem.vue importing useToggleGroupContext directly).
+- ▫️ (api-surface) Slot scope exposes fewer props. reka's default slot exposes { modelValue, pressed, state ('on'|'off'), disabled }, letting consumers render based on disabled/state without recomputing. robonen's slot only exposes { pressed } — no disabled, no data-state string.
+- ▫️ (types) No exported emits type / explicit update event type. reka exports ToggleEmits ({ 'update:modelValue': [value: boolean] }) and a DataState type for consumers. robonen relies on defineModel('pressed') so the emit is 'update:pressed' (different name from reka's 'update:modelValue') and exports no emits/state type from index.ts (only ToggleProps).
+- ▫️ (types) modelValue typing allows null in reka (modelValue?: boolean | null) accommodating cleared/indeterminate-ish external state; robonen's model is strictly boolean | undefined.
+
+**Recommendations to make robonen strictly better:**
+- Add form integration to match reka: extend ToggleProps with FormFieldProps (name?: string; required?: boolean), add a useFormControl composable (computed Boolean(currentElement.closest('form')) with SSR default true) to @robonen/vue or src/utils, and build a VisuallyHiddenInput (hidden <input type='checkbox' :name :value=pressed :required>) bubble component. Render it in Toggle when isFormControl && name && no enclosing toggle-group, mirroring reka's `v-if="isFormControl && name && !toggleGroupContext"`. Use currentElement from the existing useForwardExpose return (already available).
+- Make standalone Toggle aware of the toggle-group context: inject the toggle-group context (with a null default) and suppress the hidden form input when nested, so the group can own the submitted value.
+- Enrich the default slot scope to expose { pressed, disabled, state: 'on'|'off' } (and optionally modelValue alias) so consumers can style/branch without recomputation. Export a DataState ('on'|'off') type.
+- Export an emits type from index.ts. Decide on v-model naming: reka uses 'modelValue'/'update:modelValue'. If cross-compat with reka matters, consider supporting/standardizing the model name; at minimum export ToggleEmits for the chosen 'update:pressed' event.
+- Consider widening the model type to boolean | null to tolerate externally-cleared controlled values like reka, or document the stricter boolean contract intentionally.
+- Add an aria-label/labeling note or test in docs since a toggle button needs an accessible name (reka's tests mount with aria-label='Toggle italic' and run axe); add a vitest-axe accessibility assertion to robonen's Toggle test to guard a11y regressions.
+
+**Where robonen is already better:**
+- ✅ Non-button host support is materially better. For as!='button', robonen synthesizes keyboard activation (onKeydown handles ' ' and 'Enter' with event.preventDefault + toggle), sets tabindex (0 enabled / -1 disabled), and sets aria-disabled. reka's Toggle.vue has NO @keydown handler, NO tabindex, and NO aria-disabled at all (grep confirms none present) — so a reka Toggle rendered as a non-button (as='div' / asChild on a div) is keyboard-inoperable and not properly exposed to AT. robonen explicitly skips synthesizing keys for native button (if (as === 'button') return) to avoid double-activation, which is correct.
+- ✅ Disabled is enforced in logic, not just via the native attribute. robonen's toggle() does `if (disabled) return` before flipping state, so a disabled non-button host (as='div', which has no native :disabled effect) still cannot be toggled by click or key. reka binds @click="togglePressed" unconditionally and relies solely on the native :disabled attribute; for as='div' the disabled attribute is inert, so a disabled reka Toggle rendered as a div WOULD still toggle on click. robonen closes this edge case (covered by its test 'does not toggle on keyboard when disabled (as=div)').
+- ✅ Controlled/uncontrolled handled with the native Vue 3 defineModel('pressed') API + a local ref fallback (get: v => v ?? localPressed.value). This is lighter than reka's dependency on @vueuse/core useVModel and avoids the passive-cast hack `(props.modelValue === undefined) as false`.
+- ✅ Slot prop naming uses `pressed` which matches the ARIA semantics of a toggle button (aria-pressed) and is concise.
+- ✅ Toggle button only emits the toggle on actual state change path and keeps the click/keydown separation explicit and readable.
+
+
+### focus-scope  —  _robonen-better-with-gaps_
+
+
+robonen's focus-scope is architecturally cleaner than reka's and matches its full public API (props loop/trapped, emits mountAutoFocus/unmountAutoFocus, Tab/Shift+Tab loop+trap keyboard handling, autofocus-on-mount, focus-return-on-unmount, focusin/focusout trap, MutationObserver re-focus, nested pause/resume stack, as/as=template passthrough, tabindex=-1, preventDefault on both autofocus events). It is genuinely better in three concrete ways: it avoids reka's array-mutating candidates.reverse() via a dedicated findLastVisible; it correctly removes the mount-autofocus listener (reka leaks it by passing a fresh arrow to removeEventListener); and it factors logic into reusable, independently-tested platform utilities with a stronger useForwardExpose. However, three real behavioral gaps keep it from being strictly better. (1) MAJOR: useFocusTrap's handleMutations lacks reka's two guards (null lastFocusedElement and anyNodesRemoved), so robonen steals focus to the container on pure node additions or before anything is focused (el.contains(null) is false). (2) MAJOR: unmount focus restore + stack.remove run synchronously in robonen vs reka's setTimeout(0) deferral, allowing focus to land on the wrong element during rapid nested scope unmount/mount. (3) MINOR: no explicit isClient SSR guard, and the stack is a bare module-level array rather than a true global singleton, so it can fork across duplicated module copies. There are no sub-component or part differences — FocusScope is a single component in both libraries; focus guards/hideOthers are Dialog-level concerns in both. Fixing the three gaps (notably the two MAJOR ones) makes robonen strictly better.
+
+
+**Major gaps:**
+- 🔶 (edge-cases) Unmount focus restore is synchronous in robonen vs reka's deferred setTimeout(0), risking focus landing on the wrong element during rapid nested scope unmount/remount.
+- 🔶 (edge-cases) useFocusTrap handleMutations lacks reka's null-lastFocusedElement and anyNodesRemoved guards, so it steals focus to the container on pure node additions or before any element is focused (el.contains(null)===false triggers focus(el)).
+
+**Minor gaps (2):**
+- ▫️ (ssr) No explicit isClient/SSR guard on the trap effect; relies solely on watchPostEffect not flushing server-side.
+- ▫️ (code-quality) Focus-scopes stack is a bare module-level array rather than a global singleton (reka uses createGlobalState), so it can fork across duplicated module copies and break nested pause/resume.
+
+**Recommendations to make robonen strictly better:**
+- Add reka's two guards to useFocusTrap handleMutations: pass MutationRecord[], return early if lastFocusedElement.value is null, and only refocus when a node was actually removed (mutations.some(m => m.removedNodes.length > 0)).
+- Defer unmount focus restore + stack.remove to setTimeout(0) in useAutoFocus onCleanup to match reka and avoid focus races during nested scope unmount/mount.
+- Add explicit client guards to useFocusTrap/useAutoFocus effects for SSR robustness instead of relying only on watchPostEffect timing.
+- Make the focus-scopes stack a true global singleton (createGlobalState or globalThis symbol) so nested pause/resume survives module duplication; optionally make it a ref for parity.
+- Add tests: trap must not steal focus on node additions, must not refocus before anything is focused, and rapid nested mount/unmount must restore to the correct previouslyFocusedElement.
+
+**Where robonen is already better:**
+- ✅ robonen avoids reka's in-place candidates.reverse() array mutation in getTabbableEdges by using a dedicated backward-iterating findLastVisible.
+- ✅ robonen correctly removes the AUTOFOCUS_ON_MOUNT listener (same handler reference in dispatchCancelableEvent); reka leaks it by calling removeEventListener with a new arrow function.
+- ✅ robonen decomposes into reusable useFocusTrap/useAutoFocus composables + an independently unit-tested @robonen/platform/browsers focus toolkit, vs reka inlining everything in the SFC.
+- ✅ robonen's useForwardExpose skips #text/#comment nodes and forwards the child's exposed API + $el, more robust for as='template' passthrough than reka's simpler version.
+
+
+### progress  —  _robonen-better-with-gaps_
+
+
+Both libraries implement Progress as a two-part Root + Indicator primitive with role=progressbar, aria-valuemin/max/now, data-state (indeterminate|loading|complete), and data-value/data-max — there is a direct reka analogue and subcomponent parity (no extra parts on either side; Progress has no keyboard/focus/RTL/form concerns). robonen is genuinely better in several places: a more correct `complete` state (`v >= max` vs reka's strict `===`), a richer slot scope on BOTH Root and Indicator (reka's Indicator exposes nothing and its Root only `modelValue`), lighter reactivity (toRef passthroughs vs reka's two useVModels + two immediate watchers), and cleaner non-optional context types. However robonen has real gaps to close to be strictly better: (1) ACCESSIBILITY — robonen exposes only one label function feeding `aria-valuetext` and never sets `aria-label`, while reka has BOTH `getValueLabel`->aria-label and `getValueText`->aria-valuetext, so reka's progressbar gets a proper accessible name and robonen's does not (major); (2) EDGE CASES — reka validates and self-corrects bad `value`/`max` (NaN, out-of-range, max<=0) with descriptive dev errors, while robonen passes everything through unguarded (max=0 yields Infinity% / aria-valuemax=0) (major); (3) reka guards `aria-valuenow` with an isNumber typeguard whereas robonen only filters null/undefined (minor); (4) reka supports passive/uncontrolled v-model and emits `update:modelValue`, while robonen's `modelValue` is a read-only passthrough that never emits, breaking the v-model naming contract (minor — though reka's emit type is itself buggy). Fixing the dual-label ARIA and adding input validation are the two changes required for robonen to be strictly better.
+
+
+**Major gaps:**
+- 🔶 (accessibility) reka exposes a SECOND accessible-label function and a distinct ARIA attribute. reka has both `getValueLabel` -> `aria-label` AND `getValueText` -> `aria-valuetext` (ProgressRoot.vue:23-27, 150-151). robonen has only `getValueLabel`, and it feeds `aria-valuetext` (ProgressRoot.vue:11,57). So robonen renders NO `aria-label` on the progressbar and gives consumers no way to set the accessible name of the widget separately from the value text. The default reka label `"50%"` becomes the accessible NAME of the progressbar; robonen's becomes only valuetext, leaving the widget effectively unnamed for screen readers unless the consumer supplies their own aria-label/aria-labelledby.
+- 🔶 (edge-cases) reka validates and self-corrects bad inputs at runtime with developer-facing errors. `validateValue` rejects NaN / out-of-range / negative values and coerces to null with a descriptive `console.error` (ProgressRoot.vue:45-60, watched at :105-115), and `validateMax` rejects non-positive/NaN max and falls back to 100 with an error (ProgressRoot.vue:62-72, watched at :117-125). robonen does NO validation: a negative value, NaN, max<=0, or value>max are passed straight through to aria attributes and `getValueLabel` (which divides by max). With max=0 robonen's default label computes `value/0` -> `Infinity%` and aria-valuemax=0; with NaN it emits `aria-valuenow` of NaN. robonen has no dev warnings for misuse.
+
+**Minor gaps (2):**
+- ▫️ (api-surface) reka supports controlled + uncontrolled (passive v-model) operation and emits `update:modelValue`. reka uses `useVModel(props,'modelValue',emit,{passive: props.modelValue===undefined})` (ProgressRoot.vue:96-98) and declares the emit (ProgressRoot.vue:8). robonen's `modelValue` is read-only (toRef passthrough, ProgressRoot.vue:31) with NO emit declared, so although the prop is named `modelValue` it cannot be used as a true two-way `v-model` and never fires `update:modelValue`. A progress bar is typically write-from-parent so this is low impact, but it is a missing API surface vs reka and breaks the `v-model` naming contract.
+- ▫️ (accessibility) reka guards `aria-valuenow` against non-number values via an `isNumber` typeguard: `:aria-valuenow="isNumber(modelValue) ? modelValue : undefined"` (ProgressRoot.vue:43,149). robonen uses `value ?? undefined` (ProgressRoot.vue:57), which only filters null/undefined — if a consumer passes `NaN` or a numeric string, robonen will emit an invalid `aria-valuenow`. (reka also still emits it but additionally validates/corrects upstream.)
+
+**Recommendations to make robonen strictly better:**
+- Add a second accessible-name pathway: introduce a `getValueLabel` -> `aria-label` mapping AND keep a separate `getValueText` -> `aria-valuetext`, matching reka. Concretely, rename robonen's current `getValueLabel` to `getValueText` (it currently feeds aria-valuetext), and add a new `getValueLabel?: (value, max) => string | undefined` bound to `:aria-label`, so the progressbar has a real accessible name for screen readers and consumers can customize both independently.
+- Add runtime validation + dev warnings mirroring reka's `validateValue`/`validateMax`: clamp/guard against NaN, value<0, value>max, and max<=0 (the last is critical because the default `getValueLabel` divides by `max` -> produces `Infinity%`/division issues, and `aria-valuemax=0` is invalid). Emit `console.error`/`@robonen/vue` warn in dev (tree-shaken in prod).
+- Harden `aria-valuenow` to only render for finite numbers: change `:aria-valuenow="value ?? undefined"` to use an `isNumber`/`Number.isFinite` guard so NaN or non-numeric inputs do not produce invalid ARIA. Apply the same finite-number guard inside the default `getValueText` so the percentage is only computed for valid numbers.
+- Decide and document the v-model story: either (a) declare `defineEmits<{ 'update:modelValue': [number | null] }>()` and make `modelValue` a true two-way model via `defineModel`/useVModel so the `modelValue` name is honest, or (b) rename the prop to `value` to signal it is one-way and avoid the broken v-model contract. Note reka's own emit type is buggy (`string[]`), so robonen can leapfrog by typing it correctly as `[number | null]`.
+- Consider passing the `getValueText`/`getValueLabel` strings into the slot scope as well (e.g. `:valueText`) so consumers rendering custom labels inside the bar do not have to recompute the percentage; this would extend robonen's already-superior slot scope.
+- Keep robonen's superior `v >= max` complete logic and richer slot scope — do not regress to reka's strict-equality `complete` check.
+
+**Where robonen is already better:**
+- ✅ robonen's `complete` state is more robust: it uses `v >= max` (ProgressRoot.vue:38) so a value that overshoots the max (e.g. 105/100) still reports `complete`. reka uses strict equality `modelValue.value === max.value` (ProgressRoot.vue:131), so an overshoot value would incorrectly report `loading` and never reach `complete`.
+- ✅ robonen passes a richer default slot scope: `{ value, max, state }` on both Root (ProgressRoot.vue:63) and Indicator (ProgressIndicator.vue:27). reka's Root slot exposes only `{ modelValue }` (ProgressRoot.vue:157-159) and its Indicator slot exposes nothing at all (ProgressIndicator.vue:25), so reka consumers must call `injectProgressRootContext()` to render the value/state inside the indicator.
+- ✅ robonen avoids reka's known double-vmodel hazard. reka wraps `max` in a second `useVModel` with a synthetically-typed `passive` flag and emits `update:max` (ProgressRoot.vue:100-102, 6-11), but the emit is typed wrongly: `'update:modelValue': [value: string[] | undefined]` declares a string[] payload for a numeric model (ProgressRoot.vue:8) — a real type bug. robonen sidesteps this entirely with read-only `toRef` passthroughs (ProgressRoot.vue:31-32).
+- ✅ robonen uses `toRef(() => ...)` identity passthroughs for value/max instead of `computed`, intentionally avoiding the effect/cache overhead of a computed for a pure passthrough (ProgressRoot.vue:30-32). reka runs two `useVModel` instances plus two `immediate` watchers (ProgressRoot.vue:96-125) for the same data, which is heavier.
+- ✅ robonen's context typing is cleaner and explicit (`value: Ref<number | null>`, `max: Ref<number>`, `state: Ref<ProgressState>` in context.ts:6-10), whereas reka's context marks `modelValue` optional/possibly-undefined (`modelValue?: Readonly<Ref<...>>`, ProgressRoot.vue:33) forcing optional-chaining at every use site (`rootContext.modelValue?.value`, ProgressIndicator.vue:23).
+
+
+### command  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** ItemIndicator (ComboboxItemIndicator / ListboxItemIndicator), Cancel/clear (ComboboxCancel), Trigger (ComboboxTrigger, aria-haspopup), Anchor (ComboboxAnchor), Arrow (ComboboxArrow), Portal (ComboboxPortal), Content + ContentImpl (Popper positioning, DismissableLayer, FocusScope, body-scroll-lock, hideWhenEmpty, position inline|popper), Viewport (scrollbar hiding + nonce-able style), Virtualizer (ComboboxVirtualizer / ListboxVirtualizer), GroupLabel as a dedicated part (ListboxGroupLabel / ComboboxLabel)
+**Parts robonen has that reka lacks:** CommandLoading (role=progressbar with progress), Built-in result-count live region inside CommandRoot, Built-in --list-height ResizeObserver in CommandList (cmdk-style auto height)
+
+robonen's `command` is a deliberate cmdk-style flat command palette and has no 1:1 reka equivalent; judged against reka's Combobox/Listbox it is genuinely better on the palette-specific axes it was built for: scoring + fuzzy + keyword filtering with ranked ordering, automatic best-result highlighting on every keystroke, a ResizeObserver-driven --list-height for smooth animated height, a built-in result-count live region, a role=progressbar Loading part, and a lean SSR-safe virtual-focus model that avoids reka's focus-shuffling. The most important real gap is an a11y-semantics bug: CommandItem applies aria-selected to the keyboard-highlighted option rather than to the committed modelValue, so screen readers mis-announce selection — reka separates aria-selected (checked) from data-highlighted correctly. Beyond that, command lacks several reka capabilities (PageUp/PageDown, IME/composition guarding on Enter, RTL/dir awareness, ItemIndicator, a clear/Cancel part, multiple-select, form integration, object values with a `by` comparator, a textValue distinct from the identity value, and virtualization), and getSelectableItems() re-queries the DOM on every keypress. Fixing the aria-selected semantics and adding PageUp/PageDown + composition guarding closes the only consequential a11y/keyboard gaps; the remaining items are feature-completeness niceties. Verdict: robonen-better-with-gaps.
+
+
+**Major gaps:**
+- 🔶 (accessibility) aria-selected is wired to the HIGHLIGHT, not the committed selection. CommandItem.vue sets :aria-selected="isHighlighted || undefined" (where isHighlighted = ctx.selectedValue === value, i.e. the roving active item), while the actual chosen value (isSelected = ctx.modelValue === value) is exposed only as a non-semantic :data-selected attribute. In an ARIA listbox, aria-selected must reflect selection state; the active option is conveyed via the input's aria-activedescendant. Conflating them means a screen reader announces every keyboard-highlighted option as 'selected' and never announces the truly committed item.
+
+**Minor gaps (12):**
+- ▫️ (features) No ItemIndicator part to render/announce which option is the committed selection. A palette that supports a persistent modelValue should be able to show a check on the selected row.
+- ▫️ (keyboard) No PageUp / PageDown keyboard support. A long command list cannot be paged, and PageUp/PageDown do not jump to first/last.
+- ▫️ (rtl-i18n) No RTL / dir awareness anywhere in the command tree. There is no dir prop, no useDirection, and no direction-aware key handling.
+- ▫️ (edge-cases) No IME / composition guarding. Pressing Enter while composing (e.g. CJK input) will commit the highlighted item instead of confirming the IME candidate.
+- ▫️ (features) No multiple-selection support. The palette can only ever commit a single string modelValue.
+- ▫️ (forms) No form integration (hidden input / name / required). The committed value cannot participate in native form submission.
+- ▫️ (types) Item value is constrained to string; cannot use object values with a custom equality comparator.
+- ▫️ (features) Filtering matches the item's `value` (also the data-value/key) rather than a separate display/text value, so the searchable text is coupled to the identity key.
+- ▫️ (performance) No virtualization option for very large command lists.
+- ▫️ (performance) getSelectableItems() performs a live DOM querySelectorAll on every call (every arrow keypress, every commit, and inside the auto-highlight watch).
+- ▫️ (features) selectedValue (highlight) is not exposed on the input for assistive recovery when the input is blurred, and there is no Cancel/clear affordance.
+- ▫️ (accessibility) Root uses role=application, which is a heavyweight ARIA role that tells screen readers to suppress their normal browse-mode/quick-nav handling for the entire subtree.
+
+**Recommendations to make robonen strictly better:**
+- Fix the core a11y semantics in CommandItem.vue: set :aria-selected from isSelected (committed modelValue match) instead of isHighlighted, and convey the highlighted/active option solely through the input's aria-activedescendant (already present) plus a data-highlighted attribute. This matches reka ListboxItem and the ARIA combobox/listbox pattern.
+- Add PageUp/PageDown handling to CommandInput.vue handleKeyDown (PageUp -> moveTo('first') or page jump, PageDown -> moveTo('last') or page jump) to match reka's MAP_KEY_TO_FOCUS_INTENT.
+- Guard Enter against IME composition: in handleKeyDown skip commit when event.isComposing (or wire compositionstart/compositionend), mirroring reka's isComposing check in ListboxRoot.onKeydownEnter.
+- Add a CommandItemIndicator sub-component (v-if on isSelected, aria-hidden=true) so consumers can render a check on the committed row, matching reka ComboboxItemIndicator.
+- Add a separate `textValue` prop on CommandItem so filtering can target display text while `value` stays an opaque identity key; pass textValue (falling back to rendered text) into the filter haystack instead of conflating with value.
+- Add an optional CommandCancel/clear part that resets searchTerm (and optionally modelValue) and refocuses the input, matching reka ComboboxCancel including a resetModelValueOnClear-style option.
+- Cache DOM order for getSelectableItems(): build the value->domIndex map once via MutationObserver (the list already has one in CommandList.vue) instead of running querySelectorAll on every keypress and inside the auto-highlight watch.
+- Add a `dir` prop (and propagate via useDirection / a dir attribute) for RTL correctness and future horizontal/orientation support, even if current navigation is vertical-only.
+- Reconsider role=application on CommandRoot; evaluate dropping it (or making it opt-out) to avoid suppressing screen-reader browse mode across the palette subtree.
+- Consider optional multiple-select support (modelValue as array + selectionBehavior) and native form integration (name/required + VisuallyHiddenInput) to reach feature parity with reka Listbox for cases where a palette doubles as a picker.
+- Optionally offer a virtualization adapter for very large command lists, analogous to reka's ListboxVirtualizer/ComboboxVirtualizer, since getSelectableItems currently scales linearly with DOM size.
+
+**Where robonen is already better:**
+- ✅ Scoring filter with fuzzy subsequence matching and per-item keywords: defaultFilter (command/utils.ts) returns 1 for substring/keyword match, 0.5 for in-order subsequence (loose fuzzy), 0 to hide, and getSelectableItems() in CommandRoot.vue sorts candidates by score desc then DOM order. reka's useFilter.contains (shared/useFilter.ts) is a binary Intl.Collator substring check with no fuzzy match, no scoring, and no keyword/alias support — so reka cannot rank results or match on hidden aliases.
+- ✅ Auto-highlight of the best result: CommandRoot.vue has a flush:'post' watch on [searchTerm, filteredItems, allItems] that keeps the highlight on the current item if still visible, otherwise highlights getSelectableItems()[0]. This is exactly the cmdk palette behavior. reka only calls highlightFirstItem() in ComboboxInput.vue when the previous filter count was 0, so a typed query that narrows from many->fewer results does not re-anchor the highlight to the top result.
+- ✅ List auto-height CSS variable: CommandList.vue uses a ResizeObserver + MutationObserver to publish --primitives-command-list-height tracking the first child's offsetHeight, enabling the smooth animated-height palette effect from cmdk. reka has no equivalent; ComboboxViewport.vue only sets overflow:auto and hides scrollbars.
+- ✅ Live-region result-count announcement: CommandRoot.vue renders a VisuallyHidden role=status aria-live=polite node with announceCount ('N results available.'). reka Combobox/Listbox have no built-in SR announcement of how many results remain after filtering.
+- ✅ Dedicated CommandLoading part with role=progressbar, aria-valuetext/valuenow/valuemin/valuemax and aria-live=polite (CommandLoading.vue) for async command palettes. reka has no Loading/progress part in Combobox or Listbox.
+- ✅ Simpler, dependency-light virtual-focus model: input keeps real DOM focus and drives aria-activedescendant (CommandInput.vue activeDescendant + aria-activedescendant), avoiding reka's heavier focus-shuffling (ListboxFilter sets rootContext.focusable=false on mount and restores on unmount; ListboxRoot juggles changeHighlight focus()/scrollIntoView). robonen's approach is less stateful and avoids focus-trap machinery for a flat palette.
+
+
+### popper  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** shared Arrow.vue component (renders default SVG arrow path, supports rounded)
+
+Popper is a pure positioning primitive (no ARIA roles, keyboard, focus trap, forms, RTL/loop logic — those live in consumers like Menu/Select/Tooltip), so the comparison centers on sub-parts, arrow rendering, exported API surface, types, and performance. The two implementations are structurally near-identical (same 4 parts: Root, Anchor, Content, Arrow; same floating-ui middleware pipeline; identical prop set on Content including side/align flip, collision, sticky, hideWhenDetached, positionStrategy, prioritizePosition, reference override; same data-side/data-align/--popper-* CSS vars; same 'placed' emit). robonen is genuinely better on micro-performance and code quality: hoisted lookup maps, stable style hidden-class, a more robust arrow ResizeObserver, useTemplateRef/shallowRef, and reactive-props-destructure. The one real, user-visible gap is the Arrow: reka's PopperArrow renders an actual default SVG arrow (with a `rounded` variant) via a shared Arrow.vue, while robonen's PopperArrow defaults to an empty `span` that draws nothing unless the consumer supplies their own SVG. Remaining reka advantages are exported helpers robonen lacks: PopperContentPropsDefaultValue, the Measurable interface, and SIDE_OPTIONS/ALIGN_OPTIONS runtime arrays, plus minor reactivity (computedEager) and `update` exposure. None are critical, but fixing the Arrow default and adding the exported helpers/types would make robonen strictly better than reka for this primitive.
+
+
+**Major gaps:**
+- 🔶 (features) reka's PopperArrow renders a real, visible SVG arrow by default. It delegates to a shared Arrow.vue whose default `as: 'svg'` outputs `<svg viewBox="0 0 12 6" preserveAspectRatio="none">` containing a default `<path d="M0 0L6 6L12 0"/>`. robonen's PopperArrow defaults to `as = 'span'` and renders an EMPTY Primitive with no SVG, no viewBox, and no path, so out of the box robonen's arrow draws nothing visible and the consumer must supply their own SVG via the slot.
+
+**Minor gaps (6):**
+- ▫️ (api-surface) reka exposes a `rounded` prop on PopperArrow (via ArrowProps) that switches to an alternate rounded SVG path (d="M0 0L4.58579 4.58579C5.36683..."). robonen's PopperArrowProps has only `width` and `height` and no `rounded` option.
+- ▫️ (api-surface) reka exports `PopperContentPropsDefaultValue` (the canonical defaults object) from PopperContent.vue and re-exports it from index.ts, so downstream primitives (Tooltip/Popover/Select etc.) can spread it into their own withDefaults. robonen inlines its defaults via destructuring in PopperContent.vue and does not export any shared defaults object, forcing each consumer to re-declare defaults.
+- ▫️ (types) reka exports a `Measurable` interface ({ getBoundingClientRect: () => DOMRect }) from PopperRoot.vue for typing virtual/anchor reference elements. robonen has no exported Measurable type; consumers passing a virtual reference must rely solely on floating-ui's ReferenceElement.
+- ▫️ (api-surface) reka exports the runtime arrays SIDE_OPTIONS (['top','right','bottom','left']) and ALIGN_OPTIONS (['start','center','end']) via `export * from './utils'`, useful for runtime prop validation, iteration, and Storybook controls. robonen's utils.ts only declares the Side/Align type unions with no runtime array equivalents.
+- ▫️ (performance) reka builds the middleware array with computedEager (from @vueuse/core), so the middleware list recomputes eagerly/synchronously when any dependency changes rather than lazily on first read. robonen uses a plain `computed`, which is lazy — it only recomputes when floating-ui reads `.value`, which can defer a middleware update by a microtask/tick in edge cases (e.g. arrow size change feeding offset.mainAxis).
+- ▫️ (api-surface) reka destructures `update` from useFloating, making the imperative reposition function available for potential exposure/use; robonen does not destructure or expose `update`, so there is no imperative way to force a reposition.
+
+**Recommendations to make robonen strictly better:**
+- Give PopperArrow a real default SVG arrow to reach visual parity: create a shared Arrow component (or inline default slot content) that defaults to `as = 'svg'` with `viewBox="0 0 12 6"`, `preserveAspectRatio="none"`, and a default `<path d="M0 0L6 6L12 0"/>`. Currently robonen renders an empty span so the arrow is invisible without a user-supplied SVG.
+- Add a `rounded?: boolean` prop to PopperArrowProps that swaps in the rounded path (d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0") to match reka's Arrow feature set.
+- Export a shared defaults object (e.g. POPPER_CONTENT_DEFAULTS) equivalent to reka's PopperContentPropsDefaultValue, and re-export it from index.ts so downstream primitives (Tooltip/Popover/Select/Menu) can reuse canonical defaults instead of redeclaring them.
+- Export a `Measurable` interface ({ getBoundingClientRect: () => DOMRect }) from context.ts/index.ts for typing virtual reference elements passed to PopperAnchor.reference / PopperContent.reference.
+- Add runtime `SIDE_OPTIONS` and `ALIGN_OPTIONS` const arrays in utils.ts (with Side/Align derived from them via typeof[number]) and export them for prop validation, iteration, and story controls.
+- Switch computedMiddleware from `computed` to an eager computation (computedEager from @vueuse/core or a watchSyncEffect-driven shallowRef) so middleware updates synchronously when arrow size or options change, matching reka's eager behavior.
+- Consider destructuring and exposing `update` (and optionally `isPositioned`) from useFloating so consumers can imperatively force a reposition, e.g. on async content size changes.
+
+**Where robonen is already better:**
+- ✅ PopperArrow lookup maps hoisted to module scope (one allocation) vs reka allocating inline objects per render
+- ✅ PopperContent style object keeps stable V8 hidden class by always writing visibility/pointerEvents keys vs reka's shape-changing conditional spread
+- ✅ More robust arrow ResizeObserver that re-observes on element change and disconnects on unmount, vs reka useSize observing only once in onMounted
+- ✅ Uses useTemplateRef and shallowRef (modern Vue 3.5 reactivity) for floatingRef and contentZIndex
+- ✅ Reactive props destructure with inline defaults for cleaner code without withDefaults boilerplate
+- ✅ Exports both root and content context injectors plus their interface types, vs reka exporting only the root inject
+
+
+### label  —  _robonen-better-with-gaps_
+
+
+The Label primitive itself is essentially identical between the two libraries: both render a native `<label>` via Primitive with an `as` default of 'label', forward a `for` prop, and add a mousedown handler that prevents text selection on double-click (`detail > 1`). There are no extra sub-components on either side and no roving-tabindex/keyboard/focus-trap concerns for this primitive. The real differences live in the shared Primitive/PrimitiveProps layer that Label inherits. reka's Label is better in one meaningful way: it inherits and forwards a documented `asChild` composition prop (via `v-bind=\"props\"`), whereas robonen's Primitive has no `asChild` (composition only via `as=\"template\"`) and robonen's Label hard-codes `:as`/`:for`, so it would silently drop `asChild` and any future PrimitiveProps. reka also has stronger documentation/test surface (axe a11y test, negative focus edge-case tests, a story). robonen is better on small code-quality and micro-perf points (named handler, batched property descriptors in useForwardExpose, shallowRef, explicit two-directional mousedown tests) but has a dead `forwardRef` destructure. Verdict: robonen-better-with-gaps — robonen is marginally cleaner at the component level but is NOT strictly better because it lacks `asChild`/full prop forwarding and the a11y/edge-case test coverage reka provides.
+
+
+**Major gaps:**
+- 🔶 (api-surface) reka's Label inherits a documented `asChild` boolean prop from PrimitiveProps, enabling the standard composition pattern `<Label as-child><span>...</span></Label>` to merge label behavior (mousedown handler, `for`) onto a custom child element. robonen's Label has no `asChild`: robonen's PrimitiveProps only declares `as` (primitive/Primitive.ts:7-9), and composition is only possible via `as="template"`, which is undocumented on Label and is a different mental model than the rest of the headless ecosystem. A consumer who writes `<Label as-child>` against robonen gets a silently-ignored attribute. Note robonen's own MenubarRoot already binds `:as-child` (MenubarRoot.vue:93) against a Primitive that has no such prop, showing the API is inconsistent/incomplete repo-wide.
+
+**Minor gaps (4):**
+- ▫️ (api-surface) reka's Label forwards ALL props to Primitive via `v-bind="props"` (Label.vue:23), so any future PrimitiveProps additions (asChild today, anything later) propagate automatically. robonen's Label hard-codes `:as` and `:for` only (Label.vue:25), so it will silently drop any new PrimitiveProps member (e.g. asChild) without a code change. This makes robonen's Label brittle against Primitive API growth.
+- ▫️ (accessibility) reka ships an explicit accessibility test using `vitest-axe` that renders Label+input together and asserts `toHaveNoViolations()` (Label.test.ts:12-25). robonen's Label test file has no axe/a11y assertion. While the rendered markup is equivalent, robonen lacks an automated a11y regression guard for this primitive.
+- ▫️ (edge-cases) reka's Label test explicitly covers two negative focus edge cases: clicking a label with no `for`, and clicking a label whose `for` points to a non-existent id, asserting the input does NOT receive focus (Label.test.ts:50-77). robonen has no equivalent edge-case coverage for label/control association behavior.
+- ▫️ (code-quality) reka provides a Histoire story (Label.story.vue) demonstrating the documented Label+input pairing and styling, serving as live docs/usage reference. robonen's label/ directory has no story file (only Label.vue, index.ts, __test__). Lower discoverability/documentation surface.
+
+**Recommendations to make robonen strictly better:**
+- Add `asChild` support so robonen's Label matches the standard headless composition API. Easiest path: add `asChild?: boolean` to `PrimitiveProps` (primitive/Primitive.ts) and have Primitive map `asChild ? 'template' : as` internally (mirroring reka Primitive.ts:56); then in Label bind `v-bind="props"` (or forward `:as-child="asChild"`). This also fixes the existing repo inconsistency where MenubarRoot.vue:93 already binds `:as-child` to a Primitive that ignores it.
+- Change robonen Label to forward all props with `v-bind="props"` (and keep `@mousedown`) instead of hard-coding `:as`/`:for`, so future PrimitiveProps additions propagate automatically and don't get silently dropped.
+- Remove the dead `const { forwardRef } = useForwardExpose();` destructure in Label.vue:14 OR actually bind `:ref="forwardRef"` on the Primitive. Currently `forwardRef` is destructured but never used (the template has no `:ref`), so it is dead code; either wire it up to expose the underlying `<label>` element to consumers (better, matches the intent of useForwardExpose) or call `useForwardExpose()` bare like reka does for the side effect only.
+- Add a `vitest-axe` accessibility assertion to robonen's Label.test.ts (render Label `for="input"` next to `<input id="input">` and assert no violations) to match reka's automated a11y guard.
+- Add negative focus edge-case tests mirroring reka Label.test.ts:50-77 (label with no `for`, and `for` pointing to a missing id should not move focus) to lock in correct label/control association behavior.
+- Add a story/demo file (Label.story.vue or the repo's docs equivalent) showing the canonical Label+input pairing, matching reka's documentation surface.
+
+**Where robonen is already better:**
+- ✅ JSDoc on the `for` prop is slightly richer: robonen documents it as `(renders as 'for')` (Label.vue:5), clarifying the rendered output; reka just says 'The id of the element the label is associated with.' (Label.vue:6). Minor but a documentation edge.
+- ✅ robonen extracts the mousedown handler into a named top-level function `onMouseDown(event)` (Label.vue:18-21) instead of reka's inline arrow in the template (Label.vue:24-27). This is marginally better for readability, avoids recreating the handler closure on every render, and is easier to unit test.
+- ✅ robonen's test suite directly asserts the mousedown behavior in both directions (`detail > 1` prevents default, `detail === 1` does not — Label.test.ts:18-32), giving stronger behavioral coverage of the double-click-selection guard than reka, whose tests focus on rendering/`for`/click-focus and axe.
+- ✅ robonen's underlying `useForwardExpose` is implemented more efficiently: it batches all property definitions via a single `Object.defineProperties(ret, descriptors)` call (index.ts:85) and uses `shallowRef` instead of reka's per-key `Object.defineProperty` loop and plain `ref` (reka useForwardExpose.ts:33-61). This is shared infra Label benefits from indirectly.
+
+
+### separator  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** shared/component/BaseSeparator.vue (shared base layer reused by other primitives)
+
+Both libraries implement Separator as a single leaf primitive with the same core semantics: orientation (horizontal/vertical, default horizontal), decorative (role='none' when true, else role='separator'), and aria-orientation only emitted when vertical, plus a data-orientation attribute. There are no sub-components, keyboard interaction, focus management, forms, RTL, or presence concerns for this primitive, so the comparison reduces to props, a11y wiring, validation, and ergonomics. robonen is genuinely better in ref/expose forwarding (useForwardExpose) and renders one layer less than reka (which interposes a reusable BaseSeparator). reka is better in three concrete ways: (1) it exposes a documented asChild composition prop that robonen lacks (robonen only has the undocumented as='template' escape hatch), (2) it runtime-validates orientation and falls back to horizontal, whereas robonen passes any value straight into data-orientation, and (3) it ships an automated axe a11y test plus uses a shared DataOrientation type and a reusable BaseSeparator. None of reka's advantages are critical, but the asChild gap is a real API-surface shortfall. Verdict: robonen-better-with-gaps — close the asChild, orientation-validation, shared-type, and axe-test gaps to make robonen strictly better.
+
+
+**Minor gaps (5):**
+- ▫️ (api-surface) Explicit documented asChild prop for composition
+- ▫️ (edge-cases) Runtime orientation validation with horizontal fallback
+- ▫️ (code-quality) Reusable shared BaseSeparator consumed by other primitives
+- ▫️ (accessibility) Automated axe a11y test for both orientations
+- ▫️ (types) Shared DataOrientation type alias instead of inlined union
+
+**Recommendations to make robonen strictly better:**
+- Add an explicit, documented `asChild?: boolean` prop. Either add asChild to robonen's PrimitiveProps and wire it through (mapping to as='template' internally) so consumers get a discoverable, documented composition API matching reka, or document the as='template' pattern prominently on Separator. This closes the biggest API-surface gap.
+- Add runtime orientation validation/fallback in Separator.vue: compute a validated orientation (`isValidOrientation(orientation) ? orientation : 'horizontal'`) and use it for both :data-orientation and the aria-orientation/role logic, so invalid orientation values cannot produce an invalid data-orientation token or a missing aria-orientation.
+- Introduce a shared DataOrientation type (e.g. in a central types module) and use it for SeparatorProps.orientation instead of inlining the literal union, to match reka's single-source-of-truth typing and stay consistent across other robonen primitives that have an orientation.
+- Add an automated accessibility assertion to the Separator test (vitest-axe toHaveNoViolations) for both horizontal and vertical orientations, mirroring reka's Separator.test.ts, to guard against a11y regressions.
+- Consider extracting a shared Base separator (or at least a composable computing the role/aria-orientation/data-orientation semantics) so future robonen primitives (toolbar, toggle-group, menu) that need internal separators reuse identical semantics instead of reimplementing them.
+- Keep robonen's useForwardExpose ref-forwarding advantage (do not drop it) and ensure any asChild implementation continues to forward the ref correctly when rendering via template/Slot.
+
+**Where robonen is already better:**
+- ✅ Forwards underlying $el and child exposed API via useForwardExpose + forwardRef (reka's Separator does not forward refs)
+- ✅ Single-layer render (Separator -> Primitive) vs reka's extra BaseSeparator layer
+- ✅ Modern Vue 3.5 reactive props destructure with defaults instead of withDefaults
+- ✅ Stronger literal-typed aria/role attributes via `as const` in the computed
+
+
+### pagination  —  _robonen-better-with-gaps_
+
+
+Both libraries ship the identical 8-part pagination (Root, List, ListItem, Ellipsis, First, Last, Prev, Next) with the same ARIA wiring (data-type, aria-label per control, aria-current='page' + data-selected on the active page, type='button' guarded by as==='button', native disabled), the same controlled+uncontrolled v-model:page support, the same scoped slots (Root: page/pageCount; List: items), and the same disabled-gating of clicks. Pagination is a click-driven (not roving-tabindex) widget, so there is no keyboard/focus-trap surface to differ on, and neither has RTL/loop/form-input/portal/positioning concerns. Robonen is genuinely better in a few places: it auto-clamps currentPage to [1, totalPages] via useClamp (reka leaves page stale when total shrinks), returns pre-transformed PaginationItem[] from getRange (reka re-runs transform() each render), gives pageSize a default, and sits on a richer useOffsetPagination composable. I verified the suspected currentPage/page desync is NOT a bug — ref(ref) is idempotent in Vue so they share one ref. The remaining gaps are all minor and DX-oriented: robonen makes `total` required (reka defaults it to 0 and tests the empty state), robonen has no per-prop JSDoc and no exported emits type (reka documents both), and reka's showEdges windowing algorithm is the well-tested zag implementation with a stronger test matrix than robonen's home-grown variant. No structural/a11y/keyboard gaps; verdict is robonen-better-with-gaps once the four minor items are addressed.
+
+
+**Minor gaps (4):**
+- ▫️ (api-surface) Reka's `total` prop is optional with a default of 0 (PaginationRoot.vue props line 27 + withDefaults `total: 0`), and the 0-total state is explicitly supported/tested (Pagination.test.ts 'given 0 total value': page 1 shown, all First/Prev/Next/Last disabled). Robonen makes `total: number` REQUIRED (PaginationRootProps line 6) — consumers must always pass it, and there is no defined/tested behavior for an empty collection (total 0 -> totalPages clamps to 1, but this path is not part of the documented API the way reka tests it).
+- ▫️ (types) Every reka prop carries JSDoc documentation that surfaces in editor IntelliSense (PaginationRoot.vue lines 16-33: page, defaultPage, itemsPerPage, total, siblingCount, disabled, showEdges, plus the PaginationRootEmits update:page doc). Robonen's PaginationRootProps (lines 4-11) and all sub-component prop interfaces have zero JSDoc, so consumers get no hover documentation for total/pageSize/siblingCount/showEdges/disabled/defaultPage.
+- ▫️ (api-surface) Reka explicitly exports a named emits type `PaginationRootEmits` ({ 'update:page': [value] }) from the package index (index.ts line 8), documenting and typing the event for consumers. Robonen relies on defineModel('page') (auto-generates update:page) but exports no named emits type, so there is no public, documented emit type to import.
+- ▫️ (edge-cases) Reka's showEdges range algorithm (utils.ts getRange lines 27-77) is the zag-derived implementation with three guard conditions per side (default + towards-end + towards-middle checks using itemCount and lastPageIndex math) and is validated by an extensive matrix of presence/absence tests (Pagination.test.ts 'given show-edges' asserting exact pages 2/3/4 present, 8 absent, exactly one ellipsis). Robonen's getRange (utils.ts) is a simpler home-grown variant; its own utils.test.ts only checks coarse invariants (first/last present, ellipsis count >= 1) and does not pin the exact windowing reka guarantees, leaving more risk of off-by-one edge windows for specific (currentPage,totalPages,siblingCount,showEdges) combinations.
+
+**Recommendations to make robonen strictly better:**
+- Make `total` optional with a default of 0 in PaginationRootProps (mirror reka) and add explicit tests for the empty-collection state (total: 0 -> page 1 displayed, First/Prev/Next/Last all disabled) so the zero-total path is a documented, guaranteed behavior.
+- Add JSDoc comments to every prop in PaginationRootProps (total, pageSize, siblingCount, showEdges, disabled, defaultPage, page) and to sub-component props (PaginationListItemProps.value, etc.) so consumers get hover documentation parity with reka.
+- Export a named emits type (e.g. `export type PaginationRootEmits = { 'update:page': [value: number] }`) from index.ts for documentation/typing parity, even though defineModel is used internally.
+- Harden getRange: port reka's three-condition zag windowing logic (or add an exhaustive snapshot/matrix test over combinations of currentPage x totalPages x siblingCount x showEdges) to guarantee exact window output and eliminate off-by-one risk in the showEdges branch.
+- Consider adding ARIA niceties neither library has but which would make robonen strictly better: an optional aria-label on the nav Root (e.g. 'pagination') and aria-disabled mirroring disabled on the <a>-rendered controls (when as='a', the native `disabled` attr is inert, so disabled <a> elements remain clickable/focusable — guard with aria-disabled and pointer/keyboard suppression).
+- Keep pageSize as the public prop name but optionally alias itemsPerPage for drop-in reka migration ergonomics; document the naming difference.
+
+**Where robonen is already better:**
+- ✅ Automatic page clamping: robonen derives currentPage = useClamp(page, 1, totalPages) (PaginationRoot.vue line 53-57 via @robonen/vue useOffsetPagination). If `total` shrinks below the current page, currentPage is automatically clamped into [1, totalPages]. Reka's PaginationRoot.onPageChange just does `page.value = value` with no clamping (PaginationRoot.vue line 80-82), so after `total` decreases reka can hold a stale page (e.g. page 10 when only 2 pages exist) until the consumer fixes it.
+- ✅ Verified bidirectional sync between the page v-model and the internal currentPage: ref(ref) is idempotent in Vue, so useClamp(page, ...) shares the same underlying ref; both controlled and uncontrolled modes stay consistent. (Confirmed empirically.)
+- ✅ Cleaner item pipeline: robonen's getRange returns fully-formed PaginationItem[] objects, so PaginationList passes them straight to the slot (PaginationList.vue line 26-31). Reka's getRange returns raw (number|'ellipsis')[] and PaginationList must call transform() every recompute (reka PaginationList.vue line 26-35) — an extra map pass on every render.
+- ✅ Richer underlying composable: robonen's useOffsetPagination exposes next/previous/select and onPageChange/onPageSizeChange/onTotalPagesChange callbacks and currentPageSize, giving a stronger reusable foundation than reka's inline `pageCount` computed.
+- ✅ PaginationItemType enum is exported (utils.ts line 1-4) giving consumers named constants ('page'/'ellipsis') instead of bare string literals as in reka.
+- ✅ pageSize has a sensible default of 10 (PaginationRoot.vue line 23). Reka's equivalent `itemsPerPage` is a required prop with no default.
+
+
+### teleport  —  _robonen-better-with-gaps_
+
+
+Both Teleport primitives are intentionally thin wrappers around Vue's built-in `<Teleport>`; neither has sub-components, ARIA/a11y wiring, keyboard handling, focus management, forms, or RTL concerns (none of which apply to a portal primitive). robonen is broadly equal-or-better on API surface: it adds a globally configurable default target via `useConfig().teleportTarget` (reka hardcodes `'body'`), exports `Portal`/`PortalProps` aliases, declares `inheritAttrs: false`, allows `to: null`, and defaults `forceMount` to true for animation-friendliness with documented SSR reasoning (`disabled || !isClient`). The only respects where reka is arguably better are SSR/mount-gating defensiveness: reka uses a reactive `useMounted()` ref and gates the whole render with `v-if=\"isMounted || forceMount\"`, whereas robonen uses a module-level `isClient` constant (non-reactive, evaluated at import time) and always renders the Teleport node when forceMount is true. Both are minor and not hard bugs, but adopting a reactive mounted hook would make robonen strictly better with no downside. Verdict: robonen-better-with-gaps.
+
+
+**Minor gaps (2):**
+- ▫️ (ssr) reka uses `useMounted()` (a per-instance reactive ref from @vueuse) to gate rendering, so the mounted state is genuinely reactive within the component lifecycle. robonen uses the module-level constant `isClient` from @robonen/platform/multi, which is evaluated once at import time and never becomes reactive. In practice this is fine because `isClient` cannot change, but it means robonen's `effectiveDisabled` does not re-evaluate on the client-mount tick the way reka's `v-if` does; if a target is only attached during the parent's onMounted, robonen cannot react to that transition the way reka's mounted-gated render can, and would need the user-facing `defer` prop instead.
+- ▫️ (ssr) When `forceMount` is true and disabled is false but the page is still in SSR, robonen always renders the `<Teleport>` node (`v-if="forceMount || !effectiveDisabled"`, default forceMount=true) relying solely on `:disabled` to keep it inline. reka's approach of not rendering the Teleport node at all until mounted (when forceMount is unset) more conservatively avoids any chance of Vue attempting target resolution during hydration. This is a defensiveness trade-off rather than a hard bug, but reka's default is the safer of the two for the common (non-forceMount) case.
+
+**Recommendations to make robonen strictly better:**
+- Replace the module-level `isClient` constant with a per-instance reactive mounted hook (e.g. `useMounted()` from VueUse or an internal `const mounted = ref(false); onMounted(() => mounted.value = true)`), then compute `effectiveDisabled = computed(() => disabled || !mounted.value)`. This matches reka's reactive mounted gating, lets the component react to the client-mount transition, and removes any reliance on import-time evaluation that can be brittle under bundler/SSR edge cases.
+- Add a unit/integration test asserting SSR-then-hydration produces no mismatch and that content moves from inline to the target on client mount, to lock in the hydration-safe behavior that currently only `isClient` provides implicitly.
+- Document the interaction between `forceMount: true` (default) and `disabled` explicitly in the prop JSDoc — clarify that with forceMount the Teleport node is always rendered and only `disabled` controls inline-vs-teleported, so users understand the difference from reka's mount-gated default.
+- Consider mirroring reka by NOT rendering the `<Teleport>` node at all when `forceMount` is false AND not yet mounted, for maximum hydration defensiveness in the non-animation case, while keeping forceMount=true as the animation-friendly default.
+- Optionally expose the underlying behavior consistency by adding a test that `to` reactively updates the target (changing `to` re-resolves the computed target) to guarantee parity with reka's direct `:to` binding.
+- Keep the `Portal`/`PortalProps` aliases and the configurable `teleportTarget` — these are real advantages over reka; ensure they are surfaced in docs as differentiators.
+
+**Where robonen is already better:**
+- ✅ Configurable default teleport target: robonen resolves the target via `to ?? config.teleportTarget.value` from `useConfig()` (config-provider/context.ts), so an app can globally redirect all portals (e.g. to a custom root) and override per-instance. reka hardcodes the default to `'body'` via `withDefaults(..., { to: 'body' })` with no global override mechanism.
+- ✅ Explicit, documented SSR/hydration handling: robonen computes `effectiveDisabled = disabled || !isClient` (Teleport.vue:52) and passes it as `:disabled`, so during SSR children render inline and there is no attempt to teleport to a not-yet-existing target. reka relies on `useMounted()` gating the whole `v-if`, which renders nothing on the server unless `forceMount` is set (potential content flash on hydration).
+- ✅ Ergonomic dual naming: robonen exports both `Teleport`/`TeleportPrimitiveProps` and `Portal`/`PortalProps` aliases (index.ts), matching the Radix/portal mental model. reka only exports `TeleportPrimitive`/`TeleportProps`.
+- ✅ `inheritAttrs: false` is explicitly declared (Teleport.vue:30-32), making the no-DOM-element nature of the wrapper explicit and avoiding any stray attribute fallthrough surprises. reka does not declare `inheritAttrs`.
+- ✅ `to` type explicitly permits `null` (`string | HTMLElement | null`) with documented fallback to the configured target, giving a clear 'use default' signal. reka's `to` is `string | HTMLElement` only.
+- ✅ forceMount defaults to `true` and is documented as an animation-aware escape hatch (keeps children mounted), which is the more useful default for primitives wrapped in Presence/Transition. reka leaves `forceMount` undefined (effectively false).
+
+
+### presence  —  _robonen-better-with-gaps_
+
+
+Both libraries implement Presence as a single-component primitive (no sub-parts) that defers unmount until exit animations finish, exposing the same API surface: a `present` prop, a `forceMount` prop, a `{ present }` scoped slot, and an exposed `present` ref. robonen is genuinely better in several respects: it supports CSS transitions (reka only handles CSS animations and will instantly unmount transition-only children), it factors the animation lifecycle into reusable, independently-tested @robonen/platform helpers (getAnimationName/isAnimatable/shouldSuspendUnmount/dispatchAnimationEvent/onAnimationSettle) with passive listeners, and its usePresence has a cleaner signature (MaybeRefOrGetter input, internally-owned node ref, exposed setRef) versus reka forcing the caller to pass an external node Ref. However, reka still leads in a few edge cases: (1) MAJOR — it special-cases the Popper content wrapper (data-reka-popper-content-wrapper -> firstElementChild) so nested popper animations work, which robonen lacks entirely; (2) it throws a descriptive single-child validation error (robonen only warns generically via Slot); (3) it dispatches enter/after-enter lifecycle events on initial mount via immediate watcher (robonen reacts only to changes); (4) it resolves the owner window for its fill-mode timer (iframe/popup correctness); and (5) it explicitly isClient-guards CustomEvent construction. None of these make reka strictly better overall, but the popper-wrapper handling is a real functional gap worth closing. Verdict: robonen-better-with-gaps.
+
+
+**Recommendations to make robonen strictly better:**
+- Add the data-reka-popper-content-wrapper equivalent to robonen's setRef: when the resolved element carries the popper-wrapper data attribute, track el.firstElementChild instead. This is the only major behavioral gap and matters for any Popper/Tooltip/Menu content that animates a nested element.
+- Add explicit single-child validation in Presence.vue (count resolved VNodes via getRawChildren) and throw a descriptive, parent-named error in dev (mirroring reka Presence.ts:59-78) instead of relying on Slot's generic warn — Presence has stricter single-child semantics than a general Slot.
+- Make robonen's present watcher dispatch on initial mount (add immediate handling or an onMounted bootstrap) so the 'enter'/'after-enter' lifecycle events fire for an element that is present on first render, matching reka's { immediate: true } behavior.
+- Use the element's ownerDocument.defaultView for setTimeout/clearTimeout in onAnimationSettle (capture ownerWindow when the node is attached) so the fill-mode flash-prevention timer is correct inside iframes and detached popup windows.
+- Add an explicit client/environment guard (e.g. typeof CustomEvent !== 'undefined' or an isClient check) inside dispatchAnimationEvent so the helper is robust if ever called with a live element in an SSR/edge runtime, and document it like reka does.
+- Optional: consider a formal state-machine (mounted/unmountSuspended/unmounted) like reka's useStateMachine to make the unmount-during-enter (animationcancel) edge transitions explicit and self-documenting; robonen's isAnimating boolean + isCurrentAnimation check covers most cases but the state machine is easier to reason about and audit.
+- Keep and advertise the transition support advantage (transitionend/transitioncancel + hasTransition) since reka lacks it — ensure it is covered by tests using real CSS transitions, not just mocked animation events.
+
+**Where robonen is already better:**
+- ✅ Transition support beyond CSS animations (reka handles animations only)
+- ✅ Reusable, separately-tested platform animationLifecycle helpers
+- ✅ Passive event listeners
+- ✅ More ergonomic usePresence API (MaybeRefOrGetter input, owns node ref, exposes setRef)
+- ✅ Robust child extraction via getRawChildren with keyed-fragment BAIL handling
+
+
+### switch  —  _robonen-better-with-gaps_
+
+**Parts reka has that robonen lacks:** SwitchThumb (separate part with own data-state/data-disabled)
+
+robonen's Switch is a single monolithic generic component that is genuinely stronger than reka on core interaction correctness: it uses Object.is+toRaw identity comparison, fully supports Space+Enter activation plus tabindex and aria-disabled synthesis for non-button hosts (reka does neither Space nor focusability for non-button hosts), guards against double-toggle on native buttons, and serializes complex truthy/falsy values into the hidden form input. However, reka is better on composition and form/a11y polish: it ships a dedicated SwitchThumb part exposing its own data-state/data-disabled (essential for thumb animations), supports asChild on both parts, gates the hidden input on actual form membership via useFormControl (with SSR-safe default), dispatches native input/change events on the hidden input so form libraries react, auto-derives aria-label from an associated <label for>, and exposes first-class id/value props plus a typed emits contract. The most impactful gap is the missing SwitchThumb subcomponent. Adding SwitchRoot+SwitchThumb with context, asChild support, form-control gating, native event dispatch on the hidden input, and accessible-name derivation would make robonen strictly better, since robonen already wins on interaction and identity semantics.
+
+
+**Recommendations to make robonen strictly better:**
+- Add a SwitchThumb (or SwitchIndicator) subcomponent that injects switch context and renders Primitive with its own data-state (checked/unchecked) and data-disabled attributes, mirroring reka SwitchThumb. Provide a context.ts exposing { checked: ComputedRef<boolean>, disabled: Ref<boolean> } and refactor Switch into SwitchRoot. This unlocks data-[state=checked] thumb animation styling, the single most common switch UI pattern.
+- Add asChild support to robonen's PrimitiveProps (or at minimum to the Switch) so the switch can merge onto a consumer-provided element while preserving all ARIA/data attrs, matching reka's polymorphism. If asChild is intentionally omitted repo-wide, document the as='template' equivalent in SwitchProps.
+- Only render the hidden form input when actually inside a <form>: add a useFormControl-style composable (closest('form'), defaulting true for SSR) and gate the input with `v-if=isFormControl && name` to avoid stray DOM nodes when used outside forms.
+- Dispatch native input and change events on the hidden input when the value changes (via the HTMLInputElement.prototype value setter), so third-party form libraries and direct change listeners on the hidden input react to programmatic toggles, matching reka's VisuallyHiddenInputBubble behavior.
+- Add accessible-name support: accept an `id` prop and derive aria-label from an associated <label for> (or, preferably, support aria-labelledby wiring) so a switch labeled only by a visual <label for> still has a robust accessible name. Prefer a reactive/lifecycle-safe lookup over a one-shot document.querySelector in setup.
+- Expose a typed emits contract for update:modelValue and consider modeling modelValue as T | null to document the controlled/uncontrolled contract; add a dedicated `value` prop (or document that truthy/falsy serialization is the form value) so the form-submission value is explicit.
+- Keep robonen's superior non-button keyboard/tabindex/aria-disabled synthesis and Object.is identity semantics — these are genuine wins over reka; ensure the new SwitchRoot/SwitchThumb refactor preserves them.
+
+**Where robonen is already better:**
+- ✅ Object.is + toRaw identity comparison for checked state (more correct than reka's === for proxies/NaN/-0)
+- ✅ Space + Enter activation and tabindex/aria-disabled synthesis for non-button hosts (reka handles neither Space nor focusability/disabled for non-button hosts)
+- ✅ Guards against double-toggle on native buttons by only synthesizing keyboard handling when as != 'button'
+- ✅ Hidden input value serialization for numbers/booleans/objects (reka submits an unrelated static `value` string for custom state types)
+- ✅ Fewer external dependencies for core behavior; no document.querySelector during setup (better SSR/hydration robustness)
+
diff --git a/vue/primitives/eslint.config.ts b/vue/primitives/eslint.config.ts
new file mode 100644
index 0000000..3f17b52
--- /dev/null
+++ b/vue/primitives/eslint.config.ts
@@ -0,0 +1,9 @@
+import { base, compose, imports, stylistic, typescript, vue } from '@robonen/eslint';
+
+export default compose(base, typescript, vue, imports, stylistic, {
+  name: 'primitives/overrides',
+  files: ['**/*.vue'],
+  rules: {
+    '@stylistic/no-multiple-empty-lines': 'off',
+  },
+});
diff --git a/vue/primitives/oxlint.config.ts b/vue/primitives/oxlint.config.ts
deleted file mode 100644
index 53290d8..0000000
--- a/vue/primitives/oxlint.config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { base, compose, imports, stylistic, typescript } from '@robonen/oxlint';
-import { defineConfig } from 'oxlint';
-
-export default defineConfig(compose(base, typescript, imports, stylistic, {
-  overrides: [
-    {
-      files: ['**/*.vue'],
-      rules: {
-        '@stylistic/no-multiple-empty-lines': 'off',
-      },
-    },
-  ],
-}));
diff --git a/vue/primitives/package.json b/vue/primitives/package.json
index 9db1ce1..96387d7 100644
--- a/vue/primitives/package.json
+++ b/vue/primitives/package.json
@@ -33,31 +33,45 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
+    },
+    "./*": {
+      "import": {
+        "types": "./dist/*/index.d.mts",
+        "default": "./dist/*/index.mjs"
+      },
+      "require": {
+        "types": "./dist/*/index.d.cts",
+        "default": "./dist/*/index.cjs"
+      }
     }
   },
   "scripts": {
-    "lint:check": "oxlint -c oxlint.config.ts",
-    "lint:fix": "oxlint -c oxlint.config.ts --fix",
+    "lint:check": "eslint .",
+    "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "bench": "vitest bench",
     "dev": "vitest dev",
     "build": "tsdown"
   },
   "devDependencies": {
-    "@robonen/oxlint": "workspace:*",
+    "@robonen/eslint": "workspace:*",
     "@robonen/tsconfig": "workspace:*",
     "@robonen/tsdown": "workspace:*",
-    "@stylistic/eslint-plugin": "catalog:",
+    "@vitest/browser": "catalog:",
+    "@vitest/browser-playwright": "^4.0.18",
     "@vue/test-utils": "catalog:",
     "axe-core": "^4.11.1",
-    "oxlint": "catalog:",
+    "eslint": "catalog:",
+    "playwright": "^1.48.0",
     "tsdown": "catalog:",
     "unplugin-vue": "^7.1.1",
+    "vitest-browser-vue": "^1.0.0",
     "vue-tsc": "^3.2.5"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.1.11",
     "@robonen/platform": "workspace:*",
-    "@robonen/stdlib": "^0.0.9",
+    "@robonen/stdlib": "workspace:*",
     "@robonen/vue": "workspace:*",
     "@vue/shared": "catalog:",
     "vue": "catalog:"
diff --git a/vue/primitives/playground/.gitignore b/vue/primitives/playground/.gitignore
new file mode 100644
index 0000000..b431156
--- /dev/null
+++ b/vue/primitives/playground/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.vite
diff --git a/vue/primitives/playground/README.md b/vue/primitives/playground/README.md
new file mode 100644
index 0000000..e6eceb6
--- /dev/null
+++ b/vue/primitives/playground/README.md
@@ -0,0 +1,32 @@
+# @robonen/primitives playground
+
+Minimal Vite + Vue 3 sandbox for inspecting and debugging primitives from
+[`@robonen/primitives`](../). Imports source directly via the `@primitives/*`
+alias, so HMR works while editing components in `vue/primitives/src/`.
+
+## Usage
+
+```sh
+pnpm --filter @robonen/primitives-playground dev
+```
+
+Then open http://localhost:5180.
+
+## Adding a demo
+
+Drop a `.vue` file into `src/demos/`. It will be picked up automatically by the
+sidebar (`import.meta.glob('./demos/*.vue')`) and addressable via the URL hash
+(e.g. `#/Accordion`).
+
+```vue
+<script setup lang="ts">
+import { AccordionRoot } from '@primitives/accordion';
+// or: import { AccordionRoot } from '@primitives';
+</script>
+```
+
+## Notes
+
+- Imports resolve to `vue/primitives/src/` directly (not the built `dist/`), so
+  you can poke at primitives and see changes instantly.
+- The playground is `private: true` and is not published.
diff --git a/vue/primitives/playground/index.html b/vue/primitives/playground/index.html
new file mode 100644
index 0000000..4000fac
--- /dev/null
+++ b/vue/primitives/playground/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@robonen/primitives — playground</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/vue/primitives/playground/package.json b/vue/primitives/playground/package.json
new file mode 100644
index 0000000..03e81bd
--- /dev/null
+++ b/vue/primitives/playground/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@robonen/primitives-playground",
+  "version": "0.0.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "description": "Minimal playground for @robonen/primitives — eyeball, debug, hack on hypotheses",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@robonen/primitives": "workspace:*",
+    "vue": "catalog:",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@robonen/tsconfig": "workspace:*",
+    "@tailwindcss/vite": "^4.1.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "tailwindcss": "^4.1.0",
+    "vite": "^7.1.9",
+    "vue-tsc": "^3.2.5"
+  }
+}
diff --git a/vue/primitives/playground/src/App.vue b/vue/primitives/playground/src/App.vue
new file mode 100644
index 0000000..1161e4f
--- /dev/null
+++ b/vue/primitives/playground/src/App.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { demos } from './router';
+
+const route = useRoute();
+const query = ref('');
+
+const filtered = computed(() => {
+  const q = query.value.trim().toLowerCase();
+  return q ? demos.filter(d => d.name.toLowerCase().includes(q)) : demos;
+});
+
+const currentDemoName = computed(() => {
+  const n = route.meta.demoName;
+  return typeof n === 'string' ? n : '';
+});
+</script>
+
+<template>
+  <div class="grid h-screen grid-cols-[15rem_1fr]">
+    <aside class="flex min-h-0 flex-col border-r border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+      <header class="border-b border-neutral-200 px-4 py-3.5 font-semibold dark:border-neutral-800">
+        <RouterLink to="/" class="no-underline">
+          @robonen/primitives
+        </RouterLink>
+        <small class="mt-0.5 block font-normal text-neutral-500 dark:text-neutral-400">playground</small>
+      </header>
+
+      <input
+        v-model="query"
+        type="search"
+        placeholder="Filter demos…"
+        aria-label="Filter demos"
+        class="mx-3 my-2.5 rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1.5 outline-none focus:border-blue-600 dark:border-neutral-800 dark:bg-neutral-950 dark:focus:border-blue-400"
+      >
+
+      <nav class="overflow-y-auto px-1.5 pb-3 pt-1">
+        <div class="px-2.5 pb-1 pt-3 text-[0.6875rem] uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
+          Demos ({{ filtered.length }})
+        </div>
+        <RouterLink
+          v-for="demo in filtered"
+          :key="demo.name"
+          :to="demo.routePath"
+          custom
+        >
+          <template #default="{ href, navigate, isActive }">
+            <a
+              :href="href"
+              :aria-current="isActive ? 'page' : undefined"
+              class="block rounded-md px-2.5 py-1.5 no-underline hover:bg-neutral-900/5 aria-[current=page]:bg-blue-600 aria-[current=page]:text-white dark:hover:bg-neutral-100/5 dark:aria-[current=page]:bg-blue-500"
+              @click="navigate"
+            >
+              {{ demo.name }}
+            </a>
+          </template>
+        </RouterLink>
+
+        <div v-if="!demos.length" class="px-2.5 pb-1 pt-3 text-[0.6875rem] uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
+          No demos yet
+        </div>
+      </nav>
+    </aside>
+
+    <main class="min-w-0 overflow-auto px-7 py-6">
+      <header
+        v-if="currentDemoName"
+        class="mb-4 flex items-baseline gap-3 border-b border-neutral-200 pb-3 dark:border-neutral-800"
+      >
+        <h1 class="m-0 text-lg font-semibold">
+          {{ currentDemoName }}
+        </h1>
+        <code class="text-xs text-neutral-500 dark:text-neutral-400">src/demos/{{ currentDemoName }}.vue</code>
+      </header>
+
+      <RouterView v-slot="{ Component }">
+        <Suspense>
+          <template #default>
+            <component :is="Component" v-if="Component" />
+          </template>
+          <template #fallback>
+            <div class="text-neutral-500 dark:text-neutral-400">
+              Loading…
+            </div>
+          </template>
+        </Suspense>
+      </RouterView>
+    </main>
+  </div>
+</template>
diff --git a/vue/primitives/playground/src/demos/Accordion.vue b/vue/primitives/playground/src/demos/Accordion.vue
new file mode 100644
index 0000000..c5f9156
--- /dev/null
+++ b/vue/primitives/playground/src/demos/Accordion.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+} from '@primitives/accordion';
+
+const value = ref<string | string[] | undefined>('a');
+const type = ref<'single' | 'multiple'>('single');
+const collapsible = ref(true);
+const disabled = ref(false);
+
+const items = [
+  { value: 'a', title: 'Item A', body: 'First panel content.' },
+  { value: 'b', title: 'Item B', body: 'Second panel content.' },
+  { value: 'c', title: 'Item C', body: 'Third panel content.' },
+];
+</script>
+
+<template>
+  <section class="grid max-w-xl gap-4">
+    <div class="flex flex-wrap items-center gap-3 rounded-lg border border-neutral-200 bg-white px-3 py-2.5 dark:border-neutral-800 dark:bg-neutral-900">
+      <label class="inline-flex items-center gap-2">
+        type
+        <select v-model="type" class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 dark:border-neutral-800 dark:bg-neutral-950">
+          <option value="single">single</option>
+          <option value="multiple">multiple</option>
+        </select>
+      </label>
+      <label class="inline-flex items-center gap-1.5">
+        <input v-model="collapsible" type="checkbox"> collapsible
+      </label>
+      <label class="inline-flex items-center gap-1.5">
+        <input v-model="disabled" type="checkbox"> disabled
+      </label>
+      <output class="ml-auto font-mono text-xs text-neutral-500 dark:text-neutral-400">value = {{ JSON.stringify(value) }}</output>
+    </div>
+
+    <AccordionRoot
+      v-model="value"
+      class="grid gap-1"
+      :type="type"
+      :collapsible="collapsible"
+      :disabled="disabled"
+    >
+      <AccordionItem
+        v-for="item in items"
+        :key="item.value"
+        :value="item.value"
+        class="overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800"
+      >
+        <AccordionTrigger
+          class="block w-full cursor-pointer bg-white px-3 py-2.5 text-left data-[state=open]:bg-neutral-900/5 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-600 dark:bg-neutral-900 dark:data-[state=open]:bg-neutral-100/5 dark:focus-visible:outline-blue-400"
+        >
+          {{ item.title }}
+        </AccordionTrigger>
+        <AccordionContent class="px-3 py-2.5 text-neutral-500 dark:text-neutral-400">
+          {{ item.body }}
+        </AccordionContent>
+      </AccordionItem>
+    </AccordionRoot>
+  </section>
+</template>
diff --git a/vue/primitives/playground/src/demos/Checkbox.vue b/vue/primitives/playground/src/demos/Checkbox.vue
new file mode 100644
index 0000000..a7e193e
--- /dev/null
+++ b/vue/primitives/playground/src/demos/Checkbox.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { CheckedState } from '@primitives/checkbox';
+import { CheckboxIndicator, CheckboxRoot } from '@primitives/checkbox';
+
+const checked = ref<CheckedState>(false);
+const disabled = ref(false);
+</script>
+
+<template>
+  <section class="grid max-w-md gap-4">
+    <div class="flex flex-wrap items-center gap-3 rounded-lg border border-neutral-200 bg-white px-3 py-2.5 dark:border-neutral-800 dark:bg-neutral-900">
+      <label class="inline-flex items-center gap-1.5">
+        <input v-model="disabled" type="checkbox"> disabled
+      </label>
+      <button
+        type="button"
+        class="rounded border border-neutral-200 bg-neutral-50 px-2 py-1 text-xs hover:border-blue-600 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:border-blue-400"
+        @click="checked = 'indeterminate'"
+      >
+        set indeterminate
+      </button>
+      <output class="ml-auto font-mono text-xs text-neutral-500 dark:text-neutral-400">checked = {{ JSON.stringify(checked) }}</output>
+    </div>
+
+    <label class="inline-flex cursor-pointer items-center gap-2.5">
+      <CheckboxRoot
+        v-model:checked="checked"
+        :disabled="disabled"
+        class="inline-grid h-5 w-5 place-items-center rounded border border-neutral-200 bg-white data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white data-[state=indeterminate]:border-blue-600 data-[state=indeterminate]:bg-blue-600 data-[state=indeterminate]:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-neutral-800 dark:bg-neutral-900 dark:data-[state=checked]:border-blue-500 dark:data-[state=checked]:bg-blue-500 dark:data-[state=indeterminate]:border-blue-500 dark:data-[state=indeterminate]:bg-blue-500 dark:focus-visible:outline-blue-400"
+      >
+        <CheckboxIndicator class="text-[0.8125rem] leading-none">
+          <span v-if="checked === 'indeterminate'">–</span>
+          <span v-else-if="checked">✓</span>
+        </CheckboxIndicator>
+      </CheckboxRoot>
+      Accept terms and conditions
+    </label>
+  </section>
+</template>
diff --git a/vue/primitives/playground/src/main.ts b/vue/primitives/playground/src/main.ts
new file mode 100644
index 0000000..fff041b
--- /dev/null
+++ b/vue/primitives/playground/src/main.ts
@@ -0,0 +1,10 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import { router } from './router';
+import './styles.css';
+
+const app = createApp(App).use(router);
+
+app.config.performance = true;
+
+app.mount('#app');
diff --git a/vue/primitives/playground/src/router.ts b/vue/primitives/playground/src/router.ts
new file mode 100644
index 0000000..22f9f3c
--- /dev/null
+++ b/vue/primitives/playground/src/router.ts
@@ -0,0 +1,37 @@
+import type { Component } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from './views/Home.vue';
+import NotFoundView from './views/NotFound.vue';
+
+// Eager paths, lazy components → each demo ships as its own chunk.
+const demoModules = import.meta.glob<{ default: Component }>('./demos/*.vue');
+
+export interface DemoEntry {
+  name: string;
+  path: string;
+  routePath: string;
+}
+
+export const demos: DemoEntry[] = Object.keys(demoModules)
+  .map((path) => {
+    const name = path.replace(/^.*\/demos\//, '').replace(/\.vue$/, '');
+    return { name, path, routePath: `/demo/${encodeURIComponent(name)}` };
+  })
+  .sort((a, b) => a.name.localeCompare(b.name));
+
+const demoRoutes: RouteRecordRaw[] = demos.map(demo => ({
+  path: demo.routePath,
+  name: `demo:${demo.name}`,
+  component: demoModules[demo.path]!,
+  meta: { demoName: demo.name },
+}));
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/', name: 'home', component: HomeView },
+    ...demoRoutes,
+    { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFoundView },
+  ],
+});
diff --git a/vue/primitives/playground/src/styles.css b/vue/primitives/playground/src/styles.css
new file mode 100644
index 0000000..6fc9c55
--- /dev/null
+++ b/vue/primitives/playground/src/styles.css
@@ -0,0 +1,12 @@
+@import "tailwindcss";
+
+@layer base {
+  html,
+  body,
+  #app {
+    @apply m-0 h-full bg-neutral-50 text-sm text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-100;
+    color-scheme: light dark;
+  }
+}
+
+
diff --git a/vue/primitives/playground/src/views/Home.vue b/vue/primitives/playground/src/views/Home.vue
new file mode 100644
index 0000000..fb46194
--- /dev/null
+++ b/vue/primitives/playground/src/views/Home.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { demos } from '../router';
+</script>
+
+<template>
+  <section class="max-w-3xl">
+    <h1 class="mb-2 mt-0 text-2xl font-semibold">
+      @robonen/primitives playground
+    </h1>
+    <p class="text-neutral-500 dark:text-neutral-400">
+      Pick a demo from the sidebar, or drop a new <code class="rounded border border-neutral-200 bg-white px-1.5 py-px text-xs dark:border-neutral-800 dark:bg-neutral-900">.vue</code> file into
+      <code class="rounded border border-neutral-200 bg-white px-1.5 py-px text-xs dark:border-neutral-800 dark:bg-neutral-900">src/demos/</code> — it will be picked up automatically and become
+      addressable at <code class="rounded border border-neutral-200 bg-white px-1.5 py-px text-xs dark:border-neutral-800 dark:bg-neutral-900">/demo/&lt;FileName&gt;</code>.
+    </p>
+
+    <div class="mt-4 grid gap-2 grid-cols-[repeat(auto-fill,minmax(11.25rem,1fr))]">
+      <RouterLink
+        v-for="demo in demos"
+        :key="demo.name"
+        :to="demo.routePath"
+        class="grid gap-1 rounded-lg border border-neutral-200 bg-white p-3 no-underline hover:border-blue-600 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-blue-400"
+      >
+        <strong>{{ demo.name }}</strong>
+        <code class="text-neutral-500 dark:text-neutral-400">{{ demo.routePath }}</code>
+      </RouterLink>
+    </div>
+
+    <p v-if="!demos.length" class="text-neutral-500 dark:text-neutral-400">
+      No demos found yet.
+    </p>
+  </section>
+</template>
diff --git a/vue/primitives/playground/src/views/NotFound.vue b/vue/primitives/playground/src/views/NotFound.vue
new file mode 100644
index 0000000..98b250d
--- /dev/null
+++ b/vue/primitives/playground/src/views/NotFound.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+</script>
+
+<template>
+  <section class="grid max-w-md gap-2">
+    <h1 class="m-0 text-3xl font-semibold">
+      404
+    </h1>
+    <p>
+      No demo matches <code class="rounded border border-neutral-200 bg-white px-1.5 py-px dark:border-neutral-800 dark:bg-neutral-900">{{ route.fullPath }}</code>.
+    </p>
+    <RouterLink to="/" class="text-blue-600 hover:underline dark:text-blue-400">
+      ← Back to index
+    </RouterLink>
+  </section>
+</template>
diff --git a/vue/primitives/playground/tsconfig.json b/vue/primitives/playground/tsconfig.json
new file mode 100644
index 0000000..bb89bae
--- /dev/null
+++ b/vue/primitives/playground/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.vue.json",
+  "compilerOptions": {
+    "types": ["vite/client", "node"],
+    "allowImportingTsExtensions": false,
+    "paths": {
+      "@primitives/*": ["../src/*"],
+      "@primitives": ["../src/index.ts"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts"]
+}
diff --git a/vue/primitives/playground/vite.config.ts b/vue/primitives/playground/vite.config.ts
new file mode 100644
index 0000000..217533d
--- /dev/null
+++ b/vue/primitives/playground/vite.config.ts
@@ -0,0 +1,31 @@
+import { URL, fileURLToPath } from 'node:url';
+import tailwindcss from '@tailwindcss/vite';
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [vue(), tailwindcss()],
+  define: {
+    __DEV__: JSON.stringify(mode !== 'production'),
+  },
+  resolve: {
+    alias: [
+      // Order matters: subpath alias must come before the bare-specifier one.
+      {
+        find: /^@primitives\/(.*)$/,
+        replacement: fileURLToPath(new URL('../src/$1', import.meta.url)),
+      },
+      {
+        find: /^@primitives$/,
+        replacement: fileURLToPath(new URL('../src/index.ts', import.meta.url)),
+      },
+    ],
+  },
+  server: {
+    port: 5180,
+    fs: {
+      // Allow importing from primitives source one level up.
+      allow: [fileURLToPath(new URL('../', import.meta.url))],
+    },
+  },
+}));
diff --git a/vue/primitives/src/accordion/AccordionContent.vue b/vue/primitives/src/accordion/AccordionContent.vue
new file mode 100644
index 0000000..f2136ec
--- /dev/null
+++ b/vue/primitives/src/accordion/AccordionContent.vue
@@ -0,0 +1,39 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AccordionContentProps extends PrimitiveProps {
+  /** Keep content mounted even when closed. */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { useAccordionContext, useAccordionItemContext } from './context';
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div', forceMount = false } = defineProps<AccordionContentProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useAccordionContext();
+const item = useAccordionItemContext();
+</script>
+
+<template>
+  <Presence :present="forceMount || item.open.value">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="region"
+      :id="item.contentId.value"
+      :aria-labelledby="item.triggerId.value"
+      :data-state="item.open.value ? 'open' : 'closed'"
+      :data-disabled="item.disabled.value ? '' : undefined"
+      :data-orientation="ctx.orientation.value"
+      :hidden="!item.open.value || undefined"
+    >
+      <slot :open="item.open.value" />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/accordion/AccordionItem.vue b/vue/primitives/src/accordion/AccordionItem.vue
new file mode 100644
index 0000000..3012b02
--- /dev/null
+++ b/vue/primitives/src/accordion/AccordionItem.vue
@@ -0,0 +1,49 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AccordionItemProps extends PrimitiveProps {
+  /** Unique value for this item. */
+  value: string;
+  /** Disable this item. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { provideAccordionItemContext, useAccordionContext } from './context';
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { value, disabled = false, as = 'div' } = defineProps<AccordionItemProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const ctx = useAccordionContext();
+const isOpen = computed(() => ctx.isOpen(value));
+const isDisabled = computed(() => ctx.disabled.value || disabled);
+
+const triggerId = useId(undefined, 'accordion-trigger');
+const contentId = useId(undefined, 'accordion-content');
+
+provideAccordionItemContext({
+  value,
+  open: isOpen,
+  disabled: isDisabled,
+  triggerId,
+  contentId,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-state="isOpen ? 'open' : 'closed'"
+    :data-disabled="isDisabled ? '' : undefined"
+    :data-orientation="ctx.orientation.value"
+  >
+    <slot :open="isOpen" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/accordion/AccordionRoot.vue b/vue/primitives/src/accordion/AccordionRoot.vue
new file mode 100644
index 0000000..db32339
--- /dev/null
+++ b/vue/primitives/src/accordion/AccordionRoot.vue
@@ -0,0 +1,153 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { RovingDirection } from '../utils/roving-focus';
+
+export interface AccordionRootProps extends PrimitiveProps {
+  /** Current open value(s) for controlled mode. */
+  modelValue?: string | string[];
+
+  /** Initial value(s) for uncontrolled mode. */
+  defaultValue?: string | string[];
+
+  /** 'single' allows one panel; 'multiple' allows many. @default 'single' */
+  type?: 'single' | 'multiple';
+
+  /** Allow closing all panels in single mode. @default false */
+  collapsible?: boolean;
+
+  /** Disable all items. */
+  disabled?: boolean;
+
+  /** Orientation of the accordion. @default 'vertical' */
+  orientation?: 'horizontal' | 'vertical';
+
+  /** Writing direction. @default 'ltr' */
+  dir?: RovingDirection;
+
+  /** Wrap keyboard navigation. @default true */
+  loop?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, shallowRef, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { Primitive } from '../primitive';
+import { provideAccordionContext } from './context';
+import { toArray } from '@robonen/stdlib';
+import { useCollectionProvider } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  type = 'single',
+  collapsible = false,
+  disabled = false,
+  orientation = 'vertical',
+  dir = 'ltr',
+  loop = true,
+  modelValue,
+  defaultValue,
+  as = 'div',
+} = defineProps<AccordionRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<{ 'update:modelValue': [value: string | string[] | undefined] }>();
+
+type RovingAction = NonNullable<ReturnType<typeof rovingKeyToAction>>;
+
+const openSet = shallowRef<Set<string>>(
+  new Set(toArray(modelValue ?? defaultValue)),
+);
+
+function setEqualsArray(set: Set<string>, arr: string[]): boolean {
+  if (arr.length !== set.size) return false;
+  for (let i = 0; i < arr.length; i++) if (!set.has(arr[i]!)) return false;
+  return true;
+}
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  const arr = toArray(v);
+  if (setEqualsArray(openSet.value, arr)) return;
+  openSet.value = new Set(arr);
+});
+
+
+function nextOpenSet(cur: Set<string>, value: string): Set<string> {
+  const present = cur.has(value);
+
+  if (type === 'single') {
+    if (!present) return new Set([value]);
+    return collapsible ? new Set() : cur;
+  }
+
+  const next = new Set(cur);
+  if (present) next.delete(value);
+  else next.add(value);
+  return next;
+}
+
+function toEmitValue(set: Set<string>): string | string[] | undefined {
+  return type === 'single' ? set.values().next().value : [...set];
+}
+
+function commit(next: Set<string>): void {
+  openSet.value = next;
+  emit('update:modelValue', toEmitValue(next));
+}
+
+function isOpen(value: string): boolean {
+  return openSet.value.has(value);
+}
+
+function toggle(value: string): void {
+  if (disabled) return;
+  const cur = openSet.value;
+  const next = nextOpenSet(cur, value);
+  if (next !== cur) commit(next);
+}
+
+const { getItems, CollectionSlot } = useCollectionProvider();
+const triggerElements = computed(() => getItems(true).map(i => i.ref));
+
+function resolveFocusIndex(action: RovingAction, current: number, count: number): number {
+  if (action.absolute === 'home') return 0;
+  if (action.absolute === 'end') return count - 1;
+  return resolveNextIndex(current === -1 ? 0 : current, action.delta, count, loop);
+}
+
+function onTriggerKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  const action = rovingKeyToAction(event, { orientation, dir, loop });
+  if (!action) return;
+  event.preventDefault();
+  const enabled = triggerElements.value.filter(x => !x.hasAttribute('data-disabled'));
+  if (enabled.length === 0) return;
+  enabled[resolveFocusIndex(action, enabled.indexOf(el), enabled.length)]!.focus();
+}
+
+provideAccordionContext({
+  disabled: toRef(() => disabled),
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  loop: toRef(() => loop),
+  collapsible: toRef(() => collapsible),
+  triggerElements,
+  isOpen,
+  toggle,
+  onTriggerKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :data-orientation="orientation"
+      :data-disabled="disabled ? '' : undefined"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/accordion/AccordionTrigger.vue b/vue/primitives/src/accordion/AccordionTrigger.vue
new file mode 100644
index 0000000..b09f9d9
--- /dev/null
+++ b/vue/primitives/src/accordion/AccordionTrigger.vue
@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AccordionTriggerProps extends PrimitiveProps {
+}
+</script>
+
+<script setup lang="ts">
+import { useAccordionContext, useAccordionItemContext } from './context';
+import { Primitive } from '../primitive';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<AccordionTriggerProps>();
+
+const ctx = useAccordionContext();
+const item = useAccordionItemContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+function onClick(): void {
+  if (item.disabled.value) return;
+  ctx.toggle(item.value);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (!currentElement.value) return;
+  ctx.onTriggerKeyDown(event, currentElement.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :as="as"
+      :ref="forwardRef"
+      :type="as === 'button' ? 'button' : undefined"
+      :id="item.triggerId.value"
+      :aria-expanded="item.open.value"
+      :aria-controls="item.contentId.value"
+      :aria-disabled="item.disabled.value || undefined"
+      :data-state="item.open.value ? 'open' : 'closed'"
+      :data-disabled="item.disabled.value ? '' : undefined"
+      :data-orientation="ctx.orientation.value"
+      :disabled="item.disabled.value || undefined"
+      @click="onClick"
+      @keydown="onKeyDown"
+    >
+      <slot :open="item.open.value" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/accordion/__test__/Accordion.test.ts b/vue/primitives/src/accordion/__test__/Accordion.test.ts
new file mode 100644
index 0000000..ed9d72e
--- /dev/null
+++ b/vue/primitives/src/accordion/__test__/Accordion.test.ts
@@ -0,0 +1,242 @@
+import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger } from '../index';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createAccordion(rootProps: Record<string, unknown> = {}, itemCount = 3) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () => h(AccordionRoot, { ...rootProps }, {
+          default: () => Array.from({ length: itemCount }, (_, i) => {
+            const val = String.fromCodePoint(97 + i); // 'a', 'b', 'c'
+            return h(AccordionItem, { value: val, key: val, disabled: i === 2 ? true : undefined }, {
+              default: () => [
+                h(AccordionTrigger, null, { default: () => `Trigger ${val.toUpperCase()}` }),
+                h(AccordionContent, null, { default: () => `Content ${val.toUpperCase()}` }),
+              ],
+            });
+          }),
+        });
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('Accordion', () => {
+  it('renders items with correct structure', () => {
+    const w = createAccordion();
+    const triggers = w.findAll('button');
+    expect(triggers).toHaveLength(3);
+    triggers.forEach((t) => {
+      expect(t.attributes('aria-expanded')).toBeDefined();
+      expect(t.attributes('aria-controls')).toBeDefined();
+    });
+    w.unmount();
+  });
+
+  it('all panels closed by default (single, non-collapsible)', () => {
+    const w = createAccordion();
+    const regions = w.findAll('[role="region"]');
+    expect(regions).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('defaultValue opens a panel', () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    const regions = w.findAll('[role="region"]');
+    expect(regions).toHaveLength(1);
+    expect(regions[0]!.text()).toBe('Content A');
+    w.unmount();
+  });
+
+  it('click toggles panel open/closed (single, collapsible)', async () => {
+    const w = createAccordion({ collapsible: true });
+    const triggers = w.findAll('button');
+
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    expect(w.findAll('[role="region"]')).toHaveLength(1);
+    expect(w.find('[role="region"]').text()).toBe('Content A');
+
+    // clicking again closes it (collapsible)
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    expect(w.findAll('[role="region"]')).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('single mode: opening one closes previous', async () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    const triggers = w.findAll('button');
+
+    await triggers[1]!.trigger('click');
+    await nextTick();
+    const regions = w.findAll('[role="region"]');
+    expect(regions).toHaveLength(1);
+    expect(regions[0]!.text()).toBe('Content B');
+    w.unmount();
+  });
+
+  it('single mode: cannot close when not collapsible', async () => {
+    const w = createAccordion({ defaultValue: 'a', collapsible: false });
+    const triggers = w.findAll('button');
+
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    // should stay open
+    expect(w.findAll('[role="region"]')).toHaveLength(1);
+    expect(w.find('[role="region"]').text()).toBe('Content A');
+    w.unmount();
+  });
+
+  it('multiple mode: multiple panels open', async () => {
+    const w = createAccordion({ type: 'multiple' });
+    const triggers = w.findAll('button');
+
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    await triggers[1]!.trigger('click');
+    await nextTick();
+
+    const regions = w.findAll('[role="region"]');
+    expect(regions).toHaveLength(2);
+    w.unmount();
+  });
+
+  it('multiple mode: toggle individual items', async () => {
+    const w = createAccordion({ type: 'multiple', defaultValue: ['a', 'b'] });
+
+    expect(w.findAll('[role="region"]')).toHaveLength(2);
+
+    const triggers = w.findAll('button');
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    // 'a' closed, 'b' still open
+    const regions = w.findAll('[role="region"]');
+    expect(regions).toHaveLength(1);
+    expect(regions[0]!.text()).toBe('Content B');
+    w.unmount();
+  });
+
+  it('v-model works (single)', async () => {
+    const value = ref<string | undefined>('a');
+    const w = mount(
+      defineComponent({
+        setup() {
+          return () => h(AccordionRoot, {
+            modelValue: value.value,
+            'onUpdate:modelValue': (v: string | string[] | undefined) => { value.value = v as string | undefined; },
+            collapsible: true,
+          }, {
+            default: () => [
+              h(AccordionItem, { value: 'a' }, {
+                default: () => [
+                  h(AccordionTrigger, null, { default: () => 'A' }),
+                  h(AccordionContent, null, { default: () => 'PA' }),
+                ],
+              }),
+              h(AccordionItem, { value: 'b' }, {
+                default: () => [
+                  h(AccordionTrigger, null, { default: () => 'B' }),
+                  h(AccordionContent, null, { default: () => 'PB' }),
+                ],
+              }),
+            ],
+          });
+        },
+      }),
+      { attachTo: document.body },
+    );
+
+    expect(w.find('[role="region"]').text()).toBe('PA');
+    const triggers = w.findAll('button');
+    await triggers[1]!.trigger('click');
+    await nextTick();
+    expect(value.value).toBe('b');
+    w.unmount();
+  });
+
+  it('keyboard navigation (vertical, ArrowDown/ArrowUp)', async () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    await nextTick();
+    const triggers = w.findAll('button');
+    const trigA = triggers[0]!.element as HTMLElement;
+    trigA.focus();
+
+    press(trigA, 'ArrowDown');
+    await nextTick();
+    expect(document.activeElement).toBe(triggers[1]!.element);
+
+    press(triggers[1]!.element, 'ArrowUp');
+    await nextTick();
+    expect(document.activeElement).toBe(triggers[0]!.element);
+    w.unmount();
+  });
+
+  it('Home/End keys move focus', async () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    await nextTick();
+    const triggers = w.findAll('button');
+    const trigA = triggers[0]!.element as HTMLElement;
+    trigA.focus();
+
+    press(trigA, 'End');
+    await nextTick();
+    // End goes to last enabled trigger (B, since C is disabled)
+    expect(document.activeElement).toBe(triggers[1]!.element);
+
+    press(triggers[1]!.element, 'Home');
+    await nextTick();
+    expect(document.activeElement).toBe(triggers[0]!.element);
+    w.unmount();
+  });
+
+  it('disabled item cannot be toggled', async () => {
+    const w = createAccordion({ type: 'multiple' });
+    const triggers = w.findAll('button');
+    await triggers[2]!.trigger('click');
+    await nextTick();
+    expect(w.findAll('[role="region"]')).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('disabled root blocks all interaction', async () => {
+    const w = createAccordion({ disabled: true });
+    const triggers = w.findAll('button');
+    await triggers[0]!.trigger('click');
+    await nextTick();
+    expect(w.findAll('[role="region"]')).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('data-state and aria-expanded reflect open state', async () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    const triggers = w.findAll('button');
+    expect(triggers[0]!.attributes('aria-expanded')).toBe('true');
+    expect(triggers[0]!.attributes('data-state')).toBe('open');
+    expect(triggers[1]!.attributes('aria-expanded')).toBe('false');
+    expect(triggers[1]!.attributes('data-state')).toBe('closed');
+    w.unmount();
+  });
+
+  it('content has role=region with aria-labelledby', () => {
+    const w = createAccordion({ defaultValue: 'a' });
+    const region = w.find('[role="region"]');
+    expect(region.attributes('aria-labelledby')).toBeDefined();
+    const trigger = w.findAll('button')[0]!;
+    expect(region.attributes('aria-labelledby')).toBe(trigger.attributes('id'));
+    w.unmount();
+  });
+
+  it('orientation reflects in data-orientation', () => {
+    const w = createAccordion({ orientation: 'horizontal' });
+    expect(w.find('[data-orientation="horizontal"]').exists()).toBe(true);
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/accordion/context.ts b/vue/primitives/src/accordion/context.ts
new file mode 100644
index 0000000..be8f067
--- /dev/null
+++ b/vue/primitives/src/accordion/context.ts
@@ -0,0 +1,33 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface AccordionContext {
+  disabled: Ref<boolean>;
+  orientation: Ref<'horizontal' | 'vertical'>;
+  direction: Ref<'ltr' | 'rtl'>;
+  loop: Ref<boolean>;
+  collapsible: Ref<boolean>;
+  /** DOM-ordered trigger elements, sourced from the internal Collection. */
+  triggerElements: ComputedRef<HTMLElement[]>;
+  isOpen: (value: string) => boolean;
+  toggle: (value: string) => void;
+  onTriggerKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+export const {
+  inject: useAccordionContext,
+  provide: provideAccordionContext,
+} = useContextFactory<AccordionContext>('AccordionContext');
+
+export interface AccordionItemContext {
+  value: string;
+  open: ComputedRef<boolean>;
+  disabled: ComputedRef<boolean>;
+  triggerId: ComputedRef<string>;
+  contentId: ComputedRef<string>;
+}
+
+export const {
+  inject: useAccordionItemContext,
+  provide: provideAccordionItemContext,
+} = useContextFactory<AccordionItemContext>('AccordionItemContext');
diff --git a/vue/primitives/src/accordion/index.ts b/vue/primitives/src/accordion/index.ts
new file mode 100644
index 0000000..fbdb0c6
--- /dev/null
+++ b/vue/primitives/src/accordion/index.ts
@@ -0,0 +1,12 @@
+export { default as AccordionRoot } from './AccordionRoot.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { default as AccordionTrigger } from './AccordionTrigger.vue';
+export { default as AccordionContent } from './AccordionContent.vue';
+
+export { provideAccordionContext, useAccordionContext, provideAccordionItemContext, useAccordionItemContext } from './context';
+
+export type { AccordionRootProps } from './AccordionRoot.vue';
+export type { AccordionItemProps } from './AccordionItem.vue';
+export type { AccordionTriggerProps } from './AccordionTrigger.vue';
+export type { AccordionContentProps } from './AccordionContent.vue';
+export type { AccordionContext, AccordionItemContext } from './context';
diff --git a/vue/primitives/src/alert-dialog/AlertDialogAction.vue b/vue/primitives/src/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000..23f30e3
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AlertDialogActionProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogClose } from '../dialog';
+
+const { as = 'button' } = defineProps<AlertDialogActionProps>();
+</script>
+
+<template>
+  <DialogClose :as="as" data-alert-dialog-action>
+    <slot />
+  </DialogClose>
+</template>
diff --git a/vue/primitives/src/alert-dialog/AlertDialogCancel.vue b/vue/primitives/src/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000..cdeb110
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AlertDialogCancelProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { DialogClose } from '../dialog';
+
+const { as = 'button' } = defineProps<AlertDialogCancelProps>();
+</script>
+
+<template>
+  <DialogClose :as="as" data-alert-dialog-cancel>
+    <slot />
+  </DialogClose>
+</template>
diff --git a/vue/primitives/src/alert-dialog/AlertDialogContent.vue b/vue/primitives/src/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000..f5b7ee0
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { DialogContentEmits, DialogContentProps } from '../dialog';
+
+export interface AlertDialogContentProps extends Omit<DialogContentProps, 'role'> {}
+export type AlertDialogContentEmits = DialogContentEmits;
+</script>
+
+<script setup lang="ts">
+import { DialogContent } from '../dialog';
+
+const props = defineProps<AlertDialogContentProps>();
+const emit = defineEmits<AlertDialogContentEmits>();
+
+function onOpenAutoFocus(event: Event) {
+  emit('openAutoFocus', event);
+  if (event.defaultPrevented) return;
+  queueMicrotask(() => {
+    const content = document.querySelector<HTMLElement>('[data-alert-dialog-content]');
+    const cancel = content?.querySelector<HTMLElement>('[data-alert-dialog-cancel]');
+    if (cancel) {
+      event.preventDefault();
+      cancel.focus();
+    }
+  });
+}
+</script>
+
+<template>
+  <DialogContent
+    v-bind="props"
+    role="alertdialog"
+    data-alert-dialog-content
+    @open-auto-focus="onOpenAutoFocus"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="(e: PointerEvent | MouseEvent) => { e.preventDefault(); emit('pointerDownOutside', e); }"
+    @focus-outside="(e: FocusEvent) => { e.preventDefault(); emit('focusOutside', e); }"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+  >
+    <slot />
+  </DialogContent>
+</template>
diff --git a/vue/primitives/src/alert-dialog/AlertDialogRoot.vue b/vue/primitives/src/alert-dialog/AlertDialogRoot.vue
new file mode 100644
index 0000000..af3928c
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/AlertDialogRoot.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { DialogRootProps } from '../dialog';
+
+export interface AlertDialogRootProps extends Omit<DialogRootProps, 'modal'> {}
+</script>
+
+<script setup lang="ts">
+import { DialogRoot } from '../dialog';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<AlertDialogRootProps>();
+const openModel = defineModel<boolean | undefined>('open', { default: undefined });
+</script>
+
+<template>
+  <DialogRoot
+    :default-open="props.defaultOpen"
+    :modal="true"
+    :open="openModel"
+    @update:open="openModel = $event"
+  >
+    <slot :open="openModel" />
+  </DialogRoot>
+</template>
diff --git a/vue/primitives/src/alert-dialog/__test__/AlertDialog.test.ts b/vue/primitives/src/alert-dialog/__test__/AlertDialog.test.ts
new file mode 100644
index 0000000..a66c4c7
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/__test__/AlertDialog.test.ts
@@ -0,0 +1,118 @@
+import { mount } from '@vue/test-utils';
+import type { VueWrapper } from '@vue/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import {
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+  delete document.body.dataset['dismissableBlocking'];
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountAlert(initialOpen = true) {
+  const open = ref(initialOpen);
+  const Harness = defineComponent({
+    setup() {
+      return () => h(
+        AlertDialogRoot,
+        {
+          open: open.value,
+          'onUpdate:open': (v: boolean | undefined) => { open.value = v!; },
+        },
+        {
+          default: () => [
+            h(AlertDialogTrigger, null, { default: () => 'Open' }),
+            h(AlertDialogPortal, null, {
+              default: () => [
+                h(AlertDialogOverlay),
+                h(AlertDialogContent, null, {
+                  default: () => [
+                    h(AlertDialogTitle, null, { default: () => 'Are you sure?' }),
+                    h(AlertDialogDescription, null, { default: () => 'This cannot be undone.' }),
+                    h(AlertDialogCancel, null, { default: () => 'Cancel' }),
+                    h(AlertDialogAction, null, { default: () => 'OK' }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        },
+      );
+    },
+  });
+  const w = track(mount(Harness, { attachTo: document.body }));
+  return { wrapper: w, open };
+}
+
+describe('AlertDialog', () => {
+  it('renders content with role="alertdialog"', async () => {
+    mountAlert(true);
+    await nextTick();
+    await nextTick();
+    const content = document.querySelector('[data-alert-dialog-content]');
+    expect(content).toBeTruthy();
+    expect(content!.getAttribute('role')).toBe('alertdialog');
+  });
+
+  it('labels content via Title and describes via Description', async () => {
+    mountAlert(true);
+    await nextTick();
+    await nextTick();
+    const content = document.querySelector<HTMLElement>('[data-alert-dialog-content]')!;
+    const labelledby = content.getAttribute('aria-labelledby');
+    const describedby = content.getAttribute('aria-describedby');
+    expect(labelledby).toMatch(/dialog-title/);
+    expect(describedby).toMatch(/dialog-description/);
+    expect(document.getElementById(labelledby!)?.textContent).toBe('Are you sure?');
+    expect(document.getElementById(describedby!)?.textContent).toBe('This cannot be undone.');
+  });
+
+  it('Cancel button closes the dialog', async () => {
+    const { open } = mountAlert(true);
+    await nextTick();
+    await nextTick();
+    const cancel = document.querySelector<HTMLButtonElement>('[data-alert-dialog-cancel]')!;
+    cancel.click();
+    await nextTick();
+    await nextTick();
+    expect(open.value).toBe(false);
+  });
+
+  it('Action button closes the dialog', async () => {
+    const { open } = mountAlert(true);
+    await nextTick();
+    await nextTick();
+    const action = document.querySelector<HTMLButtonElement>('[data-alert-dialog-action]')!;
+    action.click();
+    await nextTick();
+    await nextTick();
+    expect(open.value).toBe(false);
+  });
+
+  it('Cancel and Action carry data attributes', async () => {
+    mountAlert(true);
+    await nextTick();
+    await nextTick();
+    expect(document.querySelector('[data-alert-dialog-cancel]')).toBeTruthy();
+    expect(document.querySelector('[data-alert-dialog-action]')).toBeTruthy();
+  });
+});
diff --git a/vue/primitives/src/alert-dialog/index.ts b/vue/primitives/src/alert-dialog/index.ts
new file mode 100644
index 0000000..761d675
--- /dev/null
+++ b/vue/primitives/src/alert-dialog/index.ts
@@ -0,0 +1,11 @@
+export { DialogDescription as AlertDialogDescription, DialogOverlay as AlertDialogOverlay, DialogPortal as AlertDialogPortal, DialogTitle as AlertDialogTitle, DialogTrigger as AlertDialogTrigger } from '../dialog';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+
+export { default as AlertDialogRoot } from './AlertDialogRoot.vue';
+
+export type { AlertDialogActionProps } from './AlertDialogAction.vue';
+export type { AlertDialogCancelProps } from './AlertDialogCancel.vue';
+export type { AlertDialogContentEmits, AlertDialogContentProps } from './AlertDialogContent.vue';
+export type { AlertDialogRootProps } from './AlertDialogRoot.vue';
diff --git a/vue/primitives/src/aspect-ratio/AspectRatio.vue b/vue/primitives/src/aspect-ratio/AspectRatio.vue
new file mode 100644
index 0000000..940ed27
--- /dev/null
+++ b/vue/primitives/src/aspect-ratio/AspectRatio.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AspectRatioProps extends PrimitiveProps {
+  /**
+   * Desired width-to-height ratio (e.g. `16 / 9`, `1`, `4 / 3`).
+   * @default 1
+   */
+  ratio?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+useForwardExpose();
+
+const { ratio = 1, as = 'div' } = defineProps<AspectRatioProps>();
+
+const wrapperStyle = {
+  position: 'relative' as const,
+  width: '100%',
+  paddingBottom: `${(1 / ratio) * 100}%`,
+};
+
+// Hoisted constant — the inner style never depends on props, so a single
+// module-level object is reused across all instances.
+const INNER_STYLE = {
+  position: 'absolute' as const,
+  inset: 0,
+};
+</script>
+
+<template>
+  <div :style="wrapperStyle" data-aspect-ratio-wrapper>
+    <Primitive :as="as" :style="INNER_STYLE" :data-aspect-ratio="true">
+      <slot />
+    </Primitive>
+  </div>
+</template>
diff --git a/vue/primitives/src/aspect-ratio/__test__/AspectRatio.test.ts b/vue/primitives/src/aspect-ratio/__test__/AspectRatio.test.ts
new file mode 100644
index 0000000..89eb302
--- /dev/null
+++ b/vue/primitives/src/aspect-ratio/__test__/AspectRatio.test.ts
@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { AspectRatio } from '../index';
+
+describe('AspectRatio', () => {
+  it('renders with default 1:1 ratio', () => {
+    const wrapper = mount(AspectRatio);
+    const outer = wrapper.element as HTMLElement;
+    expect(outer.style.paddingBottom).toBe('100%');
+  });
+
+  it('computes padding-bottom from ratio', () => {
+    const wrapper = mount(AspectRatio, { props: { ratio: 16 / 9 } });
+    const outer = wrapper.element as HTMLElement;
+    expect(outer.style.paddingBottom).toMatch(/^56\.25%$/);
+  });
+
+  it('places inner element absolutely covering the wrapper', () => {
+    const wrapper = mount(AspectRatio, { props: { ratio: 4 / 3 }, slots: { default: '<img />' } });
+    const inner = wrapper.element.firstElementChild as HTMLElement;
+    expect(inner.style.position).toBe('absolute');
+    expect(inner.getAttribute('data-aspect-ratio')).toBe('true');
+  });
+});
diff --git a/vue/primitives/src/aspect-ratio/index.ts b/vue/primitives/src/aspect-ratio/index.ts
new file mode 100644
index 0000000..a900beb
--- /dev/null
+++ b/vue/primitives/src/aspect-ratio/index.ts
@@ -0,0 +1,2 @@
+export { default as AspectRatio } from './AspectRatio.vue';
+export type { AspectRatioProps } from './AspectRatio.vue';
diff --git a/vue/primitives/src/avatar/AvatarFallback.vue b/vue/primitives/src/avatar/AvatarFallback.vue
new file mode 100644
index 0000000..f8e80f7
--- /dev/null
+++ b/vue/primitives/src/avatar/AvatarFallback.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AvatarFallbackProps extends PrimitiveProps {
+
+  /** Delay in ms before rendering the fallback (avoids flicker on fast networks). */
+  delayMs?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useAvatarContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'span', delayMs = 0 } = defineProps<AvatarFallbackProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const ctx = useAvatarContext();
+
+const canShow = ref<boolean>(delayMs === 0);
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+watch(() => ctx.imageLoadingStatus.value, (status) => {
+  if (status === 'loaded') {
+    canShow.value = false;
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    return;
+  }
+  if (delayMs === 0) {
+    canShow.value = true;
+    return;
+  }
+  if (timer) clearTimeout(timer);
+  canShow.value = false;
+  timer = setTimeout(() => {
+    canShow.value = true;
+  }, delayMs);
+}, { immediate: true });
+
+onBeforeUnmount(() => {
+  if (timer) clearTimeout(timer);
+});
+
+const shouldRender = computed(() => canShow.value && ctx.imageLoadingStatus.value !== 'loaded');
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" v-if="shouldRender" :as="as">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/avatar/AvatarImage.vue b/vue/primitives/src/avatar/AvatarImage.vue
new file mode 100644
index 0000000..ce262b9
--- /dev/null
+++ b/vue/primitives/src/avatar/AvatarImage.vue
@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { AvatarImageLoadingStatus } from './context';
+
+export interface AvatarImageProps extends PrimitiveProps {
+
+  src?: string;
+  alt?: string;
+  /** Optional hook to reject loaded images by their dimensions/src. */
+  onLoadingStatusChange?: (status: AvatarImageLoadingStatus) => void;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useAvatarContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'img', src, alt, onLoadingStatusChange } = defineProps<AvatarImageProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const ctx = useAvatarContext();
+
+const status = ref<AvatarImageLoadingStatus>('idle');
+
+function setStatus(next: AvatarImageLoadingStatus) {
+  status.value = next;
+  ctx.onImageLoadingStatusChange(next);
+  onLoadingStatusChange?.(next);
+}
+
+let currentImage: HTMLImageElement | null = null;
+
+function load(nextSrc: string | undefined) {
+  if (currentImage) {
+    currentImage.onload = null;
+    currentImage.onerror = null;
+    currentImage = null;
+  }
+  if (!nextSrc) {
+    setStatus('error');
+    return;
+  }
+  if (typeof globalThis.window === 'undefined') {
+    setStatus('loading');
+    return;
+  }
+  setStatus('loading');
+  const img = new globalThis.Image();
+  currentImage = img;
+  img.onload = () => {
+    if (currentImage === img) setStatus('loaded');
+  };
+  img.onerror = () => {
+    if (currentImage === img) setStatus('error');
+  };
+  img.src = nextSrc;
+}
+
+watch(() => src, load, { immediate: true });
+
+onBeforeUnmount(() => {
+  if (currentImage) {
+    currentImage.onload = null;
+    currentImage.onerror = null;
+    currentImage = null;
+  }
+});
+
+const shouldRender = computed(() => status.value === 'loaded');
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    v-if="shouldRender"
+    :src="src"
+    :alt="alt"
+  />
+</template>
diff --git a/vue/primitives/src/avatar/AvatarRoot.vue b/vue/primitives/src/avatar/AvatarRoot.vue
new file mode 100644
index 0000000..4a3bc9a
--- /dev/null
+++ b/vue/primitives/src/avatar/AvatarRoot.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface AvatarRootProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import type { AvatarImageLoadingStatus } from './context';
+import { Primitive } from '../primitive';
+import { provideAvatarContext } from './context';
+import { ref } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'span' } = defineProps<AvatarRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const imageLoadingStatus = ref<AvatarImageLoadingStatus>('idle');
+
+provideAvatarContext({
+  imageLoadingStatus,
+  onImageLoadingStatusChange: (status) => { imageLoadingStatus.value = status; },
+});
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :as="as" :data-status="imageLoadingStatus">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/avatar/__test__/Avatar.test.ts b/vue/primitives/src/avatar/__test__/Avatar.test.ts
new file mode 100644
index 0000000..f2a15a8
--- /dev/null
+++ b/vue/primitives/src/avatar/__test__/Avatar.test.ts
@@ -0,0 +1,93 @@
+import { mount } from '@vue/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import { AvatarFallback, AvatarImage, AvatarRoot } from '../index';
+
+class MockImage {
+  onload: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  private _src = '';
+  set src(value: string) {
+    this._src = value;
+    queueMicrotask(() => {
+      if (value.includes('broken')) this.onerror?.();
+      else this.onload?.();
+    });
+  }
+
+  get src() { return this._src; }
+}
+
+describe('Avatar', () => {
+  beforeEach(() => {
+    vi.stubGlobal('Image', MockImage as unknown as typeof Image);
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('renders fallback until image loads', async () => {
+    const w = mount(defineComponent({
+      setup: () => () => h(AvatarRoot, null, {
+        default: () => [
+          h(AvatarImage, { src: '/ok.png', alt: 'user' }),
+          h(AvatarFallback, { class: 'fb' }, { default: () => 'AB' }),
+        ],
+      }),
+    }));
+    expect(w.find('.fb').exists()).toBe(true);
+    expect(w.find('img').exists()).toBe(false);
+    await new Promise(r => queueMicrotask(() => r(null)));
+    await nextTick();
+    expect(w.find('img').exists()).toBe(true);
+    expect(w.find('img').attributes('src')).toBe('/ok.png');
+    expect(w.find('.fb').exists()).toBe(false);
+  });
+
+  it('keeps fallback visible on error', async () => {
+    const w = mount(defineComponent({
+      setup: () => () => h(AvatarRoot, null, {
+        default: () => [
+          h(AvatarImage, { src: '/broken.png' }),
+          h(AvatarFallback, { class: 'fb' }, { default: () => 'AB' }),
+        ],
+      }),
+    }));
+    await new Promise(r => queueMicrotask(() => r(null)));
+    await nextTick();
+    expect(w.find('img').exists()).toBe(false);
+    expect(w.find('.fb').exists()).toBe(true);
+  });
+
+  it('delays fallback rendering when delayMs is set', async () => {
+    vi.useFakeTimers();
+    const w = mount(defineComponent({
+      setup: () => () => h(AvatarRoot, null, {
+        default: () => [
+          h(AvatarFallback, { class: 'fb', delayMs: 500 }, { default: () => 'AB' }),
+        ],
+      }),
+    }));
+    expect(w.find('.fb').exists()).toBe(false);
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(w.find('.fb').exists()).toBe(true);
+    vi.useRealTimers();
+  });
+
+  it('sets data-status on the root element', async () => {
+    const w = mount(defineComponent({
+      setup: () => () => h(AvatarRoot, null, {
+        default: () => [
+          h(AvatarImage, { src: '/ok.png' }),
+          h(AvatarFallback, null, { default: () => '?' }),
+        ],
+      }),
+    }));
+    await nextTick();
+    expect(w.element.getAttribute('data-status')).toBe('loading');
+    await new Promise(r => queueMicrotask(() => r(null)));
+    await nextTick();
+    expect(w.element.getAttribute('data-status')).toBe('loaded');
+  });
+});
diff --git a/vue/primitives/src/avatar/context.ts b/vue/primitives/src/avatar/context.ts
new file mode 100644
index 0000000..e054f60
--- /dev/null
+++ b/vue/primitives/src/avatar/context.ts
@@ -0,0 +1,14 @@
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type AvatarImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
+export interface AvatarContext {
+  imageLoadingStatus: Ref<AvatarImageLoadingStatus>;
+  onImageLoadingStatusChange: (status: AvatarImageLoadingStatus) => void;
+}
+
+const ctx = useContextFactory<AvatarContext>('AvatarContext');
+
+export const provideAvatarContext = ctx.provide;
+export const useAvatarContext = ctx.inject;
diff --git a/vue/primitives/src/avatar/index.ts b/vue/primitives/src/avatar/index.ts
new file mode 100644
index 0000000..9508ce3
--- /dev/null
+++ b/vue/primitives/src/avatar/index.ts
@@ -0,0 +1,8 @@
+export { default as AvatarRoot } from './AvatarRoot.vue';
+export { default as AvatarImage } from './AvatarImage.vue';
+export { default as AvatarFallback } from './AvatarFallback.vue';
+export type { AvatarRootProps } from './AvatarRoot.vue';
+export type { AvatarImageProps } from './AvatarImage.vue';
+export type { AvatarFallbackProps } from './AvatarFallback.vue';
+export { provideAvatarContext, useAvatarContext } from './context';
+export type { AvatarContext, AvatarImageLoadingStatus } from './context';
diff --git a/vue/primitives/src/calendar/CalendarCell.vue b/vue/primitives/src/calendar/CalendarCell.vue
new file mode 100644
index 0000000..0ac4c79
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarCell.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarCellProps extends PrimitiveProps {
+  /** The date this cell represents. */
+  date: Date;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCalendarGridContext, useCalendarRootContext } from './context';
+import { isSameDay, isSameMonth } from './utils';
+
+const { as = 'td', date } = defineProps<CalendarCellProps>();
+
+const ctx = useCalendarRootContext();
+const gridCtx = useCalendarGridContext();
+
+const isSelected = computed(() => ctx.isDateSelected(date));
+const isDisabled = computed(() => ctx.isDateDisabled(date));
+const isUnavailable = computed(() => ctx.isDateUnavailable(date));
+const isOutsideView = computed(() => !isSameMonth(date, gridCtx.month.value));
+const isToday = computed(() => isSameDay(date, new Date()));
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    role="gridcell"
+    :aria-selected="isSelected ? true : undefined"
+    :aria-disabled="(isDisabled || isUnavailable) ? true : undefined"
+    :data-primitives-calendar-cell="''"
+    :data-selected="isSelected ? '' : undefined"
+    :data-disabled="isDisabled ? '' : undefined"
+    :data-unavailable="isUnavailable ? '' : undefined"
+    :data-outside-view="isOutsideView ? '' : undefined"
+    :data-today="isToday ? '' : undefined"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarCellTrigger.vue b/vue/primitives/src/calendar/CalendarCellTrigger.vue
new file mode 100644
index 0000000..c8e1fb4
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,198 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarCellTriggerProps extends PrimitiveProps {
+  /** The day this trigger represents. */
+  day: Date;
+  /** The month this trigger's cell belongs to. Defaults to grid context. */
+  month?: Date;
+}
+
+export interface CalendarCellTriggerSlotProps {
+  dayValue: string;
+  disabled: boolean;
+  selected: boolean;
+  today: boolean;
+  outsideView: boolean;
+  unavailable: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+import { computed, nextTick } from 'vue';
+import { Primitive } from '../primitive';
+import { useCalendarGridContext, useCalendarRootContext } from './context';
+import { addDays, addMonths, addYears, formatFullDate, isSameDay, isSameMonth } from './utils';
+
+const { as = 'div', day, month } = defineProps<CalendarCellTriggerProps>();
+
+defineSlots<{
+  default?: (props: CalendarCellTriggerSlotProps) => unknown;
+}>();
+
+const ctx = useCalendarRootContext();
+const gridCtx = useCalendarGridContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const monthValue = computed(() => month ?? gridCtx.month.value);
+
+const isOutsideView = computed(() => !isSameMonth(day, monthValue.value));
+const isDisabled = computed(() => ctx.isDateDisabled(day));
+const isUnavailable = computed(() => ctx.isDateUnavailable(day));
+const isSelected = computed(() => ctx.isDateSelected(day));
+const isToday = computed(() => isSameDay(day, new Date()));
+
+const dayValue = computed(() => day.getDate().toLocaleString(ctx.locale.value));
+const labelText = computed(() => formatFullDate(day, ctx.locale.value));
+
+const isFocusedDate = computed(() => {
+  if (isOutsideView.value || isDisabled.value) return false;
+  if (ctx.focusedDate.value) return isSameDay(day, ctx.focusedDate.value);
+  // Fallback focusable: selected, else today (if in view), else first day of month.
+  if (ctx.modelValue.value && isSameMonth(ctx.modelValue.value, monthValue.value))
+    return isSameDay(day, ctx.modelValue.value);
+  const today = new Date();
+  if (isSameMonth(today, monthValue.value))
+    return isSameDay(day, today);
+  return day.getDate() === 1 && isSameMonth(day, monthValue.value);
+});
+
+function selectIfAllowed() {
+  if (ctx.readonly.value) return;
+  if (isDisabled.value || isUnavailable.value) return;
+  ctx.setDate(day);
+  ctx.focusedDate.value = day;
+}
+
+function handleClick() {
+  selectIfAllowed();
+}
+
+function focusByDataValue(target: Date) {
+  const parent = ctx.parentElement.value;
+  if (!parent) return false;
+  const el = parent.querySelector<HTMLElement>(
+    `[data-primitives-calendar-cell-trigger][data-value="${target.toISOString().slice(0, 10)}"]:not([data-outside-view])`,
+  );
+  if (el) {
+    el.focus();
+    return true;
+  }
+  return false;
+}
+
+function shiftFocus(target: Date) {
+  if (ctx.minValue.value && target < ctx.minValue.value) return;
+  if (ctx.maxValue.value && target > ctx.maxValue.value) return;
+  ctx.focusedDate.value = target;
+  if (focusByDataValue(target)) return;
+  // Crossed visible range — page placeholder and retry.
+  if (target > ctx.placeholder.value) {
+    if (ctx.isNextButtonDisabled()) return;
+    ctx.nextPage();
+  }
+  else {
+    if (ctx.isPrevButtonDisabled()) return;
+    ctx.prevPage();
+  }
+  nextTick(() => focusByDataValue(target));
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (isDisabled.value) return;
+  const rtl = ctx.dir.value === 'rtl' ? -1 : 1;
+  switch (e.key) {
+    case 'ArrowRight':
+      e.preventDefault();
+      shiftFocus(addDays(day, rtl));
+      break;
+    case 'ArrowLeft':
+      e.preventDefault();
+      shiftFocus(addDays(day, -rtl));
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      shiftFocus(addDays(day, -7));
+      break;
+    case 'ArrowDown':
+      e.preventDefault();
+      shiftFocus(addDays(day, 7));
+      break;
+    case 'Home': {
+      e.preventDefault();
+      const dow = day.getDay();
+      const offset = (dow - ctx.weekStartsOn.value + 7) % 7;
+      shiftFocus(addDays(day, -offset));
+      break;
+    }
+    case 'End': {
+      e.preventDefault();
+      const dow = day.getDay();
+      const offset = (dow - ctx.weekStartsOn.value + 7) % 7;
+      shiftFocus(addDays(day, 6 - offset));
+      break;
+    }
+    case 'PageUp':
+      e.preventDefault();
+      shiftFocus(e.shiftKey ? addYears(day, -1) : addMonths(day, -1));
+      break;
+    case 'PageDown':
+      e.preventDefault();
+      shiftFocus(e.shiftKey ? addYears(day, 1) : addMonths(day, 1));
+      break;
+    case 'Enter':
+    case ' ':
+      e.preventDefault();
+      selectIfAllowed();
+      break;
+  }
+}
+
+function handleFocus() {
+  ctx.focusedDate.value = day;
+}
+
+const dataValue = computed(() => day.toISOString().slice(0, 10));
+const tabindex = computed(() => {
+  if (isFocusedDate.value) return 0;
+  if (isOutsideView.value || isDisabled.value) return undefined;
+  return -1;
+});
+
+defineExpose({ currentElement });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="button"
+    :aria-label="labelText"
+    :aria-disabled="(isDisabled || isUnavailable) ? true : undefined"
+    :aria-selected="isSelected ? true : undefined"
+    :tabindex="tabindex"
+    :data-primitives-calendar-cell-trigger="''"
+    :data-value="dataValue"
+    :data-selected="isSelected ? '' : undefined"
+    :data-disabled="isDisabled ? '' : undefined"
+    :data-unavailable="isUnavailable ? '' : undefined"
+    :data-outside-view="isOutsideView ? '' : undefined"
+    :data-today="isToday ? '' : undefined"
+    :data-focused="isFocusedDate ? '' : undefined"
+    @click="handleClick"
+    @focus="handleFocus"
+    @keydown="handleKeyDown"
+  >
+    <slot
+      :day-value="dayValue"
+      :disabled="isDisabled"
+      :selected="isSelected"
+      :today="isToday"
+      :outside-view="isOutsideView"
+      :unavailable="isUnavailable"
+    >
+      {{ dayValue }}
+    </slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarGrid.vue b/vue/primitives/src/calendar/CalendarGrid.vue
new file mode 100644
index 0000000..57252b2
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarGrid.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarGridProps extends PrimitiveProps {
+  /** The month this grid represents. Defaults to the root placeholder's month. */
+  month?: Date;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue';
+import { Primitive } from '../primitive';
+import { provideCalendarGridContext, useCalendarRootContext } from './context';
+
+const { as = 'table', month } = defineProps<CalendarGridProps>();
+
+const ctx = useCalendarRootContext();
+const monthRef = toRef(() => month ?? ctx.placeholder.value);
+
+provideCalendarGridContext({ month: monthRef });
+
+const readonly = computed(() => ctx.readonly.value || undefined);
+const disabled = computed(() => ctx.disabled.value || undefined);
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    role="grid"
+    tabindex="-1"
+    :aria-label="ctx.fullCalendarLabel.value"
+    :aria-readonly="readonly ? true : undefined"
+    :aria-disabled="disabled ? true : undefined"
+    :data-primitives-calendar-grid="''"
+    :data-readonly="readonly ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarGridBody.vue b/vue/primitives/src/calendar/CalendarGridBody.vue
new file mode 100644
index 0000000..ead37d7
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarGridBody.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarGridBodyProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'tbody' } = defineProps<CalendarGridBodyProps>();
+</script>
+
+<template>
+  <Primitive :as="as" :data-primitives-calendar-grid-body="''">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarGridHead.vue b/vue/primitives/src/calendar/CalendarGridHead.vue
new file mode 100644
index 0000000..36e3ada
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarGridHead.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarGridHeadProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'thead' } = defineProps<CalendarGridHeadProps>();
+</script>
+
+<template>
+  <Primitive :as="as" :data-primitives-calendar-grid-head="''">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarGridRow.vue b/vue/primitives/src/calendar/CalendarGridRow.vue
new file mode 100644
index 0000000..efc887a
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarGridRow.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarGridRowProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'tr' } = defineProps<CalendarGridRowProps>();
+</script>
+
+<template>
+  <Primitive :as="as" :data-primitives-calendar-grid-row="''">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarHeadCell.vue b/vue/primitives/src/calendar/CalendarHeadCell.vue
new file mode 100644
index 0000000..110a3bc
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarHeadCell.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarHeadCellProps extends PrimitiveProps {
+  /** The day this header cell represents — used for `aria-label`. */
+  day?: Date;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCalendarRootContext } from './context';
+import { formatWeekday } from './utils';
+
+const { as = 'th', day } = defineProps<CalendarHeadCellProps>();
+
+const ctx = useCalendarRootContext();
+const longLabel = computed(() => (day ? formatWeekday(day, ctx.locale.value, 'long') : undefined));
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    scope="col"
+    :aria-label="longLabel"
+    :data-primitives-calendar-head-cell="''"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarHeader.vue b/vue/primitives/src/calendar/CalendarHeader.vue
new file mode 100644
index 0000000..0bea929
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarHeader.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarHeaderProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<CalendarHeaderProps>();
+</script>
+
+<template>
+  <Primitive :as="as" :data-primitives-calendar-header="''">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarHeading.vue b/vue/primitives/src/calendar/CalendarHeading.vue
new file mode 100644
index 0000000..0849a87
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarHeading.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarHeadingProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useCalendarRootContext } from './context';
+
+const { as = 'div' } = defineProps<CalendarHeadingProps>();
+
+defineSlots<{
+  default?: (props: { headingValue: string }) => unknown;
+}>();
+
+const ctx = useCalendarRootContext();
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    aria-hidden="true"
+    :data-primitives-calendar-heading="''"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+  >
+    <slot :heading-value="ctx.headingValue.value">
+      {{ ctx.headingValue.value }}
+    </slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarNext.vue b/vue/primitives/src/calendar/CalendarNext.vue
new file mode 100644
index 0000000..6491128
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarNext.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarNextProps extends PrimitiveProps {
+  /** Override the root's `nextPage` for just this button. */
+  nextPage?: (placeholder: Date) => Date;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCalendarRootContext } from './context';
+
+const { as = 'button', nextPage: nextPageProp } = defineProps<CalendarNextProps>();
+
+defineSlots<{
+  default?: (props: { disabled: boolean }) => unknown;
+}>();
+
+const ctx = useCalendarRootContext();
+const disabled = computed(() => ctx.disabled.value || ctx.isNextButtonDisabled(nextPageProp));
+
+function handleClick() {
+  if (disabled.value) return;
+  ctx.nextPage(nextPageProp);
+}
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    aria-label="Next"
+    :aria-disabled="disabled || undefined"
+    :data-primitives-calendar-next="''"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="as === 'button' ? disabled : undefined"
+    @click="handleClick"
+  >
+    <slot :disabled="disabled">
+      Next
+    </slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarPrev.vue b/vue/primitives/src/calendar/CalendarPrev.vue
new file mode 100644
index 0000000..f30f463
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarPrev.vue
@@ -0,0 +1,45 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CalendarPrevProps extends PrimitiveProps {
+  /** Override the root's `prevPage` for just this button. */
+  prevPage?: (placeholder: Date) => Date;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCalendarRootContext } from './context';
+
+const { as = 'button', prevPage: prevPageProp } = defineProps<CalendarPrevProps>();
+
+defineSlots<{
+  default?: (props: { disabled: boolean }) => unknown;
+}>();
+
+const ctx = useCalendarRootContext();
+const disabled = computed(() => ctx.disabled.value || ctx.isPrevButtonDisabled(prevPageProp));
+
+function handleClick() {
+  if (disabled.value) return;
+  ctx.prevPage(prevPageProp);
+}
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    aria-label="Previous"
+    :aria-disabled="disabled || undefined"
+    :data-primitives-calendar-prev="''"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="as === 'button' ? disabled : undefined"
+    @click="handleClick"
+  >
+    <slot :disabled="disabled">
+      Previous
+    </slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/CalendarRoot.vue b/vue/primitives/src/calendar/CalendarRoot.vue
new file mode 100644
index 0000000..dd0e8b0
--- /dev/null
+++ b/vue/primitives/src/calendar/CalendarRoot.vue
@@ -0,0 +1,324 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { CalendarMonth, WeekDayFormat } from './utils';
+
+export interface CalendarRootProps extends PrimitiveProps {
+  /** Uncontrolled default selected date. */
+  defaultValue?: Date;
+  /** Uncontrolled default placeholder (displayed month). */
+  defaultPlaceholder?: Date;
+  /** Minimum selectable date. */
+  minValue?: Date;
+  /** Maximum selectable date. */
+  maxValue?: Date;
+  /** Predicate marking a date as unavailable (not selectable). */
+  isDateUnavailable?: (date: Date) => boolean;
+  /** Predicate marking a date as disabled. */
+  isDateDisabled?: (date: Date) => boolean;
+  /** Prev/Next navigate by `numberOfMonths` instead of one month. @default false */
+  pagedNavigation?: boolean;
+  /** First day of week (0=Sun ... 6=Sat). @default 0 */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /** Width of localized weekday names. @default 'short' */
+  weekdayFormat?: WeekDayFormat;
+  /** Always render 6 weeks per month. @default true */
+  fixedWeeks?: boolean;
+  /** Number of months displayed simultaneously. @default 1 */
+  numberOfMonths?: number;
+  /** Disable the whole calendar. @default false */
+  disabled?: boolean;
+  /** Make the calendar read-only. @default false */
+  readonly?: boolean;
+  /** Auto-focus the calendar on mount. @default false */
+  initialFocus?: boolean;
+  /** Locale for `Intl` formatting. @default 'en' */
+  locale?: string;
+  /** Reading direction. */
+  dir?: 'ltr' | 'rtl';
+  /** Override "next page" navigation logic. */
+  nextPage?: (placeholder: Date) => Date;
+  /** Override "prev page" navigation logic. */
+  prevPage?: (placeholder: Date) => Date;
+  /** Calendar accessible label prefix. @default 'Calendar' */
+  calendarLabel?: string;
+}
+
+export interface CalendarRootEmits {
+  'update:modelValue': [date: Date | undefined];
+  'update:placeholder': [date: Date];
+}
+</script>
+
+<script setup lang="ts">
+import { useEventListener, useForwardExpose } from '@robonen/vue';
+import { computed, onMounted, ref, toRef, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { provideCalendarRootContext } from './context';
+import {
+  addMonths,
+  addYears,
+  clamp,
+  createMonths,
+  formatMonthYear,
+  getWeekdayLabels,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  isDateUnavailable as isUnavailable,
+  toDateOnly,
+} from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  as = 'div',
+  defaultValue,
+  defaultPlaceholder,
+  minValue,
+  maxValue,
+  isDateUnavailable: propsIsDateUnavailable,
+  isDateDisabled: propsIsDateDisabled,
+  pagedNavigation = false,
+  weekStartsOn = 0,
+  weekdayFormat = 'short',
+  fixedWeeks = true,
+  numberOfMonths = 1,
+  disabled = false,
+  readonly = false,
+  initialFocus = false,
+  locale = 'en',
+  dir = 'ltr',
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+  calendarLabel = 'Calendar',
+} = defineProps<CalendarRootProps>();
+
+defineEmits<CalendarRootEmits>();
+
+defineSlots<{
+  default?: (props: {
+    date: Date;
+    grid: CalendarMonth[];
+    weekDays: string[];
+    weekStartsOn: number;
+    locale: string;
+    modelValue: Date | undefined;
+  }) => unknown;
+}>();
+
+const localValue = ref<Date | undefined>(defaultValue);
+const modelValue = defineModel<Date | undefined>('modelValue', {
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+const localPlaceholder = ref<Date>(
+  toDateOnly(defaultPlaceholder ?? modelValue.value ?? new Date()),
+);
+const placeholder = defineModel<Date>('placeholder', {
+  default: undefined,
+  get: v => v ?? localPlaceholder.value,
+  set: (v) => {
+    localPlaceholder.value = toDateOnly(v);
+    return localPlaceholder.value;
+  },
+});
+
+const { forwardRef, currentElement: parentElement } = useForwardExpose();
+const focusedDate = ref<Date | undefined>();
+
+const localeRef = toRef(() => locale);
+const dirRef = toRef(() => dir);
+const weekStartsOnRef = toRef(() => weekStartsOn);
+const weekdayFormatRef = toRef(() => weekdayFormat);
+const fixedWeeksRef = toRef(() => fixedWeeks);
+const numberOfMonthsRef = toRef(() => numberOfMonths);
+const disabledRef = toRef(() => disabled);
+const readonlyRef = toRef(() => readonly);
+const pagedNavigationRef = toRef(() => pagedNavigation);
+const minValueRef = toRef(() => minValue);
+const maxValueRef = toRef(() => maxValue);
+
+const grid = computed<CalendarMonth[]>(() => createMonths({
+  date: placeholder.value,
+  numberOfMonths,
+  weekStartsOn,
+}));
+
+const weekDays = computed(() => getWeekdayLabels(weekStartsOn, locale, weekdayFormat));
+
+const headingValue = computed(() => {
+  const months = grid.value;
+  if (!months.length) return '';
+  if (months.length === 1) return formatMonthYear(months[0]!.value, locale);
+  const first = formatMonthYear(months[0]!.value, locale);
+  const last = formatMonthYear(months[months.length - 1]!.value, locale);
+  return `${first} - ${last}`;
+});
+
+const fullCalendarLabel = computed(() => `${calendarLabel}, ${headingValue.value}`);
+
+function isDateDisabled(date: Date): boolean {
+  if (disabled) return true;
+  if (propsIsDateDisabled?.(date)) return true;
+  if (minValue && isBefore(date, minValue)) return true;
+  if (maxValue && isAfter(date, maxValue)) return true;
+  return false;
+}
+
+function isDateUnavailableLocal(date: Date): boolean {
+  return isUnavailable(date, propsIsDateUnavailable, minValue, maxValue);
+}
+
+function isDateSelected(date: Date): boolean {
+  return modelValue.value ? isSameDay(modelValue.value, date) : false;
+}
+
+function isOutsideVisibleView(date: Date): boolean {
+  return !grid.value.some(m => isSameMonth(m.value, date));
+}
+
+const isInvalid = computed(() => {
+  if (!modelValue.value) return false;
+  return isDateDisabled(modelValue.value) || isDateUnavailableLocal(modelValue.value);
+});
+
+function setDate(date: Date | undefined) {
+  if (readonly) return;
+  if (date && (isDateDisabled(date) || isDateUnavailableLocal(date))) return;
+  modelValue.value = date ? toDateOnly(date) : undefined;
+}
+
+function setPlaceholder(date: Date) {
+  placeholder.value = clamp(date, minValue, maxValue);
+}
+
+function pageStep(): number {
+  return pagedNavigation ? numberOfMonths : 1;
+}
+
+function nextPage(fn?: (placeholder: Date) => Date) {
+  const fnToUse = fn ?? propsNextPage;
+  placeholder.value = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(placeholder.value, pageStep());
+}
+function prevPage(fn?: (placeholder: Date) => Date) {
+  const fnToUse = fn ?? propsPrevPage;
+  placeholder.value = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(placeholder.value, -pageStep());
+}
+function nextYear() {
+  placeholder.value = addYears(placeholder.value, 1);
+}
+function prevYear() {
+  placeholder.value = addYears(placeholder.value, -1);
+}
+
+function isNextButtonDisabled(fn?: (placeholder: Date) => Date): boolean {
+  if (disabled) return true;
+  if (!maxValue) return false;
+  const lastMonth = grid.value[grid.value.length - 1]?.value;
+  if (!lastMonth) return false;
+  const fnToUse = fn ?? propsNextPage;
+  const probe = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(lastMonth, 1);
+  return isAfter(probe, maxValue);
+}
+function isPrevButtonDisabled(fn?: (placeholder: Date) => Date): boolean {
+  if (disabled) return true;
+  if (!minValue) return false;
+  const firstMonth = grid.value[0]?.value;
+  if (!firstMonth) return false;
+  const fnToUse = fn ?? propsPrevPage;
+  const probe = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(firstMonth, -1);
+  return isBefore(probe, minValue);
+}
+
+watch(modelValue, (v) => {
+  if (v && !isSameMonth(v, placeholder.value))
+    placeholder.value = toDateOnly(v);
+});
+
+onMounted(() => {
+  if (!initialFocus || !parentElement.value) return;
+  const target = parentElement.value.querySelector<HTMLElement>(
+    '[data-primitives-calendar-cell-trigger][data-selected]'
+    + ',[data-primitives-calendar-cell-trigger][data-today]'
+    + ',[data-primitives-calendar-cell-trigger]:not([data-outside-view]):not([data-disabled])',
+  );
+  target?.focus();
+});
+
+useEventListener(parentElement, 'focusout', (e) => {
+  if (!parentElement.value?.contains(e.relatedTarget as Node | null))
+    focusedDate.value = undefined;
+});
+
+provideCalendarRootContext({
+  modelValue,
+  placeholder,
+  locale: localeRef,
+  dir: dirRef,
+  grid,
+  weekDays,
+  headingValue,
+  fullCalendarLabel,
+  weekStartsOn: weekStartsOnRef,
+  weekdayFormat: weekdayFormatRef,
+  fixedWeeks: fixedWeeksRef,
+  numberOfMonths: numberOfMonthsRef,
+  disabled: disabledRef,
+  readonly: readonlyRef,
+  pagedNavigation: pagedNavigationRef,
+  minValue: minValueRef,
+  maxValue: maxValueRef,
+  isDateDisabled,
+  isDateUnavailable: isDateUnavailableLocal,
+  isDateSelected,
+  isOutsideVisibleView,
+  isInvalid,
+  parentElement,
+  focusedDate,
+  setDate,
+  setPlaceholder,
+  nextPage,
+  prevPage,
+  nextYear,
+  prevYear,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="application"
+    :aria-label="fullCalendarLabel"
+    :dir="dir"
+    :data-primitives-calendar-root="''"
+    :data-disabled="disabled ? '' : undefined"
+    :data-readonly="readonly ? '' : undefined"
+    :data-invalid="isInvalid ? '' : undefined"
+  >
+    <slot
+      :date="placeholder"
+      :grid="grid"
+      :week-days="weekDays"
+      :week-starts-on="weekStartsOn"
+      :locale="locale"
+      :model-value="modelValue"
+    />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/calendar/__test__/date-utils.test.ts b/vue/primitives/src/calendar/__test__/date-utils.test.ts
new file mode 100644
index 0000000..4ca9fc1
--- /dev/null
+++ b/vue/primitives/src/calendar/__test__/date-utils.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import {
+  addMonths,
+  getWeeks,
+  isDateUnavailable,
+  isSameDay,
+  startOfWeek,
+} from '../date-utils';
+
+describe('date-utils', () => {
+  it('getWeeks returns 6 rows × 7 cols', () => {
+    const weeks = getWeeks(new Date(2024, 0, 15), 0);
+    expect(weeks).toHaveLength(6);
+    for (const row of weeks)
+      expect(row).toHaveLength(7);
+  });
+
+  it('startOfWeek respects weekStartsOn', () => {
+    // 2024-01-10 is a Wednesday.
+    const wed = new Date(2024, 0, 10);
+    expect(startOfWeek(wed, 0).getDay()).toBe(0);
+    expect(startOfWeek(wed, 1).getDay()).toBe(1);
+  });
+
+  it('addMonths clamps Jan 31 → Feb 28/29', () => {
+    const r = addMonths(new Date(2023, 0, 31), 1);
+    expect(r.getMonth()).toBe(1);
+    expect(r.getDate()).toBe(28);
+  });
+
+  it('isSameDay ignores time component', () => {
+    const a = new Date(2024, 5, 1, 1, 2, 3);
+    const b = new Date(2024, 5, 1, 23, 59);
+    expect(isSameDay(a, b)).toBe(true);
+    expect(isSameDay(a, new Date(2024, 5, 2))).toBe(false);
+  });
+
+  it('isDateUnavailable honors min/max and predicate', () => {
+    const min = new Date(2024, 0, 5);
+    const max = new Date(2024, 0, 25);
+    expect(isDateUnavailable(new Date(2024, 0, 1), undefined, min, max)).toBe(true);
+    expect(isDateUnavailable(new Date(2024, 0, 31), undefined, min, max)).toBe(true);
+    expect(isDateUnavailable(new Date(2024, 0, 10), undefined, min, max)).toBe(false);
+    expect(isDateUnavailable(new Date(2024, 0, 10), d => d.getDate() === 10)).toBe(true);
+  });
+});
diff --git a/vue/primitives/src/calendar/context.ts b/vue/primitives/src/calendar/context.ts
new file mode 100644
index 0000000..81f462b
--- /dev/null
+++ b/vue/primitives/src/calendar/context.ts
@@ -0,0 +1,67 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { CalendarMonth, WeekDayFormat } from './utils';
+import { useContextFactory } from '@robonen/vue';
+
+export interface CalendarRootContext {
+  /** Currently selected date (or undefined). */
+  modelValue: Ref<Date | undefined>;
+  /** Displayed month anchor. */
+  placeholder: Ref<Date>;
+  /** Locale identifier for `Intl` formatting. */
+  locale: Ref<string>;
+  /** Reading direction. */
+  dir: Ref<'ltr' | 'rtl'>;
+
+  /** Computed grid of months (each with 6×7 weeks). */
+  grid: ComputedRef<CalendarMonth[]>;
+  /** Localized weekday labels (length 7). */
+  weekDays: ComputedRef<string[]>;
+  /** Heading text (month + year). */
+  headingValue: ComputedRef<string>;
+  /** Full aria-label for the calendar region. */
+  fullCalendarLabel: ComputedRef<string>;
+
+  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>;
+  weekdayFormat: Ref<WeekDayFormat>;
+  fixedWeeks: Ref<boolean>;
+  numberOfMonths: Ref<number>;
+  disabled: Ref<boolean>;
+  readonly: Ref<boolean>;
+  pagedNavigation: Ref<boolean>;
+
+  minValue: Ref<Date | undefined>;
+  maxValue: Ref<Date | undefined>;
+
+  isDateDisabled: (date: Date) => boolean;
+  isDateUnavailable: (date: Date) => boolean;
+  isDateSelected: (date: Date) => boolean;
+  isOutsideVisibleView: (date: Date) => boolean;
+  isInvalid: ComputedRef<boolean>;
+
+  /** Element hosting the calendar grid(s); used for keyboard focus shifting. */
+  parentElement: Ref<HTMLElement | undefined>;
+  /** Currently focused day, drives `tabindex`. */
+  focusedDate: Ref<Date | undefined>;
+
+  setDate: (date: Date | undefined) => void;
+  setPlaceholder: (date: Date) => void;
+  nextPage: (fn?: (placeholder: Date) => Date) => void;
+  prevPage: (fn?: (placeholder: Date) => Date) => void;
+  nextYear: () => void;
+  prevYear: () => void;
+  isNextButtonDisabled: (fn?: (placeholder: Date) => Date) => boolean;
+  isPrevButtonDisabled: (fn?: (placeholder: Date) => Date) => boolean;
+}
+
+const ctx = useContextFactory<CalendarRootContext>('CalendarRoot');
+export const provideCalendarRootContext = ctx.provide;
+export const useCalendarRootContext = ctx.inject;
+
+export interface CalendarGridContext {
+  /** The month this `<table>` is rendering. */
+  month: Ref<Date>;
+}
+
+const gridCtx = useContextFactory<CalendarGridContext>('CalendarGrid');
+export const provideCalendarGridContext = gridCtx.provide;
+export const useCalendarGridContext = gridCtx.inject;
diff --git a/vue/primitives/src/calendar/date-utils.ts b/vue/primitives/src/calendar/date-utils.ts
new file mode 100644
index 0000000..941a427
--- /dev/null
+++ b/vue/primitives/src/calendar/date-utils.ts
@@ -0,0 +1,125 @@
+export type WeekDayFormat = 'narrow' | 'short' | 'long';
+
+export interface DateRange {
+  start?: Date;
+  end?: Date;
+}
+
+export function toDateOnly(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear()
+    && a.getMonth() === b.getMonth()
+    && a.getDate() === b.getDate();
+}
+
+export function isSameMonth(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+
+export function isBefore(a: Date, b: Date): boolean {
+  return toDateOnly(a).getTime() < toDateOnly(b).getTime();
+}
+
+export function isAfter(a: Date, b: Date): boolean {
+  return toDateOnly(a).getTime() > toDateOnly(b).getTime();
+}
+
+export function addDays(d: Date, n: number): Date {
+  const r = toDateOnly(d);
+  r.setDate(r.getDate() + n);
+  return r;
+}
+
+export function addMonths(d: Date, n: number): Date {
+  const r = toDateOnly(d);
+  const day = r.getDate();
+  // Move to first of month, shift, then clamp day to month length.
+  r.setDate(1);
+  r.setMonth(r.getMonth() + n);
+  const lastDay = new Date(r.getFullYear(), r.getMonth() + 1, 0).getDate();
+  r.setDate(Math.min(day, lastDay));
+  return r;
+}
+
+export function addYears(d: Date, n: number): Date {
+  return addMonths(d, n * 12);
+}
+
+export function startOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), 1, 0, 0, 0, 0);
+}
+
+export function endOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth() + 1, 0, 0, 0, 0, 0);
+}
+
+export function getDaysInMonth(d: Date): number {
+  return endOfMonth(d).getDate();
+}
+
+export function startOfWeek(d: Date, weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 0): Date {
+  const r = toDateOnly(d);
+  const day = r.getDay();
+  const diff = (day - weekStartsOn + 7) % 7;
+  r.setDate(r.getDate() - diff);
+  return r;
+}
+
+/**
+ * Returns a 6×7 matrix of dates for the month containing `month`,
+ * padded with leading/trailing days from adjacent months.
+ */
+export function getWeeks(month: Date, weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 0): Date[][] {
+  const first = startOfMonth(month);
+  const gridStart = startOfWeek(first, weekStartsOn);
+  const weeks: Date[][] = [];
+  for (let w = 0; w < 6; w++) {
+    const row: Date[] = [];
+    for (let i = 0; i < 7; i++)
+      row.push(addDays(gridStart, w * 7 + i));
+    weeks.push(row);
+  }
+  return weeks;
+}
+
+export function clamp(date: Date, min?: Date, max?: Date): Date {
+  if (min && isBefore(date, min))
+    return toDateOnly(min);
+  if (max && isAfter(date, max))
+    return toDateOnly(max);
+  return toDateOnly(date);
+}
+
+export function isDateUnavailable(
+  d: Date,
+  predicate?: (d: Date) => boolean,
+  min?: Date,
+  max?: Date,
+): boolean {
+  if (min && isBefore(d, min))
+    return true;
+  if (max && isAfter(d, max))
+    return true;
+  if (predicate?.(d))
+    return true;
+  return false;
+}
+
+export function formatDate(
+  d: Date,
+  opts: Intl.DateTimeFormatOptions,
+  locale: string,
+): string {
+  return new Intl.DateTimeFormat(locale, opts).format(d);
+}
+
+export function formatWeekday(
+  d: Date,
+  locale: string,
+  width: WeekDayFormat = 'short',
+): string {
+  return new Intl.DateTimeFormat(locale, { weekday: width }).format(d);
+}
diff --git a/vue/primitives/src/calendar/index.ts b/vue/primitives/src/calendar/index.ts
new file mode 100644
index 0000000..e56ba3d
--- /dev/null
+++ b/vue/primitives/src/calendar/index.ts
@@ -0,0 +1,42 @@
+export { default as CalendarRoot } from './CalendarRoot.vue';
+export { default as CalendarHeader } from './CalendarHeader.vue';
+export { default as CalendarHeading } from './CalendarHeading.vue';
+export { default as CalendarPrev } from './CalendarPrev.vue';
+export { default as CalendarNext } from './CalendarNext.vue';
+export { default as CalendarGrid } from './CalendarGrid.vue';
+export { default as CalendarGridHead } from './CalendarGridHead.vue';
+export { default as CalendarGridBody } from './CalendarGridBody.vue';
+export { default as CalendarGridRow } from './CalendarGridRow.vue';
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue';
+export { default as CalendarCell } from './CalendarCell.vue';
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue';
+
+export {
+  provideCalendarRootContext,
+  useCalendarRootContext,
+  provideCalendarGridContext,
+  useCalendarGridContext,
+} from './context';
+
+export type {
+  CalendarRootContext,
+  CalendarGridContext,
+} from './context';
+
+export * from './utils';
+
+export type { CalendarRootEmits, CalendarRootProps } from './CalendarRoot.vue';
+export type { CalendarHeaderProps } from './CalendarHeader.vue';
+export type { CalendarHeadingProps } from './CalendarHeading.vue';
+export type { CalendarPrevProps } from './CalendarPrev.vue';
+export type { CalendarNextProps } from './CalendarNext.vue';
+export type { CalendarGridProps } from './CalendarGrid.vue';
+export type { CalendarGridHeadProps } from './CalendarGridHead.vue';
+export type { CalendarGridBodyProps } from './CalendarGridBody.vue';
+export type { CalendarGridRowProps } from './CalendarGridRow.vue';
+export type { CalendarHeadCellProps } from './CalendarHeadCell.vue';
+export type { CalendarCellProps } from './CalendarCell.vue';
+export type {
+  CalendarCellTriggerProps,
+  CalendarCellTriggerSlotProps,
+} from './CalendarCellTrigger.vue';
diff --git a/vue/primitives/src/calendar/utils.ts b/vue/primitives/src/calendar/utils.ts
new file mode 100644
index 0000000..f3f347e
--- /dev/null
+++ b/vue/primitives/src/calendar/utils.ts
@@ -0,0 +1,64 @@
+import type { WeekDayFormat } from './date-utils';
+import {
+  addMonths,
+  formatDate,
+  formatWeekday,
+  getWeeks,
+  startOfMonth,
+  startOfWeek,
+} from './date-utils';
+
+export * from './date-utils';
+
+export interface CalendarMonth {
+  /** First day of this month (date-only). */
+  value: Date;
+  /** 6×7 grid of dates including leading/trailing adjacent-month days. */
+  weeks: Date[][];
+}
+
+export interface CreateMonthsOptions {
+  date: Date;
+  numberOfMonths: number;
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+/** Build N consecutive months starting from `date`'s month. */
+export function createMonths(opts: CreateMonthsOptions): CalendarMonth[] {
+  const months: CalendarMonth[] = [];
+  for (let i = 0; i < opts.numberOfMonths; i++) {
+    const m = startOfMonth(addMonths(opts.date, i));
+    months.push({ value: m, weeks: getWeeks(m, opts.weekStartsOn) });
+  }
+  return months;
+}
+
+/** Localized short/narrow/long weekday names starting from `weekStartsOn`. */
+export function getWeekdayLabels(
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6,
+  locale: string,
+  width: WeekDayFormat,
+): string[] {
+  // Pick any known Sunday (1970-01-04 is a Sunday) as anchor.
+  const anchorSunday = new Date(1970, 0, 4);
+  const start = startOfWeek(anchorSunday, weekStartsOn);
+  const labels: string[] = [];
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(start);
+    d.setDate(start.getDate() + i);
+    labels.push(formatWeekday(d, locale, width));
+  }
+  return labels;
+}
+
+export function formatMonthYear(d: Date, locale: string): string {
+  return formatDate(d, { month: 'long', year: 'numeric' }, locale);
+}
+
+export function formatFullDate(d: Date, locale: string): string {
+  return formatDate(
+    d,
+    { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' },
+    locale,
+  );
+}
diff --git a/vue/primitives/src/checkbox/CheckboxIndicator.vue b/vue/primitives/src/checkbox/CheckboxIndicator.vue
new file mode 100644
index 0000000..14baabd
--- /dev/null
+++ b/vue/primitives/src/checkbox/CheckboxIndicator.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface CheckboxIndicatorProps extends PrimitiveProps {
+  /** Keep mounted even when unchecked (for CSS exit animations). */
+  forceMount?: boolean;
+
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useCheckboxContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'span', forceMount = false } = defineProps<CheckboxIndicatorProps>();
+const ctx = useCheckboxContext();
+
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    v-if="forceMount || ctx.checked.value !== false"
+    :data-state="ctx.checked.value === 'indeterminate' ? 'indeterminate' : (ctx.checked.value ? 'checked' : 'unchecked')"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    style="pointer-events: none;"
+  >
+    <slot :checked="ctx.checked.value" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/checkbox/CheckboxRoot.vue b/vue/primitives/src/checkbox/CheckboxRoot.vue
new file mode 100644
index 0000000..05654e4
--- /dev/null
+++ b/vue/primitives/src/checkbox/CheckboxRoot.vue
@@ -0,0 +1,99 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { CheckedState } from './context';
+
+export interface CheckboxRootProps extends PrimitiveProps {
+  /** Uncontrolled initial checked state. */
+  defaultChecked?: CheckedState;
+  /** Disable interaction. */
+  disabled?: boolean;
+  /** Mark associated hidden input as required. */
+  required?: boolean;
+  /** Hidden input name attribute. */
+  name?: string;
+  /** Hidden input value attribute. @default 'on' */
+  value?: string;
+}
+
+export interface CheckboxRootEmits {
+  checkedChange: [value: CheckedState];
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { ref, toRef, watch } from 'vue';
+import { provideCheckboxContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { disabled = false, required = false, value = 'on', defaultChecked, name, as = 'button' } = defineProps<CheckboxRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<CheckboxRootEmits>();
+const model = defineModel<CheckedState | undefined>('checked', { default: undefined });
+
+const localChecked = ref<CheckedState>(model.value ?? defaultChecked ?? false);
+
+watch(model, (v) => {
+  if (v === undefined) return;
+  if (v !== localChecked.value) localChecked.value = v;
+});
+
+function setChecked(v: CheckedState): void {
+  localChecked.value = v;
+  model.value = v;
+  emit('checkedChange', v);
+}
+
+function toggle(): void {
+  if (disabled) return;
+  setChecked(localChecked.value !== true);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  // Prevent form submit on Enter when inside a form.
+  if (event.key === 'Enter') event.preventDefault();
+}
+
+provideCheckboxContext({
+  // `localChecked` is already a `Ref<CheckedState>`; forward directly without
+  // wrapping in a computed. `toRef(() => disabled)` gives a reactive identity
+  // passthrough without `ReactiveEffect`/cache.
+  checked: localChecked,
+  disabled: toRef(() => disabled),
+});
+
+// Inlined in template — no need for a cached computed for a single call site.
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    role="checkbox"
+    :aria-checked="localChecked === 'indeterminate' ? 'mixed' : localChecked"
+    :aria-required="required || undefined"
+    :aria-disabled="disabled || undefined"
+    :data-state="localChecked === 'indeterminate' ? 'indeterminate' : (localChecked ? 'checked' : 'unchecked')"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="disabled || undefined"
+    @click="toggle"
+    @keydown="onKeyDown"
+  >
+    <slot :checked="localChecked" />
+    <input
+      v-if="name"
+      type="checkbox"
+      tabindex="-1"
+      aria-hidden="true"
+      :name="name"
+      :value="value"
+      :checked="localChecked === true"
+      :required="required"
+      :disabled="disabled"
+      style="position: absolute; pointer-events: none; opacity: 0; margin: 0; transform: translateX(-100%);"
+    >
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/checkbox/__test__/Checkbox.test.ts b/vue/primitives/src/checkbox/__test__/Checkbox.test.ts
new file mode 100644
index 0000000..f936041
--- /dev/null
+++ b/vue/primitives/src/checkbox/__test__/Checkbox.test.ts
@@ -0,0 +1,109 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { CheckboxIndicator, CheckboxRoot } from '../index';
+
+function mountCheckbox(props: Record<string, unknown> = {}) {
+  return mount(CheckboxRoot, {
+    attachTo: document.body,
+    props,
+    slots: {
+      default: () => h(CheckboxIndicator, null, { default: () => '✓' }),
+    },
+  });
+}
+
+describe('Checkbox', () => {
+  it('renders role="checkbox" with aria-checked="false" initially', () => {
+    const w = mountCheckbox();
+    const el = w.element;
+    expect(el.getAttribute('role')).toBe('checkbox');
+    expect(el.getAttribute('aria-checked')).toBe('false');
+    expect(el.getAttribute('data-state')).toBe('unchecked');
+    w.unmount();
+  });
+
+  it('toggles on click', async () => {
+    const w = mountCheckbox();
+    const el = w.element as HTMLElement;
+    el.click();
+    await nextTick();
+    expect(el.getAttribute('aria-checked')).toBe('true');
+    expect(el.getAttribute('data-state')).toBe('checked');
+    el.click();
+    await nextTick();
+    expect(el.getAttribute('aria-checked')).toBe('false');
+    w.unmount();
+  });
+
+  it('honours defaultChecked', () => {
+    const w = mountCheckbox({ defaultChecked: true });
+    expect(w.element.getAttribute('aria-checked')).toBe('true');
+    w.unmount();
+  });
+
+  it('supports indeterminate state with aria-checked="mixed"', async () => {
+    const checked = ref<boolean | 'indeterminate'>('indeterminate');
+    const Harness = defineComponent({
+      setup: () => () => h(CheckboxRoot, {
+        checked: checked.value,
+        'onUpdate:checked': (v: boolean | 'indeterminate' | undefined) => { checked.value = v!; },
+      }, { default: () => h(CheckboxIndicator) }),
+    });
+    const w = mount(Harness, { attachTo: document.body });
+    expect(w.element.getAttribute('aria-checked')).toBe('mixed');
+    (w.element as HTMLElement).click();
+    await nextTick();
+    // Click from indeterminate → true
+    expect(checked.value).toBe(true);
+    w.unmount();
+  });
+
+  it('disabled: no toggle on click, aria-disabled set', async () => {
+    const w = mountCheckbox({ disabled: true });
+    const el = w.element as HTMLElement;
+    expect(el.getAttribute('aria-disabled')).toBe('true');
+    el.click();
+    await nextTick();
+    expect(el.getAttribute('aria-checked')).toBe('false');
+    w.unmount();
+  });
+
+  it('emits checkedChange', async () => {
+    const w = mountCheckbox();
+    (w.element as HTMLElement).click();
+    await nextTick();
+    expect(w.emitted('checkedChange')).toEqual([[true]]);
+    w.unmount();
+  });
+
+  it('renders hidden input when name is set', async () => {
+    const w = mountCheckbox({ name: 'agree', value: 'yes', defaultChecked: true });
+    const input = w.element.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(input).toBeTruthy();
+    expect(input.name).toBe('agree');
+    expect(input.value).toBe('yes');
+    expect(input.checked).toBe(true);
+    w.unmount();
+  });
+
+  it('CheckboxIndicator only renders when checked (or forceMount)', async () => {
+    const w = mountCheckbox();
+    expect(w.element.querySelector('span')).toBeNull();
+    (w.element as HTMLElement).click();
+    await nextTick();
+    expect(w.element.querySelector('span')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('CheckboxIndicator forceMount stays mounted when unchecked', () => {
+    const w = mount(CheckboxRoot, {
+      attachTo: document.body,
+      slots: {
+        default: () => h(CheckboxIndicator, { forceMount: true }, { default: () => '✓' }),
+      },
+    });
+    expect(w.element.querySelector('span')).toBeTruthy();
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/checkbox/context.ts b/vue/primitives/src/checkbox/context.ts
new file mode 100644
index 0000000..34d2014
--- /dev/null
+++ b/vue/primitives/src/checkbox/context.ts
@@ -0,0 +1,14 @@
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type CheckedState = boolean | 'indeterminate';
+
+export interface CheckboxContext {
+  checked: Ref<CheckedState>;
+  disabled: Ref<boolean>;
+}
+
+const ctx = useContextFactory<CheckboxContext>('CheckboxContext');
+
+export const provideCheckboxContext = ctx.provide;
+export const useCheckboxContext = ctx.inject;
diff --git a/vue/primitives/src/checkbox/index.ts b/vue/primitives/src/checkbox/index.ts
new file mode 100644
index 0000000..d141a6e
--- /dev/null
+++ b/vue/primitives/src/checkbox/index.ts
@@ -0,0 +1,5 @@
+export { default as CheckboxIndicator } from './CheckboxIndicator.vue';
+export { default as CheckboxRoot } from './CheckboxRoot.vue';
+export type { CheckedState } from './context';
+export type { CheckboxIndicatorProps } from './CheckboxIndicator.vue';
+export type { CheckboxRootEmits, CheckboxRootProps } from './CheckboxRoot.vue';
diff --git a/vue/primitives/src/collapsible/CollapsibleContent.vue b/vue/primitives/src/collapsible/CollapsibleContent.vue
new file mode 100644
index 0000000..791346f
--- /dev/null
+++ b/vue/primitives/src/collapsible/CollapsibleContent.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CollapsibleContentProps extends PrimitiveProps {
+
+  /** Render the content even when closed (useful for animation control). */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useCollapsibleContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div', forceMount = false } = defineProps<CollapsibleContentProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCollapsibleContext();
+</script>
+
+<template>
+  <Presence :present="forceMount || ctx.open.value">
+    <Primitive
+      :ref="forwardRef"
+      :id="ctx.contentId.value"
+      :as="as"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      :data-disabled="ctx.disabled.value ? '' : undefined"
+      :hidden="!ctx.open.value ? true : undefined"
+    >
+      <slot :open="ctx.open.value" />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/collapsible/CollapsibleRoot.vue b/vue/primitives/src/collapsible/CollapsibleRoot.vue
new file mode 100644
index 0000000..d664ca5
--- /dev/null
+++ b/vue/primitives/src/collapsible/CollapsibleRoot.vue
@@ -0,0 +1,56 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CollapsibleRootProps extends PrimitiveProps {
+
+  defaultOpen?: boolean;
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { ref, toRef } from 'vue';
+import { provideCollapsibleContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { defaultOpen = false, disabled = false, as = 'div' } = defineProps<CollapsibleRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const localOpen = ref<boolean>(defaultOpen);
+
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+// Identity passthrough via `toRef` — reactive without `computed`'s effect/cache.
+const disabledRef = toRef(() => disabled);
+const contentId = useId(undefined, 'collapsible-content');
+
+provideCollapsibleContext({
+  open,
+  disabled: disabledRef,
+  contentId,
+  onToggle: () => { if (!disabled) open.value = !open.value; },
+  onOpen: () => { if (!disabled) open.value = true; },
+  onClose: () => { if (!disabled) open.value = false; },
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-state="open ? 'open' : 'closed'"
+    :data-disabled="disabled ? '' : undefined"
+  >
+    <slot :open="open" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/collapsible/CollapsibleTrigger.vue b/vue/primitives/src/collapsible/CollapsibleTrigger.vue
new file mode 100644
index 0000000..20d3d91
--- /dev/null
+++ b/vue/primitives/src/collapsible/CollapsibleTrigger.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CollapsibleTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useCollapsibleContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<CollapsibleTriggerProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCollapsibleContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    :aria-expanded="ctx.open.value"
+    :aria-controls="ctx.contentId.value"
+    :data-state="ctx.open.value ? 'open' : 'closed'"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :disabled="as === 'button' ? ctx.disabled.value : undefined"
+    @click="ctx.onToggle"
+  >
+    <slot :open="ctx.open.value" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/collapsible/__test__/Collapsible.test.ts b/vue/primitives/src/collapsible/__test__/Collapsible.test.ts
new file mode 100644
index 0000000..9b174ae
--- /dev/null
+++ b/vue/primitives/src/collapsible/__test__/Collapsible.test.ts
@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from '../index';
+
+function mountCollapsible(props: Record<string, unknown> = {}) {
+  return mount(defineComponent({
+    setup: () => () => h(CollapsibleRoot, props, {
+      default: () => [
+        h(CollapsibleTrigger, { class: 'trig' }, { default: () => 'Toggle' }),
+        h(CollapsibleContent, { class: 'c' }, { default: () => 'Body' }),
+      ],
+    }),
+  }));
+}
+
+describe('Collapsible', () => {
+  it('starts closed by default; trigger toggles state', async () => {
+    const w = mountCollapsible();
+    const trigger = w.find('.trig');
+    expect(trigger.attributes('aria-expanded')).toBe('false');
+    expect(w.find('.c').exists()).toBe(false);
+    await trigger.trigger('click');
+    expect(trigger.attributes('aria-expanded')).toBe('true');
+    expect(w.find('.c').exists()).toBe(true);
+  });
+
+  it('opens via defaultOpen', async () => {
+    const w = mountCollapsible({ defaultOpen: true });
+    await nextTick();
+    expect(w.find('.trig').attributes('aria-expanded')).toBe('true');
+    expect(w.find('.c').exists()).toBe(true);
+    expect(w.find('.c').text()).toBe('Body');
+  });
+
+  it('wires aria-controls to content id', async () => {
+    const w = mountCollapsible({ defaultOpen: true });
+    await nextTick();
+    const id = w.find('.c').attributes('id');
+    expect(id).toMatch(/collapsible-content/);
+    expect(w.find('.trig').attributes('aria-controls')).toBe(id);
+  });
+
+  it('respects disabled', async () => {
+    const w = mountCollapsible({ disabled: true });
+    await w.find('.trig').trigger('click');
+    expect(w.find('.trig').attributes('aria-expanded')).toBe('false');
+    expect(w.find('.trig').attributes('data-disabled')).toBe('');
+  });
+
+  it('forceMount keeps content in DOM when closed', () => {
+    const w = mount(defineComponent({
+      setup: () => () => h(CollapsibleRoot, null, {
+        default: () => [
+          h(CollapsibleTrigger, { class: 'trig' }),
+          h(CollapsibleContent, { class: 'c', forceMount: true }, { default: () => 'Body' }),
+        ],
+      }),
+    }));
+    const content = w.find('.c');
+    expect(content.exists()).toBe(true);
+    expect(content.attributes('hidden')).toBeDefined();
+    expect(content.attributes('data-state')).toBe('closed');
+  });
+});
diff --git a/vue/primitives/src/collapsible/context.ts b/vue/primitives/src/collapsible/context.ts
new file mode 100644
index 0000000..db537df
--- /dev/null
+++ b/vue/primitives/src/collapsible/context.ts
@@ -0,0 +1,16 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface CollapsibleContext {
+  open: Ref<boolean>;
+  disabled: Ref<boolean>;
+  contentId: ComputedRef<string>;
+  onToggle: () => void;
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+const ctx = useContextFactory<CollapsibleContext>('CollapsibleContext');
+
+export const provideCollapsibleContext = ctx.provide;
+export const useCollapsibleContext = ctx.inject;
diff --git a/vue/primitives/src/collapsible/index.ts b/vue/primitives/src/collapsible/index.ts
new file mode 100644
index 0000000..17578f2
--- /dev/null
+++ b/vue/primitives/src/collapsible/index.ts
@@ -0,0 +1,8 @@
+export { default as CollapsibleRoot } from './CollapsibleRoot.vue';
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue';
+export { default as CollapsibleContent } from './CollapsibleContent.vue';
+export type { CollapsibleRootProps } from './CollapsibleRoot.vue';
+export type { CollapsibleTriggerProps } from './CollapsibleTrigger.vue';
+export type { CollapsibleContentProps } from './CollapsibleContent.vue';
+export { provideCollapsibleContext, useCollapsibleContext } from './context';
+export type { CollapsibleContext } from './context';
diff --git a/vue/primitives/src/collection/index.ts b/vue/primitives/src/collection/index.ts
new file mode 100644
index 0000000..82a19c5
--- /dev/null
+++ b/vue/primitives/src/collection/index.ts
@@ -0,0 +1,6 @@
+export {
+  useCollectionProvider,
+  useCollectionInjector,
+  type CollectionContext,
+  type CollectionItemData,
+} from './useCollection';
diff --git a/vue/primitives/src/collection/useCollection.ts b/vue/primitives/src/collection/useCollection.ts
new file mode 100644
index 0000000..014c557
--- /dev/null
+++ b/vue/primitives/src/collection/useCollection.ts
@@ -0,0 +1,185 @@
+import type { ComputedRef, DefineComponent, ShallowRef } from 'vue';
+import {
+  computed,
+  defineComponent,
+  h,
+  markRaw,
+  shallowRef,
+  triggerRef,
+  watch,
+} from 'vue';
+import { unrefElement, useContextFactory } from '@robonen/vue';
+import { Slot } from '../primitive';
+
+/**
+ * Data attribute used to locate items inside a collection via `querySelectorAll`.
+ * Rendered automatically by `<CollectionItem>`.
+ */
+const ITEM_DATA_ATTR = 'data-collection-item';
+
+export interface CollectionItemData<Value = unknown> {
+  /** DOM element that represents the item. */
+  ref: HTMLElement;
+  /** Arbitrary `value` associated with the item via `<CollectionItem :value>`. */
+  value?: Value;
+}
+
+export interface CollectionContext<Value = unknown> {
+  /** Root element of the collection (set by `<CollectionSlot>`). */
+  collectionRef: ShallowRef<HTMLElement | undefined>;
+  /** Raw element→data map. Mutated via `triggerRef` — do not rely on deep reactivity. */
+  itemMap: ShallowRef<Map<HTMLElement, CollectionItemData<Value>>>;
+  /**
+   * Returns items sorted by their DOM order. Items with `data-disabled` are
+   * skipped unless `includeDisabled` is `true`.
+   *
+   * The ordering comes from `collectionRef.querySelectorAll(...)`, which means
+   * it survives `<Teleport>`, `<Suspense>` and `v-for` reorders — unlike a
+   * mount-order based registry.
+   */
+  getItems: (includeDisabled?: boolean) => Array<CollectionItemData<Value>>;
+  /** Reactive snapshot of all items (unsorted). Invalidated when `itemMap` changes. */
+  reactiveItems: ComputedRef<Array<CollectionItemData<Value>>>;
+  /** Reactive count of items. */
+  itemMapSize: ComputedRef<number>;
+  /** Root marker component — render at the collection's root. */
+  CollectionSlot: DefineComponent;
+  /** Item marker component — wrap each focusable/selectable child. */
+  CollectionItem: DefineComponent<{ value?: unknown }>;
+}
+
+function createCollectionState<Value = unknown>(): CollectionContext<Value> {
+  // `shallowRef` + manual `triggerRef` avoids wrapping the Map in a deep Proxy.
+  // For collections with many items (large lists, menus, listboxes) this is
+  // measurably cheaper than `ref(new Map())`.
+  const collectionRef = shallowRef<HTMLElement>();
+  const itemMap = shallowRef(
+    new Map<HTMLElement, CollectionItemData<Value>>(),
+  );
+
+  const getItems = (includeDisabled = false) => {
+    const collectionNode = collectionRef.value;
+    if (!collectionNode) return [];
+
+    const orderedNodes = Array.from(
+      collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`),
+    );
+    const items = Array.from(itemMap.value.values());
+    items.sort(
+      (a, b) => orderedNodes.indexOf(a.ref) - orderedNodes.indexOf(b.ref),
+    );
+
+    return includeDisabled
+      ? items
+      : items.filter(i => i.ref.dataset['disabled'] !== '');
+  };
+
+  const CollectionSlot = defineComponent({
+    name: 'CollectionSlot',
+    inheritAttrs: false,
+    setup(_, { slots, attrs }) {
+      return () =>
+        h(
+          Slot,
+          {
+            ...attrs,
+            ref: (el: unknown) => {
+              const element = unrefElement(el as Parameters<typeof unrefElement>[0]);
+              if (element instanceof HTMLElement) {
+                collectionRef.value = element;
+              }
+            },
+          },
+          slots,
+        );
+    },
+  }) as DefineComponent;
+
+  const CollectionItem = defineComponent({
+    name: 'CollectionItem',
+    inheritAttrs: false,
+    props: {
+      value: {
+        // Accepts any value.
+        validator: () => true,
+      },
+    },
+    setup(props, { slots, attrs }) {
+      const currentElement = shallowRef<HTMLElement>();
+
+      watch(
+        [currentElement, () => props.value],
+        ([el], _prev, onCleanup) => {
+          if (!el) return;
+          // `markRaw` keeps Vue from trying to make the element reactive —
+          // we only care about identity as a Map key.
+          const key = markRaw(el);
+          itemMap.value.set(key, { ref: el, value: props.value as Value });
+          triggerRef(itemMap);
+
+          onCleanup(() => {
+            itemMap.value.delete(key);
+            triggerRef(itemMap);
+          });
+        },
+        { immediate: true },
+      );
+
+      return () =>
+        h(
+          Slot,
+          {
+            ...attrs,
+            [ITEM_DATA_ATTR]: '',
+            ref: (el: unknown) => {
+              const element = unrefElement(el as Parameters<typeof unrefElement>[0]);
+              if (element instanceof HTMLElement) {
+                currentElement.value = element;
+              }
+            },
+          },
+          slots,
+        );
+    },
+  }) as DefineComponent<{ value?: unknown }>;
+
+  const reactiveItems = computed(() => Array.from(itemMap.value.values()));
+  const itemMapSize = computed(() => itemMap.value.size);
+
+  return {
+    collectionRef,
+    itemMap,
+    getItems,
+    reactiveItems,
+    itemMapSize,
+    CollectionSlot,
+    CollectionItem,
+  };
+}
+
+const CollectionCtx = useContextFactory<CollectionContext>('CollectionContext');
+
+/**
+ * Creates a new collection state and provides it to descendants.
+ * Call this in the parent (e.g. `RovingFocusGroup`, `ListboxRoot`).
+ *
+ * @example
+ * ```ts
+ * const { getItems, CollectionSlot } = useCollectionProvider();
+ * ```
+ */
+export function useCollectionProvider<Value = unknown>(): CollectionContext<Value> {
+  const ctx = createCollectionState<Value>();
+  CollectionCtx.provide(ctx as CollectionContext);
+  return ctx;
+}
+
+/**
+ * Injects the collection context from the nearest `useCollectionProvider()`.
+ * Call this in children (e.g. `RovingFocusItem`, `ListboxItem`).
+ *
+ * @throws when used outside a provider.
+ */
+export function useCollectionInjector<Value = unknown>(): CollectionContext<Value> {
+  return CollectionCtx.inject() as CollectionContext<Value>;
+}
diff --git a/vue/primitives/src/combobox/ComboboxAnchor.vue b/vue/primitives/src/combobox/ComboboxAnchor.vue
new file mode 100644
index 0000000..b64d520
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxAnchor.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { PopperAnchorProps } from '../popper';
+
+export interface ComboboxAnchorProps extends PopperAnchorProps {}
+</script>
+
+<script setup lang="ts">
+import { onBeforeUnmount, watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { useComboboxRootContext } from './context';
+
+const props = defineProps<ComboboxAnchorProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+watchPostEffect(() => rootCtx.onParentChange(currentElement.value));
+onBeforeUnmount(() => rootCtx.onParentChange(undefined));
+</script>
+
+<template>
+  <PopperAnchor :reference="props.reference">
+    <Primitive
+      :ref="forwardRef"
+      :as="props.as ?? 'div'"
+    >
+      <slot />
+    </Primitive>
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxArrow.vue b/vue/primitives/src/combobox/ComboboxArrow.vue
new file mode 100644
index 0000000..7df8f87
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxArrow.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export type ComboboxArrowProps = PopperArrowProps;
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { PopperArrow } from '../popper';
+import { useComboboxRootContext } from './context';
+
+const props = defineProps<ComboboxArrowProps>();
+const { forwardRef } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+</script>
+
+<template>
+  <PopperArrow
+    v-if="rootCtx.open.value"
+    :ref="forwardRef"
+    v-bind="props"
+  />
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxCancel.vue b/vue/primitives/src/combobox/ComboboxCancel.vue
new file mode 100644
index 0000000..7ae1746
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxCancel.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxCancelProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useComboboxRootContext } from './context';
+
+const { as = 'button' } = defineProps<ComboboxCancelProps>();
+
+const { forwardRef } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+function handleClick() {
+  rootCtx.onSearchTermChange('');
+  const input = rootCtx.inputElement.value;
+  if (input) {
+    input.value = '';
+    input.focus();
+  }
+  rootCtx.onUserInputtedChange(false);
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    tabindex="-1"
+    aria-label="Clear"
+    @click="handleClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxContent.vue b/vue/primitives/src/combobox/ComboboxContent.vue
new file mode 100644
index 0000000..646cf73
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxContent.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { ComboboxContentImplEmits, ComboboxContentImplProps } from './ComboboxContentImpl.vue';
+
+export type ComboboxContentProps = ComboboxContentImplProps;
+export type ComboboxContentEmits = ComboboxContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import ComboboxContentImpl from './ComboboxContentImpl.vue';
+import { useComboboxRootContext } from './context';
+
+const props = defineProps<ComboboxContentProps>();
+const emit = defineEmits<ComboboxContentEmits>();
+const rootCtx = useComboboxRootContext();
+</script>
+
+<template>
+  <Presence :present="rootCtx.open.value">
+    <ComboboxContentImpl
+      v-bind="props"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+    >
+      <slot />
+    </ComboboxContentImpl>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxContentImpl.vue b/vue/primitives/src/combobox/ComboboxContentImpl.vue
new file mode 100644
index 0000000..249aa2a
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxContentImpl.vue
@@ -0,0 +1,139 @@
+<script lang="ts">
+import type { DismissableLayerEmits } from '../dismissable-layer';
+import type { FocusScopeEmits } from '../focus-scope';
+import type { PopperContentProps } from '../popper';
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxContentImplProps extends PrimitiveProps, /* @vue-ignore */ Partial<PopperContentProps> {
+  /** Position strategy. @default 'popper' */
+  position?: 'inline' | 'popper';
+  /** Block outside pointer events. @default false */
+  disableOutsidePointerEvents?: boolean;
+}
+
+export interface ComboboxContentImplEmits {
+  closeAutoFocus: FocusScopeEmits['unmountAutoFocus'];
+  escapeKeyDown: DismissableLayerEmits['escapeKeyDown'];
+  pointerDownOutside: DismissableLayerEmits['pointerDownOutside'];
+  focusOutside: FocusScopeEmits['unmountAutoFocus'];
+}
+</script>
+
+<script setup lang="ts">
+import { onBeforeUnmount, shallowRef, toRef, watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { PopperContent } from '../popper';
+import { Primitive } from '../primitive';
+import { VisuallyHidden } from '../visually-hidden';
+import { useHideOthers } from '../utils/useHideOthers';
+import { provideComboboxContentContext, useComboboxRootContext } from './context';
+
+const props = defineProps<ComboboxContentImplProps>();
+const emit = defineEmits<ComboboxContentImplEmits>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+const viewportElement = shallowRef<HTMLElement | undefined>(undefined);
+
+watchPostEffect(() => rootCtx.onContentChange(currentElement.value));
+onBeforeUnmount(() => rootCtx.onContentChange(undefined));
+
+useHideOthers(toRef(() => rootCtx.parentElement.value));
+
+provideComboboxContentContext({
+  viewportElement,
+  onViewportChange: (el) => { viewportElement.value = el; },
+  position: toRef(() => props.position ?? 'popper'),
+});
+
+function handleEscape(event: KeyboardEvent) {
+  rootCtx.onOpenChange(false);
+  emit('escapeKeyDown', event);
+}
+
+function handlePointerDownOutside(event: any) {
+  const target = event.target as Element | null;
+  const input = rootCtx.inputElement.value;
+  const trigger = rootCtx.triggerElement.value;
+  if (target && (input?.contains(target) || trigger?.contains(target))) {
+    event.preventDefault();
+    return;
+  }
+  emit('pointerDownOutside', event);
+  if (!event.defaultPrevented) rootCtx.onOpenChange(false);
+}
+
+function handleFocusOutside(event: any) {
+  emit('focusOutside', event);
+}
+
+function handleCloseAutoFocus(event: Event) {
+  emit('closeAutoFocus', event);
+}
+</script>
+
+<template>
+  <FocusScope
+    as="template"
+    :loop="false"
+    :trapped="false"
+    @mount-auto-focus.prevent
+    @unmount-auto-focus="handleCloseAutoFocus"
+  >
+    <DismissableLayer
+      as="template"
+      :disable-outside-pointer-events="props.disableOutsidePointerEvents ?? false"
+      @escape-key-down="handleEscape"
+      @pointer-down-outside="handlePointerDownOutside"
+      @focus-outside="handleFocusOutside"
+      @dismiss="rootCtx.onOpenChange(false)"
+    >
+      <PopperContent
+        v-if="(props.position ?? 'popper') === 'popper'"
+        :ref="forwardRef"
+        :as="props.as ?? 'div'"
+        :side="props.side ?? 'bottom'"
+        :side-offset="props.sideOffset ?? 4"
+        :align="props.align ?? 'start'"
+        :align-offset="props.alignOffset"
+        :avoid-collisions="props.avoidCollisions"
+        :collision-boundary="props.collisionBoundary"
+        :collision-padding="props.collisionPadding"
+        :arrow-padding="props.arrowPadding"
+        :sticky="props.sticky"
+        :hide-when-detached="props.hideWhenDetached"
+        :update-position-strategy="props.updatePositionStrategy"
+        :id="rootCtx.contentId.value"
+        role="listbox"
+        :aria-multiselectable="rootCtx.multiple.value || undefined"
+        :data-state="rootCtx.open.value ? 'open' : 'closed'"
+        data-primitives-combobox-content
+      >
+        <VisuallyHidden role="status" aria-live="polite" data-primitives-combobox-announce>
+          {{ rootCtx.filterState.value.count === 1 ? '1 result available.' : `${rootCtx.filterState.value.count} results available.` }}
+        </VisuallyHidden>
+        <slot />
+      </PopperContent>
+
+      <Primitive
+        v-else
+        :ref="forwardRef"
+        :as="props.as ?? 'div'"
+        :id="rootCtx.contentId.value"
+        role="listbox"
+        :aria-multiselectable="rootCtx.multiple.value || undefined"
+        :data-state="rootCtx.open.value ? 'open' : 'closed'"
+        data-primitives-combobox-content
+      >
+        <VisuallyHidden role="status" aria-live="polite" data-primitives-combobox-announce>
+          {{ rootCtx.filterState.value.count === 1 ? '1 result available.' : `${rootCtx.filterState.value.count} results available.` }}
+        </VisuallyHidden>
+        <slot />
+      </Primitive>
+    </DismissableLayer>
+  </FocusScope>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxEmpty.vue b/vue/primitives/src/combobox/ComboboxEmpty.vue
new file mode 100644
index 0000000..f6ee9ea
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxEmpty.vue
@@ -0,0 +1,37 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxEmptyProps extends PrimitiveProps {
+  /** Render even when items exist but none are filtered out. */
+  always?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useComboboxRootContext } from './context';
+
+const { as = 'div', always = false } = defineProps<ComboboxEmptyProps>();
+
+const { forwardRef } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+const shouldRender = computed(() => {
+  if (always) return true;
+  return rootCtx.filterState.value.count === 0;
+});
+</script>
+
+<template>
+  <Primitive
+    v-if="shouldRender"
+    :ref="forwardRef"
+    :as="as"
+    role="presentation"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxGroup.vue b/vue/primitives/src/combobox/ComboboxGroup.vue
new file mode 100644
index 0000000..be430d0
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxGroup.vue
@@ -0,0 +1,39 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxGroupProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideComboboxGroupContext, useComboboxRootContext } from './context';
+
+const { as = 'div' } = defineProps<ComboboxGroupProps>();
+
+const { forwardRef } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+const id = useId(undefined, 'combobox-group');
+
+const isVisible = computed(() => rootCtx.filterState.value.groups.has(id.value));
+
+onMounted(() => rootCtx.onGroupRegister(id.value));
+onBeforeUnmount(() => rootCtx.onGroupUnregister(id.value));
+
+provideComboboxGroupContext({ id });
+</script>
+
+<template>
+  <Primitive
+    v-show="isVisible"
+    :ref="forwardRef"
+    :as="as"
+    role="group"
+    :aria-labelledby="id"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxInput.vue b/vue/primitives/src/combobox/ComboboxInput.vue
new file mode 100644
index 0000000..c73c55e
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxInput.vue
@@ -0,0 +1,221 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxInputProps extends PrimitiveProps {
+  /** Disable the input. */
+  disabled?: boolean;
+  /** Focus the input on mount. */
+  autoFocus?: boolean;
+  /** Open the combobox when the input is focused. */
+  openOnFocus?: boolean;
+  /** Open the combobox when the input is clicked. */
+  openOnClick?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useComboboxRootContext } from './context';
+import { OPEN_KEYS } from './utils';
+
+const {
+  as = 'input',
+  disabled = false,
+  autoFocus = false,
+  openOnFocus = false,
+  openOnClick = false,
+} = defineProps<ComboboxInputProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+const isDisabled = computed(() => disabled || rootCtx.disabled.value);
+const activeDescendant = computed(() => rootCtx.selectedValueId.value);
+
+function displayString(value: unknown): string {
+  if (rootCtx.displayValue) return rootCtx.displayValue(value);
+  if (value === undefined || value === null) return '';
+  if (Array.isArray(value)) return '';
+  if (typeof value === 'object') return '';
+  return String(value);
+}
+
+function syncDisplayValue() {
+  const input = currentElement.value as HTMLInputElement | undefined;
+  if (!input) return;
+  const next = displayString(rootCtx.modelValue.value);
+  if (input.value !== next) input.value = next;
+}
+
+onMounted(() => {
+  const el = currentElement.value as HTMLInputElement | undefined;
+  rootCtx.onInputChange(el);
+  if (el) {
+    el.value = rootCtx.searchTerm.value || displayString(rootCtx.modelValue.value);
+  }
+  if (autoFocus) setTimeout(() => el?.focus(), 1);
+});
+
+onBeforeUnmount(() => rootCtx.onInputChange(undefined));
+
+watch(() => rootCtx.modelValue.value, () => {
+  if (rootCtx.isUserInputted.value) return;
+  if (!rootCtx.resetSearchTermOnSelect.value && rootCtx.searchTerm.value) return;
+  rootCtx.onSearchTermChange('');
+  syncDisplayValue();
+}, { deep: true });
+
+watch(() => rootCtx.searchTerm.value, (v) => {
+  const input = currentElement.value as HTMLInputElement | undefined;
+  if (!input) return;
+  if (!v && !rootCtx.isUserInputted.value) {
+    syncDisplayValue();
+    return;
+  }
+  if (input.value !== v) input.value = v;
+});
+
+watch(() => rootCtx.filterState.value, (newState, oldState) => {
+  if (oldState && oldState.count === 0 && newState.count > 0) {
+    rootCtx.highlightFirstItem();
+  }
+});
+
+function moveHighlight(delta: number) {
+  const els = rootCtx.getVisibleItemElements();
+  if (els.length === 0) return;
+  const curId = rootCtx.selectedValueId.value;
+  let idx = -1;
+  if (curId) {
+    for (let i = 0; i < els.length; i++) {
+      if (els[i]!.id === curId) {
+        idx = i;
+        break;
+      }
+    }
+  }
+  let nextIdx: number;
+  if (idx === -1) nextIdx = delta > 0 ? 0 : els.length - 1;
+  else nextIdx = (idx + delta + els.length) % els.length;
+  rootCtx.highlightItemById(els[nextIdx]!.id);
+}
+
+function commitHighlighted() {
+  const value = rootCtx.selectedValue.value;
+  if (value === undefined) return false;
+  rootCtx.onValueChange(value);
+  return true;
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const next = target.value;
+  rootCtx.onUserInputtedChange(true);
+  rootCtx.onSearchTermChange(next);
+  if (!rootCtx.open.value) {
+    rootCtx.onOpenChange(true);
+    nextTick(() => rootCtx.highlightFirstItem());
+  }
+  else {
+    nextTick(() => rootCtx.highlightFirstItem());
+  }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (isDisabled.value) return;
+  const { key } = event;
+
+  if (!rootCtx.open.value && OPEN_KEYS.includes(key)) {
+    event.preventDefault();
+    rootCtx.onOpenChange(true);
+    return;
+  }
+
+  if (!rootCtx.open.value) return;
+
+  switch (key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      moveHighlight(1);
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      moveHighlight(-1);
+      break;
+    case 'Home': {
+      event.preventDefault();
+      const first = rootCtx.getVisibleItemElements()[0];
+      if (first) rootCtx.highlightItemById(first.id);
+      break;
+    }
+    case 'End': {
+      event.preventDefault();
+      const list = rootCtx.getVisibleItemElements();
+      const last = list[list.length - 1];
+      if (last) rootCtx.highlightItemById(last.id);
+      break;
+    }
+    case 'Enter':
+      if (commitHighlighted()) event.preventDefault();
+      break;
+    case 'Escape':
+      event.preventDefault();
+      rootCtx.onOpenChange(false);
+      if (rootCtx.resetSearchTermOnBlur.value) rootCtx.onSearchTermChange('');
+      break;
+    case 'Tab':
+      rootCtx.onOpenChange(false);
+      break;
+  }
+}
+
+function handleFocus() {
+  if (openOnFocus && !rootCtx.open.value) rootCtx.onOpenChange(true);
+}
+
+function handleClick() {
+  if (openOnClick && !rootCtx.open.value) rootCtx.onOpenChange(true);
+}
+
+function handleBlur(event: FocusEvent) {
+  if (!rootCtx.open.value) return;
+  const nextFocus = event.relatedTarget as Element | null;
+  if (!nextFocus) return;
+
+  const parent = rootCtx.parentElement.value;
+  const content = rootCtx.contentElement.value;
+  if (parent?.contains(nextFocus) || content?.contains(nextFocus)) return;
+
+  rootCtx.onOpenChange(false);
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    type="text"
+    role="combobox"
+    autocomplete="off"
+    spellcheck="false"
+    aria-autocomplete="list"
+    :aria-expanded="rootCtx.open.value"
+    :aria-controls="rootCtx.contentId.value"
+    :aria-activedescendant="activeDescendant"
+    :aria-disabled="isDisabled || undefined"
+    :aria-required="rootCtx.required.value || undefined"
+    :disabled="isDisabled || undefined"
+    :data-state="rootCtx.open.value ? 'open' : 'closed'"
+    :data-disabled="isDisabled ? '' : undefined"
+    @input="handleInput"
+    @keydown="handleKeyDown"
+    @focus="handleFocus"
+    @click="handleClick"
+    @blur="handleBlur"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxItem.vue b/vue/primitives/src/combobox/ComboboxItem.vue
new file mode 100644
index 0000000..22089b4
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxItem.vue
@@ -0,0 +1,120 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { AcceptableValue } from './utils';
+
+export interface ComboboxItemProps<T extends AcceptableValue = AcceptableValue> extends PrimitiveProps {
+  /** Item value. Selected/registered identity. */
+  value: T;
+  /** Optional explicit text for filter + typeahead. */
+  textValue?: string;
+  /** Disable this item. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideComboboxItemContext, useComboboxGroupContext, useComboboxRootContext } from './context';
+
+const props = defineProps<ComboboxItemProps<T>>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+let groupCtx: { id: { value: string } } | null = null;
+try {
+  groupCtx = useComboboxGroupContext() as any;
+}
+catch {
+  groupCtx = null;
+}
+
+const id = useId(undefined, 'combobox-item');
+const textValue = ref(props.textValue ?? '');
+
+const isDisabled = computed(() => rootCtx.disabled.value || !!props.disabled);
+const isSelected = computed(() => rootCtx.isSelected(props.value));
+const isHighlighted = computed(() => rootCtx.selectedValueId.value === id.value);
+const isVisible = computed(() => rootCtx.filterState.value.items.has(id.value));
+
+function syncRegistration() {
+  rootCtx.onItemRegister(id.value, {
+    value: props.value,
+    textValue: textValue.value,
+    disabled: isDisabled.value,
+  });
+}
+
+onMounted(() => {
+  const el = currentElement.value as HTMLElement | undefined;
+  if (el && !props.textValue) {
+    textValue.value = el.textContent?.trim() ?? '';
+  }
+  syncRegistration();
+  if (groupCtx) rootCtx.onGroupItemRegister(groupCtx.id.value, id.value);
+});
+
+watch(() => [props.value, props.textValue, isDisabled.value], () => {
+  if (props.textValue) textValue.value = props.textValue;
+  syncRegistration();
+});
+
+onBeforeUnmount(() => {
+  rootCtx.onItemUnregister(id.value);
+  if (groupCtx) rootCtx.onGroupItemUnregister(groupCtx.id.value, id.value);
+  if (rootCtx.selectedValueId.value === id.value) {
+    rootCtx.onSelectedValueChange(undefined, undefined);
+  }
+});
+
+function handleClick(event: MouseEvent) {
+  if (isDisabled.value) return;
+  event.preventDefault();
+  rootCtx.onValueChange(props.value);
+  if (rootCtx.resetSearchTermOnSelect.value && !rootCtx.multiple.value) {
+    rootCtx.onSearchTermChange('');
+    rootCtx.onUserInputtedChange(false);
+  }
+}
+
+function handlePointerMove() {
+  if (isDisabled.value) return;
+  if (rootCtx.selectedValueId.value !== id.value) {
+    rootCtx.onSelectedValueChange(props.value, id.value);
+  }
+}
+
+provideComboboxItemContext({
+  id,
+  value: props.value,
+  textValue,
+  isSelected,
+  isDisabled,
+});
+
+defineExpose({ id, isVisible, isHighlighted });
+</script>
+
+<template>
+  <Primitive
+    v-show="isVisible"
+    :ref="forwardRef"
+    :id="id"
+    :as="props.as ?? 'div'"
+    role="option"
+    :aria-selected="isSelected"
+    :aria-disabled="isDisabled || undefined"
+    :data-state="isSelected ? 'checked' : 'unchecked'"
+    :data-highlighted="isHighlighted ? '' : undefined"
+    :data-disabled="isDisabled ? '' : undefined"
+    :tabindex="-1"
+    data-primitives-combobox-item
+    @click="handleClick"
+    @pointermove="handlePointerMove"
+  >
+    <slot :selected="isSelected" :highlighted="isHighlighted" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxItemIndicator.vue b/vue/primitives/src/combobox/ComboboxItemIndicator.vue
new file mode 100644
index 0000000..ccb9326
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxItemIndicator.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxItemIndicatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useComboboxItemContext } from './context';
+
+const { as = 'span' } = defineProps<ComboboxItemIndicatorProps>();
+const { forwardRef } = useForwardExpose();
+const itemCtx = useComboboxItemContext();
+</script>
+
+<template>
+  <Primitive
+    v-if="itemCtx.isSelected.value"
+    :ref="forwardRef"
+    :as="as"
+    aria-hidden="true"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxLabel.vue b/vue/primitives/src/combobox/ComboboxLabel.vue
new file mode 100644
index 0000000..c5248ed
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxLabel.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxLabelProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useComboboxGroupContext } from './context';
+
+const { as = 'div' } = defineProps<ComboboxLabelProps>();
+const { forwardRef } = useForwardExpose();
+const groupCtx = useComboboxGroupContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="groupCtx.id.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxPortal.vue b/vue/primitives/src/combobox/ComboboxPortal.vue
new file mode 100644
index 0000000..9023819
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PortalProps } from '../teleport';
+
+export interface ComboboxPortalProps extends PortalProps {}
+</script>
+
+<script setup lang="ts">
+import { Portal } from '../teleport';
+
+const { to, defer, disabled } = defineProps<ComboboxPortalProps>();
+</script>
+
+<template>
+  <Portal :to="to" :defer="defer" :disabled="disabled">
+    <slot />
+  </Portal>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxRoot.vue b/vue/primitives/src/combobox/ComboboxRoot.vue
new file mode 100644
index 0000000..59d0eb3
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxRoot.vue
@@ -0,0 +1,400 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+import type { AcceptableValue, ComboboxFilterFunction, ComboboxFilterItem } from './utils';
+
+export interface ComboboxRootProps<T extends AcceptableValue = AcceptableValue> {
+  /** Controlled selected value. Use `v-model`. */
+  modelValue?: T | T[];
+  /** Uncontrolled initial value. */
+  defaultValue?: T | T[];
+  /** Controlled open state. Use `v-model:open`. */
+  open?: boolean;
+  /** Uncontrolled default open state. */
+  defaultOpen?: boolean;
+  /** Allow selecting multiple values. */
+  multiple?: boolean;
+  /** Reading direction. Falls back to `ConfigProvider`. */
+  dir?: Direction;
+  /** Disable the whole combobox. */
+  disabled?: boolean;
+  /** Mark as required for native form validation. */
+  required?: boolean;
+  /** Native input name for form submission. */
+  name?: string;
+  /** Reset the search term when the input is blurred. @default true */
+  resetSearchTermOnBlur?: boolean;
+  /** Reset the search term when a value is selected (single mode). @default true */
+  resetSearchTermOnSelect?: boolean;
+  /** Skip the built-in filter; render every item regardless of search term. */
+  ignoreFilter?: boolean;
+  /** Custom filter implementation. Overrides the default substring match. */
+  filterFunction?: ComboboxFilterFunction;
+  /** Map the current model value to the input's display value. */
+  displayValue?: (value: T | T[] | undefined) => string;
+  /** Compare values by key, or via a custom comparator. */
+  by?: string | ((a: T, b: T) => boolean);
+}
+
+export interface ComboboxRootEmits<T extends AcceptableValue = AcceptableValue> {
+  'update:modelValue': [value: T | T[] | undefined];
+  'update:open': [open: boolean];
+}
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
+import type { ShallowRef } from 'vue';
+import type { ComboboxFilterState, ComboboxItemInfo } from './context';
+
+import { computed, nextTick, ref, shallowRef, toRef, triggerRef, watch } from 'vue';
+
+import { useConfig, useId } from '../config-provider';
+import { PopperRoot } from '../popper';
+import { provideComboboxRootContext } from './context';
+import { defaultFilter, valueComparator } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  modelValue,
+  defaultValue,
+  defaultOpen = false,
+  multiple = false,
+  dir,
+  disabled = false,
+  required = false,
+  name,
+  resetSearchTermOnBlur = true,
+  resetSearchTermOnSelect = true,
+  ignoreFilter = false,
+  filterFunction,
+  displayValue,
+  by,
+} = defineProps<ComboboxRootProps<T>>();
+
+const emit = defineEmits<ComboboxRootEmits<T>>();
+
+const config = useConfig();
+const direction = computed(() => dir ?? config.dir.value);
+
+const localOpen = ref<boolean>(defaultOpen);
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+const initial = (modelValue ?? defaultValue) as T | T[] | undefined;
+const localValue = shallowRef<T | T[] | undefined>(
+  multiple
+    ? (Array.isArray(initial) ? initial.slice() : (initial === undefined ? [] : [initial]))
+    : (Array.isArray(initial) ? initial[0] : initial),
+);
+const value = defineModel<T | T[] | undefined>('modelValue', {
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+const searchTerm = ref('');
+const isUserInputted = ref(false);
+
+const contentId = useId(undefined, 'combobox-content');
+
+const triggerElement = shallowRef<HTMLElement | undefined>(undefined);
+const inputElement = shallowRef<HTMLInputElement | undefined>(undefined);
+const contentElement = shallowRef<HTMLElement | undefined>(undefined);
+const parentElement = shallowRef<HTMLElement | undefined>(undefined);
+
+const selectedValue = shallowRef<T | undefined>(undefined) as ShallowRef<T | undefined>;
+const selectedValueId = ref<string | undefined>(undefined);
+
+const allItems = shallowRef(new Map<string, ComboboxItemInfo<T>>());
+const allGroups = shallowRef(new Map<string, Set<string>>());
+
+function onItemRegister(id: string, info: ComboboxItemInfo<T>) {
+  allItems.value.set(id, info);
+  triggerRef(allItems);
+}
+
+function onItemUnregister(id: string) {
+  allItems.value.delete(id);
+  triggerRef(allItems);
+}
+
+function onGroupRegister(groupId: string) {
+  if (!allGroups.value.has(groupId)) {
+    allGroups.value.set(groupId, new Set());
+    triggerRef(allGroups);
+  }
+}
+
+function onGroupUnregister(groupId: string) {
+  allGroups.value.delete(groupId);
+  triggerRef(allGroups);
+}
+
+function onGroupItemRegister(groupId: string, itemId: string) {
+  let set = allGroups.value.get(groupId);
+  if (!set) {
+    set = new Set();
+    allGroups.value.set(groupId, set);
+  }
+  set.add(itemId);
+  triggerRef(allGroups);
+}
+
+function onGroupItemUnregister(groupId: string, itemId: string) {
+  const set = allGroups.value.get(groupId);
+  if (set) {
+    set.delete(itemId);
+    triggerRef(allGroups);
+  }
+}
+
+const filterRef = toRef(() => filterFunction);
+const ignoreFilterRef = toRef(() => ignoreFilter);
+
+const filterState = computed<ComboboxFilterState>(() => {
+  const items = allItems.value;
+  const groups = allGroups.value;
+
+  if (!searchTerm.value || ignoreFilterRef.value || !isUserInputted.value) {
+    return {
+      count: items.size,
+      items: new Set(items.keys()),
+      groups: new Set(groups.keys()),
+    };
+  }
+
+  const candidates: ComboboxFilterItem[] = [];
+  for (const [id, info] of items) candidates.push({ id, textValue: info.textValue });
+
+  const fn = filterRef.value ?? defaultFilter;
+  const filtered = fn(candidates, searchTerm.value);
+
+  const visibleItems = new Set<string>();
+  for (let i = 0; i < filtered.length; i++) visibleItems.add(filtered[i]!.id);
+
+  const visibleGroups = new Set<string>();
+  for (const [groupId, set] of groups) {
+    for (const itemId of set) {
+      if (visibleItems.has(itemId)) {
+        visibleGroups.add(groupId);
+        break;
+      }
+    }
+  }
+
+  return {
+    count: visibleItems.size,
+    items: visibleItems,
+    groups: visibleGroups,
+  };
+});
+
+function isSelected(v: T): boolean {
+  return valueComparator(value.value as T | T[] | undefined, v, by);
+}
+
+function commitValue(next: T | T[] | undefined) {
+  value.value = next;
+  emit('update:modelValue', next);
+}
+
+function onValueChange(v: T) {
+  if (multiple) {
+    const cur = Array.isArray(value.value) ? [...(value.value as T[])] : [];
+    const idx = cur.findIndex(i => valueComparator(i, v, by));
+    if (idx === -1) cur.push(v);
+    else cur.splice(idx, 1);
+    commitValue(cur);
+    inputElement.value?.focus();
+  }
+  else {
+    commitValue(v);
+    open.value = false;
+  }
+}
+
+function onOpenChange(next: boolean) {
+  open.value = next;
+  if (next) {
+    isUserInputted.value = false;
+    searchTerm.value = '';
+    nextTick(() => {
+      inputElement.value?.focus();
+      highlightSelectedOrFirst();
+    });
+  }
+  else {
+    setTimeout(() => {
+      if (resetSearchTermOnBlur) searchTerm.value = '';
+      isUserInputted.value = false;
+    }, 1);
+  }
+}
+
+function onSelectedValueChange(v: T | undefined, id?: string) {
+  selectedValue.value = v;
+  selectedValueId.value = id;
+}
+
+function getVisibleItemElements(): HTMLElement[] {
+  const root = contentElement.value ?? parentElement.value;
+  if (!root) return [];
+  const all = Array.from(root.querySelectorAll<HTMLElement>('[data-primitives-combobox-item]'));
+  const visible: HTMLElement[] = [];
+  const filterIds = filterState.value.items;
+  for (let i = 0; i < all.length; i++) {
+    const el = all[i]!;
+    if (el.dataset['disabled'] === '') continue;
+    const id = el.id;
+    if (!id || filterIds.has(id)) visible.push(el);
+  }
+  return visible;
+}
+
+function readValueFromElement(el: HTMLElement): T | undefined {
+  const id = el.id;
+  if (!id) return undefined;
+  return allItems.value.get(id)?.value;
+}
+
+function highlightItemById(id: string | undefined) {
+  if (!id) {
+    selectedValue.value = undefined;
+    selectedValueId.value = undefined;
+    return;
+  }
+  const info = allItems.value.get(id);
+  if (!info) return;
+  selectedValue.value = info.value;
+  selectedValueId.value = id;
+  const root = contentElement.value ?? parentElement.value;
+  const el = root?.querySelector<HTMLElement>(`#${CSS.escape(id)}`);
+  el?.scrollIntoView({ block: 'nearest' });
+}
+
+function highlightFirstItem() {
+  const els = getVisibleItemElements();
+  if (els.length === 0) {
+    selectedValue.value = undefined;
+    selectedValueId.value = undefined;
+    return;
+  }
+  highlightItemById(els[0]!.id);
+}
+
+function highlightSelectedOrFirst() {
+  const cur = value.value;
+  if (cur !== undefined && !Array.isArray(cur)) {
+    for (const [id, info] of allItems.value) {
+      if (valueComparator(cur, info.value, by) && !info.disabled) {
+        highlightItemById(id);
+        return;
+      }
+    }
+  }
+  highlightFirstItem();
+}
+
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    selectedValue.value = undefined;
+    selectedValueId.value = undefined;
+  }
+});
+
+function onSearchTermChange(v: string) {
+  searchTerm.value = v;
+}
+
+function onUserInputtedChange(v: boolean) {
+  isUserInputted.value = v;
+}
+
+provideComboboxRootContext({
+  modelValue: value,
+  onValueChange,
+  multiple: toRef(() => multiple),
+  open,
+  onOpenChange,
+  disabled: toRef(() => disabled),
+  dir: direction,
+  name: toRef(() => name),
+  required: toRef(() => required),
+  by,
+  isSelected,
+
+  searchTerm,
+  onSearchTermChange,
+  resetSearchTermOnBlur: toRef(() => resetSearchTermOnBlur),
+  resetSearchTermOnSelect: toRef(() => resetSearchTermOnSelect),
+  ignoreFilter: ignoreFilterRef,
+  filterFunction: filterRef,
+  displayValue: displayValue as ((v: unknown) => string) | undefined,
+
+  isUserInputted,
+  onUserInputtedChange,
+
+  contentId,
+  triggerElement,
+  onTriggerChange: (el) => { triggerElement.value = el; },
+  inputElement,
+  onInputChange: (el) => { inputElement.value = el; },
+  contentElement,
+  onContentChange: (el) => { contentElement.value = el; },
+  parentElement,
+  onParentChange: (el) => { parentElement.value = el; },
+
+  selectedValue,
+  selectedValueId,
+  onSelectedValueChange,
+
+  allItems,
+  onItemRegister,
+  onItemUnregister,
+  allGroups,
+  onGroupRegister,
+  onGroupUnregister,
+  onGroupItemRegister,
+  onGroupItemUnregister,
+
+  filterState,
+
+  getVisibleItemElements,
+  highlightItemById,
+  highlightFirstItem,
+});
+
+defineExpose({
+  filterState,
+  highlightFirstItem,
+  highlightItemById,
+  // Avoid unused warnings — surfaced for advanced consumers
+  readValueFromElement,
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot :open="open" :model-value="value" />
+    <input
+      v-if="name"
+      type="hidden"
+      :name="name"
+      :value="Array.isArray(value) ? JSON.stringify(value) : (value ?? '')"
+      :required="required"
+      :disabled="disabled"
+      aria-hidden="true"
+      style="display: none"
+      tabindex="-1"
+    />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxSeparator.vue b/vue/primitives/src/combobox/ComboboxSeparator.vue
new file mode 100644
index 0000000..7ff1fa6
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxSeparator.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxSeparatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<ComboboxSeparatorProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="separator"
+    aria-orientation="horizontal"
+    aria-hidden="true"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxTrigger.vue b/vue/primitives/src/combobox/ComboboxTrigger.vue
new file mode 100644
index 0000000..8b16984
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxTrigger.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxTriggerProps extends PrimitiveProps {
+  /** Disable the trigger independently from the root. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useComboboxRootContext } from './context';
+import { getOpenState } from './utils';
+
+const { as = 'button', disabled = false } = defineProps<ComboboxTriggerProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useComboboxRootContext();
+
+const isDisabled = computed(() => disabled || rootCtx.disabled.value);
+
+watchPostEffect(() => rootCtx.onTriggerChange(currentElement.value));
+onBeforeUnmount(() => rootCtx.onTriggerChange(undefined));
+
+function handleClick(event: MouseEvent) {
+  if (isDisabled.value) return;
+  event.preventDefault();
+  rootCtx.onOpenChange(!rootCtx.open.value);
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    tabindex="-1"
+    aria-haspopup="listbox"
+    aria-label="Show options"
+    :aria-controls="rootCtx.contentId.value"
+    :aria-expanded="rootCtx.open.value"
+    :aria-disabled="isDisabled || undefined"
+    :disabled="isDisabled || undefined"
+    :data-state="getOpenState(rootCtx.open.value)"
+    :data-disabled="isDisabled ? '' : undefined"
+    @click="handleClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/ComboboxViewport.vue b/vue/primitives/src/combobox/ComboboxViewport.vue
new file mode 100644
index 0000000..0d54883
--- /dev/null
+++ b/vue/primitives/src/combobox/ComboboxViewport.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ComboboxViewportProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useComboboxContentContext } from './context';
+
+const { as = 'div' } = defineProps<ComboboxViewportProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const contentCtx = useComboboxContentContext();
+
+watchPostEffect(() => contentCtx.onViewportChange(currentElement.value));
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="presentation"
+    data-primitives-combobox-viewport
+    style="position: relative; flex: 1 1 0%; overflow: hidden auto"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/combobox/__test__/Combobox.live-region.test.ts b/vue/primitives/src/combobox/__test__/Combobox.live-region.test.ts
new file mode 100644
index 0000000..465a4fe
--- /dev/null
+++ b/vue/primitives/src/combobox/__test__/Combobox.live-region.test.ts
@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { userEvent } from 'vitest/browser';
+import { defineComponent, h, nextTick, ref } from 'vue';
+
+import {
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport,
+} from '../index';
+
+function mountCombobox() {
+  const search = ref('');
+  const Harness = defineComponent({
+    setup: () => () => h(ComboboxRoot, { defaultOpen: true, multiple: false }, {
+      default: () => [
+        h(ComboboxTrigger, { id: 'trigger' }, {
+          default: () => h(ComboboxInput, {
+            id: 'input',
+            'onUpdate:searchTerm': (v: string) => { search.value = v; },
+          }),
+        }),
+        h(ComboboxPortal, {}, {
+          default: () => h(ComboboxContent, {}, {
+            default: () => h(ComboboxViewport, {}, {
+              default: () => [
+                h(ComboboxItem, { value: 'apple', textValue: 'Apple' }, { default: () => 'Apple' }),
+                h(ComboboxItem, { value: 'banana', textValue: 'Banana' }, { default: () => 'Banana' }),
+                h(ComboboxItem, { value: 'cherry', textValue: 'Cherry' }, { default: () => 'Cherry' }),
+              ],
+            }),
+          }),
+        }),
+      ],
+    }),
+  });
+  return { wrapper: mount(Harness, { attachTo: document.body }), search };
+}
+
+function getLiveRegion(): HTMLElement | null {
+  return document.querySelector('[data-primitives-combobox-announce]');
+}
+
+describe('Combobox — filtered-results live region', () => {
+  it('announces "N results available." reflecting the unfiltered count on open', async () => {
+    const { wrapper } = mountCombobox();
+    await nextTick();
+    await nextTick();
+    await nextTick();
+    const live = getLiveRegion();
+    expect(live).toBeTruthy();
+    expect(live!.getAttribute('role')).toBe('status');
+    expect(live!.getAttribute('aria-live')).toBe('polite');
+    expect(live!.textContent?.trim()).toBe('3 results available.');
+    wrapper.unmount();
+  });
+
+  it('updates the count as the search term filters items', async () => {
+    const { wrapper } = mountCombobox();
+    await nextTick();
+    await nextTick();
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('#input')!;
+    await userEvent.click(input);
+    await userEvent.type(input, 'app');
+    await nextTick();
+    await nextTick();
+    expect(getLiveRegion()!.textContent?.trim()).toBe('1 result available.');
+
+    await userEvent.clear(input);
+    await userEvent.type(input, 'zz');
+    await nextTick();
+    await nextTick();
+    expect(getLiveRegion()!.textContent?.trim()).toBe('0 results available.');
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-announces--N-results-available---reflecting-the-unfiltered-count-on-open-1.png b/vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-announces--N-results-available---reflecting-the-unfiltered-count-on-open-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..9561153944c637819360ac96a1fbd6e4137c45e5
GIT binary patch
literal 2380
zcmeAS@N?(olHy`uVBq!ia0y~yVDx2RV7kD;1QeOwv~@BA11F=Wi(^Q|oHuuLy>tR3
z8Xg)?KR923&2hrb?q~xE*2HfKCQ`n;7`8u<y3?Q#u|}$wt@)AZed|KE_UX?%<L&g>
z`R3&R`t+%&x_bA<jfN4-*4Ebf`T6SV>bGy-W}cQ(R9jnHQu3vC58La9FJHd=`Sa(G
z9~B2C`IwuVi@Vho7aK?H{aN$xe2Up@TN@jmh<Ps$y?pxg>CvM{6TY51fByWrb8Kra
zHJ#g^Uo`RmjK6>XGHQQIXDGF5x0~xc|J*|V=NFb2zqoAq<)zH8624j_;q4Fh->R|O
zziXG&pAMigjM`>*@811eUsY9Q^~3hs?+r1R`}_NU|Neb5$1H+*^2sM3KYo1hAmP9#
zpL_T3zkl~GE<T<;J0UweJ3s&ZhYtln@qPRDu}yfkR~F449M+EtV@Annn2d%AN**0e
z5TglVG(ixk$VM{>tux6#U|Z<_|D2xkLSUPS4b&K7W;j06nfvjc-w%Ky44$rjF6*2U
FngCSWBWC~r

literal 0
HcmV?d00001

diff --git a/vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-updates-the-count-as-the-search-term-filters-items-1.png b/vue/primitives/src/combobox/__test__/__screenshots__/Combobox.live-region.test.ts/Combobox---filtered-results-live-region-updates-the-count-as-the-search-term-filters-items-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..0792607746aadda01aded0ddce23000e1c6166b8
GIT binary patch
literal 3071
zcmeHJ{WIGK7!P)~HJ7^Mt~N?e-Eq5?FgEp)r0u*cSHxJcRTHbu%Xvw?CPaMED`%;w
z*^nSPGgRyCN<_RQ_0pik%TY0}bw-3te0_zGNXGt)-Q~CEKF{6rxqI$;KA%rfP@o^;
zlEoz$42Hmc>m3Y(83e#!hSQ%Io+DNH+%gyp-ih<R{XL~xz8pX&Y+B`lkiUpI+-GKW
zVAymeA@<X9)7Xw8xcQxA8=unr?vz^Mt;B(+K`SrdKAOv>-Ve>MrG4k$`^wY;cX#%;
zTV{*FWxiF;B3yJsiRfiOaO1R>Q-mgm{`n;52dgcXx?1fX(}3q-Xxr1ZOeQn$UgU<T
z7=j=Z^x<?*`mS;JZC{j7b3i*@anmYKH56ACi)8@_+uO6XW%YSQObdi%w4|A1<>2V(
z=s?SSS%Spo?94T(6+$4_@=;bs#u0sVL{ti>#^y+P;^_*}k$o1M{8{<Oc2VNkPUY5&
zU}=7hzuO?2so&h3!Yf-J^fIi`9&d_WXz#&pC<^F5oP7dds6SOMxuTt%>34_ta5|Md
zsgwJ89!&%khbay0Hg<kBcSPxA3OEF>L+T>O^GJ!EZ2V;X+w}?|7EqZWt<h&7kJlz~
zFH23ALYy1@Ku)r{oJke-p6n?SEGqv514mH|fsSW_LO9{V$QS`GLYsg<l135!3)>+>
z=Hx9Wn-HTQ-eBMoKUK;Gv?t`%%$T79L<#z60e!p-4V&TR%Y3MXx4PI%R)pZu+@HtG
z<L!;wS<UTiEHvR_A6QKR-<q3Ty}AF!$mE$lsSgzGwh6WJjwv>pdNkvQ?BDw+{9fp`
zM%Kv5IT*8FqbmAC8Ut&vfc71Gf1?B|Agu|&FLU-k42)Nxh-AZN>+5OSK{(1w_2G#^
zpx!$lQ?L$M)$#d!P!dpuSt%9<E4gNo%J5n!j7U?~R}ixH_)^iabVz84N!y;jsge+=
zi8}3ByrlJl938q)Xi5A9doXId#3Kne7@l7zEmIEu9s?g|Cu`qbZ(GjVZ6OIxwth$U
zX8cEwVQAJ1k%aK@?$>Oh^J@B1KlOON<-RcbqKh5CK+IPK5<7>KaBk~fc9z(wBf9f(
zrfd+%{6hH;Z*8?JaY=$#5pOs;0DbMQ&l;i|&@ID{9;}>*UE;f1kYZxQ=}D={<OGo{
z)ikURW5ZbOuR-K2Q3uv3<6{KL<8oM8nm7x??Nf9q)xym6uo3A<6Lmi;W!}Fy=`W|V
zAx}3N>A1P#edP<8xXKMsQsUy`rj`%!do^nDSPA|tYQXYJS?cWJcGvxA0if>TBkG<$
z)pe(x?f}|c-P)nb7PR$a$QQZ0^qE*!Rt;OAK4PvP<>7uL5Cjxi9n^?b9rVwEW7rJ&
z0>jGFxI5X`97XWTR_!xgVvIxcxbYH(+gFO7-ByF7>e331&6K^zbYtrFtoxzt>S@|#
znnxj~<{QprEncdJ^*hlYg#H`!QlOVdy*K=?jPV$Cp5Ar3=dOc)oEOFy`P~R6g&u}-
S=-2Yk5g5)V(7W|cWd6Tr=dZ#5

literal 0
HcmV?d00001

diff --git a/vue/primitives/src/combobox/context.ts b/vue/primitives/src/combobox/context.ts
new file mode 100644
index 0000000..48a81f0
--- /dev/null
+++ b/vue/primitives/src/combobox/context.ts
@@ -0,0 +1,112 @@
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import type { Direction } from '../config-provider';
+import type { AcceptableValue, ComboboxFilterFunction } from './utils';
+
+import { useContextFactory } from '@robonen/vue';
+
+export interface ComboboxItemInfo<T = AcceptableValue> {
+  value: T;
+  textValue: string;
+  disabled: boolean;
+}
+
+export interface ComboboxFilterState {
+  count: number;
+  items: Set<string>;
+  groups: Set<string>;
+}
+
+export interface ComboboxRootContext<T = AcceptableValue> {
+  modelValue: Ref<T | T[] | undefined>;
+  onValueChange: (value: T) => void;
+  multiple: Ref<boolean>;
+  open: Ref<boolean>;
+  onOpenChange: (open: boolean) => void;
+  disabled: Ref<boolean>;
+  dir: Ref<Direction>;
+  name: Ref<string | undefined>;
+  required: Ref<boolean>;
+  by?: string | ((a: T, b: T) => boolean);
+  isSelected: (value: T) => boolean;
+
+  searchTerm: Ref<string>;
+  onSearchTermChange: (value: string) => void;
+  resetSearchTermOnBlur: Ref<boolean>;
+  resetSearchTermOnSelect: Ref<boolean>;
+  ignoreFilter: Ref<boolean>;
+  filterFunction: Ref<ComboboxFilterFunction | undefined>;
+  displayValue?: (value: T | T[] | undefined) => string;
+
+  isUserInputted: Ref<boolean>;
+  onUserInputtedChange: (value: boolean) => void;
+
+  contentId: Ref<string>;
+  triggerElement: ShallowRef<HTMLElement | undefined>;
+  onTriggerChange: (el: HTMLElement | undefined) => void;
+  inputElement: ShallowRef<HTMLInputElement | undefined>;
+  onInputChange: (el: HTMLInputElement | undefined) => void;
+  contentElement: ShallowRef<HTMLElement | undefined>;
+  onContentChange: (el: HTMLElement | undefined) => void;
+  parentElement: ShallowRef<HTMLElement | undefined>;
+  onParentChange: (el: HTMLElement | undefined) => void;
+
+  selectedValue: ShallowRef<T | undefined>;
+  selectedValueId: Ref<string | undefined>;
+  onSelectedValueChange: (value: T | undefined, id?: string) => void;
+
+  allItems: ShallowRef<Map<string, ComboboxItemInfo<T>>>;
+  onItemRegister: (id: string, info: ComboboxItemInfo<T>) => void;
+  onItemUnregister: (id: string) => void;
+  allGroups: ShallowRef<Map<string, Set<string>>>;
+  onGroupRegister: (groupId: string) => void;
+  onGroupUnregister: (groupId: string) => void;
+  onGroupItemRegister: (groupId: string, itemId: string) => void;
+  onGroupItemUnregister: (groupId: string, itemId: string) => void;
+
+  filterState: ComputedRef<ComboboxFilterState>;
+
+  /** Returns visible, enabled item elements in DOM order. */
+  getVisibleItemElements: () => HTMLElement[];
+  /** Highlights an item element by its id. */
+  highlightItemById: (id: string | undefined) => void;
+  /** Highlights the first visible item. */
+  highlightFirstItem: () => void;
+}
+
+export interface ComboboxContentContext {
+  viewportElement: ShallowRef<HTMLElement | undefined>;
+  onViewportChange: (el: HTMLElement | undefined) => void;
+  position: Ref<'inline' | 'popper'>;
+}
+
+export interface ComboboxGroupContext {
+  id: Ref<string>;
+}
+
+export interface ComboboxItemContext<T = AcceptableValue> {
+  id: Ref<string>;
+  value: T;
+  textValue: Ref<string>;
+  isSelected: Ref<boolean>;
+  isDisabled: Ref<boolean>;
+}
+
+export const {
+  inject: useComboboxRootContext,
+  provide: provideComboboxRootContext,
+} = useContextFactory<ComboboxRootContext<any>>('ComboboxRoot');
+
+export const {
+  inject: useComboboxContentContext,
+  provide: provideComboboxContentContext,
+} = useContextFactory<ComboboxContentContext>('ComboboxContent');
+
+export const {
+  inject: useComboboxGroupContext,
+  provide: provideComboboxGroupContext,
+} = useContextFactory<ComboboxGroupContext>('ComboboxGroup');
+
+export const {
+  inject: useComboboxItemContext,
+  provide: provideComboboxItemContext,
+} = useContextFactory<ComboboxItemContext<any>>('ComboboxItem');
diff --git a/vue/primitives/src/combobox/index.ts b/vue/primitives/src/combobox/index.ts
new file mode 100644
index 0000000..12e8346
--- /dev/null
+++ b/vue/primitives/src/combobox/index.ts
@@ -0,0 +1,51 @@
+export { default as ComboboxAnchor } from './ComboboxAnchor.vue';
+export { default as ComboboxArrow } from './ComboboxArrow.vue';
+export { default as ComboboxCancel } from './ComboboxCancel.vue';
+export { default as ComboboxContent } from './ComboboxContent.vue';
+export { default as ComboboxContentImpl } from './ComboboxContentImpl.vue';
+export { default as ComboboxEmpty } from './ComboboxEmpty.vue';
+export { default as ComboboxGroup } from './ComboboxGroup.vue';
+export { default as ComboboxInput } from './ComboboxInput.vue';
+export { default as ComboboxItem } from './ComboboxItem.vue';
+export { default as ComboboxItemIndicator } from './ComboboxItemIndicator.vue';
+export { default as ComboboxLabel } from './ComboboxLabel.vue';
+export { default as ComboboxPortal } from './ComboboxPortal.vue';
+export { default as ComboboxRoot } from './ComboboxRoot.vue';
+export { default as ComboboxSeparator } from './ComboboxSeparator.vue';
+export { default as ComboboxTrigger } from './ComboboxTrigger.vue';
+export { default as ComboboxViewport } from './ComboboxViewport.vue';
+
+export {
+  useComboboxContentContext,
+  useComboboxGroupContext,
+  useComboboxItemContext,
+  useComboboxRootContext,
+} from './context';
+
+export type {
+  ComboboxContentContext,
+  ComboboxFilterState,
+  ComboboxGroupContext,
+  ComboboxItemContext,
+  ComboboxItemInfo,
+  ComboboxRootContext,
+} from './context';
+
+export type { AcceptableValue, ComboboxFilterFunction, ComboboxFilterItem } from './utils';
+
+export type { ComboboxAnchorProps } from './ComboboxAnchor.vue';
+export type { ComboboxArrowProps } from './ComboboxArrow.vue';
+export type { ComboboxCancelProps } from './ComboboxCancel.vue';
+export type { ComboboxContentEmits, ComboboxContentProps } from './ComboboxContent.vue';
+export type { ComboboxContentImplEmits, ComboboxContentImplProps } from './ComboboxContentImpl.vue';
+export type { ComboboxEmptyProps } from './ComboboxEmpty.vue';
+export type { ComboboxGroupProps } from './ComboboxGroup.vue';
+export type { ComboboxInputProps } from './ComboboxInput.vue';
+export type { ComboboxItemIndicatorProps } from './ComboboxItemIndicator.vue';
+export type { ComboboxItemProps } from './ComboboxItem.vue';
+export type { ComboboxLabelProps } from './ComboboxLabel.vue';
+export type { ComboboxPortalProps } from './ComboboxPortal.vue';
+export type { ComboboxRootEmits, ComboboxRootProps } from './ComboboxRoot.vue';
+export type { ComboboxSeparatorProps } from './ComboboxSeparator.vue';
+export type { ComboboxTriggerProps } from './ComboboxTrigger.vue';
+export type { ComboboxViewportProps } from './ComboboxViewport.vue';
diff --git a/vue/primitives/src/combobox/utils.ts b/vue/primitives/src/combobox/utils.ts
new file mode 100644
index 0000000..cca782d
--- /dev/null
+++ b/vue/primitives/src/combobox/utils.ts
@@ -0,0 +1,57 @@
+export type AcceptableValue = string | number | boolean | Record<string, unknown>;
+
+export const OPEN_KEYS = ['Enter', ' ', 'ArrowDown', 'ArrowUp', 'PageUp', 'PageDown', 'Home', 'End'];
+export const SELECTION_KEYS = ['Enter', ' '];
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function getOpenState(open: boolean): 'open' | 'closed' {
+  return open ? 'open' : 'closed';
+}
+
+export function compare<T>(
+  a: T | undefined,
+  b: T | undefined,
+  by?: string | ((a: T, b: T) => boolean),
+): boolean {
+  if (a === undefined || b === undefined) return false;
+  if (by === undefined) return a === b;
+  if (typeof by === 'function') return by(a as T, b as T);
+  return (a as any)?.[by] === (b as any)?.[by];
+}
+
+export function valueComparator<T>(
+  value: T | T[] | undefined,
+  current: T,
+  by?: string | ((a: T, b: T) => boolean),
+): boolean {
+  if (value === undefined) return false;
+  if (!Array.isArray(value)) return compare(value, current, by);
+  for (const v of value) {
+    if (compare(v, current, by)) return true;
+  }
+  return false;
+}
+
+export interface ComboboxFilterItem {
+  id: string;
+  textValue: string;
+}
+
+export type ComboboxFilterFunction = (
+  items: ComboboxFilterItem[],
+  searchTerm: string,
+) => ComboboxFilterItem[];
+
+export const defaultFilter: ComboboxFilterFunction = (items, searchTerm) => {
+  const term = searchTerm.toLowerCase();
+  if (!term) return items;
+  const out: ComboboxFilterItem[] = [];
+  for (let i = 0; i < items.length; i++) {
+    const it = items[i]!;
+    if (it.textValue.toLowerCase().includes(term)) out.push(it);
+  }
+  return out;
+};
diff --git a/vue/primitives/src/command/CommandEmpty.vue b/vue/primitives/src/command/CommandEmpty.vue
new file mode 100644
index 0000000..6de4a4a
--- /dev/null
+++ b/vue/primitives/src/command/CommandEmpty.vue
@@ -0,0 +1,39 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandEmptyProps extends PrimitiveProps {
+  /** Render even while there is no active search term. */
+  always?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useCommandContext } from './context';
+
+const { as = 'div', always = false } = defineProps<CommandEmptyProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCommandContext();
+
+const shouldRender = computed(() => {
+  if (ctx.filteredItems.value.size !== 0) return false;
+  if (always) return true;
+  return ctx.searchTerm.value.length > 0;
+});
+</script>
+
+<template>
+  <Primitive
+    v-if="shouldRender"
+    :ref="forwardRef"
+    :as="as"
+    role="presentation"
+    data-primitives-command-empty
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandGroup.vue b/vue/primitives/src/command/CommandGroup.vue
new file mode 100644
index 0000000..935c28a
--- /dev/null
+++ b/vue/primitives/src/command/CommandGroup.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandGroupProps extends PrimitiveProps {
+  /** Group heading text (rendered when the default slot doesn't override it). */
+  heading?: string;
+  /** Stable identifier for the group. Auto-generated when omitted. */
+  value?: string;
+  /** Render the group even when all of its items are filtered out. */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, toRef } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideCommandGroupContext, useCommandContext } from './context';
+
+const {
+  as = 'div',
+  heading,
+  value,
+  forceMount = false,
+} = defineProps<CommandGroupProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCommandContext();
+
+const id = useId(() => value, 'command-group');
+const headingId = useId(undefined, 'command-group-heading');
+
+const hasVisibleItem = computed(() => {
+  const set = ctx.allGroups.value.get(id.value);
+  if (!set || set.size === 0) return false;
+  for (const v of set) {
+    const info = ctx.allItems.value.get(v);
+    if (!info || info.disabled) continue;
+    if (ctx.filteredItems.value.has(v)) return true;
+  }
+  return false;
+});
+
+const isVisible = computed(() => forceMount || hasVisibleItem.value);
+
+onMounted(() => ctx.registerGroup(id.value));
+onBeforeUnmount(() => ctx.unregisterGroup(id.value));
+
+provideCommandGroupContext({
+  id,
+  forceMount: toRef(() => forceMount),
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="presentation"
+    :data-primitives-state="isVisible ? 'visible' : 'hidden'"
+    :hidden="!isVisible || undefined"
+    data-primitives-command-group
+  >
+    <div v-if="heading" :id="headingId" data-primitives-command-group-heading>
+      {{ heading }}
+    </div>
+    <div role="group" :aria-labelledby="heading ? headingId : undefined">
+      <slot />
+    </div>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandInput.vue b/vue/primitives/src/command/CommandInput.vue
new file mode 100644
index 0000000..b135fbb
--- /dev/null
+++ b/vue/primitives/src/command/CommandInput.vue
@@ -0,0 +1,165 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandInputProps extends PrimitiveProps {
+  /** Controlled value; falls back to root `searchTerm`. */
+  modelValue?: string;
+  /** Disable the input. */
+  disabled?: boolean;
+  /** Focus the input on mount. */
+  autoFocus?: boolean;
+}
+
+export interface CommandInputEmits {
+  'update:modelValue': [value: string];
+  'update:searchTerm': [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useCommandContext } from './context';
+
+const {
+  as = 'input',
+  modelValue,
+  disabled = false,
+  autoFocus = false,
+} = defineProps<CommandInputProps>();
+
+const emit = defineEmits<CommandInputEmits>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const ctx = useCommandContext();
+
+const activeDescendant = computed(() => {
+  const v = ctx.selectedValue.value;
+  return v === undefined ? undefined : ctx.getItemId(v);
+});
+
+onMounted(() => {
+  const el = currentElement.value as HTMLInputElement | undefined;
+  if (!el) return;
+  if (modelValue !== undefined && modelValue !== ctx.searchTerm.value) {
+    ctx.setSearchTerm(modelValue);
+  }
+  if (el.value !== ctx.searchTerm.value) el.value = ctx.searchTerm.value;
+  if (autoFocus) setTimeout(() => el.focus(), 0);
+});
+
+watch(
+  () => modelValue,
+  (v) => {
+    if (v === undefined) return;
+    if (v !== ctx.searchTerm.value) ctx.setSearchTerm(v);
+  },
+);
+
+watch(
+  () => ctx.searchTerm.value,
+  (v) => {
+    const el = currentElement.value as HTMLInputElement | undefined;
+    if (el && el.value !== v) el.value = v;
+  },
+);
+
+function moveBy(delta: number) {
+  const items = ctx.getSelectableItems();
+  if (items.length === 0) return;
+  const cur = ctx.selectedValue.value;
+  const idx = cur === undefined ? -1 : items.indexOf(cur);
+  let next: number;
+  if (idx === -1) {
+    next = delta > 0 ? 0 : items.length - 1;
+  }
+  else {
+    next = idx + delta;
+    if (ctx.loop.value) {
+      next = (next + items.length) % items.length;
+    }
+    else {
+      if (next < 0) next = 0;
+      if (next > items.length - 1) next = items.length - 1;
+    }
+  }
+  ctx.setSelectedValue(items[next]);
+  scrollSelectedIntoView();
+}
+
+function moveTo(position: 'first' | 'last') {
+  const items = ctx.getSelectableItems();
+  if (items.length === 0) return;
+  ctx.setSelectedValue(position === 'first' ? items[0] : items[items.length - 1]);
+  scrollSelectedIntoView();
+}
+
+function scrollSelectedIntoView() {
+  const v = ctx.selectedValue.value;
+  const root = ctx.listElement.value;
+  if (v === undefined || !root) return;
+  const id = ctx.getItemId(v);
+  const el = root.querySelector<HTMLElement>(`#${CSS.escape(id)}`);
+  el?.scrollIntoView({ block: 'nearest' });
+}
+
+function handleInput(event: Event) {
+  const next = (event.target as HTMLInputElement).value;
+  ctx.setSearchTerm(next);
+  emit('update:modelValue', next);
+  emit('update:searchTerm', next);
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (disabled) return;
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      moveBy(1);
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      moveBy(-1);
+      break;
+    case 'Home':
+      event.preventDefault();
+      moveTo('first');
+      break;
+    case 'End':
+      event.preventDefault();
+      moveTo('last');
+      break;
+    case 'Enter':
+      if (ctx.selectedValue.value !== undefined) {
+        event.preventDefault();
+        ctx.commitSelected();
+      }
+      break;
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    type="text"
+    role="combobox"
+    autocomplete="off"
+    spellcheck="false"
+    aria-autocomplete="list"
+    :aria-expanded="true"
+    :aria-controls="ctx.listId.value"
+    :aria-activedescendant="activeDescendant"
+    :aria-disabled="disabled || undefined"
+    :disabled="disabled || undefined"
+    :data-disabled="disabled ? '' : undefined"
+    data-primitives-command-input
+    @input="handleInput"
+    @keydown="handleKeyDown"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandItem.vue b/vue/primitives/src/command/CommandItem.vue
new file mode 100644
index 0000000..d003845
--- /dev/null
+++ b/vue/primitives/src/command/CommandItem.vue
@@ -0,0 +1,127 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandItemProps extends PrimitiveProps {
+  /** Item value — used by filter, selection, and `data-value`. */
+  value: string;
+  /** Extra terms the default filter should match against. */
+  keywords?: string[];
+  /** Disable this item — it is skipped by keyboard nav and filtering. */
+  disabled?: boolean;
+  /** Render even when filtered out. */
+  forceMount?: boolean;
+}
+
+export interface CommandItemEmits {
+  select: [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useCommandContext, useCommandGroupContext } from './context';
+
+const {
+  as = 'div',
+  value,
+  keywords,
+  disabled = false,
+  forceMount = false,
+} = defineProps<CommandItemProps>();
+
+const emit = defineEmits<CommandItemEmits>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCommandContext();
+
+let groupCtx: ReturnType<typeof useCommandGroupContext> | null = null;
+try {
+  groupCtx = useCommandGroupContext();
+}
+catch {
+  groupCtx = null;
+}
+
+const itemId = computed(() => ctx.getItemId(value));
+const isVisible = computed(() => forceMount || ctx.filteredItems.value.has(value));
+const isHighlighted = computed(() => ctx.selectedValue.value === value);
+const isSelected = computed(() => ctx.modelValue.value === value);
+
+function syncRegistration() {
+  ctx.registerItem({
+    value,
+    keywords: keywords ?? [],
+    disabled,
+    onSelect: () => emit('select', value),
+  });
+}
+
+onMounted(() => {
+  syncRegistration();
+  if (groupCtx) ctx.registerGroupItem(groupCtx.id.value, value);
+});
+
+watch(
+  () => [value, disabled, (keywords ?? []).join('\u0001')] as const,
+  (_next, prev) => {
+    const [prevValue] = prev ?? [];
+    if (prevValue !== undefined && prevValue !== value) {
+      ctx.unregisterItem(prevValue);
+      if (groupCtx) ctx.unregisterGroupItem(groupCtx.id.value, prevValue);
+      syncRegistration();
+      if (groupCtx) ctx.registerGroupItem(groupCtx.id.value, value);
+    }
+    else {
+      syncRegistration();
+    }
+  },
+);
+
+onBeforeUnmount(() => {
+  ctx.unregisterItem(value);
+  if (groupCtx) ctx.unregisterGroupItem(groupCtx.id.value, value);
+});
+
+function handlePointerMove(event: PointerEvent) {
+  if (disabled) return;
+  // Only react to genuine mouse / pen movement; keyboard nav already manages highlight.
+  if (event.pointerType === 'touch') return;
+  if (ctx.selectedValue.value !== value) ctx.setSelectedValue(value);
+}
+
+function handleClick(event: MouseEvent) {
+  if (disabled) {
+    event.preventDefault();
+    return;
+  }
+  event.preventDefault();
+  ctx.setSelectedValue(value);
+  ctx.commitSelected();
+}
+</script>
+
+<template>
+  <Primitive
+    v-show="isVisible"
+    :ref="forwardRef"
+    :id="itemId"
+    :as="as"
+    role="option"
+    :aria-selected="isHighlighted || undefined"
+    :aria-disabled="disabled || undefined"
+    :data-state="isHighlighted ? 'selected' : ''"
+    :data-selected="isSelected ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :data-primitives-state="isVisible ? 'visible' : 'hidden'"
+    :tabindex="-1"
+    data-primitives-command-item
+    :data-value="value"
+    @click="handleClick"
+    @pointermove="handlePointerMove"
+  >
+    <slot :highlighted="isHighlighted" :selected="isSelected" :disabled="disabled" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandList.vue b/vue/primitives/src/command/CommandList.vue
new file mode 100644
index 0000000..e88f62e
--- /dev/null
+++ b/vue/primitives/src/command/CommandList.vue
@@ -0,0 +1,92 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandListProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useCommandContext } from './context';
+
+const { as = 'div' } = defineProps<CommandListProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const ctx = useCommandContext();
+
+let resizeObserver: ResizeObserver | undefined;
+let observedChild: Element | undefined;
+
+function setHeight(height: number) {
+  const list = currentElement.value as HTMLElement | undefined;
+  if (!list) return;
+  list.style.setProperty('--primitives-command-list-height', `${height}px`);
+}
+
+function observeFirstChild() {
+  const list = currentElement.value as HTMLElement | undefined;
+  if (!list) return;
+  const child = list.firstElementChild ?? undefined;
+  if (child === observedChild) return;
+
+  if (resizeObserver && observedChild) resizeObserver.unobserve(observedChild);
+  observedChild = child;
+
+  if (!child) {
+    setHeight(0);
+    return;
+  }
+  resizeObserver?.observe(child);
+  setHeight((child as HTMLElement).offsetHeight);
+}
+
+onMounted(() => {
+  const list = currentElement.value as HTMLElement | undefined;
+  if (!list) return;
+  ctx.setListElement(list);
+
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const target = entry.target as HTMLElement;
+        setHeight(target.offsetHeight);
+      }
+    });
+  }
+
+  observeFirstChild();
+
+  // React to subtree changes (items added/removed/reordered).
+  const mo = new MutationObserver(observeFirstChild);
+  mo.observe(list, { childList: true });
+
+  onBeforeUnmount(() => {
+    mo.disconnect();
+    resizeObserver?.disconnect();
+    resizeObserver = undefined;
+    observedChild = undefined;
+    ctx.setListElement(undefined);
+  });
+});
+
+// Re-evaluate the observed child whenever the filter result changes (items hide/show).
+watch(
+  () => ctx.filteredItems.value,
+  () => observeFirstChild(),
+);
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="ctx.listId.value"
+    role="listbox"
+    :aria-labelledby="ctx.labelId.value"
+    data-primitives-command-list
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandLoading.vue b/vue/primitives/src/command/CommandLoading.vue
new file mode 100644
index 0000000..3cc35fe
--- /dev/null
+++ b/vue/primitives/src/command/CommandLoading.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandLoadingProps extends PrimitiveProps {
+  /** Accessible label describing the loading state. */
+  label?: string;
+  /** Optional 0..100 progress value — published via `aria-valuenow`. */
+  progress?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const {
+  as = 'div',
+  label = 'Loading',
+  progress,
+} = defineProps<CommandLoadingProps>();
+
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="progressbar"
+    :aria-valuetext="label"
+    :aria-valuenow="progress"
+    :aria-valuemin="progress === undefined ? undefined : 0"
+    :aria-valuemax="progress === undefined ? undefined : 100"
+    aria-live="polite"
+    data-primitives-command-loading
+  >
+    <slot :progress="progress" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandRoot.vue b/vue/primitives/src/command/CommandRoot.vue
new file mode 100644
index 0000000..8df58c2
--- /dev/null
+++ b/vue/primitives/src/command/CommandRoot.vue
@@ -0,0 +1,287 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { CommandFilterFunction } from './utils';
+
+export interface CommandRootProps extends PrimitiveProps {
+  /** Controlled selected value. Use `v-model`. */
+  modelValue?: string;
+  /** Uncontrolled initial selected value. */
+  defaultValue?: string;
+  /** Controlled search term. Use `v-model:searchTerm`. */
+  searchTerm?: string;
+  /** Uncontrolled initial search term. */
+  defaultSearchTerm?: string;
+  /** Custom scoring filter. Returns 0..1 (0 = hide). */
+  filter?: CommandFilterFunction;
+  /** Run the filter automatically. Set false to perform filtering yourself. @default true */
+  shouldFilter?: boolean;
+  /** Loop keyboard navigation at the ends of the list. @default false */
+  loop?: boolean;
+  /** Accessible label announced to assistive tech. */
+  label?: string;
+}
+
+export interface CommandRootEmits {
+  'update:modelValue': [value: string | undefined];
+  'update:searchTerm': [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, shallowRef, toRef, triggerRef, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { VisuallyHidden } from '../visually-hidden';
+import { provideCommandContext } from './context';
+import type { CommandItemInfo } from './context';
+import { COMMAND_ITEM_ATTR, COMMAND_VALUE_ATTR, defaultFilter } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  as = 'div',
+  defaultValue,
+  defaultSearchTerm = '',
+  filter,
+  shouldFilter = true,
+  loop = false,
+  label,
+} = defineProps<CommandRootProps>();
+
+const emit = defineEmits<CommandRootEmits>();
+
+const { forwardRef } = useForwardExpose();
+
+const localValue = ref<string | undefined>(defaultValue);
+const value = defineModel<string | undefined>('modelValue', {
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+const localSearch = ref<string>(defaultSearchTerm);
+const search = defineModel<string>('searchTerm', {
+  default: undefined,
+  get: v => v ?? localSearch.value,
+  set: (v) => {
+    localSearch.value = v;
+    return v;
+  },
+});
+
+const selectedValue = ref<string | undefined>(undefined);
+
+const listId = useId(undefined, 'command-list');
+const labelId = useId(undefined, 'command-label');
+
+const listElement = shallowRef<HTMLElement | undefined>(undefined);
+
+const allItems = shallowRef(new Map<string, CommandItemInfo>());
+const allGroups = shallowRef(new Map<string, Set<string>>());
+
+function registerItem(info: CommandItemInfo) {
+  allItems.value.set(info.value, info);
+  triggerRef(allItems);
+}
+
+function unregisterItem(value: string) {
+  if (allItems.value.delete(value)) triggerRef(allItems);
+  if (selectedValue.value === value) selectedValue.value = undefined;
+}
+
+function registerGroup(groupId: string) {
+  if (!allGroups.value.has(groupId)) {
+    allGroups.value.set(groupId, new Set());
+    triggerRef(allGroups);
+  }
+}
+
+function unregisterGroup(groupId: string) {
+  if (allGroups.value.delete(groupId)) triggerRef(allGroups);
+}
+
+function registerGroupItem(groupId: string, val: string) {
+  let set = allGroups.value.get(groupId);
+  if (!set) {
+    set = new Set();
+    allGroups.value.set(groupId, set);
+  }
+  set.add(val);
+  triggerRef(allGroups);
+}
+
+function unregisterGroupItem(groupId: string, val: string) {
+  const set = allGroups.value.get(groupId);
+  if (set?.delete(val)) triggerRef(allGroups);
+}
+
+const filterRef = toRef(() => filter);
+const shouldFilterRef = toRef(() => shouldFilter);
+
+const filteredItems = computed<Map<string, number>>(() => {
+  const out = new Map<string, number>();
+  const term = search.value;
+  const useFilter = shouldFilterRef.value && term.length > 0;
+  const fn = filterRef.value ?? defaultFilter;
+
+  for (const [val, info] of allItems.value) {
+    const score = useFilter ? fn(val, term, info.keywords) : 1;
+    if (score > 0) out.set(val, score);
+  }
+  return out;
+});
+
+function escapeAttr(v: string): string {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') return CSS.escape(v);
+  return v.replace(/["\\]/g, '\\$&');
+}
+
+function getSelectableItems(): string[] {
+  const filtered = filteredItems.value;
+  const root = listElement.value;
+
+  const candidates: Array<{ value: string; score: number; idx: number }> = [];
+
+  if (root) {
+    const els = Array.from(root.querySelectorAll<HTMLElement>(`[${COMMAND_ITEM_ATTR}]`));
+    const indexOf = new Map<string, number>();
+    for (let i = 0; i < els.length; i++) {
+      const v = els[i]!.getAttribute(COMMAND_VALUE_ATTR);
+      if (v !== null) indexOf.set(v, i);
+    }
+    for (const [val, score] of filtered) {
+      const info = allItems.value.get(val);
+      if (!info || info.disabled) continue;
+      candidates.push({ value: val, score, idx: indexOf.get(val) ?? Number.MAX_SAFE_INTEGER });
+    }
+  }
+  else {
+    let i = 0;
+    for (const [val, score] of filtered) {
+      const info = allItems.value.get(val);
+      if (!info || info.disabled) continue;
+      candidates.push({ value: val, score, idx: i++ });
+    }
+  }
+
+  candidates.sort((a, b) => b.score - a.score || a.idx - b.idx);
+  return candidates.map(c => c.value);
+}
+
+function getItemId(val: string): string {
+  return `${listId.value}-item-${escapeAttr(val)}`;
+}
+
+function setModelValue(v: string | undefined) {
+  value.value = v;
+  emit('update:modelValue', v);
+}
+
+function setSearchTerm(v: string) {
+  search.value = v;
+  emit('update:searchTerm', v);
+}
+
+function setSelectedValue(v: string | undefined) {
+  selectedValue.value = v;
+}
+
+function setListElement(el: HTMLElement | undefined) {
+  listElement.value = el;
+}
+
+function commitSelected() {
+  const v = selectedValue.value;
+  if (v === undefined) return;
+  const info = allItems.value.get(v);
+  if (!info || info.disabled) return;
+  setModelValue(v);
+  info.onSelect?.();
+}
+
+// Auto-highlight the highest-scored visible item when items or search change.
+watch(
+  [() => search.value, filteredItems, allItems],
+  () => {
+    const current = selectedValue.value;
+    if (current && filteredItems.value.has(current)) {
+      const info = allItems.value.get(current);
+      if (info && !info.disabled) return;
+    }
+    const items = getSelectableItems();
+    selectedValue.value = items[0];
+  },
+  { flush: 'post' },
+);
+
+const announceCount = computed(() => {
+  const n = filteredItems.value.size;
+  return n === 1 ? '1 result available.' : `${n} results available.`;
+});
+
+provideCommandContext({
+  modelValue: value,
+  setModelValue,
+  searchTerm: search,
+  setSearchTerm,
+  selectedValue,
+  setSelectedValue,
+  shouldFilter: toRef(() => shouldFilter),
+  loop: toRef(() => loop),
+  filterFunction: filterRef,
+  listId,
+  labelId,
+  getItemId,
+  allItems,
+  filteredItems,
+  registerItem,
+  unregisterItem,
+  allGroups,
+  registerGroup,
+  unregisterGroup,
+  registerGroupItem,
+  unregisterGroupItem,
+  listElement,
+  setListElement,
+  getSelectableItems,
+  commitSelected,
+});
+
+defineExpose({
+  filteredItems,
+  getSelectableItems,
+  selectedValue,
+  setSelectedValue,
+  commitSelected,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="application"
+    :aria-label="label"
+    :aria-labelledby="label ? undefined : labelId"
+    data-primitives-command-root
+    v-bind="$attrs"
+  >
+    <VisuallyHidden :id="labelId" aria-hidden="true">
+      {{ label ?? 'Command palette' }}
+    </VisuallyHidden>
+    <VisuallyHidden role="status" aria-live="polite">
+      {{ announceCount }}
+    </VisuallyHidden>
+    <slot
+      :search-term="search"
+      :selected-value="selectedValue"
+      :model-value="value"
+      :filtered-count="filteredItems.size"
+    />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/CommandSeparator.vue b/vue/primitives/src/command/CommandSeparator.vue
new file mode 100644
index 0000000..8c1de49
--- /dev/null
+++ b/vue/primitives/src/command/CommandSeparator.vue
@@ -0,0 +1,37 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface CommandSeparatorProps extends PrimitiveProps {
+  /** Render the separator even while the search term is active. */
+  alwaysRender?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useCommandContext } from './context';
+
+const { as = 'div', alwaysRender = false } = defineProps<CommandSeparatorProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useCommandContext();
+
+const isVisible = computed(() => alwaysRender || ctx.searchTerm.value.length === 0);
+</script>
+
+<template>
+  <Primitive
+    v-if="isVisible"
+    :ref="forwardRef"
+    :as="as"
+    role="separator"
+    aria-orientation="horizontal"
+    aria-hidden="true"
+    data-primitives-command-separator
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/command/context.ts b/vue/primitives/src/command/context.ts
new file mode 100644
index 0000000..68ad0d4
--- /dev/null
+++ b/vue/primitives/src/command/context.ts
@@ -0,0 +1,71 @@
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import type { CommandFilterFunction } from './utils';
+
+import { useContextFactory } from '@robonen/vue';
+
+export interface CommandItemInfo {
+  value: string;
+  keywords: string[];
+  disabled: boolean;
+  onSelect?: () => void;
+}
+
+export interface CommandContext {
+  /** Committed selected value (v-model). */
+  modelValue: Ref<string | undefined>;
+  setModelValue: (value: string | undefined) => void;
+
+  /** Current search term (v-model:searchTerm). */
+  searchTerm: Ref<string>;
+  setSearchTerm: (value: string) => void;
+
+  /** Currently highlighted item value (keyboard / pointer focus). */
+  selectedValue: Ref<string | undefined>;
+  setSelectedValue: (value: string | undefined) => void;
+
+  /** Behavior flags. */
+  shouldFilter: Ref<boolean>;
+  loop: Ref<boolean>;
+  filterFunction: Ref<CommandFilterFunction | undefined>;
+
+  /** A11y identifiers. */
+  listId: Ref<string>;
+  labelId: Ref<string>;
+  getItemId: (value: string) => string;
+
+  /** Registries. */
+  allItems: ShallowRef<Map<string, CommandItemInfo>>;
+  filteredItems: ComputedRef<Map<string, number>>;
+  registerItem: (info: CommandItemInfo) => void;
+  unregisterItem: (value: string) => void;
+
+  allGroups: ShallowRef<Map<string, Set<string>>>;
+  registerGroup: (groupId: string) => void;
+  unregisterGroup: (groupId: string) => void;
+  registerGroupItem: (groupId: string, value: string) => void;
+  unregisterGroupItem: (groupId: string, value: string) => void;
+
+  /** DOM. */
+  listElement: ShallowRef<HTMLElement | undefined>;
+  setListElement: (el: HTMLElement | undefined) => void;
+
+  /** Returns selectable item values sorted by score desc, then DOM order. */
+  getSelectableItems: () => string[];
+  /** Commits the currently-highlighted item: updates modelValue + fires its select callback. */
+  commitSelected: () => void;
+}
+
+export interface CommandGroupContext {
+  id: Ref<string>;
+  forceMount: Ref<boolean>;
+}
+
+export const {
+  inject: useCommandContext,
+  provide: provideCommandContext,
+} = useContextFactory<CommandContext>('Command');
+
+export const {
+  inject: useCommandGroupContext,
+  provide: provideCommandGroupContext,
+} = useContextFactory<CommandGroupContext>('CommandGroup');
diff --git a/vue/primitives/src/command/index.ts b/vue/primitives/src/command/index.ts
new file mode 100644
index 0000000..9da1105
--- /dev/null
+++ b/vue/primitives/src/command/index.ts
@@ -0,0 +1,30 @@
+export { default as CommandEmpty } from './CommandEmpty.vue';
+export { default as CommandGroup } from './CommandGroup.vue';
+export { default as CommandInput } from './CommandInput.vue';
+export { default as CommandItem } from './CommandItem.vue';
+export { default as CommandList } from './CommandList.vue';
+export { default as CommandLoading } from './CommandLoading.vue';
+export { default as CommandRoot } from './CommandRoot.vue';
+export { default as CommandSeparator } from './CommandSeparator.vue';
+
+export {
+  useCommandContext,
+  useCommandGroupContext,
+} from './context';
+
+export type {
+  CommandContext,
+  CommandGroupContext,
+  CommandItemInfo,
+} from './context';
+
+export type { CommandFilterFunction } from './utils';
+
+export type { CommandEmptyProps } from './CommandEmpty.vue';
+export type { CommandGroupProps } from './CommandGroup.vue';
+export type { CommandInputEmits, CommandInputProps } from './CommandInput.vue';
+export type { CommandItemEmits, CommandItemProps } from './CommandItem.vue';
+export type { CommandListProps } from './CommandList.vue';
+export type { CommandLoadingProps } from './CommandLoading.vue';
+export type { CommandRootEmits, CommandRootProps } from './CommandRoot.vue';
+export type { CommandSeparatorProps } from './CommandSeparator.vue';
diff --git a/vue/primitives/src/command/utils.ts b/vue/primitives/src/command/utils.ts
new file mode 100644
index 0000000..ff08839
--- /dev/null
+++ b/vue/primitives/src/command/utils.ts
@@ -0,0 +1,34 @@
+export type CommandFilterFunction = (
+  value: string,
+  search: string,
+  keywords?: string[],
+) => number;
+
+export const COMMAND_ITEM_ATTR = 'data-primitives-command-item';
+export const COMMAND_VALUE_ATTR = 'data-value';
+
+/**
+ * Default scoring filter.
+ *
+ * - Empty search → score 1 (item visible).
+ * - Case-insensitive substring match across `value` + `keywords` → 1.
+ * - In-order subsequence (loose fuzzy) match → 0.5.
+ * - Otherwise → 0 (hide).
+ */
+export const defaultFilter: CommandFilterFunction = (value, search, keywords) => {
+  if (!search) return 1;
+
+  const needle = search.toLowerCase();
+  const haystackParts = keywords && keywords.length > 0 ? [value, ...keywords] : [value];
+  const haystack = haystackParts.join(' ').toLowerCase();
+
+  if (haystack.includes(needle)) return 1;
+
+  let i = 0;
+  for (let h = 0; h < haystack.length && i < needle.length; h++) {
+    if (haystack[h] === needle[i]) i++;
+  }
+  if (i === needle.length) return 0.5;
+
+  return 0;
+};
diff --git a/vue/primitives/src/config-provider/__test__/config-provider.test.ts b/vue/primitives/src/config-provider/__test__/config-provider.test.ts
index 267b163..3b0daf7 100644
--- a/vue/primitives/src/config-provider/__test__/config-provider.test.ts
+++ b/vue/primitives/src/config-provider/__test__/config-provider.test.ts
@@ -1,10 +1,11 @@
 import { describe, expect, it } from 'vitest';
-import { defineComponent, h } from 'vue';
+import { computed, defineComponent, h } from 'vue';
 import { mount } from '@vue/test-utils';
 import {
   provideAppConfig,
   provideConfig,
   useConfig,
+  useId,
 } from '..';
 
 // --- useConfig ---
@@ -128,3 +129,69 @@ describe('provideAppConfig', () => {
     wrapper.unmount();
   });
 });
+
+// --- useId override ---
+
+describe('useId (config override)', () => {
+  it('uses the toolkit fallback when no override is provided', () => {
+    const Child = defineComponent({
+      setup() {
+        const id = useId();
+        return { id };
+      },
+      render() {
+        return h('div', { 'data-id': this.id });
+      },
+    });
+
+    const wrapper = mount(Child);
+    expect(wrapper.find('div').attributes('data-id')).toMatch(/^robonen-/);
+    wrapper.unmount();
+  });
+
+  it('routes through a provided useId override', () => {
+    let count = 0;
+    const customUseId = (_deterministic?: unknown, prefix = 'x') => {
+      count += 1;
+      const n = count;
+      return computed(() => `${prefix}-${n}`);
+    };
+
+    const Child = defineComponent({
+      setup() {
+        const a = useId();
+        const b = useId(undefined, 'custom');
+        return { a, b };
+      },
+      render() {
+        return h('div', { 'data-a': this.a, 'data-b': this.b });
+      },
+    });
+
+    const wrapper = mount(Child, {
+      global: {
+        plugins: [app => provideAppConfig(app, { useId: customUseId })],
+      },
+    });
+
+    expect(wrapper.find('div').attributes('data-a')).toBe('x-1');
+    expect(wrapper.find('div').attributes('data-b')).toBe('custom-2');
+    wrapper.unmount();
+  });
+
+  it('respects deterministic id passed through the override', () => {
+    const Child = defineComponent({
+      setup() {
+        const id = useId(() => 'fixed-id');
+        return { id };
+      },
+      render() {
+        return h('div', { 'data-id': this.id });
+      },
+    });
+
+    const wrapper = mount(Child);
+    expect(wrapper.find('div').attributes('data-id')).toBe('fixed-id');
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/config-provider/context.ts b/vue/primitives/src/config-provider/context.ts
index 4310060..2d829f2 100644
--- a/vue/primitives/src/config-provider/context.ts
+++ b/vue/primitives/src/config-provider/context.ts
@@ -1,22 +1,29 @@
-import type { App, MaybeRefOrGetter, Ref, ShallowRef, UnwrapRef } from 'vue';
+import type { App, ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
 import { ref, shallowRef, toValue } from 'vue';
-import { useContextFactory } from '@robonen/vue';
+import { useId as toolkitUseId, useContextFactory } from '@robonen/vue';
 
 export type Direction = 'ltr' | 'rtl';
 
+export type UseIdFn = (
+  deterministic?: MaybeRefOrGetter<string | undefined>,
+  prefix?: string,
+) => ComputedRef<string>;
+
 export interface ConfigContext {
   dir: Ref<Direction>;
   teleportTarget: ShallowRef<string | HTMLElement>;
+  useId: UseIdFn;
 }
 
 export interface ConfigOptions {
   dir?: MaybeRefOrGetter<Direction>;
   teleportTarget?: MaybeRefOrGetter<string | HTMLElement>;
+  useId?: UseIdFn;
 }
 
-const DEFAULT_CONFIG: UnwrapRef<ConfigContext> = {
-  dir: 'ltr',
-  teleportTarget: 'body',
+const DEFAULT_CONFIG = {
+  dir: 'ltr' as Direction,
+  teleportTarget: 'body' as string | HTMLElement,
 };
 
 const ConfigCtx = useContextFactory<ConfigContext>('ConfigContext');
@@ -25,6 +32,7 @@ function resolveContext(options?: ConfigOptions): ConfigContext {
   return {
     dir: ref(toValue(options?.dir) ?? DEFAULT_CONFIG.dir),
     teleportTarget: shallowRef(toValue(options?.teleportTarget) ?? DEFAULT_CONFIG.teleportTarget),
+    useId: options?.useId ?? toolkitUseId,
   };
 }
 
diff --git a/vue/primitives/src/config-provider/index.ts b/vue/primitives/src/config-provider/index.ts
index 92d2ddf..e6a7e0b 100644
--- a/vue/primitives/src/config-provider/index.ts
+++ b/vue/primitives/src/config-provider/index.ts
@@ -5,4 +5,6 @@ export {
   type ConfigContext,
   type ConfigOptions,
   type Direction,
+  type UseIdFn,
 } from './context';
+export { useId } from './useId';
diff --git a/vue/primitives/src/config-provider/useId.ts b/vue/primitives/src/config-provider/useId.ts
new file mode 100644
index 0000000..28087a6
--- /dev/null
+++ b/vue/primitives/src/config-provider/useId.ts
@@ -0,0 +1,16 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { useConfig } from './context';
+
+/**
+ * Primitives-local `useId` that routes through the active `ConfigContext`.
+ * Falls back to the toolkit's default implementation when no override is
+ * configured via `provideConfig({ useId })`.
+ *
+ * Signature matches `@robonen/vue`'s `useId`: `(deterministic?, prefix?)`.
+ */
+export function useId(
+  deterministic?: MaybeRefOrGetter<string | undefined>,
+  prefix?: string,
+): ComputedRef<string> {
+  return useConfig().useId(deterministic, prefix);
+}
diff --git a/vue/primitives/src/context-menu/ContextMenuTrigger.vue b/vue/primitives/src/context-menu/ContextMenuTrigger.vue
index 653d3c0..17ccb9b 100644
--- a/vue/primitives/src/context-menu/ContextMenuTrigger.vue
+++ b/vue/primitives/src/context-menu/ContextMenuTrigger.vue
@@ -14,7 +14,7 @@ import { MenuAnchor, useMenuContext } from '../menu';
 import { Primitive } from '../primitive';
 import { useContextMenuRootContext } from './context';
 
-const { disabled = false, as = 'span', asChild } = defineProps<ContextMenuTriggerProps>();
+const { disabled = false, as = 'span' } = defineProps<ContextMenuTriggerProps>();
 
 const menuCtx = useMenuContext();
 const ctxMenuCtx = useContextMenuRootContext();
@@ -72,11 +72,10 @@ function handlePointerUp() {
 </script>
 
 <template>
-  <MenuAnchor as-child :reference="virtualEl">
+  <MenuAnchor :reference="virtualEl">
     <Primitive
       :ref="forwardRef"
       :as="as"
-      :as-child="asChild"
       :data-state="menuCtx.open.value ? 'open' : 'closed'"
       :data-disabled="disabled ? '' : undefined"
       @contextmenu="handleContextMenu"
diff --git a/vue/primitives/src/date-picker/DatePickerAnchor.vue b/vue/primitives/src/date-picker/DatePickerAnchor.vue
new file mode 100644
index 0000000..95dd4f0
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerAnchor.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PopperAnchorProps } from '../popper';
+
+export interface DatePickerAnchorProps extends PopperAnchorProps {}
+</script>
+
+<script setup lang="ts">
+import { onBeforeMount, onUnmounted } from 'vue';
+import { PopperAnchor } from '../popper';
+import { useDatePickerRootContext } from './context';
+
+const props = defineProps<DatePickerAnchorProps>();
+
+const ctx = useDatePickerRootContext();
+
+onBeforeMount(() => {
+  ctx.hasCustomAnchor.value = true;
+});
+onUnmounted(() => {
+  ctx.hasCustomAnchor.value = false;
+});
+</script>
+
+<template>
+  <PopperAnchor v-bind="props">
+    <slot />
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerArrow.vue b/vue/primitives/src/date-picker/DatePickerArrow.vue
new file mode 100644
index 0000000..c7cb296
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerArrow.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export interface DatePickerArrowProps extends PopperArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperArrow } from '../popper';
+
+const { width = 10, height = 5 } = defineProps<DatePickerArrowProps>();
+</script>
+
+<template>
+  <PopperArrow :width="width" :height="height">
+    <slot />
+  </PopperArrow>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerCalendar.vue b/vue/primitives/src/date-picker/DatePickerCalendar.vue
new file mode 100644
index 0000000..830099a
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerCalendar.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DatePickerCalendarProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<DatePickerCalendarProps>();
+</script>
+
+<template>
+  <Primitive :as="as" :data-primitives-date-picker-calendar="''">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerClose.vue b/vue/primitives/src/date-picker/DatePickerClose.vue
new file mode 100644
index 0000000..b4e02f5
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerClose.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DatePickerCloseProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useDatePickerRootContext } from './context';
+
+const { as = 'button' } = defineProps<DatePickerCloseProps>();
+
+const ctx = useDatePickerRootContext();
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    :data-state="ctx.open.value ? 'open' : 'closed'"
+    @click="ctx.onOpenChange(false)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerContent.vue b/vue/primitives/src/date-picker/DatePickerContent.vue
new file mode 100644
index 0000000..240c4da
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerContent.vue
@@ -0,0 +1,75 @@
+<script lang="ts">
+import type { DismissableLayerEmits } from '../dismissable-layer';
+import type { FocusScopeEmits } from '../focus-scope';
+import type { PopperContentProps } from '../popper';
+
+export interface DatePickerContentProps extends PopperContentProps {
+  /** Keep mounted for CSS exit animations. */
+  forceMount?: boolean;
+}
+
+export interface DatePickerContentEmits {
+  openAutoFocus: FocusScopeEmits['mountAutoFocus'];
+  closeAutoFocus: FocusScopeEmits['unmountAutoFocus'];
+  escapeKeyDown: DismissableLayerEmits['escapeKeyDown'];
+  pointerDownOutside: DismissableLayerEmits['pointerDownOutside'];
+  focusOutside: DismissableLayerEmits['focusOutside'];
+  interactOutside: DismissableLayerEmits['interactOutside'];
+  dismiss: [];
+}
+</script>
+
+<script setup lang="ts">
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { PopperContent } from '../popper';
+import { Presence } from '../presence';
+import { useDatePickerRootContext } from './context';
+
+const {
+  forceMount = false,
+  as = 'div',
+  ...popperProps
+} = defineProps<DatePickerContentProps>();
+
+const emit = defineEmits<DatePickerContentEmits>();
+
+const ctx = useDatePickerRootContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <FocusScope
+      as="template"
+      :loop="true"
+      :trapped="ctx.modal.value"
+      @mount-auto-focus.prevent="emit('openAutoFocus', $event)"
+      @unmount-auto-focus="(event: Event) => {
+        emit('closeAutoFocus', event);
+        if (!event.defaultPrevented) ctx.triggerElement.value?.focus();
+      }"
+    >
+      <DismissableLayer
+        as="template"
+        :disable-outside-pointer-events="ctx.modal.value"
+        @escape-key-down="emit('escapeKeyDown', $event)"
+        @pointer-down-outside="emit('pointerDownOutside', $event)"
+        @focus-outside="emit('focusOutside', $event)"
+        @interact-outside="emit('interactOutside', $event)"
+        @dismiss="() => { ctx.onOpenChange(false); emit('dismiss'); }"
+      >
+        <PopperContent
+          :id="ctx.contentId.value"
+          :as="as"
+          v-bind="popperProps"
+          role="dialog"
+          :aria-labelledby="ctx.triggerId.value"
+          :data-state="ctx.open.value ? 'open' : 'closed'"
+          :data-primitives-date-picker-content="''"
+        >
+          <slot />
+        </PopperContent>
+      </DismissableLayer>
+    </FocusScope>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerField.vue b/vue/primitives/src/date-picker/DatePickerField.vue
new file mode 100644
index 0000000..4df614f
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerField.vue
@@ -0,0 +1,67 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DatePickerFieldProps extends PrimitiveProps {
+  /** Allow typing into the field. @default false (read-only display) */
+  editable?: boolean;
+  /** Display format for the rendered value. */
+  format?: Intl.DateTimeFormatOptions;
+  /** Placeholder text shown when no value is selected. */
+  placeholderText?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { formatDate } from '../calendar';
+import { useDatePickerRootContext } from './context';
+
+const {
+  as: _as = 'input',
+  editable = false,
+  format = { year: 'numeric', month: '2-digit', day: '2-digit' },
+  placeholderText,
+} = defineProps<DatePickerFieldProps>();
+
+const ctx = useDatePickerRootContext();
+
+const displayValue = computed(() => {
+  if (!ctx.modelValue.value) return '';
+  return formatDate(ctx.modelValue.value, format, ctx.locale.value);
+});
+
+const draft = ref(displayValue.value);
+watch(displayValue, (v) => {
+  draft.value = v;
+});
+
+function commit() {
+  if (!editable) return;
+  const text = draft.value.trim();
+  if (!text) {
+    ctx.modelValue.value = undefined;
+    return;
+  }
+  const parsed = new Date(text);
+  if (!Number.isNaN(parsed.getTime()))
+    ctx.modelValue.value = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
+  else
+    draft.value = displayValue.value;
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') commit();
+}
+</script>
+
+<template>
+  <input
+    :value="editable ? draft : displayValue"
+    :readonly="!editable"
+    :placeholder="placeholderText"
+    :data-primitives-date-picker-field="''"
+    @input="(e) => { if (editable) draft = (e.target as HTMLInputElement).value; }"
+    @blur="commit"
+    @keydown="handleKeydown"
+  >
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerPortal.vue b/vue/primitives/src/date-picker/DatePickerPortal.vue
new file mode 100644
index 0000000..0cbb882
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { TeleportPrimitiveProps } from '../teleport';
+
+export interface DatePickerPortalProps extends TeleportPrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import PortalPrimitive from '../teleport/Teleport.vue';
+
+const props = defineProps<DatePickerPortalProps>();
+</script>
+
+<template>
+  <PortalPrimitive v-bind="props">
+    <slot />
+  </PortalPrimitive>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerRoot.vue b/vue/primitives/src/date-picker/DatePickerRoot.vue
new file mode 100644
index 0000000..26a1ea3
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerRoot.vue
@@ -0,0 +1,333 @@
+<script lang="ts">
+import type { CalendarMonth, CalendarRootProps, WeekDayFormat } from '../calendar';
+import type { PrimitiveProps } from '../primitive';
+
+export interface DatePickerRootProps extends PrimitiveProps,
+  Omit<CalendarRootProps, 'as' | 'asChild'> {
+  /** Uncontrolled initial open state. */
+  defaultOpen?: boolean;
+  /** Modal popover (traps focus + blocks outside pointer). @default false */
+  modal?: boolean;
+  /** Hidden form input name for submission. */
+  name?: string;
+  /** Format used to serialize the hidden input value. @default 'iso' */
+  valueFormat?: 'iso' | ((d: Date) => string);
+  /** Close popover on selection. @default true */
+  closeOnSelect?: boolean;
+}
+
+export interface DatePickerRootEmits {
+  'update:modelValue': [date: Date | undefined];
+  'update:placeholder': [date: Date];
+  'update:open': [open: boolean];
+}
+</script>
+
+<script setup lang="ts">
+import { useEventListener, useForwardExpose } from '@robonen/vue';
+import { computed, onMounted, ref, toRef, watch } from 'vue';
+import {
+  addMonths,
+  addYears,
+  clamp,
+  createMonths,
+  formatMonthYear,
+  getWeekdayLabels,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  isDateUnavailable as isUnavailable,
+  provideCalendarRootContext,
+  toDateOnly,
+} from '../calendar';
+import { useId } from '../config-provider';
+import { PopperRoot } from '../popper';
+import { Primitive } from '../primitive';
+import { provideDatePickerRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  as = 'div',
+  defaultOpen = false,
+  modal = false,
+  name,
+  valueFormat = 'iso',
+  closeOnSelect = true,
+  defaultValue,
+  defaultPlaceholder,
+  minValue,
+  maxValue,
+  isDateUnavailable: propsIsDateUnavailable,
+  isDateDisabled: propsIsDateDisabled,
+  pagedNavigation = false,
+  weekStartsOn = 0,
+  weekdayFormat = 'short',
+  fixedWeeks = true,
+  numberOfMonths = 1,
+  disabled = false,
+  readonly = false,
+  initialFocus = false,
+  locale = 'en',
+  dir = 'ltr',
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+  calendarLabel = 'Calendar',
+} = defineProps<DatePickerRootProps>();
+
+defineEmits<DatePickerRootEmits>();
+
+const { forwardRef, currentElement: parentElement } = useForwardExpose();
+
+const localOpen = ref<boolean>(defaultOpen);
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+const localValue = ref<Date | undefined>(defaultValue);
+const modelValue = defineModel<Date | undefined>('modelValue', {
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+const localPlaceholder = ref<Date>(
+  toDateOnly(defaultPlaceholder ?? modelValue.value ?? new Date()),
+);
+const placeholder = defineModel<Date>('placeholder', {
+  default: undefined,
+  get: v => v ?? localPlaceholder.value,
+  set: (v) => {
+    localPlaceholder.value = toDateOnly(v);
+    return localPlaceholder.value;
+  },
+});
+
+const triggerId = useId(undefined, 'date-picker-trigger');
+const contentId = useId(undefined, 'date-picker-content');
+const triggerElement = ref<HTMLElement>();
+const hasCustomAnchor = ref(false);
+const focusedDate = ref<Date | undefined>();
+
+const localeRef = toRef(() => locale);
+const dirRef = toRef(() => dir);
+const modalRef = toRef(() => modal);
+const nameRef = toRef(() => name);
+const weekStartsOnRef = toRef(() => weekStartsOn);
+const weekdayFormatRef = toRef(() => weekdayFormat as WeekDayFormat);
+const fixedWeeksRef = toRef(() => fixedWeeks);
+const numberOfMonthsRef = toRef(() => numberOfMonths);
+const disabledRef = toRef(() => disabled);
+const readonlyRef = toRef(() => readonly);
+const pagedNavigationRef = toRef(() => pagedNavigation);
+const minValueRef = toRef(() => minValue);
+const maxValueRef = toRef(() => maxValue);
+
+const grid = computed<CalendarMonth[]>(() => createMonths({
+  date: placeholder.value,
+  numberOfMonths,
+  weekStartsOn,
+}));
+
+const weekDays = computed(() => getWeekdayLabels(weekStartsOn, locale, weekdayFormat));
+
+const headingValue = computed(() => {
+  const months = grid.value;
+  if (!months.length) return '';
+  if (months.length === 1) return formatMonthYear(months[0]!.value, locale);
+  const first = formatMonthYear(months[0]!.value, locale);
+  const last = formatMonthYear(months[months.length - 1]!.value, locale);
+  return `${first} - ${last}`;
+});
+
+const fullCalendarLabel = computed(() => `${calendarLabel}, ${headingValue.value}`);
+
+function isDateDisabled(date: Date): boolean {
+  if (disabled) return true;
+  if (propsIsDateDisabled?.(date)) return true;
+  if (minValue && isBefore(date, minValue)) return true;
+  if (maxValue && isAfter(date, maxValue)) return true;
+  return false;
+}
+
+function isDateUnavailableLocal(date: Date): boolean {
+  return isUnavailable(date, propsIsDateUnavailable, minValue, maxValue);
+}
+
+function isDateSelected(date: Date): boolean {
+  return modelValue.value ? isSameDay(modelValue.value, date) : false;
+}
+
+function isOutsideVisibleView(date: Date): boolean {
+  return !grid.value.some(m => isSameMonth(m.value, date));
+}
+
+const isInvalid = computed(() => {
+  if (!modelValue.value) return false;
+  return isDateDisabled(modelValue.value) || isDateUnavailableLocal(modelValue.value);
+});
+
+function setDate(date: Date | undefined) {
+  if (readonly) return;
+  if (date && (isDateDisabled(date) || isDateUnavailableLocal(date))) return;
+  modelValue.value = date ? toDateOnly(date) : undefined;
+  if (date && closeOnSelect) open.value = false;
+}
+
+function setPlaceholder(date: Date) {
+  placeholder.value = clamp(date, minValue, maxValue);
+}
+
+function pageStep(): number {
+  return pagedNavigation ? numberOfMonths : 1;
+}
+function nextPage(fn?: (placeholder: Date) => Date) {
+  const fnToUse = fn ?? propsNextPage;
+  placeholder.value = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(placeholder.value, pageStep());
+}
+function prevPage(fn?: (placeholder: Date) => Date) {
+  const fnToUse = fn ?? propsPrevPage;
+  placeholder.value = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(placeholder.value, -pageStep());
+}
+function nextYear() {
+  placeholder.value = addYears(placeholder.value, 1);
+}
+function prevYear() {
+  placeholder.value = addYears(placeholder.value, -1);
+}
+
+function isNextButtonDisabled(fn?: (placeholder: Date) => Date): boolean {
+  if (disabled) return true;
+  if (!maxValue) return false;
+  const lastMonth = grid.value[grid.value.length - 1]?.value;
+  if (!lastMonth) return false;
+  const fnToUse = fn ?? propsNextPage;
+  const probe = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(lastMonth, 1);
+  return isAfter(probe, maxValue);
+}
+function isPrevButtonDisabled(fn?: (placeholder: Date) => Date): boolean {
+  if (disabled) return true;
+  if (!minValue) return false;
+  const firstMonth = grid.value[0]?.value;
+  if (!firstMonth) return false;
+  const fnToUse = fn ?? propsPrevPage;
+  const probe = fnToUse
+    ? toDateOnly(fnToUse(placeholder.value))
+    : addMonths(firstMonth, -1);
+  return isBefore(probe, minValue);
+}
+
+watch(modelValue, (v) => {
+  if (v && !isSameMonth(v, placeholder.value))
+    placeholder.value = toDateOnly(v);
+});
+
+onMounted(() => {
+  if (!initialFocus || !open.value || !parentElement.value) return;
+  const target = parentElement.value.querySelector<HTMLElement>(
+    '[data-primitives-calendar-cell-trigger][data-selected]'
+    + ',[data-primitives-calendar-cell-trigger][data-today]'
+    + ',[data-primitives-calendar-cell-trigger]:not([data-outside-view]):not([data-disabled])',
+  );
+  target?.focus();
+});
+
+useEventListener(parentElement, 'focusout', (e) => {
+  if (!parentElement.value?.contains(e.relatedTarget as Node | null))
+    focusedDate.value = undefined;
+});
+
+const hiddenValue = computed(() => {
+  if (!modelValue.value) return '';
+  if (typeof valueFormat === 'function') return valueFormat(modelValue.value);
+  return modelValue.value.toISOString().slice(0, 10);
+});
+
+provideDatePickerRootContext({
+  open,
+  modal: modalRef,
+  name: nameRef,
+  modelValue,
+  locale: localeRef,
+  triggerId,
+  contentId,
+  triggerElement,
+  hasCustomAnchor,
+  onOpenChange: (v) => { open.value = v; },
+  onOpenToggle: () => { open.value = !open.value; },
+});
+
+provideCalendarRootContext({
+  modelValue,
+  placeholder,
+  locale: localeRef,
+  dir: dirRef,
+  grid,
+  weekDays,
+  headingValue,
+  fullCalendarLabel,
+  weekStartsOn: weekStartsOnRef,
+  weekdayFormat: weekdayFormatRef,
+  fixedWeeks: fixedWeeksRef,
+  numberOfMonths: numberOfMonthsRef,
+  disabled: disabledRef,
+  readonly: readonlyRef,
+  pagedNavigation: pagedNavigationRef,
+  minValue: minValueRef,
+  maxValue: maxValueRef,
+  isDateDisabled,
+  isDateUnavailable: isDateUnavailableLocal,
+  isDateSelected,
+  isOutsideVisibleView,
+  isInvalid,
+  parentElement,
+  focusedDate,
+  setDate,
+  setPlaceholder,
+  nextPage,
+  prevPage,
+  nextYear,
+  prevYear,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :data-primitives-date-picker-root="''"
+      :data-state="open ? 'open' : 'closed'"
+      :data-disabled="disabled ? '' : undefined"
+    >
+      <slot :open="open" :model-value="modelValue" />
+      <input
+        v-if="name"
+        type="hidden"
+        :name="name"
+        :value="hiddenValue"
+        :disabled="disabled"
+        aria-hidden="true"
+        tabindex="-1"
+        style="display: none"
+      >
+    </Primitive>
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/date-picker/DatePickerTrigger.vue b/vue/primitives/src/date-picker/DatePickerTrigger.vue
new file mode 100644
index 0000000..989826c
--- /dev/null
+++ b/vue/primitives/src/date-picker/DatePickerTrigger.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DatePickerTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+import { onMounted } from 'vue';
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { useDatePickerRootContext } from './context';
+
+const { as = 'button' } = defineProps<DatePickerTriggerProps>();
+
+const ctx = useDatePickerRootContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+onMounted(() => {
+  ctx.triggerElement.value = currentElement.value;
+});
+</script>
+
+<template>
+  <component :is="ctx.hasCustomAnchor.value ? Primitive : PopperAnchor" as="template">
+    <Primitive
+      :id="ctx.triggerId.value"
+      :ref="forwardRef"
+      :as="as"
+      :type="as === 'button' ? 'button' : undefined"
+      aria-haspopup="dialog"
+      :aria-expanded="ctx.open.value"
+      :aria-controls="ctx.contentId.value"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      :data-primitives-date-picker-trigger="''"
+      @click="ctx.onOpenToggle"
+    >
+      <slot />
+    </Primitive>
+  </component>
+</template>
diff --git a/vue/primitives/src/date-picker/context.ts b/vue/primitives/src/date-picker/context.ts
new file mode 100644
index 0000000..74b3d87
--- /dev/null
+++ b/vue/primitives/src/date-picker/context.ts
@@ -0,0 +1,20 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface DatePickerRootContext {
+  open: Ref<boolean>;
+  modal: Ref<boolean>;
+  name: Ref<string | undefined>;
+  modelValue: Ref<Date | undefined>;
+  locale: Ref<string>;
+  triggerId: ComputedRef<string>;
+  contentId: ComputedRef<string>;
+  triggerElement: Ref<HTMLElement | undefined>;
+  hasCustomAnchor: Ref<boolean>;
+  onOpenChange: (value: boolean) => void;
+  onOpenToggle: () => void;
+}
+
+const ctx = useContextFactory<DatePickerRootContext>('DatePickerRoot');
+export const provideDatePickerRootContext = ctx.provide;
+export const useDatePickerRootContext = ctx.inject;
diff --git a/vue/primitives/src/date-picker/index.ts b/vue/primitives/src/date-picker/index.ts
new file mode 100644
index 0000000..6e20b6c
--- /dev/null
+++ b/vue/primitives/src/date-picker/index.ts
@@ -0,0 +1,36 @@
+export { default as DatePickerRoot } from './DatePickerRoot.vue';
+export { default as DatePickerTrigger } from './DatePickerTrigger.vue';
+export { default as DatePickerAnchor } from './DatePickerAnchor.vue';
+export { default as DatePickerPortal } from './DatePickerPortal.vue';
+export { default as DatePickerContent } from './DatePickerContent.vue';
+export { default as DatePickerArrow } from './DatePickerArrow.vue';
+export { default as DatePickerClose } from './DatePickerClose.vue';
+export { default as DatePickerCalendar } from './DatePickerCalendar.vue';
+export { default as DatePickerField } from './DatePickerField.vue';
+export { default as DatePickerInput } from './DatePickerField.vue';
+
+// Calendar subparts re-exported as DatePicker* aliases (share CalendarRootContext provided by DatePickerRoot).
+export { default as DatePickerHeader } from '../calendar/CalendarHeader.vue';
+export { default as DatePickerHeading } from '../calendar/CalendarHeading.vue';
+export { default as DatePickerPrev } from '../calendar/CalendarPrev.vue';
+export { default as DatePickerNext } from '../calendar/CalendarNext.vue';
+export { default as DatePickerGrid } from '../calendar/CalendarGrid.vue';
+export { default as DatePickerGridHead } from '../calendar/CalendarGridHead.vue';
+export { default as DatePickerGridBody } from '../calendar/CalendarGridBody.vue';
+export { default as DatePickerGridRow } from '../calendar/CalendarGridRow.vue';
+export { default as DatePickerHeadCell } from '../calendar/CalendarHeadCell.vue';
+export { default as DatePickerCell } from '../calendar/CalendarCell.vue';
+export { default as DatePickerCellTrigger } from '../calendar/CalendarCellTrigger.vue';
+
+export { provideDatePickerRootContext, useDatePickerRootContext } from './context';
+export type { DatePickerRootContext } from './context';
+
+export type { DatePickerRootEmits, DatePickerRootProps } from './DatePickerRoot.vue';
+export type { DatePickerTriggerProps } from './DatePickerTrigger.vue';
+export type { DatePickerAnchorProps } from './DatePickerAnchor.vue';
+export type { DatePickerPortalProps } from './DatePickerPortal.vue';
+export type { DatePickerContentEmits, DatePickerContentProps } from './DatePickerContent.vue';
+export type { DatePickerArrowProps } from './DatePickerArrow.vue';
+export type { DatePickerCloseProps } from './DatePickerClose.vue';
+export type { DatePickerCalendarProps } from './DatePickerCalendar.vue';
+export type { DatePickerFieldProps } from './DatePickerField.vue';
diff --git a/vue/primitives/src/dialog/DialogClose.vue b/vue/primitives/src/dialog/DialogClose.vue
new file mode 100644
index 0000000..bb04b75
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogClose.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogCloseProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useDialogContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<DialogCloseProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useDialogContext();
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :as="as" type="button" @click="ctx.onClose">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/dialog/DialogContent.vue b/vue/primitives/src/dialog/DialogContent.vue
new file mode 100644
index 0000000..0bc656c
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogContent.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { DialogContentImplEmits, DialogContentImplProps } from './DialogContentImpl.vue';
+
+export interface DialogContentProps extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {
+  /** Keep mounted for CSS exit animations. */
+  forceMount?: boolean;
+}
+
+export type DialogContentEmits = DialogContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import { useDialogContext } from './context';
+import DialogContentModal from './DialogContentModal.vue';
+import DialogContentNonModal from './DialogContentNonModal.vue';
+
+const { as = 'div', forceMount = false, role = 'dialog' } = defineProps<DialogContentProps>();
+const emit = defineEmits<DialogContentEmits>();
+
+const ctx = useDialogContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <DialogContentModal
+      v-if="ctx.modal.value"
+      :as="as"
+      :role="role"
+      @open-auto-focus="emit('openAutoFocus', $event)"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+    >
+      <slot />
+    </DialogContentModal>
+    <DialogContentNonModal
+      v-else
+      :as="as"
+      :role="role"
+      @open-auto-focus="emit('openAutoFocus', $event)"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+    >
+      <slot />
+    </DialogContentNonModal>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/dialog/DialogContentImpl.vue b/vue/primitives/src/dialog/DialogContentImpl.vue
new file mode 100644
index 0000000..3358bad
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogContentImpl.vue
@@ -0,0 +1,68 @@
+<script lang="ts">
+import type { DismissableLayerEmits } from '../dismissable-layer';
+import type { FocusScopeEmits } from '../focus-scope';
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogContentImplProps extends PrimitiveProps {
+  /** Trap focus inside the content (modal dialogs). */
+  trapFocus?: boolean;
+  /** Block outside pointer events (modal dialogs). */
+  disableOutsidePointerEvents?: boolean;
+  /** ARIA role on the content. Defaults to 'dialog'; use 'alertdialog' for AlertDialog. */
+  role?: 'dialog' | 'alertdialog';
+}
+
+export interface DialogContentImplEmits {
+  openAutoFocus: FocusScopeEmits['mountAutoFocus'];
+  closeAutoFocus: FocusScopeEmits['unmountAutoFocus'];
+  escapeKeyDown: DismissableLayerEmits['escapeKeyDown'];
+  pointerDownOutside: DismissableLayerEmits['pointerDownOutside'];
+  focusOutside: DismissableLayerEmits['focusOutside'];
+  interactOutside: DismissableLayerEmits['interactOutside'];
+  dismiss: [];
+}
+</script>
+
+<script setup lang="ts">
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { useDialogContext } from './context';
+
+const {
+  as = 'div',
+  trapFocus = false,
+  disableOutsidePointerEvents = false,
+  role = 'dialog',
+} = defineProps<DialogContentImplProps>();
+
+const emit = defineEmits<DialogContentImplEmits>();
+const ctx = useDialogContext();
+</script>
+
+<template>
+  <FocusScope
+    as="template"
+    :loop="true"
+    :trapped="trapFocus"
+    @mount-auto-focus="emit('openAutoFocus', $event)"
+    @unmount-auto-focus="emit('closeAutoFocus', $event)"
+  >
+    <DismissableLayer
+      :id="ctx.contentId.value"
+      :as="as"
+      :disable-outside-pointer-events="disableOutsidePointerEvents"
+      :role="role"
+      :aria-modal="disableOutsidePointerEvents ? 'true' : undefined"
+      :aria-labelledby="ctx.titleId.value"
+      :aria-describedby="ctx.descriptionId.value"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="ctx.onClose"
+    >
+      <slot />
+    </DismissableLayer>
+  </FocusScope>
+</template>
diff --git a/vue/primitives/src/dialog/DialogContentModal.vue b/vue/primitives/src/dialog/DialogContentModal.vue
new file mode 100644
index 0000000..9474323
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogContentModal.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { DialogContentImplEmits, DialogContentImplProps } from './DialogContentImpl.vue';
+import type { VoidFunction } from '@robonen/stdlib';
+import { onBeforeUnmount, watch } from 'vue';
+import { useBodyScrollLock, useForwardExpose } from '@robonen/vue';
+import { useHideOthers } from '../utils/useHideOthers';
+import { useDialogContext } from './context';
+import DialogContentImpl from './DialogContentImpl.vue';
+
+const { as = 'div', role = 'dialog' } = defineProps<DialogContentImplProps>();
+const emit = defineEmits<DialogContentImplEmits>();
+
+const ctx = useDialogContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+watch(currentElement, (el) => {
+  ctx.contentElement.value = el as HTMLElement | undefined;
+}, { immediate: true, flush: 'post' });
+
+useHideOthers(currentElement);
+
+let release: VoidFunction | null = null;
+watch(() => ctx.open.value, (open) => {
+  if (open && !release) release = useBodyScrollLock();
+  else if (!open && release) {
+    release();
+    release = null;
+  }
+}, { immediate: true, flush: 'post' });
+
+onBeforeUnmount(() => {
+  release?.();
+  release = null;
+});
+</script>
+
+<template>
+  <DialogContentImpl
+    :ref="forwardRef"
+    :as="as"
+    :role="role"
+    :trap-focus="ctx.open.value"
+    :disable-outside-pointer-events="true"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+  >
+    <slot />
+  </DialogContentImpl>
+</template>
diff --git a/vue/primitives/src/dialog/DialogContentNonModal.vue b/vue/primitives/src/dialog/DialogContentNonModal.vue
new file mode 100644
index 0000000..56cda19
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogContentNonModal.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DialogContentImplEmits, DialogContentImplProps } from './DialogContentImpl.vue';
+import { watch } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useDialogContext } from './context';
+import DialogContentImpl from './DialogContentImpl.vue';
+
+const { as = 'div', role = 'dialog' } = defineProps<DialogContentImplProps>();
+const emit = defineEmits<DialogContentImplEmits>();
+
+const ctx = useDialogContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+watch(currentElement, (el) => {
+  ctx.contentElement.value = el as HTMLElement | undefined;
+}, { immediate: true, flush: 'post' });
+</script>
+
+<template>
+  <DialogContentImpl
+    :ref="forwardRef"
+    :as="as"
+    :role="role"
+    :trap-focus="false"
+    :disable-outside-pointer-events="false"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+    @close-auto-focus="emit('closeAutoFocus', $event)"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+  >
+    <slot />
+  </DialogContentImpl>
+</template>
diff --git a/vue/primitives/src/dialog/DialogDescription.vue b/vue/primitives/src/dialog/DialogDescription.vue
new file mode 100644
index 0000000..3b07310
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogDescription.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogDescriptionProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { onBeforeUnmount, onMounted } from 'vue';
+import { useDialogContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { as = 'p' } = defineProps<DialogDescriptionProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useDialogContext();
+
+const id = useId(undefined, 'dialog-description');
+
+onMounted(() => {
+  ctx.descriptionId.value = id.value;
+});
+onBeforeUnmount(() => {
+  if (ctx.descriptionId.value === id.value) ctx.descriptionId.value = undefined;
+});
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :id="id" :as="as">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/dialog/DialogOverlay.vue b/vue/primitives/src/dialog/DialogOverlay.vue
new file mode 100644
index 0000000..55d1e4b
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogOverlay.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogOverlayProps extends PrimitiveProps {
+  /**
+   * Keep overlay mounted even when the dialog is closed — useful for CSS
+   * exit animations.
+   * @default false
+   */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useDialogContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div', forceMount = false } = defineProps<DialogOverlayProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useDialogContext();
+</script>
+
+<template>
+  <Presence v-if="ctx.modal.value" :present="ctx.open.value" :force-mount="forceMount">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      :style="{ pointerEvents: 'auto' }"
+    >
+      <slot />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/dialog/DialogPortal.vue b/vue/primitives/src/dialog/DialogPortal.vue
new file mode 100644
index 0000000..38b9b49
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogPortal.vue
@@ -0,0 +1,35 @@
+<script lang="ts">
+import type { TeleportPrimitiveProps } from '../teleport';
+
+export interface DialogPortalProps extends TeleportPrimitiveProps {
+  /**
+   * When true the Portal (and its descendants) remain mounted even when the
+   * dialog is closed. Consumers use this to drive exit animations via CSS.
+   * @default false
+   */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import PortalPrimitive from '../teleport/Teleport.vue';
+import { Presence } from '../presence';
+import { useDialogContext } from './context';
+
+const {
+  to,
+  disabled,
+  defer,
+  forceMount = false,
+} = defineProps<DialogPortalProps>();
+
+const ctx = useDialogContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <PortalPrimitive :to="to" :disabled="disabled" :defer="defer">
+      <slot :present="ctx.open.value" />
+    </PortalPrimitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/dialog/DialogRoot.vue b/vue/primitives/src/dialog/DialogRoot.vue
new file mode 100644
index 0000000..e3a8ddb
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogRoot.vue
@@ -0,0 +1,66 @@
+<script lang="ts">
+export interface DialogRootProps {
+  /** Uncontrolled initial open state. Ignored once `v-model:open` is bound. */
+  defaultOpen?: boolean;
+  /**
+   * Modal mode traps focus inside the content, locks body scroll, and marks
+   * the rest of the document as inert.
+   * @default true
+   */
+  modal?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { ref, toRef } from 'vue';
+import { useId } from '../config-provider';
+import { provideDialogContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const { defaultOpen = false, modal = true } = defineProps<DialogRootProps>();
+
+// v-model:open — undefined means the parent hasn't bound a value; we fall
+// back to an internal ref (uncontrolled mode) and still forward writes.
+const localOpen = ref<boolean>(defaultOpen);
+
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+const triggerId = useId(undefined, 'dialog-trigger');
+const contentId = useId(undefined, 'dialog-content');
+
+const titleId = ref<string | undefined>(undefined);
+const descriptionId = ref<string | undefined>(undefined);
+
+const triggerElement = ref<HTMLElement | undefined>(undefined);
+const contentElement = ref<HTMLElement | undefined>(undefined);
+
+// Identity passthrough — `toRef` with a getter returns a `GetterRefImpl`:
+// reactive `Ref` without the `ReactiveEffect`/cache that `computed` allocates.
+const modalRef = toRef(() => modal);
+
+provideDialogContext({
+  open,
+  modal: modalRef,
+  triggerId,
+  contentId,
+  titleId,
+  descriptionId,
+  triggerElement,
+  contentElement,
+  onOpen: () => { open.value = true; },
+  onClose: () => { open.value = false; },
+  onToggle: () => { open.value = !open.value; },
+});
+</script>
+
+<template>
+  <slot :open="open" />
+</template>
diff --git a/vue/primitives/src/dialog/DialogTitle.vue b/vue/primitives/src/dialog/DialogTitle.vue
new file mode 100644
index 0000000..6559807
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogTitle.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogTitleProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { onBeforeUnmount, onMounted } from 'vue';
+import { useDialogContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { as = 'h2' } = defineProps<DialogTitleProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useDialogContext();
+
+const id = useId(undefined, 'dialog-title');
+
+onMounted(() => {
+  ctx.titleId.value = id.value;
+});
+onBeforeUnmount(() => {
+  if (ctx.titleId.value === id.value) ctx.titleId.value = undefined;
+});
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :id="id" :as="as">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/dialog/DialogTrigger.vue b/vue/primitives/src/dialog/DialogTrigger.vue
new file mode 100644
index 0000000..c76de89
--- /dev/null
+++ b/vue/primitives/src/dialog/DialogTrigger.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DialogTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { Primitive } from '../primitive';
+import { useDialogContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<DialogTriggerProps>();
+const { forwardRef, currentElement } = useForwardExpose();
+const ctx = useDialogContext();
+
+watch(currentElement, (el) => {
+  ctx.triggerElement.value = el as HTMLElement | undefined;
+}, { immediate: true, flush: 'post' });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :id="ctx.triggerId.value"
+    :as="as"
+    type="button"
+    :aria-haspopup="'dialog'"
+    :aria-expanded="ctx.open.value"
+    :aria-controls="ctx.contentId.value"
+    :data-state="ctx.open.value ? 'open' : 'closed'"
+    @click="ctx.onToggle"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/dialog/__test__/Dialog.test.ts b/vue/primitives/src/dialog/__test__/Dialog.test.ts
new file mode 100644
index 0000000..724c4f7
--- /dev/null
+++ b/vue/primitives/src/dialog/__test__/Dialog.test.ts
@@ -0,0 +1,385 @@
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
+import { render } from 'vitest-browser-vue';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from '../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+  delete document.body.dataset['dismissableBlocking'];
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+/** Drains Vue's scheduler (including `flush: 'post'` watchers). */
+async function flush(): Promise<void> {
+  await nextTick();
+  await nextTick();
+  await nextTick();
+}
+
+function $<T extends Element = HTMLElement>(selector: string): T | null {
+  return document.querySelector<T>(selector);
+}
+
+function $content(): HTMLElement | null {
+  return $('[role="dialog"]');
+}
+
+function $trigger(): HTMLElement {
+  return $<HTMLElement>('[aria-haspopup="dialog"]')!;
+}
+
+function $close(): HTMLButtonElement | undefined {
+  return [...document.querySelectorAll('button')].find(b => b.textContent === 'Close');
+}
+
+interface MountOptions {
+  open?: boolean;
+  defaultOpen?: boolean;
+  modal?: boolean;
+  onUpdateOpen?: (v: boolean) => void;
+  withDescription?: boolean;
+}
+
+function injectBodySibling(id: string): HTMLElement {
+  const el = document.createElement('div');
+  el.id = id;
+  el.textContent = id;
+  document.body.appendChild(el);
+  return el;
+}
+
+function mountDialog(options: MountOptions = {}) {
+  const { withDescription = true } = options;
+
+  const Wrapper = defineComponent({
+    setup() {
+      return () => h(
+        DialogRoot,
+        {
+          open: options.open,
+          defaultOpen: options.defaultOpen,
+          modal: options.modal ?? true,
+          'onUpdate:open': options.onUpdateOpen,
+        },
+        {
+          default: () => [
+            h(DialogTrigger, null, { default: () => 'Open' }),
+            h(DialogPortal, null, {
+              default: () => [
+                h(DialogOverlay, { 'data-testid': 'overlay' }),
+                h(DialogContent, null, {
+                  default: () => [
+                    h(DialogTitle, null, { default: () => 'Title' }),
+                    withDescription ? h(DialogDescription, null, { default: () => 'Desc' }) : null,
+                    h(DialogClose, null, { default: () => 'Close' }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        },
+      );
+    },
+  });
+
+  return track(mount(Wrapper, { attachTo: document.body }));
+}
+
+describe('Dialog / markup', () => {
+  it('renders closed by default', () => {
+    mountDialog();
+    const trigger = $trigger();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+    expect($content()).toBeNull();
+  });
+
+  it('exposes data-state="open" on trigger and content when open', async () => {
+    mountDialog({ defaultOpen: true });
+    await flush();
+
+    const trigger = $trigger();
+    const content = $content()!;
+    expect(trigger.getAttribute('data-state')).toBe('open');
+    expect(content.getAttribute('data-state')).toBe('open');
+  });
+
+  it('resolves aria-labelledby / aria-describedby to the rendered title and description ids', async () => {
+    mountDialog({ defaultOpen: true });
+    await flush();
+
+    const content = $content()!;
+    const titleId = content.getAttribute('aria-labelledby');
+    const descId = content.getAttribute('aria-describedby');
+    expect(titleId && document.getElementById(titleId)?.textContent).toBe('Title');
+    expect(descId && document.getElementById(descId)?.textContent).toBe('Desc');
+  });
+
+  it('does not set aria-describedby when description is absent', async () => {
+    mountDialog({ defaultOpen: true, withDescription: false });
+    await flush();
+
+    const content = $content()!;
+    const descId = content.getAttribute('aria-describedby');
+    expect(!descId || !document.getElementById(descId)).toBe(true);
+  });
+
+  it('links trigger.aria-controls to the content id', async () => {
+    mountDialog({ defaultOpen: true });
+    await flush();
+
+    const trigger = $trigger();
+    const content = $content()!;
+    expect(trigger.getAttribute('aria-controls')).toBe(content.id);
+  });
+});
+
+describe('Dialog / open state', () => {
+  it('opens when trigger is clicked (uncontrolled)', async () => {
+    mountDialog();
+    $trigger().click();
+    await flush();
+    expect($content()).toBeTruthy();
+  });
+
+  it('closes when DialogClose is clicked', async () => {
+    mountDialog({ defaultOpen: true });
+    await flush();
+    $close()!.click();
+    await flush();
+    expect($content()).toBeNull();
+  });
+
+  it('closes on Escape key', async () => {
+    mountDialog({ defaultOpen: true });
+    await flush();
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', cancelable: true }));
+    await flush();
+    expect($content()).toBeNull();
+  });
+
+  it('supports a controlled open prop via v-model', async () => {
+    const open = ref(false);
+    const onUpdateOpen = vi.fn((v: boolean) => {
+      open.value = v;
+    });
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(
+          DialogRoot,
+          { open: open.value, 'onUpdate:open': onUpdateOpen },
+          {
+            default: () => [
+              h(DialogTrigger, null, { default: () => 'Open' }),
+              h(DialogPortal, null, {
+                default: () => h(DialogContent, null, {
+                  default: () => h(DialogTitle, null, { default: () => 'T' }),
+                }),
+              }),
+            ],
+          },
+        );
+      },
+    });
+    track(mount(Wrapper, { attachTo: document.body }));
+
+    $trigger().click();
+    await flush();
+    expect(onUpdateOpen).toHaveBeenCalledWith(true);
+    expect(open.value).toBe(true);
+    expect($content()).toBeTruthy();
+  });
+
+  it('re-opens cleanly after being closed', async () => {
+    mountDialog();
+    $trigger().click();
+    await flush();
+    expect($content()).toBeTruthy();
+
+    $close()!.click();
+    await flush();
+    expect($content()).toBeNull();
+
+    $trigger().click();
+    await flush();
+    expect($content()).toBeTruthy();
+  });
+});
+
+describe('Dialog / modal vs non-modal', () => {
+  it('modal: locks body scroll, aria-hides siblings, sets aria-modal', async () => {
+    const a = injectBodySibling('sibling-a');
+    const b = injectBodySibling('sibling-b');
+    mountDialog({ defaultOpen: true, modal: true });
+    await flush();
+
+    const content = $content()!;
+    expect(content.getAttribute('aria-modal')).toBe('true');
+    expect(document.body.style.overflow).toBe('hidden');
+
+    expect(a.getAttribute('aria-hidden')).toBe('true');
+    expect(b.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('modal: restores sibling aria-hidden on close', async () => {
+    const a = injectBodySibling('sibling-a');
+    mountDialog({ defaultOpen: true, modal: true });
+    await flush();
+
+    expect(a.getAttribute('aria-hidden')).toBe('true');
+
+    $close()!.click();
+    await flush();
+
+    expect(a.getAttribute('aria-hidden')).toBeNull();
+    expect(a.getAttribute('data-aria-hidden')).toBeNull();
+  });
+
+  it('non-modal: no body-scroll lock, no aria-hidden on siblings, no aria-modal', async () => {
+    const a = injectBodySibling('sibling-a');
+    mountDialog({ defaultOpen: true, modal: false });
+    await flush();
+
+    const content = $content()!;
+    expect(content.getAttribute('aria-modal')).toBeNull();
+    expect(document.body.style.overflow).not.toBe('hidden');
+
+    expect(a.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('non-modal: omits overlay', async () => {
+    mountDialog({ defaultOpen: true, modal: false });
+    await flush();
+
+    const overlays = [...document.querySelectorAll<HTMLElement>('[data-state="open"]')]
+      .filter(el => el.getAttribute('role') !== 'dialog' && !el.hasAttribute('aria-haspopup'));
+    expect(overlays).toHaveLength(0);
+  });
+
+  it('modal: renders overlay with data-state="open"', async () => {
+    mountDialog({ defaultOpen: true, modal: true });
+    await flush();
+
+    const overlay = document.querySelector<HTMLElement>('[data-testid="overlay"]');
+    expect(overlay).toBeTruthy();
+    expect(overlay!.getAttribute('data-state')).toBe('open');
+  });
+});
+
+// -----------------------------------------------------------------------------
+// Browser-only tests (real focus behaviour).
+// -----------------------------------------------------------------------------
+
+function settle() {
+  return new Promise((r) => {
+    requestAnimationFrame(() => requestAnimationFrame(() => r(null)));
+  });
+}
+
+function mountInDom<T>(component: T) {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  return render(component, { container: host });
+}
+
+const DialogBrowserHarness = defineComponent({
+  setup() {
+    const open = ref(false);
+    return { open };
+  },
+  render() {
+    return h(DialogRoot, {
+      open: this.open,
+      'onUpdate:open': (v: boolean) => { this.open = v; },
+    }, {
+      default: () => [
+        h(DialogTrigger, { id: 'trigger' }, { default: () => 'Open' }),
+        h(DialogPortal, null, {
+          default: () => [
+            h(DialogOverlay, { id: 'overlay' }),
+            h(DialogContent, { id: 'content' }, {
+              default: () => [
+                h(DialogTitle, null, { default: () => 'Title' }),
+                h(DialogDescription, null, { default: () => 'Desc' }),
+                h('button', { id: 'first-inside' }, 'First'),
+                h('button', { id: 'second-inside' }, 'Second'),
+                h(DialogClose, { id: 'close' }, { default: () => 'Close' }),
+              ],
+            }),
+          ],
+        }),
+      ],
+    });
+  },
+});
+
+describe('Dialog / focus (browser)', () => {
+  it('moves focus into content on open and returns to trigger on close', async () => {
+    const { container } = mountInDom(DialogBrowserHarness);
+    const trigger = container.querySelector<HTMLButtonElement>('#trigger')!;
+    trigger.focus();
+    expect(document.activeElement).toBe(trigger);
+
+    await userEvent.click(trigger);
+    await settle();
+
+    const content = document.querySelector<HTMLElement>('#content')!;
+    expect(content.contains(document.activeElement)).toBe(true);
+
+    await userEvent.keyboard('{Escape}');
+    await settle();
+
+    expect(document.querySelector('#content')).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('close button closes dialog and restores focus to trigger', async () => {
+    const { container } = mountInDom(DialogBrowserHarness);
+    const trigger = container.querySelector<HTMLButtonElement>('#trigger')!;
+    trigger.focus();
+    await userEvent.click(trigger);
+    await settle();
+
+    await userEvent.click(document.querySelector<HTMLButtonElement>('#close')!);
+    await settle();
+
+    expect(document.querySelector('#content')).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('Tab cycles focus inside the content (focus trap)', async () => {
+    const { container } = mountInDom(DialogBrowserHarness);
+    const trigger = container.querySelector<HTMLButtonElement>('#trigger')!;
+    trigger.focus();
+    await userEvent.click(trigger);
+    await settle();
+
+    const content = document.querySelector<HTMLElement>('#content')!;
+
+    for (let i = 0; i < 6; i++) {
+      await userEvent.keyboard('{Tab}');
+      await settle();
+      expect(content.contains(document.activeElement)).toBe(true);
+    }
+  });
+});
diff --git a/vue/primitives/src/dialog/context.ts b/vue/primitives/src/dialog/context.ts
new file mode 100644
index 0000000..c33c0c3
--- /dev/null
+++ b/vue/primitives/src/dialog/context.ts
@@ -0,0 +1,32 @@
+import type { ComputedRef, Ref, WritableComputedRef } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface DialogContext {
+  /** Controlled open state. Write to toggle. */
+  open: WritableComputedRef<boolean> | Ref<boolean>;
+  /** Whether the dialog is modal (traps focus, locks scroll, inert outside). */
+  modal: Ref<boolean>;
+  /** Stable id for the trigger element (for aria-controls). */
+  triggerId: ComputedRef<string>;
+  /** Stable id applied to DialogContent (for aria-controls target). */
+  contentId: ComputedRef<string>;
+  /** Id of DialogTitle — when mounted — used as aria-labelledby. */
+  titleId: Ref<string | undefined>;
+  /** Id of DialogDescription — when mounted — used as aria-describedby. */
+  descriptionId: Ref<string | undefined>;
+  /** DOM node of DialogTrigger — used to restore focus and as a dismiss anchor. */
+  triggerElement: Ref<HTMLElement | undefined>;
+  /** DOM node of the currently mounted DialogContent. */
+  contentElement: Ref<HTMLElement | undefined>;
+  /** Programmatically open the dialog. */
+  onOpen: () => void;
+  /** Programmatically close the dialog. */
+  onClose: () => void;
+  /** Toggle the dialog. */
+  onToggle: () => void;
+}
+
+const ctx = useContextFactory<DialogContext>('DialogContext');
+
+export const provideDialogContext = ctx.provide;
+export const useDialogContext = ctx.inject;
diff --git a/vue/primitives/src/dialog/index.ts b/vue/primitives/src/dialog/index.ts
new file mode 100644
index 0000000..ec13a3a
--- /dev/null
+++ b/vue/primitives/src/dialog/index.ts
@@ -0,0 +1,20 @@
+export { default as DialogRoot } from './DialogRoot.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';
+export { default as DialogPortal } from './DialogPortal.vue';
+export { default as DialogOverlay } from './DialogOverlay.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogClose } from './DialogClose.vue';
+
+export { useDialogContext } from './context';
+
+export type { DialogContext } from './context';
+export type { DialogRootProps } from './DialogRoot.vue';
+export type { DialogTriggerProps } from './DialogTrigger.vue';
+export type { DialogPortalProps } from './DialogPortal.vue';
+export type { DialogOverlayProps } from './DialogOverlay.vue';
+export type { DialogContentEmits, DialogContentProps } from './DialogContent.vue';
+export type { DialogTitleProps } from './DialogTitle.vue';
+export type { DialogDescriptionProps } from './DialogDescription.vue';
+export type { DialogCloseProps } from './DialogClose.vue';
diff --git a/vue/primitives/src/dismissable-layer/DismissableLayer.vue b/vue/primitives/src/dismissable-layer/DismissableLayer.vue
new file mode 100644
index 0000000..1f8e324
--- /dev/null
+++ b/vue/primitives/src/dismissable-layer/DismissableLayer.vue
@@ -0,0 +1,132 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface DismissableLayerProps extends PrimitiveProps {
+  /**
+   * When enabled, outside pointer events are blocked — the rest of the
+   * document becomes `pointer-events: none`, and the layer gains
+   * `pointer-events: auto` so it is still interactive.
+   * @default false
+   */
+  disableOutsidePointerEvents?: boolean;
+}
+
+export interface DismissableLayerEmits {
+  /** Escape key pressed while this layer is topmost. Call `event.preventDefault()` to suppress dismiss. */
+  escapeKeyDown: [event: KeyboardEvent];
+  /** Pointer down outside this layer. Preventable. */
+  pointerDownOutside: [event: PointerEvent | MouseEvent];
+  /** Focus moved outside this layer. Preventable. */
+  focusOutside: [event: FocusEvent];
+  /** Either pointer-outside or focus-outside. Preventable. */
+  interactOutside: [event: PointerEvent | MouseEvent | FocusEvent];
+  /** Fired after a non-prevented outside interaction or escape. */
+  dismiss: [];
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { onBeforeUnmount, onMounted, watchPostEffect } from 'vue';
+import { dismissableLayerStack } from './stack';
+import { useClickOutside, useEscapeKey, useEventListener, useForwardExpose } from '@robonen/vue';
+
+const { disableOutsidePointerEvents = false, as = 'div' } = defineProps<DismissableLayerProps>();
+const emit = defineEmits<DismissableLayerEmits>();
+
+const { forwardRef, currentElement: nodeRef } = useForwardExpose();
+
+const layer = { el: null as unknown as HTMLElement, disableOutsidePointerEvents: false };
+
+watchPostEffect(() => {
+  layer.disableOutsidePointerEvents = disableOutsidePointerEvents;
+});
+
+onMounted(() => {
+  if (!nodeRef.value) return;
+  layer.el = nodeRef.value;
+  dismissableLayerStack.push(layer);
+});
+
+onBeforeUnmount(() => {
+  dismissableLayerStack.remove(layer);
+});
+
+function createInteractEvent(event: PointerEvent | MouseEvent | FocusEvent): { defaultPrevented: boolean } {
+  // Emit `interactOutside` first so consumers can cancel before the specific event fires.
+  let prevented = false;
+  const original = event.preventDefault;
+  event.preventDefault = () => {
+    prevented = true;
+    original.call(event);
+  };
+  emit('interactOutside', event);
+  event.preventDefault = original;
+  return { defaultPrevented: prevented };
+}
+
+useEscapeKey((event) => {
+  if (!dismissableLayerStack.isTopmost(layer)) return;
+  emit('escapeKeyDown', event);
+  if (!event.defaultPrevented) emit('dismiss');
+});
+
+useClickOutside(nodeRef, (event) => {
+  if (!dismissableLayerStack.isTopmost(layer)) return;
+  const interact = createInteractEvent(event);
+  if (interact.defaultPrevented) return;
+  emit('pointerDownOutside', event);
+  if (!event.defaultPrevented) emit('dismiss');
+});
+
+// Focus outside detection — fires when focus leaves this layer to an element
+// outside it. We use the `focusin` event at document level.
+useEventListener(document, 'focusin', (event: FocusEvent) => {
+  const el = nodeRef.value;
+  const target = event.target as Node | null;
+  if (!el || !target) return;
+  if (el === target || el.contains(target)) return;
+  if (!dismissableLayerStack.isTopmost(layer)) return;
+
+  const interact = createInteractEvent(event);
+  if (interact.defaultPrevented) return;
+
+  emit('focusOutside', event);
+  if (!event.defaultPrevented) emit('dismiss');
+});
+
+// When this layer disables outside pointer events, the body gets a data
+// attribute so consumers can style `[data-dismissable-blocking] *:not([data-dismissable-layer]) { pointer-events: none }`.
+// We toggle via a style element approach for robustness.
+// `disableOutsidePointerEvents` is a reactive prop destructure — reading it
+// inside `watchPostEffect` already registers the dependency, no need for a
+// computed wrapper.
+
+watchPostEffect((onCleanup) => {
+  if (!disableOutsidePointerEvents) return;
+  if (typeof document === 'undefined') return;
+
+  const original = document.body.style.pointerEvents;
+  document.body.style.pointerEvents = 'none';
+  document.body.dataset['dismissableBlocking'] = 'true';
+
+  onCleanup(() => {
+    // Only clear if no other disabling layer remains
+    if (!dismissableLayerStack.anyDisabling()) {
+      document.body.style.pointerEvents = original;
+      delete document.body.dataset['dismissableBlocking'];
+    }
+  });
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-dismissable-layer="true"
+    :style="disableOutsidePointerEvents ? { pointerEvents: 'auto' } : undefined"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/dismissable-layer/__test__/DismissableLayer.test.ts b/vue/primitives/src/dismissable-layer/__test__/DismissableLayer.test.ts
new file mode 100644
index 0000000..9c0bf0c
--- /dev/null
+++ b/vue/primitives/src/dismissable-layer/__test__/DismissableLayer.test.ts
@@ -0,0 +1,121 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import DismissableLayer from '../DismissableLayer.vue';
+
+describe('DismissableLayer', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    document.body.style.pointerEvents = '';
+  });
+
+  it('emits escapeKeyDown and dismiss on Escape when topmost', async () => {
+    const w = mount(DismissableLayer, {
+      attachTo: document.body,
+      slots: { default: '<button>inside</button>' },
+    });
+    await nextTick();
+
+    globalThis.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+    expect(w.emitted('escapeKeyDown')).toBeTruthy();
+    expect(w.emitted('dismiss')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('does not dismiss when escapeKeyDown.preventDefault() is called', async () => {
+    const w = mount(DismissableLayer, {
+      attachTo: document.body,
+      slots: { default: '<button>inside</button>' },
+      props: {
+        onEscapeKeyDown: (e: Event) => e.preventDefault(),
+      },
+    });
+    await nextTick();
+
+    globalThis.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', cancelable: true }));
+
+    expect(w.emitted('escapeKeyDown')).toBeTruthy();
+    expect(w.emitted('dismiss')).toBeFalsy();
+    w.unmount();
+  });
+
+  it('emits pointerDownOutside on outside pointerdown', async () => {
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+
+    const w = mount(DismissableLayer, {
+      attachTo: document.body,
+      slots: { default: '<button data-testid="inside">in</button>' },
+    });
+    await nextTick();
+
+    outside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+
+    expect(w.emitted('pointerDownOutside')).toBeTruthy();
+    expect(w.emitted('dismiss')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('does not emit pointerDownOutside on inside pointerdown', async () => {
+    const w = mount(DismissableLayer, {
+      attachTo: document.body,
+      slots: { default: '<button data-testid="inside">in</button>' },
+    });
+    await nextTick();
+
+    const inside = w.find('[data-testid=inside]').element as HTMLElement;
+    inside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+
+    expect(w.emitted('pointerDownOutside')).toBeFalsy();
+    expect(w.emitted('dismiss')).toBeFalsy();
+    w.unmount();
+  });
+
+  it('sets body pointer-events: none when disableOutsidePointerEvents is true', async () => {
+    const w = mount(DismissableLayer, {
+      attachTo: document.body,
+      props: { disableOutsidePointerEvents: true },
+      slots: { default: '<button>x</button>' },
+    });
+    await nextTick();
+
+    expect(document.body.style.pointerEvents).toBe('none');
+    expect(document.body.dataset['dismissableBlocking']).toBe('true');
+
+    w.unmount();
+    expect(document.body.style.pointerEvents).toBe('');
+    expect(document.body.dataset['dismissableBlocking']).toBeUndefined();
+  });
+
+  it('only topmost layer handles dismiss when nested', async () => {
+    const onDismissBottom = vi.fn();
+    const onDismissTop = vi.fn();
+
+    const bottom = mount(DismissableLayer, {
+      attachTo: document.body,
+      props: { onDismiss: onDismissBottom },
+      slots: { default: '<button>bottom</button>' },
+    });
+    await nextTick();
+
+    const top = mount(DismissableLayer, {
+      attachTo: document.body,
+      props: { onDismiss: onDismissTop },
+      slots: { default: '<button>top</button>' },
+    });
+    await nextTick();
+
+    globalThis.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+    expect(onDismissTop).toHaveBeenCalledTimes(1);
+    expect(onDismissBottom).not.toHaveBeenCalled();
+
+    top.unmount();
+
+    globalThis.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(onDismissBottom).toHaveBeenCalledTimes(1);
+
+    bottom.unmount();
+  });
+});
diff --git a/vue/primitives/src/dismissable-layer/index.ts b/vue/primitives/src/dismissable-layer/index.ts
new file mode 100644
index 0000000..9f61932
--- /dev/null
+++ b/vue/primitives/src/dismissable-layer/index.ts
@@ -0,0 +1,7 @@
+export { default as DismissableLayer } from './DismissableLayer.vue';
+export { dismissableLayerStack } from './stack';
+
+export type {
+  DismissableLayerEmits,
+  DismissableLayerProps,
+} from './DismissableLayer.vue';
diff --git a/vue/primitives/src/dismissable-layer/stack.ts b/vue/primitives/src/dismissable-layer/stack.ts
new file mode 100644
index 0000000..69293d1
--- /dev/null
+++ b/vue/primitives/src/dismissable-layer/stack.ts
@@ -0,0 +1,40 @@
+export interface DismissableLayerElement {
+  el: HTMLElement;
+  disableOutsidePointerEvents: boolean;
+}
+
+const layers: DismissableLayerElement[] = [];
+
+/**
+ * Module-level stack of active DismissableLayers. The most recently-pushed
+ * non-disabled layer is considered the topmost and is the only one that
+ * should dispatch dismiss-style events (escape, pointer-outside, focus-outside).
+ */
+export const dismissableLayerStack = {
+  push(layer: DismissableLayerElement) {
+    layers.push(layer);
+  },
+
+  remove(layer: DismissableLayerElement) {
+    const i = layers.indexOf(layer);
+    if (i !== -1) layers.splice(i, 1);
+  },
+
+  isTopmost(layer: DismissableLayerElement): boolean {
+    return layers.at(-1) === layer;
+  },
+
+  hasDisablingLayerAbove(layer: DismissableLayerElement): boolean {
+    const i = layers.indexOf(layer);
+    if (i === -1) return false;
+    return layers.slice(i + 1).some(l => l.disableOutsidePointerEvents);
+  },
+
+  any(): boolean {
+    return layers.length > 0;
+  },
+
+  anyDisabling(): boolean {
+    return layers.some(l => l.disableOutsidePointerEvents);
+  },
+};
diff --git a/vue/primitives/src/dropdown-menu/DropdownMenuTrigger.vue b/vue/primitives/src/dropdown-menu/DropdownMenuTrigger.vue
index 800dc45..ea50ba9 100644
--- a/vue/primitives/src/dropdown-menu/DropdownMenuTrigger.vue
+++ b/vue/primitives/src/dropdown-menu/DropdownMenuTrigger.vue
@@ -14,7 +14,7 @@ import { MenuAnchor, useMenuContext } from '../menu';
 import { Primitive } from '../primitive';
 import { useDropdownMenuRootContext } from './context';
 
-const { disabled = false, as = 'button', asChild } = defineProps<DropdownMenuTriggerProps>();
+const { disabled = false, as = 'button' } = defineProps<DropdownMenuTriggerProps>();
 
 const menuCtx = useMenuContext();
 const ddCtx = useDropdownMenuRootContext();
@@ -46,11 +46,10 @@ function handleKeyDown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <MenuAnchor as-child>
+  <MenuAnchor>
     <Primitive
       :ref="forwardRef"
       :as="as"
-      :as-child="asChild"
       :id="ddCtx.triggerId.value"
       aria-haspopup="menu"
       :aria-expanded="menuCtx.open.value"
diff --git a/vue/primitives/src/editable/EditableArea.vue b/vue/primitives/src/editable/EditableArea.vue
new file mode 100644
index 0000000..76f5b44
--- /dev/null
+++ b/vue/primitives/src/editable/EditableArea.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableAreaProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div' } = defineProps<EditableAreaProps>();
+
+const ctx = useEditableContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-state="ctx.isEditing.value ? 'edit' : 'preview'"
+    :data-empty="ctx.isEmpty.value ? '' : undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-readonly="ctx.readonly.value ? '' : undefined"
+    :style="ctx.autoResize.value ? { display: 'inline-grid' } : undefined"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditableCancelTrigger.vue b/vue/primitives/src/editable/EditableCancelTrigger.vue
new file mode 100644
index 0000000..ccd5672
--- /dev/null
+++ b/vue/primitives/src/editable/EditableCancelTrigger.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableCancelTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<EditableCancelTriggerProps>();
+
+const ctx = useEditableContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    aria-label="cancel"
+    :disabled="ctx.disabled.value || undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :hidden="ctx.isEditing.value ? undefined : ''"
+    @click="ctx.cancel"
+  >
+    <slot>Cancel</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditableEditTrigger.vue b/vue/primitives/src/editable/EditableEditTrigger.vue
new file mode 100644
index 0000000..d43f4cb
--- /dev/null
+++ b/vue/primitives/src/editable/EditableEditTrigger.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableEditTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<EditableEditTriggerProps>();
+
+const ctx = useEditableContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    aria-label="edit"
+    :disabled="ctx.disabled.value || undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :hidden="ctx.isEditing.value ? '' : undefined"
+    @click="ctx.edit"
+  >
+    <slot>Edit</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditableInput.vue b/vue/primitives/src/editable/EditableInput.vue
new file mode 100644
index 0000000..3046607
--- /dev/null
+++ b/vue/primitives/src/editable/EditableInput.vue
@@ -0,0 +1,85 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableInputProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { nextTick, onMounted, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'input' } = defineProps<EditableInputProps>();
+
+const ctx = useEditableContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+function syncRef(): void {
+  const el = currentElement.value as HTMLInputElement | undefined;
+  ctx.inputRef.value = el;
+}
+
+function focusAndSelect(): void {
+  const el = ctx.inputRef.value;
+  if (!el) return;
+  el.focus({ preventScroll: true });
+  if (ctx.selectOnFocus.value) el.select();
+}
+
+onMounted(() => {
+  syncRef();
+  if (ctx.startWithEditMode.value) focusAndSelect();
+});
+
+watch(ctx.isEditing, (editing) => {
+  if (!editing) return;
+  nextTick(() => {
+    syncRef();
+    focusAndSelect();
+  });
+});
+
+function onInput(event: Event): void {
+  ctx.inputValue.value = (event.target as HTMLInputElement).value;
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    ctx.cancel();
+    return;
+  }
+  if (event.key !== 'Enter' || event.shiftKey || event.metaKey || event.isComposing) return;
+  const mode = ctx.submitMode.value;
+  if (mode === 'enter' || mode === 'both') {
+    event.preventDefault();
+    ctx.submit();
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :value="ctx.inputValue.value"
+    :placeholder="ctx.placeholder.value.edit"
+    :disabled="ctx.disabled.value"
+    :readonly="ctx.readonly.value"
+    :maxlength="ctx.maxLength.value"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-readonly="ctx.readonly.value ? '' : undefined"
+    :hidden="ctx.autoResize.value ? undefined : !ctx.isEditing.value"
+    :style="ctx.autoResize.value ? {
+      all: 'unset',
+      gridArea: '1 / 1 / auto / auto',
+      visibility: !ctx.isEditing.value ? 'hidden' : undefined,
+    } : undefined"
+    aria-label="editable input"
+    @input="onInput"
+    @keydown="onKeyDown"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditablePreview.vue b/vue/primitives/src/editable/EditablePreview.vue
new file mode 100644
index 0000000..7eb7708
--- /dev/null
+++ b/vue/primitives/src/editable/EditablePreview.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditablePreviewProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'span' } = defineProps<EditablePreviewProps>();
+
+const ctx = useEditableContext();
+const { forwardRef } = useForwardExpose();
+
+const text = computed(() => ctx.modelValue.value || ctx.placeholder.value.preview);
+const showPlaceholder = computed(() => ctx.isEmpty.value);
+
+function onFocus(): void {
+  if (ctx.activationMode.value === 'focus') ctx.edit();
+}
+
+function onDoubleClick(): void {
+  if (ctx.activationMode.value === 'dblclick') ctx.edit();
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    tabindex="0"
+    :hidden="ctx.autoResize.value ? undefined : ctx.isEditing.value"
+    :data-placeholder-shown="showPlaceholder ? '' : undefined"
+    :data-state="ctx.isEditing.value ? 'edit' : 'preview'"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-readonly="ctx.readonly.value ? '' : undefined"
+    :style="ctx.autoResize.value ? {
+      whiteSpace: 'pre',
+      userSelect: 'none',
+      gridArea: '1 / 1 / auto / auto',
+      visibility: ctx.isEditing.value ? 'hidden' : undefined,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    } : undefined"
+    @focusin="onFocus"
+    @dblclick="onDoubleClick"
+  >
+    <slot>{{ text }}</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditableRoot.vue b/vue/primitives/src/editable/EditableRoot.vue
new file mode 100644
index 0000000..2568059
--- /dev/null
+++ b/vue/primitives/src/editable/EditableRoot.vue
@@ -0,0 +1,164 @@
+<script lang="ts">
+import type { EditableActivationMode, EditablePlaceholder, EditableSubmitMode } from './context';
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableRootProps extends PrimitiveProps {
+  /** Controlled value. Use `v-model`. */
+  modelValue?: string;
+  /** Uncontrolled initial value. @default '' */
+  defaultValue?: string;
+  /** Placeholder for edit / preview. A single string applies to both. */
+  placeholder?: string | EditablePlaceholder;
+  /** When the preview should switch to edit mode. @default 'focus' */
+  activationMode?: EditableActivationMode;
+  /** How edits are committed. @default 'blur' */
+  submitMode?: EditableSubmitMode;
+  /** Mount in edit mode. */
+  startWithEditMode?: boolean;
+  /** Select the input content on focus. */
+  selectOnFocus?: boolean;
+  /** Grid-based auto resize mode — preview and input share a grid cell. */
+  autoResize?: boolean;
+  /** Max input length. */
+  maxLength?: number;
+  /** Disabled state. */
+  disabled?: boolean;
+  /** Read-only state. */
+  readonly?: boolean;
+}
+
+export interface EditableRootEmits {
+  'update:modelValue': [value: string];
+  'update:state': [state: 'edit' | 'submit' | 'cancel'];
+  submit: [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, shallowRef, toRef, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { provideEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  as = 'div',
+  modelValue,
+  defaultValue = '',
+  placeholder = 'Enter text…',
+  activationMode = 'focus',
+  submitMode = 'blur',
+  startWithEditMode = false,
+  selectOnFocus = false,
+  autoResize = false,
+  maxLength,
+  disabled = false,
+  readonly = false,
+} = defineProps<EditableRootProps>();
+
+const emit = defineEmits<EditableRootEmits>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+
+const localValue = ref<string>(modelValue ?? defaultValue);
+
+watch(() => modelValue, (v) => {
+  if (v === undefined || v === localValue.value) return;
+  localValue.value = v;
+});
+
+const inputValue = ref<string>(localValue.value);
+const isEditing = ref<boolean>(startWithEditMode);
+const inputRef = shallowRef<HTMLInputElement | undefined>();
+
+// Keep the draft in sync when modelValue changes from outside.
+watch(localValue, (v) => {
+  inputValue.value = v;
+});
+
+const resolvedPlaceholder = computed<EditablePlaceholder>(() =>
+  typeof placeholder === 'string'
+    ? { edit: placeholder, preview: placeholder }
+    : placeholder,
+);
+
+const isEmpty = computed(() => localValue.value === '');
+
+function commitModel(v: string): void {
+  if (v === localValue.value) return;
+  localValue.value = v;
+  emit('update:modelValue', v);
+}
+
+function edit(): void {
+  if (disabled || readonly) return;
+  inputValue.value = localValue.value;
+  isEditing.value = true;
+  emit('update:state', 'edit');
+}
+
+function cancel(): void {
+  isEditing.value = false;
+  inputValue.value = localValue.value;
+  emit('update:state', 'cancel');
+}
+
+function submit(): void {
+  commitModel(inputValue.value);
+  isEditing.value = false;
+  emit('update:state', 'submit');
+  emit('submit', inputValue.value);
+}
+
+function onFocusOutCapture(event: FocusEvent): void {
+  if (!isEditing.value) return;
+  const root = currentElement.value;
+  const next = event.relatedTarget as Node | null;
+  if (root && next && root.contains(next)) return;
+  if (submitMode === 'blur' || submitMode === 'both') submit();
+  else cancel();
+}
+
+provideEditableContext({
+  modelValue: localValue,
+  inputValue,
+  isEditing,
+  placeholder: resolvedPlaceholder,
+  isEmpty,
+  disabled: toRef(() => disabled),
+  readonly: toRef(() => readonly),
+  maxLength: toRef(() => maxLength),
+  activationMode: toRef(() => activationMode),
+  submitMode: toRef(() => submitMode),
+  selectOnFocus: toRef(() => selectOnFocus),
+  autoResize: toRef(() => autoResize),
+  startWithEditMode: toRef(() => startWithEditMode),
+  inputRef,
+  edit,
+  cancel,
+  submit,
+});
+</script>
+
+<template>
+  <Primitive
+    v-bind="$attrs"
+    :ref="forwardRef"
+    :as="as"
+    :data-state="isEditing ? 'edit' : 'preview'"
+    :data-empty="isEmpty ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :data-readonly="readonly ? '' : undefined"
+    @focusout.capture="onFocusOutCapture"
+  >
+    <slot
+      :model-value="localValue"
+      :is-editing="isEditing"
+      :is-empty="isEmpty"
+      :edit="edit"
+      :cancel="cancel"
+      :submit="submit"
+    />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/EditableSubmitTrigger.vue b/vue/primitives/src/editable/EditableSubmitTrigger.vue
new file mode 100644
index 0000000..266cdb6
--- /dev/null
+++ b/vue/primitives/src/editable/EditableSubmitTrigger.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface EditableSubmitTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useEditableContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<EditableSubmitTriggerProps>();
+
+const ctx = useEditableContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    aria-label="submit"
+    :disabled="ctx.disabled.value || undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :hidden="ctx.isEditing.value ? undefined : ''"
+    @click="ctx.submit"
+  >
+    <slot>Submit</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/editable/__test__/Editable.test.ts b/vue/primitives/src/editable/__test__/Editable.test.ts
new file mode 100644
index 0000000..3d1c819
--- /dev/null
+++ b/vue/primitives/src/editable/__test__/Editable.test.ts
@@ -0,0 +1,172 @@
+import {
+  EditableArea,
+  EditableCancelTrigger,
+  EditableEditTrigger,
+  EditableInput,
+  EditablePreview,
+  EditableRoot,
+  EditableSubmitTrigger,
+} from '../index';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createEditable(rootProps: Record<string, unknown> = {}) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () => h(
+          EditableRoot,
+          rootProps,
+          {
+            default: () => h(EditableArea, null, {
+              default: () => [
+                h(EditablePreview),
+                h(EditableInput),
+                h(EditableEditTrigger),
+                h(EditableSubmitTrigger),
+                h(EditableCancelTrigger),
+              ],
+            }),
+          },
+        );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('Editable', () => {
+  it('renders preview with default placeholder when empty', () => {
+    const w = createEditable({ placeholder: 'Click to edit' });
+    const preview = w.find('span');
+    expect(preview.text()).toBe('Click to edit');
+    expect(preview.attributes('data-placeholder-shown')).toBe('');
+    w.unmount();
+  });
+
+  it('renders model value in preview', () => {
+    const w = createEditable({ modelValue: 'Hello' });
+    expect(w.find('span').text()).toBe('Hello');
+    w.unmount();
+  });
+
+  it('focus activation enters edit mode', async () => {
+    const w = createEditable({ defaultValue: 'X', activationMode: 'focus' });
+    await w.find('span').trigger('focusin');
+    await nextTick();
+    const input = w.find('input').element as HTMLInputElement;
+    expect(input.hidden).toBe(false);
+    expect((w.find('span').element as HTMLElement).hidden).toBe(true);
+    w.unmount();
+  });
+
+  it('dblclick activation enters edit mode only on dblclick', async () => {
+    const w = createEditable({ activationMode: 'dblclick' });
+    await w.find('span').trigger('focusin');
+    await nextTick();
+    expect((w.find('input').element as HTMLInputElement).hidden).toBe(true);
+    await w.find('span').trigger('dblclick');
+    await nextTick();
+    expect((w.find('input').element as HTMLInputElement).hidden).toBe(false);
+    w.unmount();
+  });
+
+  it('edit trigger switches to edit mode', async () => {
+    const w = createEditable({ activationMode: 'none' });
+    const buttons = w.findAll('button');
+    const editBtn = buttons.find(b => b.attributes('aria-label') === 'edit')!;
+    await editBtn.trigger('click');
+    await nextTick();
+    expect((w.find('input').element as HTMLInputElement).hidden).toBe(false);
+    w.unmount();
+  });
+
+  it('Enter submits when submitMode includes enter', async () => {
+    const value = ref('initial');
+    const w = mount(
+      defineComponent({
+        setup() {
+          return () => h(
+            EditableRoot,
+            {
+              modelValue: value.value,
+              submitMode: 'enter',
+              startWithEditMode: true,
+              'onUpdate:modelValue': (v: string) => (value.value = v),
+            },
+            {
+              default: () => h(EditableArea, null, {
+                default: () => [h(EditablePreview), h(EditableInput)],
+              }),
+            },
+          );
+        },
+      }),
+      { attachTo: document.body },
+    );
+    await nextTick();
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'changed';
+    await input.trigger('input');
+    press(input.element, 'Enter');
+    await nextTick();
+    expect(value.value).toBe('changed');
+    w.unmount();
+  });
+
+  it('Escape cancels and restores model value', async () => {
+    const w = createEditable({ defaultValue: 'orig', submitMode: 'enter' });
+    const editBtn = w.findAll('button').find(b => b.attributes('aria-label') === 'edit')!;
+    await editBtn.trigger('click');
+    await nextTick();
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'new';
+    await input.trigger('input');
+    press(input.element, 'Escape');
+    await nextTick();
+    expect(w.find('span').text()).toBe('orig');
+    w.unmount();
+  });
+
+  it('submit trigger emits submit', async () => {
+    const w = createEditable({ defaultValue: 'v1', startWithEditMode: true });
+    await nextTick();
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'v2';
+    await input.trigger('input');
+    const submitBtn = w.findAll('button').find(b => b.attributes('aria-label') === 'submit')!;
+    await submitBtn.trigger('click');
+    await nextTick();
+    const root = w.findComponent(EditableRoot);
+    expect(root.emitted('update:modelValue')?.at(-1)).toEqual(['v2']);
+    expect(root.emitted('submit')?.at(-1)).toEqual(['v2']);
+    w.unmount();
+  });
+
+  it('cancel trigger reverts draft', async () => {
+    const w = createEditable({ defaultValue: 'v1', startWithEditMode: true });
+    await nextTick();
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'draft';
+    await input.trigger('input');
+    const cancelBtn = w.findAll('button').find(b => b.attributes('aria-label') === 'cancel')!;
+    await cancelBtn.trigger('click');
+    await nextTick();
+    expect(w.find('span').text()).toBe('v1');
+    expect(w.findComponent(EditableRoot).emitted('update:modelValue')).toBeUndefined();
+    w.unmount();
+  });
+
+  it('disabled blocks edit activation', async () => {
+    const w = createEditable({ defaultValue: 'v', disabled: true });
+    await w.find('span').trigger('focusin');
+    await nextTick();
+    expect((w.find('input').element as HTMLInputElement).hidden).toBe(true);
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/editable/context.ts b/vue/primitives/src/editable/context.ts
new file mode 100644
index 0000000..e3ad163
--- /dev/null
+++ b/vue/primitives/src/editable/context.ts
@@ -0,0 +1,44 @@
+import type { Ref, ShallowRef } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type EditableActivationMode = 'focus' | 'dblclick' | 'none';
+export type EditableSubmitMode = 'blur' | 'enter' | 'none' | 'both';
+
+export interface EditablePlaceholder {
+  edit: string;
+  preview: string;
+}
+
+export interface EditableContext {
+  /** Current committed value (mirrors v-model). */
+  modelValue: Ref<string>;
+  /** Draft value bound to the input while editing. */
+  inputValue: Ref<string>;
+  /** Whether the component is in edit mode. */
+  isEditing: Ref<boolean>;
+  /** Resolved placeholder per mode. */
+  placeholder: Ref<EditablePlaceholder>;
+  /** Whether `modelValue` is empty. */
+  isEmpty: Ref<boolean>;
+
+  disabled: Ref<boolean>;
+  readonly: Ref<boolean>;
+  maxLength: Ref<number | undefined>;
+  activationMode: Ref<EditableActivationMode>;
+  submitMode: Ref<EditableSubmitMode>;
+  selectOnFocus: Ref<boolean>;
+  autoResize: Ref<boolean>;
+  startWithEditMode: Ref<boolean>;
+
+  /** Reactive ref to the `<EditableInput>` element, used for focus/select. */
+  inputRef: ShallowRef<HTMLInputElement | undefined>;
+
+  edit: () => void;
+  cancel: () => void;
+  submit: () => void;
+}
+
+export const {
+  inject: useEditableContext,
+  provide: provideEditableContext,
+} = useContextFactory<EditableContext>('editable');
diff --git a/vue/primitives/src/editable/index.ts b/vue/primitives/src/editable/index.ts
new file mode 100644
index 0000000..48005ab
--- /dev/null
+++ b/vue/primitives/src/editable/index.ts
@@ -0,0 +1,24 @@
+export { default as EditableRoot } from './EditableRoot.vue';
+export { default as EditableArea } from './EditableArea.vue';
+export { default as EditablePreview } from './EditablePreview.vue';
+export { default as EditableInput } from './EditableInput.vue';
+export { default as EditableEditTrigger } from './EditableEditTrigger.vue';
+export { default as EditableSubmitTrigger } from './EditableSubmitTrigger.vue';
+export { default as EditableCancelTrigger } from './EditableCancelTrigger.vue';
+
+export {
+  provideEditableContext,
+  useEditableContext,
+  type EditableContext,
+  type EditableActivationMode,
+  type EditableSubmitMode,
+  type EditablePlaceholder,
+} from './context';
+
+export type { EditableRootProps, EditableRootEmits } from './EditableRoot.vue';
+export type { EditableAreaProps } from './EditableArea.vue';
+export type { EditablePreviewProps } from './EditablePreview.vue';
+export type { EditableInputProps } from './EditableInput.vue';
+export type { EditableEditTriggerProps } from './EditableEditTrigger.vue';
+export type { EditableSubmitTriggerProps } from './EditableSubmitTrigger.vue';
+export type { EditableCancelTriggerProps } from './EditableCancelTrigger.vue';
diff --git a/vue/primitives/src/env.d.ts b/vue/primitives/src/env.d.ts
index b867229..b9d14ca 100644
--- a/vue/primitives/src/env.d.ts
+++ b/vue/primitives/src/env.d.ts
@@ -1 +1,17 @@
-declare const __DEV__: boolean;
+export {};
+
+declare global {
+  const __DEV__: boolean;
+}
+
+declare module 'vue' {
+  interface ComponentCustomProps {
+    [key: `data${string}`]: unknown;
+  }
+}
+
+declare module 'vue' {
+  interface HTMLAttributes {
+    [key: `data-${string}`]: unknown;
+  }
+}
diff --git a/vue/primitives/src/focus-scope/FocusScope.vue b/vue/primitives/src/focus-scope/FocusScope.vue
index db2a56f..cf9bc1b 100644
--- a/vue/primitives/src/focus-scope/FocusScope.vue
+++ b/vue/primitives/src/focus-scope/FocusScope.vue
@@ -1,12 +1,12 @@
 <script lang="ts">
 import type { PrimitiveProps } from '../primitive';
 
-export type FocusScopeEmits = {
+export interface FocusScopeEmits {
   /** Автофокус при монтировании. Можно предотвратить через `event.preventDefault()`. */
   mountAutoFocus: [event: Event];
   /** Автофокус при размонтировании. Можно предотвратить через `event.preventDefault()`. */
   unmountAutoFocus: [event: Event];
-};
+}
 
 export interface FocusScopeProps extends PrimitiveProps {
   /**
@@ -25,21 +25,18 @@ export interface FocusScopeProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { focus, getActiveElement, getTabbableEdges } from '@robonen/platform/browsers';
 import type { FocusScopeAPI } from './stack';
 import { Primitive } from '../primitive';
+import { focus, getActiveElement, getTabbableEdges } from '@robonen/platform/browsers';
 import { useAutoFocus } from './useAutoFocus';
 import { useFocusTrap } from './useFocusTrap';
-import { useTemplateRef } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
 
-const props = withDefaults(defineProps<FocusScopeProps>(), {
-  loop: false,
-  trapped: false,
-});
+const { loop = false, trapped = false, as } = defineProps<FocusScopeProps>();
 
 const emit = defineEmits<FocusScopeEmits>();
 
-const containerRef = useTemplateRef<HTMLElement>('containerRef');
+const { forwardRef, currentElement: containerRef } = useForwardExpose();
 
 const focusScope: FocusScopeAPI = {
   paused: false,
@@ -47,7 +44,7 @@ const focusScope: FocusScopeAPI = {
   resume() { this.paused = false; },
 };
 
-useFocusTrap(containerRef, focusScope, () => props.trapped);
+useFocusTrap(containerRef, focusScope, () => trapped);
 useAutoFocus(
   containerRef,
   focusScope,
@@ -56,7 +53,7 @@ useAutoFocus(
 );
 
 function handleKeyDown(event: KeyboardEvent) {
-  if (!props.loop && !props.trapped) return;
+  if (!loop && !trapped) return;
   if (focusScope.paused) return;
 
   const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
@@ -72,18 +69,18 @@ function handleKeyDown(event: KeyboardEvent) {
   }
   else if (!event.shiftKey && focusedElement === last) {
     event.preventDefault();
-    if (props.loop) focus(first, { select: true });
+    if (loop) focus(first, { select: true });
   }
   else if (event.shiftKey && focusedElement === first) {
     event.preventDefault();
-    if (props.loop) focus(last, { select: true });
+    if (loop) focus(last, { select: true });
   }
 }
 </script>
 
 <template>
   <Primitive
-    ref="containerRef"
+    :ref="forwardRef"
     tabindex="-1"
     :as="as"
     @keydown="handleKeyDown"
diff --git a/vue/primitives/src/focus-scope/__test__/FocusScope.test.ts b/vue/primitives/src/focus-scope/__test__/FocusScope.test.ts
index bb5588b..ee63c25 100644
--- a/vue/primitives/src/focus-scope/__test__/FocusScope.test.ts
+++ b/vue/primitives/src/focus-scope/__test__/FocusScope.test.ts
@@ -1,5 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import { defineComponent, h, nextTick, ref } from 'vue';
+import { render } from 'vitest-browser-vue';
 import FocusScope from '../FocusScope.vue';
 import { mount } from '@vue/test-utils';
 
@@ -448,3 +450,140 @@ describe('FocusScope nested stacks', () => {
     wrapper.unmount();
   });
 });
+
+function mountInDom<T>(component: T) {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  return render(component, { container: host });
+}
+
+describe('focusScope (browser)', () => {
+  it('autofocuses first tabbable element on mount', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        const open = ref(false);
+        return { open };
+      },
+      render() {
+        return h('div', [
+          h('button', { id: 'outside', onClick: () => { this.open = true; } }, 'Open'),
+          this.open
+            ? h(FocusScope, { trapped: true }, {
+                default: () => [
+                  h('button', { id: 'inside-1' }, 'Inside 1'),
+                  h('button', { id: 'inside-2' }, 'Inside 2'),
+                ],
+              })
+            : null,
+        ]);
+      },
+    });
+
+    const { container } = mountInDom(Wrapper);
+    const outside = container.querySelector<HTMLButtonElement>('#outside')!;
+    outside.focus();
+    expect(document.activeElement).toBe(outside);
+
+    await userEvent.click(outside);
+    await nextTick();
+    await new Promise((r) => {
+      requestAnimationFrame(() => r(null));
+    });
+
+    const inside1 = container.querySelector<HTMLButtonElement>('#inside-1')!;
+    expect(document.activeElement).toBe(inside1);
+  });
+
+  it('traps Tab within scope (loop)', async () => {
+    const Wrapper = defineComponent({
+      render() {
+        return h(FocusScope, { trapped: true, loop: true }, {
+          default: () => [
+            h('button', { id: 'a' }, 'A'),
+            h('button', { id: 'b' }, 'B'),
+            h('button', { id: 'c' }, 'C'),
+          ],
+        });
+      },
+    });
+
+    const { container } = mountInDom(Wrapper);
+    await new Promise((r) => {
+      requestAnimationFrame(() => requestAnimationFrame(() => r(null)));
+    });
+    await nextTick();
+
+    const a = container.querySelector<HTMLButtonElement>('#a')!;
+    const b = container.querySelector<HTMLButtonElement>('#b')!;
+    const c = container.querySelector<HTMLButtonElement>('#c')!;
+
+    if (document.activeElement !== a) a.focus();
+    expect(document.activeElement).toBe(a);
+    await userEvent.keyboard('{Tab}');
+    expect(document.activeElement).toBe(b);
+    await userEvent.keyboard('{Tab}');
+    expect(document.activeElement).toBe(c);
+    await userEvent.keyboard('{Tab}');
+    expect(document.activeElement).toBe(a);
+    await userEvent.keyboard('{Shift>}{Tab}{/Shift}');
+    expect(document.activeElement).toBe(c);
+  });
+
+  it('returns focus to previously focused element on unmount', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        const open = ref(false);
+        return { open };
+      },
+      render() {
+        return h('div', [
+          h('button', {
+            id: 'trigger',
+            onClick: () => { this.open = !this.open; },
+          }, 'Toggle'),
+          this.open
+            ? h(FocusScope, { trapped: true }, {
+                default: () => [h('button', { id: 'inside' }, 'Inside')],
+              })
+            : null,
+        ]);
+      },
+    });
+
+    const { container } = mountInDom(Wrapper);
+    const trigger = container.querySelector<HTMLButtonElement>('#trigger')!;
+    trigger.focus();
+    await userEvent.click(trigger);
+    await new Promise((r) => {
+      requestAnimationFrame(() => r(null));
+    });
+
+    expect(document.activeElement?.id).toBe('inside');
+    await userEvent.click(trigger);
+    await new Promise((r) => {
+      requestAnimationFrame(() => r(null));
+    });
+
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('honors preventDefault on mountAutoFocus', async () => {
+    const Wrapper = defineComponent({
+      render() {
+        return h(FocusScope, {
+          trapped: true,
+          onMountAutoFocus: (e: Event) => e.preventDefault(),
+        }, {
+          default: () => [h('button', { id: 'x' }, 'X')],
+        });
+      },
+    });
+
+    mountInDom(Wrapper);
+    await new Promise((r) => {
+      requestAnimationFrame(() => r(null));
+    });
+
+    expect(document.activeElement?.tagName).not.toBe('BUTTON');
+  });
+});
diff --git a/vue/primitives/src/focus-scope/useAutoFocus.ts b/vue/primitives/src/focus-scope/useAutoFocus.ts
index 3ff1704..780fdb5 100644
--- a/vue/primitives/src/focus-scope/useAutoFocus.ts
+++ b/vue/primitives/src/focus-scope/useAutoFocus.ts
@@ -8,7 +8,7 @@ import {
   getTabbableCandidates,
 } from '@robonen/platform/browsers';
 import type { FocusScopeAPI } from './stack';
-import type { ShallowRef } from 'vue';
+import type { Ref } from 'vue';
 import { createFocusScopesStack } from './stack';
 import { watchPostEffect } from 'vue';
 
@@ -25,7 +25,7 @@ function dispatchCancelableEvent(
 }
 
 export function useAutoFocus(
-  container: Readonly<ShallowRef<HTMLElement | null>>,
+  container: Readonly<Ref<HTMLElement | null | undefined>>,
   focusScope: FocusScopeAPI,
   onMountAutoFocus: (ev: Event) => void,
   onUnmountAutoFocus: (ev: Event) => void,
diff --git a/vue/primitives/src/focus-scope/useFocusTrap.ts b/vue/primitives/src/focus-scope/useFocusTrap.ts
index 28c80c1..cb81dd1 100644
--- a/vue/primitives/src/focus-scope/useFocusTrap.ts
+++ b/vue/primitives/src/focus-scope/useFocusTrap.ts
@@ -1,10 +1,10 @@
-import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
 import { shallowRef, toValue, watchPostEffect } from 'vue';
 import type { FocusScopeAPI } from './stack';
 import { focus } from '@robonen/platform/browsers';
 
 export function useFocusTrap(
-  container: Readonly<ShallowRef<HTMLElement | null>>,
+  container: Readonly<Ref<HTMLElement | null | undefined>>,
   focusScope: FocusScopeAPI,
   trapped: MaybeRefOrGetter<boolean>,
 ) {
diff --git a/vue/primitives/src/hover-card/HoverCardArrow.vue b/vue/primitives/src/hover-card/HoverCardArrow.vue
new file mode 100644
index 0000000..2cde95b
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardArrow.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export interface HoverCardArrowProps extends PopperArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperArrow } from '../popper';
+
+const { width = 10, height = 5 } = defineProps<HoverCardArrowProps>();
+</script>
+
+<template>
+  <PopperArrow :width="width" :height="height">
+    <slot />
+  </PopperArrow>
+</template>
diff --git a/vue/primitives/src/hover-card/HoverCardContent.vue b/vue/primitives/src/hover-card/HoverCardContent.vue
new file mode 100644
index 0000000..e4dd274
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardContent.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { HoverCardContentImplEmits, HoverCardContentImplProps } from './HoverCardContentImpl.vue';
+
+export interface HoverCardContentProps extends HoverCardContentImplProps {
+  /** Keep mounted for CSS exit animations. */
+  forceMount?: boolean;
+}
+
+export type HoverCardContentEmits = HoverCardContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import HoverCardContentImpl from './HoverCardContentImpl.vue';
+import { Presence } from '../presence';
+import { useHoverCardContext } from './context';
+
+const { forceMount = false, ...contentProps } = defineProps<HoverCardContentProps>();
+const emit = defineEmits<HoverCardContentEmits>();
+const ctx = useHoverCardContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <HoverCardContentImpl
+      v-bind="contentProps"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+    >
+      <slot />
+    </HoverCardContentImpl>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/hover-card/HoverCardContentImpl.vue b/vue/primitives/src/hover-card/HoverCardContentImpl.vue
new file mode 100644
index 0000000..9d591ae
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardContentImpl.vue
@@ -0,0 +1,170 @@
+<script lang="ts">
+import type { PopperContentProps } from '../popper';
+import type { PrimitiveProps } from '../primitive';
+
+export interface HoverCardContentImplProps extends PrimitiveProps, Pick<
+  PopperContentProps,
+  | 'side'
+  | 'sideOffset'
+  | 'sideFlip'
+  | 'align'
+  | 'alignOffset'
+  | 'alignFlip'
+  | 'avoidCollisions'
+  | 'collisionBoundary'
+  | 'collisionPadding'
+  | 'arrowPadding'
+  | 'sticky'
+  | 'hideWhenDetached'
+  | 'positionStrategy'
+  | 'updatePositionStrategy'
+> {}
+
+export interface HoverCardContentImplEmits {
+  escapeKeyDown: [event: KeyboardEvent];
+  pointerDownOutside: [event: PointerEvent | MouseEvent];
+  focusOutside: [event: FocusEvent];
+  interactOutside: [event: Event];
+}
+</script>
+
+<script setup lang="ts">
+import { nextTick, onMounted, onScopeDispose, ref, watchEffect } from 'vue';
+import { DismissableLayer } from '../dismissable-layer';
+import { PopperContent } from '../popper';
+import { excludeTouch } from './utils';
+import { useForwardExpose } from '@robonen/vue';
+import { useGraceArea } from '../utils/useGraceArea';
+import { useHoverCardContext } from './context';
+
+const {
+  side = 'bottom',
+  sideOffset = 0,
+  sideFlip = true,
+  align = 'center',
+  alignOffset = 0,
+  alignFlip = true,
+  avoidCollisions = true,
+  collisionBoundary = [],
+  collisionPadding = 0,
+  arrowPadding = 0,
+  sticky = 'partial',
+  hideWhenDetached = false,
+  positionStrategy,
+  updatePositionStrategy,
+  as = 'div',
+} = defineProps<HoverCardContentImplProps>();
+
+const emit = defineEmits<HoverCardContentImplEmits>();
+
+const ctx = useHoverCardContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const { isPointerInTransit, onPointerExit } = useGraceArea(ctx.trigger, currentElement);
+
+watchEffect(() => {
+  ctx.isPointerInTransit.value = isPointerInTransit.value;
+});
+
+onPointerExit(() => ctx.onClose());
+
+const containSelection = ref(false);
+let originalUserSelect: string | undefined;
+let originalWebkitUserSelect: string | undefined;
+
+watchEffect((cleanup) => {
+  if (!containSelection.value) return;
+  const body = document.body;
+  originalUserSelect = body.style.userSelect;
+  originalWebkitUserSelect = body.style.webkitUserSelect;
+  body.style.userSelect = 'none';
+  body.style.webkitUserSelect = 'none';
+  cleanup(() => {
+    body.style.userSelect = originalUserSelect ?? '';
+    body.style.webkitUserSelect = originalWebkitUserSelect ?? '';
+  });
+});
+
+function onPointerUp() {
+  containSelection.value = false;
+  ctx.isPointerDownOnContent.value = false;
+  nextTick(() => {
+    const hasSelection = document.getSelection()?.toString() !== '';
+    if (hasSelection) ctx.hasSelection.value = true;
+  });
+}
+
+function onScrollCapture(event: Event) {
+  const target = event.target as Node | null;
+  if (target && ctx.trigger.value && target.contains(ctx.trigger.value)) ctx.onDismiss();
+}
+
+onMounted(() => {
+  document.addEventListener('pointerup', onPointerUp);
+  globalThis.addEventListener('scroll', onScrollCapture, { capture: true });
+});
+
+onScopeDispose(() => {
+  document.removeEventListener('pointerup', onPointerUp);
+  globalThis.removeEventListener('scroll', onScrollCapture, { capture: true });
+  ctx.hasSelection.value = false;
+  ctx.isPointerDownOnContent.value = false;
+});
+
+function onContentPointerDown(event: PointerEvent) {
+  if ((event.currentTarget as HTMLElement).contains(event.target as HTMLElement)) {
+    containSelection.value = true;
+  }
+  ctx.hasSelection.value = false;
+  ctx.isPointerDownOnContent.value = true;
+}
+
+function onContentPointerEnter(event: PointerEvent) {
+  excludeTouch(() => ctx.onOpen())(event);
+}
+</script>
+
+<template>
+  <DismissableLayer
+    as="template"
+    :disable-outside-pointer-events="false"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside.prevent="emit('focusOutside', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="ctx.onDismiss"
+  >
+    <PopperContent
+      :ref="forwardRef"
+      :as="as"
+      :side="side"
+      :side-offset="sideOffset"
+      :side-flip="sideFlip"
+      :align="align"
+      :align-offset="alignOffset"
+      :align-flip="alignFlip"
+      :avoid-collisions="avoidCollisions"
+      :collision-boundary="collisionBoundary"
+      :collision-padding="collisionPadding"
+      :arrow-padding="arrowPadding"
+      :sticky="sticky"
+      :hide-when-detached="hideWhenDetached"
+      :position-strategy="positionStrategy"
+      :update-position-strategy="updatePositionStrategy"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      :style="{
+        'user-select': containSelection ? 'text' : undefined,
+        '-webkit-user-select': containSelection ? 'text' : undefined,
+        '--hover-card-content-transform-origin': 'var(--popper-transform-origin)',
+        '--hover-card-content-available-width': 'var(--popper-available-width)',
+        '--hover-card-content-available-height': 'var(--popper-available-height)',
+        '--hover-card-trigger-width': 'var(--popper-anchor-width)',
+        '--hover-card-trigger-height': 'var(--popper-anchor-height)',
+      }"
+      @pointerenter="onContentPointerEnter"
+      @pointerdown="onContentPointerDown"
+    >
+      <slot />
+    </PopperContent>
+  </DismissableLayer>
+</template>
diff --git a/vue/primitives/src/hover-card/HoverCardPortal.vue b/vue/primitives/src/hover-card/HoverCardPortal.vue
new file mode 100644
index 0000000..1ca353c
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { TeleportPrimitiveProps } from '../teleport';
+
+export interface HoverCardPortalProps extends TeleportPrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Portal } from '../teleport';
+
+const props = defineProps<HoverCardPortalProps>();
+</script>
+
+<template>
+  <Portal v-bind="props">
+    <slot />
+  </Portal>
+</template>
diff --git a/vue/primitives/src/hover-card/HoverCardRoot.vue b/vue/primitives/src/hover-card/HoverCardRoot.vue
new file mode 100644
index 0000000..09feb72
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardRoot.vue
@@ -0,0 +1,113 @@
+<script lang="ts">
+export interface HoverCardRootProps {
+  /** Controlled open state. Bind with `v-model:open`. */
+  open?: boolean;
+  /** Initial open state for uncontrolled usage. */
+  defaultOpen?: boolean;
+  /** Delay (ms) before the content opens after pointer enters trigger. */
+  openDelay?: number;
+  /** Delay (ms) before the content closes after pointer leaves trigger/content. */
+  closeDelay?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onScopeDispose, ref } from 'vue';
+import { PopperRoot } from '../popper';
+import { provideHoverCardContext } from './context';
+
+const { openDelay = 700, closeDelay = 300, defaultOpen = false } = defineProps<HoverCardRootProps>();
+
+const openModel = defineModel<boolean | undefined>('open', { default: undefined });
+const uncontrolled = ref(defaultOpen);
+
+const open = computed(() => openModel.value ?? uncontrolled.value);
+
+function setOpen(value: boolean) {
+  if (openModel.value === undefined) uncontrolled.value = value;
+  openModel.value = value;
+}
+
+let openTimer = 0;
+let closeTimer = 0;
+
+function clearOpenTimer() {
+  if (openTimer) {
+    clearTimeout(openTimer);
+    openTimer = 0;
+  }
+}
+
+function clearCloseTimer() {
+  if (closeTimer) {
+    clearTimeout(closeTimer);
+    closeTimer = 0;
+  }
+}
+
+const hasSelection = ref(false);
+const isPointerDownOnContent = ref(false);
+const isPointerInTransit = ref(false);
+const trigger = ref<HTMLElement | undefined>();
+
+function onOpen() {
+  clearCloseTimer();
+  if (openDelay <= 0) {
+    setOpen(true);
+    return;
+  }
+  openTimer = globalThis.setTimeout(() => {
+    setOpen(true);
+    openTimer = 0;
+  }, openDelay);
+}
+
+function onClose() {
+  clearOpenTimer();
+  if (hasSelection.value || isPointerDownOnContent.value) return;
+  if (closeDelay <= 0) {
+    setOpen(false);
+    return;
+  }
+  closeTimer = globalThis.setTimeout(() => {
+    setOpen(false);
+    closeTimer = 0;
+  }, closeDelay);
+}
+
+function onDismiss() {
+  clearOpenTimer();
+  clearCloseTimer();
+  setOpen(false);
+}
+
+onScopeDispose(() => {
+  clearOpenTimer();
+  clearCloseTimer();
+});
+
+provideHoverCardContext({
+  open,
+  onOpenChange: setOpen,
+  onOpen,
+  onClose,
+  onDismiss,
+  hasSelection,
+  isPointerDownOnContent,
+  isPointerInTransit,
+  trigger,
+  onTriggerChange(el) {
+    trigger.value = el;
+  },
+});
+
+defineSlots<{
+  default?: (props: { open: boolean }) => any;
+}>();
+</script>
+
+<template>
+  <PopperRoot>
+    <slot :open="open" />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/hover-card/HoverCardTrigger.vue b/vue/primitives/src/hover-card/HoverCardTrigger.vue
new file mode 100644
index 0000000..3c70ca9
--- /dev/null
+++ b/vue/primitives/src/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,49 @@
+<script lang="ts">
+import type { PopperAnchorProps } from '../popper';
+import type { PrimitiveProps } from '../primitive';
+
+export interface HoverCardTriggerProps extends PrimitiveProps, Pick<PopperAnchorProps, 'reference'> {}
+</script>
+
+<script setup lang="ts">
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { excludeTouch } from './utils';
+import { useForwardExpose } from '@robonen/vue';
+import { useHoverCardContext } from './context';
+import { watch } from 'vue';
+
+const { as = 'a', reference } = defineProps<HoverCardTriggerProps>();
+
+const ctx = useHoverCardContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+watch(currentElement, el => ctx.onTriggerChange(el));
+
+function onPointerLeave() {
+  // Defer so grace-area detection can mark the pointer as in transit before
+  // we decide to close.
+  setTimeout(() => {
+    if (!ctx.isPointerInTransit.value && !ctx.open.value) ctx.onClose();
+    else if (!ctx.isPointerInTransit.value) ctx.onClose();
+  }, 0);
+}
+</script>
+
+<template>
+  <PopperAnchor as="template" :reference="reference">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      data-hover-card-trigger
+      data-grace-area-trigger
+      @pointerenter="excludeTouch(ctx.onOpen)($event)"
+      @pointerleave="excludeTouch(onPointerLeave)($event)"
+      @focus="ctx.onOpen()"
+      @blur="ctx.onClose()"
+    >
+      <slot />
+    </Primitive>
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/hover-card/__test__/HoverCard.test.ts b/vue/primitives/src/hover-card/__test__/HoverCard.test.ts
new file mode 100644
index 0000000..cd86ce5
--- /dev/null
+++ b/vue/primitives/src/hover-card/__test__/HoverCard.test.ts
@@ -0,0 +1,176 @@
+import {
+  HoverCardContent,
+  HoverCardRoot,
+  HoverCardTrigger,
+} from '../../index';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+  vi.useRealTimers();
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountHoverCard(options: {
+  open?: boolean;
+  defaultOpen?: boolean;
+  openDelay?: number;
+  closeDelay?: number;
+  onUpdateOpen?: (v: boolean | undefined) => void;
+  forceMount?: boolean;
+} = {}) {
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(
+          HoverCardRoot,
+          {
+            open: options.open,
+            defaultOpen: options.defaultOpen,
+            openDelay: options.openDelay,
+            closeDelay: options.closeDelay,
+            'onUpdate:open': options.onUpdateOpen,
+          },
+          {
+            default: () => [
+              h(HoverCardTrigger, null, { default: () => 'Trigger' }),
+              h(
+                HoverCardContent,
+                { forceMount: options.forceMount },
+                { default: () => 'Card body' },
+              ),
+            ],
+          },
+        );
+    },
+  });
+
+  return track(mount(Wrapper, { attachTo: document.body }));
+}
+
+function getTrigger(): HTMLElement {
+  return document.querySelector('[data-hover-card-trigger]') as HTMLElement;
+}
+
+describe('HoverCard', () => {
+  it('renders trigger with closed state by default', () => {
+    mountHoverCard();
+    const trigger = getTrigger();
+    expect(trigger).toBeTruthy();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+    expect(trigger.hasAttribute('data-grace-area-trigger')).toBe(true);
+  });
+
+  it('opens with defaultOpen and renders content', async () => {
+    mountHoverCard({ defaultOpen: true });
+    await nextTick();
+    expect(getTrigger().getAttribute('data-state')).toBe('open');
+    expect(document.body.textContent).toContain('Card body');
+  });
+
+  it('opens after openDelay on pointer enter and closes after closeDelay on leave', async () => {
+    vi.useFakeTimers();
+    mountHoverCard({ openDelay: 200, closeDelay: 100 });
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new PointerEvent('pointerenter', { pointerType: 'mouse' }));
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+
+    vi.advanceTimersByTime(200);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('open');
+
+    trigger.dispatchEvent(new PointerEvent('pointerleave', { pointerType: 'mouse' }));
+    // pointerleave defers close via setTimeout(0) then closeDelay
+    vi.advanceTimersByTime(0);
+    vi.advanceTimersByTime(100);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('opens immediately on focus and closes on blur after closeDelay', async () => {
+    vi.useFakeTimers();
+    mountHoverCard({ openDelay: 500, closeDelay: 50 });
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new FocusEvent('focus'));
+    // openDelay still applies for focus too (matches reka behavior)
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('open');
+
+    trigger.dispatchEvent(new FocusEvent('blur'));
+    vi.advanceTimersByTime(50);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('ignores touch pointer events', async () => {
+    vi.useFakeTimers();
+    mountHoverCard({ openDelay: 50 });
+    const trigger = getTrigger();
+    trigger.dispatchEvent(new PointerEvent('pointerenter', { pointerType: 'touch' }));
+    vi.advanceTimersByTime(50);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('closes on Escape via dismissable layer', async () => {
+    mountHoverCard({ defaultOpen: true });
+    await nextTick();
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await nextTick();
+    expect(getTrigger().getAttribute('data-state')).toBe('closed');
+  });
+
+  it('supports controlled v-model', async () => {
+    const onUpdate = vi.fn();
+    const Wrapper = defineComponent({
+      props: { open: { type: Boolean, default: false } },
+      emits: ['update:open'],
+      setup(props, { emit }) {
+        return () =>
+          h(
+            HoverCardRoot,
+            {
+              open: props.open,
+              openDelay: 0,
+              closeDelay: 0,
+              'onUpdate:open': (v: boolean | undefined) => {
+                onUpdate(v);
+                emit('update:open', v);
+              },
+            },
+            {
+              default: () => [
+                h(HoverCardTrigger, null, { default: () => 'T' }),
+                h(HoverCardContent, null, { default: () => 'B' }),
+              ],
+            },
+          );
+      },
+    });
+    const wrapper = track(mount(Wrapper, { attachTo: document.body, props: { open: false } }));
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new PointerEvent('pointerenter', { pointerType: 'mouse' }));
+    await nextTick();
+    expect(onUpdate).toHaveBeenCalledWith(true);
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+
+    await wrapper.setProps({ open: true });
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('open');
+  });
+});
diff --git a/vue/primitives/src/hover-card/context.ts b/vue/primitives/src/hover-card/context.ts
new file mode 100644
index 0000000..33aa77a
--- /dev/null
+++ b/vue/primitives/src/hover-card/context.ts
@@ -0,0 +1,20 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface HoverCardContext {
+  open: ComputedRef<boolean>;
+  onOpenChange: (open: boolean) => void;
+  onOpen: () => void;
+  onClose: () => void;
+  onDismiss: () => void;
+  hasSelection: Ref<boolean>;
+  isPointerDownOnContent: Ref<boolean>;
+  isPointerInTransit: Ref<boolean>;
+  trigger: Ref<HTMLElement | undefined>;
+  onTriggerChange: (el: HTMLElement | undefined) => void;
+}
+
+const ctx = useContextFactory<HoverCardContext>('HoverCardContext');
+
+export const provideHoverCardContext = ctx.provide;
+export const useHoverCardContext = ctx.inject;
diff --git a/vue/primitives/src/hover-card/index.ts b/vue/primitives/src/hover-card/index.ts
new file mode 100644
index 0000000..745bc64
--- /dev/null
+++ b/vue/primitives/src/hover-card/index.ts
@@ -0,0 +1,17 @@
+export { default as HoverCardRoot } from './HoverCardRoot.vue';
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue';
+export { default as HoverCardPortal } from './HoverCardPortal.vue';
+export { default as HoverCardContent } from './HoverCardContent.vue';
+export { default as HoverCardArrow } from './HoverCardArrow.vue';
+
+export { useHoverCardContext, type HoverCardContext } from './context';
+
+export type { HoverCardRootProps } from './HoverCardRoot.vue';
+export type { HoverCardTriggerProps } from './HoverCardTrigger.vue';
+export type { HoverCardPortalProps } from './HoverCardPortal.vue';
+export type { HoverCardContentProps, HoverCardContentEmits } from './HoverCardContent.vue';
+export type {
+  HoverCardContentImplProps,
+  HoverCardContentImplEmits,
+} from './HoverCardContentImpl.vue';
+export type { HoverCardArrowProps } from './HoverCardArrow.vue';
diff --git a/vue/primitives/src/hover-card/utils.ts b/vue/primitives/src/hover-card/utils.ts
new file mode 100644
index 0000000..0dab430
--- /dev/null
+++ b/vue/primitives/src/hover-card/utils.ts
@@ -0,0 +1,20 @@
+/** Filter out touch pointer events — they're handled by long-press behavior elsewhere. */
+export function excludeTouch<T extends (event: PointerEvent) => void>(handler: T) {
+  return (event: PointerEvent) => {
+    if (event.pointerType === 'touch') return;
+    handler(event);
+  };
+}
+
+/** Walk a subtree and collect elements that can receive focus via Tab. */
+export function getTabbableNodes(container: HTMLElement): HTMLElement[] {
+  const nodes: HTMLElement[] = [];
+  const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      const el = node as HTMLElement;
+      return el.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    },
+  });
+  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);
+  return nodes;
+}
diff --git a/vue/primitives/src/index.ts b/vue/primitives/src/index.ts
index d3767ee..a5ead48 100644
--- a/vue/primitives/src/index.ts
+++ b/vue/primitives/src/index.ts
@@ -42,3 +42,14 @@ export * from './menu';
 export * from './dropdown-menu';
 export * from './context-menu';
 export * from './menubar';
+
+export * from './select';
+export * from './toast';
+
+export * from './combobox';
+export * from './navigation-menu';
+
+export * from './command';
+
+export * from './calendar';
+export * from './date-picker';
diff --git a/vue/primitives/src/label/Label.vue b/vue/primitives/src/label/Label.vue
new file mode 100644
index 0000000..b17f57c
--- /dev/null
+++ b/vue/primitives/src/label/Label.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface LabelProps extends PrimitiveProps {
+  /** The id of the element the label is associated with (renders as `for`). */
+  for?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+useForwardExpose();
+
+const { as = 'label', for: htmlFor } = defineProps<LabelProps>();
+
+function onMouseDown(event: MouseEvent) {
+  // Prevent text selection when double-clicking a label.
+  if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+}
+</script>
+
+<template>
+  <Primitive :as="as" :for="htmlFor" @mousedown="onMouseDown">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/label/__test__/Label.test.ts b/vue/primitives/src/label/__test__/Label.test.ts
new file mode 100644
index 0000000..166f099
--- /dev/null
+++ b/vue/primitives/src/label/__test__/Label.test.ts
@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+import { Label } from '../index';
+
+describe('Label', () => {
+  it('renders a native <label>', () => {
+    const wrapper = mount(Label, { slots: { default: 'Name' } });
+    expect(wrapper.element.tagName).toBe('LABEL');
+    expect(wrapper.text()).toBe('Name');
+  });
+
+  it('forwards `for` to the `for` attribute', () => {
+    const wrapper = mount(Label, { props: { for: 'my-input' } });
+    expect(wrapper.attributes('for')).toBe('my-input');
+  });
+
+  it('prevents text selection on multi-click', () => {
+    const wrapper = mount(defineComponent({
+      setup: () => () => h(Label, null, { default: () => 'x' }),
+    }));
+    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true, detail: 2 });
+    wrapper.element.dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('does not prevent default on single click', () => {
+    const wrapper = mount(Label);
+    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true, detail: 1 });
+    wrapper.element.dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(false);
+  });
+});
diff --git a/vue/primitives/src/label/index.ts b/vue/primitives/src/label/index.ts
new file mode 100644
index 0000000..ffad78a
--- /dev/null
+++ b/vue/primitives/src/label/index.ts
@@ -0,0 +1,2 @@
+export { default as Label } from './Label.vue';
+export type { LabelProps } from './Label.vue';
diff --git a/vue/primitives/src/listbox/ListboxContent.vue b/vue/primitives/src/listbox/ListboxContent.vue
new file mode 100644
index 0000000..68a425c
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxContent.vue
@@ -0,0 +1,72 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxContentProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { ref } from 'vue';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { useListboxRootContext } from './context';
+
+// Module-scoped to avoid re-allocating on every keydown.
+const NAV_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End']);
+
+const { as = 'div' } = defineProps<ListboxContentProps>();
+
+const ctx = useListboxRootContext();
+const { forwardRef } = useForwardExpose();
+const { CollectionSlot } = useCollectionInjector();
+
+const isClickFocus = ref(false);
+
+function onMouseDown(event: MouseEvent): void {
+  if (event.button !== 0) return;
+  isClickFocus.value = true;
+  setTimeout(() => {
+    isClickFocus.value = false;
+  }, 10);
+}
+
+function onFocus(event: FocusEvent): void {
+  if (isClickFocus.value) return;
+  ctx.onEnter(event);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  const { key } = event;
+  const o = ctx.orientation.value;
+  if ((o === 'vertical' && (key === 'ArrowLeft' || key === 'ArrowRight'))
+    || (o === 'horizontal' && (key === 'ArrowUp' || key === 'ArrowDown'))) return;
+
+  if (key === 'Enter') return ctx.onKeydownEnter(event);
+
+  if (NAV_KEYS.has(key)) {
+    event.preventDefault();
+    if (ctx.focusable.value) ctx.onKeydownNavigation(event);
+    return;
+  }
+  ctx.onKeydownTypeAhead(event);
+}
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="listbox"
+      :tabindex="ctx.focusable.value ? (ctx.highlightedElement.value ? '-1' : '0') : '-1'"
+      :aria-orientation="ctx.orientation.value"
+      :aria-multiselectable="ctx.multiple.value ? true : undefined"
+      :data-orientation="ctx.orientation.value"
+      @mousedown="onMouseDown"
+      @focus="onFocus"
+      @keydown="onKeyDown"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxFilter.vue b/vue/primitives/src/listbox/ListboxFilter.vue
new file mode 100644
index 0000000..da86783
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxFilter.vue
@@ -0,0 +1,95 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxFilterProps extends PrimitiveProps {
+  /** Controlled input value. */
+  modelValue?: string;
+  /** Focus on mount. */
+  autoFocus?: boolean;
+  /** Disable input. */
+  disabled?: boolean;
+}
+
+export interface ListboxFilterEmits {
+  'update:modelValue': [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch, watchSyncEffect } from 'vue';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useListboxRootContext } from './context';
+
+// Module-scoped nav key set: avoids per-keydown array allocation.
+const NAV_KEYS = new Set(['ArrowUp', 'ArrowDown', 'Home', 'End']);
+
+const {
+  as = 'input',
+  modelValue,
+  autoFocus = false,
+  disabled = false,
+} = defineProps<ListboxFilterProps>();
+
+const emit = defineEmits<ListboxFilterEmits>();
+
+const ctx = useListboxRootContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const localValue = ref<string>(modelValue ?? '');
+watch(() => modelValue, (v) => {
+  if (v === undefined || v === localValue.value) return;
+  localValue.value = v;
+});
+
+const isDisabled = computed(() => disabled || ctx.disabled.value);
+const activedescendant = ref<string | undefined>();
+watchSyncEffect(() => {
+  activedescendant.value = ctx.highlightedElement.value?.id;
+});
+
+onMounted(() => {
+  ctx.focusable.value = false;
+  if (!autoFocus) return;
+  setTimeout(() => {
+    (currentElement.value as HTMLInputElement | undefined)?.focus();
+  }, 1);
+});
+
+onUnmounted(() => {
+  ctx.focusable.value = true;
+});
+
+function onInput(event: Event): void {
+  const v = (event.target as HTMLInputElement).value;
+  localValue.value = v;
+  emit('update:modelValue', v);
+  ctx.highlightFirstItem();
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  const { key } = event;
+  if (key === 'Enter') return ctx.onKeydownEnter(event);
+  if (NAV_KEYS.has(key)) {
+    event.preventDefault();
+    ctx.onKeydownNavigation(event);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    type="text"
+    :value="localValue"
+    :disabled="isDisabled || undefined"
+    :aria-disabled="isDisabled ? true : undefined"
+    :aria-activedescendant="activedescendant"
+    :data-disabled="isDisabled ? '' : undefined"
+    @input="onInput"
+    @keydown="onKeyDown"
+  >
+    <slot :model-value="localValue" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxGroup.vue b/vue/primitives/src/listbox/ListboxGroup.vue
new file mode 100644
index 0000000..a41650b
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxGroup.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxGroupProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { provideListboxGroupContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { as = 'div' } = defineProps<ListboxGroupProps>();
+
+const { forwardRef } = useForwardExpose();
+const id = useId(undefined, 'listbox-group').value;
+
+provideListboxGroupContext({ id });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="group"
+    :aria-labelledby="id"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxGroupLabel.vue b/vue/primitives/src/listbox/ListboxGroupLabel.vue
new file mode 100644
index 0000000..82c7304
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxGroupLabel.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxGroupLabelProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useListboxGroupContext } from './context';
+
+const { as = 'div' } = defineProps<ListboxGroupLabelProps>();
+
+const group = useListboxGroupContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="group.id"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxItem.vue b/vue/primitives/src/listbox/ListboxItem.vue
new file mode 100644
index 0000000..7fd2351
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxItem.vue
@@ -0,0 +1,85 @@
+<script lang="ts" generic="T extends ListboxValue = ListboxValue">
+import type { ListboxValue } from './utils';
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxItemProps<U extends ListboxValue = ListboxValue> extends PrimitiveProps {
+  /** The value of the item. */
+  value: U;
+  /** Disable this item. */
+  disabled?: boolean;
+}
+
+export interface ListboxItemEmits<U extends ListboxValue = ListboxValue> {
+  /** Fired before the value change commits. Call `event.preventDefault()` to cancel. */
+  select: [event: CustomEvent<{ originalEvent: Event; value: U }>];
+}
+</script>
+
+<script setup lang="ts" generic="T extends ListboxValue = ListboxValue">
+import { provideListboxItemContext, useListboxRootContext } from './context';
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { as = 'div', value, disabled = false } = defineProps<ListboxItemProps<T>>();
+const emit = defineEmits<ListboxItemEmits<T>>();
+
+const ctx = useListboxRootContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+const id = useId(undefined, 'listbox-item').value;
+const isHighlighted = computed(() => currentElement.value === ctx.highlightedElement.value);
+const isSelected = computed(() => ctx.isSelected(value));
+const isDisabled = computed(() => disabled || ctx.disabled.value);
+
+function handleSelect(originalEvent: Event): void {
+  if (isDisabled.value) return;
+  const detail = { originalEvent, value };
+  const custom = new CustomEvent('listbox.select', { bubbles: true, cancelable: true, detail });
+  emit('select', custom);
+  if (custom.defaultPrevented) return;
+  ctx.onValueChange(value);
+  if (currentElement.value) ctx.changeHighlight(currentElement.value);
+}
+
+function onClick(event: MouseEvent): void {
+  handleSelect(event);
+}
+function onKeyDown(event: KeyboardEvent): void {
+  if (event.key !== ' ') return;
+  event.preventDefault();
+  handleSelect(event);
+}
+function onPointerMove(): void {
+  if (!ctx.highlightOnHover.value) return;
+  if (!currentElement.value || ctx.highlightedElement.value === currentElement.value) return;
+  ctx.changeHighlight(currentElement.value, false, false);
+}
+
+provideListboxItemContext({ isSelected });
+</script>
+
+<template>
+  <CollectionItem :value="value">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :id="id"
+      role="option"
+      :tabindex="ctx.focusable.value ? (isHighlighted ? '0' : '-1') : '-1'"
+      :aria-selected="isSelected"
+      :data-state="isSelected ? 'checked' : 'unchecked'"
+      :data-highlighted="isHighlighted ? '' : undefined"
+      :data-disabled="isDisabled ? '' : undefined"
+      :disabled="isDisabled || undefined"
+      @click="onClick"
+      @keydown="onKeyDown"
+      @pointermove="onPointerMove"
+    >
+      <slot :is-selected="isSelected" :is-highlighted="isHighlighted" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxItemIndicator.vue b/vue/primitives/src/listbox/ListboxItemIndicator.vue
new file mode 100644
index 0000000..c0f065f
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxItemIndicator.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxItemIndicatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useListboxItemContext } from './context';
+
+const { as = 'span' } = defineProps<ListboxItemIndicatorProps>();
+
+const item = useListboxItemContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    v-if="item.isSelected.value"
+    :ref="forwardRef"
+    :as="as"
+    aria-hidden="true"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/listbox/ListboxRoot.vue b/vue/primitives/src/listbox/ListboxRoot.vue
new file mode 100644
index 0000000..bf8d80f
--- /dev/null
+++ b/vue/primitives/src/listbox/ListboxRoot.vue
@@ -0,0 +1,299 @@
+<script lang="ts" generic="T extends ListboxValue = ListboxValue">
+import type { ListboxDirection, ListboxOrientation, ListboxSelectionBehavior } from './context';
+import type { ListboxValue } from './utils';
+import type { PrimitiveProps } from '../primitive';
+
+export interface ListboxRootProps<U extends ListboxValue = ListboxValue> extends PrimitiveProps {
+  /** Controlled value. Use `v-model`. */
+  modelValue?: U | U[];
+  /** Uncontrolled initial value. */
+  defaultValue?: U | U[];
+  /** Allow multiple selection. */
+  multiple?: boolean;
+  /** Navigation orientation. @default 'vertical' */
+  orientation?: ListboxOrientation;
+  /** Reading direction. Falls back to `ConfigProvider`. */
+  dir?: ListboxDirection;
+  /** Disable the whole listbox. */
+  disabled?: boolean;
+  /** How selection behaves in `multiple` mode. @default 'toggle' */
+  selectionBehavior?: ListboxSelectionBehavior;
+  /** Highlight items on hover. */
+  highlightOnHover?: boolean;
+  /** Compare objects by key or custom comparator. */
+  by?: string | ((a: U, b: U) => boolean);
+}
+
+export interface ListboxRootEmits<U extends ListboxValue = ListboxValue> {
+  'update:modelValue': [value: U | U[] | undefined];
+  highlight: [payload: { ref: HTMLElement; value: U } | undefined];
+  entryFocus: [event: CustomEvent];
+  leave: [event: Event];
+}
+</script>
+
+<script setup lang="ts" generic="T extends ListboxValue = ListboxValue">
+import { compare, includes } from './utils';
+import { computed, nextTick, ref, shallowRef, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { Primitive } from '../primitive';
+import type { Ref } from 'vue';
+import { provideListboxRootContext } from './context';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  as = 'div',
+  modelValue,
+  defaultValue,
+  multiple = false,
+  orientation = 'vertical',
+  dir,
+  disabled = false,
+  selectionBehavior = 'toggle',
+  highlightOnHover = false,
+  by,
+} = defineProps<ListboxRootProps<T>>();
+
+const emit = defineEmits<ListboxRootEmits<T>>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const config = useConfig();
+const direction = computed(() => dir ?? config.dir.value);
+
+const initial = (modelValue ?? defaultValue) as T | T[] | undefined;
+// shallowRef: value is always replaced on commit, never mutated in place.
+const localValue = shallowRef<T | T[] | undefined>(
+  multiple
+    ? (Array.isArray(initial) ? initial.slice() : (initial === undefined ? [] : [initial]))
+    : (Array.isArray(initial) ? initial[0] : initial),
+) as Ref<T | T[] | undefined>;
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  const cur = localValue.value;
+  if (Array.isArray(v)) {
+    if (Array.isArray(cur) && v.length === cur.length) {
+      let equal = true;
+      for (let i = 0; i < v.length; i++) {
+        if (v[i] !== cur[i]) {
+          equal = false;
+          break;
+        }
+      }
+      if (equal) return;
+    }
+    localValue.value = v.slice();
+  }
+  else if (v !== cur) {
+    localValue.value = v as any;
+  }
+});
+
+const highlightedElement = shallowRef<HTMLElement>();
+const previousElement = shallowRef<HTMLElement>();
+const focusable = ref(true);
+const isUserAction = ref(false);
+
+const { getItems } = useCollectionProvider();
+
+// Inlined to avoid two intermediate array allocations (.map + .filter) and two closures
+// on every call. Called in type-ahead / navigation / enter, which are hot paths.
+function enabledEls(): HTMLElement[] {
+  const items = getItems(true);
+  const out: HTMLElement[] = [];
+  for (let i = 0; i < items.length; i++) {
+    const el = items[i]!.ref;
+    if (el.dataset.disabled !== '') out.push(el);
+  }
+  return out;
+}
+
+function isSelected(value: T): boolean {
+  return includes(localValue.value, value, by);
+}
+
+function commit(next: T | T[] | undefined): void {
+  localValue.value = next;
+  emit('update:modelValue', next);
+}
+
+function onValueChange(val: T): void {
+  isUserAction.value = true;
+  if (multiple) {
+    const cur = Array.isArray(localValue.value) ? [...(localValue.value as T[])] : [];
+    if (selectionBehavior === 'toggle') {
+      const idx = cur.findIndex(i => compare(i, val, by));
+      if (idx === -1) cur.push(val);
+      else cur.splice(idx, 1);
+      commit(cur);
+    }
+    else {
+      commit([val]);
+    }
+  }
+  else if (selectionBehavior === 'toggle') {
+    commit(compare(localValue.value as T | undefined, val, by) ? undefined : val);
+  }
+  else {
+    commit(val);
+  }
+  // Reset after the commit-driven watcher flush rather than via a real timer
+  // (avoids allocating a timer handle and the 1ms latency).
+  nextTick(() => {
+    isUserAction.value = false;
+  });
+}
+
+function changeHighlight(el: HTMLElement | undefined, scrollIntoView = true, focus?: boolean): void {
+  if (!el) return;
+  highlightedElement.value = el;
+  if (focus ?? focusable.value) el.focus({ preventScroll: !scrollIntoView });
+  if (scrollIntoView) el.scrollIntoView({ block: 'nearest' });
+  const hit = getItems(true).find(i => i.ref === el);
+  emit('highlight', hit as any);
+}
+
+function onKeydownEnter(event: KeyboardEvent): void {
+  const el = highlightedElement.value;
+  if (!el || !el.isConnected) return;
+  event.preventDefault();
+  event.stopPropagation();
+  el.click();
+}
+
+function onKeydownNavigation(event: KeyboardEvent): void {
+  const intent = rovingKeyToAction(event, { orientation, dir: direction.value, loop: false });
+  if (!intent) return;
+  const els = enabledEls();
+  if (els.length === 0) return;
+
+  if (intent.absolute === 'home') return changeHighlight(els[0]);
+  if (intent.absolute === 'end') return changeHighlight(els[els.length - 1]);
+
+  const current = highlightedElement.value;
+  const idx = current ? els.indexOf(current) : -1;
+  if (idx === -1) {
+    changeHighlight(intent.delta < 0 ? els[els.length - 1] : els[0]);
+    return;
+  }
+  const next = resolveNextIndex(idx, intent.delta, els.length, false);
+  changeHighlight(els[next]);
+}
+
+function onKeydownTypeAhead(event: KeyboardEvent): void {
+  if (!focusable.value) return;
+  if (event.altKey || event.ctrlKey || event.metaKey) {
+    if (event.key.toLowerCase() === 'a' && multiple) {
+      const all = getItems(true).map(i => i.value) as T[];
+      commit(all);
+      event.preventDefault();
+      const last = enabledEls().at(-1);
+      if (last) changeHighlight(last);
+    }
+    return;
+  }
+  if (event.key.length !== 1) return;
+  const letter = event.key.toLowerCase();
+  const els = enabledEls();
+  const len = els.length;
+  if (len === 0) return;
+  const start = highlightedElement.value ? els.indexOf(highlightedElement.value) + 1 : 0;
+  for (let i = 0; i < len; i++) {
+    const el = els[(start + i) % len]!;
+    const text = el.textContent;
+    if (text && text.trim().toLowerCase().startsWith(letter)) {
+      changeHighlight(el);
+      return;
+    }
+  }
+}
+
+function highlightFirstItem(): void {
+  nextTick(() => {
+    const el = enabledEls()[0];
+    if (el) changeHighlight(el);
+  });
+}
+
+function onLeave(event: Event): void {
+  const el = highlightedElement.value;
+  if (el?.isConnected) previousElement.value = el;
+  highlightedElement.value = undefined;
+  emit('leave', event);
+}
+
+function onEnter(event: Event): void {
+  const entryFocusEvent = new CustomEvent('listbox.entryFocus', { bubbles: false, cancelable: true });
+  (event.currentTarget as HTMLElement | null)?.dispatchEvent(entryFocusEvent);
+  emit('entryFocus', entryFocusEvent);
+  if (entryFocusEvent.defaultPrevented) return;
+  if (previousElement.value?.isConnected) {
+    changeHighlight(previousElement.value);
+    return;
+  }
+  const els = enabledEls();
+  for (let i = 0; i < els.length; i++) {
+    if (els[i]!.dataset.state === 'checked') return changeHighlight(els[i]);
+  }
+  changeHighlight(els[0]);
+}
+
+async function onFocusOut(event: FocusEvent): Promise<void> {
+  const target = (event.relatedTarget || event.target) as HTMLElement | null;
+  await nextTick();
+  if (highlightedElement.value && currentElement.value && !currentElement.value.contains(target)) {
+    onLeave(event);
+  }
+}
+
+// localValue is always replaced on commit — no need for deep traversal.
+watch(localValue, () => {
+  if (isUserAction.value) return;
+  nextTick(() => {
+    const els = enabledEls();
+    for (let i = 0; i < els.length; i++) {
+      if (els[i]!.dataset.state === 'checked') {
+        changeHighlight(els[i], true, false);
+        return;
+      }
+    }
+  });
+}, { immediate: true });
+
+provideListboxRootContext({
+  modelValue: localValue,
+  multiple: toRef(() => multiple),
+  orientation: toRef(() => orientation),
+  direction,
+  disabled: toRef(() => disabled),
+  highlightOnHover: toRef(() => highlightOnHover),
+  selectionBehavior: toRef(() => selectionBehavior),
+  highlightedElement,
+  focusable,
+  by,
+  onValueChange,
+  isSelected,
+  changeHighlight,
+  onKeydownNavigation,
+  onKeydownEnter,
+  onKeydownTypeAhead,
+  highlightFirstItem,
+  onEnter,
+  onLeave,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :dir="direction"
+    :data-disabled="disabled ? '' : undefined"
+    @pointerleave="onLeave"
+    @focusout="onFocusOut"
+  >
+    <slot :model-value="localValue" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/listbox/__test__/Listbox.test.ts b/vue/primitives/src/listbox/__test__/Listbox.test.ts
new file mode 100644
index 0000000..77048d1
--- /dev/null
+++ b/vue/primitives/src/listbox/__test__/Listbox.test.ts
@@ -0,0 +1,232 @@
+import {
+  ListboxContent,
+  ListboxFilter,
+  ListboxGroup,
+  ListboxGroupLabel,
+  ListboxItem,
+  ListboxItemIndicator,
+  ListboxRoot,
+
+} from '../index';
+import type { ListboxValue } from '../index';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createListbox(
+  rootProps: Record<string, unknown> = {},
+  options: string[] = ['Apple', 'Banana', 'Cherry'],
+) {
+  return mount(
+    defineComponent({
+      setup() {
+        const value = ref(rootProps.modelValue ?? rootProps.defaultValue);
+        return () => h(
+          ListboxRoot,
+          {
+            modelValue: value.value as ListboxValue | ListboxValue[] | undefined,
+            'onUpdate:modelValue': (v: unknown) => (value.value = v),
+            ...rootProps,
+          },
+          {
+            default: () => h(ListboxContent, null, {
+              default: () => options.map(opt =>
+                h(ListboxItem, { key: opt, value: opt }, {
+                  default: () => [
+                    opt,
+                    h(ListboxItemIndicator, null, { default: () => '✓' }),
+                  ],
+                }),
+              ),
+            }),
+          },
+        );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('Listbox', () => {
+  it('renders role=listbox with options', () => {
+    const w = createListbox();
+    const list = w.find('[role="listbox"]');
+    expect(list.exists()).toBe(true);
+    expect(w.findAll('[role="option"]')).toHaveLength(3);
+    w.unmount();
+  });
+
+  it('click selects an item (single)', async () => {
+    const w = createListbox();
+    const items = w.findAll('[role="option"]');
+    await items[1]!.trigger('click');
+    await nextTick();
+    expect(items[1]!.attributes('aria-selected')).toBe('true');
+    expect(items[1]!.attributes('data-state')).toBe('checked');
+    w.unmount();
+  });
+
+  it('toggle deselects on second click in single mode', async () => {
+    const w = createListbox();
+    const items = w.findAll('[role="option"]');
+    await items[0]!.trigger('click');
+    await items[0]!.trigger('click');
+    await nextTick();
+    expect(items[0]!.attributes('data-state')).toBe('unchecked');
+    w.unmount();
+  });
+
+  it('multiple selection accumulates toggles', async () => {
+    const w = createListbox({ multiple: true });
+    const items = w.findAll('[role="option"]');
+    await items[0]!.trigger('click');
+    await items[2]!.trigger('click');
+    await nextTick();
+    expect(items[0]!.attributes('data-state')).toBe('checked');
+    expect(items[2]!.attributes('data-state')).toBe('checked');
+    expect(items[1]!.attributes('data-state')).toBe('unchecked');
+    w.unmount();
+  });
+
+  it('multiple selectionBehavior=replace keeps a single value in the array', async () => {
+    const w = createListbox({ multiple: true, selectionBehavior: 'replace' });
+    const items = w.findAll('[role="option"]');
+    await items[0]!.trigger('click');
+    await items[1]!.trigger('click');
+    await nextTick();
+    expect(items[0]!.attributes('data-state')).toBe('unchecked');
+    expect(items[1]!.attributes('data-state')).toBe('checked');
+    w.unmount();
+  });
+
+  it('ArrowDown on listbox highlights next enabled item', async () => {
+    const w = createListbox();
+    const list = w.find('[role="listbox"]').element as HTMLElement;
+    list.focus();
+    // entry focus highlights first item
+    await nextTick();
+    press(list, 'ArrowDown');
+    await nextTick();
+    const items = w.findAll('[role="option"]');
+    expect(items[1]!.attributes('data-highlighted')).toBe('');
+    w.unmount();
+  });
+
+  it('Home/End jump to first/last item', async () => {
+    const w = createListbox();
+    const list = w.find('[role="listbox"]').element as HTMLElement;
+    list.focus();
+    await nextTick();
+    press(list, 'End');
+    await nextTick();
+    const items = w.findAll('[role="option"]');
+    expect(items[2]!.attributes('data-highlighted')).toBe('');
+    press(list, 'Home');
+    await nextTick();
+    expect(items[0]!.attributes('data-highlighted')).toBe('');
+    w.unmount();
+  });
+
+  it('Enter activates the highlighted item', async () => {
+    const w = createListbox();
+    const list = w.find('[role="listbox"]').element as HTMLElement;
+    list.focus();
+    await nextTick();
+    press(list, 'End');
+    await nextTick();
+    press(list, 'Enter');
+    await nextTick();
+    const items = w.findAll('[role="option"]');
+    expect(items[2]!.attributes('data-state')).toBe('checked');
+    w.unmount();
+  });
+
+  it('typeahead jumps to first matching item by letter', async () => {
+    const w = createListbox();
+    const list = w.find('[role="listbox"]').element as HTMLElement;
+    list.focus();
+    await nextTick();
+    press(list, 'c');
+    await nextTick();
+    const items = w.findAll('[role="option"]');
+    expect(items[2]!.attributes('data-highlighted')).toBe('');
+    w.unmount();
+  });
+
+  it('ItemIndicator renders only for selected items', async () => {
+    const w = createListbox({ defaultValue: 'Banana' });
+    await nextTick();
+    const items = w.findAll('[role="option"]');
+    expect(items[0]!.text()).not.toContain('✓');
+    expect(items[1]!.text()).toContain('✓');
+    w.unmount();
+  });
+
+  it('disabled root prevents selection', async () => {
+    const w = createListbox({ disabled: true });
+    const items = w.findAll('[role="option"]');
+    await items[0]!.trigger('click');
+    await nextTick();
+    expect(items[0]!.attributes('data-state')).toBe('unchecked');
+    w.unmount();
+  });
+
+  it('group exposes role=group with aria-labelledby', () => {
+    const w = mount(
+      defineComponent({
+        setup: () => () =>
+          h(ListboxRoot, null, {
+            default: () => h(ListboxContent, null, {
+              default: () => h(ListboxGroup, null, {
+                default: () => [
+                  h(ListboxGroupLabel, null, { default: () => 'Fruits' }),
+                  h(ListboxItem, { value: 'x' }, { default: () => 'x' }),
+                ],
+              }),
+            }),
+          }),
+      }),
+      { attachTo: document.body },
+    );
+    const g = w.find('[role="group"]');
+    expect(g.exists()).toBe(true);
+    const labelledBy = g.attributes('aria-labelledby')!;
+    expect(w.find(`#${labelledBy}`).text()).toBe('Fruits');
+    w.unmount();
+  });
+
+  it('filter disables intrinsic focusability and mirrors highlight via aria-activedescendant', async () => {
+    const w = mount(
+      defineComponent({
+        setup() {
+          const q = ref('');
+          return () => h(ListboxRoot, null, {
+            default: () => [
+              h(ListboxFilter, {
+                modelValue: q.value,
+                'onUpdate:modelValue': (v: string) => (q.value = v),
+              }),
+              h(ListboxContent, null, {
+                default: () => ['a', 'b'].map(v =>
+                  h(ListboxItem, { key: v, value: v }, { default: () => v }),
+                ),
+              }),
+            ],
+          });
+        },
+      }),
+      { attachTo: document.body },
+    );
+    const input = w.find('input').element as HTMLInputElement;
+    input.focus();
+    press(input, 'ArrowDown');
+    await nextTick();
+    const firstItem = w.findAll('[role="option"]')[0]!;
+    expect(input.getAttribute('aria-activedescendant')).toBe(firstItem.attributes('id'));
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/listbox/context.ts b/vue/primitives/src/listbox/context.ts
new file mode 100644
index 0000000..7234efc
--- /dev/null
+++ b/vue/primitives/src/listbox/context.ts
@@ -0,0 +1,53 @@
+import type { Ref, ShallowRef } from 'vue';
+import type { ListboxValue } from './utils';
+import { useContextFactory } from '@robonen/vue';
+
+export type ListboxOrientation = 'vertical' | 'horizontal';
+export type ListboxDirection = 'ltr' | 'rtl';
+export type ListboxSelectionBehavior = 'toggle' | 'replace';
+
+export interface ListboxRootContext<T extends ListboxValue = ListboxValue> {
+  modelValue: Ref<T | T[] | undefined>;
+  multiple: Ref<boolean>;
+  orientation: Ref<ListboxOrientation>;
+  direction: Ref<ListboxDirection>;
+  disabled: Ref<boolean>;
+  highlightOnHover: Ref<boolean>;
+  selectionBehavior: Ref<ListboxSelectionBehavior>;
+  highlightedElement: ShallowRef<HTMLElement | undefined>;
+  focusable: Ref<boolean>;
+  by?: string | ((a: T, b: T) => boolean);
+
+  onValueChange: (value: T) => void;
+  isSelected: (value: T) => boolean;
+  changeHighlight: (el: HTMLElement | undefined, scrollIntoView?: boolean, focus?: boolean) => void;
+  onKeydownNavigation: (event: KeyboardEvent) => void;
+  onKeydownEnter: (event: KeyboardEvent) => void;
+  onKeydownTypeAhead: (event: KeyboardEvent) => void;
+  highlightFirstItem: () => void;
+  onEnter: (event: Event) => void;
+  onLeave: (event: Event) => void;
+}
+
+export interface ListboxItemContext {
+  isSelected: Ref<boolean>;
+}
+
+export interface ListboxGroupContext {
+  id: string;
+}
+
+export const {
+  inject: useListboxRootContext,
+  provide: provideListboxRootContext,
+} = useContextFactory<ListboxRootContext<any>>('listbox');
+
+export const {
+  inject: useListboxItemContext,
+  provide: provideListboxItemContext,
+} = useContextFactory<ListboxItemContext>('listbox-item');
+
+export const {
+  inject: useListboxGroupContext,
+  provide: provideListboxGroupContext,
+} = useContextFactory<ListboxGroupContext>('listbox-group');
diff --git a/vue/primitives/src/listbox/index.ts b/vue/primitives/src/listbox/index.ts
new file mode 100644
index 0000000..c0a5981
--- /dev/null
+++ b/vue/primitives/src/listbox/index.ts
@@ -0,0 +1,32 @@
+export { default as ListboxRoot } from './ListboxRoot.vue';
+export { default as ListboxContent } from './ListboxContent.vue';
+export { default as ListboxItem } from './ListboxItem.vue';
+export { default as ListboxItemIndicator } from './ListboxItemIndicator.vue';
+export { default as ListboxGroup } from './ListboxGroup.vue';
+export { default as ListboxGroupLabel } from './ListboxGroupLabel.vue';
+export { default as ListboxFilter } from './ListboxFilter.vue';
+
+export {
+  provideListboxRootContext,
+  useListboxRootContext,
+  provideListboxItemContext,
+  useListboxItemContext,
+  provideListboxGroupContext,
+  useListboxGroupContext,
+  type ListboxRootContext,
+  type ListboxItemContext,
+  type ListboxGroupContext,
+  type ListboxOrientation,
+  type ListboxDirection,
+  type ListboxSelectionBehavior,
+} from './context';
+
+export { compare as compareListboxValues, includes as includesListboxValue, type ListboxValue } from './utils';
+
+export type { ListboxRootProps, ListboxRootEmits } from './ListboxRoot.vue';
+export type { ListboxContentProps } from './ListboxContent.vue';
+export type { ListboxItemProps, ListboxItemEmits } from './ListboxItem.vue';
+export type { ListboxItemIndicatorProps } from './ListboxItemIndicator.vue';
+export type { ListboxGroupProps } from './ListboxGroup.vue';
+export type { ListboxGroupLabelProps } from './ListboxGroupLabel.vue';
+export type { ListboxFilterProps, ListboxFilterEmits } from './ListboxFilter.vue';
diff --git a/vue/primitives/src/listbox/utils.ts b/vue/primitives/src/listbox/utils.ts
new file mode 100644
index 0000000..d708357
--- /dev/null
+++ b/vue/primitives/src/listbox/utils.ts
@@ -0,0 +1,27 @@
+export type ListboxValue = string | number | boolean | Record<string, unknown>;
+
+export function compare<T>(
+  a: T | undefined,
+  b: T | undefined,
+  by?: string | ((a: T, b: T) => boolean),
+): boolean {
+  if (a === undefined || b === undefined) return false;
+  if (by === undefined) return a === b;
+  if (typeof by === 'function') return by(a as T, b as T);
+  // string key lookup
+  return (a as any)?.[by] === (b as any)?.[by];
+}
+
+export function includes<T>(
+  value: T | T[] | undefined,
+  current: T,
+  by?: string | ((a: T, b: T) => boolean),
+): boolean {
+  if (value === undefined) return false;
+  if (!Array.isArray(value)) return compare(value, current, by);
+  // manual loop avoids the per-call closure allocation of .some()
+  for (const v of value) {
+    if (compare(v, current, by)) return true;
+  }
+  return false;
+}
diff --git a/vue/primitives/src/menu/MenuGroup.vue b/vue/primitives/src/menu/MenuGroup.vue
index f6a5ca9..c7e636b 100644
--- a/vue/primitives/src/menu/MenuGroup.vue
+++ b/vue/primitives/src/menu/MenuGroup.vue
@@ -9,13 +9,13 @@ import { useId } from '../config-provider';
 import { Primitive } from '../primitive';
 import { provideMenuGroupContext } from './context';
 
-const { as = 'div', asChild } = defineProps<MenuGroupProps>();
+const { as = 'div' } = defineProps<MenuGroupProps>();
 const id = useId(undefined, 'menu-group');
 provideMenuGroupContext({ id: id.value });
 </script>
 
 <template>
-  <Primitive :as="as" :as-child="asChild" role="group" :id="id">
+  <Primitive :as="as" role="group" :id="id">
     <slot />
   </Primitive>
 </template>
diff --git a/vue/primitives/src/menu/MenuItemImpl.vue b/vue/primitives/src/menu/MenuItemImpl.vue
index 9249ad7..61383c7 100644
--- a/vue/primitives/src/menu/MenuItemImpl.vue
+++ b/vue/primitives/src/menu/MenuItemImpl.vue
@@ -21,7 +21,6 @@ const {
   disabled = false,
   textValue: textValueProp,
   as = 'div',
-  asChild,
 } = defineProps<MenuItemImplProps>();
 
 const emit = defineEmits<MenuItemImplEmits>();
@@ -71,11 +70,10 @@ function handleKeyDown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <RovingFocusItem as-child :focusable="!disabled" :active="isHighlighted">
+  <RovingFocusItem :focusable="!disabled" :active="isHighlighted">
     <Primitive
       :ref="(el: unknown) => { itemRef = el as HTMLElement | null }"
       :as="as"
-      :as-child="asChild"
       role="menuitem"
       data-primitives-menu-item=""
       :data-primitive-menu-item-text-value="textValue"
diff --git a/vue/primitives/src/menu/MenuItemIndicator.vue b/vue/primitives/src/menu/MenuItemIndicator.vue
index bcab342..e92c4d0 100644
--- a/vue/primitives/src/menu/MenuItemIndicator.vue
+++ b/vue/primitives/src/menu/MenuItemIndicator.vue
@@ -14,7 +14,7 @@ import { Primitive } from '../primitive';
 import { useMenuItemIndicatorContext } from './context';
 import { getCheckedState, isIndeterminate } from './utils';
 
-const { as = 'span', asChild, forceMount = false } = defineProps<MenuItemIndicatorProps>();
+const { as = 'span', forceMount = false } = defineProps<MenuItemIndicatorProps>();
 const ctx = useMenuItemIndicatorContext();
 const isPresent = computed(() => ctx.checkedState.value === true || isIndeterminate(ctx.checkedState.value));
 </script>
@@ -23,7 +23,6 @@ const isPresent = computed(() => ctx.checkedState.value === true || isIndetermin
   <Presence :present="forceMount || isPresent">
     <Primitive
       :as="as"
-      :as-child="asChild"
       :data-state="getCheckedState(ctx.checkedState.value)"
     >
       <slot />
diff --git a/vue/primitives/src/menu/MenuLabel.vue b/vue/primitives/src/menu/MenuLabel.vue
index 994cdb7..cefc532 100644
--- a/vue/primitives/src/menu/MenuLabel.vue
+++ b/vue/primitives/src/menu/MenuLabel.vue
@@ -7,11 +7,11 @@ export interface MenuLabelProps extends PrimitiveProps {}
 <script setup lang="ts">
 import { Primitive } from '../primitive';
 
-const { as = 'div', asChild } = defineProps<MenuLabelProps>();
+const { as = 'div' } = defineProps<MenuLabelProps>();
 </script>
 
 <template>
-  <Primitive :as="as" :as-child="asChild">
+  <Primitive :as="as">
     <slot />
   </Primitive>
 </template>
diff --git a/vue/primitives/src/menu/MenuRadioGroup.vue b/vue/primitives/src/menu/MenuRadioGroup.vue
index e1cc51a..07b5793 100644
--- a/vue/primitives/src/menu/MenuRadioGroup.vue
+++ b/vue/primitives/src/menu/MenuRadioGroup.vue
@@ -16,7 +16,7 @@ import { computed, ref } from 'vue';
 import { Primitive } from '../primitive';
 import { provideMenuRadioGroupContext } from './context';
 
-const { modelValue, defaultValue, as = 'div', asChild } = defineProps<MenuRadioGroupProps>();
+const { modelValue, defaultValue, as = 'div' } = defineProps<MenuRadioGroupProps>();
 const emit = defineEmits<MenuRadioGroupEmits>();
 
 const local = ref(defaultValue);
@@ -32,7 +32,7 @@ provideMenuRadioGroupContext({
 </script>
 
 <template>
-  <Primitive :as="as" :as-child="asChild" role="group">
+  <Primitive :as="as" role="group">
     <slot />
   </Primitive>
 </template>
diff --git a/vue/primitives/src/menu/MenuSeparator.vue b/vue/primitives/src/menu/MenuSeparator.vue
index 9538de3..ef40b82 100644
--- a/vue/primitives/src/menu/MenuSeparator.vue
+++ b/vue/primitives/src/menu/MenuSeparator.vue
@@ -7,11 +7,11 @@ export interface MenuSeparatorProps extends PrimitiveProps {}
 <script setup lang="ts">
 import { Primitive } from '../primitive';
 
-const { as = 'div', asChild } = defineProps<MenuSeparatorProps>();
+const { as = 'div' } = defineProps<MenuSeparatorProps>();
 </script>
 
 <template>
-  <Primitive :as="as" :as-child="asChild" role="separator" aria-orientation="horizontal">
+  <Primitive :as="as" role="separator" aria-orientation="horizontal">
     <slot />
   </Primitive>
 </template>
diff --git a/vue/primitives/src/menu/MenuSub.vue b/vue/primitives/src/menu/MenuSub.vue
index fdaaa9d..5f7c732 100644
--- a/vue/primitives/src/menu/MenuSub.vue
+++ b/vue/primitives/src/menu/MenuSub.vue
@@ -26,7 +26,7 @@ const triggerId = useId(undefined, 'menu-sub-trigger');
 provideMenuContext({
   open: openRef,
   onOpenChange: v => emit('update:open', v),
-  content: shallowRef(null),
+  content: shallowRef<HTMLElement | null>(null),
   onContentChange: () => {},
 });
 
diff --git a/vue/primitives/src/menu/MenuSubTrigger.vue b/vue/primitives/src/menu/MenuSubTrigger.vue
index 85deebe..96ab83f 100644
--- a/vue/primitives/src/menu/MenuSubTrigger.vue
+++ b/vue/primitives/src/menu/MenuSubTrigger.vue
@@ -8,7 +8,7 @@ export interface MenuSubTriggerProps extends MenuItemImplProps {}
 import { PopperAnchor } from '../popper';
 import { useMenuContentContext, useMenuContext, useMenuRootContext, useMenuSubContext } from './context';
 import MenuItemImpl from './MenuItemImpl.vue';
-import { SUB_CLOSE_KEYS, SUB_OPEN_KEYS, getOpenState, isPointerInGraceArea } from './utils';
+import { SUB_CLOSE_KEYS, SUB_OPEN_KEYS, getOpenState } from './utils';
 
 const props = defineProps<MenuSubTriggerProps>();
 
@@ -62,7 +62,7 @@ function handleKeyDown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <PopperAnchor as-child>
+  <PopperAnchor>
     <MenuItemImpl
       v-bind="props"
       :id="subCtx.triggerId.value"
diff --git a/vue/primitives/src/menubar/MenubarRoot.vue b/vue/primitives/src/menubar/MenubarRoot.vue
index 40ed22a..f6dec19 100644
--- a/vue/primitives/src/menubar/MenubarRoot.vue
+++ b/vue/primitives/src/menubar/MenubarRoot.vue
@@ -14,12 +14,13 @@ export interface MenubarRootEmits {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, toRef } from 'vue';
+import { computed, onScopeDispose, ref, toRef } from 'vue';
 
-import { useConfig } from '../config-provider';
-import { useForwardExpose } from '@robonen/vue';
 import { Primitive } from '../primitive';
 import { provideMenubarRootContext } from './context';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
 
 const {
   modelValue,
@@ -27,7 +28,6 @@ const {
   dir: dirProp,
   loop = true,
   as = 'div',
-  asChild,
 } = defineProps<MenubarRootProps>();
 const emit = defineEmits<MenubarRootEmits>();
 
@@ -35,6 +35,8 @@ const config = useConfig();
 const dirRef = toRef(() => dirProp ?? config.dir.value);
 const { forwardRef } = useForwardExpose();
 
+const { getItems, CollectionSlot } = useCollectionProvider<string>();
+
 const local = ref<string | undefined>(defaultValue);
 const value = computed({
   get: () => modelValue !== undefined ? modelValue : local.value,
@@ -44,6 +46,22 @@ const value = computed({
   },
 });
 
+const searchRef = ref('');
+let searchTimer: ReturnType<typeof setTimeout> | undefined;
+
+function clearSearch() {
+  clearTimeout(searchTimer);
+  searchRef.value = '';
+}
+
+onScopeDispose(clearSearch);
+
+// Reset the typeahead buffer once after every keystroke (1s idle window).
+function bumpSearchIdleTimer() {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(clearSearch, 1000);
+}
+
 provideMenubarRootContext({
   value,
   dir: dirRef,
@@ -51,11 +69,33 @@ provideMenubarRootContext({
   onMenuOpen: (v) => { value.value = v; },
   onMenuClose: () => { value.value = undefined; },
   onMenuToggle: (v) => { value.value = value.value === v ? undefined : v; },
+  getTriggers: (includeDisabled = false) => getItems(includeDisabled),
+  searchRef,
 });
+
+function onKeyDownCapture(event: KeyboardEvent) {
+  // Typeahead at the menubar level: alphanumeric single-character key when no modifiers.
+  // Browsers report printable keys as `event.key.length === 1`; Space/Enter/Arrows are
+  // longer or are non-printable.
+  if (event.ctrlKey || event.altKey || event.metaKey) return;
+  if (event.key.length !== 1) return;
+  searchRef.value += event.key;
+  bumpSearchIdleTimer();
+}
 </script>
 
 <template>
-  <Primitive :ref="forwardRef" :as="as" :as-child="asChild" role="menubar">
-    <slot />
-  </Primitive>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="menubar"
+      aria-orientation="horizontal"
+      :data-orientation="'horizontal'"
+      :dir="dirRef"
+      @keydown.capture="onKeyDownCapture"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
 </template>
diff --git a/vue/primitives/src/menubar/MenubarTrigger.vue b/vue/primitives/src/menubar/MenubarTrigger.vue
index f53d828..732b2de 100644
--- a/vue/primitives/src/menubar/MenubarTrigger.vue
+++ b/vue/primitives/src/menubar/MenubarTrigger.vue
@@ -7,23 +7,46 @@ export interface MenubarTriggerProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, watch } from 'vue';
 
 import { useForwardExpose } from '@robonen/vue';
+import { useCollectionInjector } from '../collection';
 import { MenuAnchor, useMenuContext } from '../menu';
+import { getNextMatch } from '../menu/utils';
 import { Primitive } from '../primitive';
 import { useMenubarMenuContext, useMenubarRootContext } from './context';
 
-const { disabled = false, as = 'button', asChild } = defineProps<MenubarTriggerProps>();
+const { disabled = false, as = 'button' } = defineProps<MenubarTriggerProps>();
 
 const rootCtx = useMenubarRootContext();
 const menuCtx = useMenubarMenuContext();
 const menuMenuCtx = useMenuContext();
+const collection = useCollectionInjector<string>();
 const { forwardRef, currentElement } = useForwardExpose();
 
 onMounted(() => menuCtx.onTriggerChange(currentElement.value ?? null));
 onUnmounted(() => menuCtx.onTriggerChange(null));
 
+function focusTrigger(el: HTMLElement | undefined) {
+  if (!el) return;
+  el.focus({ preventScroll: true });
+}
+
+function focusByIndex(items: HTMLElement[], from: number, delta: 1 | -1) {
+  if (items.length === 0) return;
+  const loop = rootCtx.loop.value;
+  let next = from + delta;
+  if (loop) {
+    next = (next + items.length) % items.length;
+  }
+  else {
+    next = Math.max(0, Math.min(items.length - 1, next));
+  }
+  focusTrigger(items[next]);
+}
+
+// Hover-switch: when a sibling menu is already open, hovering this trigger
+// (focused or not) opens this one and moves focus over.
 function handlePointerDown(event: PointerEvent) {
   if (disabled || event.button !== 0) return;
   event.preventDefault();
@@ -40,33 +63,83 @@ function handlePointerEnter() {
 
 function handleKeyDown(event: KeyboardEvent) {
   if (disabled) return;
-  if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
+
+  // Open the menu on Enter / Space / ArrowDown / ArrowUp (per WAI-ARIA APG).
+  if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
     event.preventDefault();
     menuCtx.wasKeyboardTriggerOpenRef.value = true;
     rootCtx.onMenuOpen(menuCtx.value);
+    return;
+  }
+
+  // Move focus between sibling triggers.
+  const triggers = collection
+    .getItems(true)
+    .map(i => i.ref)
+    .filter(el => el.dataset['disabled'] !== '');
+  if (triggers.length === 0) return;
+  const currentIdx = triggers.indexOf(currentElement.value as HTMLElement);
+  const dir = rootCtx.dir.value;
+  const nextKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+  const prevKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+
+  if (event.key === nextKey) {
+    event.preventDefault();
+    focusByIndex(triggers, currentIdx, 1);
+    return;
+  }
+  if (event.key === prevKey) {
+    event.preventDefault();
+    focusByIndex(triggers, currentIdx, -1);
+    return;
+  }
+  if (event.key === 'Home') {
+    event.preventDefault();
+    focusTrigger(triggers[0]);
+    return;
+  }
+  if (event.key === 'End') {
+    event.preventDefault();
+    focusTrigger(triggers[triggers.length - 1]);
   }
 }
+
+// Typeahead — driven by the shared `searchRef` filled by MenubarRoot's
+// keydown.capture. When it changes, jump focus to the matching trigger.
+watch(() => rootCtx.searchRef.value, (search) => {
+  if (!search) return;
+  // Only react when this trigger currently has focus — prevents every trigger
+  // from racing for the same match.
+  if (document.activeElement !== currentElement.value) return;
+  const triggers = collection
+    .getItems(true)
+    .map(i => i.ref)
+    .filter(el => el.dataset['disabled'] !== '');
+  const match = getNextMatch(triggers, search, currentElement.value as HTMLElement | null);
+  if (match && match !== currentElement.value) focusTrigger(match);
+});
 </script>
 
 <template>
-  <MenuAnchor as-child>
-    <Primitive
-      :ref="forwardRef"
-      :as="as"
-      :as-child="asChild"
-      :id="menuCtx.triggerId.value"
-      role="menuitem"
-      aria-haspopup="menu"
-      :aria-expanded="menuMenuCtx.open.value"
-      :aria-controls="menuCtx.contentId.value"
-      :data-state="menuMenuCtx.open.value ? 'open' : 'closed'"
-      :data-disabled="disabled ? '' : undefined"
-      :disabled="as === 'button' ? disabled : undefined"
-      @pointerdown="handlePointerDown"
-      @pointerenter="handlePointerEnter"
-      @keydown="handleKeyDown"
-    >
-      <slot />
-    </Primitive>
+  <MenuAnchor>
+    <collection.CollectionItem :value="menuCtx.value">
+      <Primitive
+        :ref="forwardRef"
+        :as="as"
+        :id="menuCtx.triggerId.value"
+        role="menuitem"
+        aria-haspopup="menu"
+        :aria-expanded="menuMenuCtx.open.value"
+        :aria-controls="menuCtx.contentId.value"
+        :data-state="menuMenuCtx.open.value ? 'open' : 'closed'"
+        :data-disabled="disabled ? '' : undefined"
+        :disabled="as === 'button' ? disabled : undefined"
+        @pointerdown="handlePointerDown"
+        @pointerenter="handlePointerEnter"
+        @keydown="handleKeyDown"
+      >
+        <slot />
+      </Primitive>
+    </collection.CollectionItem>
   </MenuAnchor>
 </template>
diff --git a/vue/primitives/src/menubar/__test__/Menubar.regression.test.ts b/vue/primitives/src/menubar/__test__/Menubar.regression.test.ts
new file mode 100644
index 0000000..f92b897
--- /dev/null
+++ b/vue/primitives/src/menubar/__test__/Menubar.regression.test.ts
@@ -0,0 +1,146 @@
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+
+import { MenubarMenu, MenubarRoot, MenubarTrigger } from '../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountBar(opts: { dir?: 'ltr' | 'rtl'; loop?: boolean; labels?: string[] } = {}) {
+  const labels = opts.labels ?? ['File', 'Edit', 'View', 'Help'];
+  const Harness = defineComponent({
+    setup() {
+      return () => h(
+        MenubarRoot,
+        { dir: opts.dir, loop: opts.loop },
+        {
+          default: () =>
+            labels.map(label =>
+              h(MenubarMenu, { value: label.toLowerCase() }, {
+                default: () => h(MenubarTrigger, null, { default: () => label }),
+              }),
+            ),
+        },
+      );
+    },
+  });
+  return track(mount(Harness, { attachTo: document.body }));
+}
+
+function triggers(): HTMLElement[] {
+  return Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]'));
+}
+
+describe('menubar — root a11y', () => {
+  it('exposes role=menubar with aria-orientation=horizontal', () => {
+    mountBar();
+    const bar = document.querySelector('[role="menubar"]') as HTMLElement;
+    expect(bar).toBeTruthy();
+    expect(bar.getAttribute('aria-orientation')).toBe('horizontal');
+  });
+
+  it('applies the dir attribute on the menubar root', () => {
+    mountBar({ dir: 'rtl' });
+    const bar = document.querySelector('[role="menubar"]') as HTMLElement;
+    expect(bar.getAttribute('dir')).toBe('rtl');
+  });
+});
+
+describe('menubar — keyboard navigation between triggers', () => {
+  it('ArrowRight moves focus to the next trigger (ltr)', async () => {
+    mountBar();
+    const [file, edit] = triggers();
+    file!.focus();
+    file!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(edit);
+  });
+
+  it('ArrowLeft moves focus to the previous trigger (ltr)', async () => {
+    mountBar();
+    const [, edit, view] = triggers();
+    view!.focus();
+    view!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(edit);
+  });
+
+  it('ArrowRight on the last trigger loops to the first when loop=true', async () => {
+    mountBar({ loop: true });
+    const all = triggers();
+    const last = all.at(-1)!;
+    last.focus();
+    last.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(all[0]);
+  });
+
+  it('ArrowRight on the last trigger stays put when loop=false', async () => {
+    mountBar({ loop: false });
+    const all = triggers();
+    const last = all.at(-1)!;
+    last.focus();
+    last.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(last);
+  });
+
+  it('Home / End jump to the first / last trigger', async () => {
+    mountBar();
+    const all = triggers();
+    all[1]!.focus();
+    all[1]!.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(all.at(-1));
+
+    all.at(-1)!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(all[0]);
+  });
+
+  it('reverses ArrowLeft/ArrowRight in RTL', async () => {
+    mountBar({ dir: 'rtl' });
+    const [file, edit] = triggers();
+    file!.focus();
+    // In RTL the "forward" key is ArrowLeft.
+    file!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(edit);
+  });
+});
+
+describe('menubar — typeahead', () => {
+  it('jumps focus to the trigger whose label starts with the typed letter', async () => {
+    mountBar();
+    const bar = document.querySelector('[role="menubar"]') as HTMLElement;
+    const [file, , view] = triggers();
+    file!.focus();
+    // Typeahead is wired on the menubar root via keydown.capture, so dispatching
+    // on the focused trigger (which bubbles up) is equivalent to the user typing
+    // while focus is in the bar.
+    bar.dispatchEvent(new KeyboardEvent('keydown', { key: 'v', bubbles: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(view);
+  });
+
+  it('ignores modified key combinations for typeahead', async () => {
+    mountBar();
+    const bar = document.querySelector('[role="menubar"]') as HTMLElement;
+    const [file] = triggers();
+    file!.focus();
+    bar.dispatchEvent(new KeyboardEvent('keydown', { key: 'v', ctrlKey: true, bubbles: true }));
+    await nextTick();
+    expect(document.activeElement).toBe(file);
+  });
+});
diff --git a/vue/primitives/src/menubar/context.ts b/vue/primitives/src/menubar/context.ts
index 54d4b6f..e0fa40c 100644
--- a/vue/primitives/src/menubar/context.ts
+++ b/vue/primitives/src/menubar/context.ts
@@ -1,5 +1,6 @@
 import type { ComputedRef, Ref, ShallowRef } from 'vue';
 import type { Direction } from '../config-provider';
+import type { CollectionItemData } from '../collection';
 
 import { useContextFactory } from '@robonen/vue';
 
@@ -10,6 +11,10 @@ export interface MenubarRootContext {
   onMenuOpen: (value: string) => void;
   onMenuClose: () => void;
   onMenuToggle: (value: string) => void;
+  /** Ordered list of all currently-mounted menubar triggers (DOM order). */
+  getTriggers: (includeDisabled?: boolean) => Array<CollectionItemData<string>>;
+  /** Buffered typeahead search string (cleared after ~1000ms idle). */
+  searchRef: Ref<string>;
 }
 
 export const {
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuContent.vue b/vue/primitives/src/navigation-menu/NavigationMenuContent.vue
new file mode 100644
index 0000000..708ccf2
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuContent.vue
@@ -0,0 +1,72 @@
+<script lang="ts">
+import type { NavigationMenuContentImplEmits, NavigationMenuContentImplProps } from './NavigationMenuContentImpl.vue';
+
+export interface NavigationMenuContentProps extends NavigationMenuContentImplProps {
+  /** Keep mounted regardless of `present`. Useful for transition libraries. */
+  forceMount?: boolean;
+}
+
+export type NavigationMenuContentEmits = NavigationMenuContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { Presence } from '../presence';
+import { useNavigationMenuContext, useNavigationMenuItemContext } from './context';
+import NavigationMenuContentImpl from './NavigationMenuContentImpl.vue';
+
+defineOptions({ inheritAttrs: false });
+
+const { forceMount = false, ...rest } = defineProps<NavigationMenuContentProps>();
+void rest;
+
+const emit = defineEmits<NavigationMenuContentEmits>();
+
+const menuContext = useNavigationMenuContext();
+const itemContext = useNavigationMenuItemContext();
+
+const open = computed(() => itemContext.value === menuContext.modelValue.value);
+
+// Keep content mounted briefly during viewport animation: if this item was the
+// previously active one we keep present=true until model changes again.
+const isLastActiveValue = ref(false);
+watch(
+  () => menuContext.modelValue.value,
+  (next, prev) => {
+    if (prev === itemContext.value && next !== itemContext.value) isLastActiveValue.value = true;
+    if (next === itemContext.value) isLastActiveValue.value = false;
+  },
+);
+
+const present = computed(() => open.value || isLastActiveValue.value);
+
+function handlePointerEnter() {
+  menuContext.onContentEnter(itemContext.value);
+  emit('pointerEnterContent');
+}
+
+function handlePointerLeave() {
+  menuContext.onContentLeave();
+  emit('pointerLeaveContent');
+}
+</script>
+
+<template>
+  <Teleport :to="menuContext.viewport.value ?? 'body'" :disabled="!menuContext.viewport.value">
+    <Presence :present="present" :force-mount="forceMount || !menuContext.unmountOnHide.value">
+      <NavigationMenuContentImpl
+        v-bind="$attrs"
+        @escape-key-down="emit('escapeKeyDown', $event)"
+        @pointer-down-outside="emit('pointerDownOutside', $event)"
+        @focus-outside="emit('focusOutside', $event)"
+        @interact-outside="emit('interactOutside', $event)"
+        @dismiss="emit('dismiss')"
+        @pointerenter="handlePointerEnter"
+        @pointerleave="handlePointerLeave"
+      >
+        <slot />
+      </NavigationMenuContentImpl>
+    </Presence>
+  </Teleport>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuContentImpl.vue b/vue/primitives/src/navigation-menu/NavigationMenuContentImpl.vue
new file mode 100644
index 0000000..f46cb91
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuContentImpl.vue
@@ -0,0 +1,171 @@
+<script lang="ts">
+import type { DismissableLayerEmits, DismissableLayerProps } from '../dismissable-layer';
+
+export interface NavigationMenuContentImplProps extends DismissableLayerProps {}
+
+export type NavigationMenuContentImplEmits = DismissableLayerEmits & {
+  pointerEnterContent: [];
+  pointerLeaveContent: [];
+};
+</script>
+
+<script setup lang="ts">
+import { computed, watchEffect } from 'vue';
+
+import { focusFirst, getActiveElement, getTabbableCandidates } from '@robonen/platform/browsers';
+import { useForwardExpose } from '@robonen/vue';
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { getFocusIntent, wrapArray } from '../roving-focus/utils';
+import { useNavigationMenuContext, useNavigationMenuItemContext } from './context';
+import { COLLECTION_ITEM_ATTR, EVENT_ROOT_CONTENT_DISMISS, getOpenState } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+defineProps<NavigationMenuContentImplProps>();
+
+const emit = defineEmits<NavigationMenuContentImplEmits>();
+
+const menuContext = useNavigationMenuContext();
+const itemContext = useNavigationMenuItemContext();
+
+const { forwardRef, currentElement } = useForwardExpose();
+
+const motionAttribute = computed<'from-start' | 'from-end' | 'to-start' | 'to-end' | undefined>(() => {
+  const items = menuContext.rootNavigationMenu.value
+    ? Array.from(menuContext.rootNavigationMenu.value.querySelectorAll('[data-primitives-navigation-menu-trigger]'))
+    : [];
+  const values = items.map(el => el.id.split('-trigger-').pop()).filter(Boolean) as string[];
+  if (menuContext.dir.value === 'rtl') values.reverse();
+  const index = values.indexOf(itemContext.value);
+  const prevIndex = values.indexOf(menuContext.previousValue.value);
+  const isSelected = itemContext.value === menuContext.modelValue.value;
+  const wasSelected = prevIndex === values.indexOf(menuContext.modelValue.value) && prevIndex !== -1;
+  if (!isSelected && !wasSelected) return undefined;
+  if (index === -1) return undefined;
+  if (isSelected) {
+    return prevIndex === -1 ? undefined : index > prevIndex ? 'from-end' : 'from-start';
+  }
+  // we are leaving
+  const curIndex = values.indexOf(menuContext.modelValue.value);
+  if (curIndex === -1) return undefined;
+  return curIndex > index ? 'to-start' : 'to-end';
+});
+
+function handleKeydown(ev: KeyboardEvent) {
+  const isMetaKey = ev.altKey || ev.ctrlKey || ev.metaKey;
+
+  if (ev.key === 'Tab' && !isMetaKey) {
+    const root = currentElement.value;
+    if (!root) return;
+    const candidates = getTabbableCandidates(root);
+    const focused = getActiveElement(document) as HTMLElement | null;
+    const idx = focused ? candidates.indexOf(focused) : -1;
+    const isMovingBackwards = ev.shiftKey;
+    const nextCandidates = isMovingBackwards
+      ? candidates.slice(0, idx).reverse()
+      : candidates.slice(idx + 1);
+    if (focusFirst(nextCandidates)) {
+      ev.preventDefault();
+    }
+    else {
+      // edge — delegate to focus proxy
+      itemContext.focusProxyRef.value?.focus();
+    }
+    return;
+  }
+
+  const intent = getFocusIntent(ev, menuContext.orientation, menuContext.dir.value);
+  if (!intent) return;
+
+  const root = currentElement.value;
+  if (!root) return;
+
+  const linkItems = Array.from(root.querySelectorAll<HTMLElement>(`[${COLLECTION_ITEM_ATTR}]`));
+  const focused = getActiveElement(document) as HTMLElement | null;
+  const focusedIndex = focused ? linkItems.indexOf(focused) : -1;
+
+  if (intent === 'first') {
+    if (focusFirst(linkItems)) ev.preventDefault();
+    return;
+  }
+  if (intent === 'last') {
+    if (focusFirst([...linkItems].reverse())) ev.preventDefault();
+    return;
+  }
+  if (focusedIndex === -1) {
+    if (focusFirst(linkItems)) ev.preventDefault();
+    return;
+  }
+  const rotated = wrapArray(linkItems, focusedIndex);
+  const candidates = intent === 'prev' ? rotated.slice(1).reverse() : rotated.slice(1);
+  if (focusFirst(candidates)) ev.preventDefault();
+}
+
+function handleEscapeKeyDown(ev: KeyboardEvent) {
+  emit('escapeKeyDown', ev);
+  if (ev.defaultPrevented) return;
+  itemContext.wasEscapeCloseRef.value = true;
+  menuContext.onItemDismiss();
+  itemContext.triggerRef.value?.focus();
+}
+
+function handleFocusOutside(ev: FocusEvent) {
+  emit('focusOutside', ev);
+  if (ev.defaultPrevented) return;
+  itemContext.onContentFocusOutside();
+  const target = ev.target as Node | null;
+  if (menuContext.rootNavigationMenu.value?.contains(target)) ev.preventDefault();
+}
+
+function handlePointerDownOutside(ev: PointerEvent | MouseEvent) {
+  emit('pointerDownOutside', ev);
+  if (ev.defaultPrevented) return;
+  const target = ev.target as HTMLElement | null;
+  const isTrigger = menuContext.activeTrigger.value?.contains(target);
+  const isRootViewport = menuContext.isRootMenu && menuContext.viewport.value?.contains(target);
+  if (isTrigger || isRootViewport || !menuContext.isRootMenu) ev.preventDefault();
+}
+
+// Listen for sibling/global EVENT_ROOT_CONTENT_DISMISS for root menus so links
+// inside content can request the whole root close.
+watchEffect((onCleanup) => {
+  const el = currentElement.value;
+  if (!el || !menuContext.isRootMenu) return;
+  function onDismiss() {
+    itemContext.onRootContentClose();
+  }
+  el.addEventListener(EVENT_ROOT_CONTENT_DISMISS, onDismiss);
+  onCleanup(() => el.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, onDismiss));
+});
+</script>
+
+<template>
+  <FocusScope
+    :trapped="false"
+    @mount-auto-focus.prevent
+    @unmount-auto-focus.prevent
+  >
+    <DismissableLayer
+      :id="itemContext.contentId"
+      :ref="forwardRef"
+      :aria-labelledby="itemContext.triggerId"
+      :data-motion="motionAttribute"
+      :data-state="getOpenState(menuContext.modelValue.value, itemContext.value)"
+      :data-orientation="menuContext.orientation"
+      :data-primitives-navigation-menu-content="itemContext.value"
+      :disable-outside-pointer-events="false"
+      v-bind="$attrs"
+      @keydown="handleKeydown"
+      @escape-key-down="handleEscapeKeyDown"
+      @pointer-down-outside="handlePointerDownOutside"
+      @focus-outside="handleFocusOutside"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+      @pointerenter="emit('pointerEnterContent')"
+      @pointerleave="emit('pointerLeaveContent')"
+    >
+      <slot />
+    </DismissableLayer>
+  </FocusScope>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuIndicator.vue b/vue/primitives/src/navigation-menu/NavigationMenuIndicator.vue
new file mode 100644
index 0000000..e982065
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuIndicator.vue
@@ -0,0 +1,87 @@
+<script lang="ts">
+export interface NavigationMenuIndicatorProps {
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onScopeDispose, ref, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useNavigationMenuContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const { forceMount = false } = defineProps<NavigationMenuIndicatorProps>();
+
+const menuContext = useNavigationMenuContext();
+const { forwardRef } = useForwardExpose();
+
+const isVisible = computed(() => menuContext.modelValue.value !== '');
+const isHorizontal = computed(() => menuContext.orientation === 'horizontal');
+
+const rect = ref<{ size: number; position: number } | undefined>();
+
+let triggerObserver: ResizeObserver | undefined;
+let trackObserver: ResizeObserver | undefined;
+
+function recompute() {
+  const trigger = menuContext.activeTrigger.value;
+  if (!trigger) return;
+  if (isHorizontal.value) {
+    rect.value = { size: trigger.offsetWidth, position: trigger.offsetLeft };
+  }
+  else {
+    rect.value = { size: trigger.offsetHeight, position: trigger.offsetTop };
+  }
+}
+
+watch(
+  () => [menuContext.activeTrigger.value, menuContext.indicatorTrack.value, isHorizontal.value],
+  () => {
+    triggerObserver?.disconnect();
+    trackObserver?.disconnect();
+    const trigger = menuContext.activeTrigger.value;
+    const track = menuContext.indicatorTrack.value;
+    if (!trigger || !track) return;
+    triggerObserver = new ResizeObserver(recompute);
+    trackObserver = new ResizeObserver(recompute);
+    triggerObserver.observe(trigger);
+    trackObserver.observe(track);
+    recompute();
+  },
+  { immediate: true },
+);
+
+onScopeDispose(() => {
+  triggerObserver?.disconnect();
+  trackObserver?.disconnect();
+});
+
+const indicatorStyle = computed(() => {
+  if (!rect.value) return {};
+  return {
+    '--primitives-navigation-menu-indicator-size': `${rect.value.size}px`,
+    '--primitives-navigation-menu-indicator-position': `${rect.value.position}px`,
+  };
+});
+</script>
+
+<template>
+  <Teleport v-if="menuContext.indicatorTrack.value" :to="menuContext.indicatorTrack.value">
+    <Presence :present="isVisible" :force-mount="forceMount">
+      <Primitive
+        :ref="forwardRef"
+        :data-state="isVisible ? 'visible' : 'hidden'"
+        :data-orientation="menuContext.orientation"
+        data-primitives-navigation-menu-indicator
+        :style="indicatorStyle"
+        v-bind="$attrs"
+      >
+        <slot />
+      </Primitive>
+    </Presence>
+  </Teleport>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuItem.vue b/vue/primitives/src/navigation-menu/NavigationMenuItem.vue
new file mode 100644
index 0000000..9326998
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuItem.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+export interface NavigationMenuItemProps {
+  /**
+   * Unique value associating this item with the active state. Generated
+   * automatically when omitted.
+   */
+  value?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, shallowRef, toValue } from 'vue';
+
+import { focusFirst, getTabbableCandidates } from '@robonen/platform/browsers';
+import { useForwardExpose, useId } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideNavigationMenuItemContext, useNavigationMenuContext } from './context';
+import { makeContentId, makeTriggerId, removeFromTabOrder } from './utils';
+
+const { value: valueProp } = defineProps<NavigationMenuItemProps>();
+
+useForwardExpose();
+
+const context = useNavigationMenuContext();
+
+const autoId = useId(undefined, 'primitives-navigation-menu-item');
+const value = computed<string>(() => valueProp ?? autoId.value);
+
+const triggerRef = shallowRef<HTMLElement | undefined>(undefined);
+const focusProxyRef = shallowRef<HTMLElement | undefined>(undefined);
+const wasEscapeCloseRef = ref(false);
+
+const triggerId = computed(() => makeTriggerId(toValue(context.baseId), value.value));
+const contentId = computed(() => makeContentId(toValue(context.baseId), value.value));
+
+let restoreContentTabOrder: () => void = () => {};
+
+function handleContentEntry(side: 'start' | 'end' = 'start') {
+  const el = document.getElementById(contentId.value);
+  if (!el) return;
+  restoreContentTabOrder();
+  const candidates = getTabbableCandidates(el);
+  if (candidates.length) {
+    focusFirst(side === 'start' ? candidates : [...candidates].reverse());
+  }
+}
+
+function handleContentExit() {
+  const el = document.getElementById(contentId.value);
+  if (!el) return;
+  const candidates = getTabbableCandidates(el);
+  if (candidates.length) {
+    restoreContentTabOrder = removeFromTabOrder(candidates);
+  }
+}
+
+provideNavigationMenuItemContext({
+  get value() { return value.value; },
+  get contentId() { return contentId.value; },
+  get triggerId() { return triggerId.value; },
+  triggerRef,
+  onTriggerChange: (el) => { triggerRef.value = el; },
+  focusProxyRef,
+  onFocusProxyChange: (el) => { focusProxyRef.value = el; },
+  wasEscapeCloseRef,
+  onEntryKeyDown: () => handleContentEntry('start'),
+  onFocusProxyEnter: side => handleContentEntry(side),
+  onContentFocusOutside: handleContentExit,
+  onRootContentClose: handleContentExit,
+});
+</script>
+
+<template>
+  <Primitive
+    as="li"
+    data-primitives-navigation-menu-item
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuLink.vue b/vue/primitives/src/navigation-menu/NavigationMenuLink.vue
new file mode 100644
index 0000000..96c641d
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuLink.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface NavigationMenuLinkProps extends PrimitiveProps {
+  /** Marks the link as active for styling and aria-current. */
+  active?: boolean;
+}
+
+export interface NavigationMenuLinkEmits {
+  select: [event: CustomEvent];
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { COLLECTION_ITEM_ATTR, EVENT_ROOT_CONTENT_DISMISS, LINK_SELECT_EVENT } from './utils';
+
+const { as = 'a', active = false } = defineProps<NavigationMenuLinkProps>();
+const emit = defineEmits<NavigationMenuLinkEmits>();
+
+const { forwardRef } = useForwardExpose();
+
+function handleClick(event: MouseEvent) {
+  const target = event.currentTarget as HTMLElement | null;
+  if (!target) return;
+  const linkSelectEvent = new CustomEvent(LINK_SELECT_EVENT, {
+    bubbles: true,
+    cancelable: true,
+  });
+  // Browser event handlers run synchronously; listen once for prevention semantics.
+  target.addEventListener(LINK_SELECT_EVENT, e => emit('select', e as CustomEvent), { once: true });
+  target.dispatchEvent(linkSelectEvent);
+  if (!linkSelectEvent.defaultPrevented && !event.metaKey) {
+    const rootContentDismissEvent = new CustomEvent(EVENT_ROOT_CONTENT_DISMISS, {
+      bubbles: true,
+      cancelable: true,
+    });
+    target.dispatchEvent(rootContentDismissEvent);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-active="active ? '' : undefined"
+    :aria-current="active ? 'page' : undefined"
+    :[COLLECTION_ITEM_ATTR]="''"
+    @click="handleClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuList.vue b/vue/primitives/src/navigation-menu/NavigationMenuList.vue
new file mode 100644
index 0000000..8b36fc2
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuList.vue
@@ -0,0 +1,42 @@
+<script lang="ts">
+export interface NavigationMenuListProps {}
+</script>
+
+<script setup lang="ts">
+import { onMounted, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { RovingFocusGroup } from '../roving-focus';
+import { useNavigationMenuContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+defineProps<NavigationMenuListProps>();
+
+const menuContext = useNavigationMenuContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+onMounted(() => {
+  menuContext.onIndicatorTrackChange(currentElement.value);
+});
+
+watch(currentElement, (el) => {
+  menuContext.onIndicatorTrackChange(el);
+});
+</script>
+
+<template>
+  <div :ref="forwardRef" data-primitives-navigation-menu-list-wrapper style="position: relative">
+    <RovingFocusGroup
+      v-bind="$attrs"
+      as="ul"
+      :orientation="menuContext.orientation"
+      :dir="menuContext.dir.value"
+      :loop="false"
+      :data-orientation="menuContext.orientation"
+      data-primitives-navigation-menu-list
+    >
+      <slot />
+    </RovingFocusGroup>
+  </div>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuRoot.vue b/vue/primitives/src/navigation-menu/NavigationMenuRoot.vue
new file mode 100644
index 0000000..727d140
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuRoot.vue
@@ -0,0 +1,224 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+import type { Orientation } from '../roving-focus';
+
+export interface NavigationMenuRootProps {
+  /** Controlled active item value. Use `v-model`. */
+  modelValue?: string;
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  /** Reading direction. Falls back to `ConfigProvider`. */
+  dir?: Direction;
+  /** Menu orientation. @default 'horizontal' */
+  orientation?: Orientation;
+  /**
+   * Time (ms) between pointer entering a trigger and the menu opening.
+   * @default 200
+   */
+  delayDuration?: number;
+  /**
+   * Window (ms) during which switching triggers skips `delayDuration`.
+   * @default 300
+   */
+  skipDelayDuration?: number;
+  /** Disable opening via click. @default false */
+  disableClickTrigger?: boolean;
+  /** Disable opening via hover. @default false */
+  disableHoverTrigger?: boolean;
+  /** Disable closing when pointer leaves the menu. @default false */
+  disablePointerLeaveClose?: boolean;
+  /** Unmount content when hidden. @default true */
+  unmountOnHide?: boolean;
+}
+
+export interface NavigationMenuRootEmits {
+  'update:modelValue': [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import { computed, onScopeDispose, ref, shallowRef, toRef, watchEffect } from 'vue';
+
+import { useForwardExpose, useId } from '@robonen/vue';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideNavigationMenuContext } from './context';
+import { EVENT_ROOT_CONTENT_DISMISS } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  defaultValue,
+  dir,
+  orientation = 'horizontal',
+  delayDuration = 200,
+  skipDelayDuration = 300,
+  disableClickTrigger = false,
+  disableHoverTrigger = false,
+  disablePointerLeaveClose = false,
+  unmountOnHide = true,
+} = defineProps<NavigationMenuRootProps>();
+
+defineEmits<NavigationMenuRootEmits>();
+
+defineSlots<{
+  default?: (props: { modelValue: string }) => any;
+}>();
+
+const config = useConfig();
+const dirRef = computed<Direction>(() => dir ?? config.dir.value);
+
+const localValue = ref<string>(defaultValue ?? '');
+const modelValue = defineModel<string | undefined>({
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    const next = v ?? '';
+    localValue.value = next;
+    return next;
+  },
+}) as unknown as Ref<string>;
+
+const previousValue = ref<string>('');
+
+const baseId = useId(undefined, 'primitives-navigation-menu');
+const { forwardRef, currentElement: rootNavigationMenu } = useForwardExpose();
+
+const indicatorTrack = shallowRef<HTMLElement | undefined>(undefined);
+const viewport = shallowRef<HTMLElement | undefined>(undefined);
+const activeTrigger = shallowRef<HTMLElement | undefined>(undefined);
+
+const { getItems, CollectionSlot } = useCollectionProvider<{ value: string }>();
+
+// Manual debounce — open delay shrinks to 150ms once the menu is open or while
+// the skip window is active (so moving between triggers feels instantaneous).
+let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+let skipDelayTimer: ReturnType<typeof setTimeout> | undefined;
+const isDelaySkipped = ref(false);
+
+function clearDebounce() {
+  if (debounceTimer !== undefined) {
+    clearTimeout(debounceTimer);
+    debounceTimer = undefined;
+  }
+}
+
+function clearSkipDelay() {
+  if (skipDelayTimer !== undefined) {
+    clearTimeout(skipDelayTimer);
+    skipDelayTimer = undefined;
+  }
+}
+
+function triggerSkipDelay() {
+  clearSkipDelay();
+  isDelaySkipped.value = true;
+  skipDelayTimer = setTimeout(() => {
+    isDelaySkipped.value = false;
+    skipDelayTimer = undefined;
+  }, skipDelayDuration);
+}
+
+const computedDelay = computed(() => {
+  const isOpen = modelValue.value !== '';
+  if (isOpen || isDelaySkipped.value) return 150;
+  return delayDuration;
+});
+
+function debouncedSet(val: string) {
+  clearDebounce();
+  debounceTimer = setTimeout(() => {
+    previousValue.value = modelValue.value;
+    modelValue.value = val;
+    debounceTimer = undefined;
+  }, computedDelay.value);
+}
+
+function cancelDebounce() {
+  clearDebounce();
+}
+
+watchEffect(() => {
+  if (!modelValue.value) return;
+  const items = getItems().map(i => i.ref);
+  // Trigger id pattern: `${baseId}-trigger-${value}`
+  const matched = items.find(item => item.id.includes(`-trigger-${modelValue.value}`));
+  if (matched) activeTrigger.value = matched;
+});
+
+function onItemDismiss() {
+  previousValue.value = modelValue.value;
+  modelValue.value = '';
+}
+
+// Custom event isn't part of HTMLElementEventMap so wire it up manually.
+watchEffect((onCleanup) => {
+  const el = rootNavigationMenu.value;
+  if (!el) return;
+  el.addEventListener(EVENT_ROOT_CONTENT_DISMISS, onItemDismiss);
+  onCleanup(() => el.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, onItemDismiss));
+});
+
+onScopeDispose(() => {
+  clearDebounce();
+  clearSkipDelay();
+});
+
+provideNavigationMenuContext({
+  isRootMenu: true,
+  modelValue,
+  previousValue,
+  baseId,
+  dir: dirRef,
+  orientation,
+  disableClickTrigger: toRef(() => disableClickTrigger),
+  disableHoverTrigger: toRef(() => disableHoverTrigger),
+  disablePointerLeaveClose: toRef(() => disablePointerLeaveClose),
+  unmountOnHide: toRef(() => unmountOnHide),
+  rootNavigationMenu,
+  activeTrigger,
+  onActiveTriggerChange: (el) => { activeTrigger.value = el; },
+  indicatorTrack,
+  onIndicatorTrackChange: (el) => { indicatorTrack.value = el; },
+  viewport,
+  onViewportChange: (el) => { viewport.value = el; },
+  onTriggerEnter: (val) => {
+    debouncedSet(val);
+  },
+  onTriggerLeave: () => {
+    triggerSkipDelay();
+    debouncedSet('');
+  },
+  onContentEnter: () => {
+    cancelDebounce();
+  },
+  onContentLeave: () => {
+    if (!disablePointerLeaveClose) debouncedSet('');
+  },
+  onItemSelect: (val) => {
+    previousValue.value = modelValue.value;
+    modelValue.value = val;
+  },
+  onItemDismiss,
+});
+
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      as="nav"
+      :aria-label="$attrs['aria-label'] as string | undefined ?? 'Main'"
+      :data-orientation="orientation"
+      :dir="dirRef"
+      data-primitives-navigation-menu
+      v-bind="$attrs"
+    >
+      <slot :model-value="modelValue" />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuSub.vue b/vue/primitives/src/navigation-menu/NavigationMenuSub.vue
new file mode 100644
index 0000000..0f0a74b
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuSub.vue
@@ -0,0 +1,117 @@
+<script lang="ts">
+import type { Orientation } from '../roving-focus';
+
+export interface NavigationMenuSubProps {
+  /** Controlled active value of the submenu. Use `v-model`. */
+  modelValue?: string;
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  /** Submenu orientation. @default 'horizontal' */
+  orientation?: Orientation;
+}
+
+export interface NavigationMenuSubEmits {
+  'update:modelValue': [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import type { Ref } from 'vue';
+
+import { ref, shallowRef, watchEffect } from 'vue';
+
+import { useForwardExpose, useId } from '@robonen/vue';
+import { useCollectionProvider } from '../collection';
+import { Primitive } from '../primitive';
+import { provideNavigationMenuContext, useNavigationMenuContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const { defaultValue, orientation = 'horizontal' } = defineProps<NavigationMenuSubProps>();
+
+defineEmits<NavigationMenuSubEmits>();
+
+defineSlots<{
+  default?: (props: { modelValue: string }) => any;
+}>();
+
+const localValue = ref<string>(defaultValue ?? '');
+const modelValue = defineModel<string | undefined>({
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    const next = v ?? '';
+    localValue.value = next;
+    return next;
+  },
+}) as unknown as Ref<string>;
+
+const previousValue = ref<string>('');
+
+const parentContext = useNavigationMenuContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const indicatorTrack = shallowRef<HTMLElement | undefined>(undefined);
+const viewport = shallowRef<HTMLElement | undefined>(undefined);
+const activeTrigger = shallowRef<HTMLElement | undefined>(undefined);
+
+const { getItems, CollectionSlot } = useCollectionProvider<{ value: string }>();
+
+const baseId = useId(undefined, 'primitives-navigation-menu-sub');
+
+watchEffect(() => {
+  if (!modelValue.value) return;
+  const items = getItems().map(i => i.ref);
+  const matched = items.find(item => item.id.includes(`-trigger-${modelValue.value}`));
+  if (matched) activeTrigger.value = matched;
+});
+
+provideNavigationMenuContext({
+  ...parentContext,
+  isRootMenu: false,
+  modelValue,
+  previousValue,
+  baseId,
+  orientation,
+  rootNavigationMenu: currentElement,
+  activeTrigger,
+  onActiveTriggerChange: (el) => { activeTrigger.value = el; },
+  indicatorTrack,
+  onIndicatorTrackChange: (el) => { indicatorTrack.value = el; },
+  viewport,
+  onViewportChange: (el) => { viewport.value = el; },
+  onTriggerEnter: (val) => {
+    modelValue.value = val;
+  },
+  onTriggerLeave: () => {
+    /* submenus don't auto-close on trigger leave */
+  },
+  onContentEnter: () => {
+    /* no-op for submenus */
+  },
+  onContentLeave: () => {
+    /* no-op for submenus */
+  },
+  onItemSelect: (val) => {
+    previousValue.value = modelValue.value;
+    modelValue.value = val;
+  },
+  onItemDismiss: () => {
+    previousValue.value = modelValue.value;
+    modelValue.value = '';
+  },
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :data-orientation="orientation"
+      data-primitives-navigation-menu
+      v-bind="$attrs"
+    >
+      <slot :model-value="modelValue" />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuTrigger.vue b/vue/primitives/src/navigation-menu/NavigationMenuTrigger.vue
new file mode 100644
index 0000000..0bd716c
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuTrigger.vue
@@ -0,0 +1,152 @@
+<script lang="ts">
+import type { ComponentPublicInstance } from 'vue';
+
+export interface NavigationMenuTriggerProps {
+  /** Disables interaction with this trigger. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { unrefElement, useForwardExpose } from '@robonen/vue';
+import { useCollectionInjector } from '../collection';
+import { Primitive } from '../primitive';
+import { RovingFocusItem } from '../roving-focus';
+import { VisuallyHidden } from '../visually-hidden';
+import { useNavigationMenuContext, useNavigationMenuItemContext } from './context';
+import { getOpenState } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const { disabled = false } = defineProps<NavigationMenuTriggerProps>();
+
+const menuContext = useNavigationMenuContext();
+const itemContext = useNavigationMenuItemContext();
+
+const { CollectionItem } = useCollectionInjector<{ value: string }>();
+const { forwardRef, currentElement: triggerElement } = useForwardExpose();
+
+// Auto-reset flag that suppresses click→toggle right after a pointermove open.
+const hasPointerMoveOpened = ref(false);
+let pointerMoveResetTimer: ReturnType<typeof setTimeout> | undefined;
+function markPointerMoveOpened() {
+  hasPointerMoveOpened.value = true;
+  if (pointerMoveResetTimer !== undefined) clearTimeout(pointerMoveResetTimer);
+  pointerMoveResetTimer = setTimeout(() => {
+    hasPointerMoveOpened.value = false;
+    pointerMoveResetTimer = undefined;
+  }, 300);
+}
+
+const wasClickClose = ref(false);
+
+const open = computed(() => itemContext.value === menuContext.modelValue.value);
+
+watch(triggerElement, (el) => {
+  itemContext.onTriggerChange(el ?? undefined);
+});
+
+onMounted(() => {
+  if (triggerElement.value) itemContext.onTriggerChange(triggerElement.value);
+});
+
+function handlePointerEnter() {
+  if (menuContext.disableHoverTrigger.value) return;
+  wasClickClose.value = false;
+  itemContext.wasEscapeCloseRef.value = false;
+}
+
+function handlePointerMove(ev: PointerEvent) {
+  if (menuContext.disableHoverTrigger.value) return;
+  if (ev.pointerType !== 'mouse') return;
+  if (disabled || wasClickClose.value || itemContext.wasEscapeCloseRef.value || hasPointerMoveOpened.value) return;
+  menuContext.onTriggerEnter(itemContext.value);
+  markPointerMoveOpened();
+}
+
+function handlePointerLeave(ev: PointerEvent) {
+  if (menuContext.disableHoverTrigger.value) return;
+  if (ev.pointerType !== 'mouse') return;
+  if (disabled) return;
+  menuContext.onTriggerLeave();
+  hasPointerMoveOpened.value = false;
+}
+
+function handleClick(event: MouseEvent | PointerEvent) {
+  const isMouse = !('pointerType' in event) || (event as PointerEvent).pointerType === 'mouse';
+  if (isMouse && menuContext.disableClickTrigger.value) return;
+  // If pointermove already opened the menu, ignore the resulting click.
+  if (hasPointerMoveOpened.value) return;
+  if (open.value) menuContext.onItemSelect('');
+  else menuContext.onItemSelect(itemContext.value);
+  wasClickClose.value = open.value;
+}
+
+function handleKeydown(ev: KeyboardEvent) {
+  const verticalEntryKey = menuContext.dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+  const entryKey = menuContext.orientation === 'horizontal' ? 'ArrowDown' : verticalEntryKey;
+  if (open.value && ev.key === entryKey) {
+    itemContext.onEntryKeyDown();
+    ev.preventDefault();
+    ev.stopPropagation();
+  }
+}
+
+function setFocusProxyRef(node: Element | ComponentPublicInstance | null) {
+  if (!node) {
+    itemContext.onFocusProxyChange(undefined);
+    return;
+  }
+  const el = unrefElement(node as Parameters<typeof unrefElement>[0]);
+  if (el instanceof HTMLElement) itemContext.onFocusProxyChange(el);
+}
+
+function handleVisuallyHiddenFocus(ev: FocusEvent) {
+  const content = document.getElementById(itemContext.contentId);
+  const prevFocused = ev.relatedTarget as HTMLElement | null;
+  const wasTriggerFocused = prevFocused === triggerElement.value;
+  const wasFocusFromContent = !!content?.contains(prevFocused);
+  if (wasTriggerFocused || !wasFocusFromContent)
+    itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end');
+}
+</script>
+
+<template>
+  <CollectionItem :value="{ value: itemContext.value }">
+    <RovingFocusItem :focusable="!disabled">
+      <Primitive
+        :id="itemContext.triggerId"
+        :ref="forwardRef"
+        as="button"
+        type="button"
+        :disabled="disabled || undefined"
+        :data-disabled="disabled ? '' : undefined"
+        :data-state="getOpenState(menuContext.modelValue.value, itemContext.value)"
+        :aria-expanded="open"
+        :aria-controls="itemContext.contentId"
+        data-primitives-navigation-menu-trigger
+        data-primitives-collection-item
+        v-bind="$attrs"
+        @pointerenter="handlePointerEnter"
+        @pointermove="handlePointerMove"
+        @pointerleave="handlePointerLeave"
+        @click="handleClick"
+        @keydown="handleKeydown"
+      >
+        <slot />
+      </Primitive>
+    </RovingFocusItem>
+  </CollectionItem>
+
+  <template v-if="open">
+    <VisuallyHidden
+      :ref="setFocusProxyRef"
+      aria-hidden="true"
+      :tabindex="0"
+      @focus="handleVisuallyHiddenFocus"
+    />
+    <span v-if="menuContext.viewport.value" :aria-owns="itemContext.contentId" />
+  </template>
+</template>
diff --git a/vue/primitives/src/navigation-menu/NavigationMenuViewport.vue b/vue/primitives/src/navigation-menu/NavigationMenuViewport.vue
new file mode 100644
index 0000000..6d674ac
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/NavigationMenuViewport.vue
@@ -0,0 +1,121 @@
+<script lang="ts">
+export interface NavigationMenuViewportProps {
+  /** Keep mounted regardless of open state. */
+  forceMount?: boolean;
+  /**
+   * Horizontal alignment of the viewport relative to the active trigger.
+   * @default 'center'
+   */
+  align?: 'start' | 'center' | 'end';
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onScopeDispose, ref, shallowRef, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useNavigationMenuContext } from './context';
+import { clamp, whenMouse } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const { forceMount = false, align = 'center' } = defineProps<NavigationMenuViewportProps>();
+
+const menuContext = useNavigationMenuContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const open = computed(() => menuContext.modelValue.value !== '');
+const present = computed(() => open.value);
+
+const size = ref<{ width: number; height: number } | undefined>();
+const activeContentEl = shallowRef<HTMLElement | undefined>(undefined);
+
+watch(currentElement, (el) => {
+  menuContext.onViewportChange(el);
+});
+
+// Track which content is currently open and observe its size.
+let contentObserver: ResizeObserver | undefined;
+function watchOpenContent() {
+  contentObserver?.disconnect();
+  const root = currentElement.value;
+  if (!root) return;
+  const openContent = root.querySelector<HTMLElement>('[data-state=open]');
+  activeContentEl.value = openContent ?? undefined;
+  if (!openContent) return;
+  contentObserver = new ResizeObserver(() => {
+    size.value = { width: openContent.offsetWidth, height: openContent.offsetHeight };
+  });
+  contentObserver.observe(openContent);
+  size.value = { width: openContent.offsetWidth, height: openContent.offsetHeight };
+}
+
+watch(() => menuContext.modelValue.value, () => {
+  // Defer to next microtask so the new content has mounted.
+  queueMicrotask(watchOpenContent);
+});
+
+watch(currentElement, () => {
+  if (currentElement.value) watchOpenContent();
+});
+
+onScopeDispose(() => {
+  contentObserver?.disconnect();
+});
+
+// Position based on active trigger, clamped to viewport edges.
+const positionStyle = computed(() => {
+  const viewport = currentElement.value;
+  const trigger = menuContext.activeTrigger.value;
+  if (!viewport || !trigger || !size.value) return {};
+  const triggerRect = trigger.getBoundingClientRect();
+  const viewportWidth = size.value.width;
+  let left: number;
+  switch (align) {
+    case 'start':
+      left = triggerRect.left;
+      break;
+    case 'end':
+      left = triggerRect.right - viewportWidth;
+      break;
+    default:
+      left = triggerRect.left + (triggerRect.width / 2) - (viewportWidth / 2);
+  }
+  const maxLeft = window.innerWidth - viewportWidth - 10;
+  left = clamp(left, 10, Math.max(10, maxLeft));
+  const top = triggerRect.bottom;
+  return {
+    '--primitives-navigation-menu-viewport-width': `${size.value.width}px`,
+    '--primitives-navigation-menu-viewport-height': `${size.value.height}px`,
+    '--primitives-navigation-menu-viewport-left': `${left}px`,
+    '--primitives-navigation-menu-viewport-top': `${top}px`,
+  };
+});
+
+function handlePointerEnter() {
+  menuContext.onContentEnter(menuContext.modelValue.value);
+}
+
+const handlePointerLeave = whenMouse(() => {
+  menuContext.onContentLeave();
+});
+</script>
+
+<template>
+  <Presence :present="present" :force-mount="forceMount || !menuContext.unmountOnHide.value">
+    <Primitive
+      :ref="forwardRef"
+      :data-state="open ? 'open' : 'closed'"
+      :data-orientation="menuContext.orientation"
+      data-primitives-navigation-menu-viewport
+      :style="positionStyle"
+      v-bind="$attrs"
+      @pointerenter="handlePointerEnter"
+      @pointerleave="handlePointerLeave"
+    >
+      <slot />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/navigation-menu/__test__/NavigationMenu.landmark.test.ts b/vue/primitives/src/navigation-menu/__test__/NavigationMenu.landmark.test.ts
new file mode 100644
index 0000000..373648d
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/__test__/NavigationMenu.landmark.test.ts
@@ -0,0 +1,56 @@
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+
+import { NavigationMenuList, NavigationMenuRoot } from '../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountRoot(attrs: Record<string, unknown> = {}) {
+  const Harness = defineComponent({
+    setup() {
+      return () => h(NavigationMenuRoot, attrs, {
+        default: () => h(NavigationMenuList),
+      });
+    },
+  });
+  return track(mount(Harness, { attachTo: document.body }));
+}
+
+describe('navigation-menu — root landmark a11y', () => {
+  it('renders a <nav> element (implicit role=navigation)', () => {
+    mountRoot();
+    const nav = document.querySelector('nav');
+    expect(nav).toBeTruthy();
+    // <nav> has implicit role="navigation" — no explicit role attribute needed.
+  });
+
+  it('falls back to aria-label="Main" when no label is supplied', () => {
+    mountRoot();
+    const nav = document.querySelector('nav') as HTMLElement;
+    expect(nav.getAttribute('aria-label')).toBe('Main');
+  });
+
+  it('honours a user-supplied aria-label', () => {
+    mountRoot({ 'aria-label': 'Primary site navigation' });
+    const nav = document.querySelector('nav') as HTMLElement;
+    expect(nav.getAttribute('aria-label')).toBe('Primary site navigation');
+  });
+
+  it('exposes data-orientation matching the orientation prop', () => {
+    mountRoot({ orientation: 'vertical' });
+    const nav = document.querySelector('nav') as HTMLElement;
+    expect(nav.getAttribute('data-orientation')).toBe('vertical');
+  });
+});
diff --git a/vue/primitives/src/navigation-menu/context.ts b/vue/primitives/src/navigation-menu/context.ts
new file mode 100644
index 0000000..b936e16
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/context.ts
@@ -0,0 +1,65 @@
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import type { Direction } from '../config-provider';
+import type { Orientation } from '../roving-focus';
+
+import { useContextFactory } from '@robonen/vue';
+
+/**
+ * Context shared by `NavigationMenuRoot` and `NavigationMenuSub`. Children
+ * (item / list / trigger / content / viewport / indicator) read from this
+ * single context regardless of whether they are inside a root or a submenu.
+ */
+export interface NavigationMenuContext {
+  isRootMenu: boolean;
+  modelValue: Ref<string>;
+  previousValue: Ref<string>;
+  baseId: ComputedRef<string> | Ref<string>;
+  dir: Ref<Direction>;
+  orientation: Orientation;
+  disableClickTrigger: Ref<boolean>;
+  disableHoverTrigger: Ref<boolean>;
+  disablePointerLeaveClose: Ref<boolean>;
+  unmountOnHide: Ref<boolean>;
+
+  rootNavigationMenu: ShallowRef<HTMLElement | undefined>;
+  activeTrigger: ShallowRef<HTMLElement | undefined>;
+  onActiveTriggerChange: (el: HTMLElement | undefined) => void;
+
+  indicatorTrack: ShallowRef<HTMLElement | undefined>;
+  onIndicatorTrackChange: (el: HTMLElement | undefined) => void;
+
+  viewport: ShallowRef<HTMLElement | undefined>;
+  onViewportChange: (el: HTMLElement | undefined) => void;
+
+  onTriggerEnter: (itemValue: string) => void;
+  onTriggerLeave: () => void;
+  onContentEnter: (itemValue: string) => void;
+  onContentLeave: () => void;
+  onItemSelect: (itemValue: string) => void;
+  onItemDismiss: () => void;
+}
+
+export interface NavigationMenuItemContext {
+  value: string;
+  contentId: string;
+  triggerId: string;
+  triggerRef: ShallowRef<HTMLElement | undefined>;
+  onTriggerChange: (el: HTMLElement | undefined) => void;
+  focusProxyRef: ShallowRef<HTMLElement | undefined>;
+  onFocusProxyChange: (el: HTMLElement | undefined) => void;
+  wasEscapeCloseRef: Ref<boolean>;
+  onEntryKeyDown: () => void;
+  onFocusProxyEnter: (side: 'start' | 'end') => void;
+  onContentFocusOutside: () => void;
+  onRootContentClose: () => void;
+}
+
+export const {
+  inject: useNavigationMenuContext,
+  provide: provideNavigationMenuContext,
+} = useContextFactory<NavigationMenuContext>('NavigationMenu');
+
+export const {
+  inject: useNavigationMenuItemContext,
+  provide: provideNavigationMenuItemContext,
+} = useContextFactory<NavigationMenuItemContext>('NavigationMenuItem');
diff --git a/vue/primitives/src/navigation-menu/index.ts b/vue/primitives/src/navigation-menu/index.ts
new file mode 100644
index 0000000..b45f624
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/index.ts
@@ -0,0 +1,31 @@
+export { default as NavigationMenuRoot } from './NavigationMenuRoot.vue';
+export { default as NavigationMenuSub } from './NavigationMenuSub.vue';
+export { default as NavigationMenuList } from './NavigationMenuList.vue';
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue';
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue';
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue';
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue';
+export { default as NavigationMenuContentImpl } from './NavigationMenuContentImpl.vue';
+export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue';
+export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue';
+
+export {
+  useNavigationMenuContext,
+  useNavigationMenuItemContext,
+} from './context';
+
+export type {
+  NavigationMenuContext,
+  NavigationMenuItemContext,
+} from './context';
+
+export type { NavigationMenuRootProps, NavigationMenuRootEmits } from './NavigationMenuRoot.vue';
+export type { NavigationMenuSubProps, NavigationMenuSubEmits } from './NavigationMenuSub.vue';
+export type { NavigationMenuListProps } from './NavigationMenuList.vue';
+export type { NavigationMenuItemProps } from './NavigationMenuItem.vue';
+export type { NavigationMenuTriggerProps } from './NavigationMenuTrigger.vue';
+export type { NavigationMenuLinkProps, NavigationMenuLinkEmits } from './NavigationMenuLink.vue';
+export type { NavigationMenuContentProps, NavigationMenuContentEmits } from './NavigationMenuContent.vue';
+export type { NavigationMenuContentImplProps, NavigationMenuContentImplEmits } from './NavigationMenuContentImpl.vue';
+export type { NavigationMenuViewportProps } from './NavigationMenuViewport.vue';
+export type { NavigationMenuIndicatorProps } from './NavigationMenuIndicator.vue';
diff --git a/vue/primitives/src/navigation-menu/utils.ts b/vue/primitives/src/navigation-menu/utils.ts
new file mode 100644
index 0000000..cbfe734
--- /dev/null
+++ b/vue/primitives/src/navigation-menu/utils.ts
@@ -0,0 +1,51 @@
+/**
+ * Returns the open state string for the current item value vs the active menu value.
+ */
+export function getOpenState(value: string, itemValue: string): 'open' | 'closed' {
+  return value === itemValue ? 'open' : 'closed';
+}
+
+export function makeTriggerId(baseId: string, value: string): string {
+  return `${baseId}-trigger-${value}`;
+}
+
+export function makeContentId(baseId: string, value: string): string {
+  return `${baseId}-content-${value}`;
+}
+
+/** Only call `handler` when the pointer device is a mouse. */
+export function whenMouse<E extends PointerEvent>(handler: (event: E) => void): (event: E) => void {
+  return (event: E) => {
+    if (event.pointerType === 'mouse') handler(event);
+  };
+}
+
+/**
+ * Temporarily removes elements from the tab order while content is closed, returning
+ * a restore function. Used so background content keeps its tabindex when re-opened.
+ */
+export function removeFromTabOrder(candidates: HTMLElement[]): () => void {
+  for (const c of candidates) {
+    c.dataset['tabindex'] = c.getAttribute('tabindex') ?? '';
+    c.setAttribute('tabindex', '-1');
+  }
+  return () => {
+    for (const c of candidates) {
+      const prev = c.dataset['tabindex'] ?? '';
+      if (prev === '') c.removeAttribute('tabindex');
+      else c.setAttribute('tabindex', prev);
+    }
+  };
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+/** Selector identifying the link/item nodes for arrow navigation inside content. */
+export const COLLECTION_ITEM_ATTR = 'data-primitives-collection-item';
+
+/** Custom event dispatched by a `NavigationMenuLink` selection. */
+export const LINK_SELECT_EVENT = 'navigationMenu.linkSelect';
+/** Custom event bubbled to the root content when an item dismisses the menu. */
+export const EVENT_ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss';
diff --git a/vue/primitives/src/number-field/NumberFieldDecrement.vue b/vue/primitives/src/number-field/NumberFieldDecrement.vue
new file mode 100644
index 0000000..fa7e10f
--- /dev/null
+++ b/vue/primitives/src/number-field/NumberFieldDecrement.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface NumberFieldDecrementProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useNumberFieldContext } from './context';
+
+const { as = 'button' } = defineProps<NumberFieldDecrementProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useNumberFieldContext();
+
+function onClick() {
+  ctx.decrement();
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    tabindex="-1"
+    aria-hidden="true"
+    :disabled="ctx.disabled.value || ctx.readonly.value || undefined"
+    :data-disabled="(ctx.disabled.value || ctx.readonly.value) ? '' : undefined"
+    @click="onClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/number-field/NumberFieldIncrement.vue b/vue/primitives/src/number-field/NumberFieldIncrement.vue
new file mode 100644
index 0000000..6bca85d
--- /dev/null
+++ b/vue/primitives/src/number-field/NumberFieldIncrement.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface NumberFieldIncrementProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useNumberFieldContext } from './context';
+
+const { as = 'button' } = defineProps<NumberFieldIncrementProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useNumberFieldContext();
+
+function onClick() {
+  ctx.increment();
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    tabindex="-1"
+    aria-hidden="true"
+    :disabled="ctx.disabled.value || ctx.readonly.value || undefined"
+    :data-disabled="(ctx.disabled.value || ctx.readonly.value) ? '' : undefined"
+    @click="onClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/number-field/NumberFieldInput.vue b/vue/primitives/src/number-field/NumberFieldInput.vue
new file mode 100644
index 0000000..8a80e45
--- /dev/null
+++ b/vue/primitives/src/number-field/NumberFieldInput.vue
@@ -0,0 +1,87 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface NumberFieldInputProps extends PrimitiveProps {
+
+  placeholder?: string;
+  name?: string;
+  required?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useNumberFieldContext } from './context';
+
+const props = defineProps<NumberFieldInputProps>();
+const ctx = useNumberFieldContext();
+
+const displayValue = computed(() => ctx.value.value === null ? '' : String(ctx.value.value));
+
+function parse(raw: string): number | null {
+  const trimmed = raw.trim();
+  if (trimmed === '') return null;
+  const n = Number(trimmed);
+  return Number.isFinite(n) ? n : null;
+}
+
+function onInput(event: Event): void {
+  const target = event.target as HTMLInputElement;
+  ctx.setValue(parse(target.value));
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (ctx.disabled.value || ctx.readonly.value) return;
+  switch (event.key) {
+    case 'ArrowUp':
+      event.preventDefault();
+      ctx.increment();
+      break;
+    case 'ArrowDown':
+      event.preventDefault();
+      ctx.decrement();
+      break;
+    case 'PageUp':
+      event.preventDefault();
+      ctx.increment(ctx.step.value * 10);
+      break;
+    case 'PageDown':
+      event.preventDefault();
+      ctx.decrement(ctx.step.value * 10);
+      break;
+    case 'Home':
+      if (ctx.min.value !== undefined) {
+        event.preventDefault();
+        ctx.setValue(ctx.min.value);
+      }
+      break;
+    case 'End':
+      if (ctx.max.value !== undefined) {
+        event.preventDefault();
+        ctx.setValue(ctx.max.value);
+      }
+      break;
+  }
+}
+</script>
+
+<template>
+  <input
+    :id="ctx.inputId"
+    role="spinbutton"
+    inputmode="decimal"
+    autocomplete="off"
+    :aria-valuemin="ctx.min.value"
+    :aria-valuemax="ctx.max.value"
+    :aria-valuenow="ctx.value.value ?? undefined"
+    :aria-disabled="ctx.disabled.value || undefined"
+    :aria-readonly="ctx.readonly.value || undefined"
+    :disabled="ctx.disabled.value || undefined"
+    :readonly="ctx.readonly.value || undefined"
+    :placeholder="props.placeholder"
+    :name="props.name"
+    :required="props.required || undefined"
+    :value="displayValue"
+    @input="onInput"
+    @keydown="onKeyDown"
+  >
+</template>
diff --git a/vue/primitives/src/number-field/NumberFieldRoot.vue b/vue/primitives/src/number-field/NumberFieldRoot.vue
new file mode 100644
index 0000000..a598fc5
--- /dev/null
+++ b/vue/primitives/src/number-field/NumberFieldRoot.vue
@@ -0,0 +1,89 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface NumberFieldRootProps extends PrimitiveProps {
+  modelValue?: number | null;
+  defaultValue?: number | null;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  readonly?: boolean;
+
+}
+
+export interface NumberFieldRootEmits {
+  'update:modelValue': [value: number | null];
+  valueChange: [value: number | null];
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { ref, toRef, watch } from 'vue';
+import { provideNumberFieldContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { clamp } from '@robonen/stdlib';
+import { useId } from '../config-provider';
+
+const { step = 1, disabled = false, readonly = false, min, max, modelValue, defaultValue, as = 'div' } = defineProps<NumberFieldRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<NumberFieldRootEmits>();
+
+const localValue = ref<number | null>(
+  modelValue !== undefined ? modelValue : (defaultValue ?? null),
+);
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  if (v === localValue.value) return;
+  localValue.value = v;
+});
+
+function setValue(v: number | null): void {
+  if (disabled || readonly) return;
+  const next = v === null ? null : clamp(v, min ?? -Infinity, max ?? Infinity);
+  if (next === localValue.value) return;
+  localValue.value = next;
+  emit('update:modelValue', next);
+  emit('valueChange', next);
+}
+
+function increment(delta = step): void {
+  const base = localValue.value ?? min ?? 0;
+  setValue(base + delta);
+}
+function decrement(delta = step): void {
+  const base = localValue.value ?? min ?? 0;
+  setValue(base - delta);
+}
+
+const inputId = useId(undefined, 'number-field-input').value;
+
+provideNumberFieldContext({
+  value: localValue,
+  // Identity passthroughs via `toRef` — reactive without `computed`'s effect/cache.
+  min: toRef(() => min),
+  max: toRef(() => max),
+  step: toRef(() => step),
+  disabled: toRef(() => disabled),
+  readonly: toRef(() => readonly),
+  increment,
+  decrement,
+  setValue,
+  inputId,
+});
+defineExpose({ value: localValue, increment, decrement, setValue });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-disabled="disabled ? '' : undefined"
+    :data-readonly="readonly ? '' : undefined"
+  >
+    <slot :value="localValue" :increment="increment" :decrement="decrement" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/number-field/__test__/NumberField.test.ts b/vue/primitives/src/number-field/__test__/NumberField.test.ts
new file mode 100644
index 0000000..0adbf89
--- /dev/null
+++ b/vue/primitives/src/number-field/__test__/NumberField.test.ts
@@ -0,0 +1,130 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import type { Component } from 'vue';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import {
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldRoot,
+} from '../index';
+
+function mountField(props: Record<string, unknown> = {}) {
+  const model = ref<number | null | undefined>(undefined);
+  const Harness = defineComponent({
+    setup: () => () => h(NumberFieldRoot, {
+      modelValue: model.value,
+      'onUpdate:modelValue': (v: number | null) => { model.value = v; },
+      ...props,
+    }, {
+      default: () => [
+        h(NumberFieldInput as Component, { id: 'inp' }),
+        h(NumberFieldIncrement, { id: 'inc' }, { default: () => '+' }),
+        h(NumberFieldDecrement, { id: 'dec' }, { default: () => '−' }),
+      ],
+    }),
+  });
+  return { wrapper: mount(Harness, { attachTo: document.body }), model };
+}
+
+function press(el: Element, key: string): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('NumberField', () => {
+  it('input has role=spinbutton with ARIA attrs', () => {
+    const { wrapper } = mountField({ min: 0, max: 10, defaultValue: 5 });
+    const input = document.querySelector<HTMLInputElement>('#inp')!;
+    expect(input.getAttribute('role')).toBe('spinbutton');
+    expect(input.getAttribute('aria-valuemin')).toBe('0');
+    expect(input.getAttribute('aria-valuemax')).toBe('10');
+    expect(input.getAttribute('aria-valuenow')).toBe('5');
+    expect(input.value).toBe('5');
+    wrapper.unmount();
+  });
+
+  it('increment/decrement buttons change value', async () => {
+    const { wrapper, model } = mountField({ defaultValue: 0, step: 2 });
+    await nextTick();
+    (document.querySelector<HTMLButtonElement>('#inc')!).click();
+    await nextTick();
+    expect(model.value).toBe(2);
+    (document.querySelector<HTMLButtonElement>('#dec')!).click();
+    await nextTick();
+    expect(model.value).toBe(0);
+    wrapper.unmount();
+  });
+
+  it('ArrowUp / ArrowDown step, clamped by min/max', async () => {
+    const { wrapper, model } = mountField({ min: 0, max: 3, defaultValue: 2 });
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('#inp')!;
+    press(input, 'ArrowUp');
+    await nextTick();
+    expect(model.value).toBe(3);
+    press(input, 'ArrowUp');
+    await nextTick();
+    expect(model.value).toBe(3);
+    press(input, 'ArrowDown');
+    press(input, 'ArrowDown');
+    press(input, 'ArrowDown');
+    press(input, 'ArrowDown');
+    await nextTick();
+    expect(model.value).toBe(0);
+    wrapper.unmount();
+  });
+
+  it('PageUp/PageDown step by 10×', async () => {
+    const { wrapper, model } = mountField({ defaultValue: 10, step: 1 });
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('#inp')!;
+    press(input, 'PageUp');
+    await nextTick();
+    expect(model.value).toBe(20);
+    press(input, 'PageDown');
+    await nextTick();
+    expect(model.value).toBe(10);
+    wrapper.unmount();
+  });
+
+  it('Home/End jump to min/max when defined', async () => {
+    const { wrapper, model } = mountField({ min: 0, max: 100, defaultValue: 50 });
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('#inp')!;
+    press(input, 'End');
+    await nextTick();
+    expect(model.value).toBe(100);
+    press(input, 'Home');
+    await nextTick();
+    expect(model.value).toBe(0);
+    wrapper.unmount();
+  });
+
+  it('typing updates value; invalid = null', async () => {
+    const { wrapper, model } = mountField({ defaultValue: 0 });
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('#inp')!;
+    input.value = '42';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await nextTick();
+    expect(model.value).toBe(42);
+    input.value = '';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await nextTick();
+    expect(model.value).toBeNull();
+    input.value = 'abc';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await nextTick();
+    expect(model.value).toBeNull();
+    wrapper.unmount();
+  });
+
+  it('disabled blocks changes', async () => {
+    const { wrapper, model } = mountField({ disabled: true, defaultValue: 5 });
+    await nextTick();
+    (document.querySelector<HTMLButtonElement>('#inc')!).click();
+    await nextTick();
+    expect(model.value).toBeUndefined();
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/number-field/context.ts b/vue/primitives/src/number-field/context.ts
new file mode 100644
index 0000000..aee578a
--- /dev/null
+++ b/vue/primitives/src/number-field/context.ts
@@ -0,0 +1,20 @@
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface NumberFieldContext {
+  value: Ref<number | null>;
+  min: Ref<number | undefined>;
+  max: Ref<number | undefined>;
+  step: Ref<number>;
+  disabled: Ref<boolean>;
+  readonly: Ref<boolean>;
+  increment: (delta?: number) => void;
+  decrement: (delta?: number) => void;
+  setValue: (v: number | null) => void;
+  inputId: string;
+}
+
+const ctx = useContextFactory<NumberFieldContext>('NumberFieldContext');
+
+export const provideNumberFieldContext = ctx.provide;
+export const useNumberFieldContext = ctx.inject;
diff --git a/vue/primitives/src/number-field/index.ts b/vue/primitives/src/number-field/index.ts
new file mode 100644
index 0000000..bee87c0
--- /dev/null
+++ b/vue/primitives/src/number-field/index.ts
@@ -0,0 +1,8 @@
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue';
+export { default as NumberFieldInput } from './NumberFieldInput.vue';
+export { default as NumberFieldRoot } from './NumberFieldRoot.vue';
+export type { NumberFieldDecrementProps } from './NumberFieldDecrement.vue';
+export type { NumberFieldIncrementProps } from './NumberFieldIncrement.vue';
+export type { NumberFieldInputProps } from './NumberFieldInput.vue';
+export type { NumberFieldRootEmits, NumberFieldRootProps } from './NumberFieldRoot.vue';
diff --git a/vue/primitives/src/pagination/PaginationEllipsis.vue b/vue/primitives/src/pagination/PaginationEllipsis.vue
index 2e933ee..d131ff9 100644
--- a/vue/primitives/src/pagination/PaginationEllipsis.vue
+++ b/vue/primitives/src/pagination/PaginationEllipsis.vue
@@ -5,8 +5,8 @@ export interface PaginationEllipsisProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { useForwardExpose } from '@robonen/vue';
 import { Primitive } from '@/primitive';
+import { useForwardExpose } from '@robonen/vue';
 
 const { as = 'span' as const } = defineProps<PaginationEllipsisProps>();
 
diff --git a/vue/primitives/src/pagination/PaginationFirst.vue b/vue/primitives/src/pagination/PaginationFirst.vue
index 94cb7ca..888defe 100644
--- a/vue/primitives/src/pagination/PaginationFirst.vue
+++ b/vue/primitives/src/pagination/PaginationFirst.vue
@@ -5,10 +5,10 @@ export interface PaginationFirstProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useForwardExpose } from '@robonen/vue';
 import { Primitive } from '@/primitive';
+import { computed } from 'vue';
 import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
 
 const { as = 'button' as const } = defineProps<PaginationFirstProps>();
 
diff --git a/vue/primitives/src/pagination/PaginationLast.vue b/vue/primitives/src/pagination/PaginationLast.vue
index a2f7a4c..f74324a 100644
--- a/vue/primitives/src/pagination/PaginationLast.vue
+++ b/vue/primitives/src/pagination/PaginationLast.vue
@@ -5,10 +5,10 @@ export interface PaginationLastProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useForwardExpose } from '@robonen/vue';
 import { Primitive } from '@/primitive';
+import { computed } from 'vue';
 import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
 
 const { as = 'button' as const } = defineProps<PaginationLastProps>();
 
diff --git a/vue/primitives/src/pagination/PaginationList.vue b/vue/primitives/src/pagination/PaginationList.vue
index 43cf5a3..5878bdb 100644
--- a/vue/primitives/src/pagination/PaginationList.vue
+++ b/vue/primitives/src/pagination/PaginationList.vue
@@ -5,12 +5,12 @@ export interface PaginationListProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useForwardExpose } from '@robonen/vue';
-import { Primitive } from '@/primitive';
-import { injectPaginationContext } from './context';
-import { getRange } from './utils';
 import type { PaginationItem } from './utils';
+import { Primitive } from '@/primitive';
+import { computed } from 'vue';
+import { getRange } from './utils';
+import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
 
 const { as = 'div' as const } = defineProps<PaginationListProps>();
 
diff --git a/vue/primitives/src/pagination/PaginationListItem.vue b/vue/primitives/src/pagination/PaginationListItem.vue
index 704017a..9333373 100644
--- a/vue/primitives/src/pagination/PaginationListItem.vue
+++ b/vue/primitives/src/pagination/PaginationListItem.vue
@@ -7,10 +7,10 @@ export interface PaginationListItemProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useForwardExpose } from '@robonen/vue';
 import { Primitive } from '@/primitive';
+import { computed } from 'vue';
 import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
 
 const { as = 'button' as const, value } = defineProps<PaginationListItemProps>();
 
@@ -18,19 +18,18 @@ const { forwardRef } = useForwardExpose();
 const ctx = injectPaginationContext();
 
 const isSelected = computed(() => ctx.currentPage.value === value);
-const disabled = computed(() => ctx.disabled.value);
 
 const attrs = computed(() => ({
   'data-type': 'page',
   'aria-label': `Page ${value}`,
   'aria-current': isSelected.value ? 'page' as const : undefined,
   'data-selected': isSelected.value ? 'true' : undefined,
-  disabled: disabled.value,
+  disabled: ctx.disabled.value,
   type: as === 'button' ? 'button' as const : undefined,
 }));
 
 function handleClick() {
-  if (!disabled.value) {
+  if (!ctx.disabled.value) {
     ctx.onPageChange(value);
   }
 }
diff --git a/vue/primitives/src/pagination/PaginationNext.vue b/vue/primitives/src/pagination/PaginationNext.vue
index fab3bd4..6f4c438 100644
--- a/vue/primitives/src/pagination/PaginationNext.vue
+++ b/vue/primitives/src/pagination/PaginationNext.vue
@@ -5,10 +5,10 @@ export interface PaginationNextProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useForwardExpose } from '@robonen/vue';
 import { Primitive } from '@/primitive';
+import { computed } from 'vue';
 import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
 
 const { as = 'button' as const } = defineProps<PaginationNextProps>();
 
diff --git a/vue/primitives/src/pagination/PaginationPrev.vue b/vue/primitives/src/pagination/PaginationPrev.vue
index c802afa..87b4082 100644
--- a/vue/primitives/src/pagination/PaginationPrev.vue
+++ b/vue/primitives/src/pagination/PaginationPrev.vue
@@ -5,10 +5,10 @@ export interface PaginationPrevProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useForwardExpose } from '@robonen/vue';
 import { Primitive } from '@/primitive';
+import { computed } from 'vue';
 import { injectPaginationContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
 
 const { as = 'button' as const } = defineProps<PaginationPrevProps>();
 
diff --git a/vue/primitives/src/pagination/PaginationRoot.vue b/vue/primitives/src/pagination/PaginationRoot.vue
index 280d388..36feb45 100644
--- a/vue/primitives/src/pagination/PaginationRoot.vue
+++ b/vue/primitives/src/pagination/PaginationRoot.vue
@@ -12,10 +12,10 @@ export interface PaginationRootProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { toRef } from 'vue';
 import { useForwardExpose, useOffsetPagination } from '@robonen/vue';
 import { Primitive } from '@/primitive';
 import { providePaginationContext } from './context';
+import { toRef } from 'vue';
 
 const {
   as = 'nav' as const,
diff --git a/vue/primitives/src/pin-input/PinInputInput.vue b/vue/primitives/src/pin-input/PinInputInput.vue
new file mode 100644
index 0000000..fa0cc5d
--- /dev/null
+++ b/vue/primitives/src/pin-input/PinInputInput.vue
@@ -0,0 +1,133 @@
+<script lang="ts">
+const DIGIT_RE = /\d/;
+const NON_DIGIT_G = /\D/g;
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, useTemplateRef, watch } from 'vue';
+import { usePinInputContext } from './context';
+
+interface Props {
+  index: number;
+}
+
+const props = defineProps<Props>();
+const ctx = usePinInputContext();
+const el = useTemplateRef<HTMLInputElement>('el');
+
+watch(el, (curr, prev) => {
+  if (prev)
+    ctx.unregister(prev);
+  if (curr)
+    ctx.register(curr);
+});
+
+onBeforeUnmount(() => {
+  if (el.value)
+    ctx.unregister(el.value);
+});
+
+const displayed = computed(() => {
+  const ch = ctx.value.value[props.index] ?? '';
+  if (!ch)
+    return '';
+  return ctx.mask.value ? '•' : ch;
+});
+
+// `inputType` / `inputMode` were thin ternary wrappers — inline in template.
+
+function onInput(e: Event): void {
+  const target = e.target as HTMLInputElement;
+  const raw = target.value;
+  // keep only the last typed character
+  let ch = raw.length > 0 ? raw[raw.length - 1]! : '';
+  if (ctx.type.value === 'number' && ch && !DIGIT_RE.test(ch))
+    ch = '';
+  ctx.setAt(props.index, ch);
+  // re-sync DOM input since we overwrite with displayed
+  target.value = ch ? (ctx.mask.value ? '•' : ch) : '';
+  if (ch && props.index < ctx.length.value - 1)
+    ctx.focusIndex(props.index + 1);
+}
+
+function onKeyDown(e: KeyboardEvent): void {
+  const i = props.index;
+  const n = ctx.length.value;
+  switch (e.key) {
+    case 'Backspace': {
+      const current = ctx.value.value[i] ?? '';
+      if (current) {
+        ctx.clearAt(i);
+      }
+      else if (i > 0) {
+        ctx.focusIndex(i - 1);
+        ctx.clearAt(i - 1);
+      }
+      e.preventDefault();
+      break;
+    }
+    case 'Delete': {
+      ctx.clearAt(i);
+      e.preventDefault();
+      break;
+    }
+    case 'ArrowLeft': {
+      if (i > 0)
+        ctx.focusIndex(i - 1);
+      e.preventDefault();
+      break;
+    }
+    case 'ArrowRight': {
+      if (i < n - 1)
+        ctx.focusIndex(i + 1);
+      e.preventDefault();
+      break;
+    }
+    case 'Home': {
+      ctx.focusIndex(0);
+      e.preventDefault();
+      break;
+    }
+    case 'End': {
+      ctx.focusIndex(n - 1);
+      e.preventDefault();
+      break;
+    }
+  }
+}
+
+function onPaste(e: ClipboardEvent): void {
+  const data = e.clipboardData?.getData('text') ?? '';
+  if (!data)
+    return;
+  e.preventDefault();
+  const chars = ctx.type.value === 'number'
+    ? data.replace(NON_DIGIT_G, '').split('')
+    : data.split('');
+  let idx = props.index;
+  for (const ch of chars) {
+    if (idx >= ctx.length.value)
+      break;
+    ctx.setAt(idx, ch);
+    idx++;
+  }
+  ctx.focusIndex(Math.min(idx, ctx.length.value - 1));
+}
+</script>
+
+<template>
+  <input
+    ref="el"
+    :type="ctx.mask.value ? 'password' : 'text'"
+    :inputmode="ctx.type.value === 'number' ? 'numeric' : 'text'"
+    :value="displayed"
+    :placeholder="ctx.placeholder.value"
+    :disabled="ctx.disabled.value"
+    :autocomplete="ctx.otp.value ? 'one-time-code' : 'off'"
+    :data-index="props.index"
+    maxlength="1"
+    @input="onInput"
+    @keydown="onKeyDown"
+    @paste="onPaste"
+  >
+</template>
diff --git a/vue/primitives/src/pin-input/PinInputRoot.vue b/vue/primitives/src/pin-input/PinInputRoot.vue
new file mode 100644
index 0000000..bdf54b2
--- /dev/null
+++ b/vue/primitives/src/pin-input/PinInputRoot.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import { Primitive } from '../primitive';
+import { computed, ref, toRef, watch } from 'vue';
+import { providePinInputContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+interface Props extends PrimitiveProps {
+  modelValue?: string[];
+  defaultValue?: string[];
+  length?: number;
+  mask?: boolean;
+  otp?: boolean;
+  type?: 'text' | 'number';
+  disabled?: boolean;
+  placeholder?: string;
+
+}
+
+const {
+  modelValue,
+  defaultValue,
+  length = 4,
+  mask = false,
+  otp = false,
+  type = 'text',
+  disabled = false,
+  placeholder = '',
+  as = 'div',
+} = defineProps<Props>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string[]): void;
+  (e: 'complete', v: string): void;
+}>();
+
+const lengthRef = computed(() => Math.max(1, length | 0));
+
+function normalize(v: readonly string[] | undefined): string[] {
+  const out = Array.from<string>({ length: lengthRef.value }, () => '');
+  if (!v)
+    return out;
+  for (let i = 0; i < Math.min(v.length, lengthRef.value); i++)
+    out[i] = (v[i] ?? '').slice(0, 1);
+  return out;
+}
+
+const value = ref<string[]>(normalize(modelValue ?? defaultValue));
+
+watch(() => modelValue, (v) => {
+  if (v === undefined)
+    return;
+  const nv = normalize(v);
+  if (nv.join('\u0000') !== value.value.join('\u0000'))
+    value.value = nv;
+});
+
+watch(lengthRef, (n) => {
+  if (value.value.length === n)
+    return;
+  const next = Array.from<string>({ length: n }, () => '');
+  for (let i = 0; i < Math.min(value.value.length, n); i++)
+    next[i] = value.value[i]!;
+  value.value = next;
+});
+
+const inputs = ref<HTMLInputElement[]>([]);
+
+function register(el: HTMLInputElement): void {
+  if (!inputs.value.includes(el))
+    inputs.value.push(el);
+}
+function unregister(el: HTMLInputElement): void {
+  const i = inputs.value.indexOf(el);
+  if (i !== -1)
+    inputs.value.splice(i, 1);
+}
+
+function emitValue(v: string[]): void {
+  emit('update:modelValue', v);
+  if (v.every(ch => ch.length === 1))
+    emit('complete', v.join(''));
+}
+
+function setAt(index: number, char: string): void {
+  if (disabled)
+    return;
+  const ch = char.slice(0, 1);
+  if (ch && type === 'number' && !/\d/.test(ch))
+    return;
+  const next = value.value.slice();
+  next[index] = ch;
+  value.value = next;
+  emitValue(next);
+}
+
+function clearAt(index: number): void {
+  if (disabled)
+    return;
+  const next = value.value.slice();
+  next[index] = '';
+  value.value = next;
+  emitValue(next);
+}
+
+function focusIndex(index: number): void {
+  const el = inputs.value[index];
+  if (el) {
+    el.focus();
+    try {
+      el.select();
+    }
+    catch {
+      /* noop */
+    }
+  }
+}
+
+providePinInputContext({
+  value,
+  length: lengthRef,
+  mask: toRef(() => mask),
+  otp: toRef(() => otp),
+  type: toRef(() => type),
+  disabled: toRef(() => disabled),
+  placeholder: toRef(() => placeholder),
+  inputs,
+  register,
+  unregister,
+  setAt,
+  clearAt,
+  focusIndex,
+});
+
+defineSlots<{
+  default: (props: { value: string[]; isComplete: boolean }) => unknown;
+}>();
+
+const isComplete = computed(() => value.value.every(ch => ch.length === 1));
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :as="as" role="group" :data-disabled="disabled ? '' : undefined">
+    <slot :value="value" :is-complete="isComplete" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/pin-input/__test__/PinInput.test.ts b/vue/primitives/src/pin-input/__test__/PinInput.test.ts
new file mode 100644
index 0000000..1259942
--- /dev/null
+++ b/vue/primitives/src/pin-input/__test__/PinInput.test.ts
@@ -0,0 +1,125 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import type { Component } from 'vue';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { PinInputInput, PinInputRoot } from '../index';
+
+function mountPin(props: Record<string, unknown> = {}) {
+  const model = ref<string[] | undefined>(undefined);
+  const completed = ref<string | null>(null);
+  const Harness = defineComponent({
+    setup: () => () => h(PinInputRoot, {
+      modelValue: model.value,
+      length: 4,
+      'onUpdate:modelValue': (v: string[]) => { model.value = v; },
+      onComplete: (v: string) => { completed.value = v; },
+      ...props,
+    }, {
+      default: () => [0, 1, 2, 3].map(i => h(PinInputInput as Component, { key: i, index: i })),
+    }),
+  });
+  const wrapper = mount(Harness, { attachTo: document.body });
+  return { wrapper, model, completed };
+}
+
+function inputs(): HTMLInputElement[] {
+  return Array.from(document.querySelectorAll<HTMLInputElement>('input[data-index]'));
+}
+
+function type(el: HTMLInputElement, ch: string): void {
+  el.value = ch;
+  el.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function key(el: Element, k: string): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }));
+}
+
+describe('PinInput', () => {
+  it('renders N inputs based on length', () => {
+    const { wrapper } = mountPin();
+    expect(inputs().length).toBe(4);
+    wrapper.unmount();
+  });
+
+  it('typing auto-advances focus and fires complete', async () => {
+    const { wrapper, model, completed } = mountPin();
+    await nextTick();
+    const [a, b, c, d] = inputs();
+    type(a!, '1');
+    await nextTick();
+    expect(document.activeElement).toBe(b);
+    type(b!, '2');
+    type(c!, '3');
+    type(d!, '4');
+    await nextTick();
+    expect(model.value).toEqual(['1', '2', '3', '4']);
+    expect(completed.value).toBe('1234');
+    wrapper.unmount();
+  });
+
+  it('Backspace on empty moves to previous and clears', async () => {
+    const { wrapper, model } = mountPin();
+    await nextTick();
+    const [a, b] = inputs();
+    type(a!, '1');
+    await nextTick();
+    b!.focus();
+    key(b!, 'Backspace');
+    await nextTick();
+    expect(document.activeElement).toBe(a);
+    expect(model.value![0]).toBe('');
+    wrapper.unmount();
+  });
+
+  it('ArrowLeft/ArrowRight navigate', async () => {
+    const { wrapper } = mountPin();
+    await nextTick();
+    const [a, b, c] = inputs();
+    b!.focus();
+    key(b!, 'ArrowLeft');
+    expect(document.activeElement).toBe(a);
+    key(a!, 'ArrowRight');
+    expect(document.activeElement).toBe(b);
+    key(b!, 'ArrowRight');
+    expect(document.activeElement).toBe(c);
+    wrapper.unmount();
+  });
+
+  it('type=number rejects non-digit input', async () => {
+    const { wrapper, model } = mountPin({ type: 'number' });
+    await nextTick();
+    const [a] = inputs();
+    type(a!, 'x');
+    await nextTick();
+    expect(model.value?.[0] ?? '').toBe('');
+    type(a!, '7');
+    await nextTick();
+    expect(model.value![0]).toBe('7');
+    wrapper.unmount();
+  });
+
+  it('paste fills across inputs', async () => {
+    const { wrapper, model, completed } = mountPin();
+    await nextTick();
+    const [a] = inputs();
+    a!.focus();
+    const event = new Event('paste', { bubbles: true, cancelable: true }) as unknown as ClipboardEvent;
+    Object.defineProperty(event, 'clipboardData', {
+      value: { getData: (_type: string) => '9876' },
+    });
+    a!.dispatchEvent(event);
+    await nextTick();
+    expect(model.value).toEqual(['9', '8', '7', '6']);
+    expect(completed.value).toBe('9876');
+    wrapper.unmount();
+  });
+
+  it('mask renders password type for each input', async () => {
+    const { wrapper } = mountPin({ mask: true });
+    await nextTick();
+    for (const el of inputs())
+      expect(el.getAttribute('type')).toBe('password');
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/pin-input/context.ts b/vue/primitives/src/pin-input/context.ts
new file mode 100644
index 0000000..c1bb67b
--- /dev/null
+++ b/vue/primitives/src/pin-input/context.ts
@@ -0,0 +1,23 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface PinInputContext {
+  value: Ref<string[]>;
+  length: ComputedRef<number>;
+  mask: ComputedRef<boolean>;
+  otp: ComputedRef<boolean>;
+  type: ComputedRef<'text' | 'number'>;
+  disabled: ComputedRef<boolean>;
+  placeholder: ComputedRef<string>;
+  inputs: Ref<HTMLInputElement[]>;
+  register: (el: HTMLInputElement) => void;
+  unregister: (el: HTMLInputElement) => void;
+  setAt: (index: number, char: string) => void;
+  clearAt: (index: number) => void;
+  focusIndex: (index: number) => void;
+}
+
+const ctx = useContextFactory<PinInputContext>('PinInputContext');
+
+export const providePinInputContext = ctx.provide;
+export const usePinInputContext = ctx.inject;
diff --git a/vue/primitives/src/pin-input/index.ts b/vue/primitives/src/pin-input/index.ts
new file mode 100644
index 0000000..51f8601
--- /dev/null
+++ b/vue/primitives/src/pin-input/index.ts
@@ -0,0 +1,3 @@
+export { default as PinInputInput } from './PinInputInput.vue';
+export { default as PinInputRoot } from './PinInputRoot.vue';
+export * from './context';
diff --git a/vue/primitives/src/popover/PopoverAnchor.vue b/vue/primitives/src/popover/PopoverAnchor.vue
new file mode 100644
index 0000000..6542f0a
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverAnchor.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PopperAnchorProps } from '../popper';
+
+export interface PopoverAnchorProps extends PopperAnchorProps {}
+</script>
+
+<script setup lang="ts">
+import { onBeforeMount, onUnmounted } from 'vue';
+import { PopperAnchor } from '../popper';
+import { usePopoverContext } from './context';
+
+const props = defineProps<PopoverAnchorProps>();
+
+const ctx = usePopoverContext();
+
+onBeforeMount(() => {
+  ctx.hasCustomAnchor.value = true;
+});
+onUnmounted(() => {
+  ctx.hasCustomAnchor.value = false;
+});
+</script>
+
+<template>
+  <PopperAnchor v-bind="props">
+    <slot />
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/popover/PopoverArrow.vue b/vue/primitives/src/popover/PopoverArrow.vue
new file mode 100644
index 0000000..5517e9c
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverArrow.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export interface PopoverArrowProps extends PopperArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperArrow } from '../popper';
+
+const { width = 10, height = 5 } = defineProps<PopoverArrowProps>();
+</script>
+
+<template>
+  <PopperArrow :width="width" :height="height">
+    <slot />
+  </PopperArrow>
+</template>
diff --git a/vue/primitives/src/popover/PopoverClose.vue b/vue/primitives/src/popover/PopoverClose.vue
new file mode 100644
index 0000000..2d2d564
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverClose.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface PopoverCloseProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { usePopoverContext } from './context';
+
+const { as = 'button' } = defineProps<PopoverCloseProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = usePopoverContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    @click="ctx.onOpenChange(false)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/popover/PopoverContent.vue b/vue/primitives/src/popover/PopoverContent.vue
new file mode 100644
index 0000000..2520b54
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverContent.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { PopoverContentImplEmits, PopoverContentImplProps } from './PopoverContentImpl.vue';
+
+export interface PopoverContentProps extends PopoverContentImplProps {
+  /** Keep mounted for CSS exit animations. */
+  forceMount?: boolean;
+}
+
+export type PopoverContentEmits = PopoverContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import PopoverContentModal from './PopoverContentModal.vue';
+import PopoverContentNonModal from './PopoverContentNonModal.vue';
+import { Presence } from '../presence';
+import { usePopoverContext } from './context';
+
+const { forceMount = false, ...contentProps } = defineProps<PopoverContentProps>();
+const emit = defineEmits<PopoverContentEmits>();
+
+const ctx = usePopoverContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <PopoverContentModal
+      v-if="ctx.modal.value"
+      v-bind="contentProps"
+      @open-auto-focus="emit('openAutoFocus', $event)"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+    >
+      <slot />
+    </PopoverContentModal>
+    <PopoverContentNonModal
+      v-else
+      v-bind="contentProps"
+      @open-auto-focus="emit('openAutoFocus', $event)"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="emit('dismiss')"
+    >
+      <slot />
+    </PopoverContentNonModal>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/popover/PopoverContentImpl.vue b/vue/primitives/src/popover/PopoverContentImpl.vue
new file mode 100644
index 0000000..7912c93
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverContentImpl.vue
@@ -0,0 +1,78 @@
+<script lang="ts">
+import type { DismissableLayerEmits } from '../dismissable-layer';
+import type { FocusScopeEmits } from '../focus-scope';
+import type { PopperContentProps } from '../popper';
+
+export interface PopoverContentImplProps extends PopperContentProps {
+  /** Trap focus inside the content (modal popovers). */
+  trapFocus?: boolean;
+  /** Block outside pointer events (modal popovers). */
+  disableOutsidePointerEvents?: boolean;
+}
+
+export interface PopoverContentImplEmits {
+  openAutoFocus: FocusScopeEmits['mountAutoFocus'];
+  closeAutoFocus: FocusScopeEmits['unmountAutoFocus'];
+  escapeKeyDown: DismissableLayerEmits['escapeKeyDown'];
+  pointerDownOutside: DismissableLayerEmits['pointerDownOutside'];
+  focusOutside: DismissableLayerEmits['focusOutside'];
+  interactOutside: DismissableLayerEmits['interactOutside'];
+  dismiss: [];
+}
+</script>
+
+<script setup lang="ts">
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { PopperContent } from '../popper';
+import { usePopoverContext } from './context';
+
+const {
+  trapFocus = false,
+  disableOutsidePointerEvents = false,
+  as = 'div',
+  ...popperProps
+} = defineProps<PopoverContentImplProps>();
+
+const emit = defineEmits<PopoverContentImplEmits>();
+
+const ctx = usePopoverContext();
+</script>
+
+<template>
+  <FocusScope
+    as="template"
+    :loop="true"
+    :trapped="trapFocus"
+    @mount-auto-focus="emit('openAutoFocus', $event)"
+    @unmount-auto-focus="emit('closeAutoFocus', $event)"
+  >
+    <DismissableLayer
+      as="template"
+      :disable-outside-pointer-events="disableOutsidePointerEvents"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @focus-outside="emit('focusOutside', $event)"
+      @interact-outside="emit('interactOutside', $event)"
+      @dismiss="ctx.onOpenChange(false)"
+    >
+      <PopperContent
+        :id="ctx.contentId.value"
+        :as="as"
+        v-bind="popperProps"
+        :data-state="ctx.open.value ? 'open' : 'closed'"
+        :aria-labelledby="ctx.triggerId.value"
+        role="dialog"
+        :style="{
+          '--popover-content-transform-origin': 'var(--popper-transform-origin)',
+          '--popover-content-available-width': 'var(--popper-available-width)',
+          '--popover-content-available-height': 'var(--popper-available-height)',
+          '--popover-trigger-width': 'var(--popper-anchor-width)',
+          '--popover-trigger-height': 'var(--popper-anchor-height)',
+        }"
+      >
+        <slot />
+      </PopperContent>
+    </DismissableLayer>
+  </FocusScope>
+</template>
diff --git a/vue/primitives/src/popover/PopoverContentModal.vue b/vue/primitives/src/popover/PopoverContentModal.vue
new file mode 100644
index 0000000..fac0124
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverContentModal.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PopoverContentImplEmits, PopoverContentImplProps } from './PopoverContentImpl.vue';
+import PopoverContentImpl from './PopoverContentImpl.vue';
+import { ref } from 'vue';
+import { useBodyScrollLock } from '@robonen/vue';
+import { usePopoverContext } from './context';
+
+const props = defineProps<PopoverContentImplProps>();
+const emit = defineEmits<PopoverContentImplEmits>();
+
+const ctx = usePopoverContext();
+const isRightClickOutsideRef = ref(false);
+
+useBodyScrollLock();
+</script>
+
+<template>
+  <PopoverContentImpl
+    v-bind="props"
+    :trap-focus="ctx.open.value"
+    disable-outside-pointer-events
+    @close-auto-focus.prevent="(event: Event) => {
+      emit('closeAutoFocus', event);
+      if (!isRightClickOutsideRef) ctx.triggerElement.value?.focus();
+    }"
+    @pointer-down-outside="(event: PointerEvent | MouseEvent) => {
+      emit('pointerDownOutside', event);
+      const ctrlLeftClick = event.button === 0 && event.ctrlKey === true;
+      isRightClickOutsideRef = event.button === 2 || ctrlLeftClick;
+    }"
+    @focus-outside.prevent
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @interact-outside="emit('interactOutside', $event)"
+    @dismiss="emit('dismiss')"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  >
+    <slot />
+  </PopoverContentImpl>
+</template>
diff --git a/vue/primitives/src/popover/PopoverContentNonModal.vue b/vue/primitives/src/popover/PopoverContentNonModal.vue
new file mode 100644
index 0000000..e7a7d39
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverContentNonModal.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { PopoverContentImplEmits, PopoverContentImplProps } from './PopoverContentImpl.vue';
+import PopoverContentImpl from './PopoverContentImpl.vue';
+import { ref } from 'vue';
+import { usePopoverContext } from './context';
+
+const props = defineProps<PopoverContentImplProps>();
+const emit = defineEmits<PopoverContentImplEmits>();
+
+const ctx = usePopoverContext();
+const hasInteractedOutsideRef = ref(false);
+const hasPointerDownOutsideRef = ref(false);
+</script>
+
+<template>
+  <PopoverContentImpl
+    v-bind="props"
+    :trap-focus="false"
+    :disable-outside-pointer-events="false"
+    @close-auto-focus="(event: Event) => {
+      emit('closeAutoFocus', event);
+      if (!event.defaultPrevented) {
+        if (!hasInteractedOutsideRef) ctx.triggerElement.value?.focus();
+        event.preventDefault();
+      }
+      hasInteractedOutsideRef = false;
+      hasPointerDownOutsideRef = false;
+    }"
+    @interact-outside="(event: PointerEvent | MouseEvent | FocusEvent) => {
+      emit('interactOutside', event);
+      if (!event.defaultPrevented) {
+        hasInteractedOutsideRef = true;
+        if (event.type === 'pointerdown') hasPointerDownOutsideRef = true;
+      }
+      const target = event.target as HTMLElement;
+      if (ctx.triggerElement.value?.contains(target)) event.preventDefault();
+      if (event.type === 'focusin' && hasPointerDownOutsideRef) event.preventDefault();
+    }"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="emit('pointerDownOutside', $event)"
+    @focus-outside="emit('focusOutside', $event)"
+    @dismiss="emit('dismiss')"
+    @open-auto-focus="emit('openAutoFocus', $event)"
+  >
+    <slot />
+  </PopoverContentImpl>
+</template>
diff --git a/vue/primitives/src/popover/PopoverPortal.vue b/vue/primitives/src/popover/PopoverPortal.vue
new file mode 100644
index 0000000..2ef8a8e
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { TeleportPrimitiveProps } from '../teleport';
+
+export interface PopoverPortalProps extends TeleportPrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import PortalPrimitive from '../teleport/Teleport.vue';
+
+const props = defineProps<PopoverPortalProps>();
+</script>
+
+<template>
+  <PortalPrimitive v-bind="props">
+    <slot />
+  </PortalPrimitive>
+</template>
diff --git a/vue/primitives/src/popover/PopoverRoot.vue b/vue/primitives/src/popover/PopoverRoot.vue
new file mode 100644
index 0000000..ee92449
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverRoot.vue
@@ -0,0 +1,56 @@
+<script lang="ts">
+export interface PopoverRootProps {
+  /** Uncontrolled initial open state. Ignored once `v-model:open` is bound. */
+  defaultOpen?: boolean;
+  /**
+   * Modal mode traps focus, locks scroll, and disables outside pointer events.
+   * @default false
+   */
+  modal?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { ref, toRef } from 'vue';
+import { PopperRoot } from '../popper';
+import { providePopoverContext } from './context';
+import { useId } from '../config-provider';
+
+defineOptions({ inheritAttrs: false });
+
+const { defaultOpen = false, modal = false } = defineProps<PopoverRootProps>();
+
+const localOpen = ref<boolean>(defaultOpen);
+
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+const triggerId = useId(undefined, 'popover-trigger');
+const contentId = useId(undefined, 'popover-content');
+const triggerElement = ref<HTMLElement>();
+const hasCustomAnchor = ref(false);
+
+providePopoverContext({
+  open,
+  // Identity passthrough via `toRef` — reactive without `computed`'s effect/cache.
+  modal: toRef(() => modal),
+  triggerId,
+  contentId,
+  triggerElement,
+  hasCustomAnchor,
+  onOpenChange: (value) => { open.value = value; },
+  onOpenToggle: () => { open.value = !open.value; },
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot :open="open" :close="() => open = false" />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/popover/PopoverTrigger.vue b/vue/primitives/src/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..8e87221
--- /dev/null
+++ b/vue/primitives/src/popover/PopoverTrigger.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface PopoverTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { onMounted } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { usePopoverContext } from './context';
+
+const { as = 'button' } = defineProps<PopoverTriggerProps>();
+
+const ctx = usePopoverContext();
+const { forwardRef, currentElement: triggerElement } = useForwardExpose();
+
+onMounted(() => {
+  ctx.triggerElement.value = triggerElement.value;
+});
+</script>
+
+<template>
+  <component :is="ctx.hasCustomAnchor.value ? Primitive : PopperAnchor" as="template">
+    <Primitive
+      :id="ctx.triggerId.value"
+      :ref="forwardRef"
+      :as="as"
+      :type="as === 'button' ? 'button' : undefined"
+      aria-haspopup="dialog"
+      :aria-expanded="ctx.open.value"
+      :aria-controls="ctx.contentId.value"
+      :data-state="ctx.open.value ? 'open' : 'closed'"
+      @click="ctx.onOpenToggle"
+    >
+      <slot />
+    </Primitive>
+  </component>
+</template>
diff --git a/vue/primitives/src/popover/__test__/Popover.test.ts b/vue/primitives/src/popover/__test__/Popover.test.ts
new file mode 100644
index 0000000..f9ccb2c
--- /dev/null
+++ b/vue/primitives/src/popover/__test__/Popover.test.ts
@@ -0,0 +1,169 @@
+import {
+  PopoverClose,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger,
+} from '../index';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { userEvent } from 'vitest/browser';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountPopover(options: {
+  open?: boolean;
+  defaultOpen?: boolean;
+  modal?: boolean;
+  onUpdateOpen?: (v: boolean) => void;
+} = {}) {
+  const Wrapper = defineComponent({
+    setup() {
+      return () => h(
+        PopoverRoot,
+        {
+          open: options.open,
+          defaultOpen: options.defaultOpen,
+          modal: options.modal,
+          'onUpdate:open': options.onUpdateOpen,
+        },
+        {
+          default: () => [
+            h(PopoverTrigger, null, { default: () => 'Toggle' }),
+            h(PopoverContent, { forceMount: true }, {
+              default: () => [
+                h('p', 'Popover body'),
+                h(PopoverClose, null, { default: () => 'Close' }),
+              ],
+            }),
+          ],
+        },
+      );
+    },
+  });
+
+  return track(mount(Wrapper, { attachTo: document.body }));
+}
+
+describe('Popover', () => {
+  it('renders trigger', () => {
+    const wrapper = mountPopover();
+    const trigger = wrapper.find('button');
+    expect(trigger.text()).toBe('Toggle');
+    expect(trigger.attributes('aria-haspopup')).toBe('dialog');
+    expect(trigger.attributes('data-state')).toBe('closed');
+  });
+
+  it('opens on trigger click', async () => {
+    const wrapper = mountPopover();
+    const trigger = wrapper.find('button');
+
+    await trigger.trigger('click');
+    await nextTick();
+
+    expect(trigger.attributes('aria-expanded')).toBe('true');
+    expect(trigger.attributes('data-state')).toBe('open');
+  });
+
+  it('toggles with v-model:open', async () => {
+    const onUpdate = vi.fn();
+    const wrapper = mountPopover({ onUpdateOpen: onUpdate });
+    const trigger = wrapper.find('button');
+
+    await trigger.trigger('click');
+    await nextTick();
+
+    expect(onUpdate).toHaveBeenCalledWith(true);
+  });
+
+  it('opens with defaultOpen', async () => {
+    const wrapper = mountPopover({ defaultOpen: true });
+    await nextTick();
+
+    const trigger = wrapper.find('button');
+    expect(trigger.attributes('data-state')).toBe('open');
+  });
+
+  it('close button closes the popover', async () => {
+    const onUpdate = vi.fn();
+    const wrapper = mountPopover({ defaultOpen: true, onUpdateOpen: onUpdate });
+    await nextTick();
+
+    const closeBtn = wrapper.findAll('button').find(b => b.text() === 'Close');
+    expect(closeBtn).toBeDefined();
+
+    await closeBtn!.trigger('click');
+    await nextTick();
+
+    expect(onUpdate).toHaveBeenCalledWith(false);
+  });
+
+  it('content has role="dialog"', async () => {
+    const wrapper = mountPopover({ defaultOpen: true });
+    await nextTick();
+
+    const content = wrapper.find('[role="dialog"]');
+    expect(content.exists()).toBe(true);
+    expect(content.attributes('data-state')).toBe('open');
+  });
+
+  it('closes on Escape key', async () => {
+    const onUpdate = vi.fn();
+    mountPopover({ defaultOpen: true, onUpdateOpen: onUpdate });
+    await nextTick();
+
+    await userEvent.keyboard('{Escape}');
+    await nextTick();
+
+    expect(onUpdate).toHaveBeenCalledWith(false);
+  });
+
+  it('supports controlled open', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        const open = ref(false);
+        return () => h(
+          PopoverRoot,
+          { open: open.value, 'onUpdate:open': (v: boolean) => { open.value = v; } },
+          {
+            default: () => [
+              h(PopoverTrigger, null, { default: () => 'Toggle' }),
+              h(PopoverContent, { forceMount: true }, { default: () => 'Body' }),
+            ],
+          },
+        );
+      },
+    });
+
+    const wrapper = track(mount(Wrapper, { attachTo: document.body }));
+    await nextTick();
+
+    expect(wrapper.find('button').attributes('data-state')).toBe('closed');
+
+    await wrapper.find('button').trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('button').attributes('data-state')).toBe('open');
+  });
+
+  it('trigger has aria-controls pointing to content id', async () => {
+    const wrapper = mountPopover({ defaultOpen: true });
+    await nextTick();
+
+    const trigger = wrapper.find('button');
+    const contentId = wrapper.find('[role="dialog"]').attributes('id');
+    expect(trigger.attributes('aria-controls')).toBe(contentId);
+  });
+});
diff --git a/vue/primitives/src/popover/__test__/__screenshots__/Popover.test.ts/Popover-closes-on-Escape-key-1.png b/vue/primitives/src/popover/__test__/__screenshots__/Popover.test.ts/Popover-closes-on-Escape-key-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1c5f0892e4109e688d20597df90050b15aaf93f
GIT binary patch
literal 4774
zcmeI0`Bzg{0>^`lP_@Xk=r9F=v36jr3bhEz5+Ze>E)WGP3X-4{5CTTUuq2SExGPXZ
zLD_<!iGYs)iU>&vN)-i7u!Mvq3&;|(kw8d7_IdUnm^pLiN6xuFyz|a^@4olF-_Q4Z
z&%J&iEW~cP({cy|Vz=k#o#7CORVW0qr0<I*;GMFIEkzK>Um<&T1|P~Sm+^6pcQN$t
z*+jH&)wK)D-NSo!o?lz|X4&T55AU0mOLqN>d8fzkQu_UG6Zcd74*DOci6Dt@*^<`-
z?>!?{9oWygbGLO*=@Yi6d*MZ=8{a<WtzvQM{?tv=UqQ=m5)l*_C(tm&ijq>adJ~>C
zY{>FI+;B{1QV<w$V$g?~zWPYY?09#<H{K+x^wRvxD;zsaa<ni*m{Z1|7)DVB{A7n*
zats=NUSY}0T-&XkOtt_b_J1zKNP$*nML?^eGC0>JM~*_G5D)ix(a$X?$0A7klg{%c
ze*SKLXD4V`s^sw}Pno4bIr^q<S1K2Q^YIcuwLI00NLsa3daGzUyYsx&_?x`?yt;G0
zU;C<so~4>X=SZV({%up8JflNZvE#~@L(TEM|13GyoHEpW-#gK~&<*RDuD&UGuk*#V
zBa~W(#WWC!<a0Q_D9)2Edl=0s9dL;v5)?QgRZ>?!_5QwUq6p6U0*U*6-1*dtG1*g=
zdCZ=0BtlQF#3mb{fT$s=rH(Yy?UKQJxTi=ko1YP=pRTcMM9B|`N|1P+Eo|ZCG6(na
zG^QUogKpf-as=7NePVuGldm7_4&wMH7@(W>m3RVsf(OjXE_=6Z<x7}J40n#@N(Kva
zeN%^@S<D9RZXC{FWxM9I#iZqG1UN-Zfytm%_@@}4@smAwO?q{G7Cx1TmDJwFTFasW
zwp6n2ZH^mzb=fD$!dKw6WSA*we)?lSDU_-iMsX=fA;uLCPTcKAFk0IOp6*#sW`Ck_
z<j%e+C(p-7m-<tR64jZ*Nn{|pb>`Z-{CoZw$;G8BR{Bp@4LwcdZjbR8I7~sr*v^al
z6G0Kk3~?yBE?zhBu1G4zETQ;1#d4FWb3GeSF9d}<+;Fm{(hFQR{W+y=s+7wxtK+)!
zL9Y-DGZ_r3Ypbx|)aK*(xE6;x!N`khB4*FMvuo^^_33Gk46kt0eGgWP3PW78R3Ek?
zvu9tk+C)du{k2x<SMy6WTYvB|nY-M~O7N|i!N%hTaDCEdhJvY5<m9L@q}u@=ct%0j
za(ddb3bAU5Pcr*4DJ{&LjYAx$C^i^`76Bw6Vq~}l<>-YlzFk+ah1yjWoa-K1dMM3o
zGnh17iPwv5u1#6O*Akik)ewd$j9VGH58ot~pBaiTk&n*S9|rVqLxRHLN#|Xg`vVB$
z&caM#j#j>a*?4883%1kB_Q|ofW-IJl?+P@(T`eXP1)ybpx#iRC8Gl%SN`Yy;I!-Iy
z-O|z`Zx!MJd1`~lfa!V+=nOW4Kyb{v<jM|03utS1Tq)0*x=+Cl)aP&ebS?T++anDk
zgO4GXpY0h+B<9S246*3B3;~GMI}hTq*Jep1qfW>y^+9Q5LoKr((0ElU8aDze?ME;h
z^|McjCRyY0t|0Slfp&(ED>H21pYF0#hZ__OiwI`XkyKxQROBddEI(2Ccz!^Gt5jXa
zToK6KOw_Z<Q6)EXjI-V3&@xR=WJhylGz`Dc<yPsP7-mh&bWvcr)F9nE_~C&P1U6}@
zQ4A+wKUVJ|6Y+ZR7lSgDqkCrn5M;VmfSbG<iPutvz{}@iT4x$Gp5Kl^n&(PD6H&Np
zaJ(01)WJXG=;z_tpB&chzV$*kRfg2Ib1{T6jYdN>PIzFH;3}IP!nTbi!VE*57p%Q#
z%2&(Hqq+7$%1-MI;}LLZi<<Pyg3zpK&Cv{zS8kIvcInkp?m6btWWE66g}~KUf2;|K
zj0B?BZ9>pq>}?Pv6Y^T6AVkkoj@rGxdvX8)<0zx!&C?;UC~Eqj!BeN7>-C}(oagL{
zlcpVib!nNk&6m?=-)>i23Vq5T&~|WXQ$G8OH`a1%k8bbR6`uKY-Gk%N8@iRh<z!zK
zr|j?uKn=d-<Rf`l6xKd*d!NK5l7cXSE7op>pe1g~t#2=-N78#sya?cfl6A3QcD67u
z4zKIx?a-NBAo|IpfSX(9=mj4XCwtV|?Ig4nLwz(wKo87kOO~SKF<t7<Dsn2FbX!vf
zPlM^je)8b340uH?$IY~<Yd7PK3mntE3nin(gQ>h1O|As9ibzZ!PAYN_t&=;&N@tk?
ziZy;`e?`e$0@7u_Uw5E%=p}Laek3t1_(aZ{jYk@*z6aK}7taH#WFWdGh>R_XvcN0+
zF>h{t1EyW7oF;!hlE5rKT7&(ts$(_}&91!aihWF)0fep?_Ca-e%bI&X#_zSJeMgsU
zIa1*q-E?BtWh~enobPnM?O2%w)`sC@0sa{%3(>$6dA3him!`Dl3&8q8T|ru>^k<3H
zPAn0#!tmM)-;}_1)AwCv!YoE-G_A>f$u9}o=-Pqfk;l&LvRiOGcKW4bhw?HOn}aZp
z+QJ@Bc6#AwZ|-fkk?TDHcM)a^4F)MlQY0{PH6xjxv}sCu2?>5#s#ZuK0QIO}8&+db
zctLm^x*|4UzHf(gB8$reD%uHR^>j^vMn0lliWVFa4i22HlCF4OtVhrhb;bG^oW#3Y
z!!AkV!`vm#7jDoJ9PE_0&pqqtuX{SgU*~oARGwsH4PQ`es7z(HLWwiN>Wo@%`G_p3
zVwG&}J}a9Pba<x2aH_D&5<-!*eQW84nGXu{Qj3O8MWz`_RooN?X~s?&-lq6^LS;$*
z4KDf*g97MS@uBd)^BAUwmO;f0ixUTeyO)2xOPh>+#kUXA3Aq%%xVa1CSL8=6yyfRM
z-uHecUe@cz`|*?+%H?;2i5kh`rjg2dh2ed;Wi~Y6+zQ9oNUS^a=+gw?NK>`dPf+hl
zVfskwpCxmERoaRqnAD%S1Dgz%HuZjU+#4Q-8{>$`90Tdx24eG+>0ggz;I;e=p%3?1
zny4b<b08Oazy(vKzjaoMkq<nP9Y&}ki^Z;usF#40KbQ+r&{Qj7M&(`;sq9o#^RIhc
z(m+O5uG!YOk~(^E1zy*S^zH0@$#|opWKVAJPI$k~yfBW!iT`-CS_9@?awa918tw+g
z&V!A9uy;W~$60hNg6rlJzkhmt6ZJFtJQRVG>gAy#)9rT8vCm;uTFoNDEW9)pa8wVH
zz?gsJ1%Q#RL5sJ57=3O7JLTCv0U1u@aPF*+NWO+(;7#ia0-H~MtZs_y=6p}@K{m#|
z<h7-t+a`-ah!Vg(4G5aQ>b*DU?--TQCev?0M56-$P&|pw>W$71(obWgoPnh0Q8&PP
z6SS;y`yqCFMV<vrh$zvRXUD=Pu%;<7R1L^V8@P{g8l9{Hb}MFJ=;3Fzt_IMP`ZH1v
z0PaYV_{Fq+dAbqdKjPKx<lP@)&Is7KQx$A)Lagolom7i!L%p)te_3njM5xGazw_v1
zO}BYQJ^O*hGtvk`gk9rR@x8M{btDg-X|zbaEtS`4GuU;Gm#KY2^0*b)sMYn`LsNcc
z8A~?w<?_5%&*`i&Z^>zkV^M)c1r`-pRN#MApf<1+2_6i<Kc59G#_6I0{|^PUFz}Gc
lVv&vbHG>y6pRHvLxvl#Pgb>bh0`EZf><Zi2@Kfx?e*>s4FX{jQ

literal 0
HcmV?d00001

diff --git a/vue/primitives/src/popover/context.ts b/vue/primitives/src/popover/context.ts
new file mode 100644
index 0000000..a0fd270
--- /dev/null
+++ b/vue/primitives/src/popover/context.ts
@@ -0,0 +1,18 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface PopoverContext {
+  open: Ref<boolean>;
+  modal: Ref<boolean>;
+  triggerId: ComputedRef<string>;
+  contentId: ComputedRef<string>;
+  triggerElement: Ref<HTMLElement | undefined>;
+  hasCustomAnchor: Ref<boolean>;
+  onOpenChange: (value: boolean) => void;
+  onOpenToggle: () => void;
+}
+
+const ctx = useContextFactory<PopoverContext>('PopoverContext');
+
+export const providePopoverContext = ctx.provide;
+export const usePopoverContext = ctx.inject;
diff --git a/vue/primitives/src/popover/index.ts b/vue/primitives/src/popover/index.ts
new file mode 100644
index 0000000..2c870cf
--- /dev/null
+++ b/vue/primitives/src/popover/index.ts
@@ -0,0 +1,18 @@
+export { default as PopoverRoot } from './PopoverRoot.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';
+export { default as PopoverAnchor } from './PopoverAnchor.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverPortal } from './PopoverPortal.vue';
+export { default as PopoverArrow } from './PopoverArrow.vue';
+export { default as PopoverClose } from './PopoverClose.vue';
+
+export { usePopoverContext } from './context';
+
+export type { PopoverContext } from './context';
+export type { PopoverRootProps } from './PopoverRoot.vue';
+export type { PopoverTriggerProps } from './PopoverTrigger.vue';
+export type { PopoverAnchorProps } from './PopoverAnchor.vue';
+export type { PopoverContentEmits, PopoverContentProps } from './PopoverContent.vue';
+export type { PopoverPortalProps } from './PopoverPortal.vue';
+export type { PopoverArrowProps } from './PopoverArrow.vue';
+export type { PopoverCloseProps } from './PopoverClose.vue';
diff --git a/vue/primitives/src/popper/PopperAnchor.vue b/vue/primitives/src/popper/PopperAnchor.vue
new file mode 100644
index 0000000..18ca7d2
--- /dev/null
+++ b/vue/primitives/src/popper/PopperAnchor.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { ReferenceElement } from '@floating-ui/vue';
+
+export interface PopperAnchorProps extends PrimitiveProps {
+  /** Custom reference element for positioning. If not provided, uses the rendered element. */
+  reference?: ReferenceElement;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { usePopperRootContext } from './context';
+import { watchPostEffect } from 'vue';
+
+const props = defineProps<PopperAnchorProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootContext = usePopperRootContext();
+
+watchPostEffect(() => {
+  rootContext.onAnchorChange(props.reference ?? currentElement.value);
+});
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :as="as">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/popper/PopperArrow.vue b/vue/primitives/src/popper/PopperArrow.vue
new file mode 100644
index 0000000..8fb2a49
--- /dev/null
+++ b/vue/primitives/src/popper/PopperArrow.vue
@@ -0,0 +1,76 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { Side } from './utils';
+
+const OPPOSITE_SIDE: Record<Side, Side> = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right',
+};
+
+// Hoisted to module scope — one allocation per module load instead of one per
+// render. Values are primitive strings, so objects are frozen-in-practice.
+const TRANSFORM_ORIGIN: Record<Side, string> = {
+  top: '',
+  right: '0 0',
+  bottom: 'center 0',
+  left: '100% 0',
+};
+
+const TRANSFORM: Record<Side, string> = {
+  top: 'translateY(100%)',
+  right: 'translateY(50%) rotate(90deg) translateX(-50%)',
+  bottom: 'rotate(180deg)',
+  left: 'translateY(50%) rotate(-90deg) translateX(50%)',
+};
+
+export interface PopperArrowProps extends PrimitiveProps {
+  /** Arrow width in pixels. @default 10 */
+  width?: number;
+  /** Arrow height in pixels. @default 5 */
+  height?: number;
+}
+</script>
+
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue';
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { usePopperContentContext } from './context';
+
+const { as = 'span', width = 10, height = 5 } = defineProps<PopperArrowProps>();
+
+const { forwardRef } = useForwardExpose();
+const contentContext = usePopperContentContext();
+const baseSide = computed(() => OPPOSITE_SIDE[contentContext.placedSide.value]);
+</script>
+
+<template>
+  <span
+    :ref="(el: Element | ComponentPublicInstance | null) => {
+      contentContext.onArrowChange((el as HTMLElement) ?? undefined);
+      return undefined;
+    }"
+    :style="{
+      position: 'absolute',
+      left: contentContext.arrowX.value ? `${contentContext.arrowX.value}px` : undefined,
+      top: contentContext.arrowY.value ? `${contentContext.arrowY.value}px` : undefined,
+      [baseSide]: 0,
+      transformOrigin: TRANSFORM_ORIGIN[contentContext.placedSide.value],
+      transform: TRANSFORM[contentContext.placedSide.value],
+      visibility: contentContext.shouldHideArrow.value ? 'hidden' : undefined,
+    }"
+  >
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :style="{ display: 'block' }"
+      :width="width"
+      :height="height"
+    >
+      <slot />
+    </Primitive>
+  </span>
+</template>
diff --git a/vue/primitives/src/popper/PopperContent.vue b/vue/primitives/src/popper/PopperContent.vue
new file mode 100644
index 0000000..62695f9
--- /dev/null
+++ b/vue/primitives/src/popper/PopperContent.vue
@@ -0,0 +1,280 @@
+<script lang="ts">
+import type { Align, Side } from './utils';
+import type { Middleware, Placement, ReferenceElement } from '@floating-ui/vue';
+import type { PrimitiveProps } from '../primitive';
+
+export interface PopperContentProps extends PrimitiveProps {
+  /** Preferred side of the anchor. @default 'bottom' */
+  side?: Side;
+  /** Distance in pixels from the anchor. @default 0 */
+  sideOffset?: number;
+  /** Flip to the opposite side on collision. @default true */
+  sideFlip?: boolean;
+  /** Preferred alignment against the anchor. @default 'center' */
+  align?: Align;
+  /** Offset in pixels from the alignment edge. @default 0 */
+  alignOffset?: number;
+  /** Flip alignment on collision. @default true */
+  alignFlip?: boolean;
+  /** Reposition to prevent boundary overflow. @default true */
+  avoidCollisions?: boolean;
+  /** Collision boundary element(s). @default [] */
+  collisionBoundary?: Array<Element | null> | Element | null;
+  /** Distance from boundary for collision detection. @default 0 */
+  collisionPadding?: number | Partial<Record<Side, number>>;
+  /** Padding between arrow and content edges. @default 0 */
+  arrowPadding?: number;
+  /** Hide arrow when it can't be centered. @default true */
+  hideShiftedArrow?: boolean;
+  /** Sticky behavior on the align axis. @default 'partial' */
+  sticky?: 'always' | 'partial';
+  /** Hide when anchor is fully occluded. @default false */
+  hideWhenDetached?: boolean;
+  /** CSS position strategy. @default 'fixed' */
+  positionStrategy?: 'absolute' | 'fixed';
+  /** Position update strategy. @default 'optimized' */
+  updatePositionStrategy?: 'always' | 'optimized';
+  /** Disable layout-shift-based position update. @default false */
+  disableUpdateOnLayoutShift?: boolean;
+  /** Force content to stay within the viewport. @default false */
+  prioritizePosition?: boolean;
+  /** Custom reference element, overrides the anchor. */
+  reference?: ReferenceElement;
+}
+
+export interface PopperContentEmits {
+  placed: [];
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import {
+  autoUpdate,
+  flip,
+  arrow as floatingUIArrow,
+  hide,
+  limitShift,
+  offset,
+  shift,
+  size,
+  useFloating,
+} from '@floating-ui/vue';
+import { computed, onBeforeUnmount, ref, shallowRef, useTemplateRef, watchEffect, watchPostEffect } from 'vue';
+import { getSideAndAlignFromPlacement, isNotNull, transformOrigin } from './utils';
+import { providePopperContentContext, usePopperRootContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  side = 'bottom',
+  sideOffset = 0,
+  sideFlip = true,
+  align = 'center',
+  alignOffset = 0,
+  alignFlip = true,
+  avoidCollisions = true,
+  collisionBoundary = [],
+  collisionPadding: collisionPaddingProp = 0,
+  arrowPadding = 0,
+  hideShiftedArrow = true,
+  sticky = 'partial',
+  hideWhenDetached = false,
+  positionStrategy = 'fixed',
+  updatePositionStrategy = 'optimized',
+  disableUpdateOnLayoutShift = false,
+  prioritizePosition = false,
+  reference: referenceProp,
+  as,
+} = defineProps<PopperContentProps>();
+
+const emit = defineEmits<PopperContentEmits>();
+
+const rootContext = usePopperRootContext();
+const { forwardRef, currentElement: contentElement } = useForwardExpose();
+
+const floatingRef = useTemplateRef<HTMLElement>('floatingRef');
+const arrow = ref<HTMLElement>();
+
+// Arrow size tracking via ResizeObserver (replaces useSize)
+const arrowWidth = ref(0);
+const arrowHeight = ref(0);
+let arrowObserver: ResizeObserver | null = null;
+
+watchEffect((onCleanup) => {
+  arrowObserver?.disconnect();
+  arrowObserver = null;
+
+  const el = arrow.value;
+  if (!el) return;
+
+  arrowObserver = new ResizeObserver(([entry]) => {
+    if (entry) {
+      const borderBox = entry.borderBoxSize[0];
+      if (borderBox) {
+        arrowWidth.value = borderBox.inlineSize;
+        arrowHeight.value = borderBox.blockSize;
+      }
+      else {
+        const rect = el.getBoundingClientRect();
+        arrowWidth.value = rect.width;
+        arrowHeight.value = rect.height;
+      }
+    }
+  });
+  arrowObserver.observe(el);
+
+  onCleanup(() => {
+    arrowObserver?.disconnect();
+  });
+});
+
+onBeforeUnmount(() => {
+  arrowObserver?.disconnect();
+});
+
+const desiredPlacement = computed<Placement>(
+  () => (side + (align !== 'center' ? `-${align}` : '')) as Placement,
+);
+
+const collisionPadding = computed(() => {
+  return typeof collisionPaddingProp === 'number'
+    ? collisionPaddingProp
+    : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
+});
+
+const boundary = computed(() => {
+  return Array.isArray(collisionBoundary)
+    ? collisionBoundary
+    : [collisionBoundary];
+});
+
+const detectOverflowOptions = computed(() => ({
+  padding: collisionPadding.value,
+  boundary: boundary.value.filter(isNotNull),
+  altBoundary: boundary.value.length > 0,
+}));
+
+const flipOptions = computed(() => ({
+  mainAxis: sideFlip,
+  crossAxis: alignFlip,
+}));
+
+const computedMiddleware = computed<Middleware[]>(() => [
+  offset({
+    mainAxis: sideOffset + arrowHeight.value,
+    alignmentAxis: alignOffset,
+  }),
+  prioritizePosition
+  && avoidCollisions
+  && flip({ ...detectOverflowOptions.value, ...flipOptions.value }),
+  avoidCollisions
+  && shift({
+    mainAxis: true,
+    crossAxis: !!prioritizePosition,
+    limiter: sticky === 'partial' ? limitShift() : undefined,
+    ...detectOverflowOptions.value,
+  }),
+  !prioritizePosition
+  && avoidCollisions
+  && flip({ ...detectOverflowOptions.value, ...flipOptions.value }),
+  size({
+    ...detectOverflowOptions.value,
+    apply: ({ elements, rects, availableWidth, availableHeight }) => {
+      const { width: anchorWidth, height: anchorHeight } = rects.reference;
+      const contentStyle = elements.floating.style;
+      contentStyle.setProperty('--popper-available-width', `${availableWidth}px`);
+      contentStyle.setProperty('--popper-available-height', `${availableHeight}px`);
+      contentStyle.setProperty('--popper-anchor-width', `${anchorWidth}px`);
+      contentStyle.setProperty('--popper-anchor-height', `${anchorHeight}px`);
+    },
+  }),
+  arrow.value && floatingUIArrow({ element: arrow.value, padding: arrowPadding }),
+  transformOrigin({ arrowWidth: arrowWidth.value, arrowHeight: arrowHeight.value }),
+  hideWhenDetached && hide({ strategy: 'referenceHidden', ...detectOverflowOptions.value }),
+] as Middleware[]);
+
+const reference = computed(() => referenceProp ?? rootContext.anchor.value);
+
+const { floatingStyles, placement, isPositioned, middlewareData } = useFloating(
+  reference,
+  floatingRef,
+  {
+    strategy: positionStrategy,
+    placement: desiredPlacement,
+    whileElementsMounted: (...args) => {
+      return autoUpdate(...args, {
+        layoutShift: !disableUpdateOnLayoutShift,
+        animationFrame: updatePositionStrategy === 'always',
+      });
+    },
+    middleware: computedMiddleware,
+  },
+);
+
+const placedSide = computed(() => getSideAndAlignFromPlacement(placement.value)[0]);
+const placedAlign = computed(() => getSideAndAlignFromPlacement(placement.value)[1]);
+
+watchPostEffect(() => {
+  if (isPositioned.value) emit('placed');
+});
+
+const shouldHideArrow = computed(() => {
+  const cannotCenterArrow = middlewareData.value.arrow?.centerOffset !== 0;
+  return hideShiftedArrow && cannotCenterArrow;
+});
+
+const contentZIndex = shallowRef('');
+watchEffect(() => {
+  if (contentElement.value) {
+    contentZIndex.value = globalThis.getComputedStyle(contentElement.value).zIndex;
+  }
+});
+
+const arrowX = computed(() => middlewareData.value.arrow?.x ?? 0);
+const arrowY = computed(() => middlewareData.value.arrow?.y ?? 0);
+
+providePopperContentContext({
+  placedSide,
+  onArrowChange: (element: HTMLElement | undefined) => { arrow.value = element; },
+  arrowX,
+  arrowY,
+  shouldHideArrow,
+});
+</script>
+
+<template>
+  <div
+    ref="floatingRef"
+    data-popper-content-wrapper=""
+    :style="{
+      ...floatingStyles,
+      transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)',
+      minWidth: 'max-content',
+      zIndex: contentZIndex,
+      ['--popper-transform-origin' as any]: [
+        middlewareData.transformOrigin?.x,
+        middlewareData.transformOrigin?.y,
+      ].join(' '),
+      // Always set both keys so V8 keeps a single hidden class for the style
+      // object across renders, instead of allocating a new shape when the
+      // conditional spread kicks in.
+      visibility: middlewareData.hide?.referenceHidden ? ('hidden' as const) : undefined,
+      pointerEvents: middlewareData.hide?.referenceHidden ? ('none' as const) : undefined,
+    }"
+  >
+    <Primitive
+      :ref="forwardRef"
+      v-bind="$attrs"
+      :as="as"
+      :data-side="placedSide"
+      :data-align="placedAlign"
+      :style="{
+        animation: isPositioned ? undefined : 'none',
+      }"
+    >
+      <slot />
+    </Primitive>
+  </div>
+</template>
diff --git a/vue/primitives/src/popper/PopperRoot.vue b/vue/primitives/src/popper/PopperRoot.vue
new file mode 100644
index 0000000..174a148
--- /dev/null
+++ b/vue/primitives/src/popper/PopperRoot.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ReferenceElement } from '@floating-ui/vue';
+import { providePopperRootContext } from './context';
+import { ref } from 'vue';
+
+defineOptions({ inheritAttrs: false });
+
+const anchor = ref<ReferenceElement>();
+
+providePopperRootContext({
+  anchor,
+  onAnchorChange: (element: ReferenceElement | undefined) => { anchor.value = element; },
+});
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/vue/primitives/src/popper/__test__/Popper.test.ts b/vue/primitives/src/popper/__test__/Popper.test.ts
new file mode 100644
index 0000000..5d43a0c
--- /dev/null
+++ b/vue/primitives/src/popper/__test__/Popper.test.ts
@@ -0,0 +1,108 @@
+import {
+  PopperAnchor,
+  PopperContent,
+  PopperRoot,
+} from '../index';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+describe('Popper', () => {
+  it('renders root with anchor and content', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(PopperRoot, null, {
+          default: () => [
+            h(PopperAnchor, { as: 'button' }, { default: () => 'Anchor' }),
+            h(PopperContent, { as: 'div' }, { default: () => 'Content' }),
+          ],
+        });
+      },
+    });
+
+    const wrapper = track(mount(Wrapper, { attachTo: document.body }));
+    await nextTick();
+
+    expect(wrapper.find('button').text()).toBe('Anchor');
+    expect(wrapper.find('[data-popper-content-wrapper]').exists()).toBe(true);
+  });
+
+  it('positions content with default placement (bottom)', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(PopperRoot, null, {
+          default: () => [
+            h(PopperAnchor, { as: 'button' }, { default: () => 'Anchor' }),
+            h(PopperContent, null, { default: () => 'Content' }),
+          ],
+        });
+      },
+    });
+
+    const wrapper = track(mount(Wrapper, { attachTo: document.body }));
+    await nextTick();
+    await nextTick();
+
+    const content = wrapper.find('[data-side]');
+    expect(content.exists()).toBe(true);
+  });
+
+  it('exposes data-side and data-align attributes', async () => {
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(PopperRoot, null, {
+          default: () => [
+            h(PopperAnchor, { as: 'button' }, { default: () => 'Anchor' }),
+            h(PopperContent, { side: 'top', align: 'start' }, { default: () => 'Content' }),
+          ],
+        });
+      },
+    });
+
+    const wrapper = track(mount(Wrapper, { attachTo: document.body }));
+    await nextTick();
+    await nextTick();
+
+    const content = wrapper.find('[data-side]');
+    expect(content.exists()).toBe(true);
+  });
+
+  it('passes custom reference to anchor', async () => {
+    const customRef = {
+      getBoundingClientRect: () => ({
+        x: 100, y: 100, width: 50, height: 50,
+        top: 100, right: 150, bottom: 150, left: 100,
+        toJSON: () => {},
+      }),
+    };
+
+    const Wrapper = defineComponent({
+      setup() {
+        return () => h(PopperRoot, null, {
+          default: () => [
+            h(PopperAnchor, { reference: customRef }, { default: () => 'Anchor' }),
+            h(PopperContent, null, { default: () => 'Content' }),
+          ],
+        });
+      },
+    });
+
+    const wrapper = track(mount(Wrapper, { attachTo: document.body }));
+    await nextTick();
+
+    expect(wrapper.find('[data-popper-content-wrapper]').exists()).toBe(true);
+  });
+});
diff --git a/vue/primitives/src/popper/context.ts b/vue/primitives/src/popper/context.ts
new file mode 100644
index 0000000..57ee494
--- /dev/null
+++ b/vue/primitives/src/popper/context.ts
@@ -0,0 +1,25 @@
+import type { Ref } from 'vue';
+import type { ReferenceElement } from '@floating-ui/vue';
+import type { Side } from './utils';
+import { useContextFactory } from '@robonen/vue';
+
+export interface PopperRootContext {
+  anchor: Ref<ReferenceElement | undefined>;
+  onAnchorChange: (element: ReferenceElement | undefined) => void;
+}
+
+export interface PopperContentContext {
+  placedSide: Ref<Side>;
+  onArrowChange: (arrow: HTMLElement | undefined) => void;
+  arrowX: Ref<number>;
+  arrowY: Ref<number>;
+  shouldHideArrow: Ref<boolean>;
+}
+
+const rootCtx = useContextFactory<PopperRootContext>('PopperRootContext');
+export const providePopperRootContext = rootCtx.provide;
+export const usePopperRootContext = rootCtx.inject;
+
+const contentCtx = useContextFactory<PopperContentContext>('PopperContentContext');
+export const providePopperContentContext = contentCtx.provide;
+export const usePopperContentContext = contentCtx.inject;
diff --git a/vue/primitives/src/popper/index.ts b/vue/primitives/src/popper/index.ts
new file mode 100644
index 0000000..c49ffca
--- /dev/null
+++ b/vue/primitives/src/popper/index.ts
@@ -0,0 +1,12 @@
+export { default as PopperRoot } from './PopperRoot.vue';
+export { default as PopperAnchor } from './PopperAnchor.vue';
+export { default as PopperContent } from './PopperContent.vue';
+export { default as PopperArrow } from './PopperArrow.vue';
+
+export { usePopperRootContext, usePopperContentContext } from './context';
+
+export type { PopperRootContext, PopperContentContext } from './context';
+export type { PopperAnchorProps } from './PopperAnchor.vue';
+export type { PopperContentEmits, PopperContentProps } from './PopperContent.vue';
+export type { PopperArrowProps } from './PopperArrow.vue';
+export type { Align, Side } from './utils';
diff --git a/vue/primitives/src/popper/utils.ts b/vue/primitives/src/popper/utils.ts
new file mode 100644
index 0000000..3d1baa1
--- /dev/null
+++ b/vue/primitives/src/popper/utils.ts
@@ -0,0 +1,59 @@
+import type { Middleware, Placement } from '@floating-ui/vue';
+
+export type Side = 'bottom' | 'left' | 'right' | 'top';
+export type Align = 'center' | 'end' | 'start';
+
+export function isNotNull<T>(value: T | null): value is T {
+  return value !== null;
+}
+
+export function getSideAndAlignFromPlacement(placement: Placement) {
+  const [side, align = 'center'] = placement.split('-');
+  return [side as Side, align as Align] as const;
+}
+
+export function transformOrigin(options: {
+  arrowWidth: number;
+  arrowHeight: number;
+}): Middleware {
+  return {
+    name: 'transformOrigin',
+    options,
+    fn(data) {
+      const { placement, rects, middlewareData } = data;
+
+      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+      const isArrowHidden = cannotCenterArrow;
+      const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+      const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+
+      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+      const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[placedAlign];
+
+      const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+      const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+
+      let x = '';
+      let y = '';
+
+      if (placedSide === 'bottom') {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${-arrowHeight}px`;
+      }
+      else if (placedSide === 'top') {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${rects.floating.height + arrowHeight}px`;
+      }
+      else if (placedSide === 'right') {
+        x = `${-arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      }
+      else if (placedSide === 'left') {
+        x = `${rects.floating.width + arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      }
+
+      return { data: { x, y } };
+    },
+  };
+}
diff --git a/vue/primitives/src/primitive/Primitive.ts b/vue/primitives/src/primitive/Primitive.ts
index b070e1a..0592d53 100644
--- a/vue/primitives/src/primitive/Primitive.ts
+++ b/vue/primitives/src/primitive/Primitive.ts
@@ -1,6 +1,6 @@
 import type { AllowedComponentProps, Component, IntrinsicElementAttributes, SetupContext, VNodeProps } from 'vue';
-import { h, mergeProps } from 'vue';
-import { Slot } from './Slot';
+import { h } from 'vue';
+import { renderSlotChild } from './Slot';
 
 type FunctionalComponentContext = Omit<SetupContext, 'expose'>;
 
@@ -9,13 +9,15 @@ export interface PrimitiveProps {
 }
 
 export function Primitive(props: PrimitiveProps & VNodeProps & AllowedComponentProps & Record<string, unknown>, ctx: FunctionalComponentContext) {
-  const { as, ...delegatedProps } = props;
+  const as = props.as;
 
   return as === 'template'
-    ? h(Slot, mergeProps(ctx.attrs, delegatedProps), ctx.slots)
-    : h(as!, mergeProps(ctx.attrs, delegatedProps), ctx.slots);
+    ? renderSlotChild(ctx.slots, ctx.attrs)
+    : h(as!, ctx.attrs, ctx.slots);
 }
 
+Primitive.inheritAttrs = false;
+
 Primitive.props = {
   as: {
     type: [String, Object],
diff --git a/vue/primitives/src/primitive/Slot.ts b/vue/primitives/src/primitive/Slot.ts
index de29a9f..2bd4e27 100644
--- a/vue/primitives/src/primitive/Slot.ts
+++ b/vue/primitives/src/primitive/Slot.ts
@@ -1,21 +1,31 @@
-import { cloneVNode, warn } from 'vue';
-import type { SetupContext } from 'vue';
+import type { SetupContext, Slots, VNode } from 'vue';
+import { Comment, Fragment, cloneVNode, warn } from 'vue';
 import { getRawChildren } from '../utils/getRawChildren';
 
 type FunctionalComponentContext = Omit<SetupContext, 'expose'>;
 
 /**
- * A component that renders a single child from its default slot,
- * applying the provided attributes to it.
+ * Renders a single child from the provided default slot, applying attrs to it.
+ * Shared between `<Slot>` and `<Primitive as="template">` to avoid an extra
+ * functional component instance on the template path.
  *
- * @param _ - Props (unused)
- * @param context - Setup context containing slots and attrs
+ * @param slots - Component slots
+ * @param attrs - Attrs to apply to the slotted child
  * @returns Cloned VNode with merged attrs or null
  */
-export function Slot(_: Record<string, unknown>, { slots, attrs }: FunctionalComponentContext) {
+export function renderSlotChild(slots: Slots, attrs: Record<string, unknown>): VNode | null {
   if (!slots.default) return null;
 
-  const children = getRawChildren(slots.default());
+  const raw = slots.default();
+
+  if (raw.length === 1) {
+    const only = raw[0] as VNode;
+    const t = only.type;
+    if (t !== Fragment && t !== Comment)
+      return cloneVNode(only, attrs, true);
+  }
+
+  const children = getRawChildren(raw);
 
   if (!children.length) return null;
 
@@ -26,4 +36,16 @@ export function Slot(_: Record<string, unknown>, { slots, attrs }: FunctionalCom
   return cloneVNode(children[0]!, attrs, true);
 }
 
+/**
+ * A component that renders a single child from its default slot,
+ * applying the provided attributes to it.
+ *
+ * @param _ - Props (unused)
+ * @param context - Setup context containing slots and attrs
+ * @returns Cloned VNode with merged attrs or null
+ */
+export function Slot(_: Record<string, unknown>, { slots, attrs }: FunctionalComponentContext) {
+  return renderSlotChild(slots, attrs);
+}
+
 Slot.inheritAttrs = false;
diff --git a/vue/primitives/src/primitive/__test__/Primitive.bench.ts b/vue/primitives/src/primitive/__test__/Primitive.bench.ts
index f3f9d76..148624e 100644
--- a/vue/primitives/src/primitive/__test__/Primitive.bench.ts
+++ b/vue/primitives/src/primitive/__test__/Primitive.bench.ts
@@ -1,9 +1,7 @@
 import { bench, describe } from 'vitest';
-import { Comment, cloneVNode, createVNode, h } from 'vue';
+import { Comment, cloneVNode, createVNode, h, render } from 'vue';
 import { Primitive, Slot } from '..';
 
-// -- Attribute sets of increasing size --
-
 const attrs1 = { class: 'a' };
 
 const attrs5 = { class: 'a', id: 'b', role: 'button', tabindex: '0', title: 'tip' };
@@ -114,3 +112,44 @@ describe('Slot — edge cases', () => {
     Slot({} as never, { attrs: attrs5, slots: {}, emit: noop });
   });
 });
+
+// ---- Slot — realistic attrs (fresh object per iteration) ----
+
+describe('Slot — fresh attrs per call', () => {
+  bench('5 attrs (stable ref)', () => {
+    Slot({} as never, { attrs: attrs5, slots: defaultSlot, emit: noop });
+  });
+
+  bench('5 attrs (new object)', () => {
+    Slot({} as never, {
+      attrs: { class: 'a', id: 'b', role: 'button', tabindex: '0', title: 'tip' },
+      slots: defaultSlot,
+      emit: noop,
+    });
+  });
+});
+
+// ---- Realistic runtime: mount + update via render() ----
+
+describe('Primitive — mount + update via render()', () => {
+  bench('h("div") — mount + update', () => {
+    const container = document.createElement('div');
+    render(h('div', attrs5, [h('span', 'content')]), container);
+    render(h('div', attrs15, [h('span', 'content')]), container);
+    render(null, container);
+  });
+
+  bench('Primitive({ as: "div" }) — mount + update', () => {
+    const container = document.createElement('div');
+    render(h(Primitive, { as: 'div', ...attrs5 }, defaultSlot), container);
+    render(h(Primitive, { as: 'div', ...attrs15 }, defaultSlot), container);
+    render(null, container);
+  });
+
+  bench('Primitive({ as: "template" }) — mount + update', () => {
+    const container = document.createElement('div');
+    render(h(Primitive, { as: 'template', ...attrs5 }, defaultSlot), container);
+    render(h(Primitive, { as: 'template', ...attrs15 }, defaultSlot), container);
+    render(null, container);
+  });
+});
diff --git a/vue/primitives/src/primitive/__test__/Primitive.test.ts b/vue/primitives/src/primitive/__test__/Primitive.test.ts
index d0ddf72..a395493 100644
--- a/vue/primitives/src/primitive/__test__/Primitive.test.ts
+++ b/vue/primitives/src/primitive/__test__/Primitive.test.ts
@@ -364,7 +364,7 @@ describe.each([1, 2, 3])('Primitive nested as="template" (depth=%i)', (depth) =>
     return current();
   }
 
-  function makeAttrsPerLevel(base: string, depth: number) {
+  function makeAttrsPerLevel(base: string, depth: number): Array<Record<string, unknown>> {
     return Array.from({ length: depth }, (_, i) => ({ [`data-level-${i}`]: `${base}-${i}` }));
   }
 
diff --git a/vue/primitives/src/progress/ProgressIndicator.vue b/vue/primitives/src/progress/ProgressIndicator.vue
new file mode 100644
index 0000000..a9724eb
--- /dev/null
+++ b/vue/primitives/src/progress/ProgressIndicator.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ProgressIndicatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useProgressContext } from './context';
+
+const { as = 'div' } = defineProps<ProgressIndicatorProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const ctx = useProgressContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-state="ctx.state.value"
+    :data-value="ctx.value.value ?? undefined"
+    :data-max="ctx.max.value"
+  >
+    <slot :value="ctx.value.value" :max="ctx.max.value" :state="ctx.state.value" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/progress/ProgressRoot.vue b/vue/primitives/src/progress/ProgressRoot.vue
new file mode 100644
index 0000000..d1eb04a
--- /dev/null
+++ b/vue/primitives/src/progress/ProgressRoot.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { ProgressState } from './context';
+
+export interface ProgressRootProps extends PrimitiveProps {
+  /** Current value. `null` denotes an indeterminate progress bar. */
+  modelValue?: number | null;
+  /** Maximum value. @default 100 */
+  max?: number;
+  /** Accessible label (use when no external label is provided). */
+  getValueLabel?: (value: number, max: number) => string;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed, toRef } from 'vue';
+import { provideProgressContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  modelValue = null,
+  max = 100,
+  getValueLabel = (v: number, m: number) => `${Math.round((v / m) * 100)}%`,
+  as = 'div',
+} = defineProps<ProgressRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+// Identity passthroughs via `toRef` — reactive without `computed`'s effect/cache.
+const value = toRef(() => modelValue);
+const maxRef = toRef(() => max);
+
+const state = computed<ProgressState>(() => {
+  const v = modelValue;
+  if (v === null || v === undefined) return 'indeterminate';
+  if (v >= max) return 'complete';
+  return 'loading';
+});
+
+const valueLabel = computed(() => value.value === null || value.value === undefined ? undefined : getValueLabel(value.value, max));
+
+provideProgressContext({
+  value,
+  max: maxRef,
+  state,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="progressbar"
+    :aria-valuemin="0"
+    :aria-valuemax="max"
+    :aria-valuenow="value ?? undefined"
+    :aria-valuetext="valueLabel"
+    :data-state="state"
+    :data-value="value ?? undefined"
+    :data-max="max"
+  >
+    <slot :value="value" :max="max" :state="state" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/progress/__test__/Progress.test.ts b/vue/primitives/src/progress/__test__/Progress.test.ts
new file mode 100644
index 0000000..a7e5b3c
--- /dev/null
+++ b/vue/primitives/src/progress/__test__/Progress.test.ts
@@ -0,0 +1,50 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h } from 'vue';
+import { ProgressIndicator, ProgressRoot } from '../index';
+
+function mountProgress(props: Record<string, unknown> = {}) {
+  return mount(defineComponent({
+    setup: () => () => h(ProgressRoot, props, { default: () => h(ProgressIndicator, { class: 'ind' }) }),
+  }));
+}
+
+describe('Progress', () => {
+  it('has role="progressbar" with aria attributes', () => {
+    const wrapper = mountProgress({ modelValue: 40 });
+    expect(wrapper.attributes('role')).toBe('progressbar');
+    expect(wrapper.attributes('aria-valuemin')).toBe('0');
+    expect(wrapper.attributes('aria-valuemax')).toBe('100');
+    expect(wrapper.attributes('aria-valuenow')).toBe('40');
+    expect(wrapper.attributes('aria-valuetext')).toBe('40%');
+  });
+
+  it('is indeterminate when value is null', () => {
+    const wrapper = mountProgress({ modelValue: null });
+    expect(wrapper.attributes('data-state')).toBe('indeterminate');
+    expect(wrapper.attributes('aria-valuenow')).toBeUndefined();
+  });
+
+  it('is complete when value reaches max', () => {
+    const wrapper = mountProgress({ modelValue: 100 });
+    expect(wrapper.attributes('data-state')).toBe('complete');
+  });
+
+  it('custom max', () => {
+    const wrapper = mountProgress({ modelValue: 5, max: 10 });
+    expect(wrapper.attributes('aria-valuemax')).toBe('10');
+    expect(wrapper.attributes('aria-valuetext')).toBe('50%');
+  });
+
+  it('indicator receives matching data-state', () => {
+    const wrapper = mountProgress({ modelValue: 70 });
+    const ind = wrapper.find('.ind');
+    expect(ind.attributes('data-state')).toBe('loading');
+    expect(ind.attributes('data-value')).toBe('70');
+  });
+
+  it('getValueLabel override', () => {
+    const wrapper = mountProgress({ modelValue: 3, max: 10, getValueLabel: (v: number, m: number) => `${v} of ${m}` });
+    expect(wrapper.attributes('aria-valuetext')).toBe('3 of 10');
+  });
+});
diff --git a/vue/primitives/src/progress/context.ts b/vue/primitives/src/progress/context.ts
new file mode 100644
index 0000000..171e28e
--- /dev/null
+++ b/vue/primitives/src/progress/context.ts
@@ -0,0 +1,15 @@
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type ProgressState = 'indeterminate' | 'loading' | 'complete';
+
+export interface ProgressContext {
+  value: Ref<number | null>;
+  max: Ref<number>;
+  state: Ref<ProgressState>;
+}
+
+const ctx = useContextFactory<ProgressContext>('ProgressContext');
+
+export const provideProgressContext = ctx.provide;
+export const useProgressContext = ctx.inject;
diff --git a/vue/primitives/src/progress/index.ts b/vue/primitives/src/progress/index.ts
new file mode 100644
index 0000000..fbd2217
--- /dev/null
+++ b/vue/primitives/src/progress/index.ts
@@ -0,0 +1,6 @@
+export { default as ProgressRoot } from './ProgressRoot.vue';
+export { default as ProgressIndicator } from './ProgressIndicator.vue';
+export type { ProgressRootProps } from './ProgressRoot.vue';
+export type { ProgressIndicatorProps } from './ProgressIndicator.vue';
+export { provideProgressContext, useProgressContext } from './context';
+export type { ProgressState, ProgressContext } from './context';
diff --git a/vue/primitives/src/radio-group/RadioGroupIndicator.vue b/vue/primitives/src/radio-group/RadioGroupIndicator.vue
new file mode 100644
index 0000000..124a880
--- /dev/null
+++ b/vue/primitives/src/radio-group/RadioGroupIndicator.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface RadioGroupIndicatorProps extends PrimitiveProps {
+  forceMount?: boolean;
+
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useRadioGroupItemContext } from './context';
+
+const { as = 'span', forceMount = false } = defineProps<RadioGroupIndicatorProps>();
+const { forwardRef } = useForwardExpose();
+const item = useRadioGroupItemContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    v-if="forceMount || item.checked.value"
+    :data-state="item.checked.value ? 'checked' : 'unchecked'"
+    :data-disabled="item.disabled.value ? '' : undefined"
+    style="pointer-events: none;"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/radio-group/RadioGroupItem.vue b/vue/primitives/src/radio-group/RadioGroupItem.vue
new file mode 100644
index 0000000..042a5e0
--- /dev/null
+++ b/vue/primitives/src/radio-group/RadioGroupItem.vue
@@ -0,0 +1,76 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface RadioGroupItemProps extends PrimitiveProps {
+  value: string;
+  disabled?: boolean;
+  required?: boolean;
+
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { provideRadioGroupItemContext, useRadioGroupContext } from './context';
+
+const { value, disabled = false, as = 'button' } = defineProps<RadioGroupItemProps>();
+
+const ctx = useRadioGroupContext();
+const { CollectionItem } = useCollectionInjector();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const isChecked = computed(() => ctx.value.value === value);
+const isDisabled = computed(() => ctx.disabled.value || disabled);
+const dataState = computed(() => isChecked.value ? 'checked' : 'unchecked');
+
+provideRadioGroupItemContext({
+  value,
+  checked: isChecked,
+  disabled: isDisabled,
+});
+
+// Only one item should be in the tab order:
+// - the checked one, or
+// - the first enabled one if nothing is checked.
+const isTabStop = computed(() => {
+  if (isDisabled.value) return false;
+  if (ctx.value.value !== undefined) return isChecked.value;
+  const firstEnabled = ctx.items.value.find(x => !x.hasAttribute('data-disabled'));
+  return currentElement.value ? firstEnabled === currentElement.value : false;
+});
+
+function onClick(): void {
+  if (isDisabled.value) return;
+  ctx.setValue(value);
+  currentElement.value?.focus();
+}
+function onKeyDown(event: KeyboardEvent): void {
+  if (!currentElement.value) return;
+  ctx.onItemKeyDown(event, currentElement.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :as="as"
+      :ref="forwardRef"
+      :type="as === 'button' ? 'button' : undefined"
+      role="radio"
+      :aria-checked="isChecked"
+      :aria-required="required || undefined"
+      :aria-disabled="isDisabled || undefined"
+      :data-state="dataState"
+      :data-disabled="isDisabled ? '' : undefined"
+      :data-value="value"
+      :tabindex="isTabStop ? 0 : -1"
+      :disabled="isDisabled || undefined"
+      @click="onClick"
+      @keydown="onKeyDown"
+    >
+      <slot :checked="isChecked" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/radio-group/RadioGroupRoot.vue b/vue/primitives/src/radio-group/RadioGroupRoot.vue
new file mode 100644
index 0000000..df0820e
--- /dev/null
+++ b/vue/primitives/src/radio-group/RadioGroupRoot.vue
@@ -0,0 +1,137 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { RovingDirection } from '../utils/roving-focus';
+
+export interface RadioGroupRootProps extends PrimitiveProps {
+  defaultValue?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  orientation?: 'horizontal' | 'vertical';
+  dir?: RovingDirection;
+  loop?: boolean;
+
+}
+
+export interface RadioGroupRootEmits {
+  valueChange: [value: string];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { useCollectionProvider } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideRadioGroupContext } from './context';
+
+const {
+  disabled = false,
+  required = false,
+  orientation = 'vertical',
+  dir = 'ltr',
+  loop = true,
+  defaultValue,
+  name,
+  as = 'div',
+} = defineProps<RadioGroupRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<RadioGroupRootEmits>();
+const model = defineModel<string | undefined>({ default: undefined });
+
+const localValue = ref<string | undefined>(model.value ?? defaultValue);
+
+watch(model, (v) => {
+  if (v === undefined) return;
+  if (v !== localValue.value) localValue.value = v;
+});
+
+function setValue(v: string): void {
+  if (disabled) return;
+  localValue.value = v;
+  model.value = v;
+  emit('valueChange', v);
+}
+
+// DOM-order items via Collection primitive — survives `v-for` reorders.
+const { getItems, CollectionSlot } = useCollectionProvider();
+const items = computed(() => getItems(true).map(i => i.ref));
+
+function focusIndex(i: number): void {
+  const el = items.value[i];
+  if (!el || el.hasAttribute('data-disabled')) {
+    // Skip disabled items when looping forward.
+    return;
+  }
+  el.focus();
+  const v = el.getAttribute('data-value');
+  if (v !== null) setValue(v);
+}
+
+function onItemKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  // Space selects without moving focus.
+  if (event.key === ' ') {
+    event.preventDefault();
+    const v = el.getAttribute('data-value');
+    if (v !== null) setValue(v);
+    return;
+  }
+  const action = rovingKeyToAction(event, { orientation, dir, loop });
+  if (!action) return;
+  event.preventDefault();
+  const enabled = items.value.filter(x => !x.hasAttribute('data-disabled'));
+  if (enabled.length === 0) return;
+  const current = enabled.indexOf(el);
+  if (action.absolute === 'home') return focusIndex(items.value.indexOf(enabled[0]!));
+  if (action.absolute === 'end') return focusIndex(items.value.indexOf(enabled[enabled.length - 1]!));
+  const nextIdx = resolveNextIndex(current === -1 ? 0 : current, action.delta, enabled.length, loop);
+  focusIndex(items.value.indexOf(enabled[nextIdx]!));
+}
+
+provideRadioGroupContext({
+  value: localValue,
+  setValue,
+  // Identity passthroughs via `toRef` — reactive without `computed`'s effect/cache.
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  loop: toRef(() => loop),
+  disabled: toRef(() => disabled),
+  required: toRef(() => required),
+  name: toRef(() => name),
+  items,
+  onItemKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="radiogroup"
+      :aria-orientation="orientation"
+      :aria-required="required || undefined"
+      :aria-disabled="disabled || undefined"
+      :dir="dir"
+      :data-orientation="orientation"
+      :data-disabled="disabled ? '' : undefined"
+    >
+      <slot :value="localValue" />
+      <input
+        v-if="name"
+        type="radio"
+        tabindex="-1"
+        aria-hidden="true"
+        :name="name"
+        :value="localValue ?? ''"
+        :checked="localValue !== undefined"
+        :required="required"
+        :disabled="disabled"
+        style="position: absolute; pointer-events: none; opacity: 0; margin: 0; transform: translateX(-100%);"
+      >
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/radio-group/__test__/RadioGroup.form.test.ts b/vue/primitives/src/radio-group/__test__/RadioGroup.form.test.ts
new file mode 100644
index 0000000..606e17e
--- /dev/null
+++ b/vue/primitives/src/radio-group/__test__/RadioGroup.form.test.ts
@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '../index';
+
+function mountInForm(props: Record<string, unknown> = {}) {
+  const model = ref<string | undefined>(undefined);
+  const submitted = ref<FormData | null>(null);
+  const Harness = defineComponent({
+    setup: () => () => h(
+      'form',
+      {
+        onSubmit: (e: SubmitEvent) => {
+          e.preventDefault();
+          submitted.value = new FormData(e.target as HTMLFormElement);
+        },
+      },
+      [
+        h(RadioGroupRoot, {
+          modelValue: model.value,
+          'onUpdate:modelValue': (v: string | undefined) => { model.value = v; },
+          ...props,
+        }, {
+          default: () => [
+            h(RadioGroupItem, { value: 'apple', id: 'a' }, { default: () => h(RadioGroupIndicator) }),
+            h(RadioGroupItem, { value: 'banana', id: 'b' }, { default: () => h(RadioGroupIndicator) }),
+          ],
+        }),
+        h('button', { type: 'submit', id: 'submit' }, 'Submit'),
+      ],
+    ),
+  });
+  return { wrapper: mount(Harness, { attachTo: document.body }), model, submitted };
+}
+
+describe('RadioGroup — form submission', () => {
+  it('does not render a hidden input when `name` is omitted', async () => {
+    const { wrapper } = mountInForm();
+    await nextTick();
+    expect(wrapper.element.querySelector('input[type="radio"]')).toBeNull();
+    wrapper.unmount();
+  });
+
+  it('renders a hidden, accessibility-hidden input when `name` is set', async () => {
+    const { wrapper } = mountInForm({ name: 'fruit' });
+    await nextTick();
+    const input = wrapper.element.querySelector('input[type="radio"][name="fruit"]') as HTMLInputElement;
+    expect(input).toBeTruthy();
+    expect(input.getAttribute('aria-hidden')).toBe('true');
+    expect(input.tabIndex).toBe(-1);
+    wrapper.unmount();
+  });
+
+  it('hidden input forwards the selected value into FormData on submit', async () => {
+    const { wrapper, submitted } = mountInForm({ name: 'fruit' });
+    await nextTick();
+    document.querySelector<HTMLButtonElement>('#a')!.click();
+    await nextTick();
+    (wrapper.element as HTMLFormElement).requestSubmit();
+    await nextTick();
+    expect(submitted.value).not.toBeNull();
+    expect(submitted.value!.get('fruit')).toBe('apple');
+    wrapper.unmount();
+  });
+
+  it('hidden input mirrors `required`/`disabled`', async () => {
+    const { wrapper } = mountInForm({ name: 'fruit', required: true, disabled: true });
+    await nextTick();
+    const input = wrapper.element.querySelector('input[type="radio"][name="fruit"]') as HTMLInputElement;
+    expect(input.required).toBe(true);
+    expect(input.disabled).toBe(true);
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/radio-group/__test__/RadioGroup.test.ts b/vue/primitives/src/radio-group/__test__/RadioGroup.test.ts
new file mode 100644
index 0000000..4fd76ea
--- /dev/null
+++ b/vue/primitives/src/radio-group/__test__/RadioGroup.test.ts
@@ -0,0 +1,118 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from '../index';
+
+function mountGroup(opts: Record<string, unknown> = {}) {
+  const model = ref<string | undefined>(undefined);
+  const Harness = defineComponent({
+    setup: () => () => h(RadioGroupRoot, {
+      modelValue: model.value,
+      'onUpdate:modelValue': (v: string | undefined) => { model.value = v; },
+      ...opts,
+    }, {
+      default: () => [
+        h(RadioGroupItem, { value: 'a', id: 'a' }, { default: () => h(RadioGroupIndicator) }),
+        h(RadioGroupItem, { value: 'b', id: 'b' }, { default: () => h(RadioGroupIndicator) }),
+        h(RadioGroupItem, { value: 'c', id: 'c', disabled: true }, { default: () => h(RadioGroupIndicator) }),
+      ],
+    }),
+  });
+  return { wrapper: mount(Harness, { attachTo: document.body }), model };
+}
+
+function press(el: Element, key: string): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('RadioGroup', () => {
+  it('renders role="radiogroup" and items with role="radio"', () => {
+    const { wrapper } = mountGroup();
+    const root = wrapper.element as HTMLElement;
+    expect(root.getAttribute('role')).toBe('radiogroup');
+    expect(document.querySelectorAll('[role="radio"]')).toHaveLength(3);
+    wrapper.unmount();
+  });
+
+  it('click selects and emits valueChange', async () => {
+    const { wrapper, model } = mountGroup();
+    await nextTick();
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    a.click();
+    await nextTick();
+    expect(model.value).toBe('a');
+    expect(a.getAttribute('aria-checked')).toBe('true');
+    wrapper.unmount();
+  });
+
+  it('ArrowDown moves focus+selection to next enabled item', async () => {
+    const { wrapper, model } = mountGroup({ defaultValue: 'a' });
+    await nextTick();
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    a.focus();
+    press(a, 'ArrowDown');
+    await nextTick();
+    expect(document.activeElement).toBe(b);
+    expect(model.value).toBe('b');
+    wrapper.unmount();
+  });
+
+  it('skips disabled items on arrow', async () => {
+    const { wrapper, model } = mountGroup({ defaultValue: 'b' });
+    await nextTick();
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    b.focus();
+    press(b, 'ArrowDown');
+    await nextTick();
+    // Loops past disabled 'c' to 'a'
+    expect(document.activeElement).toBe(a);
+    expect(model.value).toBe('a');
+    wrapper.unmount();
+  });
+
+  it('only checked (or first enabled) has tabindex 0', async () => {
+    const { wrapper } = mountGroup();
+    await nextTick();
+    const [a, b] = document.querySelectorAll<HTMLButtonElement>('[role="radio"]');
+    expect(a!.tabIndex).toBe(0);
+    expect(b!.tabIndex).toBe(-1);
+    a!.click();
+    await nextTick();
+    expect(a!.tabIndex).toBe(0);
+    wrapper.unmount();
+  });
+
+  it('disabled item: aria-disabled=true, not clickable', async () => {
+    const { wrapper, model } = mountGroup();
+    await nextTick();
+    const c = document.querySelector<HTMLButtonElement>('#c')!;
+    expect(c.getAttribute('aria-disabled')).toBe('true');
+    c.click();
+    await nextTick();
+    expect(model.value).toBeUndefined();
+    wrapper.unmount();
+  });
+
+  it('RadioGroupIndicator renders only for checked item', async () => {
+    const { wrapper } = mountGroup({ defaultValue: 'b' });
+    await nextTick();
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    expect(b.querySelector('span')).toBeTruthy();
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    expect(a.querySelector('span')).toBeNull();
+    wrapper.unmount();
+  });
+
+  it('Space selects the focused item', async () => {
+    const { wrapper, model } = mountGroup();
+    await nextTick();
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    b.focus();
+    press(b, ' ');
+    await nextTick();
+    expect(model.value).toBe('b');
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/radio-group/__test__/__screenshots__/RadioGroup.form.test.ts/RadioGroup---form-submission-hidden-input-forwards-the-selected-value-into-FormData-on-submit-1.png b/vue/primitives/src/radio-group/__test__/__screenshots__/RadioGroup.form.test.ts/RadioGroup---form-submission-hidden-input-forwards-the-selected-value-into-FormData-on-submit-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e226070f852f7609edf1964016180ff1d592b7d
GIT binary patch
literal 3322
zcmeHK?N^d#7)PzFG;_z3W~rRbZJwQuaa<*8ioKg_YPy+~3YwYO3yNr@z=PEqZI)Ip
ztwgCT$;|f^BI>hpi6)`V!dD<gArwR;c|bt+_+cM*_6O{X-|lmr`?}8W{{4Q}ec#tF
z2g5_wtlqF1fk3PY-M=Rafv^fgAgp^=TEmf&i_Z!X2>aU5Jv)Cq&rpiO9+ysB_(MaK
zhK_w1=@b%aYoFg7<@#IXyPYeN5B}VH?~7j@*1PRowyt63^o|#ouUxre7r9>a@qt~|
zeaFnvm$}u4PJOoNs1LBW{9xtR9gayG-l&qIcBQ6Wx-2WF0l`glq8Q?+<INH|M@<&A
z_6-gWuDb4<X8lg#HlOK04WMI6cQXa|Bjmkkcib?Ezi`SdbeHrHJk3m5&vq@&1vz#G
zVd<=}fI3nYtvS(1qRolE&2!-ga_7gtiUk_+qUPOegE9p^dCuNPLBRYZy2>HgG_xxG
z`W^qN8n%$SV6>PEJe|Yk1FgwM0T0m4Ss0B<(7|kYeQOhxac>Rx>EZfg)^5iunD`OG
zB*AV$4HkPdg0;n5blNaS)*st%!5bTBvCknJ?;{PzdHL>6A3khp{Uj;IH0ZjM(#+|o
zOL$8cXwsE4K}byYl=<7bWpsX?)}ra?@?r*BIbgO71E97Nhc_uuzIaK!7DYnEZ*A2D
zTMS+-lt}kR7=xo`^;LusJ(5RXUgjZbCIyR$Sxl5rA<<MVxG+(S3wK};?)oVn78ap!
z7%Sa{JKIhR`2v9lX@pQ{lM+zcW{{Q0nY6ZdiMZQ<_6^!4KJ)GPj*XR|ahe-IrzSRM
zYh_(K6Xb$Y>D4V(IxBVNr8drXNkekCJ6vL#BQGO~v!z|QlGIx6baMe_{^YDQj%J>d
z3Pxafb7Og^@LcoBX#w*5hYRpd`F*-a&ddv2NzPRDjd@0UN01f?4q!PM6OkeAbIQgZ
z3^YP?N(jEo)%s}4hywqVvTWIrl+rAV8DeI<{w7IUN)j6eQ<&Ghq(l0TG^jHMn>{gE
zRokX|KJ1Gh@xzL<`r{)4HGi&)i6a<QY|yM5?#Gf<*U)19C_T7kmHb&hcDOFFU0M)~
zk!e{>AjevXB9ef<FtmuQZcTa%Kq3-N^U5WOit)|Q*26q{L|`l?Z7~kWhB{$9C+x+)
zr}j<0ui|yX%mMb?Ibkd>_W-Ij^Zk?P?jmpU_>GW`8W-&O#E~jo{jpcBDGb7k<u2dn
znv(<MLQRRm7D=f)ryBBsVCc7E;<Mhva-rp&Hz4?2t;f4=5~9|-7I-IFBdc=lP%Y`h
z&(BJW^i7H9dV(O6h91V^xe@t(VON)%mJQ%!w|hcr&=QKaC0o0ht8Abn0sW(5Y|f{*
zA-uW9t{N^*N-*kF<P}J=vR+D1{Pl?Ler{kIu5KA^(#ozq^x}%=VbeVJ4?s3fH?2e;
zQc9l~l}e@lEM;rp38iPg-<TPaAZ<DV!IYV%8ef5(RCDvdW><;dV6+|!h)o798!rm5
z(v@>cD9U=CusW7aG0b`v1ZKn?B~Mne_O+u&(%ZN7#}S88S=4z2i@Yyiwy2QCuV{+P
z=JQQ624T=MHNfFjvdZSi3nRoC-QG?Kv^%b+XS-1#ML?C74IX}=#?sX~6<Y$pR>*Tf
zE%YUppwm2lFpr09<hkV;M1>X)CS|s(Y2BiD5xF2+fz^2rO+>Ky22%M#MW+`RQ|b%D
zR4~H?wy&EU>*U{g%s|_MMt^b=K0QK&35#%GEVpx}m^3_RRb2sJ4|ZOcYftsEh#&j>
zKmF(GSqd+4@~^jO$q-A1STe*vKeMH7Sn7uVwHwrH;lagX5kihb@M6W{=wgGYX55S3
Te`dB0jvzw!hVQA_m2mNI=G05s

literal 0
HcmV?d00001

diff --git a/vue/primitives/src/radio-group/context.ts b/vue/primitives/src/radio-group/context.ts
new file mode 100644
index 0000000..f7c0874
--- /dev/null
+++ b/vue/primitives/src/radio-group/context.ts
@@ -0,0 +1,33 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { RovingDirection, RovingOrientation } from '../utils/roving-focus';
+import { useContextFactory } from '@robonen/vue';
+
+export interface RadioGroupContext {
+  value: Ref<string | undefined>;
+  setValue: (v: string) => void;
+  orientation: Ref<RovingOrientation>;
+  direction: Ref<RovingDirection>;
+  loop: Ref<boolean>;
+  disabled: Ref<boolean>;
+  required: Ref<boolean>;
+  name: Ref<string | undefined>;
+  /** DOM-ordered items, sourced from the internal Collection. */
+  items: ComputedRef<HTMLElement[]>;
+  onItemKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+const rootCtx = useContextFactory<RadioGroupContext>('RadioGroupContext');
+
+export const provideRadioGroupContext = rootCtx.provide;
+export const useRadioGroupContext = rootCtx.inject;
+
+export interface RadioGroupItemContext {
+  value: string;
+  checked: ComputedRef<boolean>;
+  disabled: ComputedRef<boolean>;
+}
+
+const itemCtx = useContextFactory<RadioGroupItemContext>('RadioGroupItemContext');
+
+export const provideRadioGroupItemContext = itemCtx.provide;
+export const useRadioGroupItemContext = itemCtx.inject;
diff --git a/vue/primitives/src/radio-group/index.ts b/vue/primitives/src/radio-group/index.ts
new file mode 100644
index 0000000..25c039c
--- /dev/null
+++ b/vue/primitives/src/radio-group/index.ts
@@ -0,0 +1,6 @@
+export { default as RadioGroupIndicator } from './RadioGroupIndicator.vue';
+export { default as RadioGroupItem } from './RadioGroupItem.vue';
+export { default as RadioGroupRoot } from './RadioGroupRoot.vue';
+export type { RadioGroupIndicatorProps } from './RadioGroupIndicator.vue';
+export type { RadioGroupItemProps } from './RadioGroupItem.vue';
+export type { RadioGroupRootEmits, RadioGroupRootProps } from './RadioGroupRoot.vue';
diff --git a/vue/primitives/src/roving-focus/RovingFocusGroup.vue b/vue/primitives/src/roving-focus/RovingFocusGroup.vue
new file mode 100644
index 0000000..3448bbb
--- /dev/null
+++ b/vue/primitives/src/roving-focus/RovingFocusGroup.vue
@@ -0,0 +1,156 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+import type { Orientation } from './utils';
+import type { PrimitiveProps } from '../primitive';
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface RovingFocusGroupProps extends PrimitiveProps {
+  /** Navigation orientation — decides which arrow keys move focus. */
+  orientation?: Orientation;
+  /** Writing direction (LTR / RTL). Falls back to `useConfig().dir`. */
+  dir?: Direction;
+  /**
+   * Wrap around at the ends.
+   * @default false
+   */
+  loop?: boolean;
+  /** Controlled current tab-stop id. */
+  currentTabStopId?: string | null;
+  /** Initial current tab-stop id (uncontrolled). */
+  defaultCurrentTabStopId?: string;
+  /**
+   * Prevent scroll when focus enters the group.
+   * @default false
+   */
+  preventScrollOnEntryFocus?: boolean;
+}
+
+export interface RovingFocusGroupEmits {
+  entryFocus: [event: Event];
+}
+
+export interface RovingFocusGroupContext {
+  orientation: Ref<Orientation | undefined>;
+  dir: Ref<Direction>;
+  loop: Ref<boolean>;
+  currentTabStopId: Ref<string | null | undefined>;
+  onItemFocus: (tabStopId: string) => void;
+  onItemShiftTab: () => void;
+  onFocusableItemAdd: () => void;
+  onFocusableItemRemove: () => void;
+}
+
+export const RovingFocusGroupCtx = useContextFactory<RovingFocusGroupContext>(
+  'RovingFocusGroupContext',
+);
+</script>
+
+<script setup lang="ts">
+import { ENTRY_FOCUS, EVENT_OPTIONS, focusFirst } from './utils';
+import { ref, toRef } from 'vue';
+import { Primitive } from '../primitive';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+
+const {
+  orientation,
+  dir,
+  loop = false,
+  currentTabStopId: currentTabStopIdProp,
+  defaultCurrentTabStopId,
+  preventScrollOnEntryFocus = false,
+  as = 'div',
+} = defineProps<RovingFocusGroupProps>();
+
+const emit = defineEmits<RovingFocusGroupEmits>();
+
+const config = useConfig();
+// `dir` falls back to the provider's configured direction when not given as prop.
+const dirRef = toRef(() => dir ?? config.dir.value);
+const orientationRef = toRef(() => orientation);
+const loopRef = toRef(() => loop);
+
+const currentTabStopId = ref<string | null | undefined>(
+  currentTabStopIdProp ?? defaultCurrentTabStopId,
+);
+
+const isTabbingBackOut = ref(false);
+const isClickFocus = ref(false);
+const focusableItemsCount = ref(0);
+
+const { getItems, CollectionSlot } = useCollectionProvider();
+
+function handleFocus(event: FocusEvent): void {
+  const isKeyboardFocus = !isClickFocus.value;
+
+  if (
+    event.currentTarget
+    && event.target === event.currentTarget
+    && isKeyboardFocus
+    && !isTabbingBackOut.value
+  ) {
+    const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+    event.currentTarget.dispatchEvent(entryFocusEvent);
+    emit('entryFocus', entryFocusEvent);
+
+    if (!entryFocusEvent.defaultPrevented) {
+      const items = getItems()
+        .map(i => i.ref)
+        .filter(i => i.dataset['disabled'] !== '');
+      const activeItem = items.find(item => item.getAttribute('data-active') === '');
+      const currentItem = items.find(item => item.id === currentTabStopId.value);
+      const candidateItems = [activeItem, currentItem, ...items].filter(
+        Boolean,
+      ) as HTMLElement[];
+      focusFirst(candidateItems, preventScrollOnEntryFocus);
+    }
+  }
+  isClickFocus.value = false;
+}
+
+function handleMouseUp(): void {
+  setTimeout(() => {
+    isClickFocus.value = false;
+  }, 1);
+}
+
+defineExpose({ getItems });
+
+RovingFocusGroupCtx.provide({
+  loop: loopRef,
+  dir: dirRef,
+  orientation: orientationRef,
+  currentTabStopId,
+  onItemFocus: (tabStopId: string) => {
+    currentTabStopId.value = tabStopId;
+  },
+  onItemShiftTab: () => {
+    isTabbingBackOut.value = true;
+  },
+  onFocusableItemAdd: () => {
+    focusableItemsCount.value++;
+  },
+  onFocusableItemRemove: () => {
+    focusableItemsCount.value--;
+  },
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :tabindex="isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0"
+      :data-orientation="orientation"
+      :as="as"
+      :dir="dirRef"
+      style="outline: none"
+      @mousedown="isClickFocus = true"
+      @mouseup="handleMouseUp"
+      @focus="handleFocus"
+      @blur="isTabbingBackOut = false"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/roving-focus/RovingFocusItem.vue b/vue/primitives/src/roving-focus/RovingFocusItem.vue
new file mode 100644
index 0000000..c014934
--- /dev/null
+++ b/vue/primitives/src/roving-focus/RovingFocusItem.vue
@@ -0,0 +1,116 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface RovingFocusItemProps extends PrimitiveProps {
+  /** Unique tab-stop id. Auto-generated via config `useId` when omitted. */
+  tabStopId?: string;
+  /**
+   * Whether this item is focusable.
+   * @default true
+   */
+  focusable?: boolean;
+  /** Marks the item as active (current selection). */
+  active?: boolean;
+  /**
+   * Allow `Shift+Arrow` for navigation.
+   * @default false
+   */
+  allowShiftKey?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted } from 'vue';
+import { focusFirst, getFocusIntent, wrapArray } from './utils';
+import { Primitive } from '../primitive';
+import { RovingFocusGroupCtx } from './RovingFocusGroup.vue';
+import { useCollectionInjector } from '../collection';
+import { useId } from '../config-provider';
+
+const {
+  tabStopId,
+  focusable = true,
+  active = false,
+  allowShiftKey = false,
+  as = 'span',
+} = defineProps<RovingFocusItemProps>();
+
+const context = RovingFocusGroupCtx.inject();
+// `useId` returns a `ComputedRef<string>` in this repo — unwrap where needed.
+const autoId = useId();
+const id = computed(() => tabStopId ?? autoId.value);
+const isCurrentTabStop = computed(() => context.currentTabStopId.value === id.value);
+
+const { getItems, CollectionItem } = useCollectionInjector();
+
+onMounted(() => {
+  if (focusable) context.onFocusableItemAdd();
+});
+
+onUnmounted(() => {
+  if (focusable) context.onFocusableItemRemove();
+});
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Tab' && event.shiftKey) {
+    context.onItemShiftTab();
+    return;
+  }
+
+  if (event.target !== event.currentTarget) return;
+
+  const focusIntent = getFocusIntent(event, context.orientation.value, context.dir.value);
+  if (focusIntent === undefined) return;
+
+  if (
+    event.metaKey
+    || event.ctrlKey
+    || event.altKey
+    || (allowShiftKey ? false : event.shiftKey)
+  )
+    return;
+
+  event.preventDefault();
+
+  let candidateNodes = getItems()
+    .map(i => i.ref)
+    .filter(i => i.dataset['disabled'] !== '');
+
+  if (focusIntent === 'last') {
+    candidateNodes.reverse();
+  }
+  else if (focusIntent === 'prev' || focusIntent === 'next') {
+    if (focusIntent === 'prev') candidateNodes.reverse();
+
+    const currentIndex = candidateNodes.indexOf(event.currentTarget as HTMLElement);
+
+    candidateNodes = context.loop.value
+      ? wrapArray(candidateNodes, currentIndex + 1)
+      : candidateNodes.slice(currentIndex + 1);
+  }
+
+  nextTick(() => focusFirst(candidateNodes));
+}
+
+function handleMousedown(event: MouseEvent): void {
+  if (!focusable) event.preventDefault();
+  else context.onItemFocus(id.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :tabindex="isCurrentTabStop ? 0 : -1"
+      :data-orientation="context.orientation.value"
+      :data-active="active ? '' : undefined"
+      :data-disabled="!focusable ? '' : undefined"
+      :as="as"
+      @mousedown="handleMousedown"
+      @focus="context.onItemFocus(id)"
+      @keydown="handleKeydown"
+    >
+      <slot />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/roving-focus/index.ts b/vue/primitives/src/roving-focus/index.ts
new file mode 100644
index 0000000..ee2ec50
--- /dev/null
+++ b/vue/primitives/src/roving-focus/index.ts
@@ -0,0 +1,20 @@
+export { default as RovingFocusGroup, RovingFocusGroupCtx } from './RovingFocusGroup.vue';
+export { default as RovingFocusItem } from './RovingFocusItem.vue';
+
+export type {
+  RovingFocusGroupProps,
+  RovingFocusGroupEmits,
+  RovingFocusGroupContext,
+} from './RovingFocusGroup.vue';
+export type { RovingFocusItemProps } from './RovingFocusItem.vue';
+
+export {
+  ENTRY_FOCUS,
+  EVENT_OPTIONS,
+  focusFirst,
+  getFocusIntent,
+  getDirectionAwareKey,
+  wrapArray,
+  type FocusIntent,
+  type Orientation,
+} from './utils';
diff --git a/vue/primitives/src/roving-focus/utils.ts b/vue/primitives/src/roving-focus/utils.ts
new file mode 100644
index 0000000..18f052a
--- /dev/null
+++ b/vue/primitives/src/roving-focus/utils.ts
@@ -0,0 +1,78 @@
+import type { Direction } from '../config-provider';
+import { getActiveElement } from '@robonen/platform/browsers';
+
+export type Orientation = 'horizontal' | 'vertical';
+
+/** Custom event dispatched when focus enters a `RovingFocusGroup` for the first time. */
+export const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
+
+/** Event options for `ENTRY_FOCUS` — non-bubbling, cancelable. */
+export const EVENT_OPTIONS = { bubbles: false, cancelable: true } as const;
+
+export type FocusIntent = 'first' | 'last' | 'prev' | 'next';
+
+const MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {
+  ArrowLeft: 'prev',
+  ArrowUp: 'prev',
+  ArrowRight: 'next',
+  ArrowDown: 'next',
+  PageUp: 'first',
+  Home: 'first',
+  PageDown: 'last',
+  End: 'last',
+};
+
+/**
+ * For RTL: swaps `ArrowLeft`/`ArrowRight`. Leaves other keys untouched.
+ */
+export function getDirectionAwareKey(key: string, dir?: Direction): string {
+  if (dir !== 'rtl') return key;
+  if (key === 'ArrowLeft') return 'ArrowRight';
+  if (key === 'ArrowRight') return 'ArrowLeft';
+  return key;
+}
+
+/**
+ * Resolves a `FocusIntent` from a keyboard event, respecting `orientation`
+ * and `dir`. Returns `undefined` if the key has no mapping or conflicts with
+ * the orientation (e.g. `ArrowUp` in a horizontal group).
+ */
+export function getFocusIntent(
+  event: KeyboardEvent,
+  orientation?: Orientation,
+  dir?: Direction,
+): FocusIntent | undefined {
+  const key = getDirectionAwareKey(event.key, dir);
+
+  if (orientation === 'vertical' && (key === 'ArrowLeft' || key === 'ArrowRight'))
+    return undefined;
+  if (orientation === 'horizontal' && (key === 'ArrowUp' || key === 'ArrowDown'))
+    return undefined;
+
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+
+/**
+ * Focuses the first element from `candidates` that actually accepts focus.
+ * No-op if the currently focused element is already a candidate.
+ */
+export function focusFirst(candidates: HTMLElement[], preventScroll = false): void {
+  const previouslyFocused = getActiveElement();
+  for (const candidate of candidates) {
+    if (candidate === previouslyFocused) return;
+    candidate.focus({ preventScroll });
+    if (getActiveElement() !== previouslyFocused) return;
+  }
+}
+
+/**
+ * Rotates `array` so that the element at `startIndex` becomes first.
+ *
+ * @example
+ * wrapArray(['a','b','c','d'], 2) // => ['c','d','a','b']
+ */
+export function wrapArray<T>(array: T[], startIndex: number): T[] {
+  const len = array.length;
+  if (len === 0) return array;
+  return Array.from({ length: len }, (_, i) => array[(startIndex + i) % len]!);
+}
diff --git a/vue/primitives/src/scroll-area/ScrollAreaCorner.vue b/vue/primitives/src/scroll-area/ScrollAreaCorner.vue
new file mode 100644
index 0000000..019341d
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaCorner.vue
@@ -0,0 +1,78 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export type ScrollAreaCornerProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+defineProps<ScrollAreaCornerProps>();
+
+const ctx = useScrollAreaRootContext();
+const { forwardRef } = useForwardExpose();
+
+const width = ref(0);
+const height = ref(0);
+
+const hasSize = computed(() => width.value > 0 && height.value > 0);
+const hasBoth = computed(() => ctx.scrollbarXEnabled.value && ctx.scrollbarYEnabled.value);
+
+function measure() {
+  const x = ctx.scrollbarX.value;
+  const y = ctx.scrollbarY.value;
+  width.value = y ? y.offsetWidth : 0;
+  height.value = x ? x.offsetHeight : 0;
+  ctx.onCornerWidthChange(width.value);
+  ctx.onCornerHeightChange(height.value);
+}
+
+let xObs: ResizeObserver | null = null;
+let yObs: ResizeObserver | null = null;
+
+function attach() {
+  xObs?.disconnect();
+  yObs?.disconnect();
+  const x = ctx.scrollbarX.value;
+  const y = ctx.scrollbarY.value;
+  if (x) {
+    xObs = new ResizeObserver(measure);
+    xObs.observe(x);
+  }
+  if (y) {
+    yObs = new ResizeObserver(measure);
+    yObs.observe(y);
+  }
+  measure();
+}
+
+onMounted(attach);
+watch([() => ctx.scrollbarX.value, () => ctx.scrollbarY.value], attach);
+onScopeDispose(() => {
+  xObs?.disconnect();
+  yObs?.disconnect();
+});
+</script>
+
+<template>
+  <Primitive
+    v-if="hasBoth && hasSize"
+    :ref="forwardRef"
+    :as="as ?? 'div'"
+    :style="{
+      width: `${width}px`,
+      height: `${height}px`,
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+    }"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaRoot.vue b/vue/primitives/src/scroll-area/ScrollAreaRoot.vue
new file mode 100644
index 0000000..2ff0d62
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaRoot.vue
@@ -0,0 +1,97 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { ScrollAreaType } from './types';
+
+export interface ScrollAreaRootProps extends PrimitiveProps {
+  /**
+   * Visibility behaviour for scrollbars.
+   * - `auto`: visible whenever content overflows.
+   * - `always`: always visible.
+   * - `scroll`: visible while the user is scrolling, then hides after `scrollHideDelay`.
+   * - `hover`: visible while the pointer is over the root, then hides after `scrollHideDelay`.
+   * @default 'hover'
+   */
+  type?: ScrollAreaType;
+  /** Reading direction. Inherits from `ConfigProvider` when omitted. */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * For `type='scroll'` and `type='hover'`, the time in ms before scrollbars hide
+   * after the user stops interacting.
+   * @default 600
+   */
+  scrollHideDelay?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue';
+import { Primitive } from '../primitive';
+import { provideScrollAreaRootContext } from './context';
+import { useConfig, useId } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<ScrollAreaRootProps>(), {
+  type: 'hover',
+  scrollHideDelay: 600,
+});
+
+const config = useConfig();
+
+const viewport = ref<HTMLElement | null>(null);
+const content = ref<HTMLElement | null>(null);
+const scrollbarX = ref<HTMLElement | null>(null);
+const scrollbarY = ref<HTMLElement | null>(null);
+const scrollbarXEnabled = ref(false);
+const scrollbarYEnabled = ref(false);
+const cornerWidth = ref(0);
+const cornerHeight = ref(0);
+const viewportId = useId(undefined, 'scroll-area-viewport');
+
+const dir = computed(() => props.dir ?? config.dir.value);
+
+const { forwardRef, currentElement: scrollArea } = useForwardExpose();
+
+provideScrollAreaRootContext({
+  type: toRef(props, 'type'),
+  dir,
+  scrollHideDelay: toRef(props, 'scrollHideDelay'),
+  scrollArea,
+  viewport,
+  content,
+  scrollbarX,
+  scrollbarY,
+  scrollbarXEnabled,
+  scrollbarYEnabled,
+  cornerWidth,
+  cornerHeight,
+  viewportId,
+  onScrollbarXEnabledChange: (v) => { scrollbarXEnabled.value = v; },
+  onScrollbarYEnabledChange: (v) => { scrollbarYEnabled.value = v; },
+  onCornerWidthChange: (n) => { cornerWidth.value = n; },
+  onCornerHeightChange: (n) => { cornerHeight.value = n; },
+});
+
+defineExpose({
+  viewport,
+  scrollTop: () => viewport.value?.scrollTo({ top: 0 }),
+  scrollTopLeft: () => viewport.value?.scrollTo({ top: 0, left: 0 }),
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :dir="dir"
+    :style="{
+      position: 'relative',
+      '--scroll-area-corner-width': `${cornerWidth}px`,
+      '--scroll-area-corner-height': `${cornerHeight}px`,
+    }"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbar.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbar.vue
new file mode 100644
index 0000000..442b2d8
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbar.vue
@@ -0,0 +1,81 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ScrollAreaScrollbarProps extends PrimitiveProps {
+  /** @default 'vertical' */
+  orientation?: 'horizontal' | 'vertical';
+  /** Keep mounted regardless of visibility state. */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watch } from 'vue';
+import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue';
+import ScrollAreaScrollbarHover from './ScrollAreaScrollbarHover.vue';
+import ScrollAreaScrollbarScroll from './ScrollAreaScrollbarScroll.vue';
+import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
+  orientation: 'vertical',
+});
+
+const ctx = useScrollAreaRootContext();
+const isHorizontal = computed(() => props.orientation === 'horizontal');
+
+watch(isHorizontal, (h) => {
+  if (h)
+    ctx.onScrollbarXEnabledChange(true);
+  else
+    ctx.onScrollbarYEnabledChange(true);
+}, { immediate: true });
+
+onBeforeUnmount(() => {
+  if (isHorizontal.value)
+    ctx.onScrollbarXEnabledChange(false);
+  else
+    ctx.onScrollbarYEnabledChange(false);
+});
+</script>
+
+<template>
+  <ScrollAreaScrollbarHover
+    v-if="ctx.type.value === 'hover'"
+    v-bind="$attrs"
+    :orientation="orientation"
+    :force-mount="forceMount"
+    :as="as"
+  >
+    <slot />
+  </ScrollAreaScrollbarHover>
+  <ScrollAreaScrollbarScroll
+    v-else-if="ctx.type.value === 'scroll'"
+    v-bind="$attrs"
+    :orientation="orientation"
+    :force-mount="forceMount"
+    :as="as"
+  >
+    <slot />
+  </ScrollAreaScrollbarScroll>
+  <ScrollAreaScrollbarAuto
+    v-else-if="ctx.type.value === 'auto'"
+    v-bind="$attrs"
+    :orientation="orientation"
+    :force-mount="forceMount"
+    :as="as"
+  >
+    <slot />
+  </ScrollAreaScrollbarAuto>
+  <ScrollAreaScrollbarVisible
+    v-else
+    v-bind="$attrs"
+    :orientation="orientation"
+    :as="as"
+    data-state="visible"
+  >
+    <slot />
+  </ScrollAreaScrollbarVisible>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbarAuto.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbarAuto.vue
new file mode 100644
index 0000000..21ac6c0
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbarAuto.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ScrollAreaScrollbarAutoProps extends PrimitiveProps {
+  orientation?: 'horizontal' | 'vertical';
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watch } from 'vue';
+import { Presence } from '../presence';
+import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue';
+import { debounceCallback } from './utils';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarAutoProps>(), {
+  orientation: 'vertical',
+});
+
+const ctx = useScrollAreaRootContext();
+const visible = ref(false);
+const isHorizontal = computed(() => props.orientation === 'horizontal');
+
+const handleResize = debounceCallback(() => {
+  const vp = ctx.viewport.value;
+  if (!vp)
+    return;
+  const overflowX = vp.offsetWidth < vp.scrollWidth;
+  const overflowY = vp.offsetHeight < vp.scrollHeight;
+  visible.value = isHorizontal.value ? overflowX : overflowY;
+}, 10);
+
+let viewportObserver: ResizeObserver | null = null;
+let contentObserver: ResizeObserver | null = null;
+
+function attach() {
+  detach();
+  const vp = ctx.viewport.value;
+  const co = ctx.content.value;
+  if (vp) {
+    viewportObserver = new ResizeObserver(handleResize);
+    viewportObserver.observe(vp);
+  }
+  if (co) {
+    contentObserver = new ResizeObserver(handleResize);
+    contentObserver.observe(co);
+  }
+  handleResize();
+}
+
+function detach() {
+  viewportObserver?.disconnect();
+  viewportObserver = null;
+  contentObserver?.disconnect();
+  contentObserver = null;
+}
+
+onMounted(attach);
+watch([() => ctx.viewport.value, () => ctx.content.value], attach);
+onScopeDispose(() => {
+  handleResize.cancel();
+  detach();
+});
+</script>
+
+<template>
+  <Presence :present="forceMount || visible">
+    <ScrollAreaScrollbarVisible
+      v-bind="$attrs"
+      :orientation="orientation"
+      :as="as"
+      :data-state="visible ? 'visible' : 'hidden'"
+    >
+      <slot />
+    </ScrollAreaScrollbarVisible>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbarHover.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbarHover.vue
new file mode 100644
index 0000000..6b22000
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbarHover.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ScrollAreaScrollbarHoverProps extends PrimitiveProps {
+  orientation?: 'horizontal' | 'vertical';
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { onScopeDispose, ref, watch } from 'vue';
+import { Presence } from '../presence';
+import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<ScrollAreaScrollbarHoverProps>(), {
+  orientation: 'vertical',
+});
+
+const ctx = useScrollAreaRootContext();
+const visible = ref(false);
+let hideTimer: ReturnType<typeof setTimeout> | null = null;
+let scrollArea: HTMLElement | null = null;
+
+function clearTimer() {
+  if (hideTimer !== null) {
+    globalThis.clearTimeout(hideTimer);
+    hideTimer = null;
+  }
+}
+
+function onEnter() {
+  clearTimer();
+  visible.value = true;
+}
+function onLeave() {
+  clearTimer();
+  hideTimer = globalThis.setTimeout(() => {
+    visible.value = false;
+  }, ctx.scrollHideDelay.value);
+}
+
+function attach(el: HTMLElement | null) {
+  detach();
+  if (!el)
+    return;
+  scrollArea = el;
+  el.addEventListener('pointerenter', onEnter);
+  el.addEventListener('pointerleave', onLeave);
+}
+function detach() {
+  if (!scrollArea)
+    return;
+  scrollArea.removeEventListener('pointerenter', onEnter);
+  scrollArea.removeEventListener('pointerleave', onLeave);
+  scrollArea = null;
+}
+
+watch(() => ctx.scrollArea.value, attach, { immediate: true });
+onScopeDispose(() => {
+  clearTimer();
+  detach();
+});
+</script>
+
+<template>
+  <Presence :present="forceMount || visible">
+    <ScrollAreaScrollbarAuto
+      v-bind="$attrs"
+      :orientation="orientation"
+      :as="as"
+      :data-state="visible ? 'visible' : 'hidden'"
+      force-mount
+    >
+      <slot />
+    </ScrollAreaScrollbarAuto>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbarImpl.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbarImpl.vue
new file mode 100644
index 0000000..8f0748d
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbarImpl.vue
@@ -0,0 +1,246 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { ScrollAreaSizes } from './types';
+
+export interface ScrollAreaScrollbarImplProps extends PrimitiveProps {
+  orientation: 'horizontal' | 'vertical';
+  sizes: ScrollAreaSizes;
+  hasThumb: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { toInt } from './utils';
+import { useForwardExpose } from '@robonen/vue';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<ScrollAreaScrollbarImplProps>();
+const emit = defineEmits<{
+  sizesChange: [sizes: ScrollAreaSizes];
+  wheelScroll: [event: WheelEvent, maxScroll: number];
+  dragScroll: [pointerPos: number];
+  thumbPositionChange: [];
+  registerScrollbar: [el: HTMLElement | null];
+}>();
+
+const ctx = useScrollAreaRootContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const isHorizontal = computed(() => props.orientation === 'horizontal');
+const rectRef = ref<DOMRect | null>(null);
+const prevWebkitUserSelect = ref('');
+const prevPointerEvents = ref('');
+
+/** Live viewport scroll position along this scrollbar's axis. */
+const scrollPos = ref(0);
+
+const maxScroll = computed(() =>
+  Math.max(0, props.sizes.content - props.sizes.viewport),
+);
+
+const ariaValueNow = computed(() => {
+  if (maxScroll.value <= 0) return 0;
+  const pct = (scrollPos.value / maxScroll.value) * 100;
+  return Math.round(Math.min(100, Math.max(0, pct)));
+});
+
+/** Scrollbar is interactive only when content actually overflows. */
+const isInteractive = computed(() => props.hasThumb && maxScroll.value > 0);
+
+function updateScrollPos() {
+  const vp = ctx.viewport.value;
+  if (!vp) return;
+  scrollPos.value = isHorizontal.value ? vp.scrollLeft : vp.scrollTop;
+}
+
+function getPointerPosition(event: PointerEvent): number {
+  const rect = rectRef.value;
+  if (!rect)
+    return 0;
+  return isHorizontal.value ? event.clientX - rect.left : event.clientY - rect.top;
+}
+
+function onPointerDown(event: PointerEvent) {
+  if (event.button !== 0)
+    return;
+  const target = event.target as HTMLElement;
+  target.setPointerCapture(event.pointerId);
+  rectRef.value = currentElement.value?.getBoundingClientRect() ?? null;
+  prevWebkitUserSelect.value = document.body.style.webkitUserSelect;
+  document.body.style.webkitUserSelect = 'none';
+  if (ctx.viewport.value) {
+    prevPointerEvents.value = ctx.viewport.value.style.pointerEvents;
+    ctx.viewport.value.style.pointerEvents = 'none';
+  }
+  emit('dragScroll', getPointerPosition(event));
+}
+
+function onPointerMove(event: PointerEvent) {
+  emit('dragScroll', getPointerPosition(event));
+}
+
+function onPointerUp(event: PointerEvent) {
+  const target = event.target as HTMLElement;
+  if (target.hasPointerCapture(event.pointerId))
+    target.releasePointerCapture(event.pointerId);
+  document.body.style.webkitUserSelect = prevWebkitUserSelect.value;
+  if (ctx.viewport.value)
+    ctx.viewport.value.style.pointerEvents = prevPointerEvents.value;
+  rectRef.value = null;
+}
+
+function onWheel(event: WheelEvent) {
+  emit('wheelScroll', event, maxScroll.value);
+}
+
+/**
+ * WAI-ARIA scrollbar pattern — Arrow ±5% of the viewport size, PageUp/Down
+ * jump a full viewport, Home/End to the extremes. In RTL the horizontal
+ * arrow keys are visually reversed.
+ */
+function onKeyDown(event: KeyboardEvent) {
+  if (!isInteractive.value) return;
+  const vp = ctx.viewport.value;
+  if (!vp) return;
+
+  const step = Math.max(1, Math.round(props.sizes.viewport * 0.05));
+  const page = Math.max(step, props.sizes.viewport);
+  const dir = ctx.dir.value;
+
+  let delta = 0;
+  let absolute: number | null = null;
+
+  if (isHorizontal.value) {
+    const forwardKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+    const backwardKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    if (event.key === forwardKey) delta = step;
+    else if (event.key === backwardKey) delta = -step;
+    else if (event.key === 'PageDown' || event.key === 'PageUp')
+      delta = event.key === 'PageDown' ? page : -page;
+    else if (event.key === 'Home') absolute = 0;
+    else if (event.key === 'End') absolute = maxScroll.value;
+    else return;
+  }
+  else if (event.key === 'ArrowDown') delta = step;
+  else if (event.key === 'ArrowUp') delta = -step;
+  else if (event.key === 'PageDown') delta = page;
+  else if (event.key === 'PageUp') delta = -page;
+  else if (event.key === 'Home') absolute = 0;
+  else if (event.key === 'End') absolute = maxScroll.value;
+  else return;
+
+  event.preventDefault();
+  const current = isHorizontal.value ? vp.scrollLeft : vp.scrollTop;
+  const next = absolute !== null
+    ? absolute
+    : Math.max(0, Math.min(maxScroll.value, current + delta));
+  if (isHorizontal.value) vp.scrollLeft = next;
+  else vp.scrollTop = next;
+}
+
+function measure() {
+  const sb = currentElement.value;
+  const vp = ctx.viewport.value;
+  const co = ctx.content.value;
+  if (!sb || !vp)
+    return;
+  const cs = globalThis.getComputedStyle(sb);
+  emit('sizesChange', {
+    content: co ? (isHorizontal.value ? co.scrollWidth : co.scrollHeight) : (isHorizontal.value ? vp.scrollWidth : vp.scrollHeight),
+    viewport: isHorizontal.value ? vp.offsetWidth : vp.offsetHeight,
+    scrollbar: {
+      size: isHorizontal.value ? sb.clientWidth : sb.clientHeight,
+      paddingStart: isHorizontal.value ? toInt(cs.paddingLeft) : toInt(cs.paddingTop),
+      paddingEnd: isHorizontal.value ? toInt(cs.paddingRight) : toInt(cs.paddingBottom),
+    },
+  });
+}
+
+let sbObs: ResizeObserver | null = null;
+let vpObs: ResizeObserver | null = null;
+let coObs: ResizeObserver | null = null;
+
+function attach() {
+  detach();
+  if (currentElement.value) {
+    sbObs = new ResizeObserver(measure);
+    sbObs.observe(currentElement.value);
+  }
+  if (ctx.viewport.value) {
+    vpObs = new ResizeObserver(measure);
+    vpObs.observe(ctx.viewport.value);
+  }
+  if (ctx.content.value) {
+    coObs = new ResizeObserver(measure);
+    coObs.observe(ctx.content.value);
+  }
+  measure();
+  updateScrollPos();
+  emit('thumbPositionChange');
+}
+
+function detach() {
+  sbObs?.disconnect();
+  sbObs = null;
+  vpObs?.disconnect();
+  vpObs = null;
+  coObs?.disconnect();
+  coObs = null;
+}
+
+onMounted(() => {
+  emit('registerScrollbar', currentElement.value ?? null);
+  attach();
+});
+
+watch([() => ctx.viewport.value, () => ctx.content.value, currentElement], attach);
+
+function onViewportScroll() {
+  updateScrollPos();
+  emit('thumbPositionChange');
+}
+
+watch(() => ctx.viewport.value, (vp, prev) => {
+  prev?.removeEventListener('scroll', onViewportScroll);
+  vp?.addEventListener('scroll', onViewportScroll);
+}, { immediate: true });
+
+onScopeDispose(() => {
+  detach();
+  ctx.viewport.value?.removeEventListener('scroll', onViewportScroll);
+  emit('registerScrollbar', null);
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as ?? 'div'"
+    role="scrollbar"
+    :aria-orientation="orientation"
+    :aria-controls="ctx.viewportId.value"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    :aria-valuenow="ariaValueNow"
+    :tabindex="isInteractive ? 0 : -1"
+    :aria-disabled="isInteractive ? undefined : true"
+    :data-orientation="orientation"
+    :style="{
+      position: 'absolute',
+      ...(isHorizontal
+        ? { bottom: 0, left: 0, right: 'var(--scroll-area-corner-width)' }
+        : { top: 0, right: 0, bottom: 'var(--scroll-area-corner-height)' }),
+    }"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @wheel.passive="onWheel"
+    @keydown="onKeyDown"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbarScroll.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbarScroll.vue
new file mode 100644
index 0000000..f84bebd
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbarScroll.vue
@@ -0,0 +1,88 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ScrollAreaScrollbarScrollProps extends PrimitiveProps {
+  orientation?: 'horizontal' | 'vertical';
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watch } from 'vue';
+import { Presence } from '../presence';
+import { useScrollAreaRootContext } from './context';
+import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue';
+import { addUnlinkedScrollListener, debounceCallback } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarScrollProps>(), {
+  orientation: 'vertical',
+});
+
+const ctx = useScrollAreaRootContext();
+const isHorizontal = computed(() => props.orientation === 'horizontal');
+const state = ref<'hidden' | 'scrolling' | 'interacting' | 'idle'>('hidden');
+
+const debouncedScrollEnd = debounceCallback(() => {
+  state.value = 'idle';
+}, 100);
+
+const debouncedHide = debounceCallback(() => {
+  state.value = 'hidden';
+}, ctx.scrollHideDelay.value);
+
+watch(state, (s, prev) => {
+  if (s === 'idle')
+    debouncedHide();
+  if (s !== 'idle' && prev === 'idle')
+    debouncedHide.cancel();
+});
+
+let last = { left: 0, top: 0 };
+let stop: (() => void) | null = null;
+
+function attach() {
+  stop?.();
+  const vp = ctx.viewport.value;
+  if (!vp)
+    return;
+  last = { left: vp.scrollLeft, top: vp.scrollTop };
+  stop = addUnlinkedScrollListener(vp, () => {
+    const next = { left: vp.scrollLeft, top: vp.scrollTop };
+    const horiz = last.left !== next.left;
+    const vert = last.top !== next.top;
+    const matches = isHorizontal.value ? horiz : vert;
+    if (matches) {
+      state.value = 'scrolling';
+      debouncedScrollEnd();
+    }
+    last = next;
+  });
+}
+
+onMounted(attach);
+watch(() => ctx.viewport.value, attach);
+onScopeDispose(() => {
+  stop?.();
+  debouncedScrollEnd.cancel();
+  debouncedHide.cancel();
+});
+
+const isVisible = computed(() => state.value !== 'hidden');
+</script>
+
+<template>
+  <Presence :present="forceMount || isVisible">
+    <ScrollAreaScrollbarVisible
+      v-bind="$attrs"
+      :orientation="orientation"
+      :as="as"
+      :data-state="isVisible ? 'visible' : 'hidden'"
+      @pointerenter="state = 'interacting'"
+      @pointerleave="state = 'idle'"
+    >
+      <slot />
+    </ScrollAreaScrollbarVisible>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaScrollbarVisible.vue b/vue/primitives/src/scroll-area/ScrollAreaScrollbarVisible.vue
new file mode 100644
index 0000000..1655a61
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaScrollbarVisible.vue
@@ -0,0 +1,117 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+</script>
+
+<script setup lang="ts">
+import type { ScrollAreaSizes } from './types';
+import { computed, ref } from 'vue';
+import { provideScrollAreaScrollbarContext, useScrollAreaRootContext } from './context';
+import ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue';
+import { getScrollPositionFromPointer, getThumbOffsetFromScroll, getThumbRatio, isScrollingWithinScrollbarBounds } from './utils';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<PrimitiveProps & { orientation?: 'horizontal' | 'vertical' }>(), {
+  orientation: 'vertical',
+});
+
+const ctx = useScrollAreaRootContext();
+const sizes = ref<ScrollAreaSizes>({
+  content: 0,
+  viewport: 0,
+  scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },
+});
+
+const isHorizontal = computed(() => props.orientation === 'horizontal');
+const hasThumb = computed(() => {
+  const r = getThumbRatio(sizes.value.viewport, sizes.value.content);
+  return r > 0 && r < 1;
+});
+
+const thumbEl = ref<HTMLElement | null>(null);
+const scrollbarEl = ref<HTMLElement | null>(null);
+const pointerOffset = ref(0);
+
+function onSizesChange(s: ScrollAreaSizes) {
+  sizes.value = s;
+}
+
+function onThumbPointerDown(point: { x: number; y: number }) {
+  pointerOffset.value = isHorizontal.value ? point.x : point.y;
+}
+function onThumbPointerUp() {
+  pointerOffset.value = 0;
+}
+
+function onWheelScroll(event: WheelEvent, maxScroll: number) {
+  const vp = ctx.viewport.value;
+  if (!vp)
+    return;
+  if (isHorizontal.value) {
+    const next = vp.scrollLeft + event.deltaY;
+    vp.scrollLeft = next;
+    if (isScrollingWithinScrollbarBounds(next, maxScroll))
+      event.preventDefault();
+  }
+  else {
+    const next = vp.scrollTop + event.deltaY;
+    vp.scrollTop = next;
+    if (isScrollingWithinScrollbarBounds(next, maxScroll))
+      event.preventDefault();
+  }
+}
+
+function onDragScroll(pointerPos: number) {
+  const vp = ctx.viewport.value;
+  if (!vp)
+    return;
+  if (isHorizontal.value) {
+    vp.scrollLeft = getScrollPositionFromPointer(pointerPos, pointerOffset.value, sizes.value, ctx.dir.value);
+  }
+  else {
+    vp.scrollTop = getScrollPositionFromPointer(pointerPos, pointerOffset.value, sizes.value);
+  }
+}
+
+function onThumbPositionChange() {
+  const vp = ctx.viewport.value;
+  const thumb = thumbEl.value;
+  if (!vp || !thumb)
+    return;
+  if (isHorizontal.value) {
+    const offset = getThumbOffsetFromScroll(vp.scrollLeft, sizes.value, ctx.dir.value);
+    thumb.style.transform = `translate3d(${offset}px, 0, 0)`;
+  }
+  else {
+    const offset = getThumbOffsetFromScroll(vp.scrollTop, sizes.value);
+    thumb.style.transform = `translate3d(0, ${offset}px, 0)`;
+  }
+}
+
+provideScrollAreaScrollbarContext({
+  orientation: props.orientation,
+  hasThumb,
+  scrollbar: scrollbarEl,
+  onThumbChange: (el) => { thumbEl.value = el; },
+  onThumbPointerUp,
+  onThumbPointerDown,
+  onThumbPositionChange,
+});
+</script>
+
+<template>
+  <ScrollAreaScrollbarImpl
+    v-bind="$attrs"
+    :orientation="orientation"
+    :as="as"
+    :sizes="sizes"
+    :has-thumb="hasThumb"
+    @sizes-change="onSizesChange"
+    @wheel-scroll="onWheelScroll"
+    @drag-scroll="onDragScroll"
+    @thumb-position-change="onThumbPositionChange"
+    @register-scrollbar="(el) => { scrollbarEl = el; }"
+  >
+    <slot />
+  </ScrollAreaScrollbarImpl>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaThumb.vue b/vue/primitives/src/scroll-area/ScrollAreaThumb.vue
new file mode 100644
index 0000000..5f8c046
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaThumb.vue
@@ -0,0 +1,82 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watch } from 'vue';
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useScrollAreaRootContext, useScrollAreaScrollbarContext } from './context';
+import { addUnlinkedScrollListener } from './utils';
+
+export interface ScrollAreaThumbProps extends PrimitiveProps {
+  /** Keep mounted regardless of `hasThumb`. */
+  forceMount?: boolean;
+}
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<ScrollAreaThumbProps>();
+const root = useScrollAreaRootContext();
+const sb = useScrollAreaScrollbarContext();
+
+const removeUnlinkedScrollListenerRef = ref<(() => void) | null>(null);
+const { forwardRef, currentElement } = useForwardExpose();
+
+function handlePointerDown(event: PointerEvent) {
+  const target = event.target as HTMLElement;
+  const rect = target.getBoundingClientRect();
+  sb.onThumbPointerDown({ x: event.clientX - rect.left, y: event.clientY - rect.top });
+}
+
+function handlePointerUp() {
+  sb.onThumbPointerUp();
+}
+
+function attachScroll() {
+  removeUnlinkedScrollListenerRef.value?.();
+  const vp = root.viewport.value;
+  if (!vp)
+    return;
+  sb.onThumbPositionChange();
+  removeUnlinkedScrollListenerRef.value = addUnlinkedScrollListener(vp, () => {
+    sb.onThumbPositionChange();
+  });
+}
+
+onMounted(() => {
+  attachScroll();
+  if (currentElement.value)
+    sb.onThumbChange(currentElement.value);
+});
+
+watch(currentElement, el => sb.onThumbChange(el ?? null));
+watch(() => root.viewport.value, attachScroll);
+watch(() => sb.hasThumb.value, () => {
+  sb.onThumbPositionChange();
+});
+
+onScopeDispose(() => {
+  removeUnlinkedScrollListenerRef.value?.();
+  sb.onThumbChange(null);
+});
+
+const present = computed(() => props.forceMount || sb.hasThumb.value);
+</script>
+
+<template>
+  <Presence :present="present">
+    <Primitive
+      :ref="forwardRef"
+      :as="as ?? 'div'"
+      data-state="visible"
+      :style="{ width: 'var(--scroll-area-thumb-width)', height: 'var(--scroll-area-thumb-height)' }"
+      v-bind="$attrs"
+      @pointerdowncapture="handlePointerDown"
+      @pointerup="handlePointerUp"
+    >
+      <slot />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/scroll-area/ScrollAreaViewport.vue b/vue/primitives/src/scroll-area/ScrollAreaViewport.vue
new file mode 100644
index 0000000..6d39c47
--- /dev/null
+++ b/vue/primitives/src/scroll-area/ScrollAreaViewport.vue
@@ -0,0 +1,67 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ScrollAreaViewportProps extends PrimitiveProps {
+  /** Inline `nonce` attribute applied to the injected style tag (CSP support). */
+  nonce?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useScrollAreaRootContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+defineProps<ScrollAreaViewportProps>();
+
+const ctx = useScrollAreaRootContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const contentRef = ref<HTMLElement | null>(null);
+
+watch(currentElement, (el) => {
+  ctx.viewport.value = el ?? null;
+}, { immediate: true });
+
+watch(contentRef, (el) => {
+  ctx.content.value = el ?? null;
+}, { immediate: true });
+
+onMounted(() => {
+  ctx.viewport.value = currentElement.value ?? null;
+  ctx.content.value = contentRef.value ?? null;
+});
+</script>
+
+<template>
+  <!-- Hide native scrollbars while preserving native scrolling behaviour. -->
+  <component
+    :is="'style'"
+    :nonce="nonce"
+  >
+    [data-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-scroll-area-viewport]::-webkit-scrollbar{display:none;}
+  </component>
+
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="($attrs.id as string | undefined) ?? ctx.viewportId.value"
+    data-scroll-area-viewport=""
+    :style="{
+      overflowX: ctx.scrollbarXEnabled.value ? 'scroll' : 'hidden',
+      overflowY: ctx.scrollbarYEnabled.value ? 'scroll' : 'hidden',
+    }"
+    v-bind="$attrs"
+  >
+    <!-- A `min-width: fit-content` inner ensures horizontal content is measurable. -->
+    <div
+      :ref="(el: any) => { contentRef = el; }"
+      :style="{ minWidth: '100%', display: 'table' }"
+    >
+      <slot />
+    </div>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/scroll-area/__test__/ScrollArea.a11y.test.ts b/vue/primitives/src/scroll-area/__test__/ScrollArea.a11y.test.ts
new file mode 100644
index 0000000..f9129cf
--- /dev/null
+++ b/vue/primitives/src/scroll-area/__test__/ScrollArea.a11y.test.ts
@@ -0,0 +1,200 @@
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+
+import {
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '../../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function makeApp({
+  rootProps = {},
+  innerSize = '500px',
+}: { rootProps?: Record<string, unknown>; innerSize?: string } = {}) {
+  return defineComponent({
+    setup() {
+      return () => h(
+        ScrollAreaRoot,
+        { ...rootProps, type: 'always', style: { width: '100px', height: '100px' } },
+        {
+          default: () => [
+            h(ScrollAreaViewport, { style: { width: '100%', height: '100%' } }, {
+              default: () => h('div', { style: { width: innerSize, height: innerSize } }, 'content'),
+            }),
+            h(ScrollAreaScrollbar, { orientation: 'vertical' }, {
+              default: () => h(ScrollAreaThumb),
+            }),
+            h(ScrollAreaScrollbar, { orientation: 'horizontal' }, {
+              default: () => h(ScrollAreaThumb),
+            }),
+          ],
+        },
+      );
+    },
+  });
+}
+
+function mountApp(options?: { rootProps?: Record<string, unknown>; innerSize?: string }) {
+  return track(mount(makeApp(options), { attachTo: document.body }));
+}
+
+function getScrollbar(orientation: 'horizontal' | 'vertical'): HTMLElement {
+  return document.querySelector(`[role="scrollbar"][aria-orientation="${orientation}"]`) as HTMLElement;
+}
+
+function getViewport(): HTMLElement {
+  return document.querySelector('[data-scroll-area-viewport]') as HTMLElement;
+}
+
+async function waitFrames(n = 3) {
+  for (let i = 0; i < n; i++) {
+    await new Promise<void>(r => requestAnimationFrame(() => r()));
+    await nextTick();
+  }
+}
+
+describe('scroll-area — scrollbar ARIA', () => {
+  it('exposes role=scrollbar with full ARIA contract', async () => {
+    mountApp();
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const h = getScrollbar('horizontal');
+    expect(v).toBeTruthy();
+    expect(h).toBeTruthy();
+    for (const sb of [v, h]) {
+      expect(sb.getAttribute('aria-valuemin')).toBe('0');
+      expect(sb.getAttribute('aria-valuemax')).toBe('100');
+      expect(sb.getAttribute('aria-valuenow')).toBe('0');
+    }
+    expect(v.getAttribute('aria-orientation')).toBe('vertical');
+    expect(h.getAttribute('aria-orientation')).toBe('horizontal');
+  });
+
+  it('wires aria-controls to the viewport id', async () => {
+    mountApp();
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    expect(vp.id).toBeTruthy();
+    expect(v.getAttribute('aria-controls')).toBe(vp.id);
+  });
+
+  it('marks scrollbar interactive (tabindex=0) when content overflows', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    expect(v.getAttribute('tabindex')).toBe('0');
+    expect(v.hasAttribute('aria-disabled')).toBe(false);
+  });
+
+  it('marks scrollbar non-interactive (tabindex=-1, aria-disabled) when content fits', async () => {
+    mountApp({ innerSize: '50px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    expect(v.getAttribute('tabindex')).toBe('-1');
+    expect(v.getAttribute('aria-disabled')).toBe('true');
+  });
+});
+
+describe('scroll-area — scrollbar keyboard support', () => {
+  it('End scrolls the vertical viewport to the bottom and updates aria-valuenow', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    expect(vp.scrollTop).toBe(0);
+    const ev = new KeyboardEvent('keydown', { key: 'End', bubbles: true, cancelable: true });
+    v.dispatchEvent(ev);
+    await waitFrames();
+    expect(ev.defaultPrevented).toBe(true);
+    expect(vp.scrollTop).toBeGreaterThan(0);
+    expect(v.getAttribute('aria-valuenow')).toBe('100');
+  });
+
+  it('Home scrolls to the top', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    vp.scrollTop = 9999;
+    await waitFrames();
+    v.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true, cancelable: true }));
+    await waitFrames();
+    expect(vp.scrollTop).toBe(0);
+    expect(v.getAttribute('aria-valuenow')).toBe('0');
+  });
+
+  it('ArrowDown moves the vertical viewport forward by ~5% of viewport size', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    const expectedStep = Math.max(1, Math.round(vp.offsetHeight * 0.05));
+    v.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true }));
+    await waitFrames();
+    expect(vp.scrollTop).toBe(expectedStep);
+  });
+
+  it('PageDown moves the vertical viewport by a full viewport', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    const page = vp.offsetHeight;
+    v.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true, cancelable: true }));
+    await waitFrames();
+    expect(vp.scrollTop).toBe(page);
+  });
+
+  it('LTR: ArrowRight scrolls the horizontal viewport forward', async () => {
+    mountApp({ innerSize: '500px' });
+    await waitFrames();
+    const h = getScrollbar('horizontal');
+    const vp = getViewport();
+    const expectedStep = Math.max(1, Math.round(vp.offsetWidth * 0.05));
+    h.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+    await waitFrames();
+    expect(vp.scrollLeft).toBe(expectedStep);
+  });
+
+  it('RTL: ArrowLeft on the horizontal scrollbar engages the handler (visually reversed)', async () => {
+    mountApp({ rootProps: { dir: 'rtl' }, innerSize: '500px' });
+    await waitFrames();
+    const h = getScrollbar('horizontal');
+    const ev = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true });
+    h.dispatchEvent(ev);
+    await waitFrames();
+    // In RTL the visually-forward arrow is ArrowLeft; we assert the handler
+    // claimed the event (browser RTL scrollLeft semantics vary, so direction
+    // of the delta itself is asserted indirectly via preventDefault here).
+    expect(ev.defaultPrevented).toBe(true);
+  });
+
+  it('keydown is a no-op when the scrollbar is non-interactive', async () => {
+    mountApp({ innerSize: '50px' });
+    await waitFrames();
+    const v = getScrollbar('vertical');
+    const vp = getViewport();
+    const before = vp.scrollTop;
+    const ev = new KeyboardEvent('keydown', { key: 'End', bubbles: true, cancelable: true });
+    v.dispatchEvent(ev);
+    await waitFrames();
+    expect(ev.defaultPrevented).toBe(false);
+    expect(vp.scrollTop).toBe(before);
+  });
+});
diff --git a/vue/primitives/src/scroll-area/__test__/ScrollArea.test.ts b/vue/primitives/src/scroll-area/__test__/ScrollArea.test.ts
new file mode 100644
index 0000000..878e3ab
--- /dev/null
+++ b/vue/primitives/src/scroll-area/__test__/ScrollArea.test.ts
@@ -0,0 +1,182 @@
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '../../index';
+import {
+  clamp,
+  getScrollPositionFromPointer,
+  getThumbOffsetFromScroll,
+  getThumbRatio,
+  getThumbSize,
+  isScrollingWithinScrollbarBounds,
+  toInt,
+} from '../utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function makeApp(rootProps: Record<string, unknown> = {}) {
+  return defineComponent({
+    setup(_, { expose }) {
+      const rootRef = ref<any>(null);
+      expose({ rootRef });
+      return () => h(ScrollAreaRoot, { ref: rootRef, ...rootProps, style: { width: '100px', height: '100px' } }, {
+        default: () => [
+          h(ScrollAreaViewport, { style: { width: '100%', height: '100%' } }, {
+            default: () => h('div', { style: { width: '500px', height: '500px' } }, 'content'),
+          }),
+          h(ScrollAreaScrollbar, { orientation: 'vertical' }, {
+            default: () => h(ScrollAreaThumb),
+          }),
+          h(ScrollAreaScrollbar, { orientation: 'horizontal' }, {
+            default: () => h(ScrollAreaThumb),
+          }),
+          h(ScrollAreaCorner),
+        ],
+      });
+    },
+  });
+}
+
+describe('scrollArea utils', () => {
+  it('clamp constrains value to range', () => {
+    expect(clamp(5, 0, 10)).toBe(5);
+    expect(clamp(-1, 0, 10)).toBe(0);
+    expect(clamp(99, 0, 10)).toBe(10);
+  });
+
+  it('toInt parses pixel strings', () => {
+    expect(toInt('12px')).toBe(12);
+    expect(toInt('')).toBe(0);
+    expect(toInt(undefined)).toBe(0);
+    expect(toInt(null)).toBe(0);
+  });
+
+  it('getThumbRatio is 1 when viewport >= content', () => {
+    expect(getThumbRatio(100, 100)).toBe(1);
+    expect(getThumbRatio(200, 100)).toBe(1);
+    expect(getThumbRatio(0, 0)).toBe(1);
+  });
+
+  it('getThumbRatio is fraction when content exceeds viewport', () => {
+    expect(getThumbRatio(100, 200)).toBe(0.5);
+    expect(getThumbRatio(50, 200)).toBe(0.25);
+  });
+
+  it('getThumbSize enforces 18px minimum', () => {
+    const sizes = {
+      content: 100000,
+      viewport: 100,
+      scrollbar: { size: 100, paddingStart: 0, paddingEnd: 0 },
+    };
+    expect(getThumbSize(sizes)).toBe(18);
+  });
+
+  it('getThumbSize scales with ratio', () => {
+    const sizes = {
+      content: 200,
+      viewport: 100,
+      scrollbar: { size: 100, paddingStart: 0, paddingEnd: 0 },
+    };
+    expect(getThumbSize(sizes)).toBe(50);
+  });
+
+  it('getThumbOffsetFromScroll maps 0 → 0 and max → maxThumbPos (LTR)', () => {
+    const sizes = {
+      content: 200,
+      viewport: 100,
+      scrollbar: { size: 100, paddingStart: 0, paddingEnd: 0 },
+    };
+    expect(getThumbOffsetFromScroll(0, sizes)).toBe(0);
+    expect(getThumbOffsetFromScroll(100, sizes)).toBe(50);
+    expect(getThumbOffsetFromScroll(50, sizes)).toBe(25);
+  });
+
+  it('getThumbOffsetFromScroll handles RTL negative scroll', () => {
+    const sizes = {
+      content: 200,
+      viewport: 100,
+      scrollbar: { size: 100, paddingStart: 0, paddingEnd: 0 },
+    };
+    expect(getThumbOffsetFromScroll(0, sizes, 'rtl')).toBe(50);
+    expect(getThumbOffsetFromScroll(-100, sizes, 'rtl')).toBe(0);
+  });
+
+  it('getScrollPositionFromPointer maps min/max pointer to scroll range', () => {
+    const sizes = {
+      content: 200,
+      viewport: 100,
+      scrollbar: { size: 100, paddingStart: 0, paddingEnd: 0 },
+    };
+    expect(getScrollPositionFromPointer(25, 25, sizes)).toBe(0);
+    expect(getScrollPositionFromPointer(75, 25, sizes)).toBe(100);
+    expect(getScrollPositionFromPointer(50, 25, sizes)).toBe(50);
+  });
+
+  it('isScrollingWithinScrollbarBounds detects intermediate scroll positions', () => {
+    expect(isScrollingWithinScrollbarBounds(0, 100)).toBe(false);
+    expect(isScrollingWithinScrollbarBounds(100, 100)).toBe(false);
+    expect(isScrollingWithinScrollbarBounds(50, 100)).toBe(true);
+  });
+});
+
+describe('scrollArea components', () => {
+  it('renders root with viewport and scrollbars', async () => {
+    const w = track(mount(makeApp({ type: 'always' }), { attachTo: document.body }));
+    await nextTick();
+    expect(w.find('[data-scroll-area-viewport]').exists()).toBe(true);
+    expect(w.findAll('[data-orientation="vertical"]').length).toBeGreaterThan(0);
+    expect(w.findAll('[data-orientation="horizontal"]').length).toBeGreaterThan(0);
+  });
+
+  it('viewport hides native scrollbars via injected stylesheet', () => {
+    const w = track(mount(makeApp({ type: 'always' }), { attachTo: document.body }));
+    expect(w.html()).toContain('-webkit-scrollbar');
+  });
+
+  it('honours `dir` prop', () => {
+    const w = track(mount(makeApp({ dir: 'rtl' }), { attachTo: document.body }));
+    expect(w.find('[dir="rtl"]').exists()).toBe(true);
+  });
+
+  it('forwards `as` to Primitive', () => {
+    const w = track(mount(makeApp({ as: 'section' }), { attachTo: document.body }));
+    expect(w.find('section').exists()).toBe(true);
+  });
+
+  it('hover mode keeps scrollbar mounted while pointer is over root', async () => {
+    const w = track(mount(makeApp({ type: 'hover', scrollHideDelay: 1 }), { attachTo: document.body }));
+    await nextTick();
+    const root = w.find('[dir]').element as HTMLElement;
+    root.dispatchEvent(new PointerEvent('pointerenter'));
+    await nextTick();
+    expect(w.findAll('[data-state="visible"]').length).toBeGreaterThan(0);
+  });
+
+  it('exposes scrollTop / scrollTopLeft', async () => {
+    const w = track(mount(makeApp({ type: 'always' }), { attachTo: document.body }));
+    await nextTick();
+    const root = (w.vm as any).rootRef;
+    expect(typeof root.scrollTop).toBe('function');
+    expect(typeof root.scrollTopLeft).toBe('function');
+    root.scrollTop();
+    root.scrollTopLeft();
+  });
+});
diff --git a/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-RTL--ArrowLeft-scrolls-the-horizontal-viewport-forward--visually-reversed--1.png b/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-RTL--ArrowLeft-scrolls-the-horizontal-viewport-forward--visually-reversed--1.png
new file mode 100644
index 0000000000000000000000000000000000000000..d529fcb59e2e2e3e297e147f569c130a67d21a85
GIT binary patch
literal 2968
zcmeHJ{ZCT|6n#S+B7?dK1I9-g#&y{o&^Z}}uFV`3iL{u_;igzHCKgoCf~-|qo?;A&
zV6!klQfMb`E=0FxbAWt4uxmk)7A#m8EzNvFfdZu;wDh&FZ_oW1OMkmLKb>>$x%b@b
z2U!`xTi@9V06=i&{`4;a;58-y_>FDx!x3?1dmR7-F*DOYKg4fdp2{4~S&tpCX#Z&C
zatklLUzy;~@NX}ej*oA>9Ji%9E~y}lad5o#TEUxLCGQr8l0pw{^A8J~xY}Lz&%VLH
zfar7IP;O{YIEcMisT*aOov7e#f{~)Wpjs_gVVJlAR@Mf_t@H=}$TE&OL7l7pw6^2S
zwAGLYE={zxr14k-6Q#2AG^PJx8M_aCx^B{9j<Sd%Ln<~z1n(d1Ty>=BD$tkuV!iFz
z&j<1Z7RBI|08;)^6OBu_wdeG6$I48`fQW`H^j@&3q;yP9px401dcNyJmhORGm$8{r
z>P1Yl$lWLJA8B8DbTz2lu{_<wGgod7@^UpIx_4tF5vr-H3W-5hIt{Zzr``-<6;wYO
z=CLVmghQxfW~AYxqYqAwDr=*Ng0;bs#zfHin6y2qKC8!Mb4=bltj1-m{M}AsHS<ls
zc6Jo&yG!Pt$g2qIW{OSMRjQ`Bmt~L_S=Z)?B#jBjkZF#z&owWmqjpWohIJ%STE5z4
z37x_P++~WDcaAHn!{D8uePKK}Dp_D3&u}}<;EU@d$;G8MZl_TSdYd?s$Z5zqTfRL>
zp+n2u*K94k*~ox9a(xd^r2ZZ?$sn4F>X<t5iZ6c~)w3ptO&`j7OEA<4*`FPNCqHu;
z3N?3Y)t20pl9$5|)hV%N+is4EY8~DIZz#g^1h_&X=&=ah4kjBk2<LBRF`R#O3x{sT
z)CHX2k{jj%LZTmjjgyB2mKTaNOxQaxWJ1Je`<pze^F?4!zLg7n^;{1^%+=QLgj~L7
z!(sq2)V`>ZRv?SWx`_nFh%Wt3gM{z#=AP6)?o)0eP|x9`A?Ld{U{T|)Z$Hj4!;$0$
z3mk$`<YH=sRy2zFXOVf3jhr0iUXk@9r_Lx0e7H88%|E{Ubm)<L<}8G|j8fvoh1*U8
z2-fJ7^>As8siSBnIme1Kcdy9_9JK`1^9;3DwCwVtUEZNnnDo<8DILs(1THK2a#T^`
zkv|LGnC0j`N#6WlcPYA`EFZ+m*A_KcpD1FdNS2Mytp(fD6-H!9sFZ!hJa((7(G>w_
z4}{`I4)K_8(Z7(YZf6_EekonhQ0$A*$oUXqY89=;2m5;BGlXv&e5b&79(~#H{|QEC
oBK}rmSQ}^Z2fTRw)nmO0NPkfHR(v(Xgd;#EgO&c<-u%jc0ohH75&!@I

literal 0
HcmV?d00001

diff --git a/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-does-not-call-preventDefault-when-scrollbar-is-non-interactive-1.png b/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-does-not-call-preventDefault-when-scrollbar-is-non-interactive-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..47767d2f3db3e57c7b5cb7d5e6f5d4e0ed04e8ff
GIT binary patch
literal 2082
zcmeAS@N?(olHy`uVBq!ia0y~yVDx2RV7kD;1QeOwv~@BA1N(JP7srr_Id3jA@-i53
z95DEFXMgI4ja%e?m6tbcF?X2z{K9j~FO__?^PK08GDpK<G!cwuhS8E>v_u@O4hD6#
qC=0CM|NmbQa_}pV!3L`0nHgejI2P=w?qmguFnGH9xvX<aXaWEq`;RvO

literal 0
HcmV?d00001

diff --git a/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-is-a-no-op-when-content-does-not-overflow-1.png b/vue/primitives/src/scroll-area/__test__/__screenshots__/ScrollArea.a11y.test.ts/scroll-area---scrollbar-keyboard-support-keydown-handler-is-a-no-op-when-content-does-not-overflow-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..47767d2f3db3e57c7b5cb7d5e6f5d4e0ed04e8ff
GIT binary patch
literal 2082
zcmeAS@N?(olHy`uVBq!ia0y~yVDx2RV7kD;1QeOwv~@BA1N(JP7srr_Id3jA@-i53
z95DEFXMgI4ja%e?m6tbcF?X2z{K9j~FO__?^PK08GDpK<G!cwuhS8E>v_u@O4hD6#
qC=0CM|NmbQa_}pV!3L`0nHgejI2P=w?qmguFnGH9xvX<aXaWEq`;RvO

literal 0
HcmV?d00001

diff --git a/vue/primitives/src/scroll-area/context.ts b/vue/primitives/src/scroll-area/context.ts
new file mode 100644
index 0000000..718c074
--- /dev/null
+++ b/vue/primitives/src/scroll-area/context.ts
@@ -0,0 +1,42 @@
+import type { Ref } from 'vue';
+import type { ScrollAreaType, ScrollDirection } from './types';
+import { useContextFactory } from '@robonen/vue';
+
+export interface ScrollAreaRootContext {
+  type: Ref<ScrollAreaType>;
+  dir: Ref<ScrollDirection>;
+  scrollHideDelay: Ref<number>;
+  scrollArea: Ref<HTMLElement | null>;
+  viewport: Ref<HTMLElement | null>;
+  content: Ref<HTMLElement | null>;
+  scrollbarX: Ref<HTMLElement | null>;
+  scrollbarY: Ref<HTMLElement | null>;
+  scrollbarXEnabled: Ref<boolean>;
+  scrollbarYEnabled: Ref<boolean>;
+  cornerWidth: Ref<number>;
+  cornerHeight: Ref<number>;
+  /** Unique id assigned to the Viewport so scrollbars can `aria-controls` it. */
+  viewportId: Ref<string>;
+  onScrollbarXEnabledChange: (enabled: boolean) => void;
+  onScrollbarYEnabledChange: (enabled: boolean) => void;
+  onCornerWidthChange: (n: number) => void;
+  onCornerHeightChange: (n: number) => void;
+}
+
+const RootCtx = useContextFactory<ScrollAreaRootContext>('ScrollAreaRootContext');
+export const provideScrollAreaRootContext = RootCtx.provide;
+export const useScrollAreaRootContext = RootCtx.inject;
+
+export interface ScrollAreaScrollbarContext {
+  orientation: 'horizontal' | 'vertical';
+  hasThumb: Ref<boolean>;
+  scrollbar: Ref<HTMLElement | null>;
+  onThumbChange: (el: HTMLElement | null) => void;
+  onThumbPointerUp: () => void;
+  onThumbPointerDown: (point: { x: number; y: number }) => void;
+  onThumbPositionChange: () => void;
+}
+
+const ScrollbarCtx = useContextFactory<ScrollAreaScrollbarContext>('ScrollAreaScrollbarContext');
+export const provideScrollAreaScrollbarContext = ScrollbarCtx.provide;
+export const useScrollAreaScrollbarContext = ScrollbarCtx.inject;
diff --git a/vue/primitives/src/scroll-area/index.ts b/vue/primitives/src/scroll-area/index.ts
new file mode 100644
index 0000000..bd7851a
--- /dev/null
+++ b/vue/primitives/src/scroll-area/index.ts
@@ -0,0 +1,14 @@
+export { default as ScrollAreaCorner, type ScrollAreaCornerProps } from './ScrollAreaCorner.vue';
+export { default as ScrollAreaRoot, type ScrollAreaRootProps } from './ScrollAreaRoot.vue';
+export { default as ScrollAreaScrollbar, type ScrollAreaScrollbarProps } from './ScrollAreaScrollbar.vue';
+export { default as ScrollAreaThumb, type ScrollAreaThumbProps } from './ScrollAreaThumb.vue';
+export { default as ScrollAreaViewport, type ScrollAreaViewportProps } from './ScrollAreaViewport.vue';
+export {
+  provideScrollAreaRootContext,
+  provideScrollAreaScrollbarContext,
+  type ScrollAreaRootContext,
+  type ScrollAreaScrollbarContext,
+  useScrollAreaRootContext,
+  useScrollAreaScrollbarContext,
+} from './context';
+export type { ScrollAreaSizes, ScrollAreaType, ScrollDirection } from './types';
diff --git a/vue/primitives/src/scroll-area/types.ts b/vue/primitives/src/scroll-area/types.ts
new file mode 100644
index 0000000..5cdf72d
--- /dev/null
+++ b/vue/primitives/src/scroll-area/types.ts
@@ -0,0 +1,13 @@
+export type ScrollDirection = 'ltr' | 'rtl';
+
+export type ScrollAreaType = 'auto' | 'always' | 'scroll' | 'hover';
+
+export interface ScrollAreaSizes {
+  content: number;
+  viewport: number;
+  scrollbar: {
+    size: number;
+    paddingStart: number;
+    paddingEnd: number;
+  };
+}
diff --git a/vue/primitives/src/scroll-area/utils.ts b/vue/primitives/src/scroll-area/utils.ts
new file mode 100644
index 0000000..bbfa7ef
--- /dev/null
+++ b/vue/primitives/src/scroll-area/utils.ts
@@ -0,0 +1,98 @@
+import type { ScrollAreaSizes, ScrollDirection } from './types';
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function toInt(value?: string | null): number {
+  return value ? Number.parseInt(value, 10) || 0 : 0;
+}
+
+export function getThumbRatio(viewport: number, content: number): number {
+  if (!content || viewport >= content)
+    return 1;
+  const r = viewport / content;
+  return Number.isFinite(r) ? r : 0;
+}
+
+export function getThumbSize(sizes: ScrollAreaSizes): number {
+  const ratio = getThumbRatio(sizes.viewport, sizes.content);
+  const trackPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const trackSize = sizes.scrollbar.size - trackPadding;
+  const thumb = trackSize * ratio;
+  return Math.max(thumb, 18);
+}
+
+function mapLinear(input: readonly [number, number], output: readonly [number, number]) {
+  return (value: number) => {
+    if (input[0] === input[1] || output[0] === output[1])
+      return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+
+export function getThumbOffsetFromScroll(
+  scrollPos: number,
+  sizes: ScrollAreaSizes,
+  dir: ScrollDirection = 'ltr',
+): number {
+  const thumbSize = getThumbSize(sizes);
+  const trackPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const trackSize = sizes.scrollbar.size - trackPadding;
+  const maxScroll = sizes.content - sizes.viewport;
+  const maxThumbPos = trackSize - thumbSize;
+  const range: [number, number] = dir === 'ltr' ? [0, maxScroll] : [-maxScroll, 0];
+  const clamped = clamp(scrollPos, range[0], range[1]);
+  return mapLinear([0, maxScroll], [0, maxThumbPos])(dir === 'ltr' ? clamped : clamped + maxScroll);
+}
+
+export function getScrollPositionFromPointer(
+  pointerPos: number,
+  pointerOffset: number,
+  sizes: ScrollAreaSizes,
+  dir: ScrollDirection = 'ltr',
+): number {
+  const thumbSize = getThumbSize(sizes);
+  const offset = pointerOffset || thumbSize / 2;
+  const remainder = thumbSize - offset;
+  const minPointer = sizes.scrollbar.paddingStart + offset;
+  const maxPointer = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - remainder;
+  const maxScroll = sizes.content - sizes.viewport;
+  const range: [number, number] = dir === 'ltr' ? [0, maxScroll] : [-maxScroll, 0];
+  return mapLinear([minPointer, maxPointer], range)(pointerPos);
+}
+
+export function isScrollingWithinScrollbarBounds(scrollPos: number, maxScrollPos: number): boolean {
+  return scrollPos > 0 && scrollPos < maxScrollPos;
+}
+
+export function addUnlinkedScrollListener(node: HTMLElement, handler: () => void): () => void {
+  let prev = { left: node.scrollLeft, top: node.scrollTop };
+  let raf = 0;
+  const loop = () => {
+    const pos = { left: node.scrollLeft, top: node.scrollTop };
+    if (prev.left !== pos.left || prev.top !== pos.top)
+      handler();
+    prev = pos;
+    raf = globalThis.requestAnimationFrame(loop);
+  };
+  raf = globalThis.requestAnimationFrame(loop);
+  return () => globalThis.cancelAnimationFrame(raf);
+}
+
+export function debounceCallback<T extends (...args: never[]) => void>(fn: T, ms: number) {
+  let id: ReturnType<typeof setTimeout> | null = null;
+  const debounced = ((...args: Parameters<T>) => {
+    if (id !== null)
+      globalThis.clearTimeout(id);
+    id = globalThis.setTimeout(() => fn(...args), ms);
+  }) as T & { cancel: () => void };
+  debounced.cancel = () => {
+    if (id !== null) {
+      globalThis.clearTimeout(id);
+      id = null;
+    }
+  };
+  return debounced;
+}
diff --git a/vue/primitives/src/select/SelectArrow.vue b/vue/primitives/src/select/SelectArrow.vue
new file mode 100644
index 0000000..185d059
--- /dev/null
+++ b/vue/primitives/src/select/SelectArrow.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export type SelectArrowProps = PopperArrowProps;
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { PopperArrow } from '../popper';
+
+const props = defineProps<SelectArrowProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <PopperArrow
+    :ref="forwardRef"
+    v-bind="props"
+  />
+</template>
diff --git a/vue/primitives/src/select/SelectContent.vue b/vue/primitives/src/select/SelectContent.vue
new file mode 100644
index 0000000..4fb47ae
--- /dev/null
+++ b/vue/primitives/src/select/SelectContent.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { SelectContentImplEmits, SelectContentImplProps } from './SelectContentImpl.vue';
+
+export type SelectContentProps = SelectContentImplProps;
+export type SelectContentEmits = SelectContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import { useSelectRootContext } from './context';
+import SelectContentImpl from './SelectContentImpl.vue';
+
+const props = defineProps<SelectContentProps>();
+const emit = defineEmits<SelectContentEmits>();
+const rootCtx = useSelectRootContext();
+</script>
+
+<template>
+  <Presence :present="rootCtx.open.value">
+    <SelectContentImpl
+      v-bind="props"
+      @close-auto-focus="emit('closeAutoFocus', $event)"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+    />
+  </Presence>
+</template>
diff --git a/vue/primitives/src/select/SelectContentImpl.vue b/vue/primitives/src/select/SelectContentImpl.vue
new file mode 100644
index 0000000..d6549a5
--- /dev/null
+++ b/vue/primitives/src/select/SelectContentImpl.vue
@@ -0,0 +1,151 @@
+<script lang="ts">
+import type { DismissableLayerEmits } from '../dismissable-layer';
+import type { FocusScopeEmits } from '../focus-scope';
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectContentImplProps extends PrimitiveProps {
+  /** Position mode. @default 'item-aligned' */
+  position?: 'item-aligned' | 'popper';
+  /** Block outside pointer events. @default true */
+  disableOutsidePointerEvents?: boolean;
+}
+
+export interface SelectContentImplEmits {
+  closeAutoFocus: FocusScopeEmits['unmountAutoFocus'];
+  escapeKeyDown: DismissableLayerEmits['escapeKeyDown'];
+  pointerDownOutside: DismissableLayerEmits['pointerDownOutside'];
+}
+</script>
+
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
+
+import { useBodyScrollLock, useForwardExpose } from '@robonen/vue';
+import { DismissableLayer } from '../dismissable-layer';
+import { FocusScope } from '../focus-scope';
+import { provideSelectContentContext, useSelectRootContext } from './context';
+import SelectItemAlignedPosition from './SelectItemAlignedPosition.vue';
+import SelectPopperPosition from './SelectPopperPosition.vue';
+
+const {
+  as = 'div',
+  position = 'item-aligned',
+  disableOutsidePointerEvents = true,
+} = defineProps<SelectContentImplProps>();
+
+const emit = defineEmits<SelectContentImplEmits>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useSelectRootContext();
+
+useBodyScrollLock();
+
+const isPositioned = ref(false);
+const searchRef = ref('');
+const viewportRef = shallowRef<HTMLElement | undefined>(undefined);
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+
+function handleTypeahead(key: string) {
+  searchRef.value += key;
+  if (searchTimer) clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => {
+    searchRef.value = '';
+  }, 1000);
+
+  const viewport = viewportRef.value;
+  if (!viewport) return;
+  const items = Array.from(viewport.querySelectorAll<HTMLElement>(
+    '[data-primitives-select-item]:not([data-disabled])',
+  ));
+  const match = items.find(item =>
+    item.textContent?.trim().toLowerCase().startsWith(searchRef.value.toLowerCase()),
+  );
+  match?.focus();
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  const viewport = viewportRef.value;
+  if (!viewport) return;
+
+  const items = Array.from(viewport.querySelectorAll<HTMLElement>(
+    '[data-primitives-select-item]:not([data-disabled])',
+  ));
+  const currentIdx = items.indexOf(document.activeElement as HTMLElement);
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    const next = items[currentIdx + 1] ?? items[0];
+    next?.focus();
+  }
+  else if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    const prev = items[currentIdx - 1] ?? items[items.length - 1];
+    prev?.focus();
+  }
+  else if (event.key === 'Home') {
+    event.preventDefault();
+    items[0]?.focus();
+  }
+  else if (event.key === 'End') {
+    event.preventDefault();
+    items[items.length - 1]?.focus();
+  }
+  else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+    handleTypeahead(event.key);
+  }
+}
+
+provideSelectContentContext({
+  viewportRef,
+  onViewportChange: (el) => { viewportRef.value = el; },
+  selectedItemRef: rootCtx.selectedItemRef,
+  selectedItemTextRef: rootCtx.selectedItemTextRef,
+  onItemLeave: () => { currentElement.value?.focus(); },
+  itemRefCallback: rootCtx.itemRefCallback,
+  itemTextRefCallback: rootCtx.itemTextRefCallback,
+  isPositioned,
+  searchRef,
+  position,
+});
+</script>
+
+<template>
+  <FocusScope
+    as="template"
+    :loop="true"
+    :trapped="true"
+    @unmount-auto-focus="emit('closeAutoFocus', $event)"
+  >
+    <DismissableLayer
+      as="template"
+      :disable-outside-pointer-events="disableOutsidePointerEvents"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+      @dismiss="rootCtx.onOpenChange(false)"
+    >
+      <SelectItemAlignedPosition
+        v-if="position === 'item-aligned'"
+        :ref="forwardRef"
+        :as="as"
+        :data-state="rootCtx.open.value ? 'open' : 'closed'"
+        :dir="rootCtx.dir.value"
+        @placed="isPositioned = true"
+        @keydown="handleKeyDown"
+      >
+        <slot />
+      </SelectItemAlignedPosition>
+
+      <SelectPopperPosition
+        v-else
+        :ref="forwardRef"
+        :as="as"
+        :data-state="rootCtx.open.value ? 'open' : 'closed'"
+        :dir="rootCtx.dir.value"
+        @placed="isPositioned = true"
+        @keydown="handleKeyDown"
+      >
+        <slot />
+      </SelectPopperPosition>
+    </DismissableLayer>
+  </FocusScope>
+</template>
diff --git a/vue/primitives/src/select/SelectGroup.vue b/vue/primitives/src/select/SelectGroup.vue
new file mode 100644
index 0000000..8fb59c7
--- /dev/null
+++ b/vue/primitives/src/select/SelectGroup.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectGroupProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideSelectGroupContext } from './context';
+
+const { as = 'div' } = defineProps<SelectGroupProps>();
+const { forwardRef } = useForwardExpose();
+
+const groupId = useId(undefined, 'select-group');
+
+provideSelectGroupContext({ id: groupId });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="group"
+    :aria-labelledby="groupId"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectIcon.vue b/vue/primitives/src/select/SelectIcon.vue
new file mode 100644
index 0000000..1f78029
--- /dev/null
+++ b/vue/primitives/src/select/SelectIcon.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectIconProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'span' } = defineProps<SelectIconProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    aria-hidden="true"
+  >
+    <slot>▼</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectItem.vue b/vue/primitives/src/select/SelectItem.vue
new file mode 100644
index 0000000..92d3d5d
--- /dev/null
+++ b/vue/primitives/src/select/SelectItem.vue
@@ -0,0 +1,95 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectItemProps extends PrimitiveProps {
+  /** The option value. */
+  value: string;
+  /** Disable this item. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, shallowRef } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Primitive } from '../primitive';
+import { provideSelectItemContext, useSelectContentContext, useSelectRootContext } from './context';
+
+const { as = 'div', value, disabled = false } = defineProps<SelectItemProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useSelectRootContext();
+const contentCtx = useSelectContentContext();
+
+const textId = useId(undefined, 'select-item-text');
+const isSelected = computed(() => rootCtx.value.value === value);
+const isDisabled = computed(() => rootCtx.disabled.value || disabled);
+
+const itemTextElement = shallowRef<HTMLElement | undefined>(undefined);
+
+function onItemTextChange(el: HTMLElement | undefined) {
+  itemTextElement.value = el;
+  contentCtx.itemTextRefCallback(el, value);
+  if (el) rootCtx.onOptionAdd(value, el.textContent?.trim() ?? '');
+}
+
+onMounted(() => {
+  contentCtx.itemRefCallback(currentElement.value, value, isDisabled.value);
+});
+
+onBeforeUnmount(() => {
+  rootCtx.onOptionRemove(value);
+  contentCtx.itemRefCallback(undefined, value, isDisabled.value);
+});
+
+function handleSelect() {
+  if (isDisabled.value) return;
+  rootCtx.onValueChange(value);
+}
+
+function handlePointerEnter() {
+  if (isDisabled.value) return;
+  currentElement.value?.focus();
+}
+
+function handlePointerLeave() {
+  contentCtx.onItemLeave();
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    handleSelect();
+  }
+}
+
+provideSelectItemContext({
+  value,
+  isSelected,
+  isDisabled,
+  textId,
+  onItemTextChange,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="option"
+    :aria-selected="isSelected"
+    :aria-disabled="isDisabled || undefined"
+    :data-state="isSelected ? 'checked' : 'unchecked'"
+    :data-disabled="isDisabled ? '' : undefined"
+    :tabindex="isDisabled ? undefined : -1"
+    data-primitives-select-item
+    @click="handleSelect"
+    @pointerenter="handlePointerEnter"
+    @pointerleave="handlePointerLeave"
+    @keydown="handleKeyDown"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectItemAlignedPosition.vue b/vue/primitives/src/select/SelectItemAlignedPosition.vue
new file mode 100644
index 0000000..a1b658e
--- /dev/null
+++ b/vue/primitives/src/select/SelectItemAlignedPosition.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectItemAlignedPositionProps extends PrimitiveProps {
+  dir?: string;
+}
+
+export interface SelectItemAlignedPositionEmits {
+  placed: [];
+}
+</script>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useSelectContentContext, useSelectRootContext } from './context';
+
+const { as = 'div' } = defineProps<SelectItemAlignedPositionProps>();
+const emit = defineEmits<SelectItemAlignedPositionEmits>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useSelectRootContext();
+const contentCtx = useSelectContentContext();
+
+onMounted(() => {
+  const trigger = rootCtx.triggerElement.value;
+  const content = currentElement.value;
+  if (!trigger || !content) {
+    emit('placed');
+    return;
+  }
+
+  const triggerRect = trigger.getBoundingClientRect();
+
+  Object.assign(content.style, {
+    position: 'fixed',
+    top: `${triggerRect.bottom}px`,
+    left: `${triggerRect.left}px`,
+    minWidth: `${triggerRect.width}px`,
+    zIndex: '50',
+  });
+
+  contentCtx.isPositioned.value = true;
+  emit('placed');
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    data-primitives-select-content
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectItemIndicator.vue b/vue/primitives/src/select/SelectItemIndicator.vue
new file mode 100644
index 0000000..8bf9804
--- /dev/null
+++ b/vue/primitives/src/select/SelectItemIndicator.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectItemIndicatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useSelectItemContext } from './context';
+
+const { as = 'span' } = defineProps<SelectItemIndicatorProps>();
+const { forwardRef } = useForwardExpose();
+const itemCtx = useSelectItemContext();
+</script>
+
+<template>
+  <Primitive
+    v-if="itemCtx.isSelected.value"
+    :ref="forwardRef"
+    :as="as"
+    aria-hidden="true"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectItemText.vue b/vue/primitives/src/select/SelectItemText.vue
new file mode 100644
index 0000000..1633bec
--- /dev/null
+++ b/vue/primitives/src/select/SelectItemText.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectItemTextProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useSelectItemContext } from './context';
+
+const { as = 'span' } = defineProps<SelectItemTextProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const itemCtx = useSelectItemContext();
+
+watchPostEffect(() => {
+  itemCtx.onItemTextChange(currentElement.value);
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="itemCtx.textId.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectLabel.vue b/vue/primitives/src/select/SelectLabel.vue
new file mode 100644
index 0000000..10b8b16
--- /dev/null
+++ b/vue/primitives/src/select/SelectLabel.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectLabelProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useSelectGroupContext } from './context';
+
+const { as = 'div' } = defineProps<SelectLabelProps>();
+const { forwardRef } = useForwardExpose();
+const groupCtx = useSelectGroupContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="groupCtx.id.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectPopperPosition.vue b/vue/primitives/src/select/SelectPopperPosition.vue
new file mode 100644
index 0000000..d7c0186
--- /dev/null
+++ b/vue/primitives/src/select/SelectPopperPosition.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PopperContentEmits, PopperContentProps } from '../popper';
+
+export type SelectPopperPositionProps = PopperContentProps;
+export type SelectPopperPositionEmits = PopperContentEmits;
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { PopperContent } from '../popper';
+
+const props = defineProps<SelectPopperPositionProps>();
+const emit = defineEmits<SelectPopperPositionEmits>();
+
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <PopperContent
+    :ref="forwardRef"
+    v-bind="props"
+    :side="props.side ?? 'bottom'"
+    :side-offset="props.sideOffset ?? 4"
+    :align="props.align ?? 'start'"
+    @placed="emit('placed')"
+  >
+    <slot />
+  </PopperContent>
+</template>
diff --git a/vue/primitives/src/select/SelectPortal.vue b/vue/primitives/src/select/SelectPortal.vue
new file mode 100644
index 0000000..5ae3945
--- /dev/null
+++ b/vue/primitives/src/select/SelectPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PortalProps } from '../teleport';
+
+export interface SelectPortalProps extends PortalProps {}
+</script>
+
+<script setup lang="ts">
+import { Portal } from '../teleport';
+
+const { to, defer, disabled } = defineProps<SelectPortalProps>();
+</script>
+
+<template>
+  <Portal :to="to" :defer="defer" :disabled="disabled">
+    <slot />
+  </Portal>
+</template>
diff --git a/vue/primitives/src/select/SelectRoot.vue b/vue/primitives/src/select/SelectRoot.vue
new file mode 100644
index 0000000..173000d
--- /dev/null
+++ b/vue/primitives/src/select/SelectRoot.vue
@@ -0,0 +1,159 @@
+<script lang="ts">
+import type { Direction } from '../config-provider';
+
+export interface SelectRootProps {
+  /** Reading direction. Falls back to ConfigProvider. */
+  dir?: Direction;
+  /** Disable the whole select. */
+  disabled?: boolean;
+  /** Mark field as required for native form validation. */
+  required?: boolean;
+  /** Native input name for form submission. */
+  name?: string;
+  /** Uncontrolled default value. */
+  defaultValue?: string;
+  /** Uncontrolled default open state. */
+  defaultOpen?: boolean;
+  /** Native autocomplete attribute forwarded to the hidden input. */
+  autocomplete?: string;
+}
+
+export interface SelectRootEmits {
+  'update:modelValue': [value: string | undefined];
+  'update:open': [open: boolean];
+}
+</script>
+
+<script setup lang="ts">
+import { ref, shallowRef, toRef, watch } from 'vue';
+
+import { useId } from '../config-provider';
+import { PopperRoot } from '../popper';
+import { provideSelectRootContext } from './context';
+import type { SelectValue } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  dir,
+  disabled = false,
+  required = false,
+  name,
+  defaultValue,
+  defaultOpen = false,
+  autocomplete,
+} = defineProps<SelectRootProps>();
+
+const emit = defineEmits<SelectRootEmits>();
+
+const localOpen = ref<boolean>(defaultOpen);
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: v => v ?? localOpen.value,
+  set: (v) => {
+    localOpen.value = v;
+    return v;
+  },
+});
+
+const localValue = ref<SelectValue | undefined>(defaultValue);
+const value = defineModel<SelectValue | undefined>('modelValue', {
+  default: undefined,
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+const contentId = useId(undefined, 'select-content');
+const dirRef = toRef(() => dir);
+const disabledRef = toRef(() => disabled);
+const requiredRef = toRef(() => required);
+const nameRef = toRef(() => name);
+
+const triggerElement = shallowRef<HTMLElement | undefined>(undefined);
+const selectedItemRef = shallowRef<HTMLElement | undefined>(undefined);
+const selectedItemTextRef = shallowRef<HTMLElement | undefined>(undefined);
+const displayValue = ref<string | undefined>(undefined);
+const optionsSet = shallowRef(new Map<SelectValue, string>());
+
+function onOptionAdd(v: SelectValue, textContent: string) {
+  optionsSet.value = new Map(optionsSet.value).set(v, textContent);
+}
+
+function onOptionRemove(v: SelectValue) {
+  const m = new Map(optionsSet.value);
+  m.delete(v);
+  optionsSet.value = m;
+}
+
+// Update displayValue whenever optionsSet or value changes.
+// When content is open, optionsSet contains the text; we persist the last
+// known text so SelectValue keeps showing after content closes.
+watch([optionsSet, value], () => {
+  if (value.value !== undefined) {
+    const text = optionsSet.value.get(value.value);
+    if (text !== undefined) displayValue.value = text;
+  }
+}, { immediate: true });
+
+function handleValueChange(newValue: SelectValue) {
+  value.value = newValue;
+  displayValue.value = optionsSet.value.get(newValue);
+  emit('update:modelValue', newValue);
+  open.value = false;
+}
+
+function itemRefCallback(el: HTMLElement | undefined, itemValue: SelectValue, isDisabled: boolean) {
+  if (itemValue === value.value && !isDisabled) {
+    selectedItemRef.value = el;
+  }
+}
+
+function itemTextRefCallback(el: HTMLElement | undefined, itemValue: SelectValue) {
+  if (itemValue === value.value) {
+    selectedItemTextRef.value = el;
+  }
+}
+
+provideSelectRootContext({
+  value,
+  onValueChange: handleValueChange,
+  open,
+  onOpenChange: (v) => { open.value = v; },
+  dir: dirRef,
+  disabled: disabledRef,
+  required: requiredRef,
+  name: nameRef,
+  triggerElement,
+  onTriggerChange: (el) => { triggerElement.value = el; },
+  contentId,
+  displayValue,
+  optionsSet,
+  onOptionAdd,
+  onOptionRemove,
+  itemRefCallback,
+  itemTextRefCallback,
+  selectedItemRef,
+  selectedItemTextRef,
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot />
+    <input
+      v-if="name"
+      type="hidden"
+      :name="name"
+      :value="value ?? ''"
+      :required="required"
+      :disabled="disabled"
+      :autocomplete="autocomplete"
+      aria-hidden="true"
+      style="display: none"
+      tabindex="-1"
+    />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/select/SelectScrollButtonImpl.vue b/vue/primitives/src/select/SelectScrollButtonImpl.vue
new file mode 100644
index 0000000..d13d6c3
--- /dev/null
+++ b/vue/primitives/src/select/SelectScrollButtonImpl.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectScrollButtonImplProps extends PrimitiveProps {
+  direction: 1 | -1;
+}
+</script>
+
+<script setup lang="ts">
+import { onBeforeUnmount } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useSelectContentContext } from './context';
+
+const { as = 'div', direction } = defineProps<SelectScrollButtonImplProps>();
+
+const { forwardRef } = useForwardExpose();
+const contentCtx = useSelectContentContext();
+
+let rafId: number | null = null;
+
+function startAutoScroll() {
+  const viewport = contentCtx.viewportRef.value;
+  if (!viewport) return;
+
+  function scroll() {
+    viewport!.scrollTop += direction * 8;
+    rafId = requestAnimationFrame(scroll);
+  }
+  rafId = requestAnimationFrame(scroll);
+}
+
+function stopAutoScroll() {
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
+  }
+}
+
+onBeforeUnmount(stopAutoScroll);
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    aria-hidden="true"
+    style="cursor: default; flex-shrink: 0; display: flex; align-items: center; justify-content: center"
+    @pointerenter="startAutoScroll"
+    @pointerleave="stopAutoScroll"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectScrollDownButton.vue b/vue/primitives/src/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..b2183c2
--- /dev/null
+++ b/vue/primitives/src/select/SelectScrollDownButton.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { SelectScrollButtonImplProps } from './SelectScrollButtonImpl.vue';
+
+export type SelectScrollDownButtonProps = Omit<SelectScrollButtonImplProps, 'direction'>;
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref, watchEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useSelectContentContext } from './context';
+import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue';
+
+const props = defineProps<SelectScrollDownButtonProps>();
+
+const { forwardRef } = useForwardExpose();
+const contentCtx = useSelectContentContext();
+
+const canScrollDown = ref(false);
+let cleanupFn: (() => void) | null = null;
+
+watchEffect(() => {
+  if (cleanupFn) {
+    cleanupFn();
+    cleanupFn = null;
+  }
+  const viewport = contentCtx.viewportRef.value;
+  if (!viewport) return;
+
+  const update = () => {
+    canScrollDown.value = viewport.scrollHeight - viewport.scrollTop > viewport.clientHeight + 1;
+  };
+  viewport.addEventListener('scroll', update, { passive: true });
+  update();
+  cleanupFn = () => viewport.removeEventListener('scroll', update);
+});
+
+onMounted(() => {
+  const viewport = contentCtx.viewportRef.value;
+  if (viewport) {
+    canScrollDown.value = viewport.scrollHeight - viewport.scrollTop > viewport.clientHeight + 1;
+  }
+});
+</script>
+
+<template>
+  <SelectScrollButtonImpl
+    v-if="canScrollDown"
+    v-bind="props"
+    :ref="forwardRef"
+    :direction="1"
+  >
+    <slot />
+  </SelectScrollButtonImpl>
+</template>
diff --git a/vue/primitives/src/select/SelectScrollUpButton.vue b/vue/primitives/src/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..cc07868
--- /dev/null
+++ b/vue/primitives/src/select/SelectScrollUpButton.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { SelectScrollButtonImplProps } from './SelectScrollButtonImpl.vue';
+
+export type SelectScrollUpButtonProps = Omit<SelectScrollButtonImplProps, 'direction'>;
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref, watchEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useSelectContentContext } from './context';
+import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue';
+
+const props = defineProps<SelectScrollUpButtonProps>();
+
+const { forwardRef } = useForwardExpose();
+const contentCtx = useSelectContentContext();
+
+const canScrollUp = ref(false);
+let cleanupFn: (() => void) | null = null;
+
+watchEffect(() => {
+  if (cleanupFn) {
+    cleanupFn();
+    cleanupFn = null;
+  }
+  const viewport = contentCtx.viewportRef.value;
+  if (!viewport) return;
+
+  const update = () => {
+    canScrollUp.value = viewport.scrollTop > 0;
+  };
+  viewport.addEventListener('scroll', update, { passive: true });
+  update();
+  cleanupFn = () => viewport.removeEventListener('scroll', update);
+});
+
+onMounted(() => {
+  const viewport = contentCtx.viewportRef.value;
+  if (viewport) canScrollUp.value = viewport.scrollTop > 0;
+});
+</script>
+
+<template>
+  <SelectScrollButtonImpl
+    v-if="canScrollUp"
+    v-bind="props"
+    :ref="forwardRef"
+    :direction="-1"
+  >
+    <slot />
+  </SelectScrollButtonImpl>
+</template>
diff --git a/vue/primitives/src/select/SelectSeparator.vue b/vue/primitives/src/select/SelectSeparator.vue
new file mode 100644
index 0000000..e238760
--- /dev/null
+++ b/vue/primitives/src/select/SelectSeparator.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectSeparatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<SelectSeparatorProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="separator"
+    aria-orientation="horizontal"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectTrigger.vue b/vue/primitives/src/select/SelectTrigger.vue
new file mode 100644
index 0000000..9f85168
--- /dev/null
+++ b/vue/primitives/src/select/SelectTrigger.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectTriggerProps extends PrimitiveProps {
+  /** Disable this trigger independently from the root. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watchEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { useSelectRootContext } from './context';
+import { getOpenState } from './utils';
+
+const { as = 'button', disabled = false } = defineProps<SelectTriggerProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const rootCtx = useSelectRootContext();
+
+const isDisabled = computed(() => rootCtx.disabled.value || disabled);
+
+watchEffect(() => rootCtx.onTriggerChange(currentElement.value));
+onBeforeUnmount(() => rootCtx.onTriggerChange(undefined));
+
+function handlePointerDown(event: PointerEvent) {
+  if (isDisabled.value) return;
+  if (event.button !== 0 || event.ctrlKey) return;
+  event.preventDefault();
+  rootCtx.onOpenChange(true);
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (isDisabled.value) return;
+  if (['Enter', ' ', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+    event.preventDefault();
+    rootCtx.onOpenChange(true);
+  }
+}
+</script>
+
+<template>
+  <PopperAnchor>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="combobox"
+      type="button"
+      :aria-controls="rootCtx.contentId.value"
+      :aria-expanded="rootCtx.open.value"
+      :aria-required="rootCtx.required.value || undefined"
+      :data-state="getOpenState(rootCtx.open.value)"
+      :disabled="isDisabled || undefined"
+      :data-disabled="isDisabled ? '' : undefined"
+      :data-placeholder="!rootCtx.value.value ? '' : undefined"
+      @pointerdown="handlePointerDown"
+      @keydown="handleKeyDown"
+    >
+      <slot />
+    </Primitive>
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/select/SelectValue.vue b/vue/primitives/src/select/SelectValue.vue
new file mode 100644
index 0000000..1b37bde
--- /dev/null
+++ b/vue/primitives/src/select/SelectValue.vue
@@ -0,0 +1,35 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectValueProps extends PrimitiveProps {
+  /** Text shown when no option is selected. */
+  placeholder?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useSelectRootContext } from './context';
+import { shouldShowPlaceholder } from './utils';
+
+const { as = 'span', placeholder } = defineProps<SelectValueProps>();
+
+const { forwardRef } = useForwardExpose();
+const rootCtx = useSelectRootContext();
+
+const showPlaceholder = computed(() => shouldShowPlaceholder(rootCtx.value.value));
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    style="pointer-events: none"
+  >
+    <template v-if="showPlaceholder">{{ placeholder }}</template>
+    <template v-else>{{ rootCtx.displayValue.value }}</template>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/SelectViewport.vue b/vue/primitives/src/select/SelectViewport.vue
new file mode 100644
index 0000000..d9b3e1a
--- /dev/null
+++ b/vue/primitives/src/select/SelectViewport.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SelectViewportProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useSelectContentContext } from './context';
+
+const { as = 'div' } = defineProps<SelectViewportProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const contentCtx = useSelectContentContext();
+
+watchPostEffect(() => contentCtx.onViewportChange(currentElement.value));
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="listbox"
+    data-primitives-select-viewport
+    style="overflow: auto; max-height: var(--primitives-select-content-available-height, 300px)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/select/context.ts b/vue/primitives/src/select/context.ts
new file mode 100644
index 0000000..d17721c
--- /dev/null
+++ b/vue/primitives/src/select/context.ts
@@ -0,0 +1,84 @@
+import type { Ref, ShallowRef } from 'vue';
+import type { Direction } from '../config-provider';
+
+import { useContextFactory } from '@robonen/vue';
+
+export type SelectValue = string;
+
+export interface SelectRootContext {
+  value: Ref<SelectValue | undefined>;
+  onValueChange: (value: SelectValue) => void;
+  open: Ref<boolean>;
+  onOpenChange: (open: boolean) => void;
+  dir: Ref<Direction | undefined>;
+  disabled: Ref<boolean>;
+  required: Ref<boolean>;
+  name: Ref<string | undefined>;
+  triggerElement: ShallowRef<HTMLElement | undefined>;
+  onTriggerChange: (el: HTMLElement | undefined) => void;
+  contentId: Ref<string>;
+  displayValue: Ref<string | undefined>;
+  optionsSet: ShallowRef<Map<SelectValue, string>>;
+  onOptionAdd: (value: SelectValue, textContent: string) => void;
+  onOptionRemove: (value: SelectValue) => void;
+  itemRefCallback: (el: HTMLElement | undefined, value: SelectValue, disabled: boolean) => void;
+  itemTextRefCallback: (el: HTMLElement | undefined, value: SelectValue) => void;
+  selectedItemRef: ShallowRef<HTMLElement | undefined>;
+  selectedItemTextRef: ShallowRef<HTMLElement | undefined>;
+}
+
+export interface SelectContentContext {
+  viewportRef: ShallowRef<HTMLElement | undefined>;
+  onViewportChange: (el: HTMLElement | undefined) => void;
+  selectedItemRef: ShallowRef<HTMLElement | undefined>;
+  selectedItemTextRef: ShallowRef<HTMLElement | undefined>;
+  onItemLeave: () => void;
+  itemRefCallback: SelectRootContext['itemRefCallback'];
+  itemTextRefCallback: SelectRootContext['itemTextRefCallback'];
+  isPositioned: Ref<boolean>;
+  searchRef: Ref<string>;
+  position: 'item-aligned' | 'popper';
+}
+
+export interface SelectGroupContext {
+  id: Ref<string>;
+}
+
+export interface SelectItemContext {
+  value: SelectValue;
+  isSelected: Ref<boolean>;
+  isDisabled: Ref<boolean>;
+  textId: Ref<string>;
+  onItemTextChange: (el: HTMLElement | undefined) => void;
+}
+
+const {
+  inject: useSelectRootContext,
+  provide: provideSelectRootContext,
+} = useContextFactory<SelectRootContext>('SelectRootContext');
+
+const {
+  inject: useSelectContentContext,
+  provide: provideSelectContentContext,
+} = useContextFactory<SelectContentContext>('SelectContentContext');
+
+const {
+  inject: useSelectGroupContext,
+  provide: provideSelectGroupContext,
+} = useContextFactory<SelectGroupContext>('SelectGroupContext');
+
+const {
+  inject: useSelectItemContext,
+  provide: provideSelectItemContext,
+} = useContextFactory<SelectItemContext>('SelectItemContext');
+
+export {
+  useSelectRootContext,
+  provideSelectRootContext,
+  useSelectContentContext,
+  provideSelectContentContext,
+  useSelectGroupContext,
+  provideSelectGroupContext,
+  useSelectItemContext,
+  provideSelectItemContext,
+};
diff --git a/vue/primitives/src/select/index.ts b/vue/primitives/src/select/index.ts
new file mode 100644
index 0000000..0ecc65b
--- /dev/null
+++ b/vue/primitives/src/select/index.ts
@@ -0,0 +1,47 @@
+export { default as SelectRoot } from './SelectRoot.vue';
+export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as SelectValue } from './SelectValue.vue';
+export { default as SelectIcon } from './SelectIcon.vue';
+export { default as SelectPortal } from './SelectPortal.vue';
+export { default as SelectContent } from './SelectContent.vue';
+export { default as SelectContentImpl } from './SelectContentImpl.vue';
+export { default as SelectItemAlignedPosition } from './SelectItemAlignedPosition.vue';
+export { default as SelectPopperPosition } from './SelectPopperPosition.vue';
+export { default as SelectViewport } from './SelectViewport.vue';
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';
+export { default as SelectGroup } from './SelectGroup.vue';
+export { default as SelectLabel } from './SelectLabel.vue';
+export { default as SelectItem } from './SelectItem.vue';
+export { default as SelectItemText } from './SelectItemText.vue';
+export { default as SelectItemIndicator } from './SelectItemIndicator.vue';
+export { default as SelectSeparator } from './SelectSeparator.vue';
+export { default as SelectArrow } from './SelectArrow.vue';
+
+export {
+  useSelectRootContext,
+  useSelectContentContext,
+  useSelectGroupContext,
+  useSelectItemContext,
+} from './context';
+
+export type { SelectValue, SelectRootContext, SelectContentContext, SelectGroupContext, SelectItemContext } from './context';
+export type { SelectRootProps, SelectRootEmits } from './SelectRoot.vue';
+export type { SelectTriggerProps } from './SelectTrigger.vue';
+export type { SelectValueProps } from './SelectValue.vue';
+export type { SelectIconProps } from './SelectIcon.vue';
+export type { SelectPortalProps } from './SelectPortal.vue';
+export type { SelectContentProps, SelectContentEmits } from './SelectContent.vue';
+export type { SelectContentImplProps, SelectContentImplEmits } from './SelectContentImpl.vue';
+export type { SelectItemAlignedPositionProps, SelectItemAlignedPositionEmits } from './SelectItemAlignedPosition.vue';
+export type { SelectPopperPositionProps, SelectPopperPositionEmits } from './SelectPopperPosition.vue';
+export type { SelectViewportProps } from './SelectViewport.vue';
+export type { SelectScrollUpButtonProps } from './SelectScrollUpButton.vue';
+export type { SelectScrollDownButtonProps } from './SelectScrollDownButton.vue';
+export type { SelectGroupProps } from './SelectGroup.vue';
+export type { SelectLabelProps } from './SelectLabel.vue';
+export type { SelectItemProps } from './SelectItem.vue';
+export type { SelectItemTextProps } from './SelectItemText.vue';
+export type { SelectItemIndicatorProps } from './SelectItemIndicator.vue';
+export type { SelectSeparatorProps } from './SelectSeparator.vue';
+export type { SelectArrowProps } from './SelectArrow.vue';
diff --git a/vue/primitives/src/select/utils.ts b/vue/primitives/src/select/utils.ts
new file mode 100644
index 0000000..15fb63d
--- /dev/null
+++ b/vue/primitives/src/select/utils.ts
@@ -0,0 +1,7 @@
+export function getOpenState(open: boolean): 'open' | 'closed' {
+  return open ? 'open' : 'closed';
+}
+
+export function shouldShowPlaceholder(value: string | undefined): boolean {
+  return value === undefined || value === '';
+}
diff --git a/vue/primitives/src/separator/Separator.vue b/vue/primitives/src/separator/Separator.vue
new file mode 100644
index 0000000..26dcd6d
--- /dev/null
+++ b/vue/primitives/src/separator/Separator.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SeparatorProps extends PrimitiveProps {
+  /** The orientation of the separator. */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * When `true` the separator is purely decorative and is hidden from
+   * assistive technology (no role, `aria-hidden`). Otherwise it exposes
+   * `role="separator"` and the correct `aria-orientation`.
+   * @default false
+   */
+  decorative?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+
+const { orientation = 'horizontal', decorative = false, as = 'div' } = defineProps<SeparatorProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const ariaProps = computed(() => decorative
+  ? { role: 'none' as const }
+  : {
+      role: 'separator' as const,
+      'aria-orientation': orientation === 'vertical' ? 'vertical' as const : undefined,
+    });
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :as="as" :data-orientation="orientation" v-bind="ariaProps">
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/separator/__test__/Separator.test.ts b/vue/primitives/src/separator/__test__/Separator.test.ts
new file mode 100644
index 0000000..30b91d0
--- /dev/null
+++ b/vue/primitives/src/separator/__test__/Separator.test.ts
@@ -0,0 +1,29 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { Separator } from '../index';
+
+describe('Separator', () => {
+  it('renders with role="separator" by default', () => {
+    const wrapper = mount(Separator);
+    expect(wrapper.attributes('role')).toBe('separator');
+    expect(wrapper.attributes('data-orientation')).toBe('horizontal');
+    expect(wrapper.attributes('aria-orientation')).toBeUndefined();
+  });
+
+  it('sets aria-orientation="vertical" for vertical', () => {
+    const wrapper = mount(Separator, { props: { orientation: 'vertical' } });
+    expect(wrapper.attributes('aria-orientation')).toBe('vertical');
+    expect(wrapper.attributes('data-orientation')).toBe('vertical');
+  });
+
+  it('is decorative when requested', () => {
+    const wrapper = mount(Separator, { props: { decorative: true } });
+    expect(wrapper.attributes('role')).toBe('none');
+    expect(wrapper.attributes('aria-orientation')).toBeUndefined();
+  });
+
+  it('supports custom element via `as`', () => {
+    const wrapper = mount(Separator, { props: { as: 'hr' } });
+    expect(wrapper.element.tagName).toBe('HR');
+  });
+});
diff --git a/vue/primitives/src/separator/index.ts b/vue/primitives/src/separator/index.ts
new file mode 100644
index 0000000..64e1822
--- /dev/null
+++ b/vue/primitives/src/separator/index.ts
@@ -0,0 +1,2 @@
+export { default as Separator } from './Separator.vue';
+export type { SeparatorProps } from './Separator.vue';
diff --git a/vue/primitives/src/slider/SliderRange.vue b/vue/primitives/src/slider/SliderRange.vue
new file mode 100644
index 0000000..3b144eb
--- /dev/null
+++ b/vue/primitives/src/slider/SliderRange.vue
@@ -0,0 +1,75 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface SliderRangeProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useSliderContext } from './context';
+
+const { as = 'span' } = defineProps<SliderRangeProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useSliderContext();
+
+// Single-pass min/max over values normalized to percent; no spread, no `.map`.
+const percentages = computed<[number, number]>(() => {
+  const values = ctx.values.value;
+  const min = ctx.min.value;
+  const range = ctx.max.value - min;
+  if (range === 0 || values.length === 0) return [0, 0];
+  const first = ((values[0]! - min) / range) * 100;
+  if (values.length === 1) return [0, first];
+  let lo = first;
+  let hi = first;
+  for (let i = 1; i < values.length; i++) {
+    const p = ((values[i]! - min) / range) * 100;
+    if (p < lo) lo = p;
+    else if (p > hi) hi = p;
+  }
+  return [lo, hi];
+});
+
+// Stable shape: always the same keys in the same order. Unused sides explicitly
+// `undefined` so V8 (and Vue's style patcher) sees a monomorphic object.
+const style = computed<{
+  left: string | undefined;
+  right: string | undefined;
+  top: string | undefined;
+  bottom: string | undefined;
+}>(() => {
+  const [start, end] = percentages.value;
+  const startPct = `${start}%`;
+  const endPct = `${100 - end}%`;
+  const horizontal = ctx.orientation.value === 'horizontal';
+  if (horizontal) {
+    const flip = (ctx.direction.value === 'rtl') !== ctx.inverted.value;
+    return {
+      left: flip ? endPct : startPct,
+      right: flip ? startPct : endPct,
+      top: undefined,
+      bottom: undefined,
+    };
+  }
+  const flip = ctx.inverted.value;
+  return {
+    left: undefined,
+    right: undefined,
+    top: flip ? startPct : endPct,
+    bottom: flip ? endPct : startPct,
+  };
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :style="style"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-orientation="ctx.orientation.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/slider/SliderRoot.vue b/vue/primitives/src/slider/SliderRoot.vue
new file mode 100644
index 0000000..be7f0ed
--- /dev/null
+++ b/vue/primitives/src/slider/SliderRoot.vue
@@ -0,0 +1,263 @@
+<script lang="ts">
+import type { SliderDirection, SliderOrientation } from './context';
+import type { PrimitiveProps } from '../primitive';
+
+export interface SliderRootProps extends PrimitiveProps {
+  /** Current value(s) for controlled mode. */
+  modelValue?: number[];
+  /** Min value. @default 0 */
+  min?: number;
+  /** Max value. @default 100 */
+  max?: number;
+  /** Step granularity. @default 1 */
+  step?: number;
+  /** Minimum step count between adjacent thumbs in range mode. @default 0 */
+  minStepsBetweenThumbs?: number;
+  /** Orientation. @default 'horizontal' */
+  orientation?: SliderOrientation;
+  /** Writing direction. @default 'ltr' */
+  dir?: SliderDirection;
+  /** Invert the direction of interaction. @default false */
+  inverted?: boolean;
+  /** Disable all interaction. */
+  disabled?: boolean;
+  /** Uncontrolled initial value(s). Accepts single number or array. */
+  defaultValue?: number | number[];
+  /** Hidden input `name` attribute. */
+  name?: string;
+  /** Mark hidden inputs as required. */
+  required?: boolean;
+}
+
+export interface SliderRootEmits {
+  valueCommit: [value: number[]];
+}
+</script>
+
+<script setup lang="ts">
+import {
+  getClosestValueIndex,
+  getStepDecimals,
+  hasMinStepsBetweenSortedValues,
+  roundToStep,
+  scaleLinear,
+} from './utils';
+import { computed, nextTick, shallowRef, toRef, watch } from 'vue';
+import { Primitive } from '../primitive';
+import { provideSliderContext } from './context';
+import { useForwardExpose } from '@robonen/vue';
+import { clamp } from '@robonen/stdlib';
+
+const {
+  min = 0,
+  max = 100,
+  step = 1,
+  minStepsBetweenThumbs = 0,
+  orientation = 'horizontal',
+  dir = 'ltr',
+  inverted = false,
+  disabled = false,
+  modelValue,
+  defaultValue,
+  name,
+  required,
+  as = 'span',
+} = defineProps<SliderRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<SliderRootEmits & { 'update:modelValue': [value: number[]] }>();
+
+function toArray(v: number | number[] | undefined): number[] {
+  if (Array.isArray(v)) return v.slice();
+  if (typeof v === 'number') return [v];
+  return [];
+}
+
+const d = toArray(defaultValue);
+// `shallowRef` — the array is always replaced wholesale; no need to proxy items.
+const localValues = shallowRef<number[]>(d.length > 0 ? d : [min]);
+
+// Cache decimals per `step` — `String(step).split('.')` out of the pointermove path.
+let stepDecimals = getStepDecimals(step);
+watch(() => step, (s) => {
+  stepDecimals = getStepDecimals(s);
+});
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  // Ref-level check is enough; the setter below guards on deep equality again.
+  if (v === localValues.value) return;
+  localValues.value = v.slice();
+}, { immediate: true });
+
+const values = computed<number[]>({
+  get: () => localValues.value,
+  set: (v) => {
+    localValues.value = v;
+    emit('update:modelValue', v);
+  },
+});
+
+const trackRef = shallowRef<HTMLElement | null>(null);
+const thumbEls: HTMLElement[] = [];
+
+function registerThumb(el: HTMLElement): number {
+  const existing = thumbEls.indexOf(el);
+  if (existing !== -1) return existing;
+  thumbEls.push(el);
+  return thumbEls.length - 1;
+}
+function unregisterThumb(el: HTMLElement): void {
+  const i = thumbEls.indexOf(el);
+  if (i !== -1) thumbEls.splice(i, 1);
+}
+function getThumbIndex(el: HTMLElement): number {
+  return thumbEls.indexOf(el);
+}
+
+function setValue(next: number[]): void {
+  const prev = localValues.value;
+  if (prev.length === next.length) {
+    let equal = true;
+    for (let i = 0; i < next.length; i++) {
+      if (prev[i] !== next[i]) {
+        equal = false;
+        break;
+      }
+    }
+    if (equal) return;
+  }
+  values.value = next;
+}
+
+function commit(): void {
+  emit('valueCommit', localValues.value.slice());
+}
+
+function updateValue(index: number, raw: number): void {
+  if (disabled) return;
+  const prev = localValues.value;
+  // Snap to step & clamp to bounds.
+  let v = clamp(roundToStep(raw, step, min, stepDecimals), min, max);
+  // Clamp to neighbours (prev/next) to preserve sort order & minStepsBetweenThumbs.
+  const minGap = minStepsBetweenThumbs * step;
+  const prevVal = prev[index - 1];
+  const nextVal = prev[index + 1];
+  if (prevVal !== undefined) v = Math.max(v, prevVal + minGap);
+  if (nextVal !== undefined) v = Math.min(v, nextVal - minGap);
+  v = clamp(v, min, max);
+  if (v === prev[index]) return;
+  // Single allocation: copy + assign. Sort order is preserved by neighbour-clamp.
+  const candidate = prev.slice();
+  candidate[index] = v;
+  if (!hasMinStepsBetweenSortedValues(candidate, minStepsBetweenThumbs, step)) return;
+  setValue(candidate);
+}
+
+function getValueFromPointer(event: PointerEvent): number {
+  const track = trackRef.value;
+  if (!track) return min;
+  const rect = track.getBoundingClientRect();
+  const horizontal = orientation === 'horizontal';
+  const size = horizontal ? rect.width : rect.height;
+  if (size === 0) return min;
+  let offset = horizontal ? event.clientX - rect.left : event.clientY - rect.top;
+  // ltr horizontal: left = min. rtl or inverted flip.
+  // For vertical we invert by default (top = max visually); `inverted` flips back.
+  const flip = (horizontal ? dir === 'rtl' : true) !== inverted;
+  if (flip) offset = size - offset;
+  return scaleLinear(offset, 0, size, min, max);
+}
+
+let activeIndex = -1;
+
+function handlePointerMove(event: PointerEvent): void {
+  if (activeIndex === -1) return;
+  updateValue(activeIndex, getValueFromPointer(event));
+}
+
+function handlePointerUp(): void {
+  if (activeIndex === -1) return;
+  activeIndex = -1;
+  globalThis.removeEventListener('pointermove', handlePointerMove);
+  globalThis.removeEventListener('pointerup', handlePointerUp);
+  commit();
+}
+
+function startDragFromTrack(event: PointerEvent): void {
+  if (disabled) return;
+  const raw = getValueFromPointer(event);
+  const index = getClosestValueIndex(localValues.value, raw);
+  activeIndex = index;
+  updateValue(index, raw);
+  // Focus the thumb we just grabbed.
+  nextTick(() => thumbEls[index]?.focus());
+  globalThis.addEventListener('pointermove', handlePointerMove);
+  globalThis.addEventListener('pointerup', handlePointerUp);
+}
+
+// Keep values clamped if bounds change.
+watch([() => min, () => max], ([nmin, nmax]) => {
+  const cur = localValues.value;
+  // Packed array: push into `[]` rather than `new Array(n)` (holey SMI → can't
+  // transition back). Small array, V8 keeps it PACKED_DOUBLE/SMI_ELEMENTS.
+  const clamped: number[] = [];
+  let changed = false;
+  for (let i = 0; i < cur.length; i++) {
+    const c = clamp(cur[i]!, nmin, nmax);
+    clamped.push(c);
+    if (c !== cur[i]) changed = true;
+  }
+  if (changed) setValue(clamped);
+});
+
+function contextUpdateValue(i: number, v: number): void {
+  updateValue(i, v);
+  commit();
+}
+
+provideSliderContext({
+  values,
+  // `toRef(() => prop)` → `GetterRefImpl`: reactive `Ref` without a
+  // `ReactiveEffect`/cache, since these are identity passthroughs.
+  min: toRef(() => min),
+  max: toRef(() => max),
+  step: toRef(() => step),
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  disabled: toRef(() => disabled),
+  inverted: toRef(() => inverted),
+  trackRef,
+  registerThumb,
+  unregisterThumb,
+  getThumbIndex,
+  updateValue: contextUpdateValue,
+  startDragFromTrack,
+});
+
+defineExpose({ values });
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :aria-disabled="disabled || undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :data-orientation="orientation"
+    :dir="dir"
+  >
+    <slot :values="values" />
+    <template v-if="name">
+      <input
+        v-for="(v, i) in values"
+        :key="i"
+        type="hidden"
+        :name="values.length > 1 ? `${name}[]` : name"
+        :value="v"
+        :required="required"
+      >
+    </template>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/slider/SliderThumb.vue b/vue/primitives/src/slider/SliderThumb.vue
new file mode 100644
index 0000000..2ba59c5
--- /dev/null
+++ b/vue/primitives/src/slider/SliderThumb.vue
@@ -0,0 +1,137 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SliderThumbProps extends PrimitiveProps {
+  /** Accessible label for this thumb. */
+  'aria-label'?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useSliderContext } from './context';
+
+const { as = 'span' } = defineProps<SliderThumbProps>();
+const ctx = useSliderContext();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const index = ref(-1);
+
+watch(currentElement, (node) => {
+  if (node) index.value = ctx.registerThumb(node);
+  else index.value = -1;
+});
+
+onBeforeUnmount(() => {
+  if (currentElement.value) ctx.unregisterThumb(currentElement.value);
+});
+
+const value = computed(() => ctx.values.value[index.value] ?? ctx.min.value);
+
+const percentage = computed(() => {
+  const min = ctx.min.value;
+  const range = ctx.max.value - min;
+  if (range === 0) return 0;
+  return ((value.value - min) / range) * 100;
+});
+
+// Stable shape: always return the same keys in the same order so V8 keeps
+// one hidden class for this object and the style patcher sees a monomorphic
+// input. Unused sides are explicit `undefined`.
+const positionStyle = computed<{
+  left: string | undefined;
+  right: string | undefined;
+  top: string | undefined;
+  bottom: string | undefined;
+}>(() => {
+  const pct = `${percentage.value}%`;
+  const horizontal = ctx.orientation.value === 'horizontal';
+  const rtl = ctx.direction.value === 'rtl';
+  const inverted = ctx.inverted.value;
+  if (horizontal) {
+    const flip = rtl !== inverted;
+    return {
+      left: flip ? undefined : pct,
+      right: flip ? pct : undefined,
+      top: undefined,
+      bottom: undefined,
+    };
+  }
+  return {
+    left: undefined,
+    right: undefined,
+    top: inverted ? pct : undefined,
+    bottom: inverted ? undefined : pct,
+  };
+});
+
+function largeStep(): number {
+  const step = ctx.step.value;
+  return Math.max(step * 10, step);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (ctx.disabled.value || index.value === -1) return;
+  const horizontal = ctx.orientation.value === 'horizontal';
+  const rtl = ctx.direction.value === 'rtl';
+  const step = ctx.step.value;
+  const big = largeStep();
+  const current = ctx.values.value[index.value] ?? ctx.min.value;
+  let delta: number;
+  switch (event.key) {
+    case 'ArrowRight':
+      delta = horizontal ? (rtl ? -step : step) : 0;
+      break;
+    case 'ArrowLeft':
+      delta = horizontal ? (rtl ? step : -step) : 0;
+      break;
+    case 'ArrowUp':
+      delta = horizontal ? 0 : step;
+      break;
+    case 'ArrowDown':
+      delta = horizontal ? 0 : -step;
+      break;
+    case 'PageUp':
+      delta = big;
+      break;
+    case 'PageDown':
+      delta = -big;
+      break;
+    case 'Home':
+      event.preventDefault();
+      ctx.updateValue(index.value, ctx.min.value);
+      return;
+    case 'End':
+      event.preventDefault();
+      ctx.updateValue(index.value, ctx.max.value);
+      return;
+    default:
+      return;
+  }
+  if (delta === 0) return;
+  event.preventDefault();
+  ctx.updateValue(index.value, current + delta);
+}
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :ref="forwardRef"
+    role="slider"
+    :tabindex="ctx.disabled.value ? -1 : 0"
+    :aria-valuemin="ctx.min.value"
+    :aria-valuemax="ctx.max.value"
+    :aria-valuenow="value"
+    :aria-orientation="ctx.orientation.value"
+    :aria-disabled="ctx.disabled.value || undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-orientation="ctx.orientation.value"
+    :style="positionStyle"
+    @keydown="onKeyDown"
+  >
+    <slot :value="value" :percent="percentage" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/slider/SliderTrack.vue b/vue/primitives/src/slider/SliderTrack.vue
new file mode 100644
index 0000000..894c1fe
--- /dev/null
+++ b/vue/primitives/src/slider/SliderTrack.vue
@@ -0,0 +1,41 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface SliderTrackProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { onBeforeUnmount, watch } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useSliderContext } from './context';
+
+const { as = 'span' } = defineProps<SliderTrackProps>();
+const ctx = useSliderContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+watch(currentElement, (node) => {
+  ctx.trackRef.value = node ?? null;
+});
+onBeforeUnmount(() => {
+  ctx.trackRef.value = null;
+});
+
+function onPointerDown(event: PointerEvent): void {
+  if (ctx.disabled.value) return;
+  event.preventDefault();
+  (event.target as HTMLElement).setPointerCapture?.(event.pointerId);
+  ctx.startDragFromTrack(event);
+}
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :ref="forwardRef"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    :data-orientation="ctx.orientation.value"
+    @pointerdown="onPointerDown"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/slider/__test__/Slider.test.ts b/vue/primitives/src/slider/__test__/Slider.test.ts
new file mode 100644
index 0000000..1df9130
--- /dev/null
+++ b/vue/primitives/src/slider/__test__/Slider.test.ts
@@ -0,0 +1,227 @@
+import { mount } from '@vue/test-utils';
+import type { VueWrapper } from '@vue/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from '../index';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountSingle(opts: Partial<{ min: number; max: number; step: number; defaultValue: number; disabled: boolean; orientation: 'horizontal' | 'vertical'; dir: 'ltr' | 'rtl' }> = {}) {
+  const model = ref<number[] | undefined>(undefined);
+  const Harness = defineComponent({
+    setup() {
+      return () => h(SliderRoot, {
+        modelValue: model.value,
+        'onUpdate:modelValue': (v: number[]) => { model.value = v; },
+        ...opts,
+      }, {
+        default: () => [
+          h(SliderTrack, null, { default: () => h(SliderRange) }),
+          h(SliderThumb, { 'aria-label': 'Volume' }),
+        ],
+      });
+    },
+  });
+  const w = track(mount(Harness, { attachTo: document.body }));
+  return { wrapper: w, model };
+}
+
+function mountRange(opts: Partial<{ min: number; max: number; step: number; defaultValue: number[]; minStepsBetweenThumbs: number }> = {}) {
+  const model = ref<number[] | undefined>(undefined);
+  const Harness = defineComponent({
+    setup() {
+      return () => h(SliderRoot, {
+        modelValue: model.value,
+        'onUpdate:modelValue': (v: number[]) => { model.value = v; },
+        ...opts,
+      }, {
+        default: () => [
+          h(SliderTrack, null, { default: () => h(SliderRange) }),
+          h(SliderThumb, { id: 'thumb-0' }),
+          h(SliderThumb, { id: 'thumb-1' }),
+        ],
+      });
+    },
+  });
+  const w = track(mount(Harness, { attachTo: document.body }));
+  return { wrapper: w, model };
+}
+
+function keydown(el: Element, key: string): void {
+  const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+  el.dispatchEvent(event);
+}
+
+describe('Slider — single thumb', () => {
+  it('renders with role="slider" and ARIA attrs', async () => {
+    mountSingle({ defaultValue: 40, min: 0, max: 100 });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    expect(thumb).toBeTruthy();
+    expect(thumb.getAttribute('aria-valuemin')).toBe('0');
+    expect(thumb.getAttribute('aria-valuemax')).toBe('100');
+    expect(thumb.getAttribute('aria-valuenow')).toBe('40');
+    expect(thumb.getAttribute('aria-orientation')).toBe('horizontal');
+    expect(thumb.tabIndex).toBe(0);
+  });
+
+  it('ArrowRight/ArrowLeft adjust by step', async () => {
+    const { model } = mountSingle({ defaultValue: 50, step: 5 });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    keydown(thumb, 'ArrowRight');
+    await nextTick();
+    expect(model.value).toEqual([55]);
+    keydown(thumb, 'ArrowLeft');
+    keydown(thumb, 'ArrowLeft');
+    await nextTick();
+    expect(model.value).toEqual([45]);
+  });
+
+  it('ArrowLeft is reversed in RTL', async () => {
+    const { model } = mountSingle({ defaultValue: 50, step: 5, dir: 'rtl' });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    keydown(thumb, 'ArrowLeft');
+    await nextTick();
+    expect(model.value).toEqual([55]);
+  });
+
+  it('Home/End clamp to min/max', async () => {
+    const { model } = mountSingle({ defaultValue: 50, min: 0, max: 100 });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    keydown(thumb, 'Home');
+    await nextTick();
+    expect(model.value).toEqual([0]);
+    keydown(thumb, 'End');
+    await nextTick();
+    expect(model.value).toEqual([100]);
+  });
+
+  it('PageUp / PageDown step by 10×', async () => {
+    const { model } = mountSingle({ defaultValue: 50, step: 1 });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    keydown(thumb, 'PageUp');
+    await nextTick();
+    expect(model.value).toEqual([60]);
+    keydown(thumb, 'PageDown');
+    keydown(thumb, 'PageDown');
+    await nextTick();
+    expect(model.value).toEqual([40]);
+  });
+
+  it('clamps at min / max', async () => {
+    const { model } = mountSingle({ defaultValue: 95, min: 0, max: 100, step: 10 });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    keydown(thumb, 'ArrowRight');
+    await nextTick();
+    expect(model.value).toEqual([100]);
+    keydown(thumb, 'End');
+    await nextTick();
+    expect(model.value).toEqual([100]);
+    keydown(thumb, 'Home');
+    await nextTick();
+    expect(model.value).toEqual([0]);
+    keydown(thumb, 'ArrowLeft');
+    await nextTick();
+    expect(model.value).toEqual([0]);
+  });
+
+  it('disabled: tabindex=-1 and keys do nothing', async () => {
+    const { model } = mountSingle({ defaultValue: 50, disabled: true });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    expect(thumb.tabIndex).toBe(-1);
+    expect(thumb.getAttribute('aria-disabled')).toBe('true');
+    keydown(thumb, 'ArrowRight');
+    await nextTick();
+    expect(model.value).toBeUndefined();
+  });
+
+  it('vertical orientation reports aria-orientation', async () => {
+    mountSingle({ defaultValue: 50, orientation: 'vertical' });
+    await nextTick();
+    const thumb = document.querySelector<HTMLElement>('[role="slider"]')!;
+    expect(thumb.getAttribute('aria-orientation')).toBe('vertical');
+  });
+
+  it('writes hidden input when name is set', async () => {
+    const Harness = defineComponent({
+      setup: () => () => h(SliderRoot, { defaultValue: 30, name: 'volume' }, {
+        default: () => [
+          h(SliderTrack, null, { default: () => h(SliderRange) }),
+          h(SliderThumb),
+        ],
+      }),
+    });
+    track(mount(Harness, { attachTo: document.body }));
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>('input[type="hidden"][name="volume"]')!;
+    expect(input).toBeTruthy();
+    expect(input.value).toBe('30');
+  });
+});
+
+describe('Slider — range (two thumbs)', () => {
+  it('renders two thumbs with independent aria-valuenow', async () => {
+    mountRange({ defaultValue: [20, 80] });
+    await nextTick();
+    const thumbs = document.querySelectorAll<HTMLElement>('[role="slider"]');
+    expect(thumbs).toHaveLength(2);
+    expect(thumbs[0]!.getAttribute('aria-valuenow')).toBe('20');
+    expect(thumbs[1]!.getAttribute('aria-valuenow')).toBe('80');
+  });
+
+  it('preserves order by clamping against neighbour', async () => {
+    const { model } = mountRange({ defaultValue: [40, 50], step: 1 });
+    await nextTick();
+    const thumbs = document.querySelectorAll<HTMLElement>('[role="slider"]');
+    // Push first thumb right past second
+    for (let i = 0; i < 20; i++) keydown(thumbs[0]!, 'ArrowRight');
+    await nextTick();
+    expect(model.value![0]).toBeLessThanOrEqual(model.value![1]!);
+    expect(model.value![0]).toBe(50);
+  });
+
+  it('respects minStepsBetweenThumbs', async () => {
+    const { model } = mountRange({ defaultValue: [30, 50], step: 1, minStepsBetweenThumbs: 10 });
+    await nextTick();
+    const thumbs = document.querySelectorAll<HTMLElement>('[role="slider"]');
+    // Try to move first thumb up; should stop 10 below second.
+    for (let i = 0; i < 30; i++) keydown(thumbs[0]!, 'ArrowRight');
+    await nextTick();
+    expect(model.value![0]).toBe(40);
+    expect(model.value![1]).toBe(50);
+  });
+
+  it('writes hidden inputs with [] suffix for range', async () => {
+    const Harness = defineComponent({
+      setup: () => () => h(SliderRoot, { defaultValue: [10, 90], name: 'range' }, {
+        default: () => [
+          h(SliderTrack, null, { default: () => h(SliderRange) }),
+          h(SliderThumb),
+          h(SliderThumb),
+        ],
+      }),
+    });
+    track(mount(Harness, { attachTo: document.body }));
+    await nextTick();
+    const inputs = document.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="range[]"]');
+    expect(inputs).toHaveLength(2);
+    expect(inputs[0]!.value).toBe('10');
+    expect(inputs[1]!.value).toBe('90');
+  });
+});
diff --git a/vue/primitives/src/slider/context.ts b/vue/primitives/src/slider/context.ts
new file mode 100644
index 0000000..d11be03
--- /dev/null
+++ b/vue/primitives/src/slider/context.ts
@@ -0,0 +1,36 @@
+import type { Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type SliderOrientation = 'horizontal' | 'vertical';
+export type SliderDirection = 'ltr' | 'rtl';
+
+/**
+ * Context shared between `SliderRoot` and its descendants.
+ *
+ * Scalar props are exposed as plain `Ref<T>` values, but `SliderRoot` builds
+ * them with `toRef(() => prop)` — a `GetterRefImpl` that is reactive without
+ * allocating a `ReactiveEffect` / cache (unlike `computed`). For identity
+ * passthrough of scalar props this avoids seven redundant effects per
+ * instance while keeping template auto-unwrap and `.value` ergonomics.
+ */
+export interface SliderContext {
+  values: Ref<number[]>;
+  min: Ref<number>;
+  max: Ref<number>;
+  step: Ref<number>;
+  orientation: Ref<SliderOrientation>;
+  direction: Ref<SliderDirection>;
+  disabled: Ref<boolean>;
+  inverted: Ref<boolean>;
+  trackRef: Ref<HTMLElement | null>;
+  registerThumb: (el: HTMLElement) => number;
+  unregisterThumb: (el: HTMLElement) => void;
+  getThumbIndex: (el: HTMLElement) => number;
+  updateValue: (index: number, next: number) => void;
+  startDragFromTrack: (event: PointerEvent) => void;
+}
+
+const ctx = useContextFactory<SliderContext>('SliderContext');
+
+export const provideSliderContext = ctx.provide;
+export const useSliderContext = ctx.inject;
diff --git a/vue/primitives/src/slider/index.ts b/vue/primitives/src/slider/index.ts
new file mode 100644
index 0000000..ecc31b2
--- /dev/null
+++ b/vue/primitives/src/slider/index.ts
@@ -0,0 +1,9 @@
+export { default as SliderRange } from './SliderRange.vue';
+export { default as SliderRoot } from './SliderRoot.vue';
+export { default as SliderThumb } from './SliderThumb.vue';
+export { default as SliderTrack } from './SliderTrack.vue';
+export type { SliderDirection, SliderOrientation } from './context';
+export type { SliderRangeProps } from './SliderRange.vue';
+export type { SliderRootEmits, SliderRootProps } from './SliderRoot.vue';
+export type { SliderThumbProps } from './SliderThumb.vue';
+export type { SliderTrackProps } from './SliderTrack.vue';
diff --git a/vue/primitives/src/slider/utils.ts b/vue/primitives/src/slider/utils.ts
new file mode 100644
index 0000000..e6e8c39
--- /dev/null
+++ b/vue/primitives/src/slider/utils.ts
@@ -0,0 +1,70 @@
+/**
+ * Returns the number of decimal digits in a numeric `step`.
+ *
+ * Used by {@link roundToStep} to compensate floating-point drift without
+ * allocating strings on every invocation (the cost is paid once per `step`
+ * change and cached by the caller).
+ */
+export function getStepDecimals(step: number): number {
+  if (!Number.isFinite(step)) return 0;
+  const str = String(step);
+  const dot = str.indexOf('.');
+  if (dot === -1) return 0;
+  return str.length - dot - 1;
+}
+
+/**
+ * Snap `value` to the nearest multiple of `step` anchored at `min`.
+ *
+ * `decimals` must be pre-computed by the caller via {@link getStepDecimals}
+ * and cached per-`step` — this function is on the pointermove hot path.
+ */
+export function roundToStep(value: number, step: number, min: number, decimals: number): number {
+  const nearest = Math.round((value - min) / step) * step + min;
+  return decimals > 0 ? Number(nearest.toFixed(decimals)) : nearest;
+}
+
+/**
+ * Linear projection of `value` from the input domain onto the output range.
+ *
+ * Plain (non-curried) form — no per-call closure allocation.
+ */
+export function scaleLinear(value: number, d0: number, d1: number, r0: number, r1: number): number {
+  if (d0 === d1 || r0 === r1) return r0;
+  return r0 + ((r1 - r0) / (d1 - d0)) * (value - d0);
+}
+
+/**
+ * Verify that adjacent values in an already-sorted `values` array differ by
+ * at least `minStepsBetween * step`.
+ *
+ * The caller is expected to maintain the invariant that `values` is sorted
+ * ascending (the slider Root guarantees this by construction).
+ */
+export function hasMinStepsBetweenSortedValues(values: number[], minStepsBetween: number, step: number): boolean {
+  if (minStepsBetween <= 0 || values.length < 2) return true;
+  const minGap = minStepsBetween * step;
+  for (let i = 1; i < values.length; i++) {
+    if (values[i]! - values[i - 1]! < minGap) return false;
+  }
+  return true;
+}
+
+/**
+ * Index of the value in `values` closest to `nextValue`.
+ *
+ * Single-pass — no intermediate distance array.
+ */
+export function getClosestValueIndex(values: number[], nextValue: number): number {
+  if (values.length <= 1) return 0;
+  let bestIdx = 0;
+  let bestDist = Math.abs(values[0]! - nextValue);
+  for (let i = 1; i < values.length; i++) {
+    const d = Math.abs(values[i]! - nextValue);
+    if (d < bestDist) {
+      bestDist = d;
+      bestIdx = i;
+    }
+  }
+  return bestIdx;
+}
diff --git a/vue/primitives/src/stepper/StepperDescription.vue b/vue/primitives/src/stepper/StepperDescription.vue
new file mode 100644
index 0000000..ff68887
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperDescription.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperDescriptionProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useStepperItemContext } from './context';
+
+const { as = 'p' } = defineProps<StepperDescriptionProps>();
+
+const item = useStepperItemContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="item.descriptionId"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/stepper/StepperIndicator.vue b/vue/primitives/src/stepper/StepperIndicator.vue
new file mode 100644
index 0000000..f47b722
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperIndicator.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperIndicatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useStepperItemContext } from './context';
+
+const { as = 'div' } = defineProps<StepperIndicatorProps>();
+
+const item = useStepperItemContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :data-state="item.state.value"
+  >
+    <slot :step="item.step.value" :state="item.state.value">
+      {{ item.step.value }}
+    </slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/stepper/StepperItem.vue b/vue/primitives/src/stepper/StepperItem.vue
new file mode 100644
index 0000000..4351a74
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperItem.vue
@@ -0,0 +1,63 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperItemProps extends PrimitiveProps {
+  /** 1-based index associating this item with a step. */
+  step: number;
+  /** Disable this specific step. */
+  disabled?: boolean;
+  /** Mark the step as completed regardless of current `modelValue`. */
+  completed?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue';
+import { provideStepperItemContext, useStepperRootContext } from './context';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+
+const { as = 'div', step, disabled = false, completed = false } = defineProps<StepperItemProps>();
+
+const root = useStepperRootContext();
+const { forwardRef } = useForwardExpose();
+
+const state = computed(() => {
+  if (completed) return 'completed' as const;
+  if (root.value.value === step) return 'active' as const;
+  if (root.value.value > step) return 'completed' as const;
+  return 'inactive' as const;
+});
+
+const focusable = computed(() => {
+  if (disabled || root.disabled.value) return false;
+  if (!root.linear.value) return true;
+  return step <= root.value.value + 1;
+});
+
+const titleId = useId(undefined, 'stepper-item-title').value;
+const descriptionId = useId(undefined, 'stepper-item-description').value;
+
+provideStepperItemContext({
+  step: toRef(() => step),
+  state,
+  disabled: toRef(() => disabled || root.disabled.value),
+  focusable,
+  titleId,
+  descriptionId,
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :aria-current="state === 'active' ? 'step' : undefined"
+    :data-state="state"
+    :data-orientation="root.orientation.value"
+    :data-disabled="disabled || root.disabled.value || !focusable ? '' : undefined"
+  >
+    <slot :state="state" :step="step" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/stepper/StepperRoot.vue b/vue/primitives/src/stepper/StepperRoot.vue
new file mode 100644
index 0000000..497839a
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperRoot.vue
@@ -0,0 +1,140 @@
+<script lang="ts">
+import type { StepperDirection, StepperOrientation } from './context';
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperRootProps extends PrimitiveProps {
+  /** Controlled active step (1-based). Use `v-model`. */
+  modelValue?: number;
+  /** Uncontrolled initial step. @default 1 */
+  defaultValue?: number;
+  /** Orientation. @default 'horizontal' */
+  orientation?: StepperOrientation;
+  /** Writing direction. Falls back to `ConfigProvider` when omitted. */
+  dir?: StepperDirection;
+  /** Require steps to be completed in order. @default true */
+  linear?: boolean;
+  /** Disable the entire stepper. */
+  disabled?: boolean;
+}
+
+export interface StepperRootEmits {
+  'update:modelValue': [value: number];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { Primitive } from '../primitive';
+import { provideStepperRootContext } from './context';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  as = 'div',
+  modelValue,
+  defaultValue = 1,
+  orientation = 'horizontal',
+  linear = true,
+  disabled = false,
+  dir,
+} = defineProps<StepperRootProps>();
+
+const emit = defineEmits<StepperRootEmits>();
+
+const { forwardRef } = useForwardExpose();
+const config = useConfig();
+
+const direction = computed(() => dir ?? config.dir.value);
+
+const localValue = ref<number>(modelValue ?? defaultValue);
+
+watch(() => modelValue, (v) => {
+  if (v === undefined || v === localValue.value) return;
+  localValue.value = v;
+});
+
+const { getItems, CollectionSlot } = useCollectionProvider();
+const total = computed(() => getItems(true).length);
+
+function commit(next: number): void {
+  if (next === localValue.value) return;
+  localValue.value = next;
+  emit('update:modelValue', next);
+}
+
+function goToStep(step: number): void {
+  if (disabled || step < 1) return;
+  const items = getItems(true);
+  const count = items.length;
+  if (count > 0 && step > count) return;
+  // respect linear gate — at most one step ahead of current.
+  if (linear && step > localValue.value + 1) return;
+  // skip if target item is marked disabled in DOM.
+  const target = items[step - 1]?.ref;
+  if (target?.hasAttribute('data-disabled')) return;
+  commit(step);
+}
+
+function onTriggerKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  const action = rovingKeyToAction(event, {
+    orientation,
+    dir: direction.value,
+    loop: false,
+  });
+  if (!action) return;
+  event.preventDefault();
+  // Collect enabled triggers with a single pass (PACKED array via push — no filter closure).
+  const items = getItems(true);
+  const enabled: HTMLElement[] = [];
+  for (let i = 0; i < items.length; i++) {
+    const ref = items[i]!.ref;
+    if (!ref.hasAttribute('data-disabled')) enabled.push(ref);
+  }
+  if (enabled.length === 0) return;
+  if (action.absolute === 'home') {
+    enabled[0]!.focus();
+    return;
+  }
+  if (action.absolute === 'end') {
+    enabled[enabled.length - 1]!.focus();
+    return;
+  }
+  const current = enabled.indexOf(el);
+  const nextIdx = resolveNextIndex(current === -1 ? 0 : current, action.delta, enabled.length, false);
+  enabled[nextIdx]!.focus();
+}
+
+provideStepperRootContext({
+  value: localValue,
+  total,
+  orientation: toRef(() => orientation),
+  direction,
+  linear: toRef(() => linear),
+  disabled: toRef(() => disabled),
+  goToStep,
+  onTriggerKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="group"
+      aria-label="progress"
+      :data-orientation="orientation"
+      :data-linear="linear ? '' : undefined"
+      :data-disabled="disabled ? '' : undefined"
+      :dir="direction"
+    >
+      <slot
+        :value="localValue"
+        :total="total"
+        :go-to-step="goToStep"
+      />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/stepper/StepperSeparator.vue b/vue/primitives/src/stepper/StepperSeparator.vue
new file mode 100644
index 0000000..089848e
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperSeparator.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperSeparatorProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useStepperItemContext, useStepperRootContext } from './context';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div' } = defineProps<StepperSeparatorProps>();
+
+const root = useStepperRootContext();
+const item = useStepperItemContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="separator"
+    aria-hidden="true"
+    :data-orientation="root.orientation.value"
+    :data-state="item.state.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/stepper/StepperTitle.vue b/vue/primitives/src/stepper/StepperTitle.vue
new file mode 100644
index 0000000..850a5e8
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperTitle.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperTitleProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useStepperItemContext } from './context';
+
+const { as = 'h4' } = defineProps<StepperTitleProps>();
+
+const item = useStepperItemContext();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="item.titleId"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/stepper/StepperTrigger.vue b/vue/primitives/src/stepper/StepperTrigger.vue
new file mode 100644
index 0000000..b672fdf
--- /dev/null
+++ b/vue/primitives/src/stepper/StepperTrigger.vue
@@ -0,0 +1,59 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface StepperTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useStepperItemContext, useStepperRootContext } from './context';
+import { Primitive } from '../primitive';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<StepperTriggerProps>();
+
+const root = useStepperRootContext();
+const item = useStepperItemContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+function onMouseDown(event: MouseEvent): void {
+  if (!item.focusable.value || event.ctrlKey) {
+    event.preventDefault();
+    return;
+  }
+  root.goToStep(item.step.value);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (item.disabled.value) return;
+  if ((event.key === 'Enter' || event.key === ' ') && !event.ctrlKey && !event.shiftKey) {
+    event.preventDefault();
+    root.goToStep(item.step.value);
+    return;
+  }
+  if (!currentElement.value) return;
+  root.onTriggerKeyDown(event, currentElement.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :type="as === 'button' ? 'button' : undefined"
+      :tabindex="item.focusable.value ? 0 : -1"
+      :disabled="item.disabled.value || !item.focusable.value || undefined"
+      :data-state="item.state.value"
+      :data-orientation="root.orientation.value"
+      :data-disabled="item.disabled.value || !item.focusable.value ? '' : undefined"
+      :aria-labelledby="item.titleId"
+      :aria-describedby="item.descriptionId"
+      @mousedown.left="onMouseDown"
+      @keydown="onKeyDown"
+    >
+      <slot :state="item.state.value" :step="item.step.value" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/stepper/__test__/Stepper.test.ts b/vue/primitives/src/stepper/__test__/Stepper.test.ts
new file mode 100644
index 0000000..bf8a73f
--- /dev/null
+++ b/vue/primitives/src/stepper/__test__/Stepper.test.ts
@@ -0,0 +1,176 @@
+import {
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperRoot,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from '../index';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createStepper(rootProps: Record<string, unknown> = {}, stepCount = 3, itemProps: Record<number, Record<string, unknown>> = {}) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () => h(
+          StepperRoot,
+          rootProps,
+          {
+            default: () => Array.from({ length: stepCount }, (_, i) => {
+              const step = i + 1;
+              return h(
+                StepperItem,
+                { key: step, step, ...itemProps[step] },
+                {
+                  default: () => [
+                    h(StepperTrigger, null, { default: () => [
+                      h(StepperIndicator),
+                      h(StepperTitle, null, { default: () => `Step ${step}` }),
+                      h(StepperDescription, null, { default: () => `Description ${step}` }),
+                    ] }),
+                    i < stepCount - 1 ? h(StepperSeparator) : null,
+                  ],
+                },
+              );
+            }),
+          },
+        );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('Stepper', () => {
+  it('renders with role=group', () => {
+    const w = createStepper();
+    const root = w.find('[role="group"]');
+    expect(root.exists()).toBe(true);
+    expect(root.attributes('aria-label')).toBe('progress');
+    w.unmount();
+  });
+
+  it('first item is active by default (step=1)', () => {
+    const w = createStepper();
+    const items = w.findAllComponents(StepperItem);
+    expect(items[0]!.attributes('data-state')).toBe('active');
+    expect(items[0]!.attributes('aria-current')).toBe('step');
+    expect(items[1]!.attributes('data-state')).toBe('inactive');
+    w.unmount();
+  });
+
+  it('honors defaultValue', () => {
+    const w = createStepper({ defaultValue: 2 });
+    const items = w.findAllComponents(StepperItem);
+    expect(items[0]!.attributes('data-state')).toBe('completed');
+    expect(items[1]!.attributes('data-state')).toBe('active');
+    expect(items[2]!.attributes('data-state')).toBe('inactive');
+    w.unmount();
+  });
+
+  it('v-model moves the active step', async () => {
+    const value = ref(1);
+    const w = mount(
+      defineComponent({
+        setup() {
+          return () => h(
+            StepperRoot,
+            { modelValue: value.value, 'onUpdate:modelValue': (v: number) => (value.value = v) },
+            {
+              default: () => [1, 2, 3].map(step =>
+                h(StepperItem, { key: step, step }, { default: () => h(StepperTrigger, null, { default: () => `S${step}` }) }),
+              ),
+            },
+          );
+        },
+      }),
+      { attachTo: document.body },
+    );
+    const triggers = w.findAll('button');
+    await triggers[1]!.trigger('mousedown');
+    await nextTick();
+    expect(value.value).toBe(2);
+    w.unmount();
+  });
+
+  it('linear mode blocks skipping ahead', async () => {
+    const w = createStepper();
+    const triggers = w.findAll('button');
+    await triggers[2]!.trigger('mousedown'); // try to skip to 3
+    await nextTick();
+    const items = w.findAllComponents(StepperItem);
+    expect(items[0]!.attributes('data-state')).toBe('active'); // unchanged
+    w.unmount();
+  });
+
+  it('non-linear mode allows arbitrary step', async () => {
+    const w = createStepper({ linear: false });
+    const triggers = w.findAll('button');
+    await triggers[2]!.trigger('mousedown');
+    await nextTick();
+    const items = w.findAllComponents(StepperItem);
+    expect(items[2]!.attributes('data-state')).toBe('active');
+    w.unmount();
+  });
+
+  it('disabled item is not focusable and cannot be activated', async () => {
+    const w = createStepper({ linear: false }, 3, { 2: { disabled: true } });
+    const items = w.findAllComponents(StepperItem);
+    expect(items[1]!.attributes('data-disabled')).toBe('');
+    const triggers = w.findAll('button');
+    expect(triggers[1]!.attributes('tabindex')).toBe('-1');
+    await triggers[1]!.trigger('mousedown');
+    await nextTick();
+    expect(items[0]!.attributes('data-state')).toBe('active'); // unchanged
+    w.unmount();
+  });
+
+  it('Enter/Space on trigger activates step', async () => {
+    const w = createStepper({ linear: false });
+    const triggers = w.findAll('button');
+    (triggers[1]!.element as HTMLElement).focus();
+    press(triggers[1]!.element, 'Enter');
+    await nextTick();
+    const items = w.findAllComponents(StepperItem);
+    expect(items[1]!.attributes('data-state')).toBe('active');
+    w.unmount();
+  });
+
+  it('ArrowRight / ArrowLeft move focus between triggers', () => {
+    const w = createStepper({ linear: false });
+    const triggers = w.findAll('button').map(t => t.element as HTMLElement);
+    triggers[0]!.focus();
+    press(triggers[0]!, 'ArrowRight');
+    expect(document.activeElement).toBe(triggers[1]);
+    press(triggers[1]!, 'ArrowRight');
+    expect(document.activeElement).toBe(triggers[2]);
+    press(triggers[2]!, 'ArrowLeft');
+    expect(document.activeElement).toBe(triggers[1]);
+    w.unmount();
+  });
+
+  it('Home / End jump to first / last trigger', () => {
+    const w = createStepper({ linear: false });
+    const triggers = w.findAll('button').map(t => t.element as HTMLElement);
+    triggers[1]!.focus();
+    press(triggers[1]!, 'End');
+    expect(document.activeElement).toBe(triggers[2]);
+    press(triggers[2]!, 'Home');
+    expect(document.activeElement).toBe(triggers[0]);
+    w.unmount();
+  });
+
+  it('completed prop forces completed state', () => {
+    const w = createStepper({}, 3, { 1: { completed: true } });
+    const items = w.findAllComponents(StepperItem);
+    expect(items[0]!.attributes('data-state')).toBe('completed');
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/stepper/context.ts b/vue/primitives/src/stepper/context.ts
new file mode 100644
index 0000000..44f04b8
--- /dev/null
+++ b/vue/primitives/src/stepper/context.ts
@@ -0,0 +1,43 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperDirection = 'ltr' | 'rtl';
+export type StepperState = 'completed' | 'active' | 'inactive';
+
+export interface StepperRootContext {
+  /** Currently active step (1-based). */
+  value: Ref<number>;
+  /** Total registered items, tracked through the Collection. */
+  total: ComputedRef<number>;
+  /** Orientation of the stepper — drives arrow-key axis. */
+  orientation: Ref<StepperOrientation>;
+  /** Writing direction. */
+  direction: Ref<StepperDirection>;
+  /** When `true`, steps must be completed in order. */
+  linear: Ref<boolean>;
+  /** Whether the whole stepper is disabled. */
+  disabled: Ref<boolean>;
+
+  goToStep: (step: number) => void;
+  onTriggerKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+export interface StepperItemContext {
+  step: Ref<number>;
+  state: Ref<StepperState>;
+  disabled: Ref<boolean>;
+  focusable: Ref<boolean>;
+  titleId: string;
+  descriptionId: string;
+}
+
+export const {
+  inject: useStepperRootContext,
+  provide: provideStepperRootContext,
+} = useContextFactory<StepperRootContext>('stepper');
+
+export const {
+  inject: useStepperItemContext,
+  provide: provideStepperItemContext,
+} = useContextFactory<StepperItemContext>('stepper-item');
diff --git a/vue/primitives/src/stepper/index.ts b/vue/primitives/src/stepper/index.ts
new file mode 100644
index 0000000..97c6ce6
--- /dev/null
+++ b/vue/primitives/src/stepper/index.ts
@@ -0,0 +1,27 @@
+export { default as StepperRoot } from './StepperRoot.vue';
+export { default as StepperItem } from './StepperItem.vue';
+export { default as StepperTrigger } from './StepperTrigger.vue';
+export { default as StepperIndicator } from './StepperIndicator.vue';
+export { default as StepperTitle } from './StepperTitle.vue';
+export { default as StepperDescription } from './StepperDescription.vue';
+export { default as StepperSeparator } from './StepperSeparator.vue';
+
+export {
+  provideStepperRootContext,
+  provideStepperItemContext,
+  useStepperRootContext,
+  useStepperItemContext,
+  type StepperRootContext,
+  type StepperItemContext,
+  type StepperState,
+  type StepperOrientation,
+  type StepperDirection,
+} from './context';
+
+export type { StepperRootProps, StepperRootEmits } from './StepperRoot.vue';
+export type { StepperItemProps } from './StepperItem.vue';
+export type { StepperTriggerProps } from './StepperTrigger.vue';
+export type { StepperIndicatorProps } from './StepperIndicator.vue';
+export type { StepperTitleProps } from './StepperTitle.vue';
+export type { StepperDescriptionProps } from './StepperDescription.vue';
+export type { StepperSeparatorProps } from './StepperSeparator.vue';
diff --git a/vue/primitives/src/switch/Switch.vue b/vue/primitives/src/switch/Switch.vue
new file mode 100644
index 0000000..dc1f24a
--- /dev/null
+++ b/vue/primitives/src/switch/Switch.vue
@@ -0,0 +1,114 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface SwitchProps<T = boolean> extends PrimitiveProps {
+
+  /** Value representing the "on" state. Defaults to `true`. */
+  truthy?: T;
+  /** Value representing the "off" state. Defaults to `false`. */
+  falsy?: T;
+  /** Initial uncontrolled value. Defaults to `falsy`. */
+  defaultValue?: T;
+  disabled?: boolean;
+  required?: boolean;
+  /** Name for the hidden form input. If provided, a hidden input mirrors state. */
+  name?: string;
+}
+</script>
+
+<script setup lang="ts" generic="T = boolean">
+import type { Ref } from 'vue';
+import { Primitive } from '../primitive';
+import { computed, ref, toRaw } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  truthy = true as unknown as T,
+  falsy = false as unknown as T,
+  defaultValue,
+  disabled = false,
+  required = false,
+  name,
+  as = 'button',
+} = defineProps<SwitchProps<T>>();
+
+const { forwardRef } = useForwardExpose();
+
+const local = ref<T>((defaultValue ?? falsy) as T) as Ref<T>;
+
+const value = defineModel<T>({
+  get: v => (v ?? local.value) as T,
+  set: (v) => {
+    local.value = v as T;
+    return v;
+  },
+});
+
+const checked = computed<boolean>(() => Object.is(toRaw(value.value), toRaw(truthy)));
+
+function toggle() {
+  if (disabled) return;
+  value.value = checked.value ? falsy : truthy;
+}
+
+function onClick() {
+  toggle();
+}
+
+function onKeydown(event: KeyboardEvent) {
+  // <button> handles Space/Enter natively; only synthesize for non-button hosts.
+  if (as === 'button') return;
+  if (event.key !== ' ' && event.key !== 'Enter') return;
+  event.preventDefault();
+  toggle();
+}
+
+function serialize(v: T): string {
+  if (v === null || v === undefined) return '';
+  if (typeof v === 'string') return v;
+  if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+  try {
+    return JSON.stringify(v);
+  }
+  catch {
+    return String(v);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    role="switch"
+    :tabindex="as === 'button' ? undefined : (disabled ? -1 : 0)"
+    :aria-checked="checked"
+    :aria-required="required ? true : undefined"
+    :aria-disabled="as === 'button' ? undefined : (disabled ? true : undefined)"
+    :data-state="checked ? 'checked' : 'unchecked'"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="as === 'button' ? disabled : undefined"
+    @click="onClick"
+    @keydown="onKeydown"
+  >
+    <slot :checked="checked" :value="value" />
+    <input
+      v-if="name"
+      type="checkbox"
+      tabindex="-1"
+      aria-hidden="true"
+      :name="name"
+      :value="serialize(checked ? truthy : falsy)"
+      :checked="checked"
+      :disabled="disabled"
+      :required="required"
+      :style="{
+        position: 'absolute',
+        pointerEvents: 'none',
+        opacity: 0,
+        margin: 0,
+      }"
+    >
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/switch/__test__/Switch.test.ts b/vue/primitives/src/switch/__test__/Switch.test.ts
new file mode 100644
index 0000000..a9d8e05
--- /dev/null
+++ b/vue/primitives/src/switch/__test__/Switch.test.ts
@@ -0,0 +1,188 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, ref } from 'vue';
+import { Switch } from '../index';
+
+describe('switch (generic)', () => {
+  describe('boolean (default)', () => {
+    it('has role="switch" and toggles on click', async () => {
+      const wrapper = mount(Switch);
+      expect(wrapper.attributes('role')).toBe('switch');
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+      await wrapper.trigger('click');
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+      expect(wrapper.attributes('data-state')).toBe('checked');
+    });
+
+    it('respects defaultValue', () => {
+      const wrapper = mount(Switch, { props: { defaultValue: true } });
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+    });
+
+    it('renders a hidden input when name is provided', () => {
+      const wrapper = mount(Switch, { props: { name: 'agree', defaultValue: true } });
+      const input = wrapper.find('input[type="checkbox"]');
+      expect(input.exists()).toBe(true);
+      expect(input.attributes('name')).toBe('agree');
+      expect(input.attributes('value')).toBe('true');
+      expect((input.element as HTMLInputElement).checked).toBe(true);
+    });
+
+    it('does not render input without name', () => {
+      const wrapper = mount(Switch);
+      expect(wrapper.find('input').exists()).toBe(false);
+    });
+
+    it('skips toggle when disabled', async () => {
+      const wrapper = mount(Switch, { props: { disabled: true } });
+      await wrapper.trigger('click');
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+    });
+
+    it('sets aria-required when required', () => {
+      const wrapper = mount(Switch, { props: { required: true } });
+      expect(wrapper.attributes('aria-required')).toBe('true');
+    });
+  });
+
+  describe('string pair ("on" / "off")', () => {
+    it('derives checked via Object.is with truthy', async () => {
+      const wrapper = mount(Switch, { props: { truthy: 'on', falsy: 'off' } });
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+      await wrapper.trigger('click');
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+    });
+
+    it('hidden input serializes to current truthy/falsy', async () => {
+      const wrapper = mount(Switch, {
+        props: { truthy: 'on', falsy: 'off', name: 'mode', defaultValue: 'on' },
+      });
+      const input = wrapper.find('input[type="checkbox"]');
+      expect(input.attributes('value')).toBe('on');
+      await wrapper.trigger('click');
+      expect(wrapper.find('input[type="checkbox"]').attributes('value')).toBe('off');
+    });
+
+    it('v-model emits truthy/falsy, not booleans', async () => {
+      const parent = defineComponent({
+        components: { Switch },
+        setup() {
+          const val = ref<'on' | 'off'>('off');
+          return { val };
+        },
+        render() {
+          return h(Switch, {
+            truthy: 'on',
+            falsy: 'off',
+            modelValue: this.val,
+            'onUpdate:modelValue': (v: unknown) => { this.val = v as 'on' | 'off'; },
+          });
+        },
+      });
+      const wrapper = mount(parent);
+      await wrapper.find('[role="switch"]').trigger('click');
+      expect(wrapper.vm.val).toBe('on');
+      await wrapper.find('[role="switch"]').trigger('click');
+      expect(wrapper.vm.val).toBe('off');
+    });
+  });
+
+  describe('object pair (generic)', () => {
+    it('toggles between two distinct object identities', async () => {
+      const ON = { kind: 'on' as const };
+      const OFF = { kind: 'off' as const };
+      const parent = defineComponent({
+        components: { Switch },
+        setup() {
+          const val = ref<typeof ON | typeof OFF>(OFF);
+          return { val, ON, OFF };
+        },
+        render() {
+          return h(Switch, {
+            truthy: this.ON,
+            falsy: this.OFF,
+            modelValue: this.val,
+            'onUpdate:modelValue': (v: unknown) => { this.val = v as typeof ON | typeof OFF; },
+          });
+        },
+      });
+      const wrapper = mount(parent);
+      expect(wrapper.vm.val.kind).toBe('off');
+      await wrapper.find('[role="switch"]').trigger('click');
+      expect(wrapper.vm.val.kind).toBe('on');
+      await wrapper.find('[role="switch"]').trigger('click');
+      expect(wrapper.vm.val.kind).toBe('off');
+    });
+  });
+
+  describe('keyboard activation', () => {
+    it('toggles on Space (native button)', async () => {
+      const wrapper = mount(Switch);
+      await wrapper.trigger('keydown', { key: ' ' });
+      // <button> handles Space natively; jsdom dispatches click on Space-keyup, not keydown.
+      // We verify our keydown synth does NOT double-toggle on button.
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+      await wrapper.trigger('click');
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+    });
+
+    it('toggles on Space when as is not a button', async () => {
+      const wrapper = mount(Switch, { props: { as: 'div' } });
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+      await wrapper.trigger('keydown', { key: ' ' });
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+      await wrapper.trigger('keydown', { key: ' ' });
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+    });
+
+    it('toggles on Enter when as is not a button', async () => {
+      const wrapper = mount(Switch, { props: { as: 'div' } });
+      await wrapper.trigger('keydown', { key: 'Enter' });
+      expect(wrapper.attributes('aria-checked')).toBe('true');
+    });
+
+    it('does not toggle on other keys', async () => {
+      const wrapper = mount(Switch, { props: { as: 'div' } });
+      await wrapper.trigger('keydown', { key: 'a' });
+      await wrapper.trigger('keydown', { key: 'Tab' });
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+    });
+  });
+
+  describe('non-button host (as="div")', () => {
+    it('sets aria-disabled when disabled', () => {
+      const wrapper = mount(Switch, { props: { as: 'div', disabled: true } });
+      expect(wrapper.attributes('aria-disabled')).toBe('true');
+    });
+
+    it('does not set aria-disabled when not disabled', () => {
+      const wrapper = mount(Switch, { props: { as: 'div' } });
+      expect(wrapper.attributes('aria-disabled')).toBeUndefined();
+    });
+
+    it('does not toggle on keyboard when disabled', async () => {
+      const wrapper = mount(Switch, { props: { as: 'div', disabled: true } });
+      await wrapper.trigger('keydown', { key: ' ' });
+      await wrapper.trigger('keydown', { key: 'Enter' });
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+    });
+
+    it('does not toggle on click when disabled', async () => {
+      const wrapper = mount(Switch, { props: { as: 'div', disabled: true } });
+      await wrapper.trigger('click');
+      expect(wrapper.attributes('aria-checked')).toBe('false');
+    });
+
+    it('has tabindex=0 when enabled, -1 when disabled', () => {
+      const enabled = mount(Switch, { props: { as: 'div' } });
+      expect(enabled.attributes('tabindex')).toBe('0');
+      const disabled = mount(Switch, { props: { as: 'div', disabled: true } });
+      expect(disabled.attributes('tabindex')).toBe('-1');
+    });
+
+    it('button host has no synthesized tabindex (native focusability)', () => {
+      const wrapper = mount(Switch);
+      expect(wrapper.attributes('tabindex')).toBeUndefined();
+    });
+  });
+});
diff --git a/vue/primitives/src/switch/index.ts b/vue/primitives/src/switch/index.ts
new file mode 100644
index 0000000..0a5aa7d
--- /dev/null
+++ b/vue/primitives/src/switch/index.ts
@@ -0,0 +1,2 @@
+export { default as Switch } from './Switch.vue';
+export type { SwitchProps } from './Switch.vue';
diff --git a/vue/primitives/src/tabs/TabsContent.vue b/vue/primitives/src/tabs/TabsContent.vue
new file mode 100644
index 0000000..3b156f4
--- /dev/null
+++ b/vue/primitives/src/tabs/TabsContent.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TabsContentProps extends PrimitiveProps {
+  /** Value that links this panel to a trigger. */
+  value: string;
+  /** Keep content mounted even when inactive. */
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+import { useTabsContext } from './context';
+
+const { value, forceMount = false, as = 'div' } = defineProps<TabsContentProps>();
+
+const { forwardRef } = useForwardExpose();
+const ctx = useTabsContext();
+const isSelected = computed(() => ctx.value.value === value);
+</script>
+
+<template>
+  <Primitive
+    v-if="forceMount || isSelected"
+    :ref="forwardRef"
+    :as="as"
+    role="tabpanel"
+    :data-state="isSelected ? 'active' : 'inactive'"
+    :data-orientation="ctx.orientation.value"
+    :tabindex="0"
+    :hidden="forceMount && !isSelected ? true : undefined"
+  >
+    <slot :selected="isSelected" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tabs/TabsList.vue b/vue/primitives/src/tabs/TabsList.vue
new file mode 100644
index 0000000..20c0d2a
--- /dev/null
+++ b/vue/primitives/src/tabs/TabsList.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TabsListProps extends PrimitiveProps {
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useTabsContext } from './context';
+
+const { as = 'div' } = defineProps<TabsListProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useTabsContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="tablist"
+    :aria-orientation="ctx.orientation.value"
+    :data-orientation="ctx.orientation.value"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tabs/TabsRoot.vue b/vue/primitives/src/tabs/TabsRoot.vue
new file mode 100644
index 0000000..11fd445
--- /dev/null
+++ b/vue/primitives/src/tabs/TabsRoot.vue
@@ -0,0 +1,111 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { RovingDirection } from '../utils/roving-focus';
+
+export interface TabsRootProps extends PrimitiveProps {
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  /** Orientation of the tab list. @default 'horizontal' */
+  orientation?: 'horizontal' | 'vertical';
+  /** Writing direction. @default 'ltr' */
+  dir?: RovingDirection;
+  /** Wrap keyboard navigation. @default true */
+  loop?: boolean;
+  /** Disable all tabs. */
+  disabled?: boolean;
+  /** How tabs are activated. @default 'automatic' */
+  activationMode?: 'automatic' | 'manual';
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { useCollectionProvider } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideTabsContext } from './context';
+
+const {
+  orientation = 'horizontal',
+  dir = 'ltr',
+  loop = true,
+  disabled = false,
+  activationMode = 'automatic',
+  defaultValue,
+  as = 'div',
+} = defineProps<TabsRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const localValue = ref<string | undefined>(defaultValue);
+
+const value = defineModel<string | undefined>({
+  get: v => v ?? localValue.value,
+  set: (v) => {
+    localValue.value = v;
+    return v;
+  },
+});
+
+function select(v: string): void {
+  if (disabled) return;
+  value.value = v;
+}
+
+// DOM-order tabs via Collection primitive — survives `v-for` reorders and
+// teleport/portal children, unlike a mount-order array.
+const { getItems, CollectionSlot } = useCollectionProvider();
+const tabElements = computed(() => getItems(true).map(i => i.ref));
+
+function onTriggerKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  const action = rovingKeyToAction(event, { orientation, dir, loop });
+  if (!action) return;
+  event.preventDefault();
+  const enabled = tabElements.value.filter(x => !x.hasAttribute('data-disabled'));
+  if (enabled.length === 0) return;
+  const current = enabled.indexOf(el);
+  if (action.absolute === 'home') {
+    enabled[0]!.focus();
+    return;
+  }
+  if (action.absolute === 'end') {
+    enabled[enabled.length - 1]!.focus();
+    return;
+  }
+  const nextIdx = resolveNextIndex(current === -1 ? 0 : current, action.delta, enabled.length, loop);
+  const target = enabled[nextIdx]!;
+  target.focus();
+  if (activationMode === 'automatic') {
+    const val = target.getAttribute('data-value');
+    if (val !== null) select(val);
+  }
+}
+
+provideTabsContext({
+  value,
+  // Identity passthroughs via `toRef` — reactive without `computed`'s effect/cache.
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  loop: toRef(() => loop),
+  disabled: toRef(() => disabled),
+  activationMode: toRef(() => activationMode),
+  tabElements,
+  select,
+  onTriggerKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :dir="dir"
+      :data-orientation="orientation"
+      :data-disabled="disabled ? '' : undefined"
+    >
+      <slot :value="value" />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/tabs/TabsTrigger.vue b/vue/primitives/src/tabs/TabsTrigger.vue
new file mode 100644
index 0000000..9b35e23
--- /dev/null
+++ b/vue/primitives/src/tabs/TabsTrigger.vue
@@ -0,0 +1,59 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TabsTriggerProps extends PrimitiveProps {
+  /** Value that links this trigger to a content panel. */
+  value: string;
+  /** Disable this trigger. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { useTabsContext } from './context';
+
+const { value, disabled = false, as = 'button' } = defineProps<TabsTriggerProps>();
+
+const ctx = useTabsContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+const isSelected = computed(() => ctx.value.value === value);
+const isDisabled = computed(() => ctx.disabled.value || disabled);
+
+function onClick(): void {
+  if (isDisabled.value) return;
+  ctx.select(value);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (!currentElement.value) return;
+  ctx.onTriggerKeyDown(event, currentElement.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :as="as"
+      :ref="forwardRef"
+      role="tab"
+      :type="as === 'button' ? 'button' : undefined"
+      :aria-selected="isSelected"
+      :aria-disabled="isDisabled || undefined"
+      :data-state="isSelected ? 'active' : 'inactive'"
+      :data-disabled="isDisabled ? '' : undefined"
+      :data-value="value"
+      :tabindex="isSelected ? 0 : -1"
+      :disabled="isDisabled || undefined"
+      @click="onClick"
+      @keydown="onKeyDown"
+    >
+      <slot :selected="isSelected" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/tabs/__test__/Tabs.test.ts b/vue/primitives/src/tabs/__test__/Tabs.test.ts
new file mode 100644
index 0000000..f31b87e
--- /dev/null
+++ b/vue/primitives/src/tabs/__test__/Tabs.test.ts
@@ -0,0 +1,225 @@
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '../index';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createTabs(props: Record<string, unknown> = {}) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () => h(TabsRoot, { ...props }, {
+          default: () => [
+            h(TabsList, null, {
+              default: () => [
+                h(TabsTrigger, { value: 'a' }, { default: () => 'Tab A' }),
+                h(TabsTrigger, { value: 'b' }, { default: () => 'Tab B' }),
+                h(TabsTrigger, { value: 'c', disabled: true }, { default: () => 'Tab C' }),
+              ],
+            }),
+            h(TabsContent, { value: 'a' }, { default: () => 'Panel A' }),
+            h(TabsContent, { value: 'b' }, { default: () => 'Panel B' }),
+            h(TabsContent, { value: 'c' }, { default: () => 'Panel C' }),
+          ],
+        });
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string, opts: Record<string, unknown> = {}) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true, ...opts }));
+}
+
+describe('Tabs', () => {
+  it('renders tablist with correct roles', () => {
+    const w = createTabs({ defaultValue: 'a' });
+    expect(w.find('[role="tablist"]').exists()).toBe(true);
+    expect(w.findAll('[role="tab"]')).toHaveLength(3);
+    expect(w.find('[role="tabpanel"]').exists()).toBe(true);
+    w.unmount();
+  });
+
+  it('shows correct panel based on defaultValue', () => {
+    const w = createTabs({ defaultValue: 'b' });
+    const panels = w.findAll('[role="tabpanel"]');
+    expect(panels).toHaveLength(1);
+    expect(panels[0]!.text()).toBe('Panel B');
+    w.unmount();
+  });
+
+  it('selects tab on click', async () => {
+    const w = createTabs({ defaultValue: 'a' });
+    const tabs = w.findAll('[role="tab"]');
+    await tabs[1]!.trigger('click');
+    await nextTick();
+    expect(w.find('[role="tabpanel"]').text()).toBe('Panel B');
+    const tabB = tabs[1]!.element;
+    expect(tabB.getAttribute('aria-selected')).toBe('true');
+    expect(tabB.getAttribute('data-state')).toBe('active');
+    w.unmount();
+  });
+
+  it('supports v-model', async () => {
+    const value = ref('a');
+    const w = mount(
+      defineComponent({
+        setup() {
+          return () => h(TabsRoot, {
+            modelValue: value.value,
+            'onUpdate:modelValue': (v: string | undefined) => { value.value = v!; },
+          }, {
+            default: () => [
+              h(TabsList, null, {
+                default: () => [
+                  h(TabsTrigger, { value: 'a' }, { default: () => 'A' }),
+                  h(TabsTrigger, { value: 'b' }, { default: () => 'B' }),
+                ],
+              }),
+              h(TabsContent, { value: 'a' }, { default: () => 'PA' }),
+              h(TabsContent, { value: 'b' }, { default: () => 'PB' }),
+            ],
+          });
+        },
+      }),
+      { attachTo: document.body },
+    );
+
+    expect(w.find('[role="tabpanel"]').text()).toBe('PA');
+    const tabs = w.findAll('[role="tab"]');
+    await tabs[1]!.trigger('click');
+    await nextTick();
+    expect(value.value).toBe('b');
+    w.unmount();
+  });
+
+  it('navigates with arrow keys (horizontal)', async () => {
+    const w = createTabs({ defaultValue: 'a' });
+    await nextTick();
+    const tabs = w.findAll('[role="tab"]');
+    const tabA = tabs[0]!.element as HTMLElement;
+    tabA.focus();
+
+    press(tabA, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(tabs[1]!.element);
+    // automatic mode → panel also switches
+    expect(w.find('[role="tabpanel"]').text()).toBe('Panel B');
+
+    // ArrowRight from B should skip disabled C and loop to A
+    press(tabs[1]!.element, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(tabs[0]!.element);
+
+    w.unmount();
+  });
+
+  it('navigates with arrow keys (vertical)', async () => {
+    const w = createTabs({ defaultValue: 'a', orientation: 'vertical' });
+    await nextTick();
+    const tabs = w.findAll('[role="tab"]');
+    const tabA = tabs[0]!.element as HTMLElement;
+    tabA.focus();
+
+    press(tabA, 'ArrowDown');
+    await nextTick();
+    expect(document.activeElement).toBe(tabs[1]!.element);
+    w.unmount();
+  });
+
+  it('Home/End keys', async () => {
+    const w = createTabs({ defaultValue: 'a' });
+    await nextTick();
+    const tabs = w.findAll('[role="tab"]');
+    const tabB = tabs[1]!.element as HTMLElement;
+    tabB.focus();
+
+    press(tabB, 'Home');
+    await nextTick();
+    expect(document.activeElement).toBe(tabs[0]!.element);
+
+    press(tabs[0]!.element, 'End');
+    await nextTick();
+    // End goes to last enabled — B (C is disabled)
+    expect(document.activeElement).toBe(tabs[1]!.element);
+    w.unmount();
+  });
+
+  it('does not select disabled tabs', async () => {
+    const w = createTabs({ defaultValue: 'a' });
+    const tabs = w.findAll('[role="tab"]');
+    await tabs[2]!.trigger('click');
+    await nextTick();
+    // Should remain on panel A
+    expect(w.find('[role="tabpanel"]').text()).toBe('Panel A');
+    w.unmount();
+  });
+
+  it('disabled root blocks all interaction', async () => {
+    const w = createTabs({ defaultValue: 'a', disabled: true });
+    const tabs = w.findAll('[role="tab"]');
+    await tabs[1]!.trigger('click');
+    await nextTick();
+    expect(w.find('[role="tabpanel"]').text()).toBe('Panel A');
+    w.unmount();
+  });
+
+  it('manual activation mode: arrow keys move focus but do not select', async () => {
+    const w = createTabs({ defaultValue: 'a', activationMode: 'manual' });
+    await nextTick();
+    const tabs = w.findAll('[role="tab"]');
+    const tabA = tabs[0]!.element as HTMLElement;
+    tabA.focus();
+
+    press(tabA, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(tabs[1]!.element);
+    // panel stays on A until explicit Enter/Space
+    expect(w.find('[role="tabpanel"]').text()).toBe('Panel A');
+    w.unmount();
+  });
+
+  it('sets correct tabindex: selected=0, others=-1', () => {
+    const w = createTabs({ defaultValue: 'b' });
+    const tabs = w.findAll('[role="tab"]');
+    expect(tabs[0]!.attributes('tabindex')).toBe('-1');
+    expect(tabs[1]!.attributes('tabindex')).toBe('0');
+    expect(tabs[2]!.attributes('tabindex')).toBe('-1');
+    w.unmount();
+  });
+
+  it('forceMount keeps panels in DOM', () => {
+    const w = mount(
+      defineComponent({
+        setup() {
+          return () => h(TabsRoot, { defaultValue: 'a' }, {
+            default: () => [
+              h(TabsList, null, {
+                default: () => [
+                  h(TabsTrigger, { value: 'a' }, { default: () => 'A' }),
+                  h(TabsTrigger, { value: 'b' }, { default: () => 'B' }),
+                ],
+              }),
+              h(TabsContent, { value: 'a', forceMount: true }, { default: () => 'PA' }),
+              h(TabsContent, { value: 'b', forceMount: true }, { default: () => 'PB' }),
+            ],
+          });
+        },
+      }),
+      { attachTo: document.body },
+    );
+
+    const panels = w.findAll('[role="tabpanel"]');
+    expect(panels).toHaveLength(2);
+    // inactive panel has hidden attribute
+    expect(panels[1]!.attributes('hidden')).toBeDefined();
+    w.unmount();
+  });
+
+  it('orientation reflects in data-orientation and aria-orientation', () => {
+    const w = createTabs({ defaultValue: 'a', orientation: 'vertical' });
+    expect(w.find('[role="tablist"]').attributes('aria-orientation')).toBe('vertical');
+    expect(w.find('[role="tablist"]').attributes('data-orientation')).toBe('vertical');
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/tabs/context.ts b/vue/primitives/src/tabs/context.ts
new file mode 100644
index 0000000..150d1ba
--- /dev/null
+++ b/vue/primitives/src/tabs/context.ts
@@ -0,0 +1,20 @@
+import type { ComputedRef, Ref } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export interface TabsContext {
+  value: Ref<string | undefined>;
+  orientation: Ref<'horizontal' | 'vertical'>;
+  direction: Ref<'ltr' | 'rtl'>;
+  loop: Ref<boolean>;
+  disabled: Ref<boolean>;
+  activationMode: Ref<'automatic' | 'manual'>;
+  /** DOM-ordered tab elements, sourced from the internal Collection. */
+  tabElements: ComputedRef<HTMLElement[]>;
+  select: (value: string) => void;
+  onTriggerKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+export const {
+  inject: useTabsContext,
+  provide: provideTabsContext,
+} = useContextFactory<TabsContext>('TabsContext');
diff --git a/vue/primitives/src/tabs/index.ts b/vue/primitives/src/tabs/index.ts
new file mode 100644
index 0000000..706045a
--- /dev/null
+++ b/vue/primitives/src/tabs/index.ts
@@ -0,0 +1,12 @@
+export { default as TabsRoot } from './TabsRoot.vue';
+export { default as TabsList } from './TabsList.vue';
+export { default as TabsTrigger } from './TabsTrigger.vue';
+export { default as TabsContent } from './TabsContent.vue';
+
+export { provideTabsContext, useTabsContext } from './context';
+
+export type { TabsRootProps } from './TabsRoot.vue';
+export type { TabsListProps } from './TabsList.vue';
+export type { TabsTriggerProps } from './TabsTrigger.vue';
+export type { TabsContentProps } from './TabsContent.vue';
+export type { TabsContext } from './context';
diff --git a/vue/primitives/src/tags-input/TagsInputClear.vue b/vue/primitives/src/tags-input/TagsInputClear.vue
new file mode 100644
index 0000000..196def2
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputClear.vue
@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TagsInputClearProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useTagsInputContext } from './context';
+
+const { as = 'button' } = defineProps<TagsInputClearProps>();
+
+const ctx = useTagsInputContext();
+const { forwardRef } = useForwardExpose();
+
+function onClick(): void {
+  if (ctx.disabled.value) return;
+  if (ctx.modelValue.value.length === 0) return;
+  // Drop everything; reuse root's commit path by replaying removals in reverse.
+  while (ctx.modelValue.value.length > 0) {
+    ctx.onRemoveValue(ctx.modelValue.value.length - 1);
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    :disabled="ctx.disabled.value || undefined"
+    :data-disabled="ctx.disabled.value ? '' : undefined"
+    @click="onClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tags-input/TagsInputInput.vue b/vue/primitives/src/tags-input/TagsInputInput.vue
new file mode 100644
index 0000000..6cbe560
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputInput.vue
@@ -0,0 +1,136 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TagsInputInputProps extends PrimitiveProps {
+  /** Placeholder text. */
+  placeholder?: string;
+  /** Focus on mount. */
+  autoFocus?: boolean;
+  /** Max input length. */
+  maxLength?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useTagsInputContext } from './context';
+
+const {
+  as = 'input',
+  placeholder,
+  autoFocus = false,
+  maxLength,
+} = defineProps<TagsInputInputProps>();
+
+const ctx = useTagsInputContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const isComposing = ref(false);
+
+function onCompositionStart(): void {
+  isComposing.value = true;
+}
+function onCompositionEnd(): void {
+  nextTick(() => {
+    isComposing.value = false;
+  });
+}
+
+function commitCurrent(target: HTMLInputElement): void {
+  if (!target.value) return;
+  const ok = ctx.onAddValue(target.value);
+  if (ok) target.value = '';
+}
+
+async function onEnter(event: KeyboardEvent): Promise<void> {
+  if (isComposing.value) return;
+  await nextTick();
+  if (event.defaultPrevented) return;
+  const target = event.target as HTMLInputElement;
+  if (!target.value) return;
+  event.preventDefault();
+  commitCurrent(target);
+}
+
+function onTab(event: KeyboardEvent): void {
+  if (!ctx.addOnTab.value) return;
+  const target = event.target as HTMLInputElement;
+  if (!target.value) return;
+  event.preventDefault();
+  commitCurrent(target);
+}
+
+function onBlur(event: FocusEvent): void {
+  ctx.selectedElement.value = undefined;
+  if (!ctx.addOnBlur.value) return;
+  const target = event.target as HTMLInputElement;
+  if (!target.value) return;
+  commitCurrent(target);
+}
+
+function onInput(event: Event): void {
+  ctx.isInvalidInput.value = false;
+  const ev = event as InputEvent;
+  if (ev.data === null || ev.data === undefined) return;
+  const delim = ctx.delimiter.value;
+  const matches = typeof delim === 'string' ? ev.data === delim : delim.test(ev.data);
+  if (!matches) return;
+  const target = event.target as HTMLInputElement;
+  target.value = target.value.replace(delim, '');
+  if (target.value.trim() === '') {
+    target.value = '';
+    return;
+  }
+  commitCurrent(target);
+}
+
+function onPaste(event: ClipboardEvent): void {
+  if (!ctx.addOnPaste.value) return;
+  const data = event.clipboardData?.getData('text');
+  if (!data) return;
+  event.preventDefault();
+  const delim = ctx.delimiter.value;
+  const parts = delim ? data.split(delim) : [data];
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (trimmed) ctx.onAddValue(trimmed);
+  }
+}
+
+onMounted(() => {
+  if (!autoFocus) return;
+  const el = currentElement.value;
+  const input = el?.nodeName === 'INPUT' ? el : el?.querySelector('input');
+  // Defer to let the surrounding DOM settle before stealing focus.
+  setTimeout(() => {
+    (input as HTMLInputElement | null)?.focus();
+  }, 0);
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    type="text"
+    autocomplete="off"
+    autocorrect="off"
+    autocapitalize="off"
+    :placeholder="placeholder"
+    :maxlength="maxLength"
+    :disabled="ctx.disabled.value || undefined"
+    :data-invalid="ctx.isInvalidInput.value ? '' : undefined"
+    @input="onInput"
+    @keydown.enter="onEnter"
+    @keydown.tab="onTab"
+    @keydown="ctx.onInputKeyDown"
+    @blur="onBlur"
+    @compositionstart="onCompositionStart"
+    @compositionend="onCompositionEnd"
+    @paste="onPaste"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tags-input/TagsInputItem.vue b/vue/primitives/src/tags-input/TagsInputItem.vue
new file mode 100644
index 0000000..52133a6
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputItem.vue
@@ -0,0 +1,54 @@
+<script lang="ts" generic="T extends TagValue = string">
+import type { PrimitiveProps } from '../primitive';
+import type { TagValue } from './context';
+
+export interface TagsInputItemProps<U extends TagValue = string> extends PrimitiveProps {
+  /** The value associated with this tag. */
+  value: U;
+  /** Disable this specific tag. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts" generic="T extends TagValue = string">
+import { computed, ref, toRef } from 'vue';
+import { provideTagsInputItemContext, useTagsInputContext } from './context';
+import { Primitive } from '../primitive';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'div', value, disabled = false } = defineProps<TagsInputItemProps<T>>();
+
+const ctx = useTagsInputContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+const isSelected = computed(() => ctx.selectedElement.value === currentElement.value);
+const isDisabled = computed(() => disabled || ctx.disabled.value);
+const display = computed(() => ctx.displayValue(value));
+
+const textId = ref<string>('');
+
+provideTagsInputItemContext({
+  value: toRef(() => value) as any,
+  displayValue: display,
+  isSelected,
+  disabled: isDisabled,
+  textId,
+});
+</script>
+
+<template>
+  <CollectionItem :value="value">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :aria-labelledby="textId.value || undefined"
+      :aria-current="isSelected ? 'true' : undefined"
+      :data-state="isSelected ? 'active' : 'inactive'"
+      :data-disabled="isDisabled ? '' : undefined"
+    >
+      <slot :value="value" :display-value="display" :is-selected="isSelected" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/tags-input/TagsInputItemDelete.vue b/vue/primitives/src/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 0000000..2b9b350
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TagsInputItemDeleteProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useTagsInputContext, useTagsInputItemContext } from './context';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<TagsInputItemDeleteProps>();
+
+const ctx = useTagsInputContext();
+const item = useTagsInputItemContext();
+const { forwardRef } = useForwardExpose();
+
+function onClick(): void {
+  if (item.disabled.value) return;
+  const idx = ctx.modelValue.value.findIndex(v => v === item.value.value);
+  if (idx !== -1) ctx.onRemoveValue(idx);
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    tabindex="-1"
+    :aria-labelledby="item.textId.value || undefined"
+    :aria-current="item.isSelected.value"
+    :data-state="item.isSelected.value ? 'active' : 'inactive'"
+    :data-disabled="item.disabled.value ? '' : undefined"
+    :disabled="item.disabled.value || undefined"
+    @click="onClick"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tags-input/TagsInputItemText.vue b/vue/primitives/src/tags-input/TagsInputItemText.vue
new file mode 100644
index 0000000..3a8b733
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputItemText.vue
@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TagsInputItemTextProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { useTagsInputItemContext } from './context';
+
+const { as = 'span' } = defineProps<TagsInputItemTextProps>();
+
+const item = useTagsInputItemContext();
+const { forwardRef } = useForwardExpose();
+
+// Lazily assign an id the first time the text part is mounted — kept on the
+// shared context so the sibling `<TagsInputItem>` / `<TagsInputItemDelete>` can
+// point `aria-labelledby` at it without us generating an id per tag eagerly.
+if (!item.textId.value) item.textId.value = useId(undefined, 'tags-input-item-text').value;
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :id="item.textId.value"
+  >
+    <slot>{{ item.displayValue.value }}</slot>
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/tags-input/TagsInputRoot.vue b/vue/primitives/src/tags-input/TagsInputRoot.vue
new file mode 100644
index 0000000..0c206f7
--- /dev/null
+++ b/vue/primitives/src/tags-input/TagsInputRoot.vue
@@ -0,0 +1,249 @@
+<script lang="ts" generic="T extends TagValue = string">
+import type { PrimitiveProps } from '../primitive';
+import type { TagValue } from './context';
+
+export interface TagsInputRootProps<U extends TagValue = string> extends PrimitiveProps {
+  /** Controlled value. Use `v-model`. */
+  modelValue?: U[];
+  /** Uncontrolled initial value. @default [] */
+  defaultValue?: U[];
+  /** Add on paste (respects `delimiter`). */
+  addOnPaste?: boolean;
+  /** Add on Tab. */
+  addOnTab?: boolean;
+  /** Add on blur. */
+  addOnBlur?: boolean;
+  /** Allow duplicate tags. */
+  duplicate?: boolean;
+  /** Disable the whole component. */
+  disabled?: boolean;
+  /** Character or regex that splits/commits input. @default ',' */
+  delimiter?: string | RegExp;
+  /** Writing direction. Falls back to `ConfigProvider` when omitted. */
+  dir?: 'ltr' | 'rtl';
+  /** Maximum number of tags. `0` disables the cap. @default 0 */
+  max?: number;
+  /** Map a raw input string to a tag. Required for non-string tag values. */
+  convertValue?: (raw: string) => U;
+  /** Render a tag value as text. @default `String(v)` */
+  displayValue?: (value: U) => string;
+}
+
+export interface TagsInputRootEmits<U extends TagValue = string> {
+  'update:modelValue': [value: U[]];
+  addTag: [value: U];
+  removeTag: [value: U];
+  invalid: [value: U];
+}
+</script>
+
+<script setup lang="ts" generic="T extends TagValue = string">
+import { computed, ref, shallowRef, toRef, watch } from 'vue';
+import { Primitive } from '../primitive';
+import type { Ref } from 'vue';
+import { provideTagsInputContext } from './context';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
+
+const {
+  as = 'div',
+  modelValue,
+  defaultValue,
+  addOnPaste = false,
+  addOnTab = false,
+  addOnBlur = false,
+  duplicate = false,
+  disabled = false,
+  delimiter = ',',
+  dir,
+  max = 0,
+  convertValue,
+  displayValue,
+} = defineProps<TagsInputRootProps<T>>();
+
+const emit = defineEmits<TagsInputRootEmits<T>>();
+
+const { forwardRef } = useForwardExpose();
+const config = useConfig();
+const direction = computed(() => dir ?? config.dir.value);
+
+// shallowRef: array is always replaced via commit(), never mutated in place.
+const localValue = shallowRef<T[]>((modelValue ?? defaultValue ?? []).slice()) as Ref<T[]>;
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  const cur = localValue.value;
+  if (v.length === cur.length) {
+    let equal = true;
+    for (let i = 0; i < v.length; i++) {
+      if (v[i] !== cur[i]) {
+        equal = false;
+        break;
+      }
+    }
+    if (equal) return;
+  }
+  localValue.value = v.slice();
+});
+
+const selectedElement = shallowRef<HTMLElement>();
+const isInvalidInput = ref(false);
+
+const { getItems, CollectionSlot } = useCollectionProvider();
+
+function commit(next: T[]): void {
+  localValue.value = next;
+  emit('update:modelValue', next);
+}
+
+const convert: (raw: string) => T = convertValue ?? ((raw: string) => raw as unknown as T);
+const display: (value: T) => string = displayValue ?? ((value: T) => String(value));
+
+function onAddValue(raw: string): boolean {
+  if (disabled) return false;
+  const cur = localValue.value;
+  if (max > 0 && cur.length >= max) {
+    const payload = convert(raw);
+    isInvalidInput.value = true;
+    emit('invalid', payload);
+    return false;
+  }
+  const payload = convert(raw);
+  if (!duplicate) {
+    const exists = cur.some(v => v === payload || display(v) === display(payload));
+    if (exists) {
+      isInvalidInput.value = true;
+      emit('invalid', payload);
+      return false;
+    }
+  }
+  commit([...cur, payload]);
+  emit('addTag', payload);
+  return true;
+}
+
+function onRemoveValue(index: number): void {
+  if (disabled || index < 0) return;
+  const cur = localValue.value;
+  if (index >= cur.length) return;
+  const removed = cur[index]!;
+  const next = cur.slice();
+  next.splice(index, 1);
+  commit(next);
+  emit('removeTag', removed);
+}
+
+function collectTagEls(): HTMLElement[] {
+  return getItems(false).map(i => i.ref);
+}
+
+function onInputKeyDown(event: KeyboardEvent): void {
+  const target = event.target as HTMLInputElement;
+  const tags = collectTagEls();
+  if (tags.length === 0) return;
+  const lastTag = tags[tags.length - 1]!;
+  const atCaretStart = target.selectionStart === 0 && target.selectionEnd === 0;
+
+  switch (event.key) {
+    case 'Delete':
+    case 'Backspace': {
+      if (!atCaretStart) return;
+      if (selectedElement.value) {
+        const idx = tags.indexOf(selectedElement.value);
+        if (idx === -1) return;
+        onRemoveValue(idx);
+        // After removal, focus the neighbouring tag or clear.
+        const after = collectTagEls();
+        const nextEl = event.key === 'Backspace'
+          ? (after[idx - 1] ?? after[after.length - 1])
+          : (after[idx] ?? after[after.length - 1]);
+        selectedElement.value = nextEl;
+        event.preventDefault();
+      }
+      else if (event.key === 'Backspace') {
+        selectedElement.value = lastTag;
+        event.preventDefault();
+      }
+      return;
+    }
+    case 'ArrowLeft':
+    case 'ArrowRight': {
+      if (!atCaretStart) return;
+      const ltr = direction.value !== 'rtl';
+      const isBack = (event.key === 'ArrowLeft' && ltr) || (event.key === 'ArrowRight' && !ltr);
+      const isForward = !isBack;
+      if (isBack && !selectedElement.value) {
+        selectedElement.value = lastTag;
+        event.preventDefault();
+        return;
+      }
+      if (isForward && selectedElement.value === lastTag) {
+        selectedElement.value = undefined;
+        target.focus();
+        event.preventDefault();
+        return;
+      }
+      if (selectedElement.value) {
+        const idx = tags.indexOf(selectedElement.value);
+        if (idx === -1) return;
+        const delta = isBack ? -1 : 1;
+        const nextIdx = Math.max(0, Math.min(tags.length - 1, idx + delta));
+        selectedElement.value = tags[nextIdx]!;
+        event.preventDefault();
+      }
+      return;
+    }
+    case 'Home':
+    case 'End': {
+      if (!atCaretStart) return;
+      if (selectedElement.value) {
+        selectedElement.value = event.key === 'Home' ? tags[0]! : lastTag;
+        event.preventDefault();
+      }
+      return;
+    }
+    case 'ArrowUp':
+    case 'ArrowDown': {
+      if (selectedElement.value) event.preventDefault();
+      return;
+    }
+    default: {
+      selectedElement.value = undefined;
+    }
+  }
+}
+
+provideTagsInputContext({
+  modelValue: localValue,
+  selectedElement,
+  isInvalidInput,
+  addOnPaste: toRef(() => addOnPaste),
+  addOnTab: toRef(() => addOnTab),
+  addOnBlur: toRef(() => addOnBlur),
+  disabled: toRef(() => disabled),
+  delimiter: toRef(() => delimiter),
+  direction,
+  max: toRef(() => max),
+  duplicate: toRef(() => duplicate),
+  convertValue: convert,
+  displayValue: display,
+  onAddValue,
+  onRemoveValue,
+  onInputKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :dir="direction"
+      :data-disabled="disabled ? '' : undefined"
+      :data-invalid="isInvalidInput ? '' : undefined"
+    >
+      <slot :model-value="localValue" />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/tags-input/__test__/TagsInput.test.ts b/vue/primitives/src/tags-input/__test__/TagsInput.test.ts
new file mode 100644
index 0000000..5d66983
--- /dev/null
+++ b/vue/primitives/src/tags-input/__test__/TagsInput.test.ts
@@ -0,0 +1,171 @@
+import {
+
+  TagsInputClear,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText,
+  TagsInputRoot,
+} from '../index';
+import type { TagValue } from '../index';
+import type { Component } from 'vue';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+function createTagsInput(rootProps: Record<string, unknown> = {}) {
+  return mount(
+    defineComponent({
+      setup() {
+        const tags = ref<string[]>(
+          (rootProps.modelValue as string[] | undefined) ?? (rootProps.defaultValue as string[] | undefined) ?? [],
+        );
+        return () => h(
+          TagsInputRoot,
+          {
+            modelValue: tags.value,
+            'onUpdate:modelValue': (v: TagValue[]) => (tags.value = v as string[]),
+            ...rootProps,
+          },
+          {
+            default: ({ modelValue }: { modelValue: string[] }) => [
+              ...modelValue.map(tag =>
+                h(TagsInputItem, { key: tag, value: tag }, {
+                  default: () => [
+                    h(TagsInputItemText, null, { default: () => tag }),
+                    h(TagsInputItemDelete, null, { default: () => '×' }),
+                  ],
+                }),
+              ),
+              h(TagsInputInput, { placeholder: 'add tag' }),
+              h(TagsInputClear, null, { default: () => 'Clear' }),
+            ],
+          },
+        );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('TagsInput', () => {
+  it('renders initial tags from defaultValue', () => {
+    const w = createTagsInput({ defaultValue: ['a', 'b'] });
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(2);
+    w.unmount();
+  });
+
+  it('Enter adds a tag from input', async () => {
+    const w = createTagsInput();
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'hello';
+    await input.trigger('keydown', { key: 'Enter' });
+    await nextTick();
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(1);
+    expect(w.findComponent(TagsInputItem as Component).text()).toContain('hello');
+    expect((input.element as HTMLInputElement).value).toBe('');
+    w.unmount();
+  });
+
+  it('delimiter commits a tag on input', async () => {
+    const w = createTagsInput({ delimiter: ',' });
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'x,';
+    await input.trigger('input', { data: ',' });
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(1);
+    expect(w.findComponent(TagsInputItem as Component).text()).toContain('x');
+    w.unmount();
+  });
+
+  it('rejects duplicates by default and emits invalid', async () => {
+    const w = createTagsInput({ defaultValue: ['foo'] });
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'foo';
+    await input.trigger('keydown', { key: 'Enter' });
+    await nextTick();
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(1);
+    expect(w.findComponent(TagsInputRoot as Component).emitted('invalid')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('duplicate: true allows duplicates', async () => {
+    const w = createTagsInput({ defaultValue: ['foo'], duplicate: true });
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'foo';
+    await input.trigger('keydown', { key: 'Enter' });
+    await nextTick();
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(2);
+    w.unmount();
+  });
+
+  it('max caps tag count and emits invalid', async () => {
+    const w = createTagsInput({ defaultValue: ['a', 'b'], max: 2 });
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'c';
+    await input.trigger('keydown', { key: 'Enter' });
+    await nextTick();
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(2);
+    expect(w.findComponent(TagsInputRoot as Component).emitted('invalid')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('delete trigger removes its tag', async () => {
+    const w = createTagsInput({ defaultValue: ['a', 'b'] });
+    const deleteBtns = w.findAll('button').filter(b => b.text() === '×');
+    await deleteBtns[0]!.trigger('click');
+    await nextTick();
+    const items = w.findAllComponents(TagsInputItem as Component);
+    expect(items).toHaveLength(1);
+    expect(items[0]!.text()).toContain('b');
+    w.unmount();
+  });
+
+  it('Clear removes all tags', async () => {
+    const w = createTagsInput({ defaultValue: ['a', 'b', 'c'] });
+    const clearBtn = w.findAll('button').find(b => b.text() === 'Clear')!;
+    await clearBtn.trigger('click');
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('Backspace on empty input selects last tag; second Backspace deletes it', async () => {
+    const w = createTagsInput({ defaultValue: ['a', 'b'] });
+    const input = w.find('input').element as HTMLInputElement;
+    input.focus();
+    press(input, 'Backspace');
+    await nextTick();
+    press(input, 'Backspace');
+    await nextTick();
+    const items = w.findAllComponents(TagsInputItem as Component);
+    expect(items).toHaveLength(1);
+    expect(items[0]!.text()).toContain('a');
+    w.unmount();
+  });
+
+  it('addOnBlur commits pending value on blur', async () => {
+    const w = createTagsInput({ addOnBlur: true });
+    const input = w.find('input');
+    (input.element as HTMLInputElement).value = 'done';
+    await input.trigger('blur');
+    await nextTick();
+    expect(w.findAllComponents(TagsInputItem as Component)).toHaveLength(1);
+    w.unmount();
+  });
+
+  it('disabled blocks adding tags', async () => {
+    const w = createTagsInput({ disabled: true });
+    const input = w.find('input');
+    expect((input.element as HTMLInputElement).disabled).toBe(true);
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/tags-input/context.ts b/vue/primitives/src/tags-input/context.ts
new file mode 100644
index 0000000..38a477a
--- /dev/null
+++ b/vue/primitives/src/tags-input/context.ts
@@ -0,0 +1,53 @@
+import type { Ref, ShallowRef } from 'vue';
+import { useContextFactory } from '@robonen/vue';
+
+export type TagValue = string | number | Record<string, unknown>;
+
+export interface TagsInputContext<T extends TagValue = TagValue> {
+  /** Current list of tags. */
+  modelValue: Ref<T[]>;
+  /** Currently focused tag element (for keyboard selection in the strip). */
+  selectedElement: ShallowRef<HTMLElement | undefined>;
+  /** Whether the last input attempt was rejected (duplicate or over max). */
+  isInvalidInput: Ref<boolean>;
+
+  addOnPaste: Ref<boolean>;
+  addOnTab: Ref<boolean>;
+  addOnBlur: Ref<boolean>;
+  disabled: Ref<boolean>;
+  delimiter: Ref<string | RegExp>;
+  direction: Ref<'ltr' | 'rtl'>;
+  max: Ref<number>;
+  /** Allow duplicate tags. */
+  duplicate: Ref<boolean>;
+
+  /** Normalize a raw string into a tag value. */
+  convertValue: (raw: string) => T;
+  /** Format a tag value for display. */
+  displayValue: (value: T) => string;
+
+  /** Append a tag from a raw string. Returns `true` on success. */
+  onAddValue: (raw: string) => boolean;
+  /** Remove the tag at `index`. */
+  onRemoveValue: (index: number) => void;
+  /** Keyboard handler wired from `<TagsInputInput>` to the root. */
+  onInputKeyDown: (event: KeyboardEvent) => void;
+}
+
+export interface TagsInputItemContext<T extends TagValue = TagValue> {
+  value: Ref<T>;
+  displayValue: Ref<string>;
+  isSelected: Ref<boolean>;
+  disabled: Ref<boolean>;
+  textId: { value: string };
+}
+
+export const {
+  inject: useTagsInputContext,
+  provide: provideTagsInputContext,
+} = useContextFactory<TagsInputContext<any>>('tags-input');
+
+export const {
+  inject: useTagsInputItemContext,
+  provide: provideTagsInputItemContext,
+} = useContextFactory<TagsInputItemContext<any>>('tags-input-item');
diff --git a/vue/primitives/src/tags-input/index.ts b/vue/primitives/src/tags-input/index.ts
new file mode 100644
index 0000000..6b67bd5
--- /dev/null
+++ b/vue/primitives/src/tags-input/index.ts
@@ -0,0 +1,23 @@
+export { default as TagsInputRoot } from './TagsInputRoot.vue';
+export { default as TagsInputItem } from './TagsInputItem.vue';
+export { default as TagsInputItemText } from './TagsInputItemText.vue';
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue';
+export { default as TagsInputInput } from './TagsInputInput.vue';
+export { default as TagsInputClear } from './TagsInputClear.vue';
+
+export {
+  provideTagsInputContext,
+  useTagsInputContext,
+  provideTagsInputItemContext,
+  useTagsInputItemContext,
+  type TagsInputContext,
+  type TagsInputItemContext,
+  type TagValue,
+} from './context';
+
+export type { TagsInputRootProps, TagsInputRootEmits } from './TagsInputRoot.vue';
+export type { TagsInputItemProps } from './TagsInputItem.vue';
+export type { TagsInputItemTextProps } from './TagsInputItemText.vue';
+export type { TagsInputItemDeleteProps } from './TagsInputItemDelete.vue';
+export type { TagsInputInputProps } from './TagsInputInput.vue';
+export type { TagsInputClearProps } from './TagsInputClear.vue';
diff --git a/vue/primitives/src/teleport/Teleport.vue b/vue/primitives/src/teleport/Teleport.vue
new file mode 100644
index 0000000..650f6b7
--- /dev/null
+++ b/vue/primitives/src/teleport/Teleport.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+export interface TeleportPrimitiveProps {
+  /**
+   * Target DOM node or CSS selector. When `null`/`undefined`, Vue's built-in
+   * `<Teleport>` is rendered with its default behavior (body).
+   */
+  to?: string | HTMLElement | null;
+
+  /**
+   * Defer teleport rendering until after the parent has mounted.
+   * Useful when the target node is rendered by the same component tree.
+   * @default false
+   */
+  defer?: boolean;
+
+  /**
+   * Disable teleport — children render in place. SSR-safe default.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Forcibly keep children mounted even when Teleport is disabled/removed.
+   * Opt-in escape hatch for animation-aware primitives.
+   * @default true
+   */
+  forceMount?: boolean;
+}
+
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { isClient } from '@robonen/platform/multi';
+import { useConfig } from '../config-provider';
+import { computed } from 'vue';
+
+const {
+  to,
+  defer = false,
+  disabled = false,
+  forceMount = true,
+} = defineProps<TeleportPrimitiveProps>();
+
+const config = useConfig();
+
+// On the server, Vue's Teleport is a no-op for most targets; we also opt-out
+// explicitly when `isClient` is false to avoid hydration mismatches when the
+// target hasn't mounted yet.
+const effectiveDisabled = computed(() => disabled || !isClient);
+const target = computed(() => to ?? config.teleportTarget.value);
+</script>
+
+<template>
+  <Teleport
+    v-if="forceMount || !effectiveDisabled"
+    :to="target"
+    :defer="defer"
+    :disabled="effectiveDisabled"
+  >
+    <slot />
+  </Teleport>
+</template>
diff --git a/vue/primitives/src/teleport/__test__/Teleport.test.ts b/vue/primitives/src/teleport/__test__/Teleport.test.ts
new file mode 100644
index 0000000..de8b674
--- /dev/null
+++ b/vue/primitives/src/teleport/__test__/Teleport.test.ts
@@ -0,0 +1,73 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent, h, nextTick } from 'vue';
+import Teleport from '../Teleport.vue';
+
+describe('Teleport primitive', () => {
+  let host: HTMLElement;
+
+  beforeEach(() => {
+    host = document.createElement('div');
+    host.id = 'teleport-target';
+    document.body.appendChild(host);
+  });
+
+  afterEach(() => {
+    host.remove();
+  });
+
+  it('teleports default slot content to `to` target', async () => {
+    const w = mount(Teleport, {
+      props: { to: '#teleport-target' },
+      slots: { default: () => h('span', { 'data-testid': 'child' }, 'hello') },
+      attachTo: document.body,
+    });
+
+    await nextTick();
+    expect(host.querySelector('[data-testid=child]')?.textContent).toBe('hello');
+    w.unmount();
+  });
+
+  it('accepts an HTMLElement as `to`', async () => {
+    const w = mount(Teleport, {
+      props: { to: host },
+      slots: { default: () => h('span', { 'data-testid': 'child' }, 'x') },
+      attachTo: document.body,
+    });
+
+    await nextTick();
+    expect(host.querySelector('[data-testid=child]')).toBeTruthy();
+    w.unmount();
+  });
+
+  it('renders children in place when disabled', async () => {
+    const Parent = defineComponent({
+      render() {
+        return h('div', { id: 'parent' }, [
+          h(Teleport, { to: '#teleport-target', disabled: true }, {
+            default: () => h('span', { 'data-testid': 'child' }, 'inline'),
+          }),
+        ]);
+      },
+    });
+
+    const w = mount(Parent, { attachTo: document.body });
+    await nextTick();
+
+    expect(document.querySelector('#parent [data-testid=child]')).toBeTruthy();
+    expect(host.querySelector('[data-testid=child]')).toBeFalsy();
+
+    w.unmount();
+  });
+
+  it('defaults to body when `to` is omitted', async () => {
+    const w = mount(Teleport, {
+      slots: { default: () => h('span', { 'data-testid': 'body-child' }, 'hi') },
+      attachTo: document.body,
+    });
+
+    await nextTick();
+    expect(document.body.querySelector('[data-testid=body-child]')).toBeTruthy();
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/teleport/index.ts b/vue/primitives/src/teleport/index.ts
new file mode 100644
index 0000000..8b83641
--- /dev/null
+++ b/vue/primitives/src/teleport/index.ts
@@ -0,0 +1,2 @@
+export { default as Teleport, default as Portal } from './Teleport.vue';
+export type { TeleportPrimitiveProps, TeleportPrimitiveProps as PortalProps } from './Teleport.vue';
diff --git a/vue/primitives/src/toast/ToastAction.vue b/vue/primitives/src/toast/ToastAction.vue
new file mode 100644
index 0000000..b8423d4
--- /dev/null
+++ b/vue/primitives/src/toast/ToastAction.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastActionProps extends PrimitiveProps {
+  /**
+   * Accessible description for screen readers (required).
+   * Describes what happens when the user triggers the action.
+   */
+  altText: string;
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'button', altText } = defineProps<ToastActionProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :aria-label="altText"
+    data-primitives-toast-action
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toast/ToastClose.vue b/vue/primitives/src/toast/ToastClose.vue
new file mode 100644
index 0000000..23caa47
--- /dev/null
+++ b/vue/primitives/src/toast/ToastClose.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastCloseProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+import { useToastContext } from './context';
+
+const { as = 'button' } = defineProps<ToastCloseProps>();
+const { forwardRef } = useForwardExpose();
+const toastCtx = useToastContext();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    data-primitives-toast-close
+    @click="toastCtx.onClose()"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toast/ToastDescription.vue b/vue/primitives/src/toast/ToastDescription.vue
new file mode 100644
index 0000000..52f23e4
--- /dev/null
+++ b/vue/primitives/src/toast/ToastDescription.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastDescriptionProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<ToastDescriptionProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    data-primitives-toast-description
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toast/ToastProvider.vue b/vue/primitives/src/toast/ToastProvider.vue
new file mode 100644
index 0000000..6ee0489
--- /dev/null
+++ b/vue/primitives/src/toast/ToastProvider.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { SwipeDirection } from './context';
+
+export interface ToastProviderProps {
+  /** Accessible label for the toast region. @default 'Notifications' */
+  label?: string;
+  /** Auto-dismiss duration in ms. Use `Infinity` to disable auto-dismiss. @default 5000 */
+  duration?: number;
+  /** Swipe direction to dismiss. @default 'right' */
+  swipeDirection?: SwipeDirection;
+  /** Minimum swipe distance before a dismiss gesture is recognised. @default 50 */
+  swipeThreshold?: number;
+}
+</script>
+
+<script setup lang="ts">
+import { ref, shallowRef, toRef } from 'vue';
+
+import { provideToastProviderContext } from './context';
+
+const {
+  label = 'Notifications',
+  duration = 5000,
+  swipeDirection = 'right',
+  swipeThreshold = 50,
+} = defineProps<ToastProviderProps>();
+
+const labelRef = toRef(() => label);
+const durationRef = toRef(() => duration);
+const swipeDirectionRef = toRef(() => swipeDirection);
+const swipeThresholdRef = toRef(() => swipeThreshold);
+
+const toastCount = ref(0);
+const viewportRef = shallowRef<HTMLElement | undefined>(undefined);
+const isFocusedToastEscapeKeyDownRef = ref(false);
+const isClosePausedRef = ref(false);
+
+provideToastProviderContext({
+  label: labelRef,
+  duration: durationRef,
+  swipeDirection: swipeDirectionRef,
+  swipeThreshold: swipeThresholdRef,
+  toastCount,
+  viewportRef,
+  onViewportChange: (el) => { viewportRef.value = el; },
+  onToastAdd: () => { toastCount.value++; },
+  onToastRemove: () => { toastCount.value--; },
+  isFocusedToastEscapeKeyDownRef,
+  isClosePausedRef,
+});
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/vue/primitives/src/toast/ToastRoot.vue b/vue/primitives/src/toast/ToastRoot.vue
new file mode 100644
index 0000000..4f7fe00
--- /dev/null
+++ b/vue/primitives/src/toast/ToastRoot.vue
@@ -0,0 +1,140 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastRootProps extends PrimitiveProps {
+  /** Override the provider's auto-dismiss duration. Use `Infinity` to disable. */
+  duration?: number;
+  /** Toast type — controls the `aria-live` politeness. @default 'background' */
+  type?: 'foreground' | 'background';
+}
+
+export interface ToastRootEmits {
+  'update:open': [open: boolean];
+  escapeKeyDown: [event: KeyboardEvent];
+  pause: [];
+  resume: [];
+}
+</script>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, toRef, watch } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { useId } from '../config-provider';
+import { Presence } from '../presence';
+import { Primitive } from '../primitive';
+import { provideToastContext, useToastProviderContext } from './context';
+import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './utils';
+
+const {
+  as = 'li',
+  duration,
+  type = 'background',
+} = defineProps<ToastRootProps>();
+
+const emit = defineEmits<ToastRootEmits>();
+
+const { forwardRef } = useForwardExpose();
+const providerCtx = useToastProviderContext();
+const toastId = useId(undefined, 'toast');
+const durationRef = toRef(() => duration);
+
+const open = defineModel<boolean>('open', {
+  default: true,
+});
+
+let closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+function clearTimer() {
+  if (closeTimer) {
+    clearTimeout(closeTimer);
+    closeTimer = null;
+  }
+}
+
+function startTimer(ms: number) {
+  clearTimer();
+  if (ms === Infinity || ms <= 0 || !Number.isFinite(ms)) return;
+  closeTimer = setTimeout(() => {
+    open.value = false;
+    emit('update:open', false);
+  }, ms);
+}
+
+function handleClose() {
+  open.value = false;
+  emit('update:open', false);
+}
+
+function pauseTimer() {
+  clearTimer();
+  providerCtx.isClosePausedRef.value = true;
+  emit('pause');
+}
+
+function resumeTimer() {
+  providerCtx.isClosePausedRef.value = false;
+  const ms = durationRef.value ?? providerCtx.duration.value;
+  startTimer(ms);
+  emit('resume');
+}
+
+// Restart timer when reactive duration changes (and we are not paused).
+watch(
+  [durationRef, () => providerCtx.duration.value],
+  () => {
+    if (!open.value) return;
+    if (providerCtx.isClosePausedRef.value) return;
+    const ms = durationRef.value ?? providerCtx.duration.value;
+    startTimer(ms);
+  },
+);
+
+onMounted(() => {
+  providerCtx.onToastAdd();
+  const ms = durationRef.value ?? providerCtx.duration.value;
+  startTimer(ms);
+
+  const viewport = providerCtx.viewportRef.value;
+  if (viewport) {
+    viewport.addEventListener(VIEWPORT_PAUSE, pauseTimer);
+    viewport.addEventListener(VIEWPORT_RESUME, resumeTimer);
+  }
+});
+
+onBeforeUnmount(() => {
+  providerCtx.onToastRemove();
+  clearTimer();
+
+  const viewport = providerCtx.viewportRef.value;
+  if (viewport) {
+    viewport.removeEventListener(VIEWPORT_PAUSE, pauseTimer);
+    viewport.removeEventListener(VIEWPORT_RESUME, resumeTimer);
+  }
+});
+
+provideToastContext({
+  onClose: handleClose,
+  duration: durationRef,
+  open,
+  toastId,
+});
+</script>
+
+<template>
+  <Presence :present="open">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="status"
+      :aria-live="type === 'foreground' ? 'assertive' : 'polite'"
+      :aria-atomic="true"
+      :data-state="open ? 'open' : 'closed'"
+      :data-type="type"
+      tabindex="-1"
+      @keydown.escape="emit('escapeKeyDown', $event)"
+    >
+      <slot />
+    </Primitive>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/toast/ToastTitle.vue b/vue/primitives/src/toast/ToastTitle.vue
new file mode 100644
index 0000000..e78021e
--- /dev/null
+++ b/vue/primitives/src/toast/ToastTitle.vue
@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastTitleProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '@robonen/vue';
+
+import { Primitive } from '../primitive';
+
+const { as = 'div' } = defineProps<ToastTitleProps>();
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    data-primitives-toast-title
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toast/ToastViewport.vue b/vue/primitives/src/toast/ToastViewport.vue
new file mode 100644
index 0000000..810110c
--- /dev/null
+++ b/vue/primitives/src/toast/ToastViewport.vue
@@ -0,0 +1,84 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToastViewportProps extends PrimitiveProps {
+  /** Accessible label for the toast region. Overrides the provider label. */
+  label?: string;
+  /** Keyboard shortcut to focus the viewport. @default ['F8'] */
+  hotkey?: string[];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, watchPostEffect } from 'vue';
+
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useToastProviderContext } from './context';
+import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './utils';
+
+const { as = 'ol', hotkey = ['F8'], label } = defineProps<ToastViewportProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+const providerCtx = useToastProviderContext();
+
+watchPostEffect(() => providerCtx.onViewportChange(currentElement.value));
+
+const viewportLabel = computed(() => label ?? providerCtx.label.value);
+
+function handlePointerEnter() {
+  currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_PAUSE, { bubbles: true }));
+}
+
+function handlePointerLeave() {
+  currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_RESUME, { bubbles: true }));
+}
+
+function handleFocusIn() {
+  currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_PAUSE, { bubbles: true }));
+}
+
+function handleFocusOut(event: FocusEvent) {
+  if (currentElement.value?.contains(event.relatedTarget as Node)) return;
+  currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_RESUME, { bubbles: true }));
+}
+
+function handleGlobalKeyDown(event: KeyboardEvent) {
+  if (!hotkey || hotkey.length === 0) return;
+  const isHotkey = hotkey.every((key) => {
+    if (key === event.key) return true;
+    if (key === 'altKey') return event.altKey;
+    if (key === 'ctrlKey') return event.ctrlKey;
+    if (key === 'shiftKey') return event.shiftKey;
+    if (key === 'metaKey') return event.metaKey;
+    return false;
+  });
+  if (isHotkey) currentElement.value?.focus();
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleGlobalKeyDown);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleGlobalKeyDown);
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="region"
+    :aria-label="viewportLabel"
+    tabindex="-1"
+    style="outline: none"
+    data-primitives-toast-viewport
+    @pointerenter="handlePointerEnter"
+    @pointerleave="handlePointerLeave"
+    @focusin="handleFocusIn"
+    @focusout="handleFocusOut"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toast/__test__/Toast.regression.test.ts b/vue/primitives/src/toast/__test__/Toast.regression.test.ts
new file mode 100644
index 0000000..05833d4
--- /dev/null
+++ b/vue/primitives/src/toast/__test__/Toast.regression.test.ts
@@ -0,0 +1,103 @@
+// Regression tests for confirmed bugs from Phase 1 audit:
+//   1. ToastRoot tabindex must be -1 (programmatic only), not 0 (conflicts with roving focus).
+//   2. ToastViewport hotkey must validate against empty array (otherwise vacuous-truth
+//      focuses the viewport on every keystroke).
+//   3. ToastRoot must restart the auto-dismiss timer when `duration` changes reactively.
+
+import { mount } from '@vue/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { ToastProvider, ToastRoot, ToastViewport } from '../index';
+
+function createHarness(props: {
+  duration?: number;
+  hotkey?: string[];
+} = {}) {
+  return defineComponent({
+    components: { ToastProvider, ToastViewport, ToastRoot },
+    setup() {
+      const duration = ref(props.duration);
+      return { duration, hotkey: props.hotkey };
+    },
+    render() {
+      return h(ToastProvider, {}, {
+        default: () => [
+          h(ToastViewport, { hotkey: this.hotkey ?? ['F8'] }),
+          h(ToastRoot, { duration: this.duration }, { default: () => 'Toast body' }),
+        ],
+      });
+    },
+  });
+}
+
+describe('toast — bug regression', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('ToastRoot has tabindex="-1" (programmatic focus only)', () => {
+    const wrapper = mount(createHarness({ duration: Infinity }), { attachTo: document.body });
+    const toast = wrapper.find('[role="status"]');
+    expect(toast.exists()).toBe(true);
+    expect(toast.attributes('tabindex')).toBe('-1');
+    wrapper.unmount();
+  });
+
+  it('ToastViewport ignores empty hotkey array (does not focus on every keypress)', async () => {
+    const wrapper = mount(createHarness({ duration: Infinity, hotkey: [] }), { attachTo: document.body });
+    const viewport = wrapper.find('[role="region"]').element as HTMLElement;
+    const focusSpy = vi.spyOn(viewport, 'focus');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }));
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'F8' }));
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+
+    expect(focusSpy).not.toHaveBeenCalled();
+    wrapper.unmount();
+  });
+
+  it('ToastViewport responds to F8 when hotkey=["F8"]', () => {
+    const wrapper = mount(createHarness({ duration: Infinity }), { attachTo: document.body });
+    const viewport = wrapper.find('[role="region"]').element as HTMLElement;
+    const focusSpy = vi.spyOn(viewport, 'focus');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'F8' }));
+
+    expect(focusSpy).toHaveBeenCalledOnce();
+    wrapper.unmount();
+  });
+
+  it('ToastRoot restarts auto-dismiss timer when duration prop changes reactively', async () => {
+    const Harness = createHarness({ duration: 1000 });
+    const wrapper = mount(Harness, { attachTo: document.body });
+
+    // Bump duration to 5000ms BEFORE original 1000ms elapses.
+    vi.advanceTimersByTime(500);
+    wrapper.vm.duration = 5000;
+    await nextTick();
+
+    // Original 1000ms total would have fired by 1100ms — but the watcher restarted the
+    // timer with the new duration. Toast must still be open.
+    vi.advanceTimersByTime(600); // 1100ms elapsed total
+    await nextTick();
+    expect(wrapper.find('[role="status"]').exists()).toBe(true);
+
+    // Now advance the full new duration (5000ms) — toast should close.
+    vi.advanceTimersByTime(5000);
+    await nextTick();
+    await nextTick();
+    expect(wrapper.find('[role="status"]').exists()).toBe(false);
+    wrapper.unmount();
+  });
+
+  it('ToastRoot timer does not fire when duration=Infinity', () => {
+    const wrapper = mount(createHarness({ duration: Infinity }), { attachTo: document.body });
+    vi.advanceTimersByTime(60_000);
+    expect(wrapper.find('[role="status"]').exists()).toBe(true);
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/toast/context.ts b/vue/primitives/src/toast/context.ts
new file mode 100644
index 0000000..296851b
--- /dev/null
+++ b/vue/primitives/src/toast/context.ts
@@ -0,0 +1,43 @@
+import type { Ref, ShallowRef } from 'vue';
+
+import { useContextFactory } from '@robonen/vue';
+
+export type SwipeDirection = 'up' | 'down' | 'left' | 'right';
+
+export interface ToastProviderContext {
+  label: Ref<string>;
+  duration: Ref<number>;
+  swipeDirection: Ref<SwipeDirection>;
+  swipeThreshold: Ref<number>;
+  toastCount: Ref<number>;
+  viewportRef: ShallowRef<HTMLElement | undefined>;
+  onViewportChange: (el: HTMLElement | undefined) => void;
+  onToastAdd: () => void;
+  onToastRemove: () => void;
+  isFocusedToastEscapeKeyDownRef: Ref<boolean>;
+  isClosePausedRef: Ref<boolean>;
+}
+
+export interface ToastContext {
+  onClose: () => void;
+  duration: Ref<number | undefined>;
+  open: Ref<boolean>;
+  toastId: Ref<string>;
+}
+
+const {
+  inject: useToastProviderContext,
+  provide: provideToastProviderContext,
+} = useContextFactory<ToastProviderContext>('ToastProviderContext');
+
+const {
+  inject: useToastContext,
+  provide: provideToastContext,
+} = useContextFactory<ToastContext>('ToastContext');
+
+export {
+  useToastProviderContext,
+  provideToastProviderContext,
+  useToastContext,
+  provideToastContext,
+};
diff --git a/vue/primitives/src/toast/index.ts b/vue/primitives/src/toast/index.ts
new file mode 100644
index 0000000..90e5511
--- /dev/null
+++ b/vue/primitives/src/toast/index.ts
@@ -0,0 +1,21 @@
+export { default as ToastProvider } from './ToastProvider.vue';
+export { default as ToastRoot } from './ToastRoot.vue';
+export { default as ToastTitle } from './ToastTitle.vue';
+export { default as ToastDescription } from './ToastDescription.vue';
+export { default as ToastAction } from './ToastAction.vue';
+export { default as ToastClose } from './ToastClose.vue';
+export { default as ToastViewport } from './ToastViewport.vue';
+
+export {
+  useToastProviderContext,
+  useToastContext,
+} from './context';
+
+export type { SwipeDirection, ToastProviderContext, ToastContext } from './context';
+export type { ToastProviderProps } from './ToastProvider.vue';
+export type { ToastRootProps, ToastRootEmits } from './ToastRoot.vue';
+export type { ToastTitleProps } from './ToastTitle.vue';
+export type { ToastDescriptionProps } from './ToastDescription.vue';
+export type { ToastActionProps } from './ToastAction.vue';
+export type { ToastCloseProps } from './ToastClose.vue';
+export type { ToastViewportProps } from './ToastViewport.vue';
diff --git a/vue/primitives/src/toast/utils.ts b/vue/primitives/src/toast/utils.ts
new file mode 100644
index 0000000..54b8da5
--- /dev/null
+++ b/vue/primitives/src/toast/utils.ts
@@ -0,0 +1,2 @@
+export const VIEWPORT_PAUSE = 'toast.viewportPause';
+export const VIEWPORT_RESUME = 'toast.viewportResume';
diff --git a/vue/primitives/src/toggle-group/ToggleGroupItem.vue b/vue/primitives/src/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 0000000..adaa293
--- /dev/null
+++ b/vue/primitives/src/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,66 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface ToggleGroupItemProps extends PrimitiveProps {
+  value: string;
+  disabled?: boolean;
+
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { useToggleGroupContext } from './context';
+
+const { value, disabled = false, as = 'button' } = defineProps<ToggleGroupItemProps>();
+
+const ctx = useToggleGroupContext();
+const { CollectionItem } = useCollectionInjector();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const isDisabled = computed(() => ctx.disabled.value || disabled);
+const isPressed = computed(() => ctx.isPressed(value));
+
+// Roving focus: only one enabled item is the tabstop (first pressed, else first enabled).
+const isTabStop = computed(() => {
+  if (!ctx.rovingFocus.value || isDisabled.value) return !ctx.rovingFocus.value && !isDisabled.value;
+  const enabled = ctx.items.value.filter(x => !x.hasAttribute('data-disabled'));
+  if (enabled.length === 0) return false;
+  const firstPressed = enabled.find(n => n.getAttribute('aria-pressed') === 'true' || n.getAttribute('aria-checked') === 'true');
+  const target = firstPressed ?? enabled[0];
+  return currentElement.value === target;
+});
+
+function onClick(): void {
+  if (isDisabled.value) return;
+  ctx.toggle(value);
+}
+function onKeyDown(event: KeyboardEvent): void {
+  if (!currentElement.value) return;
+  ctx.onItemKeyDown(event, currentElement.value);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :as="as"
+      :ref="forwardRef"
+      :type="as === 'button' ? 'button' : undefined"
+      :role="ctx.type.value === 'single' ? 'radio' : undefined"
+      :aria-pressed="ctx.type.value === 'multiple' ? isPressed : undefined"
+      :aria-checked="ctx.type.value === 'single' ? isPressed : undefined"
+      :aria-disabled="isDisabled || undefined"
+      :data-state="isPressed ? 'on' : 'off'"
+      :data-disabled="isDisabled ? '' : undefined"
+      :tabindex="isDisabled ? -1 : (ctx.rovingFocus.value ? (isTabStop ? 0 : -1) : 0)"
+      :disabled="isDisabled || undefined"
+      @click="onClick"
+      @keydown="onKeyDown"
+    >
+      <slot :pressed="isPressed" />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/toggle-group/ToggleGroupRoot.vue b/vue/primitives/src/toggle-group/ToggleGroupRoot.vue
new file mode 100644
index 0000000..d08587a
--- /dev/null
+++ b/vue/primitives/src/toggle-group/ToggleGroupRoot.vue
@@ -0,0 +1,149 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { RovingDirection } from '../utils/roving-focus';
+import type { ToggleGroupType } from './context';
+
+export interface ToggleGroupRootProps extends PrimitiveProps {
+  type?: ToggleGroupType;
+  modelValue?: string | string[];
+  defaultValue?: string | string[];
+  disabled?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+  dir?: RovingDirection;
+  loop?: boolean;
+  rovingFocus?: boolean;
+}
+
+export interface ToggleGroupRootEmits {
+  'update:modelValue': [value: string | string[] | undefined];
+  valueChange: [value: string | string[]];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { useCollectionProvider } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideToggleGroupContext } from './context';
+
+const {
+  type = 'single',
+  disabled = false,
+  orientation = 'horizontal',
+  dir = 'ltr',
+  loop = true,
+  rovingFocus = true,
+  modelValue,
+  defaultValue,
+  as = 'div',
+} = defineProps<ToggleGroupRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const emit = defineEmits<ToggleGroupRootEmits>();
+
+function normalize(v: string | string[] | undefined): string[] {
+  if (v === undefined) return [];
+  if (Array.isArray(v)) return v.slice();
+  return [v];
+}
+
+const localValue = ref<string[]>(
+  normalize(modelValue).length > 0 ? normalize(modelValue) : normalize(defaultValue),
+);
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  const n = normalize(v);
+  if (n.length === localValue.value.length && n.every((x, i) => x === localValue.value[i])) return;
+  localValue.value = n;
+});
+
+function emitValue(next: string[]): void {
+  localValue.value = next;
+  if (type === 'single') {
+    const v = next[0];
+    emit('update:modelValue', v);
+    emit('valueChange', v ?? '');
+  }
+  else {
+    emit('update:modelValue', next);
+    emit('valueChange', next);
+  }
+}
+
+function toggle(v: string): void {
+  if (disabled) return;
+  if (type === 'single') {
+    if (localValue.value[0] === v) emitValue([]);
+    else emitValue([v]);
+  }
+  else if (localValue.value.includes(v)) {
+    emitValue(localValue.value.filter(x => x !== v));
+  }
+  else {
+    emitValue([...localValue.value, v]);
+  }
+}
+
+function isPressed(v: string): boolean {
+  return localValue.value.includes(v);
+}
+
+// DOM-order items via Collection primitive — survives v-for reorders.
+const { getItems, CollectionSlot } = useCollectionProvider();
+const items = computed(() => getItems(true).map(i => i.ref));
+
+function onItemKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  if (!rovingFocus) return;
+  const action = rovingKeyToAction(event, { orientation, dir, loop });
+  if (!action) return;
+  event.preventDefault();
+  const enabled = items.value.filter(x => !x.hasAttribute('data-disabled'));
+  if (enabled.length === 0) return;
+  const current = enabled.indexOf(el);
+  if (action.absolute === 'home') {
+    enabled[0]!.focus();
+    return;
+  }
+  if (action.absolute === 'end') {
+    enabled[enabled.length - 1]!.focus();
+    return;
+  }
+  const nextIdx = resolveNextIndex(current === -1 ? 0 : current, action.delta, enabled.length, loop);
+  enabled[nextIdx]!.focus();
+}
+
+provideToggleGroupContext({
+  type: toRef(() => type),
+  value: localValue,
+  toggle,
+  isPressed,
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  loop: toRef(() => loop),
+  disabled: toRef(() => disabled),
+  rovingFocus: toRef(() => rovingFocus),
+  items,
+  onItemKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :role="type === 'single' ? 'radiogroup' : 'group'"
+      :aria-orientation="orientation"
+      :aria-disabled="disabled || undefined"
+      :dir="dir"
+      :data-orientation="orientation"
+      :data-disabled="disabled ? '' : undefined"
+    >
+      <slot :value="localValue" />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/toggle-group/__test__/ToggleGroup.test.ts b/vue/primitives/src/toggle-group/__test__/ToggleGroup.test.ts
new file mode 100644
index 0000000..a97f175
--- /dev/null
+++ b/vue/primitives/src/toggle-group/__test__/ToggleGroup.test.ts
@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick, ref } from 'vue';
+import { ToggleGroupItem, ToggleGroupRoot } from '../index';
+
+function mountGroup(opts: Record<string, unknown> = {}) {
+  const model = ref<string | string[] | undefined>(undefined);
+  const Harness = defineComponent({
+    setup: () => () => h(ToggleGroupRoot, {
+      modelValue: model.value,
+      'onUpdate:modelValue': (v: string | string[] | undefined) => { model.value = v; },
+      ...opts,
+    }, {
+      default: () => [
+        h(ToggleGroupItem, { value: 'a', id: 'a' }, { default: () => 'A' }),
+        h(ToggleGroupItem, { value: 'b', id: 'b' }, { default: () => 'B' }),
+        h(ToggleGroupItem, { value: 'c', id: 'c', disabled: true }, { default: () => 'C' }),
+      ],
+    }),
+  });
+  return { wrapper: mount(Harness, { attachTo: document.body }), model };
+}
+
+function press(el: Element, key: string): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('ToggleGroup (single)', () => {
+  it('role="radiogroup" and items role="radio"', () => {
+    const { wrapper } = mountGroup();
+    expect(wrapper.element.getAttribute('role')).toBe('radiogroup');
+    expect(document.querySelectorAll('[role="radio"]')).toHaveLength(3);
+    wrapper.unmount();
+  });
+
+  it('click selects; clicking selected deselects', async () => {
+    const { wrapper, model } = mountGroup();
+    await nextTick();
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    a.click();
+    await nextTick();
+    expect(model.value).toBe('a');
+    expect(a.getAttribute('aria-checked')).toBe('true');
+    a.click();
+    await nextTick();
+    expect(model.value).toBeUndefined();
+    wrapper.unmount();
+  });
+
+  it('selecting another replaces', async () => {
+    const { wrapper, model } = mountGroup({ defaultValue: 'a' });
+    await nextTick();
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    b.click();
+    await nextTick();
+    expect(model.value).toBe('b');
+    wrapper.unmount();
+  });
+
+  it('ArrowRight cycles focus (roving)', async () => {
+    const { wrapper } = mountGroup();
+    await nextTick();
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    a.focus();
+    press(a, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(b);
+    wrapper.unmount();
+  });
+
+  it('disabled item aria-disabled=true, not toggleable', async () => {
+    const { wrapper, model } = mountGroup();
+    await nextTick();
+    const c = document.querySelector<HTMLButtonElement>('#c')!;
+    expect(c.getAttribute('aria-disabled')).toBe('true');
+    c.click();
+    await nextTick();
+    expect(model.value).toBeUndefined();
+    wrapper.unmount();
+  });
+});
+
+describe('ToggleGroup (multiple)', () => {
+  it('role="group" and items with aria-pressed', async () => {
+    const { wrapper, model } = mountGroup({ type: 'multiple' });
+    await nextTick();
+    expect(wrapper.element.getAttribute('role')).toBe('group');
+    const a = document.querySelector<HTMLButtonElement>('#a')!;
+    const b = document.querySelector<HTMLButtonElement>('#b')!;
+    a.click();
+    await nextTick();
+    expect(a.getAttribute('aria-pressed')).toBe('true');
+    expect(model.value).toEqual(['a']);
+    b.click();
+    await nextTick();
+    expect(model.value).toEqual(['a', 'b']);
+    // Toggle off a:
+    a.click();
+    await nextTick();
+    expect(model.value).toEqual(['b']);
+    wrapper.unmount();
+  });
+});
diff --git a/vue/primitives/src/toggle-group/context.ts b/vue/primitives/src/toggle-group/context.ts
new file mode 100644
index 0000000..4b78769
--- /dev/null
+++ b/vue/primitives/src/toggle-group/context.ts
@@ -0,0 +1,25 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { RovingDirection, RovingOrientation } from '../utils/roving-focus';
+import { useContextFactory } from '@robonen/vue';
+
+export type ToggleGroupType = 'single' | 'multiple';
+
+export interface ToggleGroupContext {
+  type: Ref<ToggleGroupType>;
+  value: Ref<string[]>;
+  toggle: (v: string) => void;
+  isPressed: (v: string) => boolean;
+  orientation: Ref<RovingOrientation>;
+  direction: Ref<RovingDirection>;
+  loop: Ref<boolean>;
+  disabled: Ref<boolean>;
+  rovingFocus: Ref<boolean>;
+  /** DOM-ordered items, sourced from the internal Collection. */
+  items: ComputedRef<HTMLElement[]>;
+  onItemKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+const ctx = useContextFactory<ToggleGroupContext>('ToggleGroupContext');
+
+export const provideToggleGroupContext = ctx.provide;
+export const useToggleGroupContext = ctx.inject;
diff --git a/vue/primitives/src/toggle-group/index.ts b/vue/primitives/src/toggle-group/index.ts
new file mode 100644
index 0000000..b553bdc
--- /dev/null
+++ b/vue/primitives/src/toggle-group/index.ts
@@ -0,0 +1,5 @@
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue';
+export { default as ToggleGroupRoot } from './ToggleGroupRoot.vue';
+export type { ToggleGroupType } from './context';
+export type { ToggleGroupItemProps } from './ToggleGroupItem.vue';
+export type { ToggleGroupRootEmits, ToggleGroupRootProps } from './ToggleGroupRoot.vue';
diff --git a/vue/primitives/src/toggle/Toggle.vue b/vue/primitives/src/toggle/Toggle.vue
new file mode 100644
index 0000000..a148a61
--- /dev/null
+++ b/vue/primitives/src/toggle/Toggle.vue
@@ -0,0 +1,67 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface ToggleProps extends PrimitiveProps {
+
+  /** Uncontrolled initial pressed state. */
+  defaultPressed?: boolean;
+  /** Disables the toggle. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { ref } from 'vue';
+import { useForwardExpose } from '@robonen/vue';
+
+const { defaultPressed = false, disabled = false, as = 'button' } = defineProps<ToggleProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const localPressed = ref<boolean>(defaultPressed);
+
+const pressed = defineModel<boolean>('pressed', {
+  default: undefined,
+  get: v => v ?? localPressed.value,
+  set: (v) => {
+    localPressed.value = v;
+    return v;
+  },
+});
+
+function toggle() {
+  if (disabled) return;
+  pressed.value = !pressed.value;
+}
+
+function onClick() {
+  toggle();
+}
+
+function onKeydown(event: KeyboardEvent) {
+  // <button> handles Space/Enter natively; synthesize only for non-button hosts.
+  if (as === 'button') return;
+  if (event.key !== ' ' && event.key !== 'Enter') return;
+  event.preventDefault();
+  toggle();
+}
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :type="as === 'button' ? 'button' : undefined"
+    :tabindex="as === 'button' ? undefined : (disabled ? -1 : 0)"
+    :aria-pressed="pressed"
+    :aria-disabled="as === 'button' ? undefined : (disabled ? true : undefined)"
+    :data-state="pressed ? 'on' : 'off'"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="as === 'button' ? disabled : undefined"
+    @click="onClick"
+    @keydown="onKeydown"
+  >
+    <slot :pressed="pressed" />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toggle/__test__/Toggle.test.ts b/vue/primitives/src/toggle/__test__/Toggle.test.ts
new file mode 100644
index 0000000..e061ade
--- /dev/null
+++ b/vue/primitives/src/toggle/__test__/Toggle.test.ts
@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { Toggle } from '../index';
+
+describe('Toggle', () => {
+  it('defaults to unpressed and toggles on click', async () => {
+    const wrapper = mount(Toggle);
+    expect(wrapper.attributes('aria-pressed')).toBe('false');
+    expect(wrapper.attributes('data-state')).toBe('off');
+    await wrapper.trigger('click');
+    expect(wrapper.attributes('aria-pressed')).toBe('true');
+    expect(wrapper.attributes('data-state')).toBe('on');
+  });
+
+  it('respects defaultPressed', () => {
+    const wrapper = mount(Toggle, { props: { defaultPressed: true } });
+    expect(wrapper.attributes('aria-pressed')).toBe('true');
+  });
+
+  it('syncs with v-model', async () => {
+    const pressed = ref(false);
+    const wrapper = mount(Toggle, {
+      props: { pressed: pressed.value, 'onUpdate:pressed': (v: boolean) => { pressed.value = v; } },
+    });
+    await wrapper.trigger('click');
+    expect(pressed.value).toBe(true);
+  });
+
+  it('does not toggle when disabled', async () => {
+    const wrapper = mount(Toggle, { props: { disabled: true } });
+    await wrapper.trigger('click');
+    expect(wrapper.attributes('aria-pressed')).toBe('false');
+    expect(wrapper.attributes('data-disabled')).toBe('');
+  });
+
+  it('sets type="button" on button element', () => {
+    const wrapper = mount(Toggle);
+    expect(wrapper.attributes('type')).toBe('button');
+  });
+
+  describe('keyboard activation', () => {
+    it('toggles on Space when as is not a button', async () => {
+      const wrapper = mount(Toggle, { props: { as: 'div' } });
+      await wrapper.trigger('keydown', { key: ' ' });
+      expect(wrapper.attributes('aria-pressed')).toBe('true');
+      await wrapper.trigger('keydown', { key: ' ' });
+      expect(wrapper.attributes('aria-pressed')).toBe('false');
+    });
+
+    it('toggles on Enter when as is not a button', async () => {
+      const wrapper = mount(Toggle, { props: { as: 'div' } });
+      await wrapper.trigger('keydown', { key: 'Enter' });
+      expect(wrapper.attributes('aria-pressed')).toBe('true');
+    });
+
+    it('ignores other keys', async () => {
+      const wrapper = mount(Toggle, { props: { as: 'div' } });
+      await wrapper.trigger('keydown', { key: 'a' });
+      await wrapper.trigger('keydown', { key: 'Tab' });
+      expect(wrapper.attributes('aria-pressed')).toBe('false');
+    });
+
+    it('does not synthesize keyboard toggle on native button', async () => {
+      const wrapper = mount(Toggle);
+      await wrapper.trigger('keydown', { key: ' ' });
+      expect(wrapper.attributes('aria-pressed')).toBe('false');
+    });
+
+    it('does not toggle on keyboard when disabled (as=div)', async () => {
+      const wrapper = mount(Toggle, { props: { as: 'div', disabled: true } });
+      await wrapper.trigger('keydown', { key: ' ' });
+      await wrapper.trigger('keydown', { key: 'Enter' });
+      expect(wrapper.attributes('aria-pressed')).toBe('false');
+    });
+  });
+
+  describe('non-button host (as="div")', () => {
+    it('sets aria-disabled when disabled', () => {
+      const wrapper = mount(Toggle, { props: { as: 'div', disabled: true } });
+      expect(wrapper.attributes('aria-disabled')).toBe('true');
+    });
+
+    it('does not set aria-disabled when enabled', () => {
+      const wrapper = mount(Toggle, { props: { as: 'div' } });
+      expect(wrapper.attributes('aria-disabled')).toBeUndefined();
+    });
+
+    it('has tabindex=0 when enabled, -1 when disabled', () => {
+      const enabled = mount(Toggle, { props: { as: 'div' } });
+      expect(enabled.attributes('tabindex')).toBe('0');
+      const disabled = mount(Toggle, { props: { as: 'div', disabled: true } });
+      expect(disabled.attributes('tabindex')).toBe('-1');
+    });
+
+    it('button host has no synthesized tabindex', () => {
+      const wrapper = mount(Toggle);
+      expect(wrapper.attributes('tabindex')).toBeUndefined();
+    });
+  });
+});
diff --git a/vue/primitives/src/toggle/index.ts b/vue/primitives/src/toggle/index.ts
new file mode 100644
index 0000000..112bc61
--- /dev/null
+++ b/vue/primitives/src/toggle/index.ts
@@ -0,0 +1,2 @@
+export { default as Toggle } from './Toggle.vue';
+export type { ToggleProps } from './Toggle.vue';
diff --git a/vue/primitives/src/toolbar/ToolbarButton.vue b/vue/primitives/src/toolbar/ToolbarButton.vue
new file mode 100644
index 0000000..9f6f5eb
--- /dev/null
+++ b/vue/primitives/src/toolbar/ToolbarButton.vue
@@ -0,0 +1,48 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface ToolbarButtonProps extends PrimitiveProps {
+
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { computed } from 'vue';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { useToolbarContext } from './context';
+
+const { as = 'button', disabled = false } = defineProps<ToolbarButtonProps>();
+const ctx = useToolbarContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+const index = computed(() => (currentElement.value ? ctx.items.value.indexOf(currentElement.value) : -1));
+const isActive = computed(() => index.value === ctx.activeIndex.value);
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (!currentElement.value) return;
+  ctx.onItemKeyDown(event, currentElement.value);
+}
+function onFocus(): void {
+  if (index.value !== -1) ctx.activeIndex.value = index.value;
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :as="as"
+      :ref="forwardRef"
+      :type="as === 'button' ? 'button' : undefined"
+      :tabindex="disabled ? -1 : (isActive ? 0 : -1)"
+      :disabled="disabled || undefined"
+      :data-disabled="disabled ? '' : undefined"
+      @keydown="onKeyDown"
+      @focus="onFocus"
+    >
+      <slot />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/toolbar/ToolbarRoot.vue b/vue/primitives/src/toolbar/ToolbarRoot.vue
new file mode 100644
index 0000000..984debf
--- /dev/null
+++ b/vue/primitives/src/toolbar/ToolbarRoot.vue
@@ -0,0 +1,75 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+import type { RovingDirection } from '../utils/roving-focus';
+
+export interface ToolbarRootProps extends PrimitiveProps {
+  orientation?: 'horizontal' | 'vertical';
+  dir?: RovingDirection;
+  loop?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { useCollectionProvider } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideToolbarContext } from './context';
+
+const { orientation = 'horizontal', dir = 'ltr', loop = true, as = 'div' } = defineProps<ToolbarRootProps>();
+
+const { forwardRef } = useForwardExpose();
+
+// DOM-order items via Collection primitive. Survives `v-for` reorders and
+// teleport/portal children, unlike a mount-order array.
+const { getItems, CollectionSlot } = useCollectionProvider();
+const items = computed(() => getItems(true).map(i => i.ref));
+
+const activeIndex = ref(0);
+
+function focusIndex(i: number): void {
+  const el = items.value[i];
+  if (el) {
+    activeIndex.value = i;
+    el.focus();
+  }
+}
+
+function onItemKeyDown(event: KeyboardEvent, el: HTMLElement): void {
+  const action = rovingKeyToAction(event, { orientation, dir, loop });
+  if (!action) return;
+  event.preventDefault();
+  const list = items.value;
+  const idx = list.indexOf(el);
+  if (action.absolute === 'home') return focusIndex(0);
+  if (action.absolute === 'end') return focusIndex(list.length - 1);
+  focusIndex(resolveNextIndex(idx, action.delta, list.length, loop));
+}
+
+provideToolbarContext({
+  // Identity passthroughs via `toRef` — reactive without `computed`'s effect/cache.
+  orientation: toRef(() => orientation),
+  direction: toRef(() => dir),
+  loop: toRef(() => loop),
+  items,
+  activeIndex,
+  focusIndex,
+  onItemKeyDown,
+});
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="toolbar"
+      :aria-orientation="orientation"
+      :dir="dir"
+      :data-orientation="orientation"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/toolbar/ToolbarSeparator.vue b/vue/primitives/src/toolbar/ToolbarSeparator.vue
new file mode 100644
index 0000000..15c3b28
--- /dev/null
+++ b/vue/primitives/src/toolbar/ToolbarSeparator.vue
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+export interface ToolbarSeparatorProps extends PrimitiveProps {
+  orientation?: 'horizontal' | 'vertical';
+
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+import { useToolbarContext } from './context';
+
+const { as = 'span', orientation } = defineProps<ToolbarSeparatorProps>();
+const { forwardRef } = useForwardExpose();
+const ctx = useToolbarContext();
+// If no orientation passed, inherit from toolbar — but invert (horizontal toolbar needs vertical separator).
+const effective = orientation ?? (ctx.orientation.value === 'horizontal' ? 'vertical' : 'horizontal');
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    role="separator"
+    :aria-orientation="effective"
+    :data-orientation="effective"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/toolbar/__test__/Toolbar.test.ts b/vue/primitives/src/toolbar/__test__/Toolbar.test.ts
new file mode 100644
index 0000000..fe28d42
--- /dev/null
+++ b/vue/primitives/src/toolbar/__test__/Toolbar.test.ts
@@ -0,0 +1,102 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import { ToolbarButton, ToolbarRoot, ToolbarSeparator } from '../index';
+
+function mountToolbar(opts: { orientation?: 'horizontal' | 'vertical'; dir?: 'ltr' | 'rtl'; loop?: boolean } = {}) {
+  const Harness = defineComponent({
+    setup: () => () => h(ToolbarRoot, opts, {
+      default: () => [
+        h(ToolbarButton, { id: 'b1' }, { default: () => 'One' }),
+        h(ToolbarButton, { id: 'b2' }, { default: () => 'Two' }),
+        h(ToolbarSeparator),
+        h(ToolbarButton, { id: 'b3' }, { default: () => 'Three' }),
+      ],
+    }),
+  });
+  return mount(Harness, { attachTo: document.body });
+}
+
+function press(el: Element, key: string): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+describe('Toolbar', () => {
+  it('renders role="toolbar" with aria-orientation', () => {
+    const w = mountToolbar();
+    const root = w.element as HTMLElement;
+    expect(root.getAttribute('role')).toBe('toolbar');
+    expect(root.getAttribute('aria-orientation')).toBe('horizontal');
+    w.unmount();
+  });
+
+  it('first item has tabindex 0, rest -1', async () => {
+    const w = mountToolbar();
+    await nextTick();
+    const btns = document.querySelectorAll<HTMLElement>('button');
+    expect(btns[0]!.tabIndex).toBe(0);
+    expect(btns[1]!.tabIndex).toBe(-1);
+    expect(btns[2]!.tabIndex).toBe(-1);
+    w.unmount();
+  });
+
+  it('ArrowRight moves focus forward; wraps', async () => {
+    const w = mountToolbar();
+    await nextTick();
+    const btns = document.querySelectorAll<HTMLElement>('button');
+    btns[0]!.focus();
+    press(btns[0]!, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[1]);
+    press(btns[1]!, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[2]);
+    press(btns[2]!, 'ArrowRight');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[0]);
+    w.unmount();
+  });
+
+  it('ArrowLeft reverses in RTL', async () => {
+    const w = mountToolbar({ dir: 'rtl' });
+    await nextTick();
+    const btns = document.querySelectorAll<HTMLElement>('button');
+    btns[0]!.focus();
+    press(btns[0]!, 'ArrowLeft');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[1]);
+    w.unmount();
+  });
+
+  it('Home/End jump to first/last', async () => {
+    const w = mountToolbar();
+    await nextTick();
+    const btns = document.querySelectorAll<HTMLElement>('button');
+    btns[0]!.focus();
+    press(btns[0]!, 'End');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[2]);
+    press(btns[2]!, 'Home');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[0]);
+    w.unmount();
+  });
+
+  it('separator has role=separator with inverse orientation', () => {
+    const w = mountToolbar({ orientation: 'horizontal' });
+    const sep = document.querySelector<HTMLElement>('[role="separator"]')!;
+    expect(sep.getAttribute('aria-orientation')).toBe('vertical');
+    w.unmount();
+  });
+
+  it('loop=false clamps at ends', async () => {
+    const w = mountToolbar({ loop: false });
+    await nextTick();
+    const btns = document.querySelectorAll<HTMLElement>('button');
+    btns[0]!.focus();
+    press(btns[0]!, 'ArrowLeft');
+    await nextTick();
+    expect(document.activeElement).toBe(btns[0]);
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/toolbar/context.ts b/vue/primitives/src/toolbar/context.ts
new file mode 100644
index 0000000..56d4af8
--- /dev/null
+++ b/vue/primitives/src/toolbar/context.ts
@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { RovingDirection, RovingOrientation } from '../utils/roving-focus';
+import { useContextFactory } from '@robonen/vue';
+
+export interface ToolbarContext {
+  orientation: Ref<RovingOrientation>;
+  direction: Ref<RovingDirection>;
+  loop: Ref<boolean>;
+  /** DOM-ordered items, sourced from the internal Collection. */
+  items: ComputedRef<HTMLElement[]>;
+  activeIndex: Ref<number>;
+  focusIndex: (i: number) => void;
+  onItemKeyDown: (event: KeyboardEvent, el: HTMLElement) => void;
+}
+
+const ctx = useContextFactory<ToolbarContext>('ToolbarContext');
+
+export const provideToolbarContext = ctx.provide;
+export const useToolbarContext = ctx.inject;
diff --git a/vue/primitives/src/toolbar/index.ts b/vue/primitives/src/toolbar/index.ts
new file mode 100644
index 0000000..2d42e25
--- /dev/null
+++ b/vue/primitives/src/toolbar/index.ts
@@ -0,0 +1,6 @@
+export { default as ToolbarButton } from './ToolbarButton.vue';
+export { default as ToolbarRoot } from './ToolbarRoot.vue';
+export { default as ToolbarSeparator } from './ToolbarSeparator.vue';
+export type { ToolbarButtonProps } from './ToolbarButton.vue';
+export type { ToolbarRootProps } from './ToolbarRoot.vue';
+export type { ToolbarSeparatorProps } from './ToolbarSeparator.vue';
diff --git a/vue/primitives/src/tooltip/TooltipArrow.vue b/vue/primitives/src/tooltip/TooltipArrow.vue
new file mode 100644
index 0000000..9c2bb22
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipArrow.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PopperArrowProps } from '../popper';
+
+export interface TooltipArrowProps extends PopperArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { PopperArrow } from '../popper';
+
+const { width = 10, height = 5 } = defineProps<TooltipArrowProps>();
+</script>
+
+<template>
+  <PopperArrow :width="width" :height="height">
+    <slot />
+  </PopperArrow>
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipContent.vue b/vue/primitives/src/tooltip/TooltipContent.vue
new file mode 100644
index 0000000..5d52e97
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipContent.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { TooltipContentImplEmits, TooltipContentImplProps } from './TooltipContentImpl.vue';
+
+export interface TooltipContentProps extends TooltipContentImplProps {
+  /** Keep mounted for CSS exit animations. */
+  forceMount?: boolean;
+}
+
+export type TooltipContentEmits = TooltipContentImplEmits;
+</script>
+
+<script setup lang="ts">
+import { Presence } from '../presence';
+import TooltipContentImpl from './TooltipContentImpl.vue';
+import { useTooltipContext } from './context';
+
+const { forceMount = false, ...contentProps } = defineProps<TooltipContentProps>();
+const emit = defineEmits<TooltipContentEmits>();
+
+const ctx = useTooltipContext();
+</script>
+
+<template>
+  <Presence :present="ctx.open.value" :force-mount="forceMount">
+    <TooltipContentImpl
+      v-bind="contentProps"
+      @escape-key-down="emit('escapeKeyDown', $event)"
+      @pointer-down-outside="emit('pointerDownOutside', $event)"
+    >
+      <slot />
+    </TooltipContentImpl>
+  </Presence>
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipContentImpl.vue b/vue/primitives/src/tooltip/TooltipContentImpl.vue
new file mode 100644
index 0000000..44d769e
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipContentImpl.vue
@@ -0,0 +1,149 @@
+<script lang="ts">
+import type { PopperContentProps } from '../popper';
+import type { PrimitiveProps } from '../primitive';
+
+export interface TooltipContentImplProps extends PrimitiveProps, Pick<
+  PopperContentProps,
+  | 'side'
+  | 'sideOffset'
+  | 'sideFlip'
+  | 'align'
+  | 'alignOffset'
+  | 'alignFlip'
+  | 'avoidCollisions'
+  | 'collisionBoundary'
+  | 'collisionPadding'
+  | 'arrowPadding'
+  | 'sticky'
+  | 'hideWhenDetached'
+  | 'positionStrategy'
+  | 'updatePositionStrategy'
+> {
+  /**
+   * Accessible label for screen readers when the visible content is not descriptive
+   * enough (e.g. icon-only). Falls back to the rendered `textContent`.
+   */
+  ariaLabel?: string;
+}
+
+export interface TooltipContentImplEmits {
+  /** Escape pressed while this tooltip is topmost. Preventable. */
+  escapeKeyDown: [event: KeyboardEvent];
+  /** Pointer down outside the tooltip. Preventable. */
+  pointerDownOutside: [event: PointerEvent | MouseEvent];
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose } from 'vue';
+import { DismissableLayer } from '../dismissable-layer';
+import { PopperContent } from '../popper';
+import { TOOLTIP_OPEN_EVENT } from './utils';
+import { VisuallyHidden } from '../visually-hidden';
+import { useForwardExpose } from '@robonen/vue';
+import { useTooltipContext } from './context';
+
+const {
+  side = 'top',
+  sideOffset = 0,
+  sideFlip = true,
+  align = 'center',
+  alignOffset = 0,
+  alignFlip = true,
+  avoidCollisions = true,
+  collisionBoundary = [],
+  collisionPadding = 0,
+  arrowPadding = 0,
+  sticky = 'partial',
+  hideWhenDetached = false,
+  positionStrategy,
+  updatePositionStrategy,
+  ariaLabel,
+  as = 'div',
+} = defineProps<TooltipContentImplProps>();
+
+const emit = defineEmits<TooltipContentImplEmits>();
+
+const ctx = useTooltipContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const computedAriaLabel = computed(() => ariaLabel ?? currentElement.value?.textContent ?? '');
+
+function onDocumentTooltipOpen() {
+  ctx.onClose();
+}
+
+function onScrollCapture(event: Event) {
+  const target = event.target as Node | null;
+  if (target && ctx.trigger.value && target.contains(ctx.trigger.value)) ctx.onClose();
+}
+
+onMounted(() => {
+  if (typeof globalThis === 'undefined') return;
+  globalThis.addEventListener('scroll', onScrollCapture, { capture: true });
+  document.addEventListener(TOOLTIP_OPEN_EVENT, onDocumentTooltipOpen);
+});
+
+onScopeDispose(() => {
+  if (typeof globalThis === 'undefined') return;
+  globalThis.removeEventListener('scroll', onScrollCapture, { capture: true });
+  document.removeEventListener(TOOLTIP_OPEN_EVENT, onDocumentTooltipOpen);
+});
+
+function onPointerDownOutside(event: PointerEvent | MouseEvent) {
+  if (
+    ctx.disableClosingTrigger.value
+    && ctx.trigger.value
+    && ctx.trigger.value.contains(event.target as Node)
+  ) {
+    event.preventDefault();
+  }
+  emit('pointerDownOutside', event);
+}
+</script>
+
+<template>
+  <DismissableLayer
+    as="template"
+    :disable-outside-pointer-events="false"
+    @escape-key-down="emit('escapeKeyDown', $event)"
+    @pointer-down-outside="onPointerDownOutside"
+    @focus-outside.prevent
+    @dismiss="ctx.onClose"
+  >
+    <PopperContent
+      :ref="forwardRef"
+      :as="as"
+      :side="side"
+      :side-offset="sideOffset"
+      :side-flip="sideFlip"
+      :align="align"
+      :align-offset="alignOffset"
+      :align-flip="alignFlip"
+      :avoid-collisions="avoidCollisions"
+      :collision-boundary="collisionBoundary"
+      :collision-padding="collisionPadding"
+      :arrow-padding="arrowPadding"
+      :sticky="sticky"
+      :hide-when-detached="hideWhenDetached"
+      :position-strategy="positionStrategy"
+      :update-position-strategy="updatePositionStrategy"
+      :data-state="ctx.stateAttribute.value"
+      :style="{
+        '--tooltip-content-transform-origin': 'var(--popper-transform-origin)',
+        '--tooltip-content-available-width': 'var(--popper-available-width)',
+        '--tooltip-content-available-height': 'var(--popper-available-height)',
+        '--tooltip-trigger-width': 'var(--popper-anchor-width)',
+        '--tooltip-trigger-height': 'var(--popper-anchor-height)',
+      }"
+    >
+      <slot />
+      <VisuallyHidden
+        :id="ctx.contentId.value"
+        role="tooltip"
+      >
+        {{ computedAriaLabel }}
+      </VisuallyHidden>
+    </PopperContent>
+  </DismissableLayer>
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipPortal.vue b/vue/primitives/src/tooltip/TooltipPortal.vue
new file mode 100644
index 0000000..45bfc25
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipPortal.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { TeleportPrimitiveProps } from '../teleport';
+
+export interface TooltipPortalProps extends TeleportPrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { Portal } from '../teleport';
+
+const props = defineProps<TooltipPortalProps>();
+</script>
+
+<template>
+  <Portal v-bind="props">
+    <slot />
+  </Portal>
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipProvider.vue b/vue/primitives/src/tooltip/TooltipProvider.vue
new file mode 100644
index 0000000..a4ebade
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipProvider.vue
@@ -0,0 +1,89 @@
+<script lang="ts">
+export interface TooltipProviderProps {
+  /**
+   * Hover delay before opening, in ms.
+   * @default 700
+   */
+  delayDuration?: number;
+  /**
+   * After a tooltip closes, subsequent tooltips open without delay for this many ms.
+   * @default 300
+   */
+  skipDelayDuration?: number;
+  /**
+   * When `true`, the tooltip closes as soon as the pointer leaves the trigger
+   * (hoverable content disabled). Has a11y consequences.
+   * @default false
+   */
+  disableHoverableContent?: boolean;
+  /**
+   * When `true`, clicking the trigger does not close the tooltip.
+   * @default false
+   */
+  disableClosingTrigger?: boolean;
+  /**
+   * Disable all tooltips inside this provider.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Skip opening on focus that did not come from the keyboard
+   * (matched via `:focus-visible`).
+   * @default false
+   */
+  ignoreNonKeyboardFocus?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { onScopeDispose, ref, toRef } from 'vue';
+import { provideTooltipProviderContext } from './context';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  delayDuration = 700,
+  skipDelayDuration = 300,
+  disableHoverableContent = false,
+  disableClosingTrigger = false,
+  disabled = false,
+  ignoreNonKeyboardFocus = false,
+} = defineProps<TooltipProviderProps>();
+
+const isOpenDelayed = ref(true);
+const isPointerInTransitRef = ref(false);
+
+let skipTimer: ReturnType<typeof setTimeout> | undefined;
+function clearSkipTimer() {
+  if (skipTimer !== undefined) {
+    clearTimeout(skipTimer);
+    skipTimer = undefined;
+  }
+}
+onScopeDispose(clearSkipTimer);
+
+provideTooltipProviderContext({
+  isOpenDelayed,
+  delayDuration: toRef(() => delayDuration),
+  skipDelayDuration: toRef(() => skipDelayDuration),
+  disableHoverableContent: toRef(() => disableHoverableContent),
+  disableClosingTrigger: toRef(() => disableClosingTrigger),
+  disabled: toRef(() => disabled),
+  ignoreNonKeyboardFocus: toRef(() => ignoreNonKeyboardFocus),
+  isPointerInTransitRef,
+  onOpen() {
+    clearSkipTimer();
+    isOpenDelayed.value = false;
+  },
+  onClose() {
+    clearSkipTimer();
+    skipTimer = setTimeout(() => {
+      isOpenDelayed.value = true;
+    }, skipDelayDuration);
+  },
+});
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipRoot.vue b/vue/primitives/src/tooltip/TooltipRoot.vue
new file mode 100644
index 0000000..fa784cb
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipRoot.vue
@@ -0,0 +1,157 @@
+<script lang="ts">
+export interface TooltipRootProps {
+  /** Initial open state in uncontrolled mode. */
+  defaultOpen?: boolean;
+  /**
+   * Per-tooltip override for the provider's `delayDuration`.
+   * @default 700
+   */
+  delayDuration?: number;
+  /**
+   * Per-tooltip override for the provider's `disableHoverableContent`.
+   */
+  disableHoverableContent?: boolean;
+  /**
+   * Per-tooltip override for the provider's `disableClosingTrigger`.
+   */
+  disableClosingTrigger?: boolean;
+  /**
+   * Per-tooltip override for the provider's `disabled`.
+   */
+  disabled?: boolean;
+  /**
+   * Per-tooltip override for the provider's `ignoreNonKeyboardFocus`.
+   */
+  ignoreNonKeyboardFocus?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onScopeDispose, ref } from 'vue';
+import { provideTooltipContext, useTooltipProviderContext } from './context';
+import { PopperRoot } from '../popper';
+import { TOOLTIP_OPEN_EVENT } from './utils';
+import { useId } from '../config-provider';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+  defaultOpen = false,
+  delayDuration: delayDurationProp,
+  disableHoverableContent: disableHoverableContentProp,
+  disableClosingTrigger: disableClosingTriggerProp,
+  disabled: disabledProp,
+  ignoreNonKeyboardFocus: ignoreNonKeyboardFocusProp,
+} = defineProps<TooltipRootProps>();
+
+defineSlots<{
+  default?: (props: { open: boolean }) => unknown;
+}>();
+
+const providerCtx = useTooltipProviderContext();
+
+const local = ref<boolean>(defaultOpen);
+const open = defineModel<boolean>('open', {
+  default: undefined,
+  get: external => external ?? local.value,
+  set: (value) => {
+    local.value = value;
+    return value;
+  },
+});
+
+const delayDuration = computed(() => delayDurationProp ?? providerCtx.delayDuration.value);
+const disableHoverableContent = computed(
+  () => disableHoverableContentProp ?? providerCtx.disableHoverableContent.value,
+);
+const disableClosingTrigger = computed(
+  () => disableClosingTriggerProp ?? providerCtx.disableClosingTrigger.value,
+);
+const disabled = computed(() => disabledProp ?? providerCtx.disabled.value);
+const ignoreNonKeyboardFocus = computed(
+  () => ignoreNonKeyboardFocusProp ?? providerCtx.ignoreNonKeyboardFocus.value,
+);
+
+const wasOpenDelayed = ref(false);
+const trigger = ref<HTMLElement>();
+const contentId = useId(undefined, 'tooltip-content');
+
+const stateAttribute = computed<'closed' | 'delayed-open' | 'instant-open'>(() => {
+  if (!open.value) return 'closed';
+  return wasOpenDelayed.value ? 'delayed-open' : 'instant-open';
+});
+
+let openTimer: ReturnType<typeof setTimeout> | undefined;
+function clearOpenTimer() {
+  if (openTimer !== undefined) {
+    clearTimeout(openTimer);
+    openTimer = undefined;
+  }
+}
+onScopeDispose(clearOpenTimer);
+
+function dispatchOpenEvent() {
+  if (typeof document === 'undefined') return;
+  document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN_EVENT));
+}
+
+function handleOpen() {
+  clearOpenTimer();
+  wasOpenDelayed.value = false;
+  if (!open.value) {
+    open.value = true;
+    providerCtx.onOpen();
+    dispatchOpenEvent();
+  }
+}
+
+function handleClose() {
+  clearOpenTimer();
+  if (open.value) {
+    open.value = false;
+    providerCtx.onClose();
+  }
+}
+
+function handleDelayedOpen() {
+  clearOpenTimer();
+  openTimer = setTimeout(() => {
+    wasOpenDelayed.value = true;
+    if (!open.value) {
+      open.value = true;
+      providerCtx.onOpen();
+      dispatchOpenEvent();
+    }
+  }, delayDuration.value);
+}
+
+provideTooltipContext({
+  contentId,
+  open,
+  stateAttribute,
+  trigger,
+  disableHoverableContent,
+  disableClosingTrigger,
+  disabled,
+  ignoreNonKeyboardFocus,
+  onTriggerChange(el) {
+    trigger.value = el;
+  },
+  onTriggerEnter() {
+    if (providerCtx.isOpenDelayed.value) handleDelayedOpen();
+    else handleOpen();
+  },
+  onTriggerLeave() {
+    if (disableHoverableContent.value) handleClose();
+    else clearOpenTimer();
+  },
+  onOpen: handleOpen,
+  onClose: handleClose,
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot :open="open" />
+  </PopperRoot>
+</template>
diff --git a/vue/primitives/src/tooltip/TooltipTrigger.vue b/vue/primitives/src/tooltip/TooltipTrigger.vue
new file mode 100644
index 0000000..6326d66
--- /dev/null
+++ b/vue/primitives/src/tooltip/TooltipTrigger.vue
@@ -0,0 +1,95 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface TooltipTriggerProps extends PrimitiveProps {}
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useTooltipContext, useTooltipProviderContext } from './context';
+import { PopperAnchor } from '../popper';
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'button' } = defineProps<TooltipTriggerProps>();
+
+const ctx = useTooltipContext();
+const providerCtx = useTooltipProviderContext();
+const { forwardRef, currentElement } = useForwardExpose();
+
+const isPointerDown = ref(false);
+const hasPointerMoveOpened = ref(false);
+
+onMounted(() => {
+  ctx.onTriggerChange(currentElement.value);
+});
+
+function onPointerMove(event: PointerEvent) {
+  if (ctx.disabled.value) return;
+  if (event.pointerType === 'touch') return;
+  if (hasPointerMoveOpened.value || providerCtx.isPointerInTransitRef.value) return;
+  ctx.onTriggerEnter();
+  hasPointerMoveOpened.value = true;
+}
+
+function onPointerLeave() {
+  if (ctx.disabled.value) return;
+  ctx.onTriggerLeave();
+  hasPointerMoveOpened.value = false;
+}
+
+function onPointerUp() {
+  // Defer reset by one tick so `focus` handlers can see the latest `isPointerDown`.
+  setTimeout(() => {
+    isPointerDown.value = false;
+  }, 1);
+}
+
+function onPointerDown() {
+  if (ctx.disabled.value) return;
+  if (ctx.open.value && !ctx.disableClosingTrigger.value) ctx.onClose();
+  isPointerDown.value = true;
+  document.addEventListener('pointerup', onPointerUp, { once: true });
+}
+
+function onFocus(event: FocusEvent) {
+  if (ctx.disabled.value) return;
+  if (isPointerDown.value) return;
+  if (
+    ctx.ignoreNonKeyboardFocus.value
+    && !(event.target as HTMLElement | null)?.matches?.(':focus-visible')
+  ) return;
+  ctx.onOpen();
+}
+
+function onBlur() {
+  if (ctx.disabled.value) return;
+  ctx.onClose();
+}
+
+function onClick() {
+  if (ctx.disabled.value) return;
+  if (!ctx.disableClosingTrigger.value) ctx.onClose();
+}
+</script>
+
+<template>
+  <PopperAnchor as="template">
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      :type="as === 'button' ? 'button' : undefined"
+      :aria-describedby="ctx.open.value ? ctx.contentId.value : undefined"
+      :data-state="ctx.stateAttribute.value"
+      data-tooltip-trigger
+      @pointermove="onPointerMove"
+      @pointerleave="onPointerLeave"
+      @pointerdown="onPointerDown"
+      @focus="onFocus"
+      @blur="onBlur"
+      @click="onClick"
+    >
+      <slot />
+    </Primitive>
+  </PopperAnchor>
+</template>
diff --git a/vue/primitives/src/tooltip/__test__/Tooltip.test.ts b/vue/primitives/src/tooltip/__test__/Tooltip.test.ts
new file mode 100644
index 0000000..e1626f5
--- /dev/null
+++ b/vue/primitives/src/tooltip/__test__/Tooltip.test.ts
@@ -0,0 +1,291 @@
+import {
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from '../../index';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+
+const wrappers: Array<VueWrapper<any>> = [];
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()!.unmount();
+  document.body.innerHTML = '';
+  document.body.removeAttribute('style');
+  vi.useRealTimers();
+});
+
+function track<T extends VueWrapper<any>>(w: T): T {
+  wrappers.push(w);
+  return w;
+}
+
+function mountTooltip(options: {
+  open?: boolean;
+  defaultOpen?: boolean;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  disabled?: boolean;
+  disableHoverableContent?: boolean;
+  disableClosingTrigger?: boolean;
+  ignoreNonKeyboardFocus?: boolean;
+  onUpdateOpen?: (v: boolean) => void;
+  forceMount?: boolean;
+} = {}) {
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(
+          TooltipProvider,
+          {
+            delayDuration: options.delayDuration,
+            skipDelayDuration: options.skipDelayDuration,
+          },
+          {
+            default: () =>
+              h(
+                TooltipRoot,
+                {
+                  open: options.open,
+                  defaultOpen: options.defaultOpen,
+                  disabled: options.disabled,
+                  disableHoverableContent: options.disableHoverableContent,
+                  disableClosingTrigger: options.disableClosingTrigger,
+                  ignoreNonKeyboardFocus: options.ignoreNonKeyboardFocus,
+                  'onUpdate:open': options.onUpdateOpen,
+                },
+                {
+                  default: () => [
+                    h(TooltipTrigger, null, { default: () => 'Trigger' }),
+                    h(
+                      TooltipContent,
+                      { forceMount: options.forceMount },
+                      { default: () => 'Tooltip body' },
+                    ),
+                  ],
+                },
+              ),
+          },
+        );
+    },
+  });
+
+  return track(mount(Wrapper, { attachTo: document.body }));
+}
+
+function getTrigger(): HTMLButtonElement {
+  return document.querySelector('[data-tooltip-trigger]') as HTMLButtonElement;
+}
+
+function getTooltip(): HTMLElement | null {
+  return document.querySelector('[role="tooltip"]');
+}
+
+describe('Tooltip', () => {
+  it('renders trigger with closed state by default', () => {
+    mountTooltip();
+    const trigger = getTrigger();
+    expect(trigger).toBeTruthy();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+    expect(trigger.getAttribute('aria-describedby')).toBe(null);
+    expect(getTooltip()).toBeNull();
+  });
+
+  it('opens with defaultOpen and exposes aria-describedby', async () => {
+    mountTooltip({ defaultOpen: true });
+    await nextTick();
+
+    const trigger = getTrigger();
+    expect(trigger.getAttribute('data-state')).toBe('instant-open');
+    expect(trigger.getAttribute('aria-describedby')).toBeTruthy();
+
+    const tip = getTooltip();
+    expect(tip).toBeTruthy();
+    expect(tip!.id).toBe(trigger.getAttribute('aria-describedby'));
+  });
+
+  it('opens on focus and closes on blur', async () => {
+    mountTooltip();
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new FocusEvent('focus'));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('instant-open');
+
+    trigger.dispatchEvent(new FocusEvent('blur'));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('respects controlled v-model', async () => {
+    const onUpdate = vi.fn();
+    const Wrapper = defineComponent({
+      props: { open: { type: Boolean, default: false } },
+      emits: ['update:open'],
+      setup(props, { emit }) {
+        return () =>
+          h(
+            TooltipProvider,
+            null,
+            {
+              default: () =>
+                h(
+                  TooltipRoot,
+                  {
+                    open: props.open,
+                    'onUpdate:open': (v: boolean) => {
+                      onUpdate(v);
+                      emit('update:open', v);
+                    },
+                  },
+                  {
+                    default: () => [
+                      h(TooltipTrigger, null, { default: () => 'T' }),
+                      h(TooltipContent, null, { default: () => 'body' }),
+                    ],
+                  },
+                ),
+            },
+          );
+      },
+    });
+    const wrapper = track(mount(Wrapper, { attachTo: document.body, props: { open: false } }));
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new FocusEvent('focus'));
+    await nextTick();
+    expect(onUpdate).toHaveBeenCalledWith(true);
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+
+    await wrapper.setProps({ open: true });
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('instant-open');
+  });
+
+  it('does not open when disabled', async () => {
+    mountTooltip({ disabled: true });
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new FocusEvent('focus'));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+    expect(getTooltip()).toBeNull();
+  });
+
+  it('uses delayed-open after delay window via pointer', async () => {
+    vi.useFakeTimers();
+    mountTooltip({ delayDuration: 100, skipDelayDuration: 50 });
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new PointerEvent('pointermove', { pointerType: 'mouse' }));
+    // Not opened yet.
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+
+    vi.advanceTimersByTime(100);
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('delayed-open');
+  });
+
+  it('skips delay for second tooltip within skipDelayDuration window', async () => {
+    vi.useFakeTimers();
+
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(
+            TooltipProvider,
+            { delayDuration: 500, skipDelayDuration: 300 },
+            {
+              default: () => [
+                h(
+                  TooltipRoot,
+                  null,
+                  {
+                    default: () => [
+                      h(TooltipTrigger, { 'data-id': 'a' }, { default: () => 'A' }),
+                      h(TooltipContent, null, { default: () => 'A body' }),
+                    ],
+                  },
+                ),
+                h(
+                  TooltipRoot,
+                  null,
+                  {
+                    default: () => [
+                      h(TooltipTrigger, { 'data-id': 'b' }, { default: () => 'B' }),
+                      h(TooltipContent, null, { default: () => 'B body' }),
+                    ],
+                  },
+                ),
+              ],
+            },
+          );
+      },
+    });
+
+    track(mount(Wrapper, { attachTo: document.body }));
+
+    const a = document.querySelector('[data-id="a"]') as HTMLElement;
+    const b = document.querySelector('[data-id="b"]') as HTMLElement;
+
+    // Open A with delay.
+    a.dispatchEvent(new PointerEvent('pointermove', { pointerType: 'mouse' }));
+    vi.advanceTimersByTime(500);
+    await nextTick();
+    expect(a.getAttribute('data-state')).toBe('delayed-open');
+
+    // Close A via blur-equivalent: pointerleave + disableHoverable would do it,
+    // but here we just close via focus loss simulation through trigger event.
+    a.dispatchEvent(new FocusEvent('blur'));
+    await nextTick();
+    expect(a.getAttribute('data-state')).toBe('closed');
+
+    // Within the skip window — moving over B should open it instantly.
+    vi.advanceTimersByTime(100);
+    b.dispatchEvent(new PointerEvent('pointermove', { pointerType: 'mouse' }));
+    await nextTick();
+    expect(b.getAttribute('data-state')).toBe('instant-open');
+  });
+
+  it('does not open on touch pointers (handled by long-press elsewhere)', async () => {
+    mountTooltip({ delayDuration: 0 });
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new PointerEvent('pointermove', { pointerType: 'touch' }));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('closes on Escape via dismissable layer', async () => {
+    mountTooltip({ defaultOpen: true });
+    await nextTick();
+    expect(getTrigger().getAttribute('data-state')).toBe('instant-open');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await nextTick();
+    expect(getTrigger().getAttribute('data-state')).toBe('closed');
+  });
+
+  it('closes when clicked unless disableClosingTrigger', async () => {
+    mountTooltip({ defaultOpen: true });
+    await nextTick();
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('closed');
+  });
+
+  it('keeps tooltip open on click when disableClosingTrigger is set', async () => {
+    mountTooltip({ defaultOpen: true, disableClosingTrigger: true });
+    await nextTick();
+    const trigger = getTrigger();
+
+    trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    await nextTick();
+    expect(trigger.getAttribute('data-state')).toBe('instant-open');
+  });
+});
diff --git a/vue/primitives/src/tooltip/context.ts b/vue/primitives/src/tooltip/context.ts
new file mode 100644
index 0000000..b6e9c3a
--- /dev/null
+++ b/vue/primitives/src/tooltip/context.ts
@@ -0,0 +1,50 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { TooltipState } from './utils';
+import { useContextFactory } from '@robonen/vue';
+
+export interface TooltipProviderContext {
+  /** Whether the next tooltip open should wait for the full `delayDuration`. */
+  isOpenDelayed: Ref<boolean>;
+  /** Hover delay before opening when `isOpenDelayed` is `true`. */
+  delayDuration: Ref<number>;
+  /** Skip-delay window after a tooltip closes — used for "menu-like" hover groups. */
+  skipDelayDuration: Ref<number>;
+  /** Set to `true` while the pointer is in the safe-area between trigger and content. */
+  isPointerInTransitRef: Ref<boolean>;
+  /** Globally disable hoverable content (pointer leaving trigger immediately closes). */
+  disableHoverableContent: Ref<boolean>;
+  /** Globally disable closing the tooltip by clicking the trigger. */
+  disableClosingTrigger: Ref<boolean>;
+  /** Globally disable all tooltips inside this provider. */
+  disabled: Ref<boolean>;
+  /** Skip opening on non-keyboard focus (avoids tooltips after closing dialogs / switching tabs). */
+  ignoreNonKeyboardFocus: Ref<boolean>;
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+export const {
+  inject: useTooltipProviderContext,
+  provide: provideTooltipProviderContext,
+} = useContextFactory<TooltipProviderContext>('TooltipProviderContext');
+
+export interface TooltipContext {
+  contentId: ComputedRef<string>;
+  open: Ref<boolean>;
+  stateAttribute: ComputedRef<TooltipState>;
+  trigger: Ref<HTMLElement | undefined>;
+  disableHoverableContent: ComputedRef<boolean>;
+  disableClosingTrigger: ComputedRef<boolean>;
+  disabled: ComputedRef<boolean>;
+  ignoreNonKeyboardFocus: ComputedRef<boolean>;
+  onTriggerChange: (el: HTMLElement | undefined) => void;
+  onTriggerEnter: () => void;
+  onTriggerLeave: () => void;
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+export const {
+  inject: useTooltipContext,
+  provide: provideTooltipContext,
+} = useContextFactory<TooltipContext>('TooltipContext');
diff --git a/vue/primitives/src/tooltip/index.ts b/vue/primitives/src/tooltip/index.ts
new file mode 100644
index 0000000..8f6dd54
--- /dev/null
+++ b/vue/primitives/src/tooltip/index.ts
@@ -0,0 +1,26 @@
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipRoot } from './TooltipRoot.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';
+export { default as TooltipPortal } from './TooltipPortal.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipArrow } from './TooltipArrow.vue';
+
+export {
+  useTooltipContext,
+  useTooltipProviderContext,
+  type TooltipContext,
+  type TooltipProviderContext,
+} from './context';
+
+export { TOOLTIP_OPEN_EVENT, type TooltipState } from './utils';
+
+export type { TooltipProviderProps } from './TooltipProvider.vue';
+export type { TooltipRootProps } from './TooltipRoot.vue';
+export type { TooltipTriggerProps } from './TooltipTrigger.vue';
+export type { TooltipPortalProps } from './TooltipPortal.vue';
+export type { TooltipContentProps, TooltipContentEmits } from './TooltipContent.vue';
+export type {
+  TooltipContentImplProps,
+  TooltipContentImplEmits,
+} from './TooltipContentImpl.vue';
+export type { TooltipArrowProps } from './TooltipArrow.vue';
diff --git a/vue/primitives/src/tooltip/utils.ts b/vue/primitives/src/tooltip/utils.ts
new file mode 100644
index 0000000..cdbc4dd
--- /dev/null
+++ b/vue/primitives/src/tooltip/utils.ts
@@ -0,0 +1,8 @@
+/**
+ * Custom DOM event dispatched on `document` whenever any tooltip opens.
+ * Other open tooltips listen for it and close themselves so that only one
+ * tooltip is visible at a time without coupling them via a global registry.
+ */
+export const TOOLTIP_OPEN_EVENT = 'tooltip.open';
+
+export type TooltipState = 'closed' | 'delayed-open' | 'instant-open';
diff --git a/vue/primitives/src/tree/TreeItem.vue b/vue/primitives/src/tree/TreeItem.vue
new file mode 100644
index 0000000..82891b6
--- /dev/null
+++ b/vue/primitives/src/tree/TreeItem.vue
@@ -0,0 +1,69 @@
+<script lang="ts" generic="T">
+import type { FlatItem } from './utils';
+import type { PrimitiveProps } from '../primitive';
+
+export interface TreeItemProps<U = unknown> extends PrimitiveProps {
+  /** Flattened item produced by `TreeRoot` (from its default slot). */
+  item: FlatItem<U>;
+  /** Disable this specific item. */
+  disabled?: boolean;
+}
+</script>
+
+<script setup lang="ts" generic="T">
+import { computed } from 'vue';
+import { useCollectionInjector } from '../collection';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { useTreeContext } from './context';
+
+const { as = 'li', item, disabled = false } = defineProps<TreeItemProps<T>>();
+
+const ctx = useTreeContext();
+const { forwardRef, currentElement } = useForwardExpose();
+const { CollectionItem } = useCollectionInjector();
+
+const isDisabled = computed(() => ctx.disabled.value || disabled);
+const isExpanded = computed(() => item.hasChildren && ctx.isExpanded(item.key));
+const isSelected = computed(() => ctx.isSelected(item.key));
+
+function onClick(event: MouseEvent): void {
+  if (isDisabled.value) return;
+  event.stopPropagation();
+  ctx.select(item.value as T);
+  if (item.hasChildren) ctx.toggleExpanded(item.value as T);
+}
+
+function onKeyDown(event: KeyboardEvent): void {
+  if (isDisabled.value || !currentElement.value) return;
+  ctx.onItemKeyDown(event, currentElement.value, item);
+}
+</script>
+
+<template>
+  <CollectionItem>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="treeitem"
+      :tabindex="isDisabled ? -1 : 0"
+      :aria-level="item.level"
+      :aria-selected="isSelected"
+      :aria-expanded="item.hasChildren ? isExpanded : undefined"
+      :aria-disabled="isDisabled || undefined"
+      :data-state="item.hasChildren ? (isExpanded ? 'open' : 'closed') : undefined"
+      :data-selected="isSelected ? '' : undefined"
+      :data-disabled="isDisabled ? '' : undefined"
+      :data-level="item.level"
+      @click="onClick"
+      @keydown="onKeyDown"
+    >
+      <slot
+        :item="item"
+        :is-expanded="isExpanded"
+        :is-selected="isSelected"
+        :is-disabled="isDisabled"
+      />
+    </Primitive>
+  </CollectionItem>
+</template>
diff --git a/vue/primitives/src/tree/TreeRoot.vue b/vue/primitives/src/tree/TreeRoot.vue
new file mode 100644
index 0000000..4726f8f
--- /dev/null
+++ b/vue/primitives/src/tree/TreeRoot.vue
@@ -0,0 +1,341 @@
+<script lang="ts" generic="T">
+import type { FlatItem } from './utils';
+import type { PrimitiveProps } from '../primitive';
+
+export interface TreeRootProps<U = unknown> extends PrimitiveProps {
+  /** Flat or nested item list — children are resolved via `getChildren`. */
+  items: readonly U[];
+  /** Extract a stable unique string key from an item. */
+  getKey: (item: U) => string;
+  /** Return the children of an item, or `undefined` if it is a leaf. */
+  getChildren?: (item: U) => readonly U[] | undefined | null;
+  /** Controlled selected key(s). Use `v-model`. */
+  modelValue?: string | string[];
+  /** Uncontrolled initial selected key(s). */
+  defaultValue?: string | string[];
+  /** Controlled expanded keys. Use `v-model:expanded`. */
+  expanded?: string[];
+  /** Uncontrolled initial expanded keys. */
+  defaultExpanded?: string[];
+  /** Allow selecting multiple items. @default false */
+  multiple?: boolean;
+  /** Disable the entire tree. */
+  disabled?: boolean;
+  /** Writing direction. @default 'ltr' */
+  dir?: 'ltr' | 'rtl';
+  /** When `true`, selecting a parent also selects all of its descendants (requires `multiple`). */
+  propagateSelect?: boolean;
+}
+
+export interface TreeRootEmits {
+  'update:modelValue': [value: string | string[] | undefined];
+  'update:expanded': [value: string[]];
+}
+</script>
+
+<script setup lang="ts" generic="T">
+import { computed, ref, toRef, watch } from 'vue';
+import { resolveNextIndex, rovingKeyToAction } from '../utils/roving-focus';
+import { flattenVisible } from './utils';
+import { useCollectionProvider } from '../collection';
+import { useConfig } from '../config-provider';
+import { useForwardExpose } from '@robonen/vue';
+import { Primitive } from '../primitive';
+import { provideTreeContext } from './context';
+
+// Hoisted roving-focus options — reused on every keydown to avoid per-event
+// object allocation (keeps the IC at `rovingKeyToAction` monomorphic).
+const ROVING_OPTS_LTR = { orientation: 'vertical', dir: 'ltr', loop: false } as const;
+const ROVING_OPTS_RTL = { orientation: 'vertical', dir: 'rtl', loop: false } as const;
+
+const {
+  as = 'ul',
+  items,
+  getKey,
+  getChildren = ((item: any) => item?.children) as (item: T) => readonly T[] | undefined | null,
+  modelValue,
+  defaultValue,
+  expanded,
+  defaultExpanded,
+  multiple = false,
+  disabled = false,
+  dir,
+  propagateSelect = false,
+} = defineProps<TreeRootProps<T>>();
+
+const emit = defineEmits<TreeRootEmits>();
+
+const { forwardRef } = useForwardExpose();
+const config = useConfig();
+
+// Writing direction — local prop wins, else inherit from <ConfigProvider>.
+const direction = computed(() => dir ?? config.dir.value);
+
+function normalize(v: string | string[] | undefined): string[] {
+  if (v === undefined) return [];
+  return Array.isArray(v) ? v : [v];
+}
+
+// --- Selection state ------------------------------------------------------
+
+const localSelected = ref<string[]>(
+  modelValue !== undefined ? normalize(modelValue) : normalize(defaultValue),
+);
+
+watch(() => modelValue, (v) => {
+  if (v === undefined) return;
+  const arr = normalize(v);
+  const cur = localSelected.value;
+  if (arr.length === cur.length && arr.every((x, i) => x === cur[i])) return;
+  localSelected.value = arr;
+});
+
+function commitSelected(next: string[]): void {
+  localSelected.value = next;
+  emit('update:modelValue', multiple ? next : next[0]);
+}
+
+// O(1) membership lookup — replaces linear `.includes()` that was called once
+// per TreeItem's `isSelected` computed, causing O(n²) work on selection change.
+const selectedSet = computed(() => new Set(localSelected.value));
+
+function isSelected(key: string): boolean {
+  return selectedSet.value.has(key);
+}
+
+function select(value: T): void {
+  if (disabled) return;
+  const key = getKey(value);
+  const current = localSelected.value;
+
+  if (multiple) {
+    const alreadySelected = selectedSet.value.has(key);
+
+    if (propagateSelect) {
+      // Collect `key` + all descendant keys iteratively (avoids flattenAll's
+      // intermediate {key,value}[] allocation — we only need the keys here).
+      const cascadeKeys = new Set<string>();
+      cascadeKeys.add(key);
+      const stack: Array<readonly T[]> = [];
+      const firstChildren = getChildren(value);
+      if (firstChildren && firstChildren.length > 0) stack.push(firstChildren);
+      while (stack.length > 0) {
+        const nodes = stack.pop()!;
+        for (let i = 0; i < nodes.length; i++) {
+          const node = nodes[i]!;
+          cascadeKeys.add(getKey(node));
+          const ch = getChildren(node);
+          if (ch && ch.length > 0) stack.push(ch);
+        }
+      }
+
+      if (alreadySelected) {
+        // O(n) filter with Set lookup (was O(n*m) via Array.includes).
+        const next: string[] = [];
+        for (let i = 0; i < current.length; i++) {
+          const k = current[i]!;
+          if (!cascadeKeys.has(k)) next.push(k);
+        }
+        commitSelected(next);
+      }
+      else {
+        const merged = new Set(current);
+        cascadeKeys.forEach(k => merged.add(k));
+        commitSelected([...merged]);
+      }
+      return;
+    }
+
+    if (alreadySelected) {
+      const next: string[] = [];
+      for (let i = 0; i < current.length; i++) {
+        const k = current[i]!;
+        if (k !== key) next.push(k);
+      }
+      commitSelected(next);
+    }
+    else {
+      commitSelected([...current, key]);
+    }
+    return;
+  }
+
+  // single select — toggle off if already selected
+  if (current[0] === key) commitSelected([]);
+  else commitSelected([key]);
+}
+
+// --- Expanded state -------------------------------------------------------
+
+const localExpanded = ref<string[]>(
+  expanded !== undefined ? [...expanded] : [...(defaultExpanded ?? [])],
+);
+
+watch(() => expanded, (v) => {
+  if (v === undefined) return;
+  const cur = localExpanded.value;
+  if (v.length === cur.length && v.every((x, i) => x === cur[i])) return;
+  localExpanded.value = [...v];
+});
+
+const expandedSet = computed(() => new Set(localExpanded.value));
+
+function isExpanded(key: string): boolean {
+  return expandedSet.value.has(key);
+}
+
+function commitExpanded(next: string[]): void {
+  localExpanded.value = next;
+  emit('update:expanded', next);
+}
+
+function toggleExpanded(value: T): void {
+  const children = getChildren(value);
+  if (!children || children.length === 0) return;
+  const key = getKey(value);
+  const current = localExpanded.value;
+  if (expandedSet.value.has(key)) {
+    const next: string[] = [];
+    for (let i = 0; i < current.length; i++) {
+      const k = current[i]!;
+      if (k !== key) next.push(k);
+    }
+    commitExpanded(next);
+  }
+  else {
+    commitExpanded([...current, key]);
+  }
+}
+
+// --- Flattened visible items ---------------------------------------------
+
+const flatItems = computed<Array<FlatItem<T>>>(() =>
+  flattenVisible(items, getKey, getChildren, expandedSet.value),
+);
+
+// --- Keyboard navigation --------------------------------------------------
+
+const { getItems, CollectionSlot } = useCollectionProvider();
+const treeItemElements = computed(() => getItems(true).map(i => i.ref));
+
+function collectEnabled(): HTMLElement[] {
+  const all = treeItemElements.value;
+  const out: HTMLElement[] = [];
+  for (let i = 0; i < all.length; i++) {
+    const el = all[i]!;
+    if (!el.hasAttribute('data-disabled')) out.push(el);
+  }
+  return out;
+}
+
+function onItemKeyDown(event: KeyboardEvent, el: HTMLElement, item: FlatItem<T>): void {
+  // Enter / Space → select (tree-specific, not covered by roving-focus helper)
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    select(item.value);
+    return;
+  }
+
+  const enabled = collectEnabled();
+  if (enabled.length === 0) return;
+  const idx = enabled.indexOf(el);
+
+  // Up / Down / Home / End → delegate to shared roving-focus helper.
+  const action = rovingKeyToAction(
+    event,
+    direction.value === 'rtl' ? ROVING_OPTS_RTL : ROVING_OPTS_LTR,
+  );
+  if (action) {
+    event.preventDefault();
+    if (action.absolute === 'home') {
+      enabled[0]!.focus();
+      return;
+    }
+    if (action.absolute === 'end') {
+      enabled[enabled.length - 1]!.focus();
+      return;
+    }
+    const nextIdx = resolveNextIndex(idx, action.delta, enabled.length, false);
+    enabled[nextIdx]!.focus();
+    return;
+  }
+
+  // Left / Right have tree-specific semantics beyond roving focus:
+  //   forward  — expand collapsed parent, else move to first child
+  //   back     — collapse expanded parent, else move to parent item
+  const ltr = direction.value !== 'rtl';
+  const forwardKey = ltr ? 'ArrowRight' : 'ArrowLeft';
+  const backKey = ltr ? 'ArrowLeft' : 'ArrowRight';
+
+  if (event.key === forwardKey) {
+    event.preventDefault();
+    if (!item.hasChildren) return;
+    if (!isExpanded(item.key)) {
+      toggleExpanded(item.value);
+      return;
+    }
+    const next = enabled[idx + 1];
+    if (next && Number(next.getAttribute('aria-level')) === item.level + 1) next.focus();
+    return;
+  }
+
+  if (event.key === backKey) {
+    event.preventDefault();
+    if (item.hasChildren && isExpanded(item.key)) {
+      toggleExpanded(item.value);
+      return;
+    }
+    const parentLevel = item.level - 1;
+    for (let i = idx - 1; i >= 0; i--) {
+      const candidate = enabled[i]!;
+      if (Number(candidate.getAttribute('aria-level')) === parentLevel) {
+        candidate.focus();
+        return;
+      }
+    }
+  }
+}
+
+provideTreeContext({
+  flatItems,
+  expandedKeys: localExpanded,
+  selectedKeys: localSelected,
+  multiple: toRef(() => multiple),
+  disabled: toRef(() => disabled),
+  direction,
+  propagateSelect: toRef(() => propagateSelect),
+  isExpanded,
+  isSelected,
+  toggleExpanded,
+  select,
+  treeItemElements,
+  onItemKeyDown,
+});
+
+defineSlots<{
+  default?: (props: {
+    flatItems: Array<FlatItem<T>>;
+    selectedKeys: string[];
+    expandedKeys: string[];
+  }) => unknown;
+}>();
+</script>
+
+<template>
+  <CollectionSlot>
+    <Primitive
+      :ref="forwardRef"
+      :as="as"
+      role="tree"
+      :aria-multiselectable="multiple ? true : undefined"
+      :aria-disabled="disabled || undefined"
+      :dir="direction"
+    >
+      <slot
+        :flat-items="flatItems"
+        :selected-keys="localSelected"
+        :expanded-keys="localExpanded"
+      />
+    </Primitive>
+  </CollectionSlot>
+</template>
diff --git a/vue/primitives/src/tree/__test__/Tree.test.ts b/vue/primitives/src/tree/__test__/Tree.test.ts
new file mode 100644
index 0000000..c647bfa
--- /dev/null
+++ b/vue/primitives/src/tree/__test__/Tree.test.ts
@@ -0,0 +1,262 @@
+import { TreeItem, TreeRoot } from '../index';
+import { defineComponent, h, nextTick } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+interface Node {
+  id: string;
+  label: string;
+  children?: Node[];
+}
+
+const TREE: Node[] = [
+  {
+    id: 'a',
+    label: 'A',
+    children: [
+      { id: 'a-1', label: 'A.1' },
+      {
+        id: 'a-2',
+        label: 'A.2',
+        children: [
+          { id: 'a-2-1', label: 'A.2.1' },
+          { id: 'a-2-2', label: 'A.2.2' },
+        ],
+      },
+    ],
+  },
+  { id: 'b', label: 'B' },
+  {
+    id: 'c',
+    label: 'C',
+    children: [{ id: 'c-1', label: 'C.1' }],
+  },
+];
+
+function createTree(rootProps: Record<string, unknown> = {}, items: Node[] = TREE) {
+  return mount(
+    defineComponent({
+      setup() {
+        return () => h(
+          TreeRoot,
+          {
+            items,
+            getKey: (n: unknown) => (n as Node).id,
+            getChildren: (n: unknown) => (n as Node).children,
+            ...rootProps,
+          },
+          {
+            default: ({ flatItems }: { flatItems: Array<{ key: string; value: Node; level: number; hasChildren: boolean }> }) =>
+              flatItems.map(item =>
+                h(TreeItem, { key: item.key, item }, { default: () => item.value.label }),
+              ),
+          },
+        );
+      },
+    }),
+    { attachTo: document.body },
+  );
+}
+
+function press(el: Element, key: string) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+}
+
+async function flush() {
+  await nextTick();
+  await nextTick();
+}
+
+describe('Tree', () => {
+  it('renders only top-level items when nothing is expanded', () => {
+    const w = createTree();
+    const items = w.findAll('[role="treeitem"]');
+    expect(items).toHaveLength(3);
+    expect(items.map(i => i.text())).toEqual(['A', 'B', 'C']);
+    w.unmount();
+  });
+
+  it('sets role="tree" on root', () => {
+    const w = createTree();
+    expect(w.find('[role="tree"]').exists()).toBe(true);
+    w.unmount();
+  });
+
+  it('wires aria-level and aria-expanded', () => {
+    const w = createTree({ defaultExpanded: ['a'] });
+    const items = w.findAll('[role="treeitem"]');
+    // A (has children, expanded), A.1 (leaf), A.2 (has children, closed), B, C
+    expect(items[0]!.attributes('aria-level')).toBe('1');
+    expect(items[0]!.attributes('aria-expanded')).toBe('true');
+    expect(items[0]!.attributes('data-state')).toBe('open');
+
+    expect(items[1]!.attributes('aria-level')).toBe('2');
+    expect(items[1]!.attributes('aria-expanded')).toBeUndefined();
+    expect(items[1]!.attributes('data-state')).toBeUndefined();
+
+    expect(items[2]!.attributes('aria-level')).toBe('2');
+    expect(items[2]!.attributes('aria-expanded')).toBe('false');
+    expect(items[2]!.attributes('data-state')).toBe('closed');
+    w.unmount();
+  });
+
+  it('click toggles expansion of a parent node', async () => {
+    const w = createTree();
+    const a = w.findAll('[role="treeitem"]')[0]!;
+    await a.trigger('click');
+    await flush();
+    // now A is expanded, A.1 + A.2 visible
+    const items = w.findAll('[role="treeitem"]');
+    expect(items).toHaveLength(5);
+    expect(items.map(i => i.text())).toEqual(['A', 'A.1', 'A.2', 'B', 'C']);
+    w.unmount();
+  });
+
+  it('click selects a node (single-select)', async () => {
+    const w = createTree();
+    const b = w.findAll('[role="treeitem"]')[1]!;
+    await b.trigger('click');
+    await flush();
+    expect(b.attributes('aria-selected')).toBe('true');
+    expect(b.attributes('data-selected')).toBe('');
+    w.unmount();
+  });
+
+  it('single-select: selecting another item replaces the previous selection', async () => {
+    const w = createTree({ defaultValue: 'b' });
+    const items = w.findAll('[role="treeitem"]');
+    expect(items[1]!.attributes('aria-selected')).toBe('true');
+
+    await items[0]!.trigger('click');
+    await flush();
+
+    const after = w.findAll('[role="treeitem"]');
+    expect(after[0]!.attributes('aria-selected')).toBe('true');
+    expect(after.find(i => i.text() === 'B')!.attributes('aria-selected')).toBe('false');
+    w.unmount();
+  });
+
+  it('multiple-select: selections accumulate', async () => {
+    const w = createTree({ multiple: true });
+    const items = w.findAll('[role="treeitem"]');
+    await items[0]!.trigger('click'); // A (also expands)
+    await flush();
+    await w.findAll('[role="treeitem"]').find(i => i.text() === 'B')!.trigger('click');
+    await flush();
+    const all = w.findAll('[role="treeitem"]');
+    const selected = all.filter(i => i.attributes('aria-selected') === 'true').map(i => i.text());
+    expect(selected).toContain('A');
+    expect(selected).toContain('B');
+    w.unmount();
+  });
+
+  it('ArrowDown / ArrowUp move focus through visible items', async () => {
+    const w = createTree({ defaultExpanded: ['a'] });
+    const items = w.findAll('[role="treeitem"]').map(i => i.element as HTMLElement);
+    items[0]!.focus();
+    expect(document.activeElement).toBe(items[0]);
+    press(items[0]!, 'ArrowDown');
+    expect(document.activeElement).toBe(items[1]); // A.1
+    press(items[1]!, 'ArrowDown');
+    expect(document.activeElement).toBe(items[2]); // A.2
+    press(items[2]!, 'ArrowUp');
+    expect(document.activeElement).toBe(items[1]);
+    w.unmount();
+  });
+
+  it('Home / End jump to first / last visible item', () => {
+    const w = createTree({ defaultExpanded: ['a'] });
+    const items = w.findAll('[role="treeitem"]').map(i => i.element as HTMLElement);
+    items[2]!.focus();
+    press(items[2]!, 'End');
+    expect(document.activeElement).toBe(items[items.length - 1]);
+    press(items[items.length - 1]!, 'Home');
+    expect(document.activeElement).toBe(items[0]);
+    w.unmount();
+  });
+
+  it('ArrowRight expands a collapsed parent; ArrowRight again moves to first child', async () => {
+    const w = createTree();
+    const items = w.findAll('[role="treeitem"]').map(i => i.element as HTMLElement);
+    items[0]!.focus();
+    press(items[0]!, 'ArrowRight');
+    await flush();
+    const next = w.findAll('[role="treeitem"]').map(i => i.element as HTMLElement);
+    expect(next[0]!.getAttribute('aria-expanded')).toBe('true');
+    press(next[0]!, 'ArrowRight');
+    expect(document.activeElement).toBe(next[1]); // A.1
+    w.unmount();
+  });
+
+  it('ArrowLeft collapses an expanded parent; ArrowLeft on a leaf jumps to its parent', async () => {
+    const w = createTree({ defaultExpanded: ['a'] });
+    const items = w.findAll('[role="treeitem"]').map(i => i.element as HTMLElement);
+    const a1 = items[1]!; // leaf
+    a1.focus();
+    press(a1, 'ArrowLeft');
+    expect(document.activeElement).toBe(items[0]); // back to A
+
+    // Now collapse A with another ArrowLeft
+    press(items[0]!, 'ArrowLeft');
+    await flush();
+    const updated = w.findAll('[role="treeitem"]');
+    expect(updated).toHaveLength(3);
+    w.unmount();
+  });
+
+  it('Enter / Space select the focused item', async () => {
+    const w = createTree();
+    const first = w.find('[role="treeitem"]').element as HTMLElement;
+    first.focus();
+    press(first, 'Enter');
+    await flush();
+    expect(first.getAttribute('aria-selected')).toBe('true');
+    w.unmount();
+  });
+
+  it('emits update:modelValue and update:expanded', async () => {
+    const onModel: string[][] = [];
+    const onExpanded: string[][] = [];
+    const w = createTree({
+      'onUpdate:modelValue': (v: string | string[] | undefined) => {
+        onModel.push(Array.isArray(v) ? v : v === undefined ? [] : [v]);
+      },
+      'onUpdate:expanded': (v: string[]) => {
+        onExpanded.push(v);
+      },
+    });
+    const first = w.find('[role="treeitem"]');
+    await first.trigger('click');
+    await flush();
+    expect(onModel[0]).toEqual(['a']);
+    expect(onExpanded[0]).toEqual(['a']);
+    w.unmount();
+  });
+
+  it('disabled tree ignores clicks and keyboard selection', async () => {
+    const onModel: unknown[] = [];
+    const w = createTree({ disabled: true, 'onUpdate:modelValue': (v: unknown) => onModel.push(v) });
+    const first = w.find('[role="treeitem"]');
+    await first.trigger('click');
+    await flush();
+    expect(first.attributes('aria-selected')).toBe('false');
+    expect(onModel).toHaveLength(0);
+    w.unmount();
+  });
+
+  it('propagateSelect cascades selection to all descendants', async () => {
+    const captured: string[][] = [];
+    const w = createTree({
+      multiple: true,
+      propagateSelect: true,
+      defaultExpanded: ['a', 'a-2'],
+      'onUpdate:modelValue': (v: string[]) => captured.push(v),
+    });
+    const a = w.findAll('[role="treeitem"]')[0]!; // A
+    await a.trigger('click');
+    await flush();
+    const emitted = captured.at(-1)!;
+    expect(emitted).toEqual(expect.arrayContaining(['a', 'a-1', 'a-2', 'a-2-1', 'a-2-2']));
+    w.unmount();
+  });
+});
diff --git a/vue/primitives/src/tree/context.ts b/vue/primitives/src/tree/context.ts
new file mode 100644
index 0000000..43b9552
--- /dev/null
+++ b/vue/primitives/src/tree/context.ts
@@ -0,0 +1,35 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { FlatItem } from './utils';
+import { useContextFactory } from '@robonen/vue';
+
+export interface TreeContext<T = unknown> {
+  /** Reactive flattened visible items (only descendants of expanded nodes). */
+  flatItems: ComputedRef<Array<FlatItem<T>>>;
+  /** Current expanded keys. */
+  expandedKeys: Ref<string[]>;
+  /** Current selected keys. */
+  selectedKeys: Ref<string[]>;
+  /** Whether multiple selection is enabled. */
+  multiple: Ref<boolean>;
+  /** Whether the whole tree is disabled. */
+  disabled: Ref<boolean>;
+  /** Writing direction — affects Left/Right semantics. */
+  direction: Ref<'ltr' | 'rtl'>;
+  /** When `true`, selecting a parent cascades selection to all descendants. */
+  propagateSelect: Ref<boolean>;
+
+  isExpanded: (key: string) => boolean;
+  isSelected: (key: string) => boolean;
+  toggleExpanded: (value: T) => void;
+  select: (value: T) => void;
+
+  /** DOM-ordered list of rendered treeitem elements (from the internal Collection). */
+  treeItemElements: ComputedRef<HTMLElement[]>;
+  /** Keyboard handler wired from items to the root. */
+  onItemKeyDown: (event: KeyboardEvent, el: HTMLElement, item: FlatItem<T>) => void;
+}
+
+export const {
+  inject: useTreeContext,
+  provide: provideTreeContext,
+} = useContextFactory<TreeContext<any>>('TreeContext');
diff --git a/vue/primitives/src/tree/index.ts b/vue/primitives/src/tree/index.ts
new file mode 100644
index 0000000..5578b13
--- /dev/null
+++ b/vue/primitives/src/tree/index.ts
@@ -0,0 +1,10 @@
+export { default as TreeRoot } from './TreeRoot.vue';
+export { default as TreeItem } from './TreeItem.vue';
+
+export { useTreeContext, provideTreeContext } from './context';
+
+export type { TreeRootProps, TreeRootEmits } from './TreeRoot.vue';
+export type { TreeItemProps } from './TreeItem.vue';
+export type { TreeContext } from './context';
+export type { FlatItem } from './utils';
+export { flattenAll, flattenVisible } from './utils';
diff --git a/vue/primitives/src/tree/utils.ts b/vue/primitives/src/tree/utils.ts
new file mode 100644
index 0000000..ab6190c
--- /dev/null
+++ b/vue/primitives/src/tree/utils.ts
@@ -0,0 +1,87 @@
+/**
+ * Shared Tree helpers. Pure, no Vue imports.
+ */
+
+export interface FlatItem<T = unknown> {
+  /** Unique string key produced by `getKey(value)`. */
+  key: string;
+  /** Original item value. */
+  value: T;
+  /** 1-based depth — top-level is 1. */
+  level: number;
+  /** Whether the item has a non-empty children array. */
+  hasChildren: boolean;
+  /** Parent key, or `undefined` for root-level items. */
+  parentKey?: string;
+}
+
+/**
+ * Depth-first flattening of a tree into a visible list, honoring `expandedKeys`.
+ * Collapsed subtrees are skipped entirely. Iterative implementation to avoid
+ * deep recursion on large trees.
+ */
+export function flattenVisible<T>(
+  items: readonly T[],
+  getKey: (item: T) => string,
+  getChildren: (item: T) => readonly T[] | undefined | null,
+  expandedKeys: ReadonlySet<string>,
+): Array<FlatItem<T>> {
+  const out: Array<FlatItem<T>> = [];
+  // Stack holds frames to expand. Seed in reverse so first child pops first.
+  interface Frame { nodes: readonly T[]; index: number; level: number; parentKey?: string }
+  const stack: Frame[] = [{ nodes: items, index: 0, level: 1, parentKey: undefined }];
+
+  while (stack.length > 0) {
+    const frame = stack[stack.length - 1]!;
+    if (frame.index >= frame.nodes.length) {
+      stack.pop();
+      continue;
+    }
+    const node = frame.nodes[frame.index]!;
+    frame.index += 1;
+
+    const key = getKey(node);
+    const children = getChildren(node);
+    const hasChildren = Array.isArray(children) && children.length > 0;
+    out.push({
+      key,
+      value: node,
+      level: frame.level,
+      hasChildren,
+      parentKey: frame.parentKey,
+    });
+
+    if (hasChildren && expandedKeys.has(key)) {
+      stack.push({
+        nodes: children as readonly T[],
+        index: 0,
+        level: frame.level + 1,
+        parentKey: key,
+      });
+    }
+  }
+
+  return out;
+}
+
+/**
+ * Flattens all descendants (regardless of expansion) — used for cascade
+ * select/deselect operations.
+ */
+export function flattenAll<T>(
+  items: readonly T[],
+  getKey: (item: T) => string,
+  getChildren: (item: T) => readonly T[] | undefined | null,
+): Array<{ key: string; value: T }> {
+  const out: Array<{ key: string; value: T }> = [];
+  const stack: Array<readonly T[]> = [items];
+  while (stack.length > 0) {
+    const nodes = stack.pop()!;
+    for (const node of nodes) {
+      out.push({ key: getKey(node), value: node });
+      const children = getChildren(node);
+      if (Array.isArray(children) && children.length > 0) stack.push(children);
+    }
+  }
+  return out;
+}
diff --git a/vue/primitives/src/utils/getRawChildren.ts b/vue/primitives/src/utils/getRawChildren.ts
index cf5572c..4c4fda3 100644
--- a/vue/primitives/src/utils/getRawChildren.ts
+++ b/vue/primitives/src/utils/getRawChildren.ts
@@ -19,7 +19,9 @@ function flatten(children: VNode[], result: VNode[]): void {
   let keyedFragmentCount = 0;
   const startIdx = result.length;
 
-  for (const child of children) {
+  for (let i = 0, len = children.length; i < len; i++) {
+    const child = children[i]!;
+
     if (child.type === Fragment) {
       if (child.patchFlag & PatchFlags.KEYED_FRAGMENT) {
         keyedFragmentCount++;
diff --git a/vue/primitives/src/utils/roving-focus.ts b/vue/primitives/src/utils/roving-focus.ts
new file mode 100644
index 0000000..bc827da
--- /dev/null
+++ b/vue/primitives/src/utils/roving-focus.ts
@@ -0,0 +1,58 @@
+/**
+ * Shared roving-focus helpers used by RadioGroup, Toolbar, ToggleGroup, etc.
+ * Items register themselves; Root owns the current "tabStop" index and responds
+ * to arrow/Home/End keys.
+ */
+
+export type RovingOrientation = 'horizontal' | 'vertical' | 'both';
+export type RovingDirection = 'ltr' | 'rtl';
+
+export interface RovingKeyOptions {
+  orientation?: RovingOrientation;
+  dir?: RovingDirection;
+  loop?: boolean;
+}
+
+/** Map a keyboard event to a direction delta (-1 / 0 / +1) or 'home'/'end'. */
+export function rovingKeyToAction(
+  event: KeyboardEvent,
+  { orientation = 'both', dir = 'ltr', loop = true }: RovingKeyOptions = {},
+): { delta: number; absolute?: 'home' | 'end' } | null {
+  const horizontal = orientation === 'horizontal' || orientation === 'both';
+  const vertical = orientation === 'vertical' || orientation === 'both';
+  switch (event.key) {
+    case 'ArrowRight':
+      if (!horizontal) return null;
+      return { delta: dir === 'rtl' ? -1 : 1 };
+    case 'ArrowLeft':
+      if (!horizontal) return null;
+      return { delta: dir === 'rtl' ? 1 : -1 };
+    case 'ArrowDown':
+      if (!vertical) return null;
+      return { delta: 1 };
+    case 'ArrowUp':
+      if (!vertical) return null;
+      return { delta: -1 };
+    case 'Home':
+      return { delta: 0, absolute: 'home' };
+    case 'End':
+      return { delta: 0, absolute: 'end' };
+    default:
+      return null;
+  }
+  // loop used by caller to decide clamp vs wrap.
+  void loop;
+}
+
+/** Resolve next index given current, delta and items count with optional loop. */
+export function resolveNextIndex(current: number, delta: number, count: number, loop: boolean): number {
+  if (count <= 0) return -1;
+  let next = current + delta;
+  if (loop) {
+    next = ((next % count) + count) % count;
+  }
+  else {
+    next = Math.max(0, Math.min(count - 1, next));
+  }
+  return next;
+}
diff --git a/vue/primitives/src/utils/useGraceArea.ts b/vue/primitives/src/utils/useGraceArea.ts
new file mode 100644
index 0000000..1d92f99
--- /dev/null
+++ b/vue/primitives/src/utils/useGraceArea.ts
@@ -0,0 +1,227 @@
+import { onScopeDispose, ref, watchEffect } from 'vue';
+import type { Ref } from 'vue';
+
+interface Point { x: number; y: number }
+type Polygon = Point[];
+type Side = 'top' | 'right' | 'bottom' | 'left';
+
+const POINTER_TRANSIT_TIMEOUT = 300;
+
+/**
+ * Tracks pointer transit between a trigger and a floating container using
+ * a convex-hull "safe area" polygon so the floating content doesn't close
+ * when the pointer briefly leaves the trigger en route to it.
+ *
+ * Reference behavior: a hull is computed from the exit point (padded outward
+ * from the side the pointer leaves) plus the four corners of the hover target.
+ * While the pointer remains inside that hull, it's considered "in transit".
+ */
+export function useGraceArea(
+  triggerElement: Ref<HTMLElement | undefined>,
+  containerElement: Ref<HTMLElement | undefined>,
+) {
+  const isPointerInTransit = ref(false);
+  const pointerGraceArea = ref<Polygon | null>(null);
+
+  let resetTimer = 0;
+  const exitListeners = new Set<() => void>();
+
+  function clearResetTimer() {
+    if (resetTimer) {
+      clearTimeout(resetTimer);
+      resetTimer = 0;
+    }
+  }
+
+  function scheduleTransitReset() {
+    clearResetTimer();
+    resetTimer = globalThis.setTimeout(() => {
+      isPointerInTransit.value = false;
+      resetTimer = 0;
+    }, POINTER_TRANSIT_TIMEOUT);
+  }
+
+  function handleRemoveGraceArea() {
+    pointerGraceArea.value = null;
+    isPointerInTransit.value = false;
+    clearResetTimer();
+  }
+
+  function handleCreateGraceArea(event: PointerEvent, hoverTarget: HTMLElement | undefined) {
+    if (!hoverTarget) return;
+    const currentTarget = event.currentTarget as HTMLElement;
+    const exitPoint = { x: event.clientX, y: event.clientY };
+    const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
+    const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide, 1);
+    const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
+    pointerGraceArea.value = getHull([...paddedExitPoints, ...hoverTargetPoints]);
+    isPointerInTransit.value = true;
+    scheduleTransitReset();
+  }
+
+  watchEffect((cleanup) => {
+    const trigger = triggerElement.value;
+    const container = containerElement.value;
+    if (!trigger || !container) return;
+
+    const onTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, containerElement.value);
+    const onContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, triggerElement.value);
+
+    trigger.addEventListener('pointerleave', onTriggerLeave);
+    container.addEventListener('pointerleave', onContentLeave);
+
+    cleanup(() => {
+      trigger.removeEventListener('pointerleave', onTriggerLeave);
+      container.removeEventListener('pointerleave', onContentLeave);
+    });
+  });
+
+  watchEffect((cleanup) => {
+    if (!pointerGraceArea.value) return;
+    const doc = triggerElement.value?.ownerDocument;
+    if (!doc) return;
+
+    const onMove = (event: PointerEvent) => {
+      if (!pointerGraceArea.value || !(event.target instanceof Element)) return;
+      const target = event.target;
+      const point = { x: event.clientX, y: event.clientY };
+      const hasEnteredTarget
+        = triggerElement.value?.contains(target) || containerElement.value?.contains(target);
+      const outside = !isPointInPolygon(point, pointerGraceArea.value);
+      const isAnotherGraceTrigger = !!target.closest('[data-grace-area-trigger]');
+
+      if (hasEnteredTarget) {
+        handleRemoveGraceArea();
+      }
+      else if (outside || isAnotherGraceTrigger) {
+        handleRemoveGraceArea();
+        for (const fn of exitListeners) fn();
+      }
+    };
+
+    doc.addEventListener('pointermove', onMove);
+    cleanup(() => doc.removeEventListener('pointermove', onMove));
+  });
+
+  onScopeDispose(() => {
+    clearResetTimer();
+    isPointerInTransit.value = false;
+    exitListeners.clear();
+  });
+
+  return {
+    isPointerInTransit,
+    onPointerExit(fn: () => void) {
+      exitListeners.add(fn);
+      return () => exitListeners.delete(fn);
+    },
+  };
+}
+
+function getExitSideFromRect(point: Point, rect: DOMRect): Side {
+  const top = Math.abs(rect.top - point.y);
+  const bottom = Math.abs(rect.bottom - point.y);
+  const right = Math.abs(rect.right - point.x);
+  const left = Math.abs(rect.left - point.x);
+  const min = Math.min(top, bottom, right, left);
+  if (min === left) return 'left';
+  if (min === right) return 'right';
+  if (min === top) return 'top';
+  return 'bottom';
+}
+
+function getPaddedExitPoints(exitPoint: Point, exitSide: Side, padding = 5): Point[] {
+  switch (exitSide) {
+    case 'top':
+      return [
+        { x: exitPoint.x - padding, y: exitPoint.y + padding },
+        { x: exitPoint.x + padding, y: exitPoint.y + padding },
+      ];
+    case 'bottom':
+      return [
+        { x: exitPoint.x - padding, y: exitPoint.y - padding },
+        { x: exitPoint.x + padding, y: exitPoint.y - padding },
+      ];
+    case 'left':
+      return [
+        { x: exitPoint.x + padding, y: exitPoint.y - padding },
+        { x: exitPoint.x + padding, y: exitPoint.y + padding },
+      ];
+    case 'right':
+      return [
+        { x: exitPoint.x - padding, y: exitPoint.y - padding },
+        { x: exitPoint.x - padding, y: exitPoint.y + padding },
+      ];
+  }
+}
+
+function getPointsFromRect(rect: DOMRect): Point[] {
+  const { top, right, bottom, left } = rect;
+  return [
+    { x: left, y: top },
+    { x: right, y: top },
+    { x: right, y: bottom },
+    { x: left, y: bottom },
+  ];
+}
+
+function isPointInPolygon(point: Point, polygon: Polygon): boolean {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i]!.x;
+    const yi = polygon[i]!.y;
+    const xj = polygon[j]!.x;
+    const yj = polygon[j]!.y;
+    const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+
+function getHull<P extends Point>(points: readonly P[]): P[] {
+  const sorted = points.slice().sort((a, b) => {
+    if (a.x !== b.x) return a.x - b.x;
+    return a.y - b.y;
+  });
+  return getHullPresorted(sorted);
+}
+
+function getHullPresorted<P extends Point>(points: readonly P[]): P[] {
+  if (points.length <= 1) return points.slice();
+
+  const upper: P[] = [];
+  for (const p of points) {
+    while (upper.length >= 2) {
+      const q = upper[upper.length - 1]!;
+      const r = upper[upper.length - 2]!;
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upper.pop();
+      else break;
+    }
+    upper.push(p);
+  }
+  upper.pop();
+
+  const lower: P[] = [];
+  for (let i = points.length - 1; i >= 0; i--) {
+    const p = points[i]!;
+    while (lower.length >= 2) {
+      const q = lower[lower.length - 1]!;
+      const r = lower[lower.length - 2]!;
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lower.pop();
+      else break;
+    }
+    lower.push(p);
+  }
+  lower.pop();
+
+  if (
+    upper.length === 1
+    && lower.length === 1
+    && upper[0]!.x === lower[0]!.x
+    && upper[0]!.y === lower[0]!.y
+  ) {
+    return upper;
+  }
+  return upper.concat(lower);
+}
diff --git a/vue/primitives/src/utils/useHideOthers.ts b/vue/primitives/src/utils/useHideOthers.ts
new file mode 100644
index 0000000..d8e25d1
--- /dev/null
+++ b/vue/primitives/src/utils/useHideOthers.ts
@@ -0,0 +1,59 @@
+import type { MaybeComputedElementRef } from '@robonen/vue';
+import { defaultWindow, tryOnScopeDispose, unrefElement } from '@robonen/vue';
+import { hideOthers } from '@robonen/platform/browsers';
+import { watch } from 'vue';
+
+type Undo = () => void;
+
+const CLOSED_POPOVER_SELECTOR = '[popover]:not(:popover-open)';
+
+/**
+ * Isolated so the try/catch doesn't inhibit Turbofan optimization of the
+ * watcher callback. `:popover-open` throws in browsers that don't support it
+ * (e.g. Safari 18).
+ */
+function isInClosedPopover(el: Element): boolean {
+  try {
+    return el.closest(CLOSED_POPOVER_SELECTOR) !== null;
+  }
+  catch {
+    return false;
+  }
+}
+
+/**
+ * @name useHideOthers
+ * @category Browser
+ * @description Hides every sibling element of `target` from assistive technologies
+ * by setting `aria-hidden="true"`. Automatically restores the original state when
+ * the target is removed or the component scope is disposed. Skips elements living
+ * inside a closed native `[popover]` to avoid double-hiding.
+ *
+ * @param {MaybeComputedElementRef} target Element whose siblings should be aria-hidden
+ *
+ * @since 0.0.14
+ */
+export function useHideOthers(target: MaybeComputedElementRef): void {
+  if (!defaultWindow) return;
+
+  let undo: Undo | undefined;
+
+  watch(() => unrefElement(target), (raw) => {
+    if (undo) {
+      undo();
+      undo = undefined;
+    }
+
+    const el = raw as HTMLElement | undefined;
+    if (!el || isInClosedPopover(el)) return;
+
+    undo = hideOthers(el);
+  }, { flush: 'post' });
+
+  tryOnScopeDispose(() => {
+    if (undo) {
+      undo();
+      undo = undefined;
+    }
+  });
+}
diff --git a/vue/primitives/src/visually-hidden/VisuallyHidden.vue b/vue/primitives/src/visually-hidden/VisuallyHidden.vue
new file mode 100644
index 0000000..80357bd
--- /dev/null
+++ b/vue/primitives/src/visually-hidden/VisuallyHidden.vue
@@ -0,0 +1,50 @@
+<script lang="ts">
+import type { PrimitiveProps } from '../primitive';
+
+export interface VisuallyHiddenProps extends PrimitiveProps {
+  /**
+   * Exclude the element from the accessibility tree entirely.
+   * Useful when the content is purely decorative and must not be announced.
+   * @default false
+   */
+  feature?: 'focusable' | 'hidden';
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from '../primitive';
+import { useForwardExpose } from '@robonen/vue';
+
+const { as = 'span', feature = 'focusable' } = defineProps<VisuallyHiddenProps>();
+
+const { forwardRef } = useForwardExpose();
+
+const style = {
+  position: 'absolute',
+  top: '-1px',
+  left: '-1px',
+  width: '1px',
+  height: '1px',
+  padding: '0',
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  clipPath: 'inset(50%)',
+  whiteSpace: 'nowrap',
+  wordWrap: 'normal',
+  border: '0',
+} as const;
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as="as"
+    :style="style"
+    :tabindex="feature === 'hidden' ? -1 : undefined"
+    :aria-hidden="feature === 'hidden' ? true : undefined"
+    :data-visually-hidden="feature"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/vue/primitives/src/visually-hidden/__test__/VisuallyHidden.test.ts b/vue/primitives/src/visually-hidden/__test__/VisuallyHidden.test.ts
new file mode 100644
index 0000000..21878e6
--- /dev/null
+++ b/vue/primitives/src/visually-hidden/__test__/VisuallyHidden.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import VisuallyHidden from '../VisuallyHidden.vue';
+
+describe('VisuallyHidden', () => {
+  it('renders a span with sr-only style by default', () => {
+    const w = mount(VisuallyHidden, { slots: { default: 'Screen reader only' } });
+
+    const el = w.element as HTMLElement;
+    expect(el.tagName).toBe('SPAN');
+    expect(el.style.position).toBe('absolute');
+    expect(el.style.width).toBe('1px');
+    expect(el.style.height).toBe('1px');
+    expect(el.style.overflow).toBe('hidden');
+    expect(w.text()).toBe('Screen reader only');
+  });
+
+  it('does not set aria-hidden by default (content is announced)', () => {
+    const w = mount(VisuallyHidden, { slots: { default: 'x' } });
+    expect(w.element.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('sets aria-hidden when feature="hidden"', () => {
+    const w = mount(VisuallyHidden, {
+      props: { feature: 'hidden' },
+      slots: { default: 'x' },
+    });
+
+    expect(w.element.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('exposes a data attribute describing the feature', () => {
+    const w = mount(VisuallyHidden, { slots: { default: 'x' } });
+    expect(w.element.getAttribute('data-visually-hidden')).toBe('focusable');
+  });
+});
diff --git a/vue/primitives/src/visually-hidden/index.ts b/vue/primitives/src/visually-hidden/index.ts
new file mode 100644
index 0000000..c9a2ee5
--- /dev/null
+++ b/vue/primitives/src/visually-hidden/index.ts
@@ -0,0 +1,2 @@
+export { default as VisuallyHidden } from './VisuallyHidden.vue';
+export type { VisuallyHiddenProps } from './VisuallyHidden.vue';
diff --git a/vue/primitives/tsconfig.json b/vue/primitives/tsconfig.json
index 8ecb689..2781e66 100644
--- a/vue/primitives/tsconfig.json
+++ b/vue/primitives/tsconfig.json
@@ -1,17 +1,7 @@
 {
-  "extends": "@robonen/tsconfig/tsconfig.json",
-  "compilerOptions": {
-    "lib": ["ESNext", "DOM"],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "vueCompilerOptions": {
-    "strictTemplates": true,
-    "fallthroughAttributes": true,
-    "inferTemplateDollarAttrs": true,
-    "inferTemplateDollarEl": true,
-    "inferTemplateDollarRefs": true
-  }
-}
\ No newline at end of file
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/vue/primitives/tsconfig.node.json b/vue/primitives/tsconfig.node.json
new file mode 100644
index 0000000..edc474f
--- /dev/null
+++ b/vue/primitives/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts"]
+}
diff --git a/vue/primitives/tsconfig.src.json b/vue/primitives/tsconfig.src.json
new file mode 100644
index 0000000..522e7c7
--- /dev/null
+++ b/vue/primitives/tsconfig.src.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@robonen/tsconfig/tsconfig.vue.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": [],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.src.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}
diff --git a/vue/primitives/tsdown.config.ts b/vue/primitives/tsdown.config.ts
index b47be46..c315bda 100644
--- a/vue/primitives/tsdown.config.ts
+++ b/vue/primitives/tsdown.config.ts
@@ -4,7 +4,8 @@ import Vue from 'unplugin-vue/rolldown';
 
 export default defineConfig({
   ...sharedConfig,
-  entry: ['src/index.ts'],
+  tsconfig: './tsconfig.src.json',
+  entry: ['src/index.ts', 'src/*/index.ts'],
   plugins: [Vue({ isProduction: true })],
   dts: { vue: true },
   deps: {
@@ -14,12 +15,14 @@ export default defineConfig({
   inputOptions: {
     resolve: {
       alias: {
-        // We need to alias @vue/shared to its ESM build to avoid issues
-        // with tree-shaking and module resolution in Rolldown
         '@vue/shared': '@vue/shared/dist/shared.esm-bundler.js',
       },
     },
   },
+  outputOptions: {
+    ...sharedConfig.outputOptions,
+    chunkFileNames: 'shared/[name]-[hash].js',
+  },
   define: {
     __DEV__: 'false',
   },
diff --git a/vue/primitives/vitest.config.ts b/vue/primitives/vitest.config.ts
index 4cf3c85..56f5779 100644
--- a/vue/primitives/vitest.config.ts
+++ b/vue/primitives/vitest.config.ts
@@ -1,6 +1,7 @@
+import { resolve } from 'node:path';
+import { playwright } from '@vitest/browser-playwright';
 import Vue from 'unplugin-vue/vite';
 import { defineConfig } from 'vitest/config';
-import { resolve } from 'node:path';
 
 export default defineConfig({
   plugins: [Vue()],
@@ -13,6 +14,11 @@ export default defineConfig({
     },
   },
   test: {
-    environment: 'jsdom',
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      headless: true,
+      instances: [{ browser: 'chromium' }],
+    },
   },
 });