@imaginario27/air-ui-ds 1.13.7 → 1.13.9

package/CHANGELOG.md

@@ -5,41 +5,58 @@ 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.13.8 - 2026-06-03
+
+Release type: patch.
+Commits found in range: 0.
+
+### Changed
+
+1. Historical release reconstructed from npm publish metadata (no package commits found in this publish window).
+
+- Package: @imaginario27/air-ui-ds.
+
+## 1.13.7 - 2026-06-03
+
+Release type: patch.
+Commits found in range: 0.
+
+### Changed
+
+1. Historical release reconstructed from npm publish metadata (no package commits found in this publish window).
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.13.6 - 2026-06-03
 
 Release type: patch.
 Commits found in range: 1.
 
-### Fixed
+### Added
 
-1. fix missing buttons aria labels ([bc608ad](https://github.com/imaginario27/air-ui/commit/bc608ad6db69062f28a67eeeed6c00b50529c3bd))
+1. add accessibility attributes and fix typescript errors (#114) ([0b7bedb](https://github.com/imaginario27/air-ui/commit/0b7bedb6f9ae921a3422f8a0cbca471faadd7d42) (PR [#114](https://github.com/imaginario27/air-ui/pull/114)))
 
 - Package: @imaginario27/air-ui-ds.
 
 ## 1.13.5 - 2026-06-03
 
 Release type: patch.
-Commits found in range: 3.
+Commits found in range: 1.
 
 ### Added
 
-1. add accessibility attributes across components ([766675d](https://github.com/imaginario27/air-ui/commit/766675db2deaa85576ed5799e9de62a5ea112c89))
-2. make MetricCard description optional and rewrite README (#113) ([fe0e88a](https://github.com/imaginario27/air-ui/commit/fe0e88a59be6171a15d1bf7cb894f12319c3fd23) (PR [#113](https://github.com/imaginario27/air-ui/pull/113)))
-
-### Fixed
-
-1. resolve typescript errors in DropdownMenuItem and ModalDialog ([02e229b](https://github.com/imaginario27/air-ui/commit/02e229b9d6ddfa945f2817c726e3f555e079c6d4))
+1. make MetricCard description optional and rewrite README (#113) ([fe0e88a](https://github.com/imaginario27/air-ui/commit/fe0e88a59be6171a15d1bf7cb894f12319c3fd23) (PR [#113](https://github.com/imaginario27/air-ui/pull/113)))
 
 - Package: @imaginario27/air-ui-ds.
 
 ## 1.13.4 - 2026-05-26
 
 Release type: patch.
-Commits found in range: 1.
+Commits found in range: 0.
 
-### Added
+### Changed
 
-1. make MetricCard description prop optional ([53937fb](https://github.com/imaginario27/air-ui/commit/53937fbca5cb1e3f350effdcb36a6a20bc9c50c5))
+1. Historical release reconstructed from npm publish metadata (no package commits found in this publish window).
 
 - Package: @imaginario27/air-ui-ds.
 

package/components/buttons/options/OptionButtonGroup.vue

@@ -1,7 +1,8 @@
 <template>
     <div
+        :id="id"
         role="group"
-        aria-label="Options"
+        :aria-label="ariaLabel || 'Options'"
         :class="[
             'flex',
             'flex-wrap gap-2',
@@ -28,6 +29,8 @@
 
 <script setup lang="ts">
 const props = defineProps({
+    id: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     modelValue: {
         type: [String, Number, Array] as PropType<string | number | string[]>,
         default: 'button-1',

package/components/buttons/toggle/ToggleButtonGroup.vue

@@ -1,7 +1,8 @@
 <template>
     <div
+        :id="id"
         role="group"
-        aria-label="Toggle options"
+        :aria-label="ariaLabel || 'Toggle options'"
         :class="[
             'flex',
             groupStyle === ToggleButtonGroupStyle.GROUPED ? 'border border-border-default' : 'flex-wrap gap-3',
@@ -51,6 +52,8 @@
 <script setup lang="ts">
 // Props
 defineProps({
+    id: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     modelValue: {
         type: String as PropType<string>,
         default: 'button-1',

package/components/dropdowns/DropdownSelect.vue

@@ -17,10 +17,11 @@
             <template #activator="{ isOpen }">
                 <!-- Select Box -->
                 <div
+                    :id="id"
                     role="combobox"
                     :aria-expanded="isOpen"
                     aria-haspopup="listbox"
-                    :aria-label="placeholder"
+                    :aria-label="ariaLabel || placeholder"
                     :tabindex="disabled ? -1 : 0"
                     :class="[
                         'select-box',
@@ -221,6 +222,7 @@ import missingImagePlaceholder from '@/assets/images/placeholders/missing-image-
 // Props
 const props = defineProps({
     id: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     options: {
         type: Array as PropType<SelectOption[]>,
         default: () => [

package/components/forms/Checkbox.vue

@@ -5,6 +5,7 @@
             type="checkbox"
             :checked="modelValue"
             class="sr-only"
+            :aria-label="ariaLabel || id"
             :disabled="disabled"
             @change="handleNativeChange"
             @keydown.space.prevent="toggleCheckbox"
@@ -13,7 +14,7 @@
         <div
             role="checkbox"
             :aria-checked="modelValue"
-            :aria-label="id"
+            :aria-label="ariaLabel || id"
             :class="[
                 'flex items-center justify-center',
                 controlFieldSizeClass,
@@ -43,6 +44,7 @@ const props = defineProps({
         type: String as PropType<string>,
         required: true,
     },
+    ariaLabel: String as PropType<string>,
     modelValue: {
         type: Boolean as PropType<boolean>,
         default: false,

package/components/forms/DataDetailsFieldGroup.vue

@@ -29,7 +29,7 @@ const props = defineProps({
     },
     titleClass: String as PropType<string>,
     headingTag: {
-        type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>,
+        type: String as PropType<HeadingTag>,
         default: 'h3',
         validator: (value: string ) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value as string)
     },

package/components/forms/FormFieldGroup.vue

@@ -29,7 +29,7 @@ const props =defineProps({
     },
     titleClass: String as PropType<string>,
     headingTag: {
-        type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>,
+        type: String as PropType<HeadingTag>,
         default: 'h3',
         validator: (value: string ) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value as string)
     },

package/components/forms/fields/ButtonField.vue

@@ -13,6 +13,7 @@
             {{ label }}
         </label>
         <ActionButton 
+            :aria-label="!label ? ariaLabel : undefined"
             :text
             :size
             :icon
@@ -40,6 +41,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     actionType: {
         type: String as PropType<ButtonActionType>,
         default: ButtonActionType.ACTION,

package/components/forms/fields/CheckboxField.vue

@@ -21,7 +21,7 @@
         >
             <!-- Label (inverted)-->
             <label 
-                v-if="inverse"
+                v-if="inverse && label"
                 :for="id" 
                 :class="[
                     disabled && 'text-text-neutral-disabled',
@@ -32,6 +32,7 @@
 
             <Checkbox
                 :id="id"
+                :ariaLabel="!label ? (ariaLabel || legend) : undefined"
                 :modelValue="modelValue"
                 :disabled="disabled"
                 :size="size"
@@ -40,7 +41,7 @@
             
             <!-- Label (natural position) -->
             <label 
-                v-if="!inverse"
+                v-if="!inverse && label"
                 :for="id" 
                 :class="[
                     disabled && 'text-text-neutral-disabled',
@@ -75,6 +76,7 @@ const props = defineProps({
         type: String as PropType<string>, 
         default: 'Text',
     },
+    ariaLabel: String as PropType<string>,
     legend: String as PropType<string>,
     helpText: String as PropType<string>,
     modelValue: { 

package/components/forms/fields/DataField.vue

@@ -37,6 +37,7 @@
                         v-if="hasCopyToClipboardButton"
                         icon="mdi:content-copy"
                         :size="ButtonSize.XS"
+                        :ariaLabel="copyButtonAriaLabel"
                         @click="handleCopyToClipboard"
                     />
                 </div>
@@ -76,6 +77,7 @@ const props = defineProps({
         required: true, 
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     text: [String, Number] as PropType<string | number>,
     emptyText: {
         type: String as PropType<string>,
@@ -101,6 +103,18 @@ const isEmpty = computed(() => {
     return props.text === '' || props.text === null || props.text === undefined || props.text === 0
 })
 
+const copyButtonAriaLabel = computed(() => {
+    if (props.ariaLabel) {
+        return props.ariaLabel
+    }
+
+    if (props.label) {
+        return `Copy ${props.label}`
+    }
+
+    return 'Copy value'
+})
+
 // Toast
 const { $toast } = useNuxtApp()
 

package/components/forms/fields/FileUploadField.vue

@@ -25,7 +25,7 @@
             >
                 <img
                     :src="previewImageUrl"
-                    :alt="label || 'Preview'"
+                    :alt="label || ariaLabel || 'Preview'"
                     class="w-full h-full object-cover rounded-md"
                     @error="handlePreviewError"
                 >
@@ -43,6 +43,7 @@
                     v-model="selectedFiles"
                     v-model:total-progress="localTotalProgress"
                     :title="computedTitleText"
+                    :aria-label="!label ? ariaLabel : undefined"
                     :description="computedDescriptionText"
                     :singleFileTitleText
                     :icon
@@ -124,6 +125,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     title: {
         type: String as PropType<string>,
         default: 'Drag and drop files here',

package/components/forms/fields/InputField.vue

@@ -52,6 +52,7 @@
             <input
                 :id
                 :type="props.type === 'password' ? passwordInputType : props.type"
+                :aria-label="!label ? ariaLabel : undefined"
                 :placeholder
                 :value="modelValue"
                 :maxlength="maxLength"
@@ -154,6 +155,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     type: {
         type: String as PropType<AllowedInputType>,
         default: 'text',

package/components/forms/fields/OptionButtonsGroupField.vue

@@ -21,6 +21,8 @@
         </label>
 
         <OptionButtonGroup 
+            :id
+            :ariaLabel="!label ? ariaLabel : label"
             :buttons
             :modelValue
             :disabled
@@ -55,6 +57,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     buttons: Array as PropType<OptionButton[]>,
     modelValue: {

package/components/forms/fields/PinField.vue

@@ -27,6 +27,7 @@
                 :key="index"
                 :ref="el => setInputRef(el, index)"
                 type="text"
+                :aria-label="getInputAriaLabel(index)"
                 :inputmode="type === 'number' ? 'numeric' : 'text'"
                 maxlength="1"
                 :value="displayValue(value)"
@@ -93,6 +94,7 @@ const props = defineProps({
         validator: (value: InputSize) => Object.values(InputSize).includes(value),
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     placeholder: String as PropType<string>,
     helpText: String as PropType<string>,
     mask: {
@@ -280,6 +282,11 @@ const displayValue = (value: string) => {
     return value
 }
 
+const getInputAriaLabel = (index: number) => {
+    const baseLabel = props.label || props.ariaLabel || 'PIN code'
+    return `${baseLabel} ${index + 1}`
+}
+
 const setInputRef = (el: Element | ComponentPublicInstance | null, index: number) => {
     if (!el) return
     inputs.value[index] = el as HTMLInputElement

package/components/forms/fields/RepeaterField.vue

@@ -21,6 +21,7 @@
                     :styleType="ButtonStyleType.NEUTRAL_OUTLINED"
                     icon="mdi:plus-circle-outline"
                     :size="ButtonSize.SM"
+                    :ariaLabel="addItemAriaLabel"
                     @click="addItem"
                 />
 
@@ -30,6 +31,7 @@
                     :styleType="ButtonStyleType.DELETE_SOFT"
                     icon="mdi:minus-circle-outline"
                     :size="ButtonSize.SM"
+                    :ariaLabel="removeItemAriaLabel"
                     @click="removeItem(index)"
                 />
             </div>
@@ -47,6 +49,14 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    addItemAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Add item',
+    },
+    removeItemAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Remove item',
+    },
 })
 
 const emit = defineEmits(['update:modelValue'])

package/components/forms/fields/RulesField.vue

@@ -28,6 +28,7 @@
             >
                 <SelectField
                     :id="`${id}-item-${index}`"
+                    :ariaLabel="`${itemFieldAriaLabel} ${index + 1}`"
                     :modelValue="rule.item"
                     :options="itemOptions"
                     :placeholder="itemPlaceholder"
@@ -37,6 +38,7 @@
 
                 <SelectField
                     :id="`${id}-operator-${index}`"
+                    :ariaLabel="`${operatorFieldAriaLabel} ${index + 1}`"
                     :modelValue="rule.operator"
                     :options="getFilteredOperators(getRuleInputType(rule))"
                     :placeholder="operatorPlaceholder"
@@ -46,6 +48,7 @@
 
                 <InputField
                     :id="`${id}-value-${index}`"
+                    :ariaLabel="`${valueFieldAriaLabel} ${index + 1}`"
                     :modelValue="rule.value"
                     :type="getRuleInputType(rule)"
                     :placeholder="valuePlaceholder"
@@ -57,6 +60,7 @@
                 <ActionIconButton
                     :id="`${id}-action-${index}`"
                     :icon="getRowActionIcon(index)"
+                    :ariaLabel="index === rules.length - 1 ? addRuleAriaLabel : removeRuleAriaLabel"
                     :styleType="getActionButtonStyle(index)"
                     :size="ButtonSize.MD"
                     :disabled="isActionDisabled(index)"
@@ -100,6 +104,26 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    itemFieldAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Rule item',
+    },
+    operatorFieldAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Rule operator',
+    },
+    valueFieldAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Rule value',
+    },
+    addRuleAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Add rule',
+    },
+    removeRuleAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Remove rule',
+    },
     helpText: String as PropType<string>,
     itemOptions: {
         type: Array as PropType<SelectOption[]>,

package/components/forms/fields/SearchField.vue

@@ -45,6 +45,7 @@
             <!-- Input -->
             <input 
                 :id 
+                :aria-label="!label ? ariaLabel : undefined"
                 :placeholder 
                 :value="modelValue" 
                 :maxlength="maxLength"
@@ -93,6 +94,7 @@ const props = defineProps({
         required: true, 
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     placeholder: { 
         type: String as PropType<string>, 
         default: 'Search', 

package/components/forms/fields/SelectField.vue

@@ -30,6 +30,7 @@
         <DropdownSelect 
             :id
             :key="computedPlaceholder"
+            :ariaLabel="!label ? ariaLabel : undefined"
             :modelValue 
             :options 
             :type 
@@ -71,6 +72,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     required: { 
         type: Boolean as PropType<boolean>, 

package/components/forms/fields/SliderField.vue

@@ -73,6 +73,7 @@
 
         <Slider
             :modelValue="modelValue"
+            :ariaLabel="!label ? ariaLabel : label"
             :type="type"
             :color="color"
             :size="size"
@@ -155,6 +156,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     required: {
         type: Boolean as PropType<boolean>,

package/components/forms/fields/SlotField.vue

@@ -21,6 +21,7 @@
         >
             <slot 
                 :id
+                :ariaLabel
                 :error
                 :hasError 
                 :helpText
@@ -50,6 +51,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     error: {
         type: String as PropType<string>,

package/components/forms/fields/SwitchField.vue

@@ -60,6 +60,7 @@
                 type="checkbox"
                 :checked="modelValue"
                 class="sr-only"
+                :aria-label="ariaLabel || label || legend || 'Toggle'"
                 :disabled="disabled"
                 @change="handleChange"
                 @keydown.space.prevent="toggleCheckbox"
@@ -69,7 +70,7 @@
             <div
                 role="switch"
                 :aria-checked="modelValue"
-                :aria-label="label || legend || 'Toggle'"
+                :aria-label="ariaLabel || label || legend || 'Toggle'"
                 :class="[
                     'relative flex items-center',
                     controlFieldSizeClass,
@@ -114,6 +115,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     legend: String as PropType<string>,
     helpText: String as PropType<string>,
     

package/components/forms/fields/TagsField.vue

@@ -64,6 +64,7 @@
                     :id
                     ref="inputRef"
                     type="text"
+                    :aria-label="!label ? ariaLabel : undefined"
                     :value="inputValue"
                     :placeholder="computedPlaceholder"
                     :autofocus
@@ -116,6 +117,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     placeholder: {
         type: String as PropType<string>,
         default: 'Enter values separated by commas',

package/components/forms/fields/TextareaField.vue

@@ -36,6 +36,7 @@
             <textarea 
                 :id
                 ref="textareaRef"
+                :aria-label="!label ? ariaLabel : undefined"
                 :placeholder
                 :value="modelValue"
                 :maxlength="maxLength"
@@ -104,6 +105,7 @@ const props = defineProps({
         required: true, 
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     placeholder: { 
         type: String as PropType<string>, 
         default: 'Placeholder', 

package/components/forms/fields/ToggleButtonsGroupField.vue

@@ -20,6 +20,8 @@
         </label>
 
         <ToggleButtonGroup 
+            :id
+            :ariaLabel="!label ? ariaLabel : label"
             :buttons
             :modelValue
             :groupStyle
@@ -49,6 +51,7 @@ defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     buttons: Array as PropType<ToggleButton[] | ToggleIconButton[]>,
     onlyIcon: {

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

@@ -76,7 +76,8 @@
             :name="name"
             :value="value"
             :checked="modelValue === value" 
-            class="hidden" 
+            class="sr-only"
+            :aria-label="!label ? ariaLabel : undefined"
             :disabled
             @change="selectRadio"
         >
@@ -120,6 +121,7 @@ const props = defineProps({
         required: true,
     },
     label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     value: { // Value of the radio button
         type: [String, Number, Boolean] as PropType<string | number | boolean>,

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

@@ -10,7 +10,7 @@
         >
             <!-- Label (inverted position) -->
             <label 
-                v-if="inverse"
+                v-if="inverse && label"
                 :for="id" 
                 :class="[ 
                     disabled && 'text-text-neutral-disabled',
@@ -26,7 +26,8 @@
                 :name="name"
                 :value="value"
                 :checked="modelValue === value" 
-                class="hidden" 
+                class="sr-only"
+                :aria-label="!label ? ariaLabel : undefined"
                 :disabled="disabled"
                 @change="selectRadio"
             >
@@ -58,7 +59,7 @@
             
             <!-- Label (natural position) -->
             <label 
-                v-if="!inverse"
+                v-if="!inverse && label"
                 :for="id" 
                 :class="[ 
                     disabled ? 'text-text-neutral-disabled' : undefined,
@@ -97,10 +98,8 @@ const props = defineProps({
         type: [String, Number, Boolean] as PropType<string | number | boolean>,
         required: true,
     },
-    label: { 
-        type: String as PropType<string>, 
-        default: 'Text',
-    },
+    label: String as PropType<string>,
+    ariaLabel: String as PropType<string>,
     helpText: String as PropType<string>,
     required: { 
         type: Boolean as PropType<boolean>, 

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

@@ -33,6 +33,7 @@
                     :name
                     :value="option.value"
                     :label="option.label"
+                    :ariaLabel="option.ariaLabel"
                     :required
                     :disabled="option.disabled ? option.disabled : disabled"
                     :helpText="option.helpText"
@@ -49,6 +50,7 @@
                     :name
                     :value="option.value"
                     :label="option.label"
+                    :ariaLabel="option.ariaLabel"
                     :required
                     :helpText="option.helpText"
                     :disabled="option.disabled ? option.disabled : disabled"
@@ -83,7 +85,7 @@ const props = defineProps({
         type: Array as PropType<RadioOption[]>,
         required: true,
         validator: (value: RadioOption[]) =>
-            value.every((option) => option.id !== undefined && option.value !== undefined && option.label !== undefined),
+            value.every((option) => option.id !== undefined && option.value !== undefined && (option.label !== undefined || option.ariaLabel !== undefined)),
     },
     modelValue: {
         type: [String, Number, Boolean, null] as PropType<string | number | boolean | null>,

package/components/layouts/ErrorDisplay.vue

@@ -50,6 +50,7 @@
                     :align="alignContent"
                     :size="HeadingSize.MD"
                     :isMobileCentered
+                    headingTag="h1"
                 />
 
                 <p

package/components/layouts/Heading.vue

@@ -91,8 +91,8 @@ const props = defineProps({
             Object.values(HeadingSpacing).includes(value as HeadingSpacing),
     },
     headingTag: {
-        type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>,
-        default: 'h1',
+        type: String as PropType<HeadingTag>,
+        required: true,
         validator: (value: string ) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value as string)
     },
     isMobileCentered: {

package/components/sliders/Slider.vue

@@ -49,7 +49,7 @@
                 ]"
                 :style="[thumbStyle(index, value), radiusStyle]"
                 :disabled
-                :aria-label="isRange ? `Slider thumb ${index + 1}` : 'Slider thumb'"
+                :aria-label="getThumbAriaLabel(index)"
                 :aria-orientation="orientation"
                 :data-testid="`slider-thumb-${index}`"
                 @pointerdown.stop.prevent="startThumbDrag(index, $event)"
@@ -75,6 +75,7 @@
 <script setup lang="ts">
 // Props
 const props = defineProps({
+    ariaLabel: String as PropType<string>,
     modelValue: {
         type: [Number, Array] as PropType<number | [number, number]>,
         default: 0,
@@ -141,6 +142,16 @@ const isRange = computed(() => {
     return props.type === SliderType.RANGE || props.multiple || Array.isArray(props.modelValue)
 })
 
+const getThumbAriaLabel = (index: number) => {
+    const baseLabel = props.ariaLabel || 'Slider'
+
+    if (!isRange.value) {
+        return `${baseLabel} thumb`
+    }
+
+    return `${baseLabel} thumb ${index + 1}`
+}
+
 const safeMax = computed(() => {
     if (props.max <= props.min) {
         return props.min + 1

package/models/types/headings.ts

@@ -0,0 +1 @@
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

package/models/types/radio.ts

@@ -1,7 +1,8 @@
 export interface RadioOption {
     id: string | number
     value: string | number | boolean
-    label: string
+    label?: string
+    ariaLabel?: string
     helpText?: string
     disabled?: boolean
     type?: ColorAccent.INFO | ColorAccent.SUCCESS | ColorAccent.DANGER | ColorAccent.PRIMARY_BRAND | ColorAccent.SECONDARY_BRAND

package/package.json

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