Changes

.changeset/shaky-books-spend.md

@@ -0,0 +1,36 @@
+---
+"akar": minor
+"pohon-ui": minor
+---
+
+- feat(DropdownMenu): add filter component
+- feat(Checkbox/Switch): add support for custom true/false values
+- fix(useForwardExpose): sync currentElement on DOM update
+- fix(Calendar): parity + docs regen
+- feat: color components
+- feat: new TimeRangeField Component
+- fix(Toast): resolve accessibility issues flagged by axe-core
+- fix(DismissableLayer): guard against non-Element targets in isLayerExist
+- fix(useBodyScrollLock): prevent permanent scroll lock on rapid toggle
+- fix(useHideOthers): edge case with useHideOthers when nested in a native popover
+- fix(Splitter): emit correct units for pixel-sized panels in events
+- chore(Menu): add aria-labelledby to MenuGroup
+- fix(Combobox): close content when focus moves outside with openOnFocus
+- fix(Calendar): add role="application" to fix NVDA keyboard navigation
+- fix(Splitter): nested px group ignores defaultSize & percentage drift
+- fix(useHideOthers): handle browsers without :popover-open support (Safari 18)
+- fix(PinInput): paste only numeric text in numeric mode
+- fix(Combobox): prevent addOnBlur from adding raw input when selecting item
+- fix(useGraceArea): add nil guard for hover target in grace area creation
+- fix(Autocomplete): add IME composition input handling
+- fix(FocusScope): don't move focus if DOM mutation occurred before any nodes had focus
+- fix(tooltip,hovercard): close when scrollable ancestor is scrolled
+- fix(Listbox): restore highlightOnHover behavior
+- fix(useForwardProps): return Partial<T> to correctly type optional boolean props
+- fix(Select): normalize hidden control
+- fix(DateField): fixed direct incorrect passing of date values to input element
+- chore(deps): update vue (major)
+- fix(TimeField,DateField): avoid changing focus prematurely with previous segment value of 0
+- fix(ListboxVirtualizer): ignore non-element VNodes in slot children
+- fix(TimeField): change focus after pressing 0 more than once on hour segment with 12 hour locales
+- fix(MonthPicker, YearPicker): preserve day/month when selecting

.github/actions/setup/action.yml

@@ -6,7 +6,7 @@ runs:
 
   steps:
     - name: Install pnpm
-      uses: pnpm/action-setup@v4
+      uses: pnpm/action-setup@v5
 
     - name: Setup Node.js environment
       uses: actions/setup-node@v6

.github/copilot-instructions.md

@@ -151,7 +151,7 @@ describe('given ComponentName', () => {
 ## Important File Locations
 
 - Component constants: `packages/core/constant/components.ts`
-- Primitive base: `packages/core/src/primitive/primitive.ts`
+- APrimitive base: `packages/core/src/primitive/primitive.ts`
 - Pohon module entry: `packages/pohon/src/module.ts`
 - Docs config: `docs/nuxt.config.ts`
 - Root scripts: `package.json` (workspace root)

.github/workflows/ci.yaml

@@ -33,7 +33,7 @@ jobs:
       pohon: ${{ steps.filter.outputs.pohon }}
       docs: ${{ steps.filter.outputs.docs }}
     steps:
-      - uses: dorny/paths-filter@v3
+      - uses: dorny/paths-filter@v4
         id: filter
         with:
           filters: |

docs/app/components/content/examples/akar/a-pin-input.vue

@@ -3,8 +3,8 @@ import { APinInputInput, APinInputRoot } from 'akar';
 import { ref } from 'vue';
 
 const value = ref<Array<string>>([]);
-function handleComplete(e: Array<string>) {
-  alert(e.join(''));
+function handleComplete(event: Array<string>) {
+  alert(event.join(''));
 }
 </script>
 

docs/app/components/content/examples/pohon/avatar-group/avatar-group-link-example.vue

@@ -3,7 +3,7 @@
     <PLink
       to="https://github.com/praburangki"
       target="_blank"
-      class="hover:ring-primary transition"
+      class="transition hover:ring-primary"
       raw
     >
       <PAvatar
@@ -15,7 +15,7 @@
     <PLink
       to="https://github.com/wahyu-ivan"
       target="_blank"
-      class="hover:ring-primary transition"
+      class="transition hover:ring-primary"
       raw
     >
       <PAvatar
@@ -27,7 +27,7 @@
     <PLink
       to="https://github.com/GunawanAhmad"
       target="_blank"
-      class="hover:ring-primary transition"
+      class="transition hover:ring-primary"
       raw
     >
       <PAvatar

docs/app/components/content/examples/pohon/command-palette/command-palette-items-children-example.vue

@@ -13,26 +13,26 @@ const groups = [{
       label: 'New file',
       icon: 'i-lucide:file-plus',
       suffix: 'Create a new file in the current directory',
-      onSelect(e: Event) {
-        e.preventDefault();
+      onSelect(event: Event) {
+        event.preventDefault();
         toast.add({ title: 'New file created!' });
       },
       kbds: ['meta', 'N'],
     }, {
       label: 'New folder',
       icon: 'i-lucide:folder-plus',
       suffix: 'Create a new folder in the current directory',
-      onSelect(e: Event) {
-        e.preventDefault();
+      onSelect(event: Event) {
+        event.preventDefault();
         toast.add({ title: 'New folder created!' });
       },
       kbds: ['meta', 'F'],
     }, {
       label: 'New project',
       icon: 'i-lucide:folder-git',
       suffix: 'Create a new project from a template',
-      onSelect(e: Event) {
-        e.preventDefault();
+      onSelect(event: Event) {
+        event.preventDefault();
         toast.add({ title: 'New project created!' });
       },
       kbds: ['meta', 'P'],
@@ -44,17 +44,17 @@ const groups = [{
       label: 'Copy link',
       icon: 'i-lucide:link',
       suffix: 'Copy a link to the current item',
-      onSelect(e: Event) {
-        e.preventDefault();
+      onSelect(event: Event) {
+        event.preventDefault();
         toast.add({ title: 'Link copied to clipboard!' });
       },
       kbds: ['meta', 'L'],
     }, {
       label: 'Share via email',
       icon: 'i-lucide:mail',
       suffix: 'Share the current item via email',
-      onSelect(e: Event) {
-        e.preventDefault();
+      onSelect(event: Event) {
+        event.preventDefault();
         toast.add({ title: 'Share via email dialog opened!' });
       },
     }, {
@@ -64,22 +64,22 @@ const groups = [{
       children: [{
         label: 'Twitter',
         icon: 'i-simple-icons:twitter',
-        onSelect(e: Event) {
-          e.preventDefault();
+        onSelect(event: Event) {
+          event.preventDefault();
           toast.add({ title: 'Shared on Twitter!' });
         },
       }, {
         label: 'LinkedIn',
         icon: 'i-simple-icons:linkedin',
-        onSelect(e: Event) {
-          e.preventDefault();
+        onSelect(event: Event) {
+          event.preventDefault();
           toast.add({ title: 'Shared on LinkedIn!' });
         },
       }, {
         label: 'Facebook',
         icon: 'i-simple-icons:facebook',
-        onSelect(e: Event) {
-          e.preventDefault();
+        onSelect(event: Event) {
+          event.preventDefault();
           toast.add({ title: 'Shared on Facebook!' });
         },
       }],
@@ -91,24 +91,24 @@ const groups = [{
       label: 'General',
       icon: 'i-lucide:sliders',
       suffix: 'Configure general settings',
-      onSelect(e: Event) {
-        e.preventDefault();
+      onSelect(event: Event) {
+        event.preventDefault();
         toast.add({ title: 'General settings opened!' });
       },
     }, {
       label: 'Appearance',
       icon: 'i-lucide:palette',
       suffix: 'Customize the appearance',
-      onSelect(e: Event) {
-        e.preventDefault();
+      onSelect(event: Event) {
+        event.preventDefault();
         toast.add({ title: 'Appearance settings opened!' });
       },
     }, {
       label: 'Security',
       icon: 'i-lucide:shield',
       suffix: 'Manage security settings',
-      onSelect(e: Event) {
-        e.preventDefault();
+      onSelect(event: Event) {
+        event.preventDefault();
         toast.add({ title: 'Security settings opened!' });
       },
     }],

docs/app/components/content/examples/pohon/context-menu/context-menu-checkbox-items-example.vue

@@ -17,8 +17,8 @@ const items = computed<Array<PContextMenuItem>>(() => [{
   onUpdateChecked(checked: boolean) {
     showSidebar.value = checked;
   },
-  onSelect(e: Event) {
-    e.preventDefault();
+  onSelect(event: Event) {
+    event.preventDefault();
   },
 }, {
   label: 'Show Toolbar',

docs/app/components/content/examples/pohon/context-menu/context-menu-color-items-example.vue

@@ -31,7 +31,7 @@ const items: Array<Array<PContextMenuItem>> = [
     :items="items"
     :pohon="{ content: 'w-48' }"
   >
-    <div class="border-border-accented text-sm border rounded-md border-dashed flex w-72 aspect-video items-center justify-center">
+    <div class="text-sm border border-border-accented rounded-md border-dashed flex w-72 aspect-video items-center justify-center">
       Right click here
     </div>
   </PContextMenu>

docs/app/components/content/examples/pohon/context-menu/context-menu-custom-slot-example.vue

@@ -23,7 +23,7 @@ const items = [
     :items="items"
     :pohon="{ content: 'w-48' }"
   >
-    <div class="border-border-accented text-sm border rounded-md border-dashed flex w-72 aspect-video items-center justify-center">
+    <div class="text-sm border border-border-accented rounded-md border-dashed flex w-72 aspect-video items-center justify-center">
       Right click here
     </div>
 

docs/app/components/content/examples/pohon/dropdown-menu/dropdown-menu-checkbox-items-example.vue

@@ -20,8 +20,8 @@ const items = computed(() => [{
   onUpdateChecked(checked: boolean) {
     showBookmarks.value = checked;
   },
-  onSelect(e: Event) {
-    e.preventDefault();
+  onSelect(event: Event) {
+    event.preventDefault();
   },
 }, {
   label: 'Show History',

docs/app/components/content/examples/pohon/marquee/marquee-screenshots.vue

@@ -13,7 +13,7 @@
         width="460"
         height="258"
         :alt="`Pohon UI Screenshot ${i}`"
-        class="border-border border rounded-lg bg-white aspect-video"
+        class="border border-border rounded-lg bg-white aspect-video"
       >
     </PMarquee>
     <PMarquee
@@ -28,7 +28,7 @@
         width="460"
         height="258"
         :alt="`Pohon UI Screenshot ${i}`"
-        class="border-border border rounded-lg bg-white aspect-video"
+        class="border border-border rounded-lg bg-white aspect-video"
       >
     </PMarquee>
     <PMarquee
@@ -44,7 +44,7 @@
         width="460"
         height="258"
         :alt="`Pohon UI Screenshot ${i}`"
-        class="border-border border rounded-lg bg-white aspect-video"
+        class="border border-border rounded-lg bg-white aspect-video"
       >
     </PMarquee>
   </div>

docs/app/components/content/examples/pohon/popover/popover-cursor-example.vue

@@ -25,7 +25,7 @@ const reference = computed(() => ({
     :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
   >
     <div
-      class="border-border-accented text-sm border rounded-md border-dashed flex w-72 aspect-video items-center justify-center"
+      class="text-sm border border-border-accented rounded-md border-dashed flex w-72 aspect-video items-center justify-center"
       @pointerenter="open = true"
       @pointerleave="open = false"
       @pointermove="(ev) => {

docs/app/components/content/examples/pohon/table/table-column-visibility-example.vue

@@ -112,8 +112,8 @@ const columnVisibility = ref({
           onUpdateChecked(checked: boolean) {
             table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
           },
-          onSelect(e: Event) {
-            e.preventDefault()
+          onSelect(event: Event) {
+            event.preventDefault()
           },
         }))"
         :content="{ align: 'end' }"

docs/app/components/content/examples/pohon/table/table-example.vue

@@ -301,8 +301,8 @@ function randomize() {
           onUpdateChecked(checked: boolean) {
             table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
           },
-          onSelect(e: Event) {
-            e.preventDefault()
+          onSelect(event: Event) {
+            event.preventDefault()
           },
         }))"
         :content="{ align: 'end' }"
@@ -330,7 +330,7 @@ function randomize() {
       </template>
     </PTable>
 
-    <div class="color-text-muted text-sm px-4 py-3.5">
+    <div class="text-sm color-text-muted px-4 py-3.5">
       {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
       {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
     </div>

docs/app/components/content/examples/pohon/table/table-row-select-event-example.vue

@@ -106,7 +106,7 @@ const table = useTemplateRef('table');
 
 const rowSelection = ref<Record<string, boolean>>({ });
 
-function onSelect(e: Event, row: PTableRow<Payment>) {
+function onSelect(event: Event, row: PTableRow<Payment>) {
   /* If you decide to also select the column you can do this  */
   row.toggleSelected(!row.getIsSelected());
 }

docs/app/components/content/examples/pohon/tooltip/tooltip-cursor-example.vue

@@ -25,7 +25,7 @@ const reference = computed(() => ({
     :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
   >
     <div
-      class="border-border-accented text-sm border rounded-md border-dashed flex w-72 aspect-video items-center justify-center"
+      class="text-sm border border-border-accented rounded-md border-dashed flex w-72 aspect-video items-center justify-center"
       @pointerenter="open = true"
       @pointerleave="open = false"
       @pointermove="(ev) => {

docs/app/components/content/examples/pohon/tree/tree-checkbox-items-example.vue

@@ -31,9 +31,9 @@ const items: Array<PTreeItem> = [
 
 const value = ref<(typeof items)>([]);
 
-function onSelect(e: ATreeItemSelectEvent<PTreeItem>) {
-  if (e.detail.originalEvent.type === 'click') {
-    e.preventDefault();
+function onSelect(event: ATreeItemSelectEvent<PTreeItem>) {
+  if (event.detail.originalEvent.type === 'click') {
+    event.preventDefault();
   }
 }
 </script>

docs/app/components/content/examples/pohon/tree/tree-drag-and-drop-example.vue

@@ -69,7 +69,7 @@ const tree = useTemplateRef<HTMLElement>('tree');
 useSortable(tree, items, {
   animation: 150,
   ghostClass: 'opacity-50',
-  onUpdate: (e: any) => moveItem(e.oldIndex, e.newIndex),
+  onUpdate: (event: any) => moveItem(event.oldIndex, event.newIndex),
 });
 </script>
 

docs/app/components/content/examples/pohon/tree/tree-on-select-example.vue

@@ -6,8 +6,8 @@ const items: Array<PTreeItem> = [
   {
     label: 'app/',
     defaultExpanded: true,
-    onSelect: (e: Event) => {
-      e.preventDefault();
+    onSelect: (event: Event) => {
+      event.preventDefault();
     },
     children: [
       {
@@ -31,9 +31,9 @@ const items: Array<PTreeItem> = [
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons:file-type-nuxt' },
 ];
 
-function onSelect(e: ATreeItemSelectEvent<PTreeItem>) {
-  if (e.detail.originalEvent.type === 'click') {
-    e.preventDefault();
+function onSelect(event: ATreeItemSelectEvent<PTreeItem>) {
+  if (event.detail.originalEvent.type === 'click') {
+    event.preventDefault();
   }
 }
 </script>