vueless 1.2.15-beta.3 → 1.2.15-beta.5

package/locales/en.json

@@ -1 +1 @@
-{"USelect":{"listIsEmpty":"List is empty.","noDataToShow":"No data to show.","clear":"clear","addMore":"Add more..."},"USwitch":{"inactive":"Off","active":"On"},"UInputFile":{"sizeError":"File size is too big.","formatError":"Format is not supported.","noFile":"No file selected","uploadFile":"Choose file"},"UListbox":{"noDataToShow":"No data to show.","add":"Add","search":"Search..."},"UModalConfirm":{"confirm":"Confirm","cancel":"Cancel"},"UTable":{"noData":"There is no data in the table."},"UCalendar":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok"},"UDatePicker":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok"},"UDatePickerRange":{"ownRange":"Own range","week":"Week","month":"Month","quarter":"Quarter","year":"Year","dateFormatWithDot":"The date should be in format 'dd.mm.yyyy'.","notCorrectMonthNumber":"Wrong month number.","notCorrectDayNumber":"Wrong day in month.","fromDateGraterThanSecond":"The 'from' date should be less than the 'to' date.","toDateSmallerThanFirst":"The 'to' date should be greater than the 'from' date.","today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}}},"UDataList":{"emptyTitle":"","emptyDescription":"There is no data in the list."},"UNotify":{"success":{"default":"Operation successful."},"warning":{"default":"Operation warning."},"error":{"default":"Operation error."}}}
+{"USelect":{"listIsEmpty":"List is empty.","noDataToShow":"No data to show.","clear":"clear","addMore":"Add more..."},"USwitch":{"switch":"Switch","inactive":"Off","active":"On"},"UInputFile":{"sizeError":"File size is too big.","formatError":"Format is not supported.","noFile":"No file selected","uploadFile":"Choose file"},"UListbox":{"noDataToShow":"No data to show.","add":"Add","search":"Search..."},"UModalConfirm":{"confirm":"Confirm","cancel":"Cancel"},"UTable":{"noData":"There is no data in the table.","checkbox":"Checkbox"},"UCalendar":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok","previousYear":"Previous Year","nextYear":"Next Year","previousMonth":"Previous Month","nextMonth":"Next Month"},"UDatePicker":{"today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}},"timeLabel":"Time","okLabel":"Ok","previousYear":"Previous Year","nextYear":"Next Year","previousMonth":"Previous Month","nextMonth":"Next Month"},"UDatePickerRange":{"ownRange":"Own range","week":"Week","month":"Month","quarter":"Quarter","year":"Year","dateFormatWithDot":"The date should be in format 'dd.mm.yyyy'.","notCorrectMonthNumber":"Wrong month number.","notCorrectDayNumber":"Wrong day in month.","fromDateGraterThanSecond":"The 'from' date should be less than the 'to' date.","toDateSmallerThanFirst":"The 'to' date should be greater than the 'from' date.","today":"Today","yesterday":"Yesterday","tomorrow":"Tomorrow","weekdays":{"shorthand":{"sunday":"Sun","monday":"Mon","tuesday":"Tue","wednesday":"Wed","thursday":"Thu","friday":"Fri","saturday":"Sat"},"longhand":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"},"userFormat":{"sunday":"Sunday","monday":"Monday","tuesday":"Tuesday","wednesday":"Wednesday","thursday":"Thursday","friday":"Friday","saturday":"Saturday"}},"months":{"shorthand":{"january":"Jan","february":"Feb","march":"Mar","april":"Apr","may":"May","june":"Jun","july":"Jul","august":"Aug","september":"Sep","october":"Oct","november":"Nov","december":"Dec"},"longhand":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"userFormat":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"}}},"UDataList":{"emptyTitle":"","emptyDescription":"There is no data in the list."},"UNotify":{"success":{"default":"Operation successful."},"warning":{"default":"Operation warning."},"error":{"default":"Operation error."}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.15-beta.3",
+  "version": "1.2.15-beta.5",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.container-accordion-item/UAccordionItem.vue

@@ -145,11 +145,7 @@ const {
         </slot>
       </div>
 
-      <div
-        v-if="description || hasSlotContent(slots['description'])"
-        :id="`description-${elementId}`"
-        v-bind="descriptionAttrs"
-      >
+      <div v-if="description || hasSlotContent(slots['description'])" v-bind="descriptionAttrs">
         <!--
           @slot Use it to add custom description content.
           @binding {string} description

package/ui.container-accordion-item/tests/UAccordionItem.test.ts

@@ -91,7 +91,7 @@ describe("UAccordionItem", () => {
         },
       });
 
-      expect(component.find(`[id="description-${id}"]`).exists()).toBe(true);
+      expect(component.find(`[vl-key='description']`).exists()).toBe(true);
     });
 
     // DataTest prop
@@ -381,13 +381,13 @@ describe("UAccordionItem", () => {
         },
       });
 
-      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+      expect(component.find("[vl-key='description']").classes()).not.toContain("opacity-100");
 
       await component.find(`.${slotClass}`).trigger("click");
-      expect(component.find("[id^='description-']").classes()).toContain("opacity-100");
+      expect(component.find("[vl-key='description']").classes()).toContain("opacity-100");
 
       await component.find(`.${slotClass}`).trigger("click");
-      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+      expect(component.find("[vl-key='description']").classes()).not.toContain("opacity-100");
     });
 
     it("description slot content is always visible when slot is provided", () => {
@@ -461,7 +461,7 @@ describe("UAccordionItem", () => {
         },
       });
 
-      const descriptionElement = component.find("[id^='description-']");
+      const descriptionElement = component.find("[vl-key='description']");
 
       // Initially not opened
       expect(descriptionElement.classes()).not.toContain(openedClass);

package/ui.data-list/config.ts

@@ -53,7 +53,7 @@ export default /*tw*/ {
   defaults: {
     size: "md",
     labelKey: "label",
-    valueKey: "id",
+    valueKey: "value",
     animationDuration: 200,
     /* icons */
     dragIcon: "drag_indicator",

package/ui.data-list/storybook/stories.ts

@@ -30,9 +30,9 @@ export default {
   component: UDataList,
   args: {
     list: [
-      { label: "Expenses", id: 1 },
-      { label: "Revenue Streams", id: 2 },
-      { label: "Departments", id: 3 },
+      { label: "Expenses", value: 1 },
+      { label: "Revenue Streams", value: 2 },
+      { label: "Departments", value: 3 },
     ],
   },
   argTypes: {
@@ -87,29 +87,29 @@ Nesting.args = {
   list: [
     {
       label: "Expenses",
-      id: 1,
+      value: 1,
       children: [
-        { label: "Office Supplies", id: 1.1 },
-        { label: "Travel & Lodging", id: 1.2 },
-        { label: "Utilities", id: 1.3 },
+        { label: "Office Supplies", value: 1.1 },
+        { label: "Travel & Lodging", value: 1.2 },
+        { label: "Utilities", value: 1.3 },
       ],
     },
     {
       label: "Revenue Streams",
-      id: 2,
+      value: 2,
       children: [
-        { label: "Product Sales", id: 2.1 },
-        { label: "Subscription Services", id: 2.2 },
-        { label: "Consulting", id: 2.3 },
+        { label: "Product Sales", value: 2.1 },
+        { label: "Subscription Services", value: 2.2 },
+        { label: "Consulting", value: 2.3 },
       ],
     },
     {
       label: "Departments",
-      id: 3,
+      value: 3,
       children: [
-        { label: "Engineering", id: 3.1 },
-        { label: "Marketing", id: 3.2 },
-        { label: "Finance", id: 3.3 },
+        { label: "Engineering", value: 3.1 },
+        { label: "Marketing", value: 3.2 },
+        { label: "Finance", value: 3.3 },
       ],
     },
   ],
@@ -159,17 +159,17 @@ DragSlot.args = {
   list: [
     {
       label: "John Doe (Engineering)",
-      id: 1,
+      value: 1,
       avatar: "https://cdn-icons-png.flaticon.com/128/1999/1999625.png",
     },
     {
       label: "Michael Johnson (Finance)",
-      id: 2,
+      value: 2,
       avatar: "https://cdn-icons-png.flaticon.com/128/4140/4140057.png",
     },
     {
       label: "Emma Smith (Marketing)",
-      id: 3,
+      value: 3,
       avatar: "https://cdn-icons-png.flaticon.com/128/4140/4140047.png",
     },
   ],
@@ -183,18 +183,18 @@ DragSlot.args = {
 export const ActionsSlot = DefaultTemplate.bind({});
 ActionsSlot.args = {
   list: [
-    { label: "Expenses", id: 1 },
+    { label: "Expenses", value: 1 },
     {
       label: "Revenue Streams",
-      id: 2,
+      value: 2,
       actions: false,
       children: [
-        { label: "Product Sales", id: 2.1 },
-        { label: "Subscription Services", id: 2.2 },
-        { label: "Consulting", id: 2.3, actions: false },
+        { label: "Product Sales", value: 2.1 },
+        { label: "Subscription Services", value: 2.2 },
+        { label: "Consulting", value: 2.3, actions: false },
       ],
     },
-    { label: "Departments", id: 3, crossed: true },
+    { label: "Departments", value: 3, crossed: true },
   ],
   slotTemplate: `
     <template #actions="{ item }">

package/ui.data-list/tests/UDataList.test.ts

@@ -10,21 +10,21 @@ import type { Props, DataListItem } from "../types";
 
 describe("UDataList.vue", () => {
   const defaultList: DataListItem[] = [
-    { id: 1, label: "Item 1" },
-    { id: 2, label: "Item 2", crossed: true },
-    { id: 3, label: "Item 3", actions: false },
+    { value: 1, label: "Item 1" },
+    { value: 2, label: "Item 2", crossed: true },
+    { value: 3, label: "Item 3", actions: false },
   ];
 
   const nestedList: DataListItem[] = [
     {
-      id: 1,
+      value: 1,
       label: "Parent 1",
       children: [
-        { id: 11, label: "Child 1.1" },
-        { id: 12, label: "Child 1.2" },
+        { value: 11, label: "Child 1.1" },
+        { value: 12, label: "Child 1.2" },
       ],
     },
-    { id: 2, label: "Parent 2" },
+    { value: 2, label: "Parent 2" },
   ];
 
   describe("Props", () => {

package/ui.data-table/config.ts

@@ -105,6 +105,8 @@ export default /*tw*/ {
   `,
   i18n: {
     noData: "There is no data in the table.",
+    /* These are used for a11y. */
+    checkbox: "Checkbox",
   },
   defaults: {
     emptyCellLabel: "—",

package/ui.data-table/storybook/stories.ts

@@ -7,6 +7,8 @@ import {
 } from "../../utils/storybook";
 import { getRandomId } from "../../utils/helper";
 
+import defaultConfig from "../config";
+
 import UTable from "../UTable.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
@@ -731,7 +733,7 @@ export const EmptyStateSlot = DefaultTemplate.bind({});
 EmptyStateSlot.args = {
   rows: [],
   config: {
-    i18n: { noData: "Fetching data..." },
+    i18n: { ...defaultConfig.i18n, noData: "Fetching data..." },
     bodyEmptyStateCell: "py-10",
   },
   slotTemplate: `

package/ui.dropdown-badge/config.ts

@@ -37,7 +37,7 @@ export default /*tw*/ {
     size: "md",
     variant: "solid",
     labelKey: "label",
-    valueKey: "id",
+    valueKey: "value",
     groupLabelKey: "label",
     yPosition: "bottom",
     xPosition: "left",

package/ui.dropdown-badge/storybook/stories.ts

@@ -41,9 +41,9 @@ export default {
   args: {
     label: "Order Status",
     options: [
-      { label: "Pending", id: "pending" },
-      { label: "Delivered", id: "delivered" },
-      { label: "Cancelled", id: "cancelled" },
+      { label: "Pending", value: "pending" },
+      { label: "Delivered", value: "delivered" },
+      { label: "Cancelled", value: "cancelled" },
     ],
   },
   argTypes: {

package/ui.dropdown-badge/tests/UDropdownBadge.test.ts

@@ -10,9 +10,9 @@ import type { Props } from "../types";
 
 describe("UDropdownBadge.vue", () => {
   const defaultOptions = [
-    { id: 1, label: "Option 1" },
-    { id: 2, label: "Option 2" },
-    { id: 3, label: "Option 3" },
+    { value: 1, label: "Option 1" },
+    { value: 2, label: "Option 2" },
+    { value: 3, label: "Option 3" },
   ];
 
   // Props tests
@@ -43,7 +43,7 @@ describe("UDropdownBadge.vue", () => {
       });
 
       // Find the selected option's label
-      const selectedOption = defaultOptions.find((option) => option.id === modelValue);
+      const selectedOption = defaultOptions.find((option) => option.value === modelValue);
 
       expect(component.findComponent(UBadge).props("label")).toBe(selectedOption?.label);
     });
@@ -61,7 +61,7 @@ describe("UDropdownBadge.vue", () => {
       });
 
       // Find the selected options' labels
-      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.id));
+      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.value));
       const expectedLabel = selectedOptions.map((option) => option.label).join(", ");
 
       expect(component.findComponent(UBadge).props("label")).toBe(expectedLabel);

package/ui.dropdown-button/config.ts

@@ -50,7 +50,7 @@ export default /*tw*/ {
     size: "md",
     variant: "solid",
     labelKey: "label",
-    valueKey: "id",
+    valueKey: "value",
     groupLabelKey: "label",
     yPosition: "bottom",
     xPosition: "left",

package/ui.dropdown-button/storybook/stories.ts

@@ -41,9 +41,9 @@ export default {
   args: {
     label: "Actions",
     options: [
-      { label: "Edit", id: "edit" },
-      { label: "Copy", id: "copy" },
-      { label: "Remove", id: "delete" },
+      { label: "Edit", value: "edit" },
+      { label: "Copy", value: "copy" },
+      { label: "Remove", value: "delete" },
     ],
   },
   argTypes: {
@@ -365,7 +365,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -373,7 +373,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -381,7 +381,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -389,7 +389,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',

package/ui.dropdown-button/tests/UDropdownButton.test.ts

@@ -10,9 +10,9 @@ import type { Props } from "../types";
 
 describe("UDropdownButton.vue", () => {
   const defaultOptions = [
-    { id: 1, label: "Option 1" },
-    { id: 2, label: "Option 2" },
-    { id: 3, label: "Option 3" },
+    { value: 1, label: "Option 1" },
+    { value: 2, label: "Option 2" },
+    { value: 3, label: "Option 3" },
   ];
 
   // Props tests
@@ -43,7 +43,7 @@ describe("UDropdownButton.vue", () => {
       });
 
       // Find the selected option's label
-      const selectedOption = defaultOptions.find((option) => option.id === modelValue);
+      const selectedOption = defaultOptions.find((option) => option.value === modelValue);
 
       expect(component.findComponent(UButton).props("label")).toBe(selectedOption?.label);
     });
@@ -61,7 +61,7 @@ describe("UDropdownButton.vue", () => {
       });
 
       // Find the selected options' labels
-      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.id));
+      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.value));
       const expectedLabel = selectedOptions.map((option) => option.label).join(", ");
 
       expect(component.findComponent(UButton).props("label")).toBe(expectedLabel);

package/ui.dropdown-link/config.ts

@@ -32,7 +32,7 @@ export default /*tw*/ {
     color: "primary",
     size: "md",
     labelKey: "label",
-    valueKey: "id",
+    valueKey: "value",
     groupLabelKey: "label",
     yPosition: "bottom",
     xPosition: "left",

package/ui.dropdown-link/storybook/stories.ts

@@ -40,9 +40,9 @@ export default {
   args: {
     label: "Account",
     options: [
-      { label: "Profile", id: "profile" },
-      { label: "Settings", id: "settings" },
-      { label: "Logout", id: "logout" },
+      { label: "Profile", value: "profile" },
+      { label: "Settings", value: "settings" },
+      { label: "Logout", value: "logout" },
     ],
   },
   argTypes: {

package/ui.dropdown-link/tests/UDropdownLink.test.ts

@@ -10,9 +10,9 @@ import type { Props } from "../types";
 
 describe("UDropdownLink.vue", () => {
   const defaultOptions = [
-    { id: 1, label: "Option 1" },
-    { id: 2, label: "Option 2" },
-    { id: 3, label: "Option 3" },
+    { value: 1, label: "Option 1" },
+    { value: 2, label: "Option 2" },
+    { value: 3, label: "Option 3" },
   ];
 
   // Props tests
@@ -43,7 +43,7 @@ describe("UDropdownLink.vue", () => {
       });
 
       // Find the selected option's label
-      const selectedOption = defaultOptions.find((option) => option.id === modelValue);
+      const selectedOption = defaultOptions.find((option) => option.value === modelValue);
 
       expect(component.findComponent(ULink).props("label")).toBe(selectedOption?.label);
     });
@@ -61,7 +61,7 @@ describe("UDropdownLink.vue", () => {
       });
 
       // Find the selected options' labels
-      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.id));
+      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.value));
       const expectedLabel = selectedOptions.map((option) => option.label).join(", ");
 
       expect(component.findComponent(ULink).props("label")).toBe(expectedLabel);

package/ui.form-calendar/UCalendar.vue

@@ -829,6 +829,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.prevYearIcon"
+        :aria-label="localeMessages.previousYear"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('prev-year')"
         @mousedown.prevent.capture
@@ -841,6 +842,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.prevIcon"
+        :aria-label="localeMessages.previousMonth"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('prev')"
         @mousedown.prevent.capture
@@ -866,6 +868,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.nextIcon"
+        :aria-label="localeMessages.nextMonth"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('next')"
         @mousedown.prevent.capture
@@ -879,6 +882,7 @@ const {
         color="grayscale"
         variant="ghost"
         :icon="config.defaults.nextYearIcon"
+        :aria-label="localeMessages.nextYear"
         v-bind="nextPrevButtonAttrs"
         :data-test="getDataTest('next-year')"
         @mousedown.prevent.capture

package/ui.form-calendar/config.ts

@@ -144,6 +144,11 @@ export default /*tw*/ {
     },
     timeLabel: "Time",
     okLabel: "Ok",
+    /* These are used for a11y. */
+    previousYear: "Previous Year",
+    nextYear: "Next Year",
+    previousMonth: "Previous Month",
+    nextMonth: "Next Month",
   },
   defaults: {
     userDateFormat: "j F, Y",

package/ui.form-checkbox/UCheckbox.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { inject, ref, onMounted, computed, watchEffect, toValue, useId } from "vue";
+import { inject, ref, onMounted, computed, watchEffect, toValue, useId, useSlots } from "vue";
 import { isEqual } from "lodash-es";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
@@ -48,12 +49,24 @@ const emit = defineEmits([
   "input",
 ]);
 
+const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
+  COMPONENT_NAME,
+  defaultConfig.i18n,
+  props?.config?.i18n,
+);
+
+const slots = useSlots();
+
 const checkboxName = ref("");
 const checkboxSize = ref(props.size);
 const checkboxColor = ref(props.color);
 
 const elementId = props.id || useId();
 
+const hasLabel = computed(() => Boolean(props.label || slots.label));
+
+const inputAriaLabelledBy = computed(() => (hasLabel.value ? elementId : undefined));
+
 const isBinary = computed(() => !Array.isArray(props.modelValue));
 const isCheckboxInGroup = computed(() => Boolean(toValue(getCheckboxGroupName)));
 
@@ -108,6 +121,10 @@ function onChange() {
   emit("input", newModelValue);
 }
 
+function onIconClick() {
+  document.getElementById(elementId)?.click();
+}
+
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -161,15 +178,17 @@ const {
       :name="checkboxName"
       :checked="isChecked"
       :disabled="disabled"
+      :aria-labelledby="inputAriaLabelledBy"
+      :aria-label="!hasLabel ? localeMessages.checkbox : undefined"
       v-bind="checkboxAttrs"
       :data-test="getDataTest()"
       @change="onChange"
     />
 
-    <label
+    <div
       v-if="isChecked"
       v-bind="partial ? partiallyCheckedAttrs : checkedAttrs"
-      :for="elementId"
+      @click="onIconClick"
     >
       <UIcon
         v-if="partial"
@@ -179,7 +198,7 @@ const {
       />
 
       <UIcon v-else :name="config.defaults.checkedIcon" color="inherit" v-bind="checkedIconAttrs" />
-    </label>
+    </div>
 
     <template #bottom>
       <!-- @slot Use it to add something below the checkbox. -->

package/ui.form-checkbox/config.ts

@@ -51,6 +51,10 @@ export default /*tw*/ {
     },
   },
   partiallyCheckedIcon: "{>checkedIcon}",
+  /* These are used for a11y. */
+  i18n: {
+    checkbox: "Checkbox",
+  },
   defaults: {
     color: "primary",
     size: "md",

package/ui.form-checkbox/tests/UCheckbox.test.ts

@@ -198,7 +198,7 @@ describe("UCheckbox.vue", () => {
           },
         });
 
-        expect(component.find("label").attributes("class")).toContain(color);
+        expect(component.get("[vl-key='checked']").attributes("class")).toContain(`bg-${color}`);
       });
     });
 

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -103,10 +103,10 @@ const { getDataTest, groupLabelAttrs, groupCheckboxAttrs, listAttrs } =
           v-for="(option, index) in options"
           :key="index"
           :model-value="modelValue"
-          :value="option.value"
+          :value="option[valueKey]"
           :true-value="option.trueValue"
           :false-value="option.falseValue"
-          :label="option.label"
+          :label="String(option[labelKey] || undefined)"
           :description="option.description"
           :disabled="disabled"
           v-bind="groupCheckboxAttrs"

package/ui.form-checkbox-group/config.ts

@@ -14,6 +14,8 @@ export default /*tw*/ {
   defaults: {
     color: "primary",
     size: "md",
+    labelKey: "label",
+    valueKey: "value",
     disabled: false,
   },
 };