@imaginario27/air-ui-ds 1.15.1 → 1.15.3

package/CHANGELOG.md

@@ -5,6 +5,28 @@ All notable changes to this package are documented in this file.
 Historical releases were reconstructed from git history (GitHub repository) and npm publish dates.
 Future releases will include detailed entries generated with Changesets.
 
+## 1.15.2 - 2026-07-02
+
+Release type: patch.
+Commits found in range: 1.
+
+### Fixed
+
+1. close notifications popover on view-all and item click ([9c1c041](https://github.com/imaginario27/air-ui/commit/9c1c04193f63767785504892dc2e19c2efec07e2))
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.15.1 - 2026-07-01
+
+Release type: patch.
+Commits found in range: 1.
+
+### Added
+
+1. pass unit prop verbatim and add limit prop to NotificationsPopover ([3fe78ba](https://github.com/imaginario27/air-ui/commit/3fe78ba2f4b2d42a16205e08b9669bddc2eabdeb))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.15.0 - 2026-06-30
 
 Release type: minor.

package/components/buttons/PaginationButton.vue

@@ -15,6 +15,7 @@
             props.disabled ? 'opacity-50 hover:cursor-not-allowed hover:bg-transparent' : 'hover:cursor-pointer'
         ]"
         :disabled="props.disabled"
+        :aria-label="ariaLabel"
         @click="emitClick"
     >
         <slot />
@@ -33,6 +34,10 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    ariaLabel: {
+        type: String as PropType<string>,
+        default: 'Navigation button',
+    },
 })
 
 // Emits

package/components/notifications/NotificationListItem.vue

@@ -41,9 +41,11 @@
                     {{ title }}
                 </span>
 
-                <slot name="description" />
+                <div v-if="$slots.description" class="max-w-[800px]">
+                    <slot name="description" />
+                </div>
 
-                <p v-if="!$slots.description" class="text-sm text-text-default">
+                <p v-if="!$slots.description" class="text-sm text-text-default max-w-[800px]">
                     {{ description }}
                 </p>
             </div>
@@ -53,8 +55,9 @@
                     <Icon
                         :name="timeAgoIcon"
                         :size="IconSize.XS"
+                        iconClass="text-icon-neutral-subtle"
                     />
-                    <span class="text-xs text-text-neutral-subtle">
+                    <span class="text-xs text-text-neutral-subtle whitespace-nowrap select-none">
                         {{ timeAgo }}
                     </span>
                 </div>
@@ -62,8 +65,9 @@
                     <Icon
                         :name="authorIcon"
                         :size="IconSize.XS"
+                        iconClass="text-icon-neutral-subtle"
                     />
-                    <span class="text-xs text-text-neutral-subtle">
+                    <span class="text-xs text-text-neutral-subtle whitespace-nowrap select-none">
                         {{ author }}
                     </span>
                 </div>
@@ -152,11 +156,12 @@ const props = defineProps({
     },
 })
 
-const emit = defineEmits(['update:modelValue', 'remove'])
+const emit = defineEmits(['update:modelValue', 'remove', 'itemClick'])
 
-function onItemClick() {
+const onItemClick = () => {
     if (!props.modelValue) {
         emit('update:modelValue', true)
     }
+    emit('itemClick')
 }
 </script>

package/components/notifications/NotificationsPopover.vue

@@ -5,9 +5,9 @@
         :trigger
         :popoverClass="['px-0 py-3', popoverClass]"
     >
-        <template #content>
+        <template #content="{ onClose }">
             <div
-                v-if="isLoading && !hasError" 
+                v-if="isLoading && !hasError"
                 class="w-full flex justify-center py-3"
             >
                 <Loading 
@@ -52,6 +52,7 @@
                             :text="viewAllText"
                             :to="viewAllLink"
                             textClass="text-text-default text-sm! hover:text-text-primary-brand-hover font-normal"
+                            @click="onViewAllClick($event, onClose)"
                         />
                     </div>
 
@@ -92,6 +93,7 @@
                             :removeAriaLabel="listRemoveItemAriaLabel"
                             @update:model-value="onReadStatusChange(notification.id, $event)"
                             @remove="onRemoveNotification(notification.id)"
+                            @itemClick="onClose"
                         />
                     </template>
 
@@ -309,6 +311,11 @@ const filteredList = computed(() => {
 })
 
 // Handlers
+const onViewAllClick = (event: MouseEvent, onClose: () => void) => {
+    if (!props.viewAllLink) event.preventDefault()
+    onClose()
+}
+
 const onRemoveNotification = (id: string) => {
     internalList.value = internalList.value.filter(notification => notification.id !== id)
     emit('remove', { id })

package/components/pagination/ButtonPagination.vue

@@ -53,9 +53,10 @@
                 ]"
             >
                 <!-- Previous Button -->
-                <PaginationButton 
+                <PaginationButton
                     :styleType
-                    :disabled="modelValue === 1" 
+                    :disabled="modelValue === 1"
+                    :ariaLabel="ariaLabelPrevious"
                     @click="goToPreviousPage"
                 >
                     <Icon
@@ -69,6 +70,8 @@
                     v-for="page in visiblePages"
                     :key="page"
                     :styleType
+                    :ariaLabel="pageAriaLabel(page)"
+                    :aria-current="page === modelValue ? 'page' : undefined"
                     :class="[
                         styleType === ButtonPaginationStyle.BUTTON && 'border border-border-default',
                         page === modelValue ? [
@@ -111,9 +114,10 @@
                 </PaginationButton>
 
                 <!-- Next Button -->
-                <PaginationButton 
+                <PaginationButton
                     :styleType
                     :disabled="modelValue === totalPages"
+                    :ariaLabel="ariaLabelNext"
                     @click="goToNextPage"
                 >
                     <Icon 
@@ -168,6 +172,18 @@ const props = defineProps({
         type: Number as PropType<number>,
         default: 1024,
     },
+    ariaLabelPrevious: {
+        type: String as PropType<string>,
+        default: 'Previous page',
+    },
+    ariaLabelNext: {
+        type: String as PropType<string>,
+        default: 'Next page',
+    },
+    ariaLabelPage: {
+        type: String as PropType<string>,
+        default: 'Page {page}',
+    },
 })
 
 // Composables
@@ -262,6 +278,11 @@ const handlePageClick = (page: string | number) => {
     emit("update:modelValue", page)
 }
 
+const pageAriaLabel = (page: string | number) => {
+    if (page === '...') return undefined
+    return props.ariaLabelPage.replace('{page}', page.toString())
+}
+
 // Watchers
 watch(itemsPerPage, (newVal) => {
     emit('update:modelValue', 1) // Reset to page 1 when rows per page changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.15.1",
+    "version": "1.15.3",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",