@imaginario27/air-ui-ds 1.15.3 → 1.17.0

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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.3 - 2026-07-03
+
+Release type: patch.
+Commits found in range: 1.
+
+### Fixed
+
+1. add accessible aria-labels to pagination buttons ([58b1770](https://github.com/imaginario27/air-ui/commit/58b1770522a70786df5a02e7ad32ed8646b363a9))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.15.2 - 2026-07-02
 
 Release type: patch.

package/components/avatars/Avatar.vue

@@ -13,7 +13,7 @@
             ],
             isInteractive && [
                 hoverBorderSizeClass,
-                'border-border-primary-brand-hover cursor-pointer'
+                'border-border-primary-brand-hover cursor-pointer transition-[border-width] duration-200 ease-out'
             ],
         ]"
     >

package/components/buttons/ActionButton.vue

@@ -7,6 +7,7 @@
             'flex items-center justify-center',
             isRounded ? 'rounded-full' : 'rounded-button',
             'text-nowrap',
+            'transition-colors duration-200 ease-out',
             ...buttonStyleClass,
             buttonSizeClass,
             horizontalPaddingClass,
@@ -26,12 +27,7 @@
     >
         <!-- Loading State -->
         <template v-if="isLoading">
-            <div class="animate-spin">
-                <Icon 
-                    name="mdi:loading"
-                    :iconClass="[iconSizeClass, iconColorClass]"
-                />
-            </div>
+            <Spinner :class="[iconSizeClass, spinnerColorClass]" />
             
             <span :class="['font-semibold', 'leading-none', 'select-none', textSizeClass, textClass]">
                 {{ loadingText }}
@@ -330,6 +326,24 @@ const iconColorClass = computed(() => {
     return variant[props.styleType as ButtonStyleType] || '!text-text-default'
 })
 
+const spinnerColorClass = computed(() => {
+    const variant = {
+        [ButtonStyleType.PRIMARY_BRAND_FILLED]: 'border-x-border-neutral-on-filled! border-b-border-neutral-on-filled!',
+        [ButtonStyleType.PRIMARY_BRAND_SOFT]: 'border-x-border-primary-brand-default! border-b-border-primary-brand-default!',
+        [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: 'border-x-border-primary-brand-default! border-b-border-primary-brand-default!',
+        [ButtonStyleType.SECONDARY_BRAND_FILLED]: 'border-x-border-neutral-on-filled! border-b-border-neutral-on-filled!',
+        [ButtonStyleType.NEUTRAL_FILLED]: 'border-x-border-neutral-on-filled! border-b-border-neutral-on-filled!',
+        [ButtonStyleType.NEUTRAL_OUTLINED]: 'border-x-border-primary-brand-default! border-b-border-primary-brand-default!',
+        [ButtonStyleType.NEUTRAL_TRANSPARENT]: 'border-x-border-primary-brand-default! border-b-border-primary-brand-default!',
+        [ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE]: 'border-x-border-primary-brand-default! border-b-border-primary-brand-default!',
+        [ButtonStyleType.DELETE_FILLED]: 'border-x-border-neutral-on-filled! border-b-border-neutral-on-filled!',
+        [ButtonStyleType.DELETE_SOFT]: 'border-x-border-delete-default! border-b-border-delete-default!',
+        [ButtonStyleType.DELETE_OUTLINED]: 'border-x-border-delete-default! border-b-border-delete-default!',
+        [ButtonStyleType.DELETE_TRANSPARENT]: 'border-x-border-delete-default! border-b-border-delete-default!',
+    }
+    return variant[props.styleType as ButtonStyleType] || 'border-border-primary-brand-default'
+})
+
 const horizontalPaddingClass = computed(() => {
     let variant
 

package/components/buttons/ActionIconButton.vue

@@ -7,6 +7,7 @@
             'flex items-center justify-center rounded-button',
             isRounded ? 'rounded-full' : 'rounded-button',
             'aspect-square',
+            'transition-colors duration-200 ease-out',
             ...buttonStyleClass,
             buttonSizeClass,
             disabled && 'opacity-disabled cursor-not-allowed pointer-events-none',

package/components/buttons/PaginationButton.vue

@@ -11,6 +11,7 @@
             'text-sm',
             'text-text-default',
             'font-semibold',
+            'transition-colors duration-200 ease-out',
             'hover:bg-background-neutral-hover',
             props.disabled ? 'opacity-50 hover:cursor-not-allowed hover:bg-transparent' : 'hover:cursor-pointer'
         ]"

package/components/buttons/toggle/ToggleButton.vue

@@ -7,6 +7,7 @@
         :class="[
             'flex items-center justify-center',
             'text-nowrap',
+            'transition-colors duration-200 ease-out',
             ...buttonStyleClass,
             buttonSizeClass,
             horizontalPaddingClass,

package/components/cards/Card.vue

@@ -8,7 +8,7 @@
             'rounded-lg',
             hasShadow ? 'shadow-sm' : undefined,
             'w-full',
-            hasBackgroundHover && 'hover:bg-background-neutral-subtlest/40',
+            hasBackgroundHover && 'transition-colors duration-200 hover:bg-background-neutral-subtlest/40',
         ]"
     >
         <slot />

package/components/cards/specific/SelectableCard.vue

@@ -9,7 +9,7 @@
         :class="[
             'lg:p-5',
             selectMode === CardSelectionMode.CARD && isHoverable &&
-                'hover:border-border-neutral-hover cursor-pointer transition-shadow duration-300',
+                'hover:border-border-neutral-hover cursor-pointer transition-[box-shadow,border-color] duration-300 ease-out',
             selectMode === CardSelectionMode.CARD && 'outline-none focus-visible:ring-2 focus-visible:ring-border-primary-brand-default',
             modelValue && '!border-border-primary-brand-active',
             disabled && 'opacity-disabled cursor-not-allowed',