Merge remote-tracking branch 'origin/main' into v2

docs/.vitepress/plugins/ComponentPreview.ts

@@ -64,6 +64,7 @@ export default function (md: MarkdownRenderer) {
       const { realPath, path: _path } = state.env as MarkdownEnv
 
       const childFiles = readdirSync(resolve(dirname(realPath ?? _path), pathName), { withFileTypes: false, recursive: true })
+        .map(file => typeof file === 'string' ? file.split(/[/\\]/).join('/') : file)
 
       const groupedFiles = props.type === 'example'
         ? { tailwind: childFiles }

docs/content/docs/guides/dates.md

@@ -77,7 +77,7 @@ const date = new CalendarDate(1995, 8, 18)
 const minDate = new CalendarDate(1995, 8, 1)
 const maxDate = new CalendarDate(1995, 8, 31)
 
-parseStringToDateValue('1995-08-18') // returns a DateValue object
+parseStringToDateValue('1995-08-18', date) // returns a DateValue object
 toDate(date) // returns a Date object
 isCalendarDateTime(date) // returns false
 isZonedDateTime(date) // returns false

packages/core/src/Listbox/ListboxFilter.vue

@@ -62,7 +62,7 @@ onMounted(() => {
     :data-disabled="disabled ? '' : undefined"
     :aria-disabled="disabled ?? undefined"
     type="text"
-    @keydown.down.up.left.right.home.end.prevent="rootContext.onKeydownNavigation"
+    @keydown.down.up.home.end.prevent="rootContext.onKeydownNavigation"
     @keydown.enter="rootContext.onKeydownEnter"
     @input="(event: InputEvent) => {
       modelValue = (event.target as HTMLInputElement).value

packages/core/src/Listbox/ListboxRoot.vue

@@ -374,7 +374,7 @@ provideListboxRootContext({
     @focusout="async (event: FocusEvent) => {
       const target = (event.relatedTarget || event.target) as HTMLElement | null
       await nextTick()
-      if (highlightedElement && !currentElement.contains(target)) {
+      if (highlightedElement && currentElement && !currentElement.contains(target)) {
         onLeave(event)
       }
     }"

packages/core/src/Pagination/Pagination.test.ts

@@ -56,6 +56,74 @@ describe('given default Pagination', () => {
   })
 })
 
+const ALL_PAGINATION_BUTTONS_AS_A_PROPS = {
+  first: { as: 'a' },
+  prev: { as: 'a' },
+  listItem: { as: 'a' },
+  next: { as: 'a' },
+  last: { as: 'a' },
+}
+
+describe('given Pagination with <a> as buttons', () => {
+  let wrapper: VueWrapper<InstanceType<typeof Pagination>>
+
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    wrapper = mount(Pagination, { attachTo: document.body, props: { ...ALL_PAGINATION_BUTTONS_AS_A_PROPS } })
+  })
+
+  it('should pass axe accessibility tests', async () => {
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+
+  it('should not unselect page 1 after clicking on Prev Page trigger', async () => {
+    await wrapper.find('[aria-label="Previous Page"]').trigger('click')
+    expect(wrapper.find('[aria-label="Page 1"]').attributes('data-selected')).toBe('true')
+  })
+
+  it('should not unselect last page after clicking on Next Page trigger', async () => {
+    await wrapper.find('[aria-label="Last Page"]').trigger('click')
+    const lastPageLabel = wrapper.find('[data-selected="true"]').attributes('aria-label')
+    await wrapper.find('[aria-label="Next Page"]').trigger('click')
+    expect(wrapper.find('[data-selected="true"]').attributes('aria-label')).toBe(lastPageLabel)
+  })
+})
+
+describe('given Pagination with <a> as buttons and disabled', () => {
+  let wrapper: VueWrapper<InstanceType<typeof Pagination>>
+
+  const INITIAL_PAGE = 2 // Do not set to first or last page
+
+  beforeEach(async () => {
+    document.body.innerHTML = ''
+    wrapper = mount(Pagination, { attachTo: document.body, props: { ...ALL_PAGINATION_BUTTONS_AS_A_PROPS } })
+    await wrapper.find(`[aria-label="Page ${INITIAL_PAGE}"]`).trigger('click')
+    wrapper.setProps({ root: { disabled: true } })
+  })
+
+  it('should pass axe accessibility tests', async () => {
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+
+  it('should ignore clicking on First Page trigger', async () => {
+    await wrapper.find('[aria-label="First Page"]').trigger('click')
+
+    expect(wrapper.find('[data-selected="true"]').attributes('aria-label')).toBe(`Page ${INITIAL_PAGE}`)
+  })
+
+  it('should ignore clicking on Last Page trigger', async () => {
+    await wrapper.find('[aria-label="Last Page"]').trigger('click')
+
+    expect(wrapper.find('[data-selected="true"]').attributes('aria-label')).toBe(`Page ${INITIAL_PAGE}`)
+  })
+
+  it('should ignore clicking on any non-selected page', async () => {
+    await wrapper.find('[aria-label="Page 1"]').trigger('click')
+
+    expect(wrapper.find('[data-selected="true"]').attributes('aria-label')).toBe(`Page ${INITIAL_PAGE}`)
+  })
+})
+
 describe('given show-edges Pagination', () => {
   let wrapper: VueWrapper<InstanceType<typeof Pagination>>
 

packages/core/src/Pagination/PaginationFirst.vue

@@ -6,22 +6,25 @@ export interface PaginationFirstProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Primitive } from '@/Primitive'
 import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 const props = withDefaults(defineProps<PaginationFirstProps>(), { as: 'button' })
 
 const rootContext = injectPaginationRootContext()
 useForwardExpose()
+
+const disabled = computed((): boolean => rootContext.page.value === 1 || rootContext.disabled.value)
 </script>
 
 <template>
   <Primitive
     v-bind="props"
     aria-label="First Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="rootContext.page.value === 1 || rootContext.disabled.value"
-    @click="rootContext.onPageChange(1)"
+    :disabled
+    @click="!disabled && rootContext.onPageChange(1)"
   >
     <slot>First page</slot>
   </Primitive>

packages/core/src/Pagination/PaginationLast.vue

@@ -6,22 +6,25 @@ export interface PaginationLastProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Primitive } from '@/Primitive'
 import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 const props = withDefaults(defineProps<PaginationLastProps>(), { as: 'button' })
 
 const rootContext = injectPaginationRootContext()
 useForwardExpose()
+
+const disabled = computed((): boolean => rootContext.page.value === rootContext.pageCount.value || rootContext.disabled.value)
 </script>
 
 <template>
   <Primitive
     v-bind="props"
     aria-label="Last Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="rootContext.page.value === rootContext.pageCount.value || rootContext.disabled.value"
-    @click="rootContext.onPageChange(rootContext.pageCount.value)"
+    :disabled
+    @click="!disabled && rootContext.onPageChange(rootContext.pageCount.value)"
   >
     <slot>Last page</slot>
   </Primitive>

packages/core/src/Pagination/PaginationListItem.vue

@@ -9,15 +9,17 @@ export interface PaginationListItemProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { Primitive } from '@/Primitive'
 import { computed } from 'vue'
+import { Primitive } from '@/Primitive'
 import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 const props = withDefaults(defineProps<PaginationListItemProps>(), { as: 'button' })
 useForwardExpose()
 
 const rootContext = injectPaginationRootContext()
 const isSelected = computed(() => rootContext.page.value === props.value)
+
+const disabled = computed((): boolean => rootContext.disabled.value)
 </script>
 
 <template>
@@ -27,9 +29,9 @@ const isSelected = computed(() => rootContext.page.value === props.value)
     :aria-label="`Page ${value}`"
     :aria-current="isSelected ? 'page' : undefined"
     :data-selected="isSelected ? 'true' : undefined"
-    :disabled="rootContext.disabled.value"
+    :disabled
     :type="as === 'button' ? 'button' : undefined"
-    @click="rootContext.onPageChange(value)"
+    @click="!disabled && rootContext.onPageChange(value)"
   >
     <slot>{{ value }}</slot>
   </Primitive>

packages/core/src/Pagination/PaginationNext.vue

@@ -6,22 +6,25 @@ export interface PaginationNextProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Primitive } from '@/Primitive'
 import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 const props = withDefaults(defineProps<PaginationNextProps>(), { as: 'button' })
 
 useForwardExpose()
 const rootContext = injectPaginationRootContext()
+
+const disabled = computed((): boolean => rootContext.page.value === rootContext.pageCount.value || rootContext.disabled.value)
 </script>
 
 <template>
   <Primitive
     v-bind="props"
     aria-label="Next Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="rootContext.page.value === rootContext.pageCount.value || rootContext.disabled.value"
-    @click="rootContext.onPageChange(rootContext.page.value + 1)"
+    :disabled
+    @click="!disabled && rootContext.onPageChange(rootContext.page.value + 1)"
   >
     <slot>Next page</slot>
   </Primitive>

packages/core/src/Pagination/PaginationPrev.vue

@@ -6,22 +6,25 @@ export interface PaginationPrevProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Primitive } from '@/Primitive'
 import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 const props = withDefaults(defineProps<PaginationPrevProps>(), { as: 'button' })
 
 useForwardExpose()
 const rootContext = injectPaginationRootContext()
+
+const disabled = computed((): boolean => rootContext.page.value === 1 || rootContext.disabled.value)
 </script>
 
 <template>
   <Primitive
     v-bind="props"
     aria-label="Previous Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="rootContext.page.value === 1 || rootContext.disabled?.value"
-    @click="rootContext.onPageChange(rootContext.page.value - 1)"
+    :disabled
+    @click="!disabled && rootContext.onPageChange(rootContext.page.value - 1)"
   >
     <slot>Prev page</slot>
   </Primitive>

packages/core/src/Pagination/story/_Pagination.vue

@@ -1,31 +1,43 @@
 <script setup lang="ts">
-import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, type PaginationRootProps } from '..'
+import { computed } from 'vue'
+import { PaginationEllipsis, type PaginationEllipsisProps, PaginationFirst, type PaginationFirstProps, PaginationLast, type PaginationLastProps, PaginationList, PaginationListItem, type PaginationListItemProps, type PaginationListProps, PaginationNext, type PaginationNextProps, PaginationPrev, type PaginationPrevProps, PaginationRoot, type PaginationRootProps } from '..'
 
-const props = withDefaults(defineProps<{
-  total?: PaginationRootProps['total']
-  showEdges?: PaginationRootProps['showEdges']
-}>(), {
-  total: 100,
-})
+const props = defineProps<{
+  root?: PaginationRootProps
+  list?: PaginationListProps
+
+  first?: PaginationFirstProps
+  prev?: PaginationPrevProps
+
+  listItem?: Partial<PaginationListItemProps>
+  ellipsis?: PaginationEllipsisProps
+
+  next?: PaginationNextProps
+  last?: PaginationLastProps
+}>()
+
+const rootProps = computed(() => ({ total: 100, ...props.root }))
 </script>
 
 <template>
   <PaginationRoot
-    v-bind="props"
+    v-bind="rootProps"
     :items-per-page="10"
   >
     <PaginationList
       v-slot="{ items }"
+      v-bind="props.list"
       class="flex items-center gap-2 "
     >
-      <PaginationFirst />
-      <PaginationPrev />
+      <PaginationFirst v-bind="props.first" />
+      <PaginationPrev v-bind="props.prev" />
       <template v-for="(page, index) in items">
         <PaginationListItem
           v-if="page.type === 'page'"
           :key="index"
           class="border rounded px-4 py-2 data-[selected]:bg-grass8"
           :value="page.value"
+          v-bind="props.listItem"
         >
           {{ page.value }}
         </PaginationListItem>
@@ -34,12 +46,13 @@ const props = withDefaults(defineProps<{
           :key="page.type"
           :index="index"
           class="border rounded px-4 py-2 "
+          v-bind="props.ellipsis"
         >
           &#8230;
         </PaginationEllipsis>
       </template>
-      <PaginationNext />
-      <PaginationLast />
+      <PaginationNext v-bind="props.next" />
+      <PaginationLast v-bind="props.last" />
     </PaginationList>
   </PaginationRoot>
 </template>

packages/core/src/Select/SelectArrow.vue

@@ -6,7 +6,7 @@ export interface SelectArrowProps extends PopperArrowProps {}
 
 <script setup lang="ts">
 import { injectSelectRootContext } from './SelectRoot.vue'
-import { injectSelectContentContext } from './SelectContentImpl.vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import { PopperArrow } from '@/Popper'
 
 const props = withDefaults(defineProps<SelectArrowProps>(), {
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<SelectArrowProps>(), {
   as: 'svg',
 })
 const rootContext = injectSelectRootContext()
-const contentContext = injectSelectContentContext()
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
 </script>
 
 <template>