Sync/2026 04 27

.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/app.vue

@@ -1,37 +1,15 @@
 <script lang="ts" setup>
-import { PApp } from '#components';
-import {
-  computed,
-  provide,
-  queryCollectionNavigation,
-  queryCollectionSearchSections,
-  useAppConfig,
-  useAsyncData,
-  useColorMode,
-  useFaviconFromTheme,
-  useHead,
-  useLazyAsyncData,
-  useNavigation,
-  useRoute,
-  useSeoMeta,
-} from '#imports';
-import LayoutHeaderSearch from './components/header/layout-header-search.vue';
-import LayoutHeader from './components/header/layout-header.vue';
-import LayoutFooter from './components/layout-footer.vue';
+import { colors } from 'unocss/preset-mini';
 
 const route = useRoute();
 const appConfig = useAppConfig();
 const colorMode = useColorMode();
+const { style, link } = useTheme();
 
-const { data: navigation } = useAsyncData(
+const { data: navigation } = await useAsyncData(
   'navigation',
-  () => queryCollectionNavigation('docs', [
-    'framework',
-    'category',
-    'description',
-  ]),
+  () => queryCollectionNavigation('docs', ['framework', 'category', 'description']),
 );
-
 const { data: files } = useLazyAsyncData(
   'search',
   () => queryCollectionSearchSections('docs', {
@@ -42,32 +20,27 @@ const { data: files } = useLazyAsyncData(
   },
 );
 
-const color = computed(() => colorMode.value === 'dark' ? 'black' : 'white');
-const radius = computed(() => `:root { --pohon-ui-radius: ${appConfig.theme.radius}rem; }`);
-const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? ':root { --akar-primary: black; } .dark { --akar-primary: white; }' : ':root {}');
+const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.pohon.colors.neutral][900] : 'white');
 
 useHead({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
     { key: 'theme-color', name: 'theme-color', content: color },
   ],
-  style: [
-    { innerHTML: radius, id: 'pohon-ui-radius', tagPriority: -2 },
-    { innerHTML: blackAsPrimary, id: 'pohon-ui-black-as-primary', tagPriority: -2 },
-  ],
+  link: computed(() => [
+    // { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
+    { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` },
+    ...link.value,
+  ]),
+  style,
   htmlAttrs: {
     lang: 'en',
   },
 });
 
-useSeoMeta({
-  author: 'praburangki',
-  title: 'Akar',
-  ogTitle: 'Akar & Pohon UI',
-  description: 'Create beautiful, responsive & accessible web apps quickly with Vue or Nuxt.',
-  ogDescription: 'Create beautiful, responsive & accessible web apps quickly with Vue or Nuxt.',
+useServerSeoMeta({
+  ogSiteName: 'Akar',
   twitterCard: 'summary_large_image',
-  twitterCreator: '@praburangki',
 });
 
 useFaviconFromTheme();
@@ -80,30 +53,40 @@ provide('navigation', rootNavigation);
 <template>
   <PApp
     :toaster="appConfig.toaster"
-    :tooltip="{
-      delayDuration: 300,
-    }"
   >
     <NuxtLoadingIndicator
-      color="var(--akar-primary)"
+      color="var(--pohon-primary)"
       :height="2"
     />
 
-    <div :class="{ root: route.path.startsWith('/docs/') }">
-      <LayoutHeader v-if="!route.path.startsWith('/examples')" />
+    <div class="flex">
+      <div
+        class="flex-1 min-w-0"
+        :class="[route.path.startsWith('/docs/') && 'root']"
+      >
+        <template v-if="!route.path.startsWith('/examples')">
+          <Header />
+        </template>
 
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
 
-      <template v-if="!route.path.startsWith('/examples')">
-        <LayoutFooter />
+        <template v-if="!route.path.startsWith('/examples')">
+          <Footer />
+
+          <ClientOnly>
+            <Search
+              :files="files"
+              :navigation="navigationByFramework"
+            />
+          </ClientOnly>
+        </template>
+      </div>
 
+      <template v-if="!route.path.startsWith('/examples')">
         <ClientOnly>
-          <LayoutHeaderSearch
-            :files="files"
-            :navigation="navigationByFramework"
-          />
+          <Chat />
         </ClientOnly>
       </template>
     </div>

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/accordion/accordion-markdown-example.vue

@@ -11,9 +11,9 @@ const items = [
     content: 'Yes! While optimized for Nuxt, Pohon UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the [installation guide](/docs/pohon/getting-started/installation/vue) to get started.',
   },
   {
-    label: 'Will Pohon UI work with other CSS frameworks like Tailwind CSS?',
+    label: 'Will Pohon UI work with other CSS frameworks like UnoCSS?',
     icon: 'i-lucide:circle-help',
-    content: 'No. Pohon UI is designed exclusively for UnoCSS. Tailwind CSS support would require significant architecture changes due to different class naming conventions.',
+    content: 'No. Pohon UI is designed exclusively for UnoCSS. UnoCSS support would require significant architecture changes due to different class naming conventions.',
   },
   {
     label: 'How does Pohon UI handle accessibility?',

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>