@imaginario27/air-ui-ds 1.15.3 → 1.16.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/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',

package/components/forms/fields/Switch.vue

@@ -0,0 +1,135 @@
+<template>
+    <div>
+        <!-- Visually hidden native checkbox (remains accessible to screen readers) -->
+        <input
+            :id="id"
+            type="checkbox"
+            :checked="modelValue"
+            class="sr-only"
+            :aria-label="ariaLabel || 'Toggle'"
+            :disabled="disabled"
+            @change="handleNativeChange"
+            @keydown.space.prevent="toggleSwitch"
+        >
+
+        <!-- Custom Switch -->
+        <div
+            role="switch"
+            :aria-checked="modelValue"
+            :aria-label="ariaLabel || 'Toggle'"
+            :class="[
+                'relative flex items-center',
+                controlFieldSizeClass,
+                'rounded-full transition-colors',
+                'border border-border-default',
+                modelValue ? checkedBackgroundClass : 'bg-background-neutral-subtle',
+                disabled ? 'bg-background-neutral-disabled cursor-not-allowed opacity-disabled' : 'cursor-pointer'
+            ]"
+            @click="toggleSwitch"
+        >
+            <div
+                :class="[
+                    'absolute bg-icon-on-filled rounded-full shadow-md transform transition-transform',
+                    'aspect-square',
+                    controlFieldHandlerSizeClass,
+                    modelValue ? controlFieldHandlerCheckedOffsetClass : controlFieldHandlerUncheckedOffsetClass,
+                    'bg-icon-neutral-on-filled-bg'
+                ]"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    id: {
+        type: String as PropType<string>,
+        required: true,
+    },
+    ariaLabel: String as PropType<string>,
+    modelValue: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    size: {
+        type: String as PropType<ControlFieldSize>,
+        default: ControlFieldSize.MD,
+        validator: (value: ControlFieldSize) => Object.values(ControlFieldSize).includes(value),
+    },
+    styleType: {
+        type: String as PropType<SwitchStyle>,
+        default: SwitchStyle.BRAND,
+        validator: (value: SwitchStyle) => Object.values(SwitchStyle).includes(value),
+    },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Computed classes
+const controlFieldSizeClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.XS]: 'w-[32px] h-[16px] min-w-[32px] min-h-[16px]',
+        [ControlFieldSize.SM]: 'w-[40px] h-[20px] min-w-[40px] min-h-[20px]',
+        [ControlFieldSize.MD]: 'w-[44px] h-[24px] min-w-[44px] min-h-[24px]',
+        [ControlFieldSize.LG]: 'w-[56px] h-[32px] min-w-[56px] min-h-[32px]',
+    }
+    return sizeVariant[props.size as ControlFieldSize] || 'w-[44px] h-[24px] min-w-[44px] min-h-[24px]'
+})
+
+const controlFieldHandlerSizeClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.XS]: 'w-[12px] h-[12px]',
+        [ControlFieldSize.SM]: 'w-[16px] h-[16px]',
+        [ControlFieldSize.MD]: 'w-[16px] h-[16px]',
+        [ControlFieldSize.LG]: 'w-[24px] h-[24px]',
+    }
+    return sizeVariant[props.size as ControlFieldSize] || 'w-[16px] h-[16px]'
+})
+
+const controlFieldHandlerUncheckedOffsetClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.XS]: 'translate-x-0.5',
+        [ControlFieldSize.SM]: 'translate-x-0.5',
+        [ControlFieldSize.MD]: 'translate-x-1',
+        [ControlFieldSize.LG]: 'translate-x-1',
+    }
+    return sizeVariant[props.size as ControlFieldSize] || 'translate-x-1'
+})
+
+const controlFieldHandlerCheckedOffsetClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.XS]: 'translate-x-[18px]',
+        [ControlFieldSize.SM]: 'translate-x-[22px]',
+        [ControlFieldSize.MD]: 'translate-x-6',
+        [ControlFieldSize.LG]: 'translate-x-7',
+    }
+    return sizeVariant[props.size as ControlFieldSize] || 'translate-x-6'
+})
+
+const checkedBackgroundClass = computed(() => {
+    const backgroundVariant = {
+        [SwitchStyle.BRAND]: 'bg-background-primary-brand-checked',
+        [SwitchStyle.SUCCESS]: 'bg-background-success-bold',
+    }
+    return backgroundVariant[props.styleType as SwitchStyle] || 'bg-background-primary-brand-checked'
+})
+
+// Handlers
+const toggleSwitch = () => {
+    if (props.disabled) return
+
+    emit('update:modelValue', !props.modelValue)
+}
+
+const handleNativeChange = () => {
+    if (props.disabled) return
+
+    emit('update:modelValue', !props.modelValue)
+}
+</script>

package/components/forms/fields/SwitchField.vue

@@ -54,43 +54,15 @@
                 />
             </div>
 
-            <!-- Visually hidden native checkbox (remains accessible to screen readers) -->
-            <input
-                :id="id"
-                type="checkbox"
-                :checked="modelValue"
-                class="sr-only"
-                :aria-label="ariaLabel || label || legend || 'Toggle'"
-                :disabled="disabled"
-                @change="handleChange"
-                @keydown.space.prevent="toggleCheckbox"
-            >
-
-            <!-- Custom Switch -->
-            <div
-                role="switch"
-                :aria-checked="modelValue"
-                :aria-label="ariaLabel || label || legend || 'Toggle'"
-                :class="[
-                    'relative flex items-center',
-                    controlFieldSizeClass,
-                    'rounded-full transition-colors',
-                    'border border-border-default',
-                    modelValue ? checkedBackgroundClass : 'bg-background-neutral-subtle',
-                    disabled ? 'bg-background-neutral-disabled cursor-not-allowed opacity-disabled' : 'cursor-pointer'
-                ]"
-                @click="toggleCheckbox"
-            >
-                <div 
-                    :class="[ 
-                        'absolute bg-icon-on-filled rounded-full shadow-md transform transition-transform',
-                        'aspect-square',
-                        controlFieldHandlerSizeClass,
-                        modelValue ? 'translate-x-6' : 'translate-x-1',
-                        'bg-icon-neutral-on-filled-bg'
-                    ]" 
-                />
-            </div>
+            <Switch
+                :id
+                :ariaLabel="ariaLabel || label || legend || 'Toggle'"
+                :modelValue
+                :disabled
+                :size
+                :styleType
+                @update:modelValue="handleSwitchUpdate"
+            />
         </div>
 
         <!-- Help Text -->
@@ -158,26 +130,6 @@ const validationMode = useInjectedValidationMode()
 const hasError = computed(() => props.error !== '')
 
 // Computed classes
-const controlFieldSizeClass = computed(() => {
-    const sizeVariant = {
-        [ControlFieldSize.XS]: 'w-[32px] h-[16px] min-w-[32px] min-h-[16px]',
-        [ControlFieldSize.SM]: 'w-[40px] h-[20px] min-w-[40px] min-h-[20px]',
-        [ControlFieldSize.MD]: 'w-[44px] h-[24px] min-w-[44px] min-h-[24px]',
-        [ControlFieldSize.LG]: 'w-[56px] h-[32px] min-w-[56px] min-h-[32px]',
-    }
-    return sizeVariant[props.size as ControlFieldSize] || 'w-[44px] h-[24px] min-w-[44px] min-h-[24px]'
-})
-
-const controlFieldHandlerSizeClass = computed(() => {
-    const sizeVariant = {
-        [ControlFieldSize.XS]: 'w-[12px] h-[12px]',
-        [ControlFieldSize.SM]: 'w-[16px] h-[16px]',
-        [ControlFieldSize.MD]: 'w-[16px] h-[16px]',
-        [ControlFieldSize.LG]: 'w-[24px] h-[24px]',
-    }
-    return sizeVariant[props.size as ControlFieldSize] || 'w-[16px] h-[16px]'
-})
-
 const labelSizeClass = computed(() => {
     const sizeVariant = {
         [ControlFieldSize.XS]: 'text-xs',
@@ -198,29 +150,15 @@ const iconSizeClass = computed(() => {
     return sizeVariant[props.size as ControlFieldSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
 })
 
-const checkedBackgroundClass = computed(() => {
-    const backgroundVariant = {
-        [SwitchStyle.BRAND]: 'bg-background-primary-brand-checked',
-        [SwitchStyle.SUCCESS]: 'bg-background-success-bold',
-    }
-    return backgroundVariant[props.styleType as SwitchStyle] || 'bg-background-primary-brand-checked'
-})
-
 // Handlers
-const handleChange = () => {
-    if (validationMode.value === FormValidationMode.BLUR) {
-        runValidation()
-    }
-}
-
-const toggleCheckbox = () => {
+const handleSwitchUpdate = (value: boolean) => {
     if (props.disabled) return
 
     if (validationMode.value === FormValidationMode.BLUR) {
         runValidation()
     }
 
-    emit('update:modelValue', !props.modelValue)
+    emit('update:modelValue', value)
 }
 
 const runValidation = () => {

package/components/forms/fields/radio/RadioButtonField.vue

@@ -11,6 +11,7 @@
             'py-4',
             'rounded-lg',
             'hover:cursor-pointer',
+            'transition-colors duration-200 ease-out',
             modelValue === value && selectedBackgroundColorClass,
             disabled && 'opacity-disabled'
         ]"
@@ -81,7 +82,7 @@
                 'border', 
                 'rounded-full', 
                 'flex items-center justify-center',
-                'transition-colors',
+                'transition-colors duration-200 ease-out',
                 modelValue === value ? selectedCheckboxBackgroundColorClass : 'bg-neutral-white border-border-default',
                 modelValue === value && 'border-0',
                 disabled ? 'cursor-not-allowed' : 'cursor-pointer'

package/components/forms/fields/radio/RadioField.vue

@@ -40,7 +40,7 @@
                     'border', 
                     'rounded-full', 
                     'flex items-center justify-center',
-                    'transition-colors',
+                    'transition-colors duration-200 ease-out',
                     modelValue === value ? 'bg-background-primary-brand-checked border-0' : 'bg-neutral-white border-border-default',
                     modelValue === value && disabled && '!bg-background-neutral-disabled !border-border-neutral-disabled',
                     disabled ? 'bg-background-neutral-disabled cursor-not-allowed' : 'cursor-pointer'

package/components/navigation/links/NavLink.vue

@@ -10,6 +10,7 @@
             :class="[
             'group flex items-center justify-center',
             'text-text-primary-brand-default',
+            'transition-colors duration-200 ease-out',
             !props.disabled ? 'hover:text-text-primary-brand-hover' : 'opacity-disabled cursor-not-allowed',
             gapClass,
         ]">

package/components/navigation/nav-sidebar/NavSidebarMenuItem.vue

@@ -8,6 +8,7 @@
             'items-center',
             'text-left',
             'rounded-lg',
+            'transition-colors duration-200 ease-out',
             'hover:bg-background-neutral-hover',
             'justify-between',
             levelTextClass,

package/components/navigation/nav-sidebar/NavSidebarMenuItemsTree.vue

@@ -41,25 +41,26 @@
                     @click="handleItemClick(item, getNodePath(index))"
                 />
 
-                <NavSidebarMenuItemsTree
-                    v-if="canRenderChildren(item) && isNodeOpen(getNodePath(index))"
-                    :items="item.children ?? []"
-                    :level="level + 1"
-                    :isCollapsed
-                    :openItems
-                    :itemsStyleType
-                    :itemsTextClass
-                    :itemsIconClass
-                    :subItemsCustomClass
-                    :subItemsTextClass
-                    :subItemsIconClass
-                    :thirdLevelItemsCustomClass
-                    :prefetchOn
-                    :showCollapseDivider
-                    :showNestedLevelGuide
-                    :pathPrefix="getNodePath(index)"
-                    @toggle="emit('toggle', $event)"
-                />
+                <VerticalExpansionTransition v-if="canRenderChildren(item)" v-show="isNodeOpen(getNodePath(index))">
+                    <NavSidebarMenuItemsTree
+                        :items="item.children ?? []"
+                        :level="level + 1"
+                        :isCollapsed
+                        :openItems
+                        :itemsStyleType
+                        :itemsTextClass
+                        :itemsIconClass
+                        :subItemsCustomClass
+                        :subItemsTextClass
+                        :subItemsIconClass
+                        :thirdLevelItemsCustomClass
+                        :prefetchOn
+                        :showCollapseDivider
+                        :showNestedLevelGuide
+                        :pathPrefix="getNodePath(index)"
+                        @toggle="emit('toggle', $event)"
+                    />
+                </VerticalExpansionTransition>
             </template>
         </template>
     </div>

package/components/pagination/SimplePagination.vue

@@ -6,7 +6,7 @@
             :disabled="modelValue === 1"
             :ariaLabel="previousPageAriaLabel"
             :class="[
-                'bg-transparent',
+                'bg-transparent transition-colors duration-200 ease-out',
                 modelValue > 1 && 'hover:border border-border-default',
             ]"
             @click="goToPreviousPage"
@@ -20,7 +20,7 @@
             :disabled="modelValue === totalPages"
             :ariaLabel="nextPageAriaLabel"
             :class="[
-                'bg-transparent',
+                'bg-transparent transition-colors duration-200 ease-out',
                 modelValue < totalPages && 'hover:border border-border-default',
             ]"
             @click="goToNextPage"

package/components/rating/RatingItem.vue

@@ -4,7 +4,7 @@
         :class="[
             iconSizeClass,
             colorClass,
-            isInteractive && 'hover:cursor-pointer'
+            isInteractive && 'hover:cursor-pointer hover:scale-110 transition-transform duration-150 ease-out'
         ]"
     />
 </template>

package/components/spinners/Spinner.vue

@@ -1,6 +1,5 @@
 <template>
-    <div
-        role="status"
+    <output
         aria-label="Loading"
         :class="[
             'animate-spin',

package/components/steppers/CircleStepper.vue

@@ -14,6 +14,7 @@
                 :stepIcon="item.icon"
                 :completedIcon
                 :isHovered="isInteractive && hoveredIndex === index"
+                :class="isInteractive && 'cursor-pointer'"
                 @click="handleStepClick(index)"
                 @mouseenter="handleMouseEnter(index)"
                 @mouseleave="handleMouseLeave"

package/components/steppers/Step.vue

@@ -23,6 +23,7 @@
             <span
                 :class="[
                     'font-semibold',
+                    'transition-colors duration-200 ease-out',
                     titleClass,
                 ]"
             >

package/components/steppers/StepIndicator.vue

@@ -7,6 +7,7 @@
             'rounded-full',
             'select-none',
             'text-center',
+            'transition-colors duration-200 ease-out',
             containerBackgroundClass,
             containerSizeClass,
             containerBorderClass,
@@ -18,6 +19,7 @@
             :class="[
                 'flex items-center justify-center',
                 'font-bold',
+                'transition-colors duration-200 ease-out',
                 stepNumberSizeClass,
                 textColorClass,
             ]"
@@ -39,6 +41,7 @@
             :class="[
                 'flex items-center justify-center',
                 'font-bold',
+                'transition-colors duration-200 ease-out',
                 stepNumberSizeClass,
                 textColorClass,
             ]"
@@ -60,6 +63,7 @@
             :class="[
                 'flex items-center justify-center',
                 'font-bold text-text-primary-brand-default',
+                'transition-colors duration-200 ease-out',
                 stepNumberSizeClass,
                 textColorClass,
             ]"
@@ -75,11 +79,12 @@
             </template>
             <template v-else-if="type === StepIndicatorType.EMPTY">
                 <!-- Circle -->
-                <div 
+                <div
                     :class="[
                         'w-[10px] h-[10px] rounded-full bg-icon-primary-brand-default',
+                        'transition-colors duration-200 ease-out',
                         circleColorClass,
-                    ]" 
+                    ]"
                 />
             </template>
         </span>

package/package.json

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